/* =========================================================================
   RestoTicketGo — BASE COMPARTIDA.

   Tipografía, variables de color, reset y las superficies que pone el
   navegador. Lo cargan las TRES caras del producto: el panel, la carta
   pública y la landing.

   Existe porque la landing cargaba style.css entera —231 KB— y usaba el 2%:
   el visitante se llevaba el CSS de cocina, caja y métricas para ver una
   página de venta. Sacar esto aquí le quita 64 KB comprimidos a la landing y
   otro tanto a la carta, sin duplicar una sola regla.

   Va SIEMPRE antes que style.css / publico.css / landing.css.
   ========================================================================= */

/* =========================================================================
   Comandas — hoja de estilo única.
   OJO: al tocar este archivo hay que subir CM_ASSET_VER en config.php, o el
   cambio no se ve en un celular que ya entró (los assets se cachean días).
   ========================================================================= */

/* ───────── Tipografía ─────────
   IBM Plex Sans, servida DESDE ESTE MISMO SERVIDOR.

   Dos decisiones, y las dos tienen su razón.

   POR QUÉ NO LA DEL SISTEMA. Antes el panel usaba solo la fuente del aparato,
   y el argumento era bueno: la tablet de la cocina puede estar con wifi malo y
   una fuente que no carga deja la pantalla ilegible justo cuando más se
   necesita. Servirla desde el propio dominio quita esa objeción entera — viaja
   por la conexión que ya está abierta para el HTML, sin DNS ni saludo TLS a un
   tercero, y la cachea el mismo max-age que el resto. Son 45 KB una sola vez.
   Y si aun así no llegara, `swap` más la misma pila de respaldo de antes dejan
   la pantalla exactamente como estaba: no se pierde nada.

   POR QUÉ PLEX Y NO INTER. Inter era la elección obvia y por eso mismo no es
   una elección: está en tantos paneles que ya no dice nada de quién lo hizo.
   Plex se dibujó para una empresa de máquinas, y eso es justo lo que es
   Comandas — un interruptor industrial, corriente corriendo por circuitos, un
   tablero que se lee a metro y medio en una cocina caliente. Los remates
   acampanados y la 'a' de doble piso le dan carácter sin costarle un gramo de
   legibilidad, porque se diseñó para interfaces. Trae cifras tabulares de
   verdad, que es lo que alinea una columna de precios en caja. Y pesa 45 KB
   contra los 48 de Inter.

   Un solo archivo variable de 400 a 700: los cuatro pesos que usa el panel
   pesan lo mismo que uno. */
@font-face{
  font-family:'Plex var';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fuentes/plex-var-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* ── Superficies. Cuatro niveles, no más: cada nivel de más es una
       decisión que alguien tiene que tomar otra vez en la próxima pantalla. */
  --fondo:#0A0A0C;
  --sup:#141418;
  --sup2:#1C1C22;
  --sup3:#24242C;
  --borde:#2A2A33;
  --borde2:#3A3A45;

  /* ── Texto. Los tres tonos están MEDIDOS contra la superficie más clara en
       la que aparecen (--sup3): 14.1:1, 5.5:1 y 4.5:1.
       --tenue2 era #6B6B75 y daba 2.92:1 sobre --sup3 — por debajo del mínimo
       de WCAG incluso para texto grande, y es justo el color de la ayuda que
       va debajo de cada campo. Se subió a #8A8A94, el gris más discreto que
       todavía pasa 4.5:1. */
  --texto:#F5F5F7;
  --tenue:#9A9AA4;
  --tenue2:#8A8A94;

  --acento:#FF7A45;
  --acento2:#FF9B68;
  --acento-osc:#C4491A;
  /* El texto que va ENCIMA del acento. Existía en la carta pública
     (plantillas.php la inyecta por plantilla) pero nunca en el panel, así que
     seis sitios naranjas —las fichas de la caja, los globos, la campana
     abierta, los filtros de la plataforma— pedían un color que no existía y
     terminaban heredando el del padre: texto claro sobre naranja claro. */
  --acento-txt:#1A0B04;

  /* Textos sobre tinte (verde sobre verde translúcido, etc). Van en variables
     porque el tema claro necesita las versiones OSCURAS de los mismos colores:
     un verde pastel #86EFAC que brilla sobre negro es invisible sobre blanco. */
  --tx-ok:#86EFAC;   --tx-mal:#FCA5A5;  --tx-ojo:#FCD34D;   --tx-info:#93C5FD;
  --tx-cielo:#7DD3FC;--tx-morado:#C4B5FD;--tx-esm:#6EE7B7;  --tx-oro:#FDE68A;

  --nuevo:#3B82F6;
  --prep:#F59E0B;
  --listo:#22C55E;
  --malo:#EF4444;

  /* ── Escala tipográfica.
       Antes había veinte tamaños sueltos (13, 13.5, 14, 14.5, 15, 15.5…) que
       nadie podía distinguir a simple vista pero que sí se notan juntos: la
       pantalla se ve desordenada sin que uno sepa por qué. Esta escala tiene
       ocho pasos y cada salto es visible. */
  --t-micro:11px;    /* etiquetas en versalita, candados */
  --t-mini:12.5px;   /* metadatos, contadores */
  --t-chico:13.5px;  /* ayuda, texto secundario */
  --t-ui:15px;       /* botones, navegación, cuerpo del panel */
  --t-base:16px;     /* cuerpo de lectura */
  --t-medio:17px;    /* nombre de un producto en una lista */
  --t-titulo:21px;   /* título de una tarjeta o de un modal */
  --t-dato:27px;     /* la cifra de un KPI */
  --t-gigante:34px;  /* el turno de la comanda, leído a metro y medio */

  /* ── Escala de espacio, en pasos de 4. Las mismas distancias en todas
       partes es lo que hace que dos pantallas distintas se vean del mismo
       producto. */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px; --e5:20px; --e6:24px; --e8:32px;

  /* ── Radios. Uno por tipo de objeto, no uno por antojo. */
  --r-chico:10px;    /* etiquetas, campos pequeños, miniaturas */
  --r:12px;          /* botones, campos, avisos */
  --r-tarjeta:16px;  /* tarjetas y columnas */
  --r-hoja:20px;     /* la hoja que sube desde abajo (modal) */
  --r2:16px;         /* alias histórico — apunta al radio de tarjeta */

  /* ── Elevación. Se declara UNA vez por objeto: o borde, o sombra.
       Un borde de 1px debajo de una sombra ancha deja el objeto flotando y
       apoyado a la vez, y se lee como un error de dibujo. Regla de la casa:
       lo que está QUIETO lleva borde; lo que FLOTA sobre el resto (modal,
       aviso, carrito, menú desplegable) lleva sombra y nada de borde. */
  --sombra:0 4px 16px rgba(0,0,0,.4);
  --sombra-alta:0 18px 44px -12px rgba(0,0,0,.66);

  --toque:56px;              /* alto mínimo de cualquier cosa que se toque */

  --fuente:'Plex var',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--fuente);
  background:var(--fondo);
  color:var(--texto);
  font-size:var(--t-base);
  line-height:1.45;
  overscroll-behavior-y:none;
  /* Sobre fondo negro el texto claro se "engorda": el navegador lo dibuja con
     más pixeles encendidos de los que le tocan. Estas dos líneas lo devuelven
     al peso real, y es la diferencia entre una pantalla oscura que se lee y una
     que cansa a las dos horas. */
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* NADA de overflow:hidden en body. Las páginas públicas (menú, estado del
   pedido) no usan el armazón .app y en iPhone eso impide el scroll salvo con
   pinch-zoom. Fue un bug real en el sistema de contratos. */

a{color:var(--acento);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
img{max-width:100%;display:block}

/* El atributo `hidden` trae `display:none` de la hoja del navegador, y CUALQUIER
   `display:flex` o `display:grid` propio le gana por especificidad — el elemento
   sigue viéndose con el atributo puesto. Ya pasó una vez en este proyecto.
   Esta línea lo blinda para todo el archivo. */
[hidden]{display:none!important}

/* ───────── Las superficies que pone el navegador ─────────
   Selección, cursor de escritura, barras de desplazamiento y anillo de foco.
   Nadie las mira a propósito, pero son las que delatan una pantalla armada de
   una hecha: en una app negra, la selección azul de fábrica y una barra de
   scroll clara aparecen sin permiso y no pertenecen a nada de lo que hay
   alrededor. Cuesta doce líneas. */
::selection{background:rgba(255,122,69,.32);color:#FFF}
:root{caret-color:var(--acento)}
*{scrollbar-color:var(--borde2) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{
  background:var(--borde2);border-radius:999px;
  /* el borde transparente adelgaza el pulgar sin adelgazar la zona de agarre */
  border:3px solid transparent;background-clip:content-box;
}
::-webkit-scrollbar-thumb:hover{background:#4B4B58;background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ANILLO DE FOCO — antes no existía en ninguna parte.
   Los campos traían `outline:0` y los botones nunca tuvieron nada, así que
   quien navega con Tab —o con un teclado colgado de la tablet, que en una
   cocina es lo cómodo— no tenía forma de saber dónde estaba parado.

   :focus-visible y no :focus: el navegador solo lo pinta cuando el foco vino
   del teclado. Con el dedo o el mouse no aparece, que es lo correcto — un
   anillo tras cada toque en la tablet sería ruido.

   2px y separado del elemento, para que se vea sobre cualquier fondo del panel
   (WCAG 2.2 pide un perímetro de 2px y 3:1 de contraste; naranja sobre negro
   da 7.65:1). */
:focus-visible{
  outline:2px solid var(--acento);
  outline-offset:2px;
  border-radius:var(--r-chico);
}
/* Sobre un botón naranja el anillo naranja se pierde: ahí va blanco. */
.btn-pri:focus-visible,.lanza.destaca:focus-visible{outline-color:#FFF}
/* Y el interruptor lleva el suyo, redondo como él */
.interruptor:focus-visible{outline:3px solid #FFF;outline-offset:6px;border-radius:50%}

/* ───────── Cifras alineadas ─────────
   Todo lo que sea plata, turno, hora o cantidad va en cifras de ancho fijo.
   Sin esto una columna de precios queda con las comas bailando y un cronómetro
   se mueve un pixel a cada segundo — dos cosas que se ven mal sin que uno
   sepa señalar por qué. */
.kpi b,.cm-turno,.it-cant,.col-cabeza .cuenta,.cm-reloj,.plata,
table td,table th,.prod-meta,.resumen{font-variant-numeric:tabular-nums}

/* Títulos sin palabra huérfana en el último renglón */
h1,h2,h3,.inicio h1{text-wrap:balance}

.sr-solo{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border-width:0;
}


.ec-btn{
  width:38px;height:38px;flex:none;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:var(--sup2);border:1px solid var(--borde);color:var(--tenue);
  font-size:17px;line-height:1;
}
@media (hover:hover){ .ec-btn:hover{color:var(--texto);border-color:var(--borde2)} }
.ec-btn:active{transform:scale(.94)}
.ec-emoji[aria-expanded="true"]{border-color:var(--acento);color:var(--acento)}

.ec-emojis{
  position:absolute;bottom:calc(100% + 8px);left:0;z-index:30;
  display:grid;grid-template-columns:repeat(8,34px);gap:2px;padding:6px;
  background:var(--sup2);border:1px solid var(--borde2);border-radius:var(--r);
  box-shadow:0 12px 30px rgba(0,0,0,.4);
}
.ec-emojis button{
  width:34px;height:34px;border:0;border-radius:8px;background:transparent;
  cursor:pointer;font-size:19px;line-height:1;
}
@media (hover:hover){ .ec-emojis button:hover{background:var(--sup3)} }

/* Mientras se graba, la barra entera desaparece. Ver el campo de texto al lado
   del cronómetro es lo que hace que se mande media nota sin querer. */
.ec-grabando{display:flex;align-items:center;gap:10px;padding:2px 0}
.ec-punto{
  width:10px;height:10px;border-radius:50%;background:var(--malo);flex:none;
  animation:ec-late 1s ease-in-out infinite;
}
@keyframes ec-late{50%{opacity:.25}}
.ec-reloj{font-variant-numeric:tabular-nums;font-size:var(--t-chico);letter-spacing:0}
.ec-txt{font-size:var(--t-mini);color:var(--tenue2)}
.ec-grabando .ec-si{margin-left:auto;background:var(--acento);border-color:var(--acento);color:var(--acento-txt)}
@media (prefers-reduced-motion:reduce){ .ec-punto{animation:none;opacity:.85} }

/* ═══════════ ADJUNTOS DEL SOPORTE ═══════════ */
.sop-clip{
  position:relative;flex:none;display:grid;place-items:center;cursor:pointer;
  width:44px;height:44px;border-radius:50%;
  background:var(--sup2);border:1px solid var(--borde);color:var(--tenue);
  font-size:18px;transition:transform .16s var(--ease-salida),border-color .16s ease;
}
.sop-clip:active{transform:scale(.92)}
@media (hover:hover){ .sop-clip:hover{border-color:var(--borde2);color:var(--texto)} }
.sop-clip input{position:absolute;inset:0;opacity:0;cursor:pointer}
.sop-clip.con-archivos{border-color:var(--acento);color:var(--acento)}
.sop-clip-n{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 5px;
  border-radius:999px;background:var(--acento);color:var(--acento-txt);
  font-size:11px;font-weight:800;display:grid;place-items:center;
  box-shadow:0 0 0 2px var(--sup);
}
.sop-adjuntar{display:flex;align-items:center;gap:var(--e3);margin:var(--e3) 0 var(--e4)}
.sop-adjuntar .ayuda{margin:0;flex:1;min-width:0}