/* ============================================================
   ADMOS CAJA — la paleta y las reglas que ya traia el sistema del
   inventario, sin cambiar un hex.

   Reglas de movimiento, por frecuencia de uso:
   - Pestañas y botones se pulsan cientos de veces al dia: SOLO
     respuesta al tacto (150ms o menos), nada decorativo.
   - Modales y toasts son ocasionales: entrada de 200-350ms.
   - El login se ve una vez al dia: ahi si hay entrada escalonada.
   Todo transform/opacity (GPU); nunca `transition: all`.
   ============================================================ */

:root {
  /* Que el navegador pinte en oscuro lo que dibuja el por su cuenta: las
     casillas sin marcar, el calendario de las fechas, la lista de un
     desplegable. Sin esto, en el telefono las casillas "Crítico" y "Ya pedido"
     salian como cuadros blancos sobre la ficha oscura. */
  color-scheme: dark;
  --bg: #14171A;
  --surface: #1E2226;
  --surface2: #262B30;
  --border: #2A2F33;
  --border2: #33383D;
  --gold: #D9A441;
  --sage: #6B9080;
  --rust: #C1543C;
  --slate: #5B7C99;
  /* EL ACENTO: el color de la marca de lo que se esta mirando (ver "Las
     marcas"). Fuera de un [data-marca], el del grupo. */
  --acento: var(--gold);
  --acento-claro: #E3B155;
  --acento-rgb: 217, 164, 65;
  --marca-franja: var(--gold);
  --marca-signo: var(--gold);
  --marca-fondo: #14171A;
  --text: #ECEFF1;
  --text-dim: #8B939A;
  /* El gris de las ayudas. Era #6B7176, que da 3,2:1 sobre las tarjetas: por
     debajo del 4,5:1 que pide el texto pequeño, y a 11px, de noche y en el
     telefono del local, no se leia. Este da 4,6:1 y sigue siendo mas tenue que
     --text-dim. No es un color de la marca (el kit solo define el #8B939A):
     sobre un fondo oscuro dos grises legibles no pueden estar lejos, asi que
     la jerarquia la pone el TAMAÑO, no un gris que no se lee. (24/10/2026) */
  --text-dimmer: #858B90;

  /* LAS TRES VOCES DE LA MARCA, con los mismos nombres que
     sitio-grupo/marca/marca.css. Hasta el 24/10/2026 esta aplicacion escribia
     TODO en la mono —etiquetas, ayudas, botones— y la de texto ni se cargaba:
     la mono es para datos, y usarla de voz general cansa la vista a 11px, que
     es el tamaño de media pantalla de aqui. Las cifras se quedan en mono, que
     es su trabajo: alinean por la coma sin hacer nada mas. */
  --f-titulo: 'Space Grotesk', system-ui, sans-serif;
  --f-texto: 'IBM Plex Sans', system-ui, sans-serif;
  --f-datos: 'IBM Plex Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

* { box-sizing: border-box; }

/* Textura: grano fino sobre el carbon, mas un calor de laton arriba, muy tenue. */
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(ellipse 90% 40% at 50% -5%, rgba(217, 164, 65, 0.05), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  color: var(--text);
  font-family: var(--f-texto);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1, h2, .heading, .section-label { font-family: var(--f-titulo); }

button { font-family: var(--f-texto); font-weight: 600; cursor: pointer; border: none; }
input, select, textarea { font-family: var(--f-texto); }
/* Lo que se teclea son CIFRAS: en mono se ve de un vistazo si sobra un digito. */
input[inputmode="decimal"], input[type="date"], .num input, .pres-input { font-family: var(--f-datos); }

/* Un <select> mide por su opcion mas larga, y ese ancho minimo no lo baja ni un
   width:100%: hay que decir min-width:0 expresamente, o un nombre largo de
   cuenta estira la pagina entera de lado en el telefono. */
input, select, textarea { min-width: 0; max-width: 100%; }

::selection { background: rgba(var(--acento-rgb), 0.35); }
/* El cursor de texto tambien lo dibuja el navegador por su cuenta si nadie se
   lo dice: en laton se ve donde esta escribiendo quien cierra la caja. */
input, textarea, select { caret-color: var(--acento); }

:focus-visible {
  outline: 2px solid rgba(var(--acento-rgb), 0.55);
  outline-offset: 2px;
  border-radius: 4px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background-color: var(--text-dimmer); }

.container { max-width: 1500px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 720px) { .container { padding: 0 16px; } }

/* Las cifras con digitos del mismo ancho, para que las columnas de dinero
   se alineen por la coma sin hacer nada mas. */
/* Solo las CELDAS: una cabecera es una etiqueta, no una cifra. Con los th
   dentro, la misma fila de cabecera salia mitad en Sans y mitad en mono. */
/* (.kpi-valor no: una cifra grande y suelta va en la de titulos y con digitos
   proporcionales; en ancho fijo, a ese tamaño, "$ 121" se ve suelto.) */
.num, .total-fila td, table td.text-right {
  font-family: var(--f-datos);
  font-variant-numeric: tabular-nums;
}
.positivo { color: var(--sage); }
.negativo { color: var(--rust); }

/* ---- Barra lateral de navegacion (solo escritorio) ---- */
.app-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: start; }
.lateral-nav {
  position: sticky; top: 16px;
  display: flex; flex-direction: column; gap: 20px;
  max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 4px 4px 4px 0;
}
.lateral-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  width: 100%; background: none;
  padding: 0 10px 7px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
@media (hover: hover) and (pointer: fine) {
  .lateral-cabecera:hover .lateral-titulo { color: var(--text); }
}
.lateral-titulo {
  font-family: var(--f-titulo);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim);
  transition: color 120ms ease;
}
.lateral-flecha {
  color: var(--text-dimmer); font-size: 9px; line-height: 1;
  transition: transform 200ms var(--ease-out);
}
.lateral-flecha.plegada { transform: rotate(-90deg); }
/* El pliegue: 1fr -> 0fr anima una altura desconocida sin medirla. */
.lateral-items {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 220ms var(--ease-out);
}
.lateral-items.plegado { grid-template-rows: 0fr; }
.lateral-items-interior { overflow: hidden; min-height: 0; }
.lateral-item {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border-radius: 8px;
  background: none; color: var(--text-dim);
  font-size: 13px; font-weight: 500; text-align: left;
  transition: color 120ms ease, background-color 120ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .lateral-item:hover { color: var(--text); background: rgba(255, 255, 255, 0.03); }
}
.lateral-item.active {
  color: var(--text);
  font-weight: 700;
  background: rgba(var(--acento-rgb), 0.12);
  box-shadow: inset 2px 0 0 var(--acento);
}
.lateral-badge {
  background: var(--rust); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  border-radius: 10px; padding: 3px 7px;
  flex-shrink: 0;
}
/* minmax(0, 1fr) y no 1fr: "1fr" a secas deja que la columna crezca hasta el
   contenido mas ancho que haya dentro, y una tabla se lleva la pagina de lado. */
@media (max-width: 1100px) {
  .app-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lateral-nav { display: none; }
}
@media (min-width: 1101px) {
  .nav-movil { display: none; }
}

/* ---- Login ---- */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.login-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  width: 100%;
  max-width: 380px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 16px 48px rgba(0, 0, 0, 0.35);
}
.login-card { animation: entrada-suave 420ms var(--ease-out) both; }
.login-card .login-marca { animation: entrada-suave 420ms var(--ease-out) 40ms both; }
.login-card .field:nth-of-type(1) { animation: entrada-suave 420ms var(--ease-out) 100ms both; }
.login-card .field:nth-of-type(2) { animation: entrada-suave 420ms var(--ease-out) 160ms both; }
.login-card .btn-full { animation: entrada-suave 420ms var(--ease-out) 220ms both; }
@keyframes entrada-suave {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
/* El lockup de ADMOS CAJA va en curvas y trae sus propios colores de marca,
   asi que no se recolorea desde aqui. Nunca por debajo de 24px de alto. */
.login-marca { text-align: center; margin-bottom: 24px; }
.logo-login { width: 220px; height: auto; display: block; margin: 0 auto 18px; }
/* EL ESTADO DE "ENTRANDO". Un punto que late, no una vuelta entera: el boton
   mantiene su sitio y su tamaño, y lo que cambia es que esta ocupado. */
.cargando-punto {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: currentColor; margin-right: 8px; vertical-align: 1px;
  animation: latido 900ms var(--ease-in-out) infinite;
}
@keyframes latido {
  0%, 100% { opacity: 0.35; transform: scale(0.8); }
  50%      { opacity: 1;    transform: scale(1); }
}
/* El error del login no es una linea suelta: es lo unico que hay que leer. */
.error-login {
  background: rgba(193, 84, 60, 0.12);
  border: 1px solid rgba(193, 84, 60, 0.4);
  border-radius: 8px; padding: 10px 12px; margin-top: 4px;
  color: var(--text); font-size: 12px; line-height: 1.45;
}
.login-title { font-size: 16px; font-weight: 700; margin: 0 0 2px; }
.login-sub { color: var(--text-dim); font-size: 12px; margin: 0; }
.aviso-clave {
  background: rgba(217,164,65,0.08); border: 1px solid rgba(217,164,65,0.3);
  border-left: 3px solid var(--gold);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 18px;
  font-size: 12px; line-height: 1.5; color: var(--text-dim);
}

/* ---- Header ---- */
header.app-header {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.header-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.header-marca { display: flex; align-items: center; gap: 16px; min-width: 0; }
.logo-app { height: 26px; width: auto; display: block; flex-shrink: 0; }
.header-marca-texto { padding-left: 16px; border-left: 1px solid var(--border); min-width: 0; }
.app-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 0; }
.app-sub { color: var(--text-dim); font-size: 12px; margin-top: 2px; }
@media (max-width: 720px) {
  .header-marca { flex-direction: column; align-items: flex-start; gap: 8px; }
  .logo-app { height: 24px; }
  .header-marca-texto { padding-left: 0; border-left: none; }
  .app-title { font-size: 13px; }
  .app-sub { font-size: 11px; }
}
.header-actions { display: flex; gap: 8px; align-items: center; }

/* ---- Buttons ---- */
.btn {
  border-radius: 8px; padding: 10px 16px; font-size: 13px; font-weight: 700;
  transition: transform 140ms var(--ease-out), filter 140ms var(--ease-out), background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: linear-gradient(180deg, var(--acento-claro), var(--acento));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-primary:active { filter: brightness(0.94); }
.btn-sage {
  background: linear-gradient(180deg, #779B8B, var(--sage));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-slate {
  background: linear-gradient(180deg, #6989A6, var(--slate));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-rust {
  background: linear-gradient(180deg, #CF6A52, var(--rust));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.35);
}
.btn-ghost { background: transparent; border: 1px solid var(--border2); color: var(--text-dim); }
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover { color: var(--text); border-color: var(--text-dimmer); background: rgba(255, 255, 255, 0.03); }
}
.btn-ghost:hover { color: var(--text); }
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-icon { display: inline-flex; align-items: center; gap: 6px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn-full { width: 100%; }

/* ---- Tabs (telefono) ---- */
.tabs { display: flex; gap: 20px; border-bottom: 1px solid var(--border); overflow-x: auto; margin: 24px 0; }
.tab-btn {
  background: none; padding-bottom: 12px; font-size: 13px; font-weight: 600;
  color: var(--text-dimmer); border-bottom: 2px solid transparent; white-space: nowrap;
  transition: color 150ms ease, border-color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .tab-btn:hover { color: var(--text-dim); }
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--acento); }

/* ---- Subnavegacion dentro de una pestaña (secciones de Configuracion) ---- */
.subnav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.subnav-btn {
  background: var(--surface2); border-radius: 20px; padding: 6px 14px; font-size: 12px;
  color: var(--text-dim);
  transition: background-color 150ms ease, color 150ms ease, transform 140ms var(--ease-out);
}
.subnav-btn:active { transform: scale(0.96); }
.subnav-btn.active {
  background: linear-gradient(180deg, var(--acento-claro), var(--acento));
  color: #14171A;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* ---- Cards / forms ---- */
.card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 32%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
@media (max-width: 720px) { .card { padding: 14px; } }
.card + .card { margin-top: 16px; }
.hint { font-size: 11px; color: var(--text-dimmer); line-height: 1.5; margin-bottom: 14px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 12px; color: var(--text-dim); }
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 9px 11px; font-size: 13px; color: var(--text); width: 100%;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: rgba(var(--acento-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), 0.14);
}
.field input[type="checkbox"], .field input[type="radio"] {
  width: 16px; height: 16px; padding: 0; flex-shrink: 0; accent-color: var(--acento);
}
/* La ayuda bajo una casilla, o suelta bajo un bloque. Solo tenia estilo DENTRO
   de un .field, y la mitad de las ayudas estan fuera: salian a 14px y en blanco,
   como texto de cuerpo, al lado de otras pequeñas y tenues. */
.ayuda { font-size: 11px; color: var(--text-dimmer); line-height: 1.45; }
.field .ayuda { margin-top: 4px; }
/* iOS hace zoom automatico al enfocar un input con letra menor a 16px, y a
   veces no lo deshace. Cubre todo lo que se escribe, no solo lo que va dentro
   de .field. La lista es larga porque en CSS gana el selector que mas pesa:
   un "select" a secas pierde contra ".field select". */
@media (max-width: 720px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea,
  .field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
    font-size: 16px;
  }
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.grid-2 { display: grid; grid-template-columns: 3fr 2fr; gap: 24px; }
@media (max-width: 720px) { .grid-2, .field-row, .field-row-3 { grid-template-columns: 1fr; } }
.acciones-form { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; }

/* ---- Tables ---- */
table { width: 100%; border-collapse: collapse; font-size: 13px; }
thead th {
  text-align: left; color: var(--text-dim); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 12px 14px; border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
}
tbody td { padding: 12px 14px; border-bottom: 1px solid #22262A; }
tbody tr:last-child td { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  tbody tr { transition: background-color 120ms ease; }
  tbody tr:hover { background: rgba(255, 255, 255, 0.02); }
}
.table-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 24%), var(--surface);
  border: 1px solid var(--border); border-radius: 12px; overflow-x: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.text-right { text-align: right; }
.empty-msg { text-align: center; color: var(--text-dimmer); padding: 40px; font-size: 13px; }
.apagado { color: var(--text-dimmer); }
/* Tablas de seis o siete columnas de consulta: en el telefono ocupan lo que
   necesitan y se desplazan de lado dentro de su caja. */
@media (max-width: 720px) {
  .table-wrap .tabla-ancha { width: max-content; min-width: 100%; }
}

/* ---- KPIs y saldos ---- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
/* Las ocho del mes en dos filas de cuatro (dos en el telefono), sin huecos. */
.kpi-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .kpi-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 32%), var(--surface);
  border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
  min-width: 0;
}
.kpi-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; }
.kpi-valor { font-family: 'Space Grotesk', sans-serif; font-size: 22px; font-weight: 700; line-height: 1.1; overflow-wrap: anywhere; }
.kpi-sub { font-size: 11px; color: var(--text-dimmer); margin-top: 6px; }
.kpi.destacado { border-color: rgba(var(--acento-rgb), 0.45); }
.kpi.destacado .kpi-valor { color: var(--acento); }

/* ---- Ventas contra presupuesto (panel y presupuesto) ----
   Rediseñado el 30/10/2026: una tarjeta dice UNA cosa grande (lo vendido y
   que parte del presupuesto es), debajo si va al ritmo, y el grafico o la
   barra. La formula va plegada. Menos gris: un solo tono secundario, y la
   jerarquia la pone el tamaño. */
.pe-cabecera { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.pe-total { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); margin-bottom: 14px; }
.pe-total .pe-grafico { margin-top: 4px; }
.nw { white-space: nowrap; }
.pe-locales { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; margin-bottom: 14px; }
.pe-local { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; background: var(--surface2); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pe-nombre { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pe-nombre .kpi-label { margin: 0; }
.pe-estado { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 9px; border-radius: 999px; border: 1px solid; white-space: nowrap; font-weight: 600; }
/* Las cifras: lo vendido grande, "de X presupuestados" al lado en la misma
   linea de base, y debajo el porcentaje y la brecha con el ritmo. */
.pe-cifras { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.pe-grande { font-family: var(--f-titulo); font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -0.01em; color: var(--text); }
.pe-total .pe-grande { font-size: 36px; }
.pe-de { font-size: 13px; color: var(--text-dim); }
.pe-de .nw { color: var(--text); font-weight: 600; }
.pe-ritmo-linea { flex-basis: 100%; font-size: 12.5px; color: var(--text-dim); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-top: 2px; }
.pe-ritmo-linea b { color: var(--text); font-weight: 600; }
.pe-brecha { font-family: var(--f-texto); font-weight: 600; }
.pe-brecha-encima { color: var(--sage); }
.pe-brecha-debajo { color: var(--rust); }
.pe-linea { font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.pe-frase { font-size: 12.5px; line-height: 1.5; color: var(--text); }
.pe-como { border-top: 1px solid var(--border); padding-top: 6px; }
.pe-como summary { cursor: pointer; font-size: 11.5px; color: var(--text-dim); width: max-content; padding: 3px 0; }
.pe-como summary:hover { color: var(--text); }
.pe-detalle { font-size: 11px; color: var(--text-dim); line-height: 1.6; padding-top: 6px; }
.pe-detalle b { color: var(--text); font-weight: 500; }
.pe-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11px; color: var(--text-dim); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 6px; vertical-align: middle; }
.dot.gris { background: #6E777E; } .dot.verde { background: var(--sage); } .dot.ambar { background: var(--gold); } .dot.rojo { background: var(--rust); }
.dot.lleno { outline: 1px solid var(--sage); outline-offset: 1px; }
.estado-gris .pe-estado { color: #9AA3AA; border-color: #4A5158; }
.estado-verde .pe-estado, .estado-lleno .pe-estado { color: var(--sage); border-color: rgba(107,144,128,0.5); }
.estado-ambar .pe-estado { color: var(--gold); border-color: rgba(217,164,65,0.5); }
.estado-rojo .pe-estado { color: var(--rust); border-color: rgba(193,84,60,0.5); }
.pe-sin { font-size: 12px; color: var(--text-dim); padding: 10px 12px; border: 1px dashed var(--border2); border-radius: 8px; line-height: 1.5; }
/* Las barras viejas de progreso siguen existiendo en Reportes (.barras). */
.barra.b-gris { background: linear-gradient(90deg, #7A838B, #5B6369); }
.barra.b-verde, .barra.b-lleno { background: linear-gradient(90deg, #7FA697, var(--sage)); }
.barra.b-ambar { background: linear-gradient(90deg, #E3B155, var(--gold)); }
.barra.b-rojo { background: linear-gradient(90deg, #CF6A52, var(--rust)); }
@media (max-width: 720px) {
  .pe-local, .pe-total { padding: 14px; }
  .pe-grande, .pe-total .pe-grande { font-size: 28px; }
}

/* ---- Presupuesto ---- */
.pres-filtros { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; }
.pres-mes { display: flex; align-items: center; gap: 6px; }
.pres-mes-nombre { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 15px; min-width: 170px; text-align: center; }
.pres-acciones { display: flex; gap: 8px; align-items: center; margin-left: auto; }
.tabla-presupuesto .grupo-fila td { background: rgba(255,255,255,0.025); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; padding: 8px 14px; }
.tabla-presupuesto .grupo-fila .pct-obj { text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--gold); margin-left: 8px; }
.tabla-presupuesto .total-fila td { font-weight: 700; border-top: 1px solid var(--border2); }
.pres-input { width: 110px; background: var(--bg); border: 1px solid var(--border2); border-radius: 6px; padding: 5px 8px; font-size: 13px; color: var(--text); text-align: right; }
.pres-input:focus { outline: 2px solid rgba(var(--acento-rgb), 0.45); outline-offset: 1px; border-color: var(--acento); }
.pres-input-pct { display: inline-flex; align-items: center; gap: 4px; }
.pres-input-pct .pres-input { width: 80px; }
.pres-sufijo { color: var(--text-dim); font-size: 12px; }
.cumpl { display: grid; grid-template-columns: minmax(110px, 1fr) 48px; gap: 10px; align-items: center; min-width: 180px; }
.cumpl > span { font-size: 12px; text-align: right; }
.cumpl .ge-barra-pista { height: 10px; }
.sin-pres { color: var(--text-dimmer); font-style: italic; }
@media (max-width: 720px) {
  .pres-acciones { margin-left: 0; width: 100%; }
}

/* ---- Nomina ---- */
.nomina-form { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; }
.nomina-bloque { display: flex; flex-direction: column; gap: 8px; }
.nomina-lineas { width: auto; min-width: 420px; }
.nomina-lineas thead th { padding: 6px 10px; background: none; border-bottom: 1px solid var(--border2); }
.nomina-lineas tbody td { padding: 6px 10px; border-bottom: none; }
.nomina-opcion { display: grid; grid-template-columns: auto minmax(0, 1fr) 110px; gap: 10px; align-items: center; font-size: 13px; }
.nomina-opcion input[type="checkbox"] { width: 16px; height: 16px; margin: 0; }
.nomina-cierre { border-top: 1px dashed var(--border2); padding-top: 12px; }
.nomina-resumen { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12px; color: var(--text-dim); margin: 6px 0 2px; }
.nomina-resumen > div { display: flex; gap: 8px; align-items: baseline; }
.nomina-resumen b { color: var(--text); font-weight: 600; }
.nomina-neto { padding-left: 14px; border-left: 1px solid var(--border2); }
.nomina-neto b { font-family: 'Space Grotesk', sans-serif; font-size: 18px; color: var(--gold); }
.nomina-neto small { color: var(--text-dimmer); font-size: 11px; }
.nomina-folio { display: flex; flex-direction: column; gap: 6px; font-size: 13px; padding: 6px 0; }
.nomina-folio + .nomina-folio { border-top: 1px dashed var(--border2); padding-top: 10px; }
.nomina-folio-lineas { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: 12px; color: var(--text-dim); }
.pill-pendiente { background: rgba(217, 164, 65, 0.16); color: var(--gold); }
.pill-pagada { background: rgba(107, 144, 128, 0.2); color: #8FB8A6; }
.pill-parcial { background: rgba(91, 124, 153, 0.2); color: #8FB0CF; }
@media (max-width: 720px) {
  .nomina-lineas { min-width: 0; width: 100%; }
  .nomina-opcion { grid-template-columns: auto minmax(0, 1fr); }
  .nomina-opcion .pres-input { grid-column: 2; }
}

/* ---- Misc ---- */
.alert-box {
  background: rgba(193,84,60,0.1);
  border: 1px solid rgba(193,84,60,0.35);
  border-left: 3px solid var(--rust);
  border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; font-size: 13px; display: flex; gap: 8px;
}
.alert-box b { color: var(--rust); }
.alert-box.suave { background: rgba(217,164,65,0.08); border-color: rgba(217,164,65,0.3); border-left-color: var(--gold); }
.alert-box.suave b { color: var(--gold); }
/* Lo que no cuadra, antes de guardar el cierre: el nombre a la izquierda y la
   cifra a la derecha. Seguido, con puntos y comas, seis descuadres obligan a ir
   contando comas para saber qué cifra es de qué cuenta. La cifra no se parte
   (nowrap) y va con cifras de ancho fijo, para poder comparar de un vistazo. */
.lista-descuadres {
  display: grid; grid-template-columns: 1fr auto; gap: 3px 16px;
  margin: 8px 0 10px;
}
.lista-descuadres > div:nth-child(even) {
  text-align: right; white-space: nowrap; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.pill { padding: 4px 12px; border-radius: 6px; font-size: 11px; font-weight: 700; }
/* La naturaleza de un gasto, en las tres bolsas del presupuesto. Un color por
   bolsa, el mismo en Categorias, en el Presupuesto y en el punto de equilibrio,
   para que se reconozcan de una pantalla a otra. */
.pill-food_cost { background: rgba(217, 164, 65, 0.16); color: var(--gold); }
.pill-variable { background: rgba(91, 124, 153, 0.2); color: #8FB0CF; }
.pill-fija { background: rgba(107, 144, 128, 0.2); color: #8FB8A6; }
.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; font-weight: 700; }
.error-text { color: var(--rust); font-size: 12px; margin-top: 6px; }

/* El toast entra desde abajo al insertarse (@starting-style: sin JS). */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translate(-50%, 0);
  background: var(--surface2); border: 1px solid var(--border2); padding: 10px 18px;
  border-radius: 10px; font-size: 13px; z-index: 999;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.4);
  transition: transform 320ms var(--ease-out), opacity 320ms var(--ease-out);
  opacity: 1;
}
@starting-style {
  .toast { transform: translate(-50%, 14px); opacity: 0; }
}

/* ---- Modal ----
   margin:auto en vez de align-items:center: centra igual, pero al desbordar
   no recorta la parte de arriba. */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10, 12, 14, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex; justify-content: center; z-index: 998; padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transition: opacity 200ms var(--ease-out);
  opacity: 1;
}
.modal-box {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), transparent 30%), var(--surface);
  border: 1px solid var(--border2); border-radius: 14px;
  padding: 20px; width: 100%; max-width: 440px;
  margin: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 64px rgba(0, 0, 0, 0.5);
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  transition: transform 220ms var(--ease-out), opacity 220ms var(--ease-out);
  transform: scale(1);
  opacity: 1;
}
@starting-style {
  .modal-overlay { opacity: 0; }
  .modal-box { transform: scale(0.97); opacity: 0; }
}
@media (max-width: 720px) {
  .modal-overlay { padding: 10px; }
  .modal-box { padding: 16px; max-height: calc(100dvh - 20px); }
}
.modal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.close-x { background: none; color: var(--text-dim); font-size: 18px; line-height: 1; transition: color 140ms ease; }
.close-x:active { color: var(--text); }
.link-btn { background: none; color: var(--text-dim); font-size: 12px; text-decoration: underline; padding: 0; transition: color 140ms ease; }
.link-btn:hover { color: var(--text); }
.small-x { background: none; color: var(--text-dimmer); padding: 0 6px; transition: color 140ms ease; }
.small-x:hover { color: var(--rust); }
@media (max-width: 720px) {
  .link-btn, .small-x { min-height: 38px; padding-left: 6px; padding-right: 6px; }
}

/* ---- El telefono ---- */
@media (max-width: 720px) {
  input[type="checkbox"], input[type="radio"],
  .field input[type="checkbox"], .field input[type="radio"] {
    width: 24px; height: 24px;
    accent-color: var(--acento);
    flex-shrink: 0;
  }
  label:has(input[type="checkbox"]) { min-height: 40px; }
  .btn-sm { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
  [style*="font-size:10px"], [style*="font-size: 10px"] { font-size: 12px !important; }
  [style*="font-size:11px"], [style*="font-size: 11px"] { font-size: 12px !important; }
  .alert-box { display: block; padding: 10px 12px; line-height: 1.45; }
  header.app-header { padding: 12px 0; }
  .header-row { gap: 8px; }
  .app-sub { display: none; }
}

/* Un aro girando hace que la carga se sienta mas corta que un texto quieto. */
.spinner { text-align: center; padding: 60px; color: var(--text-dim); }
.spinner::before {
  content: "";
  display: block;
  width: 22px; height: 22px;
  margin: 0 auto 12px;
  border-radius: 50%;
  border: 2px solid var(--border2);
  border-top-color: var(--acento);
  animation: girar 650ms linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* Menos movimiento para quien lo pide en su sistema. */
@media (prefers-reduced-motion: reduce) {
  .login-card, .login-card .login-marca, .login-card .field, .login-card .btn-full {
    animation-duration: 1ms;
  }
  .btn:active, .subnav-btn:active { transform: none; }
  .toast, .modal-box { transition-duration: 60ms; }
  .lateral-items, .lateral-flecha { transition-duration: 60ms; }
  @starting-style {
    .toast { transform: translate(-50%, 0); }
    .modal-box { transform: scale(1); }
  }
  .spinner::before { animation-duration: 1.4s; }
}

/* ---- Saldos del panel en el telefono ----
   Cuatro columnas no caben en 375px: cada cuenta pasa a ser una ficha con el
   nombre arriba y las dos cifras debajo, en columnas iguales para que caigan
   a la misma altura en todas las fichas. */
@media (max-width: 720px) {
  .tabla-saldos, .tabla-saldos tbody { display: block; }
  .tabla-saldos thead { display: none; }
  .tabla-saldos tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "nombre nombre"
      "local  local"
      "saldo  usd";
    gap: 4px 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  .tabla-saldos tr:last-child { border-bottom: none; }
  .tabla-saldos td { display: block; border: none; padding: 0; text-align: left; }
  .tabla-saldos .s-nombre { grid-area: nombre; font-size: 14px; }
  .tabla-saldos .s-local { grid-area: local; font-size: 11px; }
  .tabla-saldos .s-saldo { grid-area: saldo; font-size: 15px; font-weight: 600; }
  .tabla-saldos .s-usd { grid-area: usd; text-align: right; }
  .tabla-saldos .s-usd::before { content: "≈ "; }
}

/* ---- Cierre de caja ----
   Las casillas de ventas en una rejilla que se adapta; las lineas de gasto
   con la cuenta, la categoria, el concepto, el monto y la equis en fila, y en
   el telefono apiladas en dos columnas. */
/* LAS CASILLAS DE UNA FILA SE ALINEAN ENTRE ELLAS, ocupe lo que ocupe cada
   etiqueta. "Punto Bancamiga (Bs) -> Bancamiga (Punto)" no cabe en una linea y
   antes empujaba su casilla 16px hacia abajo mientras las tres vecinas se
   quedaban arriba: la fila salia dentada y parecia un fallo del sistema.
   Con subgrid, la etiqueta y la casilla de todas las columnas caen en las
   MISMAS dos filas de la rejilla, asi que la etiqueta mas alta manda y las
   casillas siguen a la misma altura. */
.cierre-ventas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 16px; }
.cierre-venta { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: 4px; }
/* La etiqueta se pega abajo, junto a su casilla: si se quedara arriba, en una
   fila con etiquetas de dos lineas las cortas flotarian sueltas. */
.cierre-venta > label { align-self: end; }
.cierre-venta input { text-align: right; font-size: 15px; }
/* Sin subgrid (navegadores viejos) se cae a reservar dos lineas de etiqueta,
   que cubre el caso real: los nombres largos ocupan dos, nunca tres. */
@supports not (grid-template-rows: subgrid) {
  .cierre-venta { display: flex; }
  .cierre-venta > label { display: flex; align-items: flex-end; min-height: 30px; }
}
.cierre-gasto {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, 1.6fr) 120px auto;
  gap: 8px; align-items: center; margin-bottom: 8px;
}
.cierre-gasto select, .cierre-gasto input {
  min-width: 0; width: 100%;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.cierre-gasto .cg-monto { text-align: right; }
@media (max-width: 720px) {
  .cierre-gasto {
    grid-template-columns: minmax(0, 1fr) 110px auto;
    grid-template-areas:
      "cuenta    cuenta    quitar"
      "categoria categoria categoria"
      "concepto  monto     monto";
    background: var(--surface2); border-radius: 10px; padding: 10px;
  }
  .cierre-gasto .cg-cuenta { grid-area: cuenta; }
  .cierre-gasto .cg-categoria { grid-area: categoria; }
  .cierre-gasto .cg-concepto { grid-area: concepto; }
  .cierre-gasto .cg-monto { grid-area: monto; }
  .cierre-gasto .cg-quitar { grid-area: quitar; justify-self: end; }
}

/* ---- Barras de los reportes: un div con width en %, sin librerias ---- */
/* LA HOJA DE UN REPORTE, CON SU MARCA (31/10/2026; desde los datos, 3-nov-2026).
   La banda de arriba va sobre el fondo de la marca —el mismo de los correos
   (utils/marca-correo.js)— con el nombre de lo que se mira en su color, y
   debajo su franja. Las cifras de la banda, las cabeceras de tabla y las
   barras toman el acento del data-marca mas cercano: la hoja dice de quien es
   el reporte y cada fila de barras, de quien es esa fila. */
.rep-hoja { padding: 0; overflow: hidden; }
.rep-banda {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap;
  padding: 20px 22px;
  background:
    radial-gradient(ellipse 60% 140% at 100% 0%, rgba(var(--acento-rgb), 0.16), transparent 70%),
    var(--marca-fondo);
}
.rep-marca { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; font-family: var(--f-titulo); font-size: 16px; font-weight: 700; color: #EDE9E1; white-space: nowrap; }
.rep-marca-cuadro { width: 12px; height: 12px; background: var(--acento); flex-shrink: 0; }
.rep-banda-textos { text-align: right; min-width: 0; margin-left: auto; }
.rep-titulo { font-family: var(--f-titulo); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: #EDE9E1; text-wrap: balance; }
.rep-sub { margin-top: 4px; font-size: 12px; color: rgba(237, 233, 225, 0.7); }
.rep-sub .num { color: var(--acento-claro); }
.rep-firma { display: inline-flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11px; letter-spacing: 0.04em; color: rgba(237, 237, 225, 0.6); }
.rep-franja { height: 4px; background: var(--marca-franja); }
.rep-cuerpo { padding: 18px 20px 20px; }
.rep-hoja thead th { color: var(--acento-claro); border-bottom: 2px solid rgba(var(--acento-rgb), 0.35); }
.rep-hoja .barra { background: linear-gradient(90deg, var(--acento-claro), var(--acento)); }
.rep-hoja .barra.barra-neg { background: linear-gradient(90deg, #CF6A52, var(--rust)); }
.rep-hoja .barra-etiqueta { display: flex; align-items: center; gap: 7px; }
.rep-hoja .barra-etiqueta .marca-signo { width: 8px; height: 8px; border-radius: 2px; }
@media (max-width: 720px) {
  .rep-banda { padding: 16px; }
  .rep-banda-textos { text-align: left; margin-left: 0; }
  .rep-cuerpo { padding: 14px; }
}

/* Gastos por categoria, detallado: una sola tabla, la categoria de cabecera. */
.tabla-detalle td { padding-top: 7px; padding-bottom: 7px; }
.tabla-detalle td.num { white-space: nowrap; }
.tabla-detalle .grupo-fila td { background: rgba(255,255,255,0.035); padding-top: 12px; font-weight: 700; border-top: 1px solid var(--border); }
.tabla-detalle tbody:first-of-type .grupo-fila td { border-top: 0; }
.tabla-detalle .rep-cat-resumen { margin-left: 10px; font-size: 11px; font-weight: 500; color: var(--text-dim); }
.rep-total { font-size: 13px; color: var(--text-dim); }
.rep-total .num { margin-left: 6px; font-size: 18px; font-weight: 700; color: var(--text); }
.barras { display: flex; flex-direction: column; gap: 6px; }
.barra-fila { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) 120px; gap: 10px; align-items: center; font-size: 12px; }
.barra-etiqueta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-dim); }
.barra-pista { height: 12px; background: var(--surface2); border-radius: 6px; overflow: hidden; }
.barra { height: 100%; background: linear-gradient(90deg, #E3B155, var(--gold)); border-radius: 6px; transition: width 300ms var(--ease-out); }
.barra.barra-neg { background: linear-gradient(90deg, #CF6A52, var(--rust)); }
.barra-valor { text-align: right; white-space: nowrap; }
@media (max-width: 720px) {
  .barra-fila { grid-template-columns: minmax(0, 1fr) 100px; grid-template-areas: "etiqueta valor" "pista pista"; gap: 2px 8px; }
  .barra-etiqueta { grid-area: etiqueta; }
  .barra-pista { grid-area: pista; }
  .barra-valor { grid-area: valor; }
}

/* ---- Cuadre del efectivo en el cierre ----
   Cinco columnas: la caja, los dos casilleros que se rellenan, lo que deberia
   haber y la diferencia. Los casilleros van en ancho fijo y no en un 1fr: con
   1fr cada fila les daria lo que sobrara y la columna saldria dentada. */
.tabla-cuadre .cu-fondo, .tabla-cuadre .cu-contado { text-align: right; }
.tabla-cuadre .cu-fondo input, .tabla-cuadre .cu-contado input {
  width: 130px; text-align: right;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.tabla-cuadre .cu-esperado { color: var(--text-dim); }

/* En el telefono no caben cinco columnas: cada caja pasa a ser una ficha, con
   el nombre arriba, los dos casilleros en fila y el resultado debajo. */
@media (max-width: 720px) {
  .wrap-cuadre { background: none; border: none; box-shadow: none; overflow-x: visible; }
  .tabla-cuadre, .tabla-cuadre tbody { display: block; }
  .tabla-cuadre thead { display: none; }
  .tabla-cuadre tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "nombre   nombre"
      "fondo    contado"
      "esperado dif";
    gap: 8px 10px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
    padding: 12px; margin-bottom: 8px;
  }
  .tabla-cuadre td { display: block; border: none; padding: 0; text-align: left; }
  .tabla-cuadre .cu-nombre { grid-area: nombre; font-size: 14px; }
  .tabla-cuadre .cu-fondo { grid-area: fondo; }
  .tabla-cuadre .cu-contado { grid-area: contado; }
  .tabla-cuadre .cu-esperado { grid-area: esperado; }
  .tabla-cuadre .cu-dif { grid-area: dif; text-align: right; }
  .tabla-cuadre .cu-fondo input, .tabla-cuadre .cu-contado input { width: 100%; min-height: 44px; }
  /* Los titulos de columna se van con el thead, asi que cada dato dice lo que es. */
  /* Los tres rotulos, IGUALES y en la voz del texto: viven dentro de celdas de
     cifras (en mono), y un ::before hereda la letra de su celda. "Debería
     haber" iba ademas en linea con la cifra, y en 375px partia "Bs" de su
     numero en dos renglones. */
  .tabla-cuadre .cu-fondo::before,
  .tabla-cuadre .cu-contado::before,
  .tabla-cuadre .cu-esperado::before {
    display: block; font-family: var(--f-texto); font-size: 11px;
    color: var(--text-dimmer); margin-bottom: 3px; text-align: left;
  }
  .tabla-cuadre .cu-fondo::before { content: "fondo de apertura"; }
  .tabla-cuadre .cu-contado::before { content: "efectivo contado"; }
  .tabla-cuadre .cu-esperado::before { content: "debería haber"; }
}

/* ---- Lineas del cierre: propinas, cobros y compras a credito ----
   Cada una con sus columnas; las cifras en ancho fijo para que no queden
   dentadas, y en el telefono todo apilado dentro de su ficha. */
.cierre-propina, .cierre-cobro, .cierre-deuda {
  display: grid; gap: 8px; align-items: center; margin-bottom: 8px;
}
.cierre-propina { grid-template-columns: minmax(0, 1fr) 120px auto; }
.cierre-cobro { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) 120px auto; }
.cierre-deuda { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) 80px 110px 150px auto; }
.cierre-propina select, .cierre-propina input,
.cierre-cobro select, .cierre-cobro input,
.cierre-deuda select, .cierre-deuda input {
  min-width: 0; width: 100%;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.cierre-propina .cp-monto, .cierre-cobro .cc-monto, .cierre-deuda .cd-monto { text-align: right; }
.cierre-cobro .cc-aviso { grid-column: 1 / -1; margin: 0; }

/* La venta del sistema, al pie de las formas de pago: la cifra a un lado y la
   comparacion al otro. */
.cierre-sistema {
  display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 20px;
  align-items: start; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border2);
}
.cierre-sistema-campo { display: grid; grid-template-columns: minmax(0, 1fr) 74px; gap: 8px; }
.cierre-sistema-campo input { text-align: right; }
.cierre-sistema-campo input, .cierre-sistema-campo select {
  min-width: 0; width: 100%;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.cierre-sistema-cuadre { align-self: center; }
.cierre-sistema-cuadre .ayuda { margin-top: 4px; }

@media (max-width: 720px) {
  .cierre-sistema { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .cierre-propina, .cierre-cobro, .cierre-deuda {
    grid-template-columns: minmax(0, 1fr) 110px auto;
    background: var(--surface2); border-radius: 10px; padding: 10px;
  }
  .cierre-cobro .cc-doc, .cierre-cobro .cc-forma { grid-column: 1 / -1; }
  .cierre-deuda .cd-quien, .cierre-deuda .cd-concepto, .cierre-deuda .cd-vence { grid-column: 1 / -1; }
}

/* El pago de lo que hay que entregar: una fila de campos bajo su linea. */
.entrega-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px;
  align-items: end; padding: 10px 0;
}
.entrega-form input, .entrega-form select {
  min-width: 0; width: 100%;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}
.entrega-form button { align-self: end; }
.fila-abierta td { border-bottom: 0; }

/* Dar de alta un cliente sin salir del cierre. */
.cierre-cliente-nuevo { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.cierre-cliente-nuevo input {
  flex: 1 1 220px; min-width: 0;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 8px 10px; font-size: 13px; color: var(--text);
}

/* La pista de por que no cuadra, bajo su fila. */
.tabla-cuadre tr.cu-pista td { padding-top: 0; border-top: 0; }
.tabla-cuadre tr.cu-pista .ayuda { margin: 0 0 6px; }

/* De que se compone "deberia haber", bajo la cifra. */
.tabla-cuadre .cu-cuenta {
  font-size: 11px; color: var(--muted); font-weight: 400;
  margin-top: 2px; white-space: nowrap;
}

/* Con cuanto abre la caja: una tira de cifras, sin tabla. */
.inicio-caja { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.inicio-caja-item {
  background: var(--surface2); border: 1px solid var(--border2);
  border-radius: 10px; padding: 10px 12px;
}
.inicio-caja-nombre { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.inicio-caja-cifra { font-size: 17px; font-weight: 700; }

/* ---- Las tasas de fuera, al lado de la del dia ---- */
/* Van juntas en la misma tarjeta pero claramente aparte: la de la izquierda es
   la del negocio —la que vale— y estas son de consulta. Por eso el separador
   y el pie que lo dice; sin eso, cuatro cifras seguidas invitan a confundirlas. */
.panel-tasa { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.panel-tasa-mia { flex: 1 1 320px; min-width: 0; }
.tasas-ref {
  flex: 0 1 auto; display: grid; gap: 6px;
  padding-left: 20px; border-left: 1px solid var(--border);
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  align-content: start;
}
.tasas-ref-titulo, .tasas-ref-pie {
  grid-column: 1 / -1; font-size: 11px; color: var(--text-dimmer); line-height: 1.4;
}
.tasas-ref-titulo { text-transform: uppercase; letter-spacing: 0.06em; }
.tref {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  background: var(--bg); border: 1px solid var(--border2); border-radius: 8px;
  padding: 7px 10px; cursor: pointer; text-align: left;
  transition: border-color 140ms ease, background 140ms ease;
}
.tref:hover { border-color: rgba(217, 164, 65, 0.6); background: var(--surface2); }
.tref-et { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.tref-num { font-size: 14px; color: var(--text); }
/* En el telefono la tarjeta se apila, asi que el separador pasa a ser de arriba. */
@media (max-width: 720px) {
  .tasas-ref { padding-left: 0; padding-top: 14px; border-left: 0; border-top: 1px solid var(--border); width: 100%; }
}

/* Lo que ya se movio hoy en una cuenta del cuadre. Va debajo de con cuanto
   abrio, porque ver "abre con 168.444,74" en una cuenta que ahora tiene 1,52
   —porque la transferencia salio esta misma tarde— parece un error del
   sistema, y no lo es. */
.inicio-caja-movido { font-size: 11px; color: var(--text-dim); line-height: 1.5; margin-top: 4px; }
.inicio-caja-movido b { color: var(--text); }

/* ---- Las ventas contra el presupuesto, dibujadas (js/grafico-equilibrio.js) ----
   Una serie (la venta acumulada, en el acento) contra el ritmo del presupuesto
   y el calendario. Las LINEAS van en SVG que se estira al ancho que haya, con
   trazo de grosor fijo (vector-effect); los TEXTOS, el punto y la cruceta, en
   HTML encima y colocados en %. Asi la letra sale siempre a su tamaño, mida
   lo que mida la tarjeta.
   Jerarquia de las lineas, de mas a menos: la venta (acento, 2.5px), el ritmo
   del presupuesto (texto, 1.5px), la proyeccion (acento, punteada), el
   equilibrio (franja tenue), la rejilla (casi nada). El texto nunca lleva el
   color de la serie. */
.ge { position: relative; }
/* El relleno del lienzo es el sitio de los ejes: izquierda para las cifras,
   abajo para los dias, derecha para la cifra de la proyeccion. */
.ge-lienzo { position: relative; height: 240px; padding: 22px 16px 26px 46px; }
.ge-con-proyeccion .ge-lienzo { padding-right: 104px; }
.ge-plano { position: relative; width: 100%; height: 100%; cursor: crosshair; outline: none; }
.ge-plano:focus-visible { outline: 2px solid rgba(var(--acento-rgb), 0.55); outline-offset: 6px; border-radius: 4px; }
.ge-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ge-svg line, .ge-svg path { vector-effect: non-scaling-stroke; }
.ge-rejilla { stroke: var(--border); stroke-width: 1; opacity: 0.7; }
.ge-hoy { stroke: var(--border2); stroke-width: 1; stroke-dasharray: 2 3; }
.ge-ritmo { stroke: var(--text-dim); stroke-width: 1.5; }
.ge-equilibrio { stroke: var(--rust); stroke-width: 6; opacity: 0.16; }
.ge-area { fill: var(--acento); fill-opacity: 0.14; stroke: none; }
.ge-venta { fill: none; stroke: var(--acento); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
/* El equilibrio con los costos reales (03/11/2026): el mismo color que el
   suelo del presupuesto, en raya discontinua y fina, para que se lean como
   pareja y no se confundan con la proyeccion (punteada, en el acento). */
.ge-equilibrio-real { stroke: var(--rust); stroke-width: 1.5; stroke-dasharray: 8 6; opacity: 0.8; }
.ge-muestra-equilibrio-real { border-top: 1.5px dashed var(--rust); opacity: 0.9; }
.ge-proyeccion { stroke: var(--acento); stroke-width: 1.5; stroke-dasharray: 4 4; stroke-linecap: round; opacity: 0.75; }

.ge-eje { position: absolute; font-family: var(--f-datos); font-size: 10px; line-height: 1; color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; pointer-events: none; }
.ge-eje-y { left: -8px; transform: translate(-100%, -50%); }
.ge-eje-x { top: calc(100% + 9px); transform: translateX(-50%); }
.ge-eje-hoy { color: var(--text); font-family: var(--f-texto); font-weight: 600; }

.ge-rotulo { position: absolute; font-family: var(--f-texto); font-size: 11px; line-height: 1.25; color: var(--text-dim); white-space: nowrap; pointer-events: none; }
.ge-cifra { font-family: var(--f-datos); font-weight: 600; font-size: 11.5px; color: var(--text); }
/* La proyeccion, en el margen derecho, al final de su linea. */
.ge-rotulo-proy { left: calc(100% + 10px); transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; }
/* La cifra de hoy, encima del punto, con la brecha debajo. */
.ge-rotulo-hoy { transform: translate(-100%, calc(-100% - 10px)); padding-right: 6px; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ge-rotulo-hoy.a-la-der { transform: translate(0, calc(-100% - 10px)); padding: 0 0 0 6px; align-items: flex-start; }
/* En lo alto del plano, debajo del punto. */
.ge-rotulo-hoy.debajo { transform: translate(-100%, 12px); }
.ge-rotulo-hoy.a-la-der.debajo { transform: translate(0, 12px); }
/* Con fondo: la cifra de hoy cae a menudo sobre la diagonal del ritmo, y sin
   el la linea le pasaba por en medio de los numeros. */
.ge-rotulo-hoy .ge-cifra-hoy, .ge-rotulo-hoy .ge-brecha { background: var(--surface2); box-shadow: 0 0 0 3px var(--surface2); border-radius: 2px; }
.ge-cifra-hoy { font-size: 15px; }
.ge-brecha { font-size: 10.5px; font-weight: 600; }
.ge-brecha-encima { color: var(--sage); }
.ge-brecha-debajo { color: var(--rust); }
.ge-brecha-al-ritmo { color: var(--text-dim); }

/* El punto de hoy, con su anillo del color de la tarjeta. */
.ge-punto {
  position: absolute; width: 11px; height: 11px; border-radius: 50%;
  background: var(--acento); box-shadow: 0 0 0 2.5px var(--surface2), 0 0 0 4px rgba(var(--acento-rgb), 0.35);
  transform: translate(-50%, -50%); pointer-events: none;
}

/* La leyenda, debajo del plano: cada trazo con su nombre. */
.ge-leyenda { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; color: var(--text-dim); margin-top: 2px; }
.ge-leyenda .ge-cifra { font-size: 11px; margin-left: 2px; }
.ge-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.ge-muestra { display: inline-block; width: 16px; height: 0; border-top: 2.5px solid var(--acento); }
.ge-muestra-ritmo { border-top: 1.5px solid var(--text-dim); }
.ge-muestra-equilibrio { border-top: 6px solid var(--rust); opacity: 0.25; }
.ge-muestra-proy { border-top: 1.5px dashed var(--acento); opacity: 0.8; }
/* En pantalla ancha la proyeccion ya va rotulada en el margen derecho, al final
   de su linea; en la leyenda sale solo en el telefono (ver el @media). */
.ge-leyenda-proy { display: none !important; }

/* Lo que sigue al cursor. */
.ge-cruz { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--text-dim); pointer-events: none; }
.ge-cruz[hidden], .ge-cruz-punto[hidden] { display: none; }
.ge-cruz-punto {
  position: absolute; left: 0; width: 10px; height: 10px; border-radius: 50%;
  background: var(--surface2); border: 2px solid var(--acento); transform: translate(-50%, -50%);
}
.ge-tip {
  position: absolute; top: 0; pointer-events: none; z-index: 2;
  background: var(--surface); border: 1px solid var(--border2); border-radius: 8px;
  padding: 7px 10px; max-width: 250px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  display: flex; flex-direction: column; gap: 2px;
}
.ge-tip[hidden] { display: none; }
.ge-tip-valor { font-family: var(--f-datos); font-size: 14px; color: var(--text); }
.ge-tip-sub { font-size: 11px; color: var(--text-dim); line-height: 1.4; }

/* El pie: la cifra de la proyeccion en el telefono, con su trazo punteado. */
.ge-pie { display: none; align-items: center; gap: 8px; margin-top: 2px; font-size: 11.5px; color: var(--text-dim); }
.ge-pie .ge-cifra { margin-left: 2px; }
.ge-llave-proyeccion { width: 18px; height: 0; border-top: 1.5px dashed var(--acento); opacity: 0.85; flex-shrink: 0; }
.ge-detalle { margin-top: 6px; }
.ge-detalle summary { cursor: pointer; font-size: 12px; color: var(--text-dim); width: max-content; padding: 4px 0; }
.ge-detalle summary:hover { color: var(--text); }
.ge-detalle[open] summary { margin-bottom: 8px; }

/* LA BARRA TIPO BALA (geBarra): la pista es el presupuesto; lo relleno, lo
   que va; la raya alta, donde iria hoy un mes parejo; el triangulo, el
   equilibrio; la parte hueca, a este ritmo. Lo relleno lleva el color del
   ESTADO (verde / ambar / rojo), nunca el de la marca: la marca dice de quien
   es la tarjeta, el color de la barra dice como va. */
.ge-barra { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ge-barra-pista { position: relative; height: 14px; border-radius: 7px; background: var(--bg); border: 1px solid var(--border); overflow: visible; }
.ge-barra-real, .ge-barra-proy { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 7px; }
.ge-barra-real { background: #7A838B; transition: width 400ms var(--ease-out); }
.ge-barra-proy { background: transparent; border: 1.5px dashed var(--text-dim); opacity: 0.6; }
.c-verde .ge-barra-real, .c-lleno .ge-barra-real { background: var(--sage); }
.c-ambar .ge-barra-real { background: var(--gold); }
.c-rojo .ge-barra-real { background: var(--rust); }
.ge-barra-marca { position: absolute; pointer-events: auto; }
.ge-barra-pista .ge-barra-ritmo { top: -5px; bottom: -5px; width: 2px; background: var(--text); transform: translateX(-50%); border-radius: 1px; }
.ge-barra-pista .ge-barra-meta { top: -3px; bottom: -3px; width: 2px; background: var(--text-dim); transform: translateX(-50%); opacity: 0.7; }
.ge-barra-pista .ge-barra-pe { top: 100%; margin-top: 2px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--rust); transform: translateX(-50%); opacity: 0.85; }
.ge-barra-pies { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 11px; color: var(--text-dim); }
.ge-barra-pies span { display: inline-flex; align-items: center; gap: 6px; }
.ge-barra-pies b { color: var(--text); font-weight: 500; }
.ge-barra-pies .ge-barra-marca { position: static; display: inline-block; transform: none; }
.ge-barra-pies .ge-barra-ritmo { width: 2px; height: 12px; background: var(--text); }
.ge-barra-pies .ge-barra-meta { width: 2px; height: 10px; background: var(--text-dim); }
/* El equilibrio real en la barra: un circulito hueco del color del suelo,
   debajo de la pista como el triangulo del otro. */
.ge-barra-pista .ge-barra-pe-real { top: 100%; margin-top: 2px; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--rust); background: transparent; box-sizing: border-box; transform: translateX(-50%); }
.ge-barra-pies .ge-barra-pe-real { width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--rust); background: transparent; box-sizing: border-box; margin: 0; display: inline-block; }
.ge-barra-pies .ge-barra-pe { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--rust); margin: 0; }
.ge-barra-muestra-proy { display: inline-block; width: 14px; height: 8px; border: 1.5px dashed var(--text-dim); border-radius: 4px; opacity: 0.7; }
.ge-compacto .ge-barra { margin: 4px 0 2px; }

/* EL UNICO MOMENTO DE MOVIMIENTO DEL PANEL: la venta se destapa de izquierda a
   derecha al cargar, una sola vez (js/grafico-equilibrio.js lleva la cuenta),
   como el tiempo pasando: se VE el mes acumulandose. El punto, la proyeccion y
   las cifras entran detras, sin moverse. */
.ge-destapa { clip-path: inset(0 100% 0 0); animation: ge-destapar 800ms var(--ease-out) 60ms forwards; }
.ge-entra-tarde { opacity: 0; animation: ge-aparecer 320ms var(--ease-out) 700ms forwards; }
.ge-proyeccion.ge-entra-tarde { animation-name: ge-aparecer-proyeccion; }
@keyframes ge-destapar { to { clip-path: inset(0 0 0 0); } }
@keyframes ge-aparecer { to { opacity: 1; } }
@keyframes ge-aparecer-proyeccion { to { opacity: 0.75; } }
/* Con "reducir movimiento" el JS ni siquiera pone estas clases; esto es por si
   acaso, con el estado FINAL de cada cosa escrito a mano. */
@media (prefers-reduced-motion: reduce) {
  .ge-destapa { animation: none; clip-path: none; }
  .ge-entra-tarde { animation: none; opacity: 1; }
  .ge-proyeccion.ge-entra-tarde { opacity: 0.75; }
  .ge-barra-real { transition: none; }
}

/* EL TELEFONO, AL FINAL DEL BLOQUE A PROPOSITO: con la misma especificidad
   gana la regla que va despues, y puesto antes de las reglas base de
   .ge-rotulo-proy y .ge-pie, estas lo pisaban — la etiqueta salia cortada en
   el margen y el pie no aparecia. */
@media (max-width: 720px) {
  .ge-lienzo { height: 210px; padding-left: 40px; }
  /* No hay margen derecho que regalar: el plano usa todo el ancho, y la cifra
     de la proyeccion, que dentro del plano chocaba con el punto de hoy, va en
     el pie. */
  .ge-con-proyeccion .ge-lienzo { padding-right: 16px; }
  .ge-rotulo-proy { display: none; }
  .ge-leyenda-proy { display: inline-flex !important; }
  .ge-eje-menor { display: none; }
  .ge-cifra-hoy { font-size: 13.5px; }
}

/* ---- El panel: el orden de las preguntas ----
   Cada bloque es una pregunta (como va el mes, cuanto dinero hay, que queda
   pendiente). Entre bloques, mas aire que dentro de ellos: es lo que separa
   un grupo de otro sin tener que dibujar mas cajas. */
.panel-bloque { margin-bottom: 20px; }

/* La tasa ya puesta, en una linea. */
.tasa-corta {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 10px 20px; padding: 12px 18px; margin-bottom: 20px;
}
.tasa-corta-mia { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.tasa-corta-et { font-family: var(--f-titulo); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-right: 4px; }
.tasa-corta-cifra { font-size: 16px; font-weight: 600; color: var(--text); }
.tasa-corta-origen { font-size: 12px; color: var(--text-dimmer); }
.tasa-corta .link-btn { margin-left: 4px; }
.tasas-ref-corta { display: flex; gap: 6px; flex-wrap: wrap; }
.tref-corta {
  background: transparent; border: 1px solid var(--border2); border-radius: 6px;
  padding: 4px 9px; font-size: 12px; color: var(--text-dim); font-weight: 500;
  transition: border-color 140ms ease, color 140ms ease;
}
.tref-corta .tref-et { color: var(--text-dimmer); font-size: 11px; }
@media (hover: hover) and (pointer: fine) { .tref-corta:hover { border-color: var(--acento); color: var(--text); } }

/* El resultado del mes como una tira de cifras: separadas por una linea fina,
   no metidas cada una en su caja. */
.tira { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tira-item { padding: 4px 18px; border-left: 1px solid var(--border); min-width: 0; }
.tira-item:first-child { padding-left: 0; border-left: 0; }
.tira-et { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 6px; }
.tira-cifra { font-family: var(--f-titulo); font-size: 22px; font-weight: 700; line-height: 1.1; font-variant-numeric: normal; overflow-wrap: anywhere; }
.tira-buena .tira-cifra { color: var(--gold); }
.tira-sub { font-size: 11px; color: var(--text-dimmer); margin-top: 6px; line-height: 1.4; }
@media (max-width: 900px) {
  .tira { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .tira-item:nth-child(3) { padding-left: 0; border-left: 0; }
}

/* El dinero: las cifras arriba y las cuentas debajo, dentro de la misma tarjeta. */
/* Las tablas de cuentas (cajas, bancos, digitales) con las MISMAS columnas en
   las cuatro. Cada <table> mide sus columnas por su contenido, y una debajo de
   otra en la misma tarjeta salian dentadas: "Local" en un sitio distinto en
   cada una. Solo en pantalla ancha: en el telefono cada fila ya es una ficha. */
@media (min-width: 721px) {
  .tabla-saldos { table-layout: fixed; width: 100%; }
  .tabla-saldos th:nth-child(1), .tabla-saldos td:nth-child(1) { width: 38%; }
  .tabla-saldos th:nth-child(2), .tabla-saldos td:nth-child(2) { width: 20%; }
  .tabla-saldos th:nth-child(3), .tabla-saldos td:nth-child(3) { width: 24%; }
  .tabla-saldos th:nth-child(4), .tabla-saldos td:nth-child(4) { width: 18%; }
}
.panel-dinero-cifras { margin-bottom: 8px; }
.dinero-grupo { margin-top: 18px; }
.dinero-grupo-et { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin-bottom: 8px; }

/* ============================================================
   LAS MARCAS
   Cada local tiene su color y sus siglas (elegidos en Configuracion, o los de
   partida de marcas.js); el grupo firma con el laton. Lo que es de una marca
   lo dice con data-marca ("grupo" o "l<id>") y, en la MISMA etiqueta, las
   variables con sus colores (atributosMarca en nucleo.js): el ACENTO (botones,
   pestaña activa, foco, la serie del grafico), la FRANJA de arriba y la SEÑAL
   que va delante del nombre de cada local.

   Todo va por variables y no por selectores del tipo [data-marca="x"] .boton:
   una variable la hereda el elemento del data-marca MAS CERCANO, asi que la
   tarjeta de un local dentro de una pantalla del grupo se ve de su local. Y el
   grupo las vuelve a poner en laton aqui abajo, para que una tarjeta del grupo
   dentro de la pantalla de un local no herede el color del local.

   Hasta el 3-nov-2026 aqui vivian los hex de SLA y BKL, sacados de sus
   logotipos; vendiendo el sistema, los colores son de cada negocio. Lo que no
   cambia: EL COLOR DE UNA MARCA NUNCA ES UN ESTADO. Los avisos siguen siendo
   ladrillo, laton y verde en cualquier pantalla, y la paleta de partida los
   esquiva a proposito (tests/marcas-colores.test.js).
   ============================================================ */
[data-marca="grupo"] {
  --acento: var(--gold); --acento-claro: #E3B155; --acento-rgb: 217, 164, 65;
  --marca-franja: var(--gold); --marca-signo: var(--gold); --marca-fondo: #14171A;
}

/* La señal: un cuadrito con los colores de la marca, delante de su nombre. */
.marca-signo {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  background: var(--marca-signo); flex-shrink: 0;
}
.marca-chip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
/* Las casillas de los modulos en Configuracion -> Negocio. */
.negocio-modulo { display: flex; align-items: baseline; gap: 8px; font-size: 13px; cursor: pointer; }
.negocio-modulo input { width: 15px; height: 15px; accent-color: var(--acento); flex-shrink: 0; position: relative; top: 2px; }

/* De que marca es la pantalla, antes de leer nada: la franja de arriba, la
   luz que cae desde ella (la del body es la del grupo; esta la tapa con la de
   la marca) y el rotulo junto a "Salir". */
.marco {
  min-height: 100vh;
  background: radial-gradient(ellipse 80% 420px at 50% -120px, rgba(var(--acento-rgb), 0.09), transparent 72%) no-repeat;
}
header.app-header { position: relative; }
.franja-marca { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--marca-franja); }
.contexto-marca {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(var(--acento-rgb), 0.45);
  background: rgba(var(--acento-rgb), 0.08);
  color: var(--text); font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
}

/* Cada tarjeta de local del punto de equilibrio lleva su franja arriba. */
.pe-local[data-marca] { position: relative; overflow: hidden; }
.pe-local[data-marca]::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--marca-franja);
}

/* EL LOGIN (3-nov-2026): la tarjeta sola, con el lockup de ADMOS CAJA. Aqui
   hubo una escena animada con los logotipos de SLA y BKL por turnos (25/10 al
   3/11/2026); se retiro al preparar el sistema para venderlo: era la puerta de
   un grupo concreto. Esta en la historia de git si algun dia un negocio quiere
   su propia escena. */
@media (prefers-reduced-motion: reduce) {
  /* Sin turnos (no hay rayita que acabe), sin cortina, sin trazos que se
     dibujan ni vaivenes: la escena, terminada. Se cambia a mano. */
  .escenario-tiempo { display: none; }
  .escena, .escena *, .escena.activa, .escena.activa * { animation: none !important; }
}

/* ============================================================
   HISTÓRICO (tab-historico.js): el año mes a mes, contra el anterior.
   Columnas hechas con div, alto en % sobre la escala; el eje y las guías
   van colocados con el mismo %, así que no hay dos escalas que se separen.
   ============================================================ */
.hs-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 220px)); gap: 10px; align-items: end; }
.hs-dos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; margin-bottom: 16px; }
.hs-dos .card { min-width: 0; margin: 0; }
.kpi.hs-bien .kpi-valor { color: var(--sage); }
.kpi.hs-mal .kpi-valor { color: var(--rust); }
.hs-leyenda { display: flex; flex-wrap: wrap; gap: 14px; font-size: 11px; color: var(--text-dim); margin-bottom: 10px; }
.hs-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.hs-muestra { display: inline-block; width: 10px; height: 10px; border-radius: 2px; }
.hs-grafico { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 6px; height: 200px; padding-bottom: 22px; }
.hs-eje { position: relative; font-family: var(--f-datos); font-size: 10px; color: var(--text-dimmer); }
.hs-eje span { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap; }
.hs-plano { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; border-bottom: 1px solid var(--border); }
.hs-guia { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed rgba(139, 147, 154, 0.16); pointer-events: none; }
.hs-mes { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.hs-mes.hs-hoy::before { content: ""; position: absolute; inset: 0 -2px; background: rgba(var(--acento-rgb), 0.06); border-radius: 4px; }
.hs-pareja { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 2px; height: 100%; }
.hs-col { position: relative; width: min(42%, 14px); border-radius: 3px 3px 0 0; transition: filter 120ms var(--ease-out); }
.hs-col:hover { filter: brightness(1.25); }
.hs-ant, .hs-muestra.hs-ant { background: #5B6369; }
.hs-act, .hs-muestra.hs-act { background: var(--acento); }
.hs-col.hs-exc { background: repeating-linear-gradient(135deg, #5B6369 0 3px, #474E54 3px 6px); }
.hs-col.hs-proy, .hs-muestra.hs-proy { background: transparent; box-shadow: inset 0 0 0 1.5px var(--acento); }
.hs-col-real { position: absolute; left: 0; right: 0; bottom: 0; background: var(--acento); border-radius: 0; }
.hs-col.hs-vacia { height: 0; }
.hs-mes-nombre { position: absolute; top: 100%; left: 0; right: 0; margin-top: 5px; text-align: center; font-size: 10px; color: var(--text-dim); line-height: 1.1; }
.hs-mes-nombre b { display: block; font-weight: 500; font-size: 9px; color: var(--gold); }
.hs-tabla .hs-sub { font-family: var(--f-texto); font-size: 10px; color: var(--text-dimmer); }
.hs-tabla .hs-fila-proy td { color: var(--text-dim); font-style: italic; }
.hs-tabla .hs-sube { color: var(--sage); }
.hs-tabla .hs-baja { color: var(--rust); }
.hs-tabla .hs-fuente { font-size: 11px; white-space: nowrap; }
.hs-chip { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 999px; border: 1px solid rgba(217, 164, 65, 0.45); color: var(--gold); font-style: normal; }
@media (max-width: 560px) {
  .hs-grafico { height: 170px; grid-template-columns: 28px minmax(0, 1fr); }
  .hs-plano { gap: 2px; }
  .hs-col { width: 44%; }
  .hs-mes-nombre { font-size: 9px; }
  /* «promo» no cabe debajo de dos meses seguidos: queda un punto dorado. */
  .hs-mes-nombre b { font-size: 0; width: 5px; height: 5px; margin: 3px auto 0; border-radius: 50%; background: var(--gold); }
}
@media (prefers-reduced-motion: reduce) { .hs-col { transition: none; } }

/* El boton que lleva al otro sistema (Finanzas / Inventario): en una linea,
   que con la flecha partida en dos renglones no se lee como un enlace. */
.btn-sistema { white-space: nowrap; }

/* ============================================================
   CIERRE DEL MES (tab-cierre-mes.js): lo que falta antes de cerrar, la foto
   y lo que cambia despues. Las pastillas de estado nuevas (verde, ambar,
   gris) siguen la regla de siempre: el color dice como va, nunca de quien es.
   ============================================================ */
.pill-verde { background: rgba(107, 144, 128, 0.2); color: #8FB8A6; }
.pill-ambar { background: rgba(217, 164, 65, 0.16); color: var(--gold); }
.pill-gris { background: rgba(139, 147, 154, 0.16); color: var(--text-dim); }
.cm-estado { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-left: auto; }
.cm-tabla td:first-child { white-space: nowrap; }
.cm-tabla .cm-res td { font-weight: 700; border-top: 1px solid var(--border2); }
.cm-tabla .cm-estimado td { background: rgba(var(--acento-rgb), 0.06); }
.cm-tabla .cm-sep td { border-top: 1px dashed var(--border2); }
.cm-tabla .cm-cambio { color: var(--gold); font-weight: 700; }
.cm-sub { display: block; font-size: 11px; color: var(--text-dim); font-weight: 400; margin-top: 2px; }
.cm-tabla .cm-sub { display: inline; margin: 0; }
.cm-locales { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.cm-local { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface2); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cm-local-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cm-local-res { font-size: 12px; color: var(--text-dim); }
.cm-etq-bloque { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; }
.cm-faltan { width: 100%; border-collapse: collapse; }
.cm-faltan td { padding: 8px 0; border-top: 1px solid var(--border); vertical-align: middle; font-size: 13px; }
.cm-faltan tr:first-child td { border-top: 0; }
.cm-faltan .cm-hecho td:first-child b { color: var(--text-dim); font-weight: 600; }
.cm-acciones { text-align: right; }
.cm-acciones .btn { margin-left: 4px; }
.cm-monto { display: inline-flex; align-items: center; gap: 4px; }
.cm-monto .pres-input { width: 86px; }
.cm-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-size: 12.5px; border-top: 1px solid var(--border); padding-top: 8px; }
.cm-etq { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); font-weight: 700; min-width: 120px; }
.cm-revisar { color: var(--gold); }
.cm-lista { margin: 2px 0 0; padding-left: 18px; flex-basis: 100%; font-size: 12px; line-height: 1.6; }
.cm-saldar { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.cm-saldar select { max-width: 220px; }
.cm-ok { font-size: 12.5px; color: var(--sage); }
.cm-pie { margin-top: 16px; display: flex; justify-content: flex-end; }
.cm-confirmar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid rgba(var(--acento-rgb), 0.45); border-radius: 10px; font-size: 13px; line-height: 1.5; width: 100%; }
.cm-confirmar-botones { display: inline-flex; gap: 8px; margin-left: auto; }
.cm-solo-movil { display: none; }
.cm-fichas { gap: 12px; }   /* el display lo pone .cm-solo-movil: aqui lo volvia a enseñar en escritorio */
.cm-ficha { border: 1px solid var(--border); border-radius: 12px; background: var(--surface2); padding: 10px 14px 4px; }
.cm-ficha-cab { font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid var(--border); }
.cm-tabla-ficha { width: 100%; border-collapse: collapse; }
.cm-tabla-ficha td { padding: 7px 0; font-size: 13px; border-top: 1px solid var(--border); }
.cm-tabla-ficha tr:first-child td { border-top: 0; }
.cm-tabla-ficha td:first-child { white-space: normal; padding-right: 10px; }
.cm-tabla-ficha .cm-sub { display: block; }
.cm-tabla-ficha td.num { white-space: nowrap; }
.cm-nowrap { white-space: nowrap; }
.cm-cambios { list-style: none; margin: 0; padding: 0; flex-direction: column; }
.cm-cambios li { padding: 10px 0; border-top: 1px solid var(--border); font-size: 13px; }
.cm-cambios li:first-child { border-top: 0; }
.cm-cambio-fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cm-cambio-fila b { white-space: nowrap; }
@media (max-width: 720px) {
  .cm-solo-ancho { display: none; }
  .cm-solo-movil { display: grid; }
  /* Pendiente: el monto y "Va a llegar" en una fila, "Este mes no hay" debajo
     a todo lo ancho. Sueltos, el segundo boton caia donde le tocaba. */
  .cm-faltan td.cm-acciones-pend { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
  .cm-acciones-pend .btn { margin: 0; width: 100%; }
  .cm-acciones-pend .btn:last-child { grid-column: 1 / -1; }
  .cm-estado { margin-left: 0; }
  .cm-faltan td { display: block; padding: 6px 0; border-top: 0; }
  .cm-faltan tr { display: block; border-top: 1px solid var(--border); padding: 4px 0; }
  .cm-faltan tr:first-child { border-top: 0; }
  .cm-acciones { text-align: left; }
  .cm-acciones .btn { margin: 4px 4px 0 0; }
  .cm-etq { min-width: 0; flex-basis: 100%; }
}

/* ============================================================
   EL PANEL DE ADMINISTRACION (Fase 2, 4-nov-2026; public/js/plataforma.js)
   Lo ve solo un administrador de ADMOS: la lista de clientes y lo que se
   hace con ellos. Reusa las tarjetas, las tablas y las ventanas de la app.
   ============================================================ */
.plat { padding-top: 20px; padding-bottom: 60px; }
.plat-etiqueta { font-family: var(--f-titulo); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); padding-left: 16px; border-left: 1px solid var(--border); }
.plat-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.plat-titulo { font-family: var(--f-titulo); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.plat-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.plat-suspendido td { opacity: 0.55; }
.plat-acciones { white-space: nowrap; }
.plat-acciones .link-btn + .link-btn { margin-left: 10px; }
.plat-mensaje { width: 100%; font-family: var(--f-texto); font-size: 13px; line-height: 1.45; resize: vertical; }
.plat-check { display: flex; align-items: baseline; gap: 8px; font-size: 13px; cursor: pointer; margin: 6px 0; }
.plat-check input { width: 15px; height: 15px; accent-color: var(--acento); flex-shrink: 0; position: relative; top: 2px; }
/* Las vias de cobro del alta, en fila: seis casillas una debajo de otra se comen la ventana. */
.plat-vias { display: flex; flex-wrap: wrap; gap: 2px 18px; }
.pill-critico { background: rgba(193, 84, 60, 0.18); color: #E08A74; }
.btn-mal { background: linear-gradient(180deg, #CF6A52, var(--rust)); color: #fff; border: 0; }

/* ---------- el recorrido de bienvenida (tour.js, 4-nov-2026) ----------
   Vive fuera de #app. El foco recorta el fondo oscuro con una sombra enorme
   alrededor del objetivo; el globo va al lado, con su flecha. */
.tour-capa { position: fixed; inset: 0; z-index: 1000; }
.tour-capa.sin-objetivo { background: rgba(0, 0, 0, 0.62); }
.tour-foco {
  position: fixed; border-radius: 12px; pointer-events: none;
  /* 200vmax cubre la pantalla desde donde este el foco; con 9999px, en un
     telefono con densidad 2 Chrome no pintaba la sombra (paso en ONE). */
  box-shadow: 0 0 0 200vmax rgba(0, 0, 0, 0.62), 0 0 0 2px var(--acento);
  transition: left 240ms var(--ease-out), top 240ms var(--ease-out), width 240ms var(--ease-out), height 240ms var(--ease-out), opacity 160ms ease;
}
.tour-globo {
  position: fixed; width: min(340px, calc(100vw - 24px)); padding: 16px 18px 14px;
  background: var(--surface); color: var(--text); border: 1px solid var(--border2);
  border-radius: 14px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  transition: left 240ms var(--ease-out), top 240ms var(--ease-out);
}
.tour-flecha {
  position: absolute; left: var(--tour-flecha-x, 50%); width: 14px; height: 14px; margin-left: -7px;
  background: var(--surface); border: 1px solid var(--border2); transform: rotate(45deg); display: none;
}
.tour-globo.abajo .tour-flecha { display: block; top: -8px; border-right: 0; border-bottom: 0; }
.tour-globo.arriba .tour-flecha { display: block; bottom: -8px; border-left: 0; border-top: 0; }
.tour-paso { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--acento); }
.tour-titulo { margin: 6px 0 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }
.tour-texto { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--text-dim); }
.tour-texto b { color: var(--text); font-weight: 600; }
.tour-acciones { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tour-acciones-der { display: flex; gap: 8px; }
.tour-acciones .btn { padding: 9px 16px; }
.tour-saltar { font-size: 13px; }
.config-tour { margin-top: 24px; text-align: center; }
@media (prefers-reduced-motion: reduce) { .tour-foco, .tour-globo { transition: none; } }