@import url("lockup.css");
/* ─────────────────────────────────────────────────────────────────────
   MARCA.CSS — Catering Payuca, calcado del CRM (29/9/2026, ver MARCA.md).

   Copia literal de css/crm.css del CRM (wt-crm-ref/crm), mismos tokens,
   mismos nombres de clase, mismos tiempos. "Copiá absolutamente todo:
   barra lateral, transiciones, colores, fuente, números, todo" (Tommy).
   Si el CRM cambia esta hoja, se vuelve a copiar acá — no diverge a mano.

   Es la base de los tres paneles operativos (admin.html, facimex.html,
   pedido.html en el celular del empleado). No toca la landing pública
   (index.html) ni los documentos imprimibles (panfleto/guía/entrar): ver
   el mapa de aplicación al final de MARCA.md. shell-catering.js arma la
   barra lateral (mismo patrón que pintarBarra() de js/crm-comun.js),
   parametrizada con la lista de secciones de cada panel.

   El look sale del kit de diseño del CRM de +SaBoR (kit-diseno-crm.zip):
   superficies escalonadas de aplicación, Manrope para todo, tres sombras,
   tres grises de texto. Colores del manual de La Payuca: negro #111111,
   crema #EFE6D8, bordó #6E1F1B (la acción) y cuero #B17A45 (la marca;
   #C4813A es su versión encendida para texto y gráficos). Solo tema oscuro.
   Barra lateral siempre: completa en compu (≥1024), riel en compu angosta
   (640–1023), cabecera con menú solo en el celular.

   Las reglas del kit que sostiene este archivo (si se rompen, se nota):
     1. Ninguna pantalla escribe un color: usa un token de acá.
     2. Ningún movimiento inventa su duración: usa --suave, --rapido,
        --resorte o --resorte-suave. Nada pasa de 320 ms salvo el conteo
        de los números (900 ms), las barras (700 ms) y los resortes, que
        duran lo que tarda el resorte en quedarse quieto.
     3. Tres sombras: --sombra-1 apoyado, --sombra-2 levantado,
        --sombra-3 flotando. Ninguna otra.
     4. Texto en tres grises: --c-texto lo importante, --c-texto-2 lo
        normal, --c-texto-3 lo secundario.
     5. Un solo botón primario por pantalla.
     6. Todo número en tabular-nums, para que no tiemble al cambiar.
     7. Nunca una pantalla muda: cargando, vacío o error, siempre dicho.

   Los resortes del kit (framer-motion) están pasados a linear() de CSS,
   muestreados de la misma física (rigidez y amortiguación del kit). El
   movimiento que CSS solo no puede hacer está en js/movimiento.js.

   Gráficos: el par validado es cuero #C4813A y azul acero #5B8FD6.
   Los nombres viejos (--cuero-vivo, --borde, --papel…) siguen existiendo y
   apuntan a los tokens nuevos: así ninguna pantalla se rompe.

   Sin Tailwind ni daisyUI (N10). Íconos Lucide en assets/iconos.svg.
   ───────────────────────────────────────────────────────────────────── */

/* D23: Manrope servida desde el sitio (variable 400–800, solo latín) — sin @import a Google que bloqueaba la pintura. */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(assets/fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  /* Superficies: el negro #111111 del manual (= theme-color) y el carbón,
     tostados hacia el cuero. Escalonadas: fondo < superficie < superficie-2 < alt.
     Nada azulado. */
  --c-fondo: #111111;
  --c-superficie: #1A1816;
  --c-superficie-2: #211E1B;
  --c-superficie-alt: #2B2724;
  --c-linea: #2F2A25;
  --c-linea-fuerte: #463E36;
  /* Texto: la crema del manual y dos grises tibios. texto-3 da 4,85 sobre alt
     (el viejo daba 4,24 y fallaba en placeholders). */
  --c-texto: #EFE6D8;
  --c-texto-2: #B9AD9D;
  --c-texto-3: #9E9281;
  --crema-rgb: 239 230 216;

  /* Cuero de la marca, exacto del manual. Solo RELLENOS y bordes: la pastilla
     de la barra, el borde del primario, el hilo de brasa. Nunca texto chico
     (sobre alt da 4,05). */
  --c-cuero: #B17A45;
  /* Cuero encendido: todo lo que es texto o ícono en cuero, el foco, la
     serie 1 de los gráficos y las barras de datos. */
  --c-acento: #C4813A;
  --c-acento-hover: #D39552;
  --c-acento-suave: #2A1F15;
  --c-acento-texto: #140D04;
  --acento-rgb: 196 129 58;

  /* Bordó: la acción (un .btn.primario por pantalla) y el sello del título.
     Siempre relleno con texto crema y filo cuero: sobre el fondo da 1,69. */
  --c-bordo: #6E1F1B;
  --c-bordo-hover: #832620;
  --c-bordo-suave: #2A1413;
  --bordo-rgb: 110 31 27;
  --c-bordo-texto: var(--c-texto);   /* nombre de la tanda 1: texto sobre bordó */

  /* Estados (regla 8): el color dice urgencia. Cálidos y sin neón. */
  --c-exito: #6CC98A;
  --c-exito-suave: #15241A;
  --c-alerta: #E8B04B;          /* tira a amarillo: no se confunde con el cuero */
  --c-alerta-suave: #2B2112;
  --c-peligro: #EF6F5E;
  --c-peligro-suave: #2E1613;
  /* Rojo lavado para texto chico sobre el cuero del plano. */
  --c-peligro-claro: #F6ADA1;
  /* Azul acero: serie 2 de los gráficos (validate_palette.js PASS con el cuero). */
  --c-info: #5B8FD6;
  /* El realce de una fila al pasar por encima: la crema con casi nada de alfa. */
  --c-realce: rgb(var(--crema-rgb) / .04);
  --c-realce-fuerte: rgb(var(--crema-rgb) / .07);

  /* Tres sombras. En oscuro lo que despega es el filo de luz de arriba. */
  --sombra-1: inset 0 1px 0 rgb(var(--crema-rgb) / .035), 0 1px 2px rgb(0 0 0 / .45);
  --sombra-2: inset 0 1px 0 rgb(var(--crema-rgb) / .045), 0 6px 16px -4px rgb(0 0 0 / .55);
  --sombra-3: inset 0 1px 0 rgb(var(--crema-rgb) / .05), 0 18px 44px -8px rgb(0 0 0 / .7);
  /* La brasa: bordó arriba a la izquierda (al lado de la marca) y cuero al centro. */
  --resplandor:
    radial-gradient(50% 36% at 16% 0%, rgb(var(--bordo-rgb) / .30) 0%, rgb(var(--bordo-rgb) / 0) 70%),
    radial-gradient(60% 50% at 55% 0%, rgb(var(--acento-rgb) / .10) 0%, rgb(var(--acento-rgb) / 0) 70%);

  /* Movimiento (GUIA-DE-MOVIMIENTO.md del kit): SIN CAMBIOS */
  --curva: cubic-bezier(.22, .61, .36, 1);
  --suave: 240ms var(--curva);
  --rapido: 140ms var(--curva);
  --resorte: 347ms linear(0, .061, .184, .309, .447, .569, .661, .747, .813, .86, .899, .929, .948, .964, .976, .983, .989, .993, .995, .997, .998, .999, .999, 1, 1);
  --resorte-suave: 550ms linear(0, .09, .274, .478, .65, .799, .905, .974, 1.012, 1.031, 1.036, 1.033, 1.027, 1.02, 1.013, 1.008, 1.004, 1.001, 1, .999, .999, .999, .999, .999, 1);
  --escalon: 628ms linear(0, .098, .3, .522, .707, .859, .962, 1.019, 1.048, 1.055, 1.05, 1.039, 1.027, 1.016, 1.008, 1.002, .999, .997, .997, .997, .998, .998, .999, 1, 1);
  --crece: 518ms linear(0, .063, .2, .364, .524, .666, .782, .871, .935, .978, 1.004, 1.019, 1.025, 1.026, 1.023, 1.019, 1.015, 1.011, 1.008, 1.005, 1.003, 1.001, 1, 1, 1);

  --radio: 18px;
  --radio-medio: 14px;
  --radio-chico: 10px;
  --lateral-ancho: 232px;
  --riel-ancho: 84px;

  --sans: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ── Nombres viejos: los usan las pantallas y js/graficos.js ── */
  --negro: var(--c-fondo);
  --carbon: var(--c-superficie);
  --carbon-2: var(--c-superficie-2);
  --crema: var(--c-texto);
  --bordo: var(--c-bordo);
  --bordo-claro: var(--c-bordo-hover);
  --cuero: var(--c-acento);
  --cuero-vivo: var(--c-acento);
  --gris-claro: #F5F0EB;
  --exito: var(--c-exito);
  --aviso: var(--c-alerta);
  --error: var(--c-peligro);
  --info: var(--c-info);
  --fondo: var(--c-fondo);
  --lateral: var(--c-superficie);
  --superficie: var(--c-superficie);
  --superficie-2: var(--c-superficie-2);
  --hueco: #0C0B0A;
  --borde: var(--c-linea);
  --borde-fuerte: var(--c-linea-fuerte);
  --texto: var(--c-texto);
  --texto-2: var(--c-texto-2);
  --texto-3: var(--c-texto-3);
  --serif: var(--sans);
  --sombra: var(--sombra-1);
  --sombra-bordo: var(--sombra-2);

  /* Rampa de carga del plano: cuero en cuatro pasos. Dice cuánto hay, no qué es. */
  --carga-0: rgb(var(--acento-rgb) / .06);
  --carga-1: rgb(var(--acento-rgb) / .14);
  --carga-2: rgb(var(--acento-rgb) / .24);
  --carga-3: rgb(var(--acento-rgb) / .36);
  --carga-4: rgb(var(--acento-rgb) / .50);

  /* Gráficos (par validado: cuero encendido + azul acero) y estados */
  --brasa: var(--c-acento);
  --azul: var(--c-info);
  --critico: var(--c-peligro);
  --verde: var(--c-exito);
  --oro: var(--c-alerta);
  --papel: var(--c-fondo);
  --papel-alto: var(--c-superficie);
  --papel-hondo: var(--hueco);
  --tinta: var(--c-texto);
  --tinta-2: var(--c-texto-2);
  --tinta-3: var(--c-texto-3);
  --linea: var(--c-linea);
  --linea-fuerte: var(--c-linea-fuerte);
  --crema-60: var(--c-texto-2);
  --crema-35: var(--c-texto-3);
  --crema-12: var(--c-linea);
  --ember: var(--c-alerta);
  --rojo: var(--c-peligro);
  --amarillo: var(--c-alerta);
  --trazo: 1px;
  color-scheme: dark;
}

/* D15 (5/10, Tommy): MODO CLARO, solo en los paneles (admin y facimex), con el botón Claro/Oscuro
   (tema.js; se recuerda por dispositivo). Oscuro sigue siendo el de siempre y el de /pedido e
   invitado. Mismos nombres de token: cada pantalla cambia sola. AA verificado en tema-claro.test.mjs. */
[data-tema="claro"] {
  --c-fondo: #F7F3EE;
  --c-superficie: #FFFFFF;
  --c-superficie-2: #EFE8DF;
  --c-superficie-alt: #EDE6DC;
  --c-linea: #E2D8CB;
  --c-linea-fuerte: #C9BBA9;
  --c-texto: #1A1614;
  --c-texto-2: #5C5049;
  --c-texto-3: #6B5E54;
  --crema-rgb: 26 22 20;
  --c-cuero: #8C5A2B;
  --c-acento: #9A5418;
  --c-acento-hover: #82450F;
  --c-acento-suave: #F3E4D3;
  --c-acento-texto: #FFFFFF;
  --acento-rgb: 154 84 24;
  --c-bordo: #6E1F1B;
  --c-bordo-hover: #832620;
  --c-bordo-suave: #F4E1DF;
  --c-bordo-texto: #FBF6EF;
  --c-exito: #23683F;
  --c-exito-suave: #E3F2E8;
  --c-alerta: #7A4F00;
  --c-alerta-suave: #FBF0D9;
  --c-peligro: #B3261E;
  --c-peligro-suave: #FBE5E2;
  --c-peligro-claro: #B3261E;
  --c-info: #2F5F9E;
  --hueco: #EDE6DC;
  --sombra-1: 0 1px 2px rgb(26 22 20 / .08);
  --sombra-2: 0 6px 16px -4px rgb(26 22 20 / .14);
  --sombra-3: 0 18px 44px -8px rgb(26 22 20 / .2);
  --resplandor:
    radial-gradient(50% 36% at 16% 0%, rgb(var(--bordo-rgb) / .08) 0%, rgb(var(--bordo-rgb) / 0) 70%),
    radial-gradient(60% 50% at 55% 0%, rgb(var(--acento-rgb) / .06) 0%, rgb(var(--acento-rgb) / 0) 70%);
  color-scheme: light;
}
/* Logo en negro sobre claro (marca/logos/lockup-principal-negro). */
[data-tema="claro"] .resumen-cab img { content: url("assets/img/lockup-principal-negro.png"); }
/* El botón Claro/Oscuro de la barra. */
.lat-tema { display: flex; align-items: center; gap: 8px; flex: 1 1 100%; width: 100%; margin: 0; padding: 8px 10px; border: 1px solid var(--c-linea); border-radius: var(--radio-chico);
  background: transparent; color: var(--c-texto-2); font: 600 13px var(--sans); cursor: pointer; }
.lat-tema:hover { color: var(--c-texto); border-color: var(--c-linea-fuerte); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--c-fondo); color: var(--c-texto);
  font-family: var(--sans); font-size: 13.5px; font-weight: 500; line-height: 1.5; min-height: 100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  display: grid; grid-template-columns: var(--lateral-ancho) minmax(0, 1fr);
}
body::before { content: ""; position: fixed; inset: 0; z-index: 0; background: var(--resplandor); pointer-events: none; }
main {
  position: relative; z-index: 1; min-width: 0; width: 100%; max-width: 1180px; padding: 26px 30px 70px;
}
a { color: var(--c-acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-family: var(--sans); font-weight: 800; margin: 0; letter-spacing: -.015em; text-wrap: balance; color: var(--c-texto); }
h1 { font-size: 27px; line-height: 1.12; letter-spacing: -.025em; }
h2 { font-size: 15px; line-height: 1.3; }
h3 { font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; }
p { margin: 0 0 .6em; }
:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }
button { font: inherit; color: inherit; }
::selection { background: rgb(var(--acento-rgb) / .35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-linea-fuerte); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-texto-3); }

.muted { color: var(--c-texto-2); }
.chico { font-size: 12px; }
.num, td.num, th.num { font-variant-numeric: tabular-nums; }
.derecha { text-align: right; }
.centro { text-align: center; }
[hidden] { display: none !important; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila.entre { justify-content: space-between; }
.crece { flex: 1 1 auto; }
.mt { margin-top: 18px; }
.mb { margin-bottom: 18px; }
/* La miga: mayúscula chica gris. Encima del título o de un bloque. */
.rotulo { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--c-texto-3); }
.icono { width: 18px; height: 18px; flex: 0 0 auto; }

/* ── Cabecera de pantalla y títulos de bloque ───────────────────── */
/* La de la Oficina, igual en todas: miga (grupo), sello + título, una línea
   de para qué sirve, y a la derecha filtros y acciones (máx. un primario). */
.pantalla-cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 18px; margin-bottom: 24px; }
.pantalla-cab h1 { display: flex; align-items: center; gap: 12px; margin-bottom: 5px; }
.pantalla-cab > div > p { font-size: 13.5px; color: var(--c-texto-2); margin: 0; max-width: 72ch; }
.pantalla-cab .rotulo { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.pantalla-cab .rotulo .chip { letter-spacing: 0; text-transform: none; }
.pantalla-cab > .fila { margin-left: auto; }
.pantalla-cab .tabs { margin-bottom: 0; }
/* El bloque del kit: título en mayúscula chica y una línea que se come el ancho. */
.titulo-sec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 13px; } /* wrap: en el celu el rótulo largo corría la página de costado (H92) */
.titulo-sec h2 { font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.titulo-sec::after { content: ""; order: 1; flex: 1; height: 1px; background: var(--c-linea-fuerte); }
.titulo-sec > :not(h2) { order: 2; }
.titulo-sec .rotulo { margin: 0; }

/* ── Barra lateral ──────────────────────────────────────────────── */
/* Siempre visible en compu. ≥1024: barra completa. 640–1023: riel con ícono
   y nombre. <640 (celu): cabecera con menú. Scrollea SOLO la lista: la marca
   y el pie (quién + Salir) no se van nunca. */
.topbar {
  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; z-index: 30;
  display: flex; flex-direction: column; padding: 20px 12px 0;
  background: var(--c-superficie); border-right: 1px solid var(--c-linea);
  view-transition-name: barra;
}
/* El hilo de brasa: la firma de la barra, bordó que termina en cuero. */
.topbar::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; pointer-events: none; background: linear-gradient(90deg, var(--c-bordo), var(--c-cuero)); }
/* El logo del manual en negativo: LA PAYUCA + PARRILLA ARGENTINA, sin ícono
   al lado (área de seguridad) y a 180 px de ancho como mínimo. */
.lat-marca { display: inline-grid; justify-items: start; align-self: flex-start; padding: 4px 10px 16px; color: var(--c-texto); text-decoration: none; }
.lat-marca:hover { text-decoration: none; }
.lat-marca b { font-size: 28px; font-weight: 800; letter-spacing: .13em; margin-right: -.13em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
/* El descriptor, espaciado hasta el ancho del nombre (~181 px los dos). */
.lat-marca small { margin: 7px -.44em 0 0; font-size: 10px; font-weight: 700; letter-spacing: .44em; line-height: 1; text-transform: uppercase; color: var(--c-texto-2); white-space: nowrap; }
/* 3/10: una bajada larga ("Catering para empresas") va más junta para ocupar el mismo ancho que LA PAYUCA. */
.lat-marca small.larga { font-size: 9px; letter-spacing: .16em; margin-right: -.16em; }
.lat-llama { display: none; }
.lat-cabecera { display: none; }
.topbar nav {
  position: relative; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  display: flex; flex-direction: column; gap: 2px; margin: 0 -6px; padding: 0 6px 10px;
}
.lat-grupo { font-size: 10px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--c-texto-3); padding: 12px 10px 4px; }
/* La sección es un botón que despliega sus pantallas (Tommy, 22/9). */
button.lat-grupo { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; margin: 0; border: 0; border-radius: var(--radio-chico); background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: color 150ms; }
button.lat-grupo::after { content: ""; flex: none; width: 5px; height: 5px; margin: 0 4px 2px auto; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform 150ms var(--curva); }
button.lat-grupo[aria-expanded="true"]::after { margin-bottom: -2px; transform: rotate(-135deg); }
button.lat-grupo .n { margin-left: auto; font-size: 10px; letter-spacing: 0; padding: 1px 6px; border-radius: 999px; background: var(--c-peligro); color: var(--c-acento-texto); }
button.lat-grupo[aria-expanded="false"]:has(.n)::after { margin-left: 0; }
button.lat-grupo[aria-expanded="true"] .n { display: none; }
@media (hover: hover) { button.lat-grupo:hover { color: var(--c-texto); } }
button.lat-grupo:focus-visible { outline: 2px solid var(--c-acento); outline-offset: -2px; }
.lat-sub { display: flex; flex-direction: column; gap: 2px; }
.lat-sub.cerrada { display: none; }
.topbar nav a {
  position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 7px 10px;
  border-radius: var(--radio-medio); color: var(--c-texto-2); font-weight: 600; font-size: 13.5px; text-decoration: none;
  transition: background-color 150ms, color 150ms;
}
.topbar nav a .icono { width: 16px; height: 16px; color: var(--c-texto-3); transition: color 150ms; }
@media (hover: hover) and (pointer: fine) {
  .topbar nav a:hover { background: var(--c-realce-fuerte); color: var(--c-texto); text-decoration: none; }
  .topbar nav a:not(.actual):hover .icono { color: var(--c-acento); }
}
.topbar nav a.actual, .topbar nav a.actual:hover { background: transparent; color: var(--c-acento-texto); font-weight: 700; transition-delay: 120ms; }
.topbar nav a.actual .icono { color: var(--c-acento-texto); transition-delay: 120ms; }
/* Mientras la pastilla viaja desde la sección anterior, el texto espera. */
.topbar nav.llegando a.actual, .topbar nav.llegando a.actual .icono { color: var(--c-texto-2); }
/* La pastilla del ítem activo es UN elemento que se reubica. Es el cuero
   exacto del manual: #140D04 encima da 5,27. */
.nav-pastilla {
  position: absolute; z-index: 0; top: 0; left: 0; width: 0; height: 0;
  border-radius: var(--radio-medio); background: var(--c-cuero); pointer-events: none;
  transition: transform var(--resorte), height var(--resorte);
}
.topbar nav:not(:has(.nav-pastilla)) a.actual { background: var(--c-cuero); }
/* Pendientes de esa sección (Alertas en rojo, Checks en ámbar). Texto oscuro: 6,52 y 9,86. */
.topbar nav a .n { margin-left: auto; font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--c-peligro); color: var(--c-acento-texto); font-variant-numeric: tabular-nums; }
.topbar nav a .n.amarillo { background: var(--c-alerta); }
.topbar nav a.actual .n { background: rgb(0 0 0 / .2); color: var(--c-acento-texto); }
/* El pie: una sola fila. Inicial en cuero, nombre, rol y Salir. */
.lat-pie { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 -12px; padding: 10px 12px 12px; border-top: 1px solid var(--c-linea); background: var(--c-superficie); }
.topbar .quien { flex: 1; min-width: 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 9px; align-items: center; line-height: 1.3; }
.topbar .quien:empty { display: none; }
.topbar .quien::before { content: attr(data-inicial); grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-acento-suave); box-shadow: inset 0 0 0 1px rgb(var(--acento-rgb) / .4); color: var(--c-acento); font-size: 12.5px; font-weight: 800; }
.topbar .quien b { font-size: 12.5px; font-weight: 700; color: var(--c-texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* El pie de la tanda 1 (<span class="avatar"> + <span class="rol">): sigue andando. */
.topbar .quien:has(.avatar)::before { content: none; }
.topbar .quien .avatar { grid-row: span 2; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-acento-suave); box-shadow: inset 0 0 0 1px rgb(var(--acento-rgb) / .4); color: var(--c-acento); font-size: 12.5px; font-weight: 800; }
.topbar .quien small, .topbar .quien .rol { font-size: 11px; font-weight: 600; color: var(--c-texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lat-salir { flex: none; margin-left: auto; display: flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 10px; border: 1px solid var(--c-linea); border-radius: var(--radio-chico); color: var(--c-texto-2); font-size: 11.5px; font-weight: 700; transition: border-color 150ms, color 150ms; }
.lat-salir .icono { width: 14px; height: 14px; }
.lat-salir:hover { border-color: var(--c-texto-3); color: var(--c-texto); text-decoration: none; }
.lat-acceso { flex: none; margin-left: auto; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--c-linea); border-radius: var(--radio-chico); color: var(--c-texto-2); transition: border-color 150ms, color 150ms; }
.lat-acceso .icono { width: 14px; height: 14px; }
.lat-acceso:hover { border-color: var(--c-texto-3); color: var(--c-texto); text-decoration: none; }
.lat-acceso + .lat-salir { margin-left: 0; }
.lat-boton { display: none; }

/* Notebook: 1440×900 deja ~790 px útiles y 1366×768 ~650. Primero se aprieta,
   después los grupos pasan a ser una rayita (el nombre queda para el lector). */
@media (min-width: 1024px) and (max-height: 820px) {
  .topbar { padding-top: 16px; }
  .lat-marca { padding-bottom: 12px; }
  .lat-grupo { padding: 7px 10px 2px; }
  .topbar nav a { padding: 6px 10px; }
}
/* 15 secciones (con Delivery): desde 780 de alto se aprieta más. */
@media (min-width: 1024px) and (max-height: 780px) {
  .topbar { padding-top: 12px; }
  .lat-marca { padding-bottom: 8px; }
  .topbar nav { gap: 1px; }
  .lat-grupo { padding: 5px 10px 2px; }
  button.lat-grupo { min-height: 26px; }
  .topbar nav a { padding: 5px 10px; }
}

/* Compu angosta (media pantalla) y tablet: riel de 84 px, nunca se esconde. */
@media (min-width: 640px) and (max-width: 1023px) {
  :root { --lateral-ancho: var(--riel-ancho); }
  main { padding: 22px 24px 70px; }
  .topbar { padding: 16px 8px 0; }
  .lat-marca { align-self: center; padding: 0 0 12px; }
  .lat-marca b, .lat-marca small { display: none; }
  .lat-llama { display: block; }
  .lat-llama .icono { width: 22px; height: 22px; color: var(--c-acento); }
  .lat-llama img { width: 28px; height: 28px; border-radius: 22%; display: block; }
  .topbar nav { margin: 0 -4px; padding: 0 4px 8px; }
  .lat-grupo { height: 1px; margin: 6px 14px; padding: 0; overflow: hidden; color: transparent; background: var(--c-linea); }
  /* En el riel no hay lugar para el nombre de la sección: todo abierto. */
  button.lat-grupo { width: auto; min-height: 0; pointer-events: none; }
  button.lat-grupo::after, button.lat-grupo .n { display: none; }
  .lat-sub.cerrada { display: flex; }
  .topbar nav a { flex-direction: column; justify-content: center; gap: 3px; min-height: 44px; padding: 5px 2px; font-size: 10.5px; font-weight: 700; line-height: 1.1; text-align: center; }
  .topbar nav a .icono { width: 18px; height: 18px; }
  .topbar nav a .n { position: absolute; top: 3px; right: 8px; margin: 0; }
  .lat-pie { flex-direction: column; margin: 0 -8px; padding: 8px 8px 10px; }
  .topbar .quien { flex: none; grid-template-columns: 30px; }
  .topbar .quien b, .topbar .quien small { display: none; }
  .lat-salir { margin: 0; width: 34px; padding: 0; justify-content: center; }
  .lat-salir span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 640px) and (max-width: 1023px) and (max-height: 920px) {
  .topbar nav a { min-height: 36px; padding: 2px; }
}

/* Celu: cabecera con el nombre y el botón de menú. */
@media (max-width: 639px) {
  /* La cabecera no se estira cuando la pantalla es corta (la portada de un mozo). */
  body { grid-template-columns: 1fr; }
  body:not(.acceso) { grid-template-rows: auto 1fr; }
  main { padding: 20px 16px 72px; }
  .topbar { height: auto; overflow: visible; padding: 0; border-right: 0; border-bottom: 1px solid var(--c-linea); }
  .lat-cabecera { display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
  .lat-cabecera .lat-marca { padding: 0; flex: 1; align-self: center; }
  .lat-cabecera .lat-marca b { font-size: 18px; }
  .lat-cabecera .lat-marca small { display: none; }
  .lat-boton { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radio-medio); border: 1px solid var(--c-linea-fuerte); background: transparent; cursor: pointer; color: var(--c-texto); }
  .topbar > .lat-marca, .topbar nav, .lat-pie { display: none; }
  .topbar.abierta nav { display: flex; overflow: visible; margin: 0; padding: 0 12px 10px; }
  .topbar.abierta .lat-pie { display: flex; margin: 0; padding: 10px 14px 14px; }
  .topbar nav a { padding: 11px 10px; font-size: 14.5px; }
  button.lat-grupo { min-height: 44px; padding: 10px; font-size: 11.5px; }
}

/* Cambiar de pantalla: la barra queda quieta y solo funde el contenido.
   Chrome/Edge y Safari 18.2+; Firefox salta directo, que también está bien. */
@view-transition { navigation: auto; }
::view-transition-group(barra), ::view-transition-old(barra), ::view-transition-new(barra) { animation: none; }
::view-transition-old(root) { animation: 90ms var(--curva) both funde-sale; }
::view-transition-new(root) { animation: 160ms var(--curva) both funde; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ── Tarjetas y grillas ─────────────────────────────────────────── */
.grilla { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grilla.ancha { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.tarjeta {
  position: relative; background: var(--c-superficie); border-radius: var(--radio); padding: 18px;
  border: 1px solid var(--c-linea); box-shadow: var(--sombra-1); min-width: 0;
}
/* La tarjeta que se toca: sube 3px con resorte, el borde se marca y la
   sombra pasa a flotando. Las tres juntas hacen que "se despegue". */
.tarjeta.enlace { cursor: pointer; transition: transform var(--resorte-suave), box-shadow 150ms, border-color 150ms; }
@media (hover: hover) and (pointer: fine) { .tarjeta.enlace:hover { transform: translateY(-3px); border-color: rgb(var(--acento-rgb) / .45); box-shadow: var(--sombra-3); } }
.tarjeta.enlace:active { transform: scale(.99); }
.tarjeta h2, .tarjeta h3 { margin-bottom: 10px; }
.tarjeta .cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.tarjeta .cab .tipo { font-size: 10.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--c-texto-3); }
.tarjeta .pie { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-linea); font-size: 12px; color: var(--c-texto-2); display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* La tira de cifras del kit: una sola caja, celdas separadas por una línea
   de 1px. La línea es una sombra arriba y a la izquierda de cada celda:
   cada celda se pinta encima de la anterior, así la línea se ve, nunca se
   duplica cuando la grilla salta de fila, y la caja recorta la del borde. */
.stats, .cifras {
  display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: 16px; overflow: hidden;
}
.stat, .cifra { display: flex; flex-direction: column; min-width: 0; padding: 15px 17px; background: var(--c-superficie); box-shadow: -1px -1px 0 var(--c-linea); }
/* La caja recorta lo que se sale (overflow: hidden), y en el celular una
   celda mide ~178 px: "$381.818,18" a 26 px no entra y se cortaba. Achica
   con el ancho de pantalla y arriba de 500 px queda igual que siempre. */
.stat .v, .cifra b { order: 0; display: block; font-size: clamp(19px, 5.2vw, 26px); font-weight: 800; line-height: 1; letter-spacing: -.028em; font-variant-numeric: tabular-nums; color: var(--c-texto); }
.stat .t, .cifra em { order: 1; margin-top: 7px; font-size: 11.5px; font-weight: 700; line-height: 1.45; color: var(--c-texto); font-style: normal; }
.stat .d { order: 2; font-size: 11.5px; font-weight: 600; line-height: 1.45; color: var(--c-texto-2); }
/* Un importe largo baja de tamaño, pero no tanto como para pelearse con el
   número de al lado en la misma tira. */
.stat .v.chico, .cifra b.chico { font-size: clamp(17px, 4.2vw, 21px); }
/* El tono no es decoración: peligro hay que ir a resolverlo, acento es el
   número que manda en ese bloque. */
.stat.alerta .v, .cifra.alerta b { color: var(--c-peligro); }
.stat.ok .v { color: var(--c-exito); }
/* `ember` pide atención (ámbar, regla 8); `alta` es el número que manda en
   ese bloque, que sí es la marca. */
.stat.ember .v { color: var(--c-alerta); }
.cifra.alta b { color: var(--c-acento); }

/* ── Insignias ──────────────────────────────────────────────────── */
/* Nunca van solas: el color siempre viene con texto. */
.badge, .chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--c-linea); background: var(--c-superficie-alt); color: var(--c-texto-2);
  font-size: 11px; font-weight: 700; line-height: 1.4; vertical-align: middle; white-space: nowrap;
}
.badge.rojo { background: var(--c-peligro-suave); border-color: transparent; color: var(--c-peligro); }
.badge.verde { background: var(--c-exito-suave); border-color: transparent; color: var(--c-exito); }
.badge.amarillo { background: var(--c-alerta-suave); border-color: transparent; color: var(--c-alerta); }
.badge.ember { background: var(--c-alerta-suave); border-color: transparent; color: var(--c-alerta); }
/* `viva` no pide atención: dice que eso está pasando ahora. Sigue en cuero. */
.chip.viva { background: var(--c-acento-suave); border-color: transparent; color: var(--c-acento); }
.badge.bordo { background: var(--c-bordo); border-color: transparent; color: var(--c-bordo-texto); }
.badge.gris { background: transparent; color: var(--c-texto-3); }
/* "Esto está pasando ahora": el punto que titila. */
.chip.viva::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: titila 1.6s ease-in-out infinite; }

/* ── Botones ────────────────────────────────────────────────────── */
/* Primario (uno por pantalla), normal, fantasma y peligro. Al apretar se
   achica a 0,975 en 140 ms: chiquito a propósito. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 13px; min-height: 36px; border-radius: 9px; border: 1px solid var(--c-linea-fuerte);
  background: transparent; color: var(--c-texto-2); font: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color 150ms, border-color 150ms, color 150ms, transform var(--rapido);
}
.btn:hover { color: var(--c-texto); border-color: var(--c-texto-3); text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(.975); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primario { background: var(--c-bordo); border-color: var(--c-cuero); color: var(--c-bordo-texto); box-shadow: var(--sombra-1); }
.btn.primario:hover { background: var(--c-bordo-hover); border-color: var(--c-acento-hover); color: var(--c-bordo-texto); }
.btn.ember { background: var(--c-alerta-suave); border-color: transparent; color: var(--c-alerta); }
.btn.ember:hover { border-color: var(--c-alerta); }
.btn.fantasma { border-color: transparent; }
.btn.fantasma:hover { background: var(--c-superficie-alt); }
.btn.chico { padding: 5px 11px; min-height: 30px; font-size: 11.5px; }
.btn.peligro { background: transparent; border-color: color-mix(in srgb, var(--c-peligro) 45%, transparent); color: var(--c-peligro); }
.btn.peligro:hover { background: var(--c-peligro-suave); border-color: var(--c-peligro); color: var(--c-peligro); }
.btn.bloque { width: 100%; }
@media (pointer: coarse) { .btn, .btn.chico { min-height: 44px; } }

/* El botón destacado: lo único que se mueve solo, a propósito. Es para lo
   que hay que hacer ya y nadie hace si no llama: destello que cruza cada
   3,4 s, ícono que late, sube 2px al pasar y la flecha se corre. */
.destacado {
  position: relative; display: flex; align-items: center; gap: 13px; width: 100%; overflow: hidden;
  padding: 15px 18px; border: 1px solid var(--c-cuero); border-radius: var(--radio);
  background: linear-gradient(100deg, var(--c-bordo-suave), var(--c-acento-suave)); color: var(--c-texto); font: inherit; text-align: left; cursor: pointer;
  transition: transform var(--resorte-suave), box-shadow 150ms;
}
.destacado::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 42%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgb(var(--acento-rgb) / .22), transparent);
  animation: barrido 3.4s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) { .destacado:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); } }
.destacado:active { transform: scale(.995); }
.destacado .ico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: var(--c-bordo); color: var(--c-bordo-texto); box-shadow: inset 0 0 0 1px var(--c-cuero); animation: late 2.8s ease-in-out infinite; }
.destacado b { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.destacado small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 600; line-height: 1.4; color: var(--c-texto-2); }
.destacado .flecha { margin-left: auto; flex: none; font-size: 16px; color: var(--c-acento); transition: transform 150ms; }
.destacado:hover .flecha { transform: translateX(5px); }

/* ── Formularios ────────────────────────────────────────────────── */
label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-texto-3); margin-bottom: 5px; }
.campo { margin-bottom: 12px; min-width: 0; }
input, select, textarea {
  width: 100%; padding: 9px 12px; border-radius: 11px; border: 1px solid var(--c-linea);
  background: var(--c-superficie-alt); color: var(--c-texto); font: inherit; font-size: 13.5px; font-weight: 600; min-height: 40px;
  transition: border-color 150ms, box-shadow 150ms;
}
/* Con foco el borde pasa a acento, con un halo: se ve sin gritar. */
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-acento); box-shadow: 0 0 0 3px rgb(var(--acento-rgb) / .18); }
input::placeholder, textarea::placeholder { color: var(--c-texto-3); font-weight: 600; }
input[type="checkbox"] { width: 18px; height: 18px; min-height: 0; accent-color: var(--c-acento); }
@media (pointer: coarse) { input, select, textarea { font-size: 16px; } }
.campos { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.campos .doble { grid-column: span 2; }
.ayuda { font-size: 11.5px; color: var(--c-texto-3); margin-top: 4px; }
.error { color: var(--c-peligro); font-size: 12.5px; font-weight: 600; }
.exito { color: var(--c-exito); }

/* ── Tablas ─────────────────────────────────────────────────────── */
/* Sin cebra ni bordes verticales: una línea abajo de cada fila y la
   cabecera en mayúscula chica gris. La tabla scrollea, la página no. */
/* Cuando la tabla es más ancha que la pantalla, una sombra en el borde dice
   que hay más a los costados; se va sola al llegar al final. (Las capas
   `local` se mueven con el scroll y las `scroll` quedan fijas: donde no se
   superponen, se ve la sombra.) */
.tabla-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--c-superficie) 30%, transparent) left / 28px 100% no-repeat local,
    linear-gradient(to left, var(--c-superficie) 30%, transparent) right / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(0 0 0 / .45), transparent) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(0 0 0 / .45), transparent) right / 14px 100% no-repeat scroll;
  background-color: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--radio); padding: 2px 12px;
}
/* Adentro de una caja no lleva caja propia. */
:is(.tarjeta, .graf, .modal, dialog) .tabla-wrap { background-color: transparent; border: 0; border-radius: 0; padding: 0; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th, td { padding: 10px; text-align: left; border-bottom: 1px solid var(--c-linea); vertical-align: middle; }
th { padding-bottom: 9px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--c-texto-3); white-space: nowrap; }
td { color: var(--c-texto-2); }
td b, td strong, td.num { color: var(--c-texto); }
td b, td strong { font-weight: 700; }
td.num, th.num { text-align: right; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
/* En el celular la primera columna no se parte palabra por palabra: antes
   que un nombre en cuatro renglones, la tabla scrollea. */
@media (max-width: 640px) {
  .tabla-wrap th:first-child, .tabla-wrap td:first-child { min-width: 128px; }
}
tr.total td { font-weight: 800; color: var(--c-texto); border-top: 1px solid var(--c-linea-fuerte); }
tr.click { cursor: pointer; }
tr.click:hover td { background: var(--c-superficie-2); }
tr.apagada td { color: var(--c-texto-3); text-decoration: line-through; }

/* ── Pestañas: el segmentado del kit ────────────────────────────── */
/* Un carril con una pastilla que se DESLIZA hasta la opción elegida. La
   pastilla la pone js/movimiento.js; sin JS, la opción marca su fondo. */
.tabs {
  position: relative; display: flex; gap: 2px; width: max-content; max-width: 100%; padding: 3px; margin-bottom: 18px;
  border: 1px solid var(--c-linea); border-radius: var(--radio-medio); background: var(--c-superficie-alt);
  overflow-x: auto; scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  position: relative; z-index: 1; flex: none; background: none; border: 0; border-radius: 9px;
  padding: 6px 13px; min-height: 32px; color: var(--c-texto-2); font: inherit; font-size: 12.5px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: color 150ms;
}
.tabs button:hover, .tabs button[aria-selected="true"] { color: var(--c-texto); }
/* El contador va sobre la superficie clara de la pestaña: con --c-texto-3 da
   4,2 de contraste y es texto de 10,5 px. */
.tabs button .n { margin-left: 5px; font-size: 10.5px; font-weight: 800; color: var(--c-texto-2); font-variant-numeric: tabular-nums; }
.tabs button[aria-selected="true"] .n { color: var(--c-acento); }
.tabs .pastilla { position: absolute; z-index: 0; top: 3px; bottom: 3px; left: 0; width: 0; border-radius: 9px; background: var(--c-superficie); box-shadow: var(--sombra-1); pointer-events: none; transition: transform var(--resorte), width var(--resorte); }
.tabs:not(:has(.pastilla)) button[aria-selected="true"] { background: var(--c-superficie); box-shadow: var(--sombra-1); }
@media (pointer: coarse) { .tabs button { min-height: 44px; } }

/* ── Modal ──────────────────────────────────────────────────────── */
/* Dos capas que se animan distinto: el velo solo funde (140 ms) y la hoja
   entra con resorte desde 12px abajo. Sale más rápido de lo que entra.
   En el teléfono la hoja se pega abajo. */
.modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; padding: 12px; background: rgb(0 0 0 / .45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: funde var(--rapido) backwards; }
@media (min-width: 640px) { .modal { align-items: center; padding: 20px; } }
.modal .caja { position: relative; width: 100%; max-width: 720px; max-height: 92vh; overflow: auto; padding: 18px; background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--radio); box-shadow: var(--sombra-3); animation: hoja var(--resorte) backwards; overscroll-behavior: contain; }
.modal .caja > h2:first-child { margin: -18px -18px 16px; padding: 14px 52px 14px 18px; border-bottom: 1px solid var(--c-linea); }
.modal .acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.modal-x { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--c-texto-3); cursor: pointer; transition: background-color 150ms, color 150ms; }
.modal-x .icono { width: 15px; height: 15px; }
.modal-x:hover { background: var(--c-superficie-alt); color: var(--c-texto); }
.modal.sale { animation: funde-sale var(--rapido) forwards; }
.modal.sale .caja { animation: hoja-sale var(--rapido) forwards; }

/* ── Avisos de la esquina ───────────────────────────────────────── */
.avisos { position: fixed; right: 20px; bottom: 20px; z-index: 100; display: flex; flex-direction: column; gap: 8px; width: min(92vw, 380px); pointer-events: none; }
@media (max-width: 640px) { .avisos { left: 12px; right: 12px; bottom: 12px; width: auto; } }
.aviso-flotante { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--c-superficie-2); border: 1px solid var(--c-linea-fuerte); border-left: 3px solid var(--c-exito); border-radius: 12px; box-shadow: var(--sombra-3); animation: aviso-entra var(--resorte) backwards; }
.aviso-flotante.error { border-left-color: var(--c-peligro); }
.aviso-flotante > .icono { width: 16px; height: 16px; margin-top: 2px; color: var(--c-exito); }
.aviso-flotante.error > .icono { color: var(--c-peligro); }
.aviso-flotante p { flex: 1; margin: 0; font-size: 12px; font-weight: 600; line-height: 1.6; color: var(--c-texto); }
.aviso-flotante button { flex: none; display: grid; place-items: center; padding: 3px; border: 0; border-radius: 5px; background: none; color: var(--c-texto-3); cursor: pointer; transition: color 150ms; }
.aviso-flotante button .icono { width: 14px; height: 14px; }
.aviso-flotante button:hover { color: var(--c-texto); }
.aviso-flotante.sale { animation: aviso-sale var(--rapido) forwards; }

/* ── Barras, listas, avisos en línea ────────────────────────────── */
.barra { display: block; height: 7px; background: var(--c-superficie-alt); border-radius: 999px; overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--c-acento); border-radius: 999px; }
.barra > i.rojo { background: var(--c-peligro); }
.barra > i.verde { background: var(--c-exito); }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li { padding: 9px 0; border-bottom: 1px solid var(--c-linea); display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.lista li:last-child { border-bottom: 0; }

.aviso { background: var(--c-superficie-2); border: 1px solid var(--c-linea-fuerte); border-radius: var(--radio-medio); padding: 11px 14px; font-size: 12.5px; color: var(--c-texto-2); }
.aviso b { color: var(--c-texto); }
.aviso.ember { background: var(--c-alerta-suave); border-color: color-mix(in srgb, var(--c-alerta) 45%, transparent); }
.aviso.rojo { background: var(--c-peligro-suave); border-color: color-mix(in srgb, var(--c-peligro) 45%, transparent); }
.aviso.verde { background: var(--c-exito-suave); border-color: color-mix(in srgb, var(--c-exito) 40%, transparent); }

/* ── Estados de pantalla: nunca muda ────────────────────────────── */
/* Un vacío no dice "no hay datos": dice qué tiene que pasar. */
.vacio { display: grid; justify-items: center; gap: 6px; padding: 28px 16px; text-align: center; color: var(--c-texto-2); font-size: 13px; line-height: 1.55; }
.vacio > .icono { width: 20px; height: 20px; padding: 11px; box-sizing: content-box; border-radius: 14px; background: var(--c-superficie-alt); color: var(--c-acento); box-shadow: inset 0 0 0 1px var(--c-linea); margin-bottom: 4px; }
.vacio b { font-size: 14px; font-weight: 800; color: var(--c-texto); }
.vacio > .btn { margin-top: 8px; }
.cargando { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; padding: 56px 24px; border: 1px solid var(--c-linea); border-radius: var(--radio); background: var(--c-superficie); color: var(--c-texto-2); font-size: 13px; }
.cargando::before { content: ""; width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgb(var(--acento-rgb) / .25); border-top-color: var(--c-acento); animation: gira .8s linear infinite; }
.cargando::after { content: "…"; margin-left: -12px; }
/* Un fallo al cargar se ve distinto de un vacío: nunca un cero disfrazado. */
:is(#cuerpo, #stats) > p.error { grid-column: 1 / -1; margin: 0; padding: 16px 20px; border: 1px solid var(--c-peligro); border-radius: var(--radio); background: var(--c-peligro-suave); font-size: 13px; font-weight: 700; }

/* ── Gráficos (los dibuja js/graficos.js) ───────────────────────── */
.grilla-graf { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.graf { background: var(--c-superficie); border-radius: var(--radio); border: 1px solid var(--c-linea); box-shadow: var(--sombra-1); padding: 18px; min-width: 0; }
.graf h3 { font-size: 13.5px; font-weight: 800; }
.graf .sub { color: var(--c-texto-2); font-size: 12px; margin: 4px 0 0; max-width: 52ch; }
.graf .marca-datos { display: inline-flex; font-size: 10.5px; font-weight: 700; color: var(--c-texto-2); background: var(--c-superficie-alt); padding: 2px 8px; border-radius: 999px; margin-bottom: 10px; }
.graf .marca-datos.sin { color: var(--c-texto-3); background: transparent; box-shadow: inset 0 0 0 1px var(--c-linea); }
.leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 12px 0 2px; }
.leyenda span { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--c-texto-2); }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: block; flex: 0 0 auto; }
.lienzo { margin-top: 10px; overflow-x: auto; }
.lienzo svg { display: block; width: 100%; height: auto; min-width: 260px; }
.globo { position: fixed; pointer-events: none; z-index: 55; background: var(--c-superficie-2); color: var(--c-texto-2); border: 1px solid var(--c-linea-fuerte); font-size: 12px; line-height: 1.5; padding: 8px 11px; border-radius: var(--radio-chico); max-width: 230px; opacity: 0; transition: opacity 120ms; font-variant-numeric: tabular-nums; box-shadow: var(--sombra-3); }
.globo b { color: var(--c-texto); }
.globo.ver { opacity: 1; }

/* ── Podio (lo arma podio() de js/crm-comun.js) ─────────────────── */
/* Se revela de atrás para adelante: 3ro, 2do y el 1ro llega último. En el
   HTML van en ese orden; `order` los acomoda como 2 · 1 · 3. */
.podio { position: relative; overflow: hidden; margin-bottom: 14px; padding: 26px 20px 20px; border: 1px solid var(--c-linea); border-radius: 20px; background: var(--c-superficie); box-shadow: var(--sombra-1); }
.podio::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 90% at 50% 110%, rgb(var(--acento-rgb) / .14) 0%, transparent 68%); }
.podio-escalones { position: relative; display: grid; grid-template-columns: 1fr 1.18fr 1fr; align-items: end; gap: 10px; }
.podio-escalones .p1 { order: 2; } .podio-escalones .p2 { order: 1; } .podio-escalones .p3 { order: 3; }
.escalon { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; border-radius: 16px; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; }
.medalla { position: relative; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 9px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 800; box-shadow: inset 0 -2px 4px rgb(0 0 0 / .22), 0 2px 6px rgb(0 0 0 / .16); }
/* Oro, plata y bronce: los únicos hex fuera de los tokens. No cambian con la marca. */
.p1 .medalla { width: 38px; height: 38px; font-size: 15px; background: linear-gradient(160deg, #f7c261, #c8860a); }
.p2 .medalla { background: linear-gradient(160deg, #d8dde4, #9aa3ad); }
.p3 .medalla { background: linear-gradient(160deg, #d9a273, #a06a3c); }
.p1 .medalla::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid var(--c-acento); opacity: .5; animation: latido 2.4s ease-in-out infinite; }
.escalon .nombre { display: block; font-size: 13px; font-weight: 800; line-height: 1.25; letter-spacing: -.015em; overflow-wrap: anywhere; }
.escalon.p1 .nombre { font-size: 14.5px; }
.escalon .detalle { display: block; margin: 3px 0 10px; font-size: 10.5px; font-weight: 600; color: var(--c-texto-3); }
.escalon .bloque { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 48px; border: 1px solid var(--c-linea); border-bottom: 0; border-radius: 14px 14px 0 0; background: var(--c-superficie-alt); transform-origin: bottom; }
.escalon.p2 .bloque { height: 64px; }
.escalon.p1 .bloque { height: 104px; border-color: var(--c-acento); background: var(--c-acento-suave); }
.escalon .valor { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.escalon.p1 .valor { font-size: 27px; color: var(--c-acento); }
.escalon .unidad { font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--c-texto-2); }
.podio-resto { display: grid; gap: 7px; }
.podio-fila { display: grid; grid-template-columns: 26px minmax(0, 1fr) 82px auto; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--c-linea); border-radius: var(--radio-medio); background: var(--c-superficie); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: transform var(--resorte-suave), border-color 150ms; }
@media (hover: hover) and (pointer: fine) { .podio-fila:hover { transform: translateX(3px); border-color: var(--c-linea-fuerte); } }
.podio-fila .puesto { text-align: center; font-size: 12px; font-weight: 800; color: var(--c-texto-3); font-variant-numeric: tabular-nums; }
.podio-fila b { display: block; font-size: 12.5px; font-weight: 700; }
.podio-fila small { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600; color: var(--c-texto-3); }
.podio-fila .valor { font-size: 14px; font-weight: 800; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .escalon .valor { font-size: 16px; } .escalon.p1 .valor { font-size: 19px; } .podio { padding-inline: 12px; } .podio-fila { grid-template-columns: 22px minmax(0, 1fr) auto; } .podio-fila .barra { display: none; } }

/* ── Arrastrar y soltar (js/movimiento.js → arrastrable) ────────── */
.levantada { position: relative; z-index: 50; cursor: grabbing; box-shadow: var(--sombra-3) !important; }
body.arrastrando, body.arrastrando * { -webkit-user-select: none; user-select: none; cursor: grabbing; }

/* ── Entradas ───────────────────────────────────────────────────── */
/* Solo animan cuando la persona las pidió: al abrir la pantalla o al tocar
   una pestaña. js/movimiento.js prende `entrando` en <html> ese rato; un
   repintado por un guardado no anima. Las listas entran escalonadas, 35 ms
   entre una y otra, y la última nunca arranca después de 200 ms. */
html.entrando main :nth-child(1) { --d: 0ms; }
html.entrando main :nth-child(2) { --d: 35ms; }
html.entrando main :nth-child(3) { --d: 70ms; }
html.entrando main :nth-child(4) { --d: 105ms; }
html.entrando main :nth-child(5) { --d: 140ms; }
html.entrando main :nth-child(6) { --d: 175ms; }
html.entrando main :nth-child(n+7) { --d: 200ms; }
/* La tira de cifras no entra: se repinta con cada pestaña y sus números ya
   cuentan solos cuando cambian. */
html.entrando main :is(.grilla > *, .grilla-graf > *, .lista > li, tbody > tr, .hoy li, .grupo, .prov, .ped, .barra-comp, .tarjeta-tarea, .sala-card, #cuerpo > .tarjeta, #cuerpo > .aviso) {
  animation: entra var(--suave) var(--d, 0ms) backwards;
}
/* Las barras crecen en cascada (700 ms, 50 ms entre cada una). */
html.entrando .barra > i { animation: barra 700ms var(--curva) calc(500ms + var(--i, 0) * 50ms) backwards; }
html.entrando .lienzo .crece-x { transform-box: fill-box; transform-origin: left; animation: crece-x 700ms var(--curva) calc(var(--i, 0) * 50ms) backwards; }
html.entrando .lienzo .crece-xr { transform-box: fill-box; transform-origin: right; animation: crece-x 700ms var(--curva) calc(var(--i, 0) * 50ms) backwards; }
html.entrando .lienzo .crece-y { transform-box: fill-box; transform-origin: bottom; animation: crece-y 700ms var(--curva) calc(var(--i, 0) * 50ms) backwards; }
/* El podio: escalones con resorte cada 160 ms, bloques que crecen desde
   abajo, y las filas del 4to para abajo recién cuando terminó el podio. */
html.entrando .escalon { animation: escalon var(--escalon) backwards; }
html.entrando .escalon.p2 { animation-delay: 160ms; }
html.entrando .escalon.p1 { animation-delay: 320ms; }
html.entrando .escalon .bloque { animation: crece-y var(--crece) backwards; animation-delay: inherit; }
html.entrando .podio-fila { animation: entra var(--suave) calc(450ms + var(--i, 0) * 50ms) backwards; }

@keyframes entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes escalon { from { opacity: 0; transform: translateY(26px) scale(.94); } }
@keyframes crece-x { from { transform: scaleX(0); } }
@keyframes crece-y { from { transform: scaleY(.1); } }
@keyframes barra { from { width: 0; } }
@keyframes funde { from { opacity: 0; } }
@keyframes funde-sale { to { opacity: 0; } }
@keyframes hoja { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes hoja-sale { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes aviso-entra { from { opacity: 0; transform: translateX(24px) scale(.98); } }
@keyframes aviso-sale { to { opacity: 0; transform: scale(.96); } }
/* Los loops: pocos a propósito. Si todo se mueve solo, nada llama. */
@keyframes barrido { 0% { transform: translateX(-160%); } 55%, 100% { transform: translateX(360%); } }
@keyframes late { 0%, 88%, 100% { transform: scale(1); } 92% { transform: scale(1.09); } 96% { transform: scale(1.03); } }
@keyframes latido { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.14); opacity: 0; } }
@keyframes titila { 50% { opacity: .35; } }
@keyframes gira { to { transform: rotate(360deg); } }

/* Quien pidió menos movimiento no ve loops ni viajes: todo queda en su lugar. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  html { scroll-behavior: auto; }
}

/* ── Patrones comunes (septiembre 2026: todas las pantallas como la Oficina) ── */
/* Apilado vertical de bloques: reemplaza a space-y-* de Tailwind. */
.pila { display: flex; flex-direction: column; gap: 18px; }
/* Las pantallas de julio prenden y apagan con la clase `hidden`: sigue andando sin Tailwind. */
.hidden { display: none !important; }
.neg, td.neg, td.menos { color: var(--c-peligro); }
/* Texto que no entra: puntos suspensivos (reemplaza a `truncate`). */
.corta { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
input.monto, .monto { font-variant-numeric: tabular-nums; }
input.monto { text-align: right; }
/* Validación nativa en vez de alert(): el borde avisa y el texto va abajo del campo. */
:is(input, select, textarea):user-invalid { border-color: var(--c-peligro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-peligro) 18%, transparent); }
.campo .error { display: block; margin-top: 4px; font-size: 12px; }
/* El selector de archivo del sistema, con la ropa del CRM. */
input[type="file"] { padding: 6px; }
::file-selector-button { font: inherit; font-size: 12px; font-weight: 700; margin-right: 10px; padding: 6px 12px; border-radius: 9px; border: 1px solid var(--c-linea-fuerte); background: var(--c-superficie-2); color: var(--c-texto); cursor: pointer; }

/* El sello de la pantalla: el mismo ícono de la barra, en bordó con filo cuero. */
.sello { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 11px; background: var(--c-bordo); color: var(--c-bordo-texto); box-shadow: inset 0 0 0 1px rgb(var(--acento-rgb) / .55), var(--sombra-1); }
.sello .icono { width: 18px; height: 18px; }

/* La cifra que manda en la tira (una por tira): número en cuero y la luz de la brasa detrás. */
.stat.alta { background: radial-gradient(120% 140% at 0% 0%, rgb(var(--acento-rgb) / .12), transparent 60%), var(--c-superficie); }
.stat.alta .v { color: var(--c-acento); }
/* Una cifra que lleva al detalle. */
a.stat { color: inherit; text-decoration: none; transition: background-color 150ms; }
a.stat .t::after { content: " →"; opacity: 0; transition: opacity 150ms; }
@media (hover: hover) and (pointer: fine) {
  a.stat:hover { background: var(--c-superficie-2); text-decoration: none; }
  a.stat:hover .t::after { opacity: 1; }
  tbody tr:hover td { background: var(--c-realce); }
}

/* Cargando con la forma de lo que viene (catálogo 06-skeletons, opción A). */
.esqueleto { position: relative; overflow: hidden; display: block; min-height: 1em; border-radius: 6px; background: var(--c-superficie-alt); color: transparent !important; }
.esqueleto::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(var(--crema-rgb) / .06), transparent); animation: brillo 1.4s linear infinite; }
.stat .v.esqueleto { width: 62%; height: 26px; }
.stat .t.esqueleto, .stat .d.esqueleto { width: 44%; height: 11px; margin-top: 8px; }

/* Lo recién guardado se enciende en cuero y se apaga solo. */
.recien, tr.recien > td { animation: recien 900ms var(--curva); }

/* El botón que guarda contesta: ruedita si tarda, tilde que se dibuja al terminar. */
.btn.ocupado:disabled, .btn.hecho:disabled { opacity: 1; cursor: progress; }
.btn.ocupado::before { content: ""; width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: gira .7s linear infinite; }
.btn.hecho, .btn.primario.hecho { background: var(--c-exito-suave); border-color: color-mix(in srgb, var(--c-exito) 45%, transparent); color: var(--c-exito); }
.btn.hecho .icono path, .aviso-flotante:not(.error) > .icono path, .tilde-hecha path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: traza 320ms var(--curva) 80ms forwards; }

/* Los <dialog> nativos de las pantallas de julio (showModal). No usar la clase .modal: esa es la de modal(). */
dialog.hoja { width: min(560px, calc(100vw - 24px)); max-height: 92vh; padding: 18px; border: 1px solid var(--c-linea); border-radius: var(--radio); background: var(--c-superficie); color: var(--c-texto); box-shadow: var(--sombra-3); }
dialog.hoja[open] { animation: hoja var(--resorte) backwards; }
dialog.hoja::backdrop { background: rgb(0 0 0 / .5); backdrop-filter: blur(3px); }
dialog.hoja > h2:first-child { margin: -18px -18px 16px; padding: 14px 18px; border-bottom: 1px solid var(--c-linea); }
dialog.hoja .acciones { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }

/* ── Ficha de persona (1/10): regla única para toda lista de usuarios o
   empleados — la fila compacta y, adentro de dialog.hoja, los pares
   etiqueta/valor. Ver ficha-persona.js. */
.fila-persona {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 4px;
  border: 0; border-bottom: 1px solid var(--c-linea); background: transparent; color: inherit;
  font: inherit; text-align: left; cursor: pointer;
}
.fila-persona:hover { background: var(--c-superficie-alt); }
.fila-persona .fp-nombre { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila-persona .fp-rol { flex: none; font-size: 12px; color: var(--c-texto-2); }
.fila-persona .fp-punto { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c-texto-3); }
.fila-persona .fp-punto.verde { background: var(--c-exito); }
.fila-persona .fp-punto.rojo { background: var(--c-peligro); }
@media (pointer: coarse) { .fila-persona { min-height: 44px; } }
dialog.hoja .ficha-campos { display: grid; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 0 0 16px; }
dialog.hoja .ficha-campos dt { color: var(--c-texto-3); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
dialog.hoja .ficha-campos dd { margin: 0; font-size: 13.5px; word-break: break-word; }
/* La barra de filtros arriba de una lista de personas (buscador + selects). */
.us-filtros { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin: 0 0 12px; }
.us-filtros input[type=search] { flex: 1 1 220px; min-width: 0; }
.us-filtros select { width: auto; }

/* El login (única pantalla sin barra). */
body.acceso { grid-template-columns: 1fr; place-items: center; padding: 16px; }
.acceso-caja { width: min(380px, 100%); }
.logo { display: inline-grid; justify-items: center; color: var(--c-texto); }
.logo b { font-size: 40px; font-weight: 800; letter-spacing: .08em; line-height: 1; text-transform: uppercase; }
.logo small { margin-top: 9px; font-size: 12px; font-weight: 700; letter-spacing: .5em; margin-right: -.5em; line-height: 1; text-transform: uppercase; color: var(--c-texto-2); }

@keyframes brillo { to { transform: translateX(100%); } }
@keyframes recien { from { background-color: rgb(var(--acento-rgb) / .2); } }
@keyframes traza { to { stroke-dashoffset: 0; } }

@media print {
  body { display: block; background: #fff; color: #000; }
  body::before { display: none; }
  main { padding: 0; }
  .topbar, .btn, .tabs, .no-imprimir, .globo, .avisos, .destacado { display: none !important; }
  .tarjeta, .stats, .stat, .cifra, .graf, .podio { background: #fff; color: #000; border: 1px solid #ccc; box-shadow: none; }
  th, td { border-color: #ccc; color: #000; }
}

/* Celu: nada baja de 13 px (bases/DISENO.md, regla 9; harness/legibilidad.mjs).
   Las letras chicas de arriba quedan para la compu, donde se leen de cerca.
   Solo pantalla: una etiqueta impresa angosta no tiene que crecer.
   La barra lateral tiene su propio ajuste y no entra acá. */
@media screen and (max-width: 639px) {
  .chico,
  .rotulo,
  .titulo-sec h2,
  .tarjeta .cab .tipo,
  .tarjeta .pie,
  .stat .t,
  .cifra em,
  .stat .d,
  .badge,
  .chip,
  .btn,
  .btn.chico,
  .destacado small,
  label,
  .ayuda,
  .error,
  table,
  th,
  .tabs button,
  .tabs button .n,
  .aviso-flotante p,
  .aviso,
  .graf .sub,
  .graf .marca-datos,
  .leyenda span,
  .globo,
  .escalon .detalle,
  .escalon .unidad,
  .podio-fila .puesto,
  .podio-fila b,
  .podio-fila small,
  .campo .error,
  ::file-selector-button {
    font-size: 13px;
  }
}

/* Aviso "sin conexión" (SIN-PERDIDAS #4, 28/9): mismo estilo que ya tenía pos.html en su
   propio <style>, ahora compartido para que Movimientos, Stock y Compras lo reusen sin
   duplicar la regla. */
.sin-red { position: fixed; top: 0; left: 0; right: 0; z-index: 31; padding: 10px 16px; background: #b3261e; color: #fff; font-weight: 600; text-align: center; }
.sin-red[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   EXTENSIÓN CATERING (29/9/2026) — lo que el CRM no necesita porque todas
   sus pantallas tienen barra. Todo lo de arriba es copia literal de
   css/crm.css; esto es lo único agregado, y a propósito separado del
   original para que la próxima copia del CRM no lo pise. Ver MARCA.md.
   ═══════════════════════════════════════════════════════════════════════ */

/* pedido.html (el empleado en su celular): una sola pantalla, sin secciones
   que navegar, así que no lleva riel — monta con montarCabeceraSimple() de
   shell-catering.js. La cabecera del CRM en el celular (.lat-cabecera) está
   pensada para convivir con un riel que aparece desde 640px; acá no hay
   riel en ningún ancho, así que queda siempre visible y el body es de una
   sola columna siempre (el mismo patrón que ya usa body.acceso, el login). */
body.panel-simple { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
body.panel-simple main { max-width: 640px; margin: 0 auto; }
.topbar.topbar-simple {
  position: sticky; top: 0; height: auto; overflow: visible; padding: 0;
  border-right: 0; border-bottom: 1px solid var(--c-linea);
}
.topbar.topbar-simple .lat-cabecera {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
}
.topbar.topbar-simple .lat-cabecera .lat-marca { flex: 1; align-self: center; padding: 0; }
.topbar.topbar-simple .lat-cabecera .lat-marca small { display: none; }
.topbar.topbar-simple .lat-cabecera .quien { flex: none; }
.topbar.topbar-simple .lat-cabecera .quien small { display: none; }
.topbar.topbar-simple .lat-salir { margin-left: 0; }

/* Marca en la barra lateral (7/10): ícono LP + texto + hilo de brasa, igual en facimex/admin/sistema/usuarios. */
.lat-llama img { width: 28px; height: 28px; border-radius: 22%; display: block; }
.lat-marca { position: relative; }
.lat-hilo { display: block; grid-column: 1 / -1; width: 100%; min-width: 40px; height: 3px; margin-top: 8px; border-radius: 2px; background: linear-gradient(90deg, #6E1F1B, #B17A45); }
@media (max-width: 899px) { .lat-hilo { display: none; } }
@media (min-width: 1024px) { .lat-llama { display: block; margin-bottom: 6px; } }

/* Novedades: ícono LP en el aviso y encabezado con hilo (7/10) */
.aviso-nov-lp { border-radius: 22%; flex: none; margin-right: 10px; }
.novedades-cab { display: flex; align-items: center; gap: 10px; margin: 4px 0 8px; font-size: 15px; }
.novedades-cab img { border-radius: 22%; }
.hilo-brasa { display: block; height: 3px; border-radius: 2px; background: linear-gradient(90deg, #6E1F1B, #B17A45); margin-bottom: 12px; }