/* =============================================================================================
   restaurante-saas · hoja única del panel (Fase 0).
   Tokens: paleta de Restware (styles.css L2-L7: #49EDCB / #0D2E3D / #598381 / #F4F2F3) sobre la
   estructura de tokens del panel de Pawcitas (grises, sombras, radios, controles, foco).
   La marca se afina después; aquí sólo hay un sistema coherente y legible en tablet y teléfono.
   ============================================================================================= */

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/vendor/fonts/montserrat-latin-var.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 {
  /* Marca */
  --primario: #49EDCB;
  --primario-oscuro: #22c7a6;
  --secundario: #0D2E3D;
  --acento: #598381;
  --fondo: #F4F2F3;

  /* Grises */
  --gris-50: #f8f9fa;
  --gris-100: #F4F2F3;
  --gris-200: #e9ecef;
  --gris-300: #dee2e6;
  --gris-400: #ced4da;
  --gris-500: #adb5bd;
  --gris-600: #6c757d;
  --gris-700: #495057;
  --gris-800: #343a40;
  --gris-900: #212529;

  /* Estados. Los tres primeros se usan como TEXTO sobre su fondo claro: el tono está elegido para
     pasar AA (4.5:1) medido con axe-core, no a ojo. Cambiar uno cambia el producto entero. */
  --exito: #1a794c;
  --exito-fondo: #e6f6ee;
  --peligro: #c62828;
  --peligro-fondo: #fdecea;
  /* El ámbar del producto SIEMPRE es tinta sobre fondo claro, nunca fondo. Estaba en #a05f00, que da
     4.30 sobre el chip de la cuenta en la que estás (#daf1ed, la menta al 15 % sobre blanco) y AA pide
     4.50 para texto normal: lo cazó la pasada de accesibilidad de la Fase 11, con la cuenta abierta y
     renglones sin enviar a cocina — una combinación que la pasada de la Fase 10 nunca tuvo en pantalla.
     A #8a5200 da 5.41 ahí, 5.86 sobre el fondo de aviso y 6.39 sobre blanco. */
  --aviso: #8a5200;
  --aviso-fondo: #fff4e0;
  --info: #0b6478;
  --info-fondo: #e3f3f7;

  /* Superficies y texto */
  --superficie: #ffffff;
  --superficie-alt: #f6f9fb;
  --texto: var(--gris-900);
  /* No es var(--gris-600): ese gris daba 4.2:1 sobre el fondo del panel y reprobaba AA. Los grises
     de la escala siguen valiendo para bordes y superficies; para TEXTO manda este. */
  --texto-suave: #5d656c;
  /* Ni var(--acento): el acento de marca da 4.2:1 en blanco. Éste es el mismo tono, más oscuro. */
  --enlace: #4b6f6d;
  --enlace-hover: var(--secundario);
  /* El acento como FONDO con texto blanco encima (la marca del panel de plataforma). */
  --acento-oscuro: #476867;

  /* Sombras (difusas, como el módulo de lealtad de Pawcitas) */
  --sombra-xs: 0 1px 2px rgba(13, 46, 61, .06);
  --sombra-sm: 0 2px 4px rgba(13, 46, 61, .08);
  --sombra-md: 0 4px 12px rgba(13, 46, 61, .12);
  --sombra-tarjeta: 0 14px 26px rgba(13, 46, 61, .07);

  /* Radios, transiciones, controles */
  --r-2: 6px;
  --r: 10px;
  --r-lg: 16px;
  --tr: 180ms cubic-bezier(.4, 0, .2, 1);
  --control-h: 44px;
  --foco: 0 0 0 4px rgba(73, 237, 203, .35);

  --barra-h: 60px;
  --lateral-w: 250px;
  --fuente: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--fuente);
  font-size: 15px;
  line-height: 1.5;
  color: var(--texto);
  background: var(--fondo);
}
a { color: var(--enlace); text-decoration: none; }
a:hover { color: var(--enlace-hover); text-decoration: underline; }
h1, h2, h3 { margin: 0 0 .5rem; line-height: 1.25; color: var(--secundario); }
h1 { font-size: 1.5rem; font-weight: 700; }
h2 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1rem; }
[x-cloak] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--foco); }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Armazón ---------- */
.barra {
  position: sticky; top: 0; z-index: 30;
  height: var(--barra-h);
  display: flex; align-items: center; gap: .75rem;
  padding: 0 1rem;
  background: var(--secundario); color: #fff;
  box-shadow: var(--sombra-md);
}
/* `min-width: 0` es lo que deja que el bloque de marca ENCOJA. Sin él, un nombre de negocio largo
   («Gorditas Doña Lupita · DEMO») no cabe a 360 px, se parte en tres renglones y se sale de la barra,
   que tiene alto fijo. El mostrador ya lo hacía en su propia hoja; esto lo arregla para todas. */
.barra__marca { display: flex; align-items: center; gap: .6rem; min-width: 0; color: #fff; font-weight: 700; letter-spacing: .01em; }
.barra__marca:hover { color: #fff; text-decoration: none; }
/* LA MARCA. Es un SVG en línea con `stroke: currentColor`, así que el color lo pone `color` y no el
   fichero: la misma marca va en menta sobre la barra oscura y en verde sobre blanco. Se dimensiona
   por su caja, nunca con un ancho fijo dentro del SVG, para que sirva a 30 px y a 180 px. */
.marca { display: block; width: 100%; height: 100%; }
.barra__logo { display: block; width: 32px; height: 32px; flex: 0 0 auto; color: var(--primario); }
/* `display:block` a propósito: hoy la caja vive dentro de una barra flex y eso ya la convierte en
   bloque, pero un <span> suelto es inline y ahí el ancho y el alto no se aplicarían — el logotipo
   saldría del tamaño que le diera la gana el día que alguien use la marca fuera de la barra. */
.barra__negocio { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
/* Se recorta con puntos suspensivos en vez de partirse: el nombre completo sigue en el título de la
   página y en la pantalla «Mi negocio», así que aquí no se pierde nada que haga falta leer. */
.barra__negocio > span, .barra__negocio small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra__negocio small { color: rgba(255, 255, 255, .7); font-size: .78rem; }
.barra__derecha { margin-left: auto; display: flex; align-items: center; gap: .75rem; }
.barra__usuario { display: none; flex-direction: column; text-align: right; line-height: 1.15; }
.barra__usuario small { color: rgba(255, 255, 255, .7); font-size: .78rem; }
.barra__usuario a { color: #fff; text-decoration: underline; }
.barra__boton {
  background: transparent; border: 1px solid rgba(255, 255, 255, .35); color: #fff;
  border-radius: var(--r-2); padding: .4rem .7rem; cursor: pointer; font: inherit; font-size: .9rem;
  min-height: var(--control-h);
}
.barra__boton:hover { background: rgba(255, 255, 255, .1); }
.barra__menu { display: inline-grid; place-items: center; width: 40px; height: 40px; }

.armazon { display: flex; min-height: calc(100vh - var(--barra-h)); }
.lateral {
  position: fixed; top: var(--barra-h); bottom: 0; left: 0; z-index: 25;
  width: var(--lateral-w);
  background: var(--superficie);
  border-right: 1px solid var(--gris-200);
  padding: 1rem 0;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--tr);
}
.lateral--abierto { transform: translateX(0); box-shadow: var(--sombra-md); }
.lateral__seccion { padding: .75rem 1.25rem .25rem; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.lateral__enlace {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem 1.25rem; color: var(--gris-800); font-weight: 500;
  border-left: 3px solid transparent;
}
.lateral__enlace:hover { background: var(--superficie-alt); text-decoration: none; color: var(--secundario); }
.lateral__enlace--activo { border-left-color: var(--primario); background: rgba(73, 237, 203, .12); color: var(--secundario); font-weight: 600; }
.telon { position: fixed; inset: var(--barra-h) 0 0 0; z-index: 20; background: rgba(13, 46, 61, .35); }
.contenido { flex: 1; min-width: 0; padding: 1.25rem 1rem 3rem; }
.contenido__interior { max-width: 1100px; margin: 0 auto; }

@media (min-width: 960px) {
  .barra__menu { display: none; }
  .barra__usuario { display: flex; }
  .lateral { transform: none; box-shadow: none; }
  .telon { display: none; }
  .contenido { margin-left: var(--lateral-w); padding: 1.75rem 2rem 3rem; }
}

/* ---------- Cabecera de página ---------- */
.cabecera { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-bottom: 1.25rem; }
.cabecera h1 { margin: 0; }
.cabecera__sub { margin: 0; color: var(--texto-suave); }
.cabecera__acciones { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--superficie); border-radius: var(--r-lg); box-shadow: var(--sombra-tarjeta); padding: 1.25rem; }
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta__titulo { font-size: 1rem; font-weight: 600; color: var(--secundario); margin: 0 0 1rem; }
.rejilla { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.indicador { background: var(--superficie); border-radius: var(--r-lg); box-shadow: var(--sombra-tarjeta); padding: 1rem 1.25rem; border-left: 5px solid var(--primario); }
.indicador__valor { font-size: 1.9rem; font-weight: 700; color: var(--secundario); line-height: 1.1; }
.indicador__etiqueta { color: var(--texto-suave); font-size: .9rem; }
.indicador a { display: inline-block; margin-top: .35rem; font-size: .85rem; }

/* Tarjetas de opción (canal de venta, motivo de cancelación...). Viven aquí y no en la hoja del
   mostrador porque el fragmento que las pinta se reutiliza en el historial de ventas, que carga
   sólo app.css: allí se veían como radios sueltos de 13 px. Un control compartido, una hoja. */
.opciones-canal { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.opcion { display: flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 .8rem; border: 1px solid var(--gris-300); border-radius: 10px; cursor: pointer; }
.opcion input { width: 20px; height: 20px; margin: 0; accent-color: var(--primario-oscuro); }
.opcion:has(input:checked) { border-color: var(--primario-oscuro); background: rgba(73, 237, 203, .15); }
.opcion small { color: var(--texto-suave); margin-left: auto; }

/* Un enlace dentro de un párrafo no se distingue sólo por el color (WCAG 1.4.1): lleva subrayado.
   Los de navegación, tablas y tarjetas no lo necesitan porque no van rodeados de texto. */
p a:not(.btn), .campo__ayuda a, li a:not(.btn):not(.lateral__enlace) { text-decoration: underline; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--control-h); padding: 0 1.1rem;
  border-radius: var(--r); border: 1px solid transparent;
  font: inherit; font-weight: 600; font-size: .95rem; cursor: pointer;
  transition: background var(--tr), color var(--tr), box-shadow var(--tr);
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn--primario { background: var(--primario); color: var(--secundario); }
.btn--primario:hover { background: var(--primario-oscuro); color: var(--secundario); }
.btn--secundario { background: var(--secundario); color: #fff; }
.btn--secundario:hover { background: #163f52; color: #fff; }
.btn--suave { background: var(--superficie); color: var(--secundario); border-color: var(--gris-300); }
.btn--suave:hover { background: var(--superficie-alt); color: var(--secundario); }
.btn--peligro { background: var(--peligro-fondo); color: var(--peligro); border-color: transparent; }
.btn--peligro:hover { background: #f9d4d1; color: var(--peligro); }
.btn--chico { min-height: var(--control-h); padding: 0 .8rem; font-size: .85rem; border-radius: var(--r-2); }
.btn--bloque { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 1rem; }
.campo label, .campo__etiqueta { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; color: var(--gris-800); }
.campo__ayuda { display: block; margin-top: .3rem; color: var(--texto-suave); font-size: .82rem; }
.campo__error { display: block; margin-top: .3rem; color: var(--peligro); font-size: .85rem; font-weight: 500; }
.entrada, .selector, .area {
  width: 100%; min-height: var(--control-h);
  padding: .55rem .8rem;
  border: 1px solid var(--gris-400); border-radius: var(--r);
  background: var(--superficie); color: var(--texto);
  font: inherit; font-size: 1rem;
  transition: border-color var(--tr), box-shadow var(--tr);
}
.area { min-height: 96px; resize: vertical; }
.entrada:focus, .selector:focus, .area:focus { border-color: var(--primario-oscuro); box-shadow: var(--foco); outline: none; }
.entrada--error, .selector--error { border-color: var(--peligro); }
.entrada[type="file"] { padding: .45rem .8rem; }
.fila { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .fila--2 { grid-template-columns: 1fr 1fr; } .fila--3 { grid-template-columns: 1fr 1fr 1fr; } }
.casilla { display: flex; align-items: center; gap: .55rem; min-height: var(--control-h); font-weight: 500; cursor: pointer; }
.casilla input { width: 20px; height: 20px; accent-color: var(--primario-oscuro); }
.acciones-form { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
.prefijo { display: flex; align-items: center; }
.prefijo > span { min-height: var(--control-h); display: inline-flex; align-items: center; padding: 0 .75rem; background: var(--gris-100); border: 1px solid var(--gris-400); border-right: 0; border-radius: var(--r) 0 0 var(--r); color: var(--texto-suave); }
.prefijo > .entrada { border-radius: 0 var(--r) var(--r) 0; }
.miniatura { width: 96px; height: 96px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--gris-300); background: var(--superficie-alt); }
.miniatura--tabla { width: 44px; height: 44px; border-radius: var(--r-2); }
.imagen-vacia { width: 44px; height: 44px; border-radius: var(--r-2); background: var(--gris-200); display: inline-grid; place-items: center; color: var(--texto-suave); font-size: .7rem; }

/* ---------- Mensajes ---------- */
.aviso { padding: .8rem 1rem; border-radius: var(--r); margin-bottom: 1rem; font-weight: 500; border: 1px solid transparent; }
.aviso--exito { background: var(--exito-fondo); color: var(--exito); border-color: #bfe5d0; }
.aviso--error { background: var(--peligro-fondo); color: var(--peligro); border-color: #f4c7c3; }
.aviso--aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: #f5dfb6; }
.aviso--info { background: var(--info-fondo); color: var(--info); border-color: #bfe0ea; }
.aviso ul { margin: .25rem 0 0 1.1rem; padding: 0; }

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; }
.tabla th, .tabla td { padding: .7rem .75rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--gris-200); }
.tabla th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 700; background: var(--superficie-alt); }
.tabla tbody tr:hover { background: rgba(73, 237, 203, .07); }
.tabla td.numero, .tabla th.numero { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.acciones { text-align: right; white-space: nowrap; }
.tabla .acciones form { display: inline; }
.tabla .acciones .btn + .btn, .tabla .acciones form + .btn, .tabla .acciones .btn + form { margin-left: .35rem; }
.vacio { padding: 2.5rem 1rem; text-align: center; color: var(--texto-suave); }
.vacio strong { display: block; color: var(--secundario); font-size: 1.05rem; margin-bottom: .25rem; }

/* ---------- Etiquetas ---------- */
.etiqueta { display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.etiqueta--activo { background: var(--exito-fondo); color: var(--exito); }
.etiqueta--inactivo { background: var(--gris-200); color: var(--gris-700); }
.etiqueta--rol { background: rgba(73, 237, 203, .18); color: var(--secundario); }

/* ---------- Búsqueda y paginación ---------- */
.busqueda { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }
.busqueda .entrada { flex: 1 1 220px; }
.busqueda .selector { flex: 0 1 220px; }
.paginacion { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: 1rem; }
.paginacion__info { color: var(--texto-suave); font-size: .85rem; margin-right: auto; }
.paginacion a, .paginacion span.pagina { min-width: 36px; height: 36px; display: inline-grid; place-items: center; padding: 0 .5rem; border-radius: var(--r-2); border: 1px solid var(--gris-300); background: var(--superficie); color: var(--secundario); font-weight: 600; font-size: .9rem; }
.paginacion a:hover { background: var(--primario); border-color: var(--primario); text-decoration: none; }
.paginacion span.pagina--actual { background: var(--secundario); color: #fff; border-color: var(--secundario); }
.paginacion span.pagina--deshabilitada { opacity: .45; }

/* ---------- Listas dinámicas (extras, variedades) ---------- */
.lista-filas { display: grid; gap: .6rem; }
.lista-filas__fila { display: grid; gap: .5rem; grid-template-columns: 1fr; align-items: center; padding: .75rem; border: 1px solid var(--gris-200); border-radius: var(--r); background: var(--superficie-alt); }
@media (min-width: 640px) {
  .lista-filas__fila--extra { grid-template-columns: 1fr 140px auto auto; }
  .lista-filas__fila--variedad { grid-template-columns: auto 1fr 160px; }
}
.lista-filas .entrada { min-height: var(--control-h); }

/* ---------- Pantallas públicas (entrada, registro) ---------- */
.publico { min-height: 100vh; display: flex; flex-direction: column; }
.publico__barra { background: var(--secundario); color: #fff; padding: .9rem 1rem; display: flex; align-items: center; gap: .6rem; }
.publico__cuerpo { flex: 1; display: grid; place-items: center; padding: 1.5rem 1rem; }
.publico__tarjeta { width: 100%; max-width: 480px; background: var(--superficie); border-radius: var(--r-lg); box-shadow: var(--sombra-tarjeta); padding: 1.75rem; }
.publico__tarjeta h1 { margin-bottom: .25rem; }
.publico__pie { text-align: center; color: var(--texto-suave); font-size: .85rem; padding: 1rem; }
.codigo { letter-spacing: .5em; font-size: 1.5rem; text-align: center; font-weight: 700; }

/* ---------- Utilidades ---------- */
.mt-1 { margin-top: 1rem; } .mb-0 { margin-bottom: 0; } .texto-suave { color: var(--texto-suave); }

/* TEXTO DE APOYO. `.ayuda` ya se usaba en las pantallas del lote 1 (reportes, ficha del cliente) SIN
   estilo: heredaba el del párrafo y se leía igual que el contenido, que es justo lo que no es. Se define
   aquí, donde viven las utilidades, junto con las dos que le hacen falta a la pantalla de locales. */
.ayuda { color: var(--texto-suave); font-size: .85rem; margin: .75rem 0 0; }
.subtitulo { font-size: .9rem; font-weight: 700; color: var(--secundario); margin: 0 0 .5rem; }
.apagado { color: var(--texto-suave); }
.etiqueta--info { background: var(--info-fondo); color: var(--info); }
.texto-derecha { text-align: right; } .oculto { display: none !important; }
.fila-inline { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

/* ---------- Chips: una opción que se toca con el dedo ----------
   Estaban en mostrador.css y los usa también el formulario de una promoción, que NO carga esa hoja: allí
   el chip medía 23 px de alto en vez de los 44 que exige el listón de lo tocable. Lo cazó la pasada de
   UX/UI de la Fase 10, midiendo. */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.chip { display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: 0 .85rem; border-radius: 999px; border: 1px solid var(--gris-300); background: var(--superficie); cursor: pointer; user-select: none; }
.chip input { width: 20px; height: 20px; margin: 0; accent-color: var(--primario-oscuro); }
.chip:has(input:checked) { background: rgba(73, 237, 203, .2); border-color: var(--primario-oscuro); }
.chip small { color: var(--texto-suave); }

/* Una fila de dos columnas cuyas tarjetas NO se estiran: cada una mide lo que su contenido.
   Sin esto, una tarjeta corta al lado de un formulario largo deja media pantalla en blanco — y eso es
   espacio desperdiciado, que esta fase mide. */
.fila--arriba { align-items: start; }

/* ---------- Pestañas y totales compartidos con el mostrador (historial) ---------- */
.pestanas { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .6rem; -webkit-overflow-scrolling: touch; }
.pestana { flex: 0 0 auto; min-height: 44px; display: inline-flex; align-items: center; gap: .3rem; padding: 0 .95rem; border-radius: 999px; border: 1px solid var(--gris-300); background: var(--superficie); font: inherit; font-weight: 600; color: var(--secundario); cursor: pointer; }
.pestana:hover { text-decoration: none; border-color: var(--acento); }
.pestana--activa { background: var(--secundario); color: #fff; border-color: var(--secundario); }
.total-fila { display: flex; justify-content: space-between; gap: .5rem; padding: .15rem 0; font-variant-numeric: tabular-nums; max-width: 420px; margin-left: auto; }
.total-fila--total { font-size: 1.3rem; font-weight: 800; color: var(--secundario); border-top: 1px solid var(--gris-300); margin-top: .3rem; padding-top: .45rem; }
code { font-size: .8rem; word-break: break-word; }

/* ---------- Reportes: barras en CSS, sin librerías ---------- */
.barra-col { width: 28%; min-width: 90px; }
.barra-h { height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--primario), var(--primario-oscuro)); min-width: 0; }
.tabla .cabecera { margin-bottom: .5rem; }

/* ---------- Hallazgo NAV-4 (QA de navegador, 768 px): las columnas de .fila no encogían con tablas anchas ---------- */
.fila > *, .rejilla > * { min-width: 0; }
.tarjeta { min-width: 0; }

/* ---------- Teclado de PIN (Fase 3) ---------- */
.pin { max-width: 420px; }
.pin__dispositivo { color: var(--texto-suave); font-size: .9rem; }
.pin__entrada { text-align: center; font-size: 2rem; letter-spacing: .5em; min-height: 64px; margin-bottom: .75rem; }
.pin__teclas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.pin__tecla { min-height: 64px; font: inherit; font-size: 1.6rem; font-weight: 700; border-radius: var(--r); border: 1px solid var(--gris-300); background: var(--superficie); color: var(--secundario); cursor: pointer; }
.pin__tecla:hover { background: var(--superficie-alt); }
.pin__tecla--borrar { font-size: 1.4rem; }
.pin__tecla--entrar { background: var(--primario); border-color: var(--primario); font-size: 1.1rem; }
.pin__tecla--entrar[disabled] { opacity: .5; cursor: not-allowed; }
.pin__pie { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.25rem; flex-wrap: wrap; }

/* ---------- Impresión automática (Fase 4): el marco que imprime no se ve, pero existe (display:none no imprime) ---------- */
.impresion-oculta { position: fixed; left: -20px; bottom: 0; width: 2px; height: 2px; opacity: 0; border: 0; pointer-events: none; }

/* =============================================================================================
   Fase 5 · suscripción y panel de plataforma
   ============================================================================================= */

/* Cinta de aviso al DUEÑO: pegada bajo la barra, ancho completo, sin tapar contenido. */
.cinta-suscripcion {
  display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem;
  padding: .7rem 1rem; font-weight: 500; font-size: .92rem;
  border-bottom: 1px solid transparent;
}
.cinta-suscripcion__icono { font-size: 1.1rem; line-height: 1; }
.cinta-suscripcion .btn { margin-left: auto; }
.cinta-suscripcion--vencida { background: var(--aviso-fondo); color: var(--aviso); border-bottom-color: #f5dfb6; }
.cinta-suscripcion--suspendida { background: var(--peligro-fondo); color: var(--peligro); border-bottom-color: #f4c7c3; }
.cinta-suscripcion--suspendida .btn--primario { background: var(--peligro); color: #fff; }

/* Estados de la suscripción: mismo color en la etiqueta de la tabla y en el indicador. */
.etiqueta--trial      { background: var(--info-fondo);    color: var(--info); }
.etiqueta--activa     { background: var(--exito-fondo);   color: var(--exito); }
.etiqueta--vencida    { background: var(--aviso-fondo);   color: var(--aviso); }
.etiqueta--suspendida { background: var(--peligro-fondo); color: var(--peligro); }
.etiqueta--pago       { background: rgba(73, 237, 203, .18); color: var(--secundario); }
.indicador--trial      { border-left-color: var(--info); }
.indicador--activa     { border-left-color: var(--exito); }
.indicador--vencida    { border-left-color: var(--aviso); }
.indicador--suspendida { border-left-color: var(--peligro); }

.rejilla--suscripcion { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.rejilla--form { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: start; }
.campo--ancho { grid-column: 1 / -1; }

.datos-pago { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; margin: .75rem 0; }
.datos-pago dt { color: var(--texto-suave); font-size: .85rem; }
.datos-pago dd { margin: 0; font-weight: 600; }
.dato-copiable {
  background: var(--superficie-alt); border: 1px solid var(--gris-200); border-radius: var(--r-2);
  padding: .1rem .4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .04em;
}
.acciones-pago { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .5rem; }
.acciones-pago form { display: inline; }

/* Panel de plataforma: la misma hoja, otra barra. Nunca lleva la marca de un negocio. */
.barra--plataforma { background: #10202b; }
/* El panel de plataforma lleva la MISMA marca en blanco: el tono distinto es la señal de que no
   estás en el panel de un negocio, que es justo lo que hacía antes la placa de otro color. */
.barra--plataforma .barra__logo, .publico__barra--plataforma .barra__logo { color: #fff; }
.publico__barra--plataforma { background: #10202b; }
.contenido--plataforma { margin-left: 0; padding: 1.25rem 1rem 3rem; }
.contenido--plataforma .contenido__interior { max-width: 1200px; }
@media (min-width: 960px) {
  .contenido--plataforma { padding: 1.75rem 2rem 3rem; }
}

/* ---------- Fase 6 · inventario ---------- */
.numero--negativo { color: var(--peligro); font-weight: 700; }
.lista-simple { margin: 0; padding-left: 1.1rem; }
.lista-simple li { margin-bottom: .35rem; }
.htmx-indicator { display: none; align-self: center; color: var(--texto-suave); font-size: .85rem; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: inline; }
.lista-filas__fila--compra { display: grid; grid-template-columns: minmax(140px, 2fr) minmax(140px, 2fr) minmax(90px, 1fr) minmax(110px, 1fr) auto; gap: .5rem; align-items: start; }
.entrada--corta { max-width: 140px; }
@media (max-width: 767px) {
  .lista-filas__fila--compra { grid-template-columns: 1fr 1fr; }
}

/* ---------- Fase 6 · tablero de inicio (sin librerías de gráficas: las barras son ancho en %) ---------- */
.tablero { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .tablero { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tablero .tarjeta + .tarjeta { margin-top: 0; }
.tablero__comparacion { margin: .35rem 0 0; font-weight: 700; color: var(--texto-suave); }
.tablero__comparacion small { display: block; font-weight: 400; font-size: .8rem; }
.tablero__comparacion--sube { color: var(--exito); }
.tablero__comparacion--baja { color: var(--peligro); }
.tablero__lista { list-style: none; margin: .5rem 0 .75rem; padding: 0; display: grid; gap: .35rem; }
.tablero__lista li { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .6rem; padding: .45rem .25rem; border-bottom: 1px solid var(--gris-100); min-height: 44px; }
.tablero__lista li:last-child { border-bottom: 0; }
.tablero__lista li > a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex: 1 1 auto; min-width: 0; color: inherit; }
.tablero__lista li > a:hover { text-decoration: none; color: var(--enlace-hover); }
.tablero__lista-nombre { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tablero__lista-dato { text-align: right; white-space: nowrap; font-weight: 600; }
.tablero__lista-dato small { display: block; font-weight: 400; color: var(--texto-suave); font-size: .78rem; }
.tablero__lista--barras li { display: grid; grid-template-columns: 1fr auto; gap: .15rem .6rem; }
.tablero__lista--barras .barra-h { grid-column: 1 / -1; }
.tablero__accesos { display: flex; flex-wrap: wrap; gap: .5rem; }
.tablero .vacio { padding: 1.25rem .5rem; }

/* Confirmación en dos pasos de una acción destructiva. No es un confirm() del navegador (bloquea la
   página y no se puede leer con lupa): es la misma pregunta, dentro de la pantalla. */
.confirmacion { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.confirmacion__texto { flex: 1 1 100%; color: var(--peligro); font-weight: 600; font-size: .9rem; }

/* ---------- Fase 7 · Facturación (CFDI) ---------- */
.lista-chips { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.xml-crudo { margin: 0; padding: .75rem; background: var(--gris-100); border: 1px solid var(--gris-300); border-radius: .5rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; line-height: 1.45; white-space: pre; }
/* EL DATO EXACTO: lo que un programador necesita ver y el dueño de la fonda no. Se guarda entero y se
   abre quien quiera; cerrado, la pantalla habla en palabras. */
.dato-exacto > summary { cursor: pointer; color: var(--secundario); font-weight: 600; padding: .25rem 0; }
.dato-exacto > summary:hover { text-decoration: underline; }
.dato-exacto[open] > summary { margin-bottom: .35rem; }
.dato-exacto code { overflow-wrap: anywhere; }
.dato-fuerte { font-variant-numeric: tabular-nums; word-break: break-all; }

/* ---------- Fase 8 · Timbres ---------- */
.saldo-timbres { margin: .25rem 0 .75rem; font-size: 1.05rem; }
.saldo-timbres strong { font-size: 2.6rem; font-weight: 800; color: var(--secundario); display: block; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* ---------- Fase 8 · Autofactura pública (sin barra, sin menú: no es el producto) ---------- */
.publica-body { background: var(--gris-100); margin: 0; }
.publica { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; gap: .75rem; }
.publica__caja { width: 100%; max-width: 34rem; background: var(--superficie); border-radius: var(--r-lg); box-shadow: var(--sombra-md); padding: 1.5rem; }
.publica__caja h1 { margin-top: 0; }
.publica__negocio { color: var(--texto-suave); margin-top: -.5rem; font-weight: 600; }
.publica__pie { color: var(--texto-suave); font-size: .8rem; margin: 0; }
/* El QR del ticket: cuadrado, negro sobre blanco y sin nada alrededor que confunda a la cámara. */
.ticket__qr { text-align: center; margin: .5rem 0 .25rem; }
.ticket__qr .qr { width: 34mm; height: 34mm; display: inline-block; }
.ticket__qr-url { font-size: 9px; word-break: break-all; margin: 0 0 .25rem; }

/* ---------- Fase 9 · el globo del menú (ventas sin conexión por revisar) ---------- */
/* Va con número y no con un punto de color: «3» se entiende sin saber qué significa el color, y
   quien no distingue el ámbar lo lee igual. */
.lateral__globo { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding: 0 .35rem;
  margin-left: .4rem; border-radius: 999px; background: #b86a10; color: #fff; font-size: .75rem; font-weight: 700; }

/* =============================================================================================
   Fase 9 · el modo sin conexión VISTO DESDE EL PANEL: la pantalla de revisión y la honesta.
   Van aquí y no en sinconexion.css porque las dos usan `layout/base`, que sólo carga esta hoja.
   ============================================================================================= */
.sc-lista { margin: .5rem 0 1rem; padding-left: 1.25rem; line-height: 1.6; }
.sc-lista li + li { margin-top: .4rem; }

/* ---------- La pantalla de revisión ---------- */
.sc-resumen-cifras { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin-bottom: 1rem; }
.sc-cifra { background: var(--superficie); border-radius: var(--r-lg); box-shadow: var(--sombra-tarjeta);
  padding: 1rem 1.25rem; border-left: 5px solid var(--primario); }
.sc-cifra__valor { display: block; font-size: 1.6rem; font-weight: 800; color: var(--secundario); }
.sc-cifra__etiqueta { color: var(--texto-suave); font-size: .85rem; }
.sc-filtros { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.sc-filtro { min-height: 44px; display: inline-flex; align-items: center; padding: 0 .9rem; border-radius: 999px;
  border: 1px solid var(--gris-400); background: var(--superficie); text-decoration: none; color: var(--secundario); }
.sc-filtro--activo { background: var(--secundario); color: #fff; border-color: var(--secundario); }
.sc-fila--pendiente { background: #fffaf2; }
.sc-diferencia { color: #a3211b; }
.sc-motivo { max-width: 22rem; font-size: .85rem; overflow-wrap: anywhere; }
.sc-aprobar { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.sc-aprobar input { min-height: 40px; padding: 0 .5rem; font: inherit; font-size: .9rem; width: 9rem;
  border: 1px solid var(--gris-400); border-radius: var(--r); }

/* ---------- La tabla de revisión en TABLET: tarjetas, no columnas ---------- */
/* Diez columnas en 768 px no se arreglan con una barra de desplazamiento lateral: quien tiene que
   decidir sobre una diferencia de dinero no puede estar arrastrando la tabla para ver la cifra. Por
   debajo de 900 px cada fila se convierte en una tarjeta con sus etiquetas delante, que es como se
   lee un dato en un teléfono. Las cabeceras se ocultan A LA VISTA pero siguen en el DOM: el lector
   de pantalla sigue teniendo su tabla. */
@media (max-width: 900px) {
  .tabla--tarjetas thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabla--tarjetas, .tabla--tarjetas tbody, .tabla--tarjetas tr, .tabla--tarjetas td { display: block; width: 100%; }
  .tabla--tarjetas tr { border: 1px solid var(--gris-300); border-radius: var(--r); background: var(--superficie);
    margin-bottom: .75rem; padding: .6rem .85rem; }
  .tabla--tarjetas td { border: 0; padding: .3rem 0; display: grid; grid-template-columns: 8.5rem 1fr;
    gap: .25rem .75rem; align-items: start; }
  .tabla--tarjetas td::before { content: attr(data-etiqueta); font-weight: 700; font-size: .72rem;
    text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
  .tabla--tarjetas .sc-motivo { max-width: none; }
  .tabla--tarjetas .sc-aprobar { flex-direction: column; align-items: stretch; }
  .tabla--tarjetas .sc-aprobar input { width: 100%; }
}
@media (max-width: 460px) {
  .tabla--tarjetas td { grid-template-columns: 1fr; }
  .tabla--tarjetas td::before { margin-bottom: -.15rem; }
}


/* ── V16 · el selector de sucursal en la barra ───────────────────────────────────────────────── */
/* Va junto a la marca y no en el menú lateral: cambiar de local es un gesto de la barra, como salir.
   Sólo se pinta cuando hay más de una sucursal, así que con un solo local no ocupa nada. */
.barra__sucursal { display: flex; align-items: center; gap: .4rem; margin-left: auto; margin-right: .5rem; }
.selector--chico { padding: .3rem .5rem; font-size: .9rem; min-height: 44px; }
@media (max-width: 600px) { .barra__sucursal .selector--chico { max-width: 9rem; } }