/* None — Identidad visual v3 (18 sep 2026)
 *
 * NEGRO, HUESO E INTER; ICONOS EN VEZ DE TANTO TEXTO; VOLT SOLO EN
 * LOGISTICS (decisión del dueño, 18 sep 2026, sobre la propuesta visual
 * aprobada tablero por tablero). Sus referencias: Inter sobre volt, «Move
 * to Zero», tableros con carril de iconos y tarjetas blancas sobre un
 * fondo hueso.
 *
 *   Hueso       #F3F2EE  el fondo de todo lo que ve el cliente
 *   Blanco      #FFFFFF  las tarjetas y los campos
 *   Gris        #E6E4DE  chips, lo pulsable secundario
 *   Negro       #0A0A0A  texto, marca, lo elegido
 *   Tinta 2     #6B6B6B  lo que acompaña
 *   Volt        #CDFF00  SOLO la consola None Logistics; ni Home ni pilares
 *
 * Cada pilar conserva su color (naranja, azul, verde, morado) y sigue
 * mandando la regla de un solo acento por pantalla; lo que cambia es la
 * forma: etiquetas pequeñas en mayúsculas sobre cifras ligeras, filas
 * separadas por una línea fina, iconos con nombre, barra inferior con
 * iconos en el teléfono. La tipografía es Inter, servida desde aquí
 * (`vendor/inter/`, OFL): la CSP solo admite 'self' y la app instalada
 * tiene que verse igual sin red.
 *
 * Los nombres de los tokens se conservan otra vez (`--crema` es hoy el
 * hueso; `--superficie` el blanco) para no tocar las doce hojas que los
 * consumen. Lo de abajo es la historia de la v2, que sigue valiendo en
 * todo lo que no contradiga a lo de arriba.
 *
 * ---- v2.0 (12 sep 2026) ----
 * LA ESTÉTICA ES LA DE APPLE MUSIC (decisión del dueño, 12 sep 2026: «todo
 * el ecosistema tendrá la estética más similar a Apple Music; conviértete
 * en un diseñador de Apple con 20 años de experiencia»). Sus referencias:
 * fondo blanco, títulos grandes y muy negros, tarjetas agrupadas sin
 * contorno sobre gris muy claro, botones en píldora, filas con chevrón y
 * línea fina, UN color por producto que hace de acento (rojo en Music).
 *
 *   Blanco        #FFFFFF  el fondo de todo
 *   Gris agrupado #F2F2F7  superficies, campos y lo pulsable
 *   Negro         #1D1D1F  texto y lo elegido
 *   Secundario    #6E6E73  lo que acompaña
 *
 * NONE LOGISTICS ES BLANCO Y NEGRO; LOS SERVICIOS SON LOS COLORES (dueño):
 * la consola no lleva color de acento; cada pilar y cada producto lleva el
 * suyo (Entrepreneur naranja, Scholastic azul, Financial verde, Meta
 * morado). «No te cases con el naranja»: el naranja es de Entrepreneur,
 * no de None.
 *
 * Los nombres de los tokens se conservan (`--crema`, `--negro`…) para no
 * tocar las doce hojas que los consumen: `--crema` es hoy el blanco.
 *
 * REGLA DEL MANUAL, LA MÁS FÁCIL DE ROMPER:
 * el naranja se usa en UN SOLO elemento principal por pantalla. Cada
 * estado de esta página tiene como máximo un `.acento`. Si añades otro,
 * quítale el acento al que ya estaba.
 *
 * Estas páginas se ven SIEMPRE en un teléfono, de pie, en la entrada de un
 * negocio, a veces con sol de frente. De ahí el contraste alto, los
 * botones grandes y el texto que no baja de 17px.
 */

/* INTER, SERVIDA DESDE AQUÍ. Variable de 300 a 800; dos subconjuntos para
   que el latín básico pese 48 kB y el extendido (ñ, acentos raros) solo
   baje si hace falta. `font-display: swap`: el texto sale con la fuente
   del sistema mientras llega, nunca en blanco. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/vendor/inter/Inter-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;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url("/vendor/inter/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* v3: hueso de fondo, blanco en las tarjetas, gris en los chips. */
  --crema: #f3f2ee;
  --hueso: #f3f2ee;
  --blanco: #ffffff;
  --gris: #e6e4de;
  --gris-linea: #d5d3cc;
  --negro: #0a0a0a;
  --naranja: #ff4e20;
  --azul: #e8f0fb;
  --radio: 18px;
  --secundario: #6b6b6b;
  --agrupado: #ffffff;
  /* VOLT: la marca de None. SOLO en la consola Logistics (dueño: «quítame
     el verde de ahí, cada pilar tiene su color, no lo mezcles»). Ninguna
     hoja de cliente lo consume. */
  --volt: #cdff00;

  /* SIN BORDES NEGROS.
   *
   * El contorno de 2px en negro era del manual de marca y envejeció mal:
   * con veinte tarjetas en pantalla, veinte marcos gruesos compiten entre
   * sí y ninguno separa nada. La separación la hacen ahora la superficie y
   * una sombra muy suave, que es como se distingue un plano de otro sin
   * dibujar la frontera.
   *
   * El negro NO desaparece: sigue en el texto, en el isotipo y en el punto
   * de las etiquetas. Deja de ser el material con el que se construyen las
   * cajas.
   */
  --linea: #d5d3cc;
  --borde: 1px solid var(--linea);

  /* Un blanco cálido, no puro: sobre crema, el blanco frío se ve azulado
     y rompe la paleta. */
  --superficie: #ffffff;

  /* Dos sombras: una pegada al borde que da el canto, y otra amplia y muy
     tenue que despega la tarjeta del fondo. Una sola de las dos se ve
     falsa — o dibujada, o flotando. */
  --sombra: none;

  /* LO QUE SE PUEDE PULSAR NO LLEVA CONTORNO (decisión del dueño, 6 sep
   * 2026: «los botones no me convencen, no quiero contornos»).
   *
   * Un botón se distingue por su SUPERFICIE, no por su marco. La misma
   * razón por la que las tarjetas dejaron de llevar el marco de 2 px: con
   * ocho cosas pulsables en pantalla, ocho recuadros compiten y ninguno
   * dice cuál es la importante.
   *
   * Tres niveles y nada más:
   *   naranja sólido  la acción de la pantalla, una sola
   *   negro sólido    lo elegido: un periodo, una forma de pago, un modo
   *   relleno suave   todo lo demás pulsable
   * y el texto a secas para lo que es un enlace disfrazado.
   *
   * El foco de teclado SÍ lleva anillo, y no es un contorno decorativo:
   * es la única forma de saber dónde estás sin ratón. */
  --pulsable: #e6e4de;
  --pulsable-encima: #dbd9d1;

  /* ---------- NONE SCHOLASTIC ----------
   *
   * La vertical de colegios tiene paleta propia —crema, AZUL y negro— y no
   * usa el naranja. No es capricho de diseño: el naranja es la señal de
   * «esto exige tu acción» en los tableros de negocio, y en un producto
   * cuya acción principal es dejar salir a un niño, esa misma señal tiene
   * que significar otra cosa. Un colegio además espera sobriedad
   * institucional, no la energía comercial de una caja registradora.
   *
   * Vive AQUÍ y no en `scholastic/scholastic.css` porque la paleta de None
   * es una sola y ninguna hoja de pantalla define color propio; la hoja de
   * Scholastic la consume con var(), como hacen las otras seis.
   *
   * `--alarma` NO es el color de un botón —None no tiene botones rojos a
   * propósito, y esa regla sigue en pie tres bloques más arriba—. Es el
   * color de un ESTADO, y de uno solo: que esta persona no puede llevarse a
   * este niño. Es el único dato de todo el sistema cuyo error deja salir a
   * un menor con quien un juez dijo que no, y por eso es lo único que se
   * sale de la paleta. Gastado en cualquier otra cosa, deja de significar
   * eso. */
  --institucional: #1259b8;
  --institucional-suave: rgba(18, 89, 184, 0.10);
  --alarma: #a3231b;
  --alarma-suave: rgba(163, 35, 27, 0.09);

  /* LOS CUATRO PILARES DE NONE LOGISTICS (dueño, 12 sep 2026):
   * Entrepreneur naranja, Scholastic azul, Financial verde, Meta morado.
   * Son los colores de la CASA (None Home) y del filo de cada cabecera;
   * dentro de cada producto sigue mandando su propia regla (un solo
   * naranja por pantalla en Entrepreneur; el institucional en ABC). */
  --pilar-naranja: #ff4e20;
  --pilar-naranja-suave: rgba(255, 78, 32, 0.10);
  --pilar-azul: #1259b8;
  --pilar-azul-suave: rgba(18, 89, 184, 0.10);
  --pilar-verde: #1f8a5b;
  --pilar-verde-suave: rgba(31, 138, 91, 0.10);
  --pilar-morado: #6a3fd1;
  --pilar-morado-suave: rgba(106, 63, 209, 0.10);
  /* LO QUE NO ES BUENO NI ACCIÓN: una pérdida, un error. Antes iba en el
     naranja de la acción, y en un tablero verde se leería como ganancia. */
  --malo: #c0392b;

  /* UN COLOR POR GRADO (dueño, 11 sep 2026: «que se vea optimizado para
   * un colegio»). En una lista de veinte salidas, el ojo busca «los de
   * tercero» antes que un nombre, y seis colores sobrios lo permiten sin
   * leer. Sobrios a propósito: no es un kínder. Ninguno es naranja ni
   * rojo, que ya significan otra cosa. */
  /* EN ASCENDENTE TONAL AZUL (dueño, 14 sep 2026): de primero a sexto el
   * mismo azul de Scholastic sube de tono. Se lee el orden sin leer el
   * número, y ninguno se confunde con el naranja ni con el rojo. El de
   * primero es el más claro que sigue leyéndose como texto sobre blanco. */
  --grado-1: #4a90e2;
  --grado-2: #2f78d0;
  --grado-3: #1f63bd;
  --grado-4: #164fa2;
  --grado-5: #103d85;
  --grado-6: #0b2c66;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* SIN ZOOM NI DESLIZAMIENTO LATERAL EN NINGÚN TABLERO (dueño, 19 sep
     2026): una página más ancha que la pantalla deja que iOS aleje con
     el pellizco aunque el viewport diga que no. Lo que sobre se recorta;
     una tabla ancha se desliza DENTRO de su caja, nunca la página. */
  overflow-x: clip;
  background: var(--crema);
  color: var(--negro);
  /* Inter (v3), servida desde vendor/inter; si no ha llegado, la del sistema. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* SIN ZOOM EN EL CELULAR (dueño, 15 sep 2026: «se me mueve toda la
     interfaz y el doble toque hace zoom en vez de dar clic»). El meta
     viewport de cada página lleva `maximum-scale=1, user-scalable=no`;
     `touch-action: manipulation` quita además el zoom por doble toque,
     que iOS aplica aunque la página diga que no. Leaflet pone el suyo en
     `.leaflet-container` y sigue dejando pellizcar el mapa. */
  touch-action: manipulation;
  overscroll-behavior-x: none;
}

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Espaciado generoso: estética de galería, no de formulario. */
  padding: 32px 24px 40px;
  gap: 40px;
}

/* ---------- Logotipo ---------- */
/* Isotipo geométrico: círculo completo + medio círculo (eclipse / NFC). */

.marca {
  display: flex;
  align-items: center;
  gap: 12px;
}

.marca svg { display: block; }

.marca span {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ---------- Contenedor ---------- */

main {
  width: 100%;
  max-width: 420px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 28px;
  text-align: center;
}

/* Cada estado es una columna con aire propio. El espaciado vive aqui y no
 * en atributos style=, porque la CSP prohibe estilos inline: con
 * `style-src 'self'` el navegador los descarta en silencio y la pantalla
 * queda apretada sin que nada falle a gritos. */
main > section {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Texto que acompana al titulo: se pega a el en vez de flotar. */
main > section > .pegado { margin-top: -8px; }

h1 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
}

p {
  margin: 0;
  font-size: 17px;
  line-height: 1.5;
}

.tenue { color: var(--secundario); }

/* ---------- Botón (el acento naranja habitual) ---------- */

/* `a.boton` va con `button` y no aparte: un enlace que se ve como boton y
 * se comporta distinto es lo que produce dos botones que no se parecen. Lo
 * unico propio del enlace es lo que un <a> trae de fabrica y hay que
 * apagar: el subrayado y el flujo en linea. */
button, a.boton {
  font-family: inherit;
  font-size: 19px;
  font-weight: 700;
  color: var(--negro);
  background: var(--pulsable);
  border: 0;
  border-radius: 999px;
  padding: 17px 24px;
  width: 100%;
  cursor: pointer;
  /* Objetivo táctil cómodo con el teléfono en una mano. */
  min-height: 58px;
  transition: background-color 0.12s ease, transform 0.06s ease;
}

button:hover, a.boton:hover { background: var(--pulsable-encima); }

/* El anillo del teclado. No es decoración: sin él, quien navega con
 * tabulador no sabe dónde está. Va con `:focus-visible` para que no salte
 * al pulsar con el dedo o el ratón. */
button:focus-visible, a.boton:focus-visible,
a.modulo:focus-visible, button.modulo:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 2px;
}

a.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  text-decoration: none;
  text-align: center;
}

button:active, a.boton:active { transform: translateY(1px); }

/* La accion secundaria de una fila o de una tarjeta. Vive AQUI y no en la
 * hoja del panel, por la misma razon que el conmutador de modulos: es el
 * mismo boton en el panel y en la caja, y definido dos veces se separa. */
button.chico {
  font-size: 15px;
  padding: 11px 16px;
  min-height: 0;
  width: auto;
}

/* Borrar para siempre. No lleva color propio: la paleta tiene UN acento y
 * lo gasta la accion principal de la pantalla. Un rojo aqui competiria con
 * el naranja y ademas convertiria el borrado en lo mas visible de la
 * pantalla, que es lo contrario de lo que debe ser. Lo que frena de verdad
 * es la confirmacion, no el color. */
button.peligro { font-weight: 400; opacity: 0.72; }
button.peligro:hover { opacity: 1; text-decoration: underline; }

/* ---------- El conmutador de modulos ----------
 *
 * El boton que lleva de un producto de None a otro. Vive AQUI, en la hoja
 * compartida, y no en la del panel ni en la de la caja: es el mismo
 * elemento en los dos, y definido dos veces se separa. Ya paso —en uno
 * salia en negritas y en el otro no— y se nota justo al saltar de uno al
 * otro, que es cuando se usa.
 *
 * No hereda de `a.boton` a proposito: aquel ocupa el ancho completo y mide
 * 64 px de alto porque es el boton de una pagina de una sola accion. Este
 * vive en una cabecera. */
.modulos { display: flex; gap: 10px; flex: 0 0 auto; flex-wrap: wrap; }

/* Enlace o boton, el mismo aspecto. Uno de los dos elementos lleva a otro
 * producto y el otro cambia el modo del aparato, pero al ojo son la misma
 * fila de pastillas en la cabecera: escribir solo `a.modulo` dejaba al
 * boton heredando el boton grande de pagina —ancho completo y 64 px de
 * alto— y la cabecera se partia en dos. */
a.modulo, button.modulo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--negro);
  text-decoration: none;
  background: var(--pulsable);
  border: 0;
  border-radius: 999px;
  padding: 9px 18px;
  min-height: 0;
  width: auto;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.12s ease, transform 0.06s ease;
}
a.modulo:hover, button.modulo:hover { background: var(--pulsable-encima); }
a.modulo:active, button.modulo:active { transform: translateY(1px); }

button:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

button.acento, a.boton.acento {
  background: var(--naranja);
  color: var(--crema);
}
/* AL PASAR EL RATÓN SE OSCURECE EL COLOR QUE TENGA, no vuelve al naranja
   (dueño, 18 sep 2026: «pongo el clickero y se hace naranja» sobre un
   botón verde de Financial): el acento es el del pilar del body. */
button.acento:hover, a.boton.acento:hover { background: var(--naranja); filter: brightness(0.92); }
/* La puerta por pilar: el botón de entrar lleva el color del pilar. */
button.acento.azul   { background: var(--pilar-azul); }
button.acento.verde  { background: var(--pilar-verde); }
button.acento.morado { background: var(--pilar-morado); }
button.acento.azul:hover   { background: var(--pilar-azul); opacity: 0.92; }
button.acento.verde:hover  { background: var(--pilar-verde); opacity: 0.92; }
button.acento.morado:hover { background: var(--pilar-morado); opacity: 0.92; }

/* LO ELEGIDO se rellena de negro: un periodo, una forma de pago, la
 * sección puesta. Antes era un marco, y un marco no dice «esto es lo
 * elegido», dice «esto es una caja». */
button[aria-pressed="true"], button.puesta {
  background: var(--negro);
  color: var(--crema);
}
button[aria-pressed="true"]:hover, button.puesta:hover { background: var(--negro); }

/* Negro solido: la accion principal de una pantalla cuyo naranja ya esta
 * gastado en otra cosa —el sello de exito, por ejemplo—.
 *
 * Existe porque el boton por defecto es crema sobre crema con una linea de
 * 11% de opacidad: en una pantalla vacia eso no se lee como un boton, se
 * lee como un recuadro apagado, y es justo lo unico que hay que pulsar. */
button.solido, a.boton.solido {
  background: var(--negro);
  color: var(--crema);
}
button.solido:hover, a.boton.solido:hover { background: #262626; }

/* El botón que en realidad es un enlace: sin superficie, solo texto. Para
 * lo terciario —«¿sin celular? usa el código»— que no debe competir con
 * nada de lo de arriba. */
/* Y TAMBIEN EL <a> CON LA MISMA CLASE. La regla estilaba solo botones, asi
   que un enlace de verdad con `class="enlace"` salia AZUL, el azul del
   navegador. Mordio cuatro veces —Logistics el 17 sep, Assets, Purchasing
   y «Abrir la pantalla de la sala» de Turnos— y cada vez se parcheo en la
   hoja de esa pantalla. Vive aqui, una sola vez, y deja de pasar. */
button.enlace, a.enlace {
  background: none;
  border: 0;
  padding: 0;
  min-height: 0;
  width: auto;
  font-size: inherit;
  font-weight: 700;
  color: var(--negro);
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.enlace:hover, a.enlace:hover { background: none; opacity: 0.7; }

/* ---------- Tarjetas ---------- */

.tarjeta {
  border: 0;
  border-radius: var(--radio);
  padding: 22px;
  text-align: left;
  background: var(--superficie);
  box-shadow: var(--sombra);

  /* Sus hijos respiran. Sin esto, el nombre del local, su dirección y el
     estado del plan salían pegados unos a otros: se leía como un párrafo
     roto en vez de como tres datos distintos. */
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Los márgenes por defecto de p y h pelean con el `gap`: se anulan para
   que el espaciado lo decida un solo sitio. */
.tarjeta > p,
.tarjeta > h2,
.tarjeta > h3 { margin: 0; }

.tarjeta.info { background: var(--azul); }

/* VARIAS IDEAS EN UNA TARJETA, UNA POR RENGLON (dueño, 7 sep 2026: «esta
   muy amontonado ese texto»). Tres frases seguidas dentro de una caja se
   leen como un bloque y la ultima -que suele ser la que importa- no la lee
   nadie. El espaciado va por `gap`, como todo, y no por margenes que se
   colapsan entre si. */
.renglones { display: flex; flex-direction: column; gap: 10px; }
.renglones > p { margin: 0; }
/* La promesa pesa un poco mas que el contexto. Sin naranja: el naranja de
   esta pantalla ya esta gastado en el boton. */
.renglones > p.promesa { font-weight: 600; }

/* Ficha del resultado: etiqueta arriba, dato abajo. */
.dato + .dato { margin-top: 16px; }

.dato dt {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.62;
  margin: 0 0 2px;
}

.dato dd {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
}

/* ---------- Marca de confirmación ---------- */
/* En la pantalla de éxito, ESTE es el único elemento naranja. */

.sello {
  width: 96px;
  height: 96px;
  margin: 0 auto;
  border-radius: 50%;
  background: var(--naranja);
  display: grid;
  place-items: center;
}

.sello svg { display: block; }

/* El sello HUECO: contorno negro, sin relleno.
 *
 * El naranja es el acento de ACCIÓN —el botón que hay que pulsar—. Un
 * bloqueo y una espera no son acciones: son estados, y pintarlos del color
 * de "pulsa aquí" hace que la pantalla pida algo que no hay que hacer.
 * Ademas deja el naranja libre para lo único que lo merece en cada
 * pantalla. */
.sello.hueco {
  background: var(--agrupado);
}

/* ---------- Indicador de espera ---------- */
/* Medio círculo girando: forma pura, coherente con el isotipo. */

.girando {
  width: 56px;
  height: 56px;
  margin: 0 auto;
  animation: giro 0.9s linear infinite;
}

@keyframes giro { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .girando { animation-duration: 2.4s; }
  button { transition: none; }
}

/* ---------- Estados ---------- */

[hidden] { display: none !important; }

footer {
  font-size: 13px;
  opacity: 0.5;
  text-align: center;
}
footer p { margin: 0 0 4px; }
footer .ecosistema a { color: inherit; font-weight: 700; }

/* ---------- Campo del código de respaldo ---------- */
/* Seis dígitos que alguien dicta en voz alta, tecleados de pie en una
 * entrada. De ahí el tamaño y el interletrado: hay que poder comprobar de
 * un vistazo que se escribió bien. */

/* ---------- Los campos de TODO None: cajas grises sin contorno ----------
 * Dueño, 13 sep 2026: «quítame el margen negro en todos los desplegables de
 * todo el proyecto». Un <select>, un <input> o un <textarea> sin regla
 * propia salía con el borde negro del navegador y el texto pegado al borde
 * («muy junto al margen»). Aquí va la base para los que ninguna hoja viste,
 * con `:where()` para que pese CERO: cualquier regla de una pantalla —la
 * consola oscura, el código del QR— le gana sin pelear. */
:where(select, textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="color"])) {
  font-family: inherit;
  font-size: 16px;
  color: var(--negro);
  background: var(--agrupado);
  border: 0;
  border-radius: 14px;
  padding: 0 16px;
  min-height: 48px;
  box-sizing: border-box;
  max-width: 100%;
}
:where(textarea) { padding: 12px 16px; min-height: 0; line-height: 1.4; }
:where(select) { cursor: pointer; }
:where(select, textarea, input):focus-visible { outline: 2px solid var(--negro); outline-offset: 2px; }

input.codigo {
  font-family: inherit;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  color: var(--negro);
  background: var(--agrupado);
  border: 0;
  border-radius: var(--radio);
  padding: 18px 12px;
  width: 100%;
  min-height: 72px;
}

input.codigo::placeholder { opacity: 0.28; letter-spacing: 0.18em; }
input.codigo:focus { outline: 3px solid var(--negro); outline-offset: 2px; }

/* ---------- Alta del empleado ---------- */

/* Campos de la pantalla donde el empleado confirma quien es. La hoja solo
 * vestia el input del codigo QR: todo lo demas era del panel, que esta
 * pantalla no carga. */
/* La pagina centra su contenido; un formulario centrado se lee mal: la
 * etiqueta queda lejos de su campo y el texto de la casilla se parte en
 * lineas desalineadas. Aqui se alinea a la izquierda. */
/* Dos formularios comparten estas reglas: el alta del empleado (#identidad)
 * y el de la contrasena del dueno (#crear). Van juntos en el selector y no
 * duplicados: dos copias de las mismas reglas es como se acaba con dos
 * formularios que no se parecen. */
#identidad, #crear { text-align: left; }

#identidad label,
#crear label { display: block; font-size: 14px; margin: 18px 0 6px; }

#identidad input[type="text"],
#identidad input[type="date"],
#crear input[type="password"] {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: 17px;               /* 16px o mas: por debajo, iOS hace zoom al enfocar */
  padding: 13px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--agrupado);
  color: var(--negro);
}

#identidad input:focus,
#crear input:focus { outline: 3px solid var(--negro); outline-offset: 2px; }
/* El botón no va pegado al campo (dueño, 24 sep 2026: «el texto está
   amontonado»): aire arriba, y la etiqueta con su propio renglón. */
#identidad button[type="submit"], #crear button[type="submit"] { margin-top: 22px; }
#identidad label { margin-top: 22px; }

/* La casilla y su texto van en linea, con el cuadro alineado a la primera
 * linea y no centrado: el texto ocupa dos o tres renglones en un telefono. */
.casilla {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 22px 0 0;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
}

/* El enlace a las politicas, en la paleta: el azul del navegador no es de
 * la marca y ademas compite con el naranja del boton. */
.casilla a { color: var(--negro); text-decoration: underline; }

.casilla input[type="checkbox"] {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: var(--negro);
}

/* Acción secundaria: subrayado, nunca naranja. El naranja ya lo gasta el
 * botón principal de cada pantalla. */
button.enlace {
  background: none;
  border: none;
  border-radius: 0;
  padding: 8px;
  min-height: 0;
  font-size: 16px;
  font-weight: 400;
  text-decoration: underline;
  opacity: 0.72;
  width: auto;
  align-self: center;
}

/* El isotipo, en grande, presidiendo la pantalla de checada.
 *
 * La marca pequeña de la cabecera sigue arriba: esta es otra cosa, el
 * ancla visual de la única pantalla que el empleado ve todos los días. */
.marca-grande {
  justify-content: center;
  margin: 0 auto;
}

/* La palabra crece con el isotipo. A 22px —el tamaño de la marca pequeña de
   cabecera— al lado de un simbolo de 38 se lee como un pie de foto, no como
   parte del logo. */
.marca-grande span { font-size: 30px; }

/* El codigo del NAP de caja, en el telefono. Se lee desde un metro y se
   teclea en la caja: por eso es el elemento mas grande de esa pantalla, y
   el unico naranja. */
.codigo-grande {
  font-size: 52px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--naranja);
  text-align: center;
  margin: 10px 0 6px;
  font-variant-numeric: tabular-nums;
}

/* ---------- La explicación que se lee una vez ----------
 *
 * Ver `public/explicacion.js` para el porqué. Aquí solo el corte: en una
 * pantalla ancha el párrafo se lee entero y el botón NO EXISTE —no se
 * esconde con `visibility`, no ocupa sitio—; en el teléfono se cambian los
 * papeles.
 *
 * EL CORTE ES 900 y no 640, el mismo con el que las tablas del panel se
 * vuelven fichas y la cabecera se pliega: la pantalla entera cambia de
 * forma de una vez y no en tres escalones. Un iPhone girado mide 812 y un
 * iPad de pie 768, y en los dos sobra el párrafo igual. */
.explica-abrir { display: none; }
.explica-texto { margin: 0; font-size: 13px; line-height: 1.45; }

@media (max-width: 900px) {
  .explica-abrir {
    display: inline-block;
    font-size: 13px;
    /* Alto de toque cómodo sin separar el botón de lo que explica. */
    padding: 4px 0;
  }
  .explica > .explica-texto { display: none; }
  .explica.abierta > .explica-texto { display: block; margin-top: 4px; }
}

/* ---------- Qué lleva un platillo ----------
 *
 * El bloque de `public/ingredientes.js`, que se usa en la carta de None POS
 * y en Inventory → Recetas. Por eso el estilo vive AQUÍ y no en la hoja de
 * ninguna de las dos: puesto en una, la otra lo heredaría a medias y se
 * verían distintos sin que nadie tocara nada.
 *
 * NO REUSA `.renglones`, que en la hoja de la caja es el ticket. Dos cosas
 * distintas con el mismo nombre acaban heredando la una el estilo de la
 * otra el día que alguien toque una de las dos. */
.receta { display: flex; flex-direction: column; gap: 10px; }

.receta-lineas { display: flex; flex-direction: column; gap: 6px; }

.receta-linea {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--pulsable);
}
/* El nombre se queda con el sitio que sobre y la cantidad no se parte. */
.receta-linea .receta-que { flex: 1 1 auto; min-width: 0; font-weight: 700; }
.receta-linea button { flex: 0 0 auto; }

/* Ingrediente · cuánto · en qué · Añadir. El ingrediente manda porque es lo
 * que se escribe y se lee; la cantidad no necesita más de cinco caracteres. */
.receta-alta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.receta-alta input[list] { flex: 1 1 14ch; min-width: 0; }
.receta-alta input[inputmode] { flex: 0 1 7ch; min-width: 5ch; text-align: right; }
.receta-alta select { flex: 0 1 auto; width: auto; }
.receta-alta button { flex: 0 0 auto; }

/* EN EL TELÉFONO, EL INGREDIENTE SE QUEDA CON SU RENGLÓN. Los cuatro en
 * línea dejan el campo en cinco caracteres y no se lee lo que se escribe. */
@media (max-width: 640px) {
  .receta-alta input[list] { flex: 1 0 100%; }
  .receta-alta input[inputmode] { flex: 1 1 auto; text-align: left; }
}

/* La página de la contraseña vestida del pilar del negocio (12 sep 2026). */
body.puerta-azul button.acento, body.puerta-azul .sello { background: var(--pilar-azul); }
body.puerta-verde button.acento, body.puerta-verde .sello { background: var(--pilar-verde); }
body.puerta-morado button.acento, body.puerta-morado .sello { background: var(--pilar-morado); }
body.puerta-azul button.acento:hover { background: var(--pilar-azul); opacity: 0.92; }
body.puerta-verde button.acento:hover { background: var(--pilar-verde); opacity: 0.92; }
body.puerta-morado button.acento:hover { background: var(--pilar-morado); opacity: 0.92; }

/* EL SELECTOR DE RANGO EN CUADRÍCULA (public/calendario-rango.js, 15 sep 2026). */
.selector-rango { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: var(--radio); background: var(--agrupado); }
.selector-rango .rango-nav { display: flex; align-items: center; gap: 8px; }
.selector-rango .rango-nav .rango-mes { flex: 1; text-align: center; font-weight: 700; font-size: 16px; }
.selector-rango .rango-nav button { min-height: 36px; min-width: 36px; padding: 0 10px; font-size: 18px; }
.selector-rango .rango-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.selector-rango .rango-dow { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--secundario); text-align: center; padding: 4px 0; }
.selector-rango .rango-dia { min-height: 36px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 14px; color: inherit; cursor: pointer; padding: 0; }
.selector-rango .rango-dia:hover { background: var(--crema); }
.selector-rango .rango-dia.otro { opacity: 0.35; }
.selector-rango .rango-dia.hoy { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.selector-rango .rango-dia.dentro { background: color-mix(in srgb, var(--negro) 10%, transparent); border-radius: 0; }
.selector-rango .rango-dia.extremo { background: var(--negro); color: var(--crema); font-weight: 700; }
.selector-rango .rango-resumen { margin: 0; font-size: 14px; color: var(--secundario); }
body.colegio .selector-rango .rango-dia.extremo { background: var(--institucional); }
body.colegio .selector-rango .rango-dia.dentro { background: color-mix(in srgb, var(--institucional) 14%, transparent); }

/* ============================================================
   LA CAPA TÁCTIL (dueño, 15 sep 2026: «la mayoría de la interfaz está
   optimizada para la computadora; vamos a operar en el navegador del
   celular y de la tableta; primero tabletas, None POS, Inventory,
   Attendance y la reja de ABC»).

   `pointer: coarse` es UN DEDO, sin importar el ancho: un iPad apaisado
   mide 1024 y se opera igual que un teléfono. Aquí va lo que a un dedo le
   hace falta y a un ratón no: 44 px de toque en todo lo que se pulsa, y
   campos de 16 px o más, que es lo que impide que iOS haga zoom solo al
   enfocar un campo (lo hace aunque el viewport diga user-scalable=no).
   ============================================================ */
@media (pointer: coarse) {
  body { overflow-x: clip; }
  button, a.boton { min-height: 48px; }
  /* Con `!important` a propósito: cada hoja tiene sus `.pantalla button.chico
     { min-height: 0 }` con más peso, y el dedo necesita los 44 px en todas. */
  button.chico { min-height: 44px !important; padding-top: 10px; padding-bottom: 10px; }
  button.enlace { min-height: 40px !important; padding-top: 8px; padding-bottom: 8px; }
  :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) { min-height: 48px; font-size: 17px; }
  input[type="checkbox"], input[type="radio"] { width: 22px; height: 22px; }
  /* El «hover» no existe con un dedo: que un toque no deje un botón
     «encendido» hasta el siguiente. */
  button:hover, a.boton:hover { background: var(--pulsable); }
  button.acento:hover, a.boton.acento:hover { background: var(--naranja); }
  body.colegio button.institucional:hover { background: var(--institucional); }
  /* Un correo o un nombre largo no ensanchan la pantalla: se parten. */
  .parentesco, .dato, .chica, .tenue { overflow-wrap: anywhere; }
}

/* LA TABLETA (768 a 1024 px) no es un teléfono grande: lo que cabe en dos
   columnas —el ticket junto al catálogo en None POS, los dos carriles de la
   reja en ABC— se queda en dos. Cada hoja lo decide en su sitio. */

/* LOS DÍAS LIBRES en la pantalla de checada (migr. 216): una lista corta
   de lo pedido y un formulario de tres campos. */
.dias { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: left; margin-top: 8px; }
.dias-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dias-lista li { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: var(--radio); background: var(--superficie); font-size: 15px; }
.dias-lista li span { font-size: 13px; color: var(--secundario); }
.dias-lista li.dias-aprobada span { color: #1f8a5b; font-weight: 700; }
.dias-lista li.dias-rechazada span { color: #b3261e; }
.dias button.chico { width: auto; align-self: flex-start; }
.dias-forma { display: flex; flex-direction: column; gap: 10px; }
.dias-forma p { margin: 0; font-size: 14px; }
.dias-rango { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dias-rango label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.dias-forma input { min-height: 48px; font-size: 16px; }
.dias-forma button.enlace { align-self: center; }

/* Los documentos del colaborador (migr. 217): la misma sección en
   Attendance y en Staff. */
.documentos-colaborador { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.documentos-colaborador p { margin: 0; }
.documentos-colaborador .urge { color: var(--naranja, #FF4E20); font-weight: 700; }
.lista-documentos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lista-documentos li { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: var(--borde, 1px solid var(--linea)); }
.lista-documentos li:last-child { border-bottom: 0; }
.lista-documentos .crece { flex: 1; min-width: 180px; }
.lista-documentos button.enlace { width: auto; min-height: 0; padding: 0; }
.chip-vigencia { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--agrupado); color: var(--secundario); }
.chip-vigencia.vigente { background: #e6f4ec; color: #1f8a5b; }
.chip-vigencia.por-vencer { background: #fff1e6; color: #b45309; }
.chip-vigencia.vencido { background: #fdecea; color: #b3261e; }
.subir-documento { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; align-items: end; padding-top: 6px; }
.subir-documento label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 700; }
.subir-documento input, .subir-documento select { width: 100%; min-height: 44px; font-weight: 400; }
.subir-documento button { width: auto; }

/* SUBIR DESDE EXCEL (16 sep 2026): sin rectángulo punteado. Una palabra
   abre el selector y la hoja aparece debajo como lo que es: una hoja. */
.acciones-excel { display: flex; justify-content: flex-end; }
.acciones-excel button.subir-excel { width: auto; }
.hoja-excel { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--radio); background: var(--superficie); text-align: left; }
.hoja-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hoja-cabeza b { font-size: 16px; }
.hoja-cabeza button.enlace { width: auto; min-height: 0; padding: 0; }
.hoja-excel .chica { font-size: 13px; margin: 0; }
.hoja-mapeo { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.hoja-mapeo label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--secundario); }
.hoja-mapeo label.obligatorio { color: var(--negro); }
.hoja-mapeo select { min-height: 40px; font-size: 14px; font-weight: 400; color: var(--negro); }
.hoja-opcion { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 700; color: var(--negro); }
.hoja-opcion select { min-height: 40px; font-size: 14px; font-weight: 400; }
.hoja-tabla { overflow-x: auto; border-radius: 12px; background: #fff; }
.hoja-tabla table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
.hoja-tabla th, .hoja-tabla td { padding: 6px 10px; border: 1px solid var(--linea); white-space: nowrap; text-align: left; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.hoja-tabla th { background: var(--agrupado); font-weight: 400; vertical-align: top; }
.hoja-tabla th .letra { display: block; font-size: 10px; color: var(--secundario); letter-spacing: 0.06em; }
.hoja-tabla th b { display: block; font-size: 13px; }
.hoja-tabla th .como { display: block; font-size: 11px; color: var(--institucional, #1259B8); font-weight: 700; }
.hoja-tabla th.asignada { background: #e8f0fb; }
.hoja-tabla td.asignada { background: #f5f8fd; }
.hoja-tabla .num { width: 34px; text-align: right; color: var(--secundario); background: var(--agrupado); font-size: 11px; }
.hoja-pie { display: flex; justify-content: flex-end; }
.hoja-pie button { width: auto; min-height: 48px; padding: 0 22px; }
.hoja-resultado { display: flex; flex-direction: column; gap: 8px; }
.hoja-resultado p { margin: 0; }
.hoja-ok b { font-size: 20px; }
.hoja-omitidas { margin: 0; padding-left: 18px; font-size: 13px; color: var(--secundario); display: flex; flex-direction: column; gap: 3px; }
.hoja-resultado button.chico { width: auto; align-self: flex-start; }

/* «HAY UNA VERSIÓN NUEVA» (version-nueva.js, 18 sep 2026): una barra abajo
   con el botón para recargar; no recarga sola. */
.version-nueva {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 12px 18px; border-radius: 999px;
  background: var(--negro); color: #fff; font-weight: 600;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.version-nueva button { background: #fff; color: var(--negro); }

/* CADA PILAR PINTA SU TABLERO (dueño, 18 sep 2026: «Financial sigue siendo
   naranja; quiero que sean similares los dashboards de mis cuatro
   pilares»). Los tokens conservan su nombre para no tocar doce hojas:
   `--naranja` ES el acento del tablero, y el body del pilar lo redefine.
   Entrepreneur se queda naranja; Financial (Financial, Operations, OS,
   y Attendance/POS vestidos de Financial) verde; Meta morado; Scholastic
   y Staff azul. */
body.pilar-verde  { --naranja: var(--pilar-verde);}
body.pilar-morado { --naranja: var(--pilar-morado); }
body.pilar-azul   { --naranja: var(--pilar-azul); }

/* ============================================================
   IDENTIDAD v3 (18 sep 2026): las piezas nuevas que las hojas consumen.
   ============================================================ */

/* Dentro de una tarjeta blanca, un campo blanco desaparece: ahí los campos
   y lo pulsable se ponen gris. Fuera (sobre el hueso) siguen blancos. */
.tarjeta, .ficha, .caja, .panel-blanco { --agrupado: #eeece7; --pulsable: #eeece7; --pulsable-encima: #e3e1da; }

/* LA ETIQUETA PEQUEÑA: mayúsculas, espaciada, gris; va ARRIBA de la cifra
   o del nombre y es lo que sustituye a media frase. */
.micro {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secundario);
}

/* LA CIFRA: ligera (300), grande, tabular. La palabra va en `.micro` debajo,
   con aire (dueño: «el texto debajo de las cantidades está muy pegado»). */
.cifra { display: flex; flex-direction: column; gap: 8px; }
.cifra > b, .cifra > strong, .cifra-num {
  font-size: 30px;
  font-weight: 300;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cifra.centrada { align-items: center; text-align: center; }
.cifra.acento > b, .cifra.acento .cifra-num { color: var(--naranja); }

/* LA FILA CON ICONO: icono en su cuadro gris, nombre, lo que acompaña, el
   dato a la derecha y la flecha. Separadas por la línea fina, sin cajas. */
.fila-icono {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--linea);
  text-decoration: none; color: inherit; width: 100%;
  background: none; border-radius: 0; font: inherit; text-align: left; min-height: 0;
}
.fila-icono:last-child { border-bottom: 0; }
.fila-icono:hover { background: none; }
.fila-icono .cuadro {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
  background: var(--gris); display: grid; place-items: center;
}
.fila-icono .cuadro svg { display: block; }
.fila-icono .texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fila-icono .texto b { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }
.fila-icono .texto span { font-size: 13px; color: var(--secundario); }
.fila-icono .dato { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.fila-icono .flecha { flex: 0 0 auto; color: var(--secundario); display: grid; place-items: center; }

/* EL CHIP: pequeño, gris, una palabra o dos, nunca partido. */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 10px; height: 26px; border-radius: 8px;
  background: var(--gris); color: var(--negro);
  font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
.chip.puesto { background: var(--negro); color: #fff; }

/* LA PÍLDORA: el botón compacto de la nueva imagen, con icono. */
button.pildora, a.pildora {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 16px; min-height: 44px; width: auto; border-radius: 999px;
  font-size: 14px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
}
button.pildora svg, a.pildora svg { display: block; }

/* EL ICONO EN LÍNEA (public/iconos.js): hereda el color del texto. */
svg.icono { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* LA BARRA INFERIOR DEL TELÉFONO: iconos con su nombre en minúsculas, sin
   espaciado (dueño: «su texto está muy amontonado»). Cada hoja decide qué
   `nav` la lleva; aquí solo la forma. */
@media (max-width: 900px) {
  nav.barra-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; padding: 4px 6px max(env(safe-area-inset-bottom), 20px);
    background: var(--blanco); border-top: 1px solid var(--linea);
  }
  nav.barra-inferior a, nav.barra-inferior button {
    flex: 1 1 0; min-width: 0; min-height: 0; width: auto;
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    padding: 10px 0 6px; background: none; border: 0; border-radius: 0;
    font-size: 10px; font-weight: 600; letter-spacing: 0; white-space: nowrap;
    color: var(--secundario); text-decoration: none;
  }
  nav.barra-inferior a[aria-current], nav.barra-inferior button[aria-pressed="true"],
  nav.barra-inferior .puesta { color: var(--negro); background: none; }
  nav.barra-inferior a[aria-current] svg, nav.barra-inferior .puesta svg { color: var(--naranja); }
  body.con-barra-inferior { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
}

/* FÁCIL DE TECLEAR (dueño, 19 sep 2026): con un dedo, NINGÚN campo baja de
   16 px, que es lo que hace que iOS acerque la pantalla al enfocarlo. Gana a
   cualquier hoja de pantalla que lo haya dejado en 13-15 px. */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea { font-size: 16px !important; }
}

/* SIN BARRAS DE DESPLAZAMIENTO A LA VISTA (dueño, 19 sep 2026: «quítamela,
   que no corte mi texto y que el deslizamiento sea intuitivo sin ver la
   barra»): se desliza igual, con el dedo o la rueda, pero la barra no se
   pinta ni roba ancho. */
html, body, main, .tabla-envoltura, .tabla-envuelta, .hoja-tabla, nav, div { scrollbar-width: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, main::-webkit-scrollbar, div::-webkit-scrollbar, nav::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* LA CABECERA DEL NAP (19 sep 2026): isotipo arriba y el producto en
   pequeño, en negro, centrado. Y el círculo de la huella de la pantalla
   inicial; el retardo en una tarjeta corta. */
.marca.marca-nap { flex-direction: column; justify-content: center; gap: 10px; padding-top: 34px; }
.marca.marca-nap span.micro { color: var(--negro); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.circulo-huella { width: 96px; height: 96px; border-radius: 50%; background: var(--superficie); display: flex; align-items: center; justify-content: center; margin: 16px auto 0; }
.aviso-retardo { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px; font-size: 14px; font-weight: 600; }

/* ---------- MIENTRAS CARGA (docs/21 §C1, public/cargando.js) ----------
   Un esqueleto con la forma de un tablero v3 —tres celdas y unas filas— y
   la palabra «Cargando…». Late despacio; con movimiento reducido, quieto. */
main#vista .cargando { display: flex; flex-direction: column; gap: 14px; width: 100%; text-align: left; }
.cargando-texto { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--secundario); }
.cargando-celdas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cargando-celdas span { height: 78px; border-radius: 16px; background: var(--superficie); }
.cargando-lista { display: flex; flex-direction: column; gap: 1px; border-radius: 18px; overflow: hidden; }
.cargando-lista span { height: 60px; background: var(--superficie); }
.cargando-celdas span, .cargando-lista span { animation: latido 1.4s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.55; } }
main#vista.esperando { opacity: 0.55; transition: opacity 0.2s; pointer-events: none; }
main#vista.esperando::before {
  content: ""; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 90;
  background: var(--negro); animation: latido 1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .cargando-celdas span, .cargando-lista span, main#vista.esperando::before { animation: none; }
}

/* ---------- LAS VENTANAS DE NONE (docs/21 §C3, public/dialogos.js) ----------
   En lugar de prompt() y confirm() del navegador. En el teléfono sube desde
   abajo; en PC se centra. Lo destructivo lleva el botón en rojo. */
.dialogo-fondo {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: rgba(10, 10, 10, 0.45);
}
.dialogo-none {
  width: 100%; max-width: 440px; box-sizing: border-box; max-height: 88vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 20px;
  border-radius: 22px; background: var(--superficie, #fff); color: var(--negro); text-align: left;
}
.dialogo-none .dialogo-titulo { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.3; white-space: pre-line; }
.dialogo-none .dialogo-texto { margin: 0; font-size: 14px; line-height: 1.5; color: var(--secundario); white-space: pre-line; }
.dialogo-none .dialogo-campo {
  width: 100%; box-sizing: border-box; min-height: 48px; padding: 0 16px; border: 0; border-radius: 14px;
  background: var(--gris, #E6E4DE); color: var(--negro); font-size: 16px;
}
.dialogo-none textarea.dialogo-campo { min-height: 96px; padding: 12px 14px; }
.dialogo-none .dialogo-botones { display: flex; gap: 8px; justify-content: flex-end; }
.dialogo-none .dialogo-botones button { flex: 1 1 0; min-height: 48px; font-size: 15px; font-weight: 600; }
.dialogo-none .dialogo-si { background: var(--negro); color: var(--blanco); }
.dialogo-none .dialogo-si.dialogo-peligro { background: #B42318; color: #fff; }
.dialogo-none .dialogo-si:hover { filter: brightness(0.92); }
@media (max-width: 640px) {
  .dialogo-fondo { align-items: flex-end; padding: 0; }
  .dialogo-none { max-width: none; border-radius: 22px 22px 0 0; padding-bottom: calc(22px + env(safe-area-inset-bottom)); }
}