/* Base común de la parte «app» de Kohala (pedir, seguimiento, admin, rider).
   Mismos colores, letra y formas que estilos.css de la web: se copian los
   tokens en vez de cargar la hoja entera (129 KB) en pantallas que no la usan. */
:root{
  --crema:#efebe4; --crema-hondo:#e6e1d7; --blanco:#faf7f2; --papel:#fffdf9;
  --tinta:#16211c; --texto:#3d4a44; --atenuado:#6b756f;
  --verde:#30493f; --verde-hondo:#243a31; --verde-medio:#446441; --verde-agua:#e4e8e1;
  --coral:#ee7265; --coral-texto:#c8503f; --coral-agua:#fbe5e1;
  --ambar:#c98a1b; --ambar-agua:#f7ecd5;
  --linea:rgba(16,32,30,.10); --linea-suave:rgba(16,32,30,.06);
  --radio:28px; --radio-chico:18px; --radio-mini:12px;
  --sombra:0 30px 70px -38px rgba(16,32,30,.26);
  --sombra-suave:0 14px 36px -26px rgba(16,32,30,.22);
  --sombra-flota:0 18px 50px -18px rgba(16,32,30,.38);
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --seguro-abajo:env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--texto);font-family:var(--sans);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:500;letter-spacing:-.03em;line-height:1.15;color:var(--tinta)}
p{margin:0}
svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[hidden]{display:none!important}
.k-etiqueta{font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--atenuado)}
.k-num{font-variant-numeric:tabular-nums}

/* botones */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:3rem;padding:.8rem 1.4rem;
  border-radius:999px;border:1px solid transparent;font-size:.9375rem;font-weight:600;letter-spacing:-.01em;cursor:pointer;
  text-decoration:none;transition:background .25s,color .25s,border-color .25s,transform .15s,opacity .2s;user-select:none}
.k-btn:active{transform:scale(.97)}
.k-btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.k-btn svg{width:1.1rem;height:1.1rem}
.k-btn-solido{background:var(--verde);color:#fff}
.k-btn-solido:hover{background:var(--verde-hondo)}
.k-btn-coral{background:var(--coral);color:#fff}
.k-btn-coral:hover{background:var(--coral-texto)}
.k-btn-linea{background:transparent;border-color:rgba(22,33,28,.25);color:var(--tinta)}
.k-btn-linea:hover{border-color:var(--tinta);background:var(--blanco)}
.k-btn-suave{background:var(--verde-agua);color:var(--verde)}
.k-btn-suave:hover{background:#d8ded4}
.k-btn-ancho{width:100%}
.k-btn-chico{min-height:2.25rem;padding:.45rem .95rem;font-size:.8125rem}
.k-icono{display:inline-grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;border:0;background:var(--blanco);
  cursor:pointer;color:var(--tinta);flex:none;transition:background .2s}
.k-icono:hover{background:#fff}
.k-icono svg{width:1.15rem;height:1.15rem}

/* formularios */
.k-campo{display:grid;gap:.4rem}
.k-campo>span{font-size:.8125rem;font-weight:600;color:var(--tinta)}
.k-input{width:100%;min-height:3rem;padding:.75rem 1rem;border-radius:var(--radio-mini);border:1px solid var(--linea);
  background:var(--papel);font:inherit;font-size:1rem;color:var(--tinta);outline:none;transition:border-color .2s,box-shadow .2s}
.k-input:focus{border-color:var(--verde);box-shadow:0 0 0 4px rgba(48,73,63,.12)}
textarea.k-input{min-height:5rem;resize:vertical}
.k-error{color:var(--coral-texto);font-size:.875rem;font-weight:500}

/* segmentado (domicilio / recoger, etc.) */
.k-segmento{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.25rem;padding:.3rem;border-radius:999px;background:var(--crema-hondo)}
.k-segmento button{min-height:2.6rem;border:0;border-radius:999px;background:transparent;font-weight:600;font-size:.875rem;
  color:var(--atenuado);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.45rem;transition:background .25s,color .25s,box-shadow .25s}
.k-segmento button svg{width:1.05rem;height:1.05rem}
.k-segmento button[aria-pressed="true"]{background:var(--papel);color:var(--tinta);box-shadow:0 4px 14px -6px rgba(16,32,30,.3)}

/* chips y sellos */
.k-chip{display:inline-flex;align-items:center;gap:.35rem;padding:.3rem .7rem;border-radius:999px;font-size:.75rem;font-weight:600;
  background:var(--verde-agua);color:var(--verde);white-space:nowrap}
.k-chip-coral{background:var(--coral-agua);color:var(--coral-texto)}
.k-chip-ambar{background:var(--ambar-agua);color:#8a5a06}
.k-chip-gris{background:var(--crema-hondo);color:var(--atenuado)}
.k-chip-oscuro{background:var(--tinta);color:#fff}

/* interruptor */
.k-switch{position:relative;width:3rem;height:1.75rem;flex:none;border-radius:999px;border:0;background:#cfd3cc;cursor:pointer;transition:background .25s}
.k-switch::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.35rem;height:1.35rem;border-radius:50%;background:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.2);transition:transform .25s cubic-bezier(.3,.9,.4,1.2)}
.k-switch[aria-checked="true"]{background:var(--verde)}
.k-switch[aria-checked="true"]::after{transform:translateX(1.25rem)}
.k-switch.k-switch-coral[aria-checked="true"]{background:var(--coral)}

/* tarjetas */
.k-tarjeta{background:var(--papel);border-radius:var(--radio-chico);box-shadow:var(--sombra-suave);border:1px solid var(--linea-suave)}

/* hoja inferior (móvil) / diálogo (escritorio) */
.k-velo{position:fixed;inset:0;z-index:90;background:rgba(16,24,20,.42);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s;display:flex;align-items:flex-end;justify-content:center}
.k-velo.abierto{opacity:1}
.k-hoja{width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--blanco);border-radius:28px 28px 0 0;
  padding:1.4rem 1.25rem calc(1.25rem + var(--seguro-abajo));transform:translateY(30px);transition:transform .3s cubic-bezier(.2,.9,.3,1);
  overscroll-behavior:contain}
.k-velo.abierto .k-hoja{transform:none}
.k-hoja-asa{width:2.6rem;height:.3rem;border-radius:9px;background:rgba(16,32,30,.16);margin:-.5rem auto 1rem}
@media (min-width:760px){
  .k-velo{align-items:center;padding:2rem}
  .k-hoja{border-radius:var(--radio);padding:1.8rem}
  .k-hoja-asa{display:none}
}

/* avisos */
.k-avisos{position:fixed;left:50%;bottom:calc(1.2rem + var(--seguro-abajo));transform:translateX(-50%);z-index:120;display:grid;gap:.5rem;
  width:min(92vw,420px);pointer-events:none}
.k-aviso{background:var(--tinta);color:#fff;padding:.85rem 1.1rem;border-radius:16px;font-size:.9rem;font-weight:500;
  box-shadow:var(--sombra-flota);animation:k-entra .3s cubic-bezier(.2,.9,.3,1)}
.k-aviso.error{background:var(--coral-texto)}
@keyframes k-entra{from{opacity:0;transform:translateY(12px)}}

/* carga */
.k-girando{width:1.1rem;height:1.1rem;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:k-gira .7s linear infinite}
@keyframes k-gira{to{transform:rotate(360deg)}}
.k-esqueleto{background:linear-gradient(90deg,var(--crema-hondo),#efeae2,var(--crema-hondo));background-size:200% 100%;animation:k-brillo 1.3s infinite;border-radius:12px}
@keyframes k-brillo{to{background-position:-200% 0}}

/* punto de «en directo» */
.k-vivo{display:inline-flex;align-items:center;gap:.4rem;font-size:.75rem;font-weight:600;color:var(--verde)}
.k-vivo::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:#3bb273;box-shadow:0 0 0 0 rgba(59,178,115,.6);animation:k-latido 1.8s infinite}
.k-vivo.caido{color:var(--atenuado)}
.k-vivo.caido::before{background:#b9bdb6;animation:none}
@keyframes k-latido{70%{box-shadow:0 0 0 .5rem rgba(59,178,115,0)}100%{box-shadow:0 0 0 0 rgba(59,178,115,0)}}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}