/* =====================================================================
   FacturaEC ERP - Sistema de diseno
   ===================================================================== */

/* ---------- Tokens ---------- */
/* =====================================================================
   Un elemento con hidden NO SE VE. Punto.

   Parece que sobra decirlo, pero no: [hidden] lo pone el navegador con
   display:none, y CUALQUIER regla de display escrita aqui le gana. Basta
   con que una clase diga "display: flex" para que su elemento se vea
   estando oculto.

   Ya paso dos veces. La ultima, el indicador de conexion salia como un
   circulo en blanco al lado de la bandera: la cascara vacia, visible
   antes de que el guion la llenara -y para siempre si el guion no
   llegaba a correr-. Y el aviso de "Bloq Mayus activado" de la pantalla
   de acceso estaba en el mismo caso.

   Aqui el !important esta justificado: no es para ganar una pelea de
   estilos, es para que una palabra del HTML signifique siempre lo mismo.
   ===================================================================== */
[hidden] { display: none !important; }

:root {
  --fuente: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --lienzo:        #f5f7fb;
  --superficie:    #ffffff;
  --superficie-2:  #fafbfd;
  --superficie-3:  #f2f5f9;
  --borde:         #e4e8ef;
  --borde-fuerte:  #d3d9e3;

  --tinta:         #0f172a;
  --tinta-2:       #475569;
  --tinta-3:       #7c8899;

  --marca:         #1d4ed8;
  --marca-hover:   #1a43bb;
  --marca-suave:   #eaf0ff;
  --marca-borde:   #c7d7ff;

  --exito:         #067647;
  --exito-suave:   #e7f6ee;
  --alerta:        #b45309;
  --alerta-suave:  #fdf3e3;
  --peligro:       #b42318;
  --peligro-suave: #fdeceb;
  --info:          #026aa2;
  --info-suave:    #e7f2f9;

  --sidebar:       #0d1424;
  --sidebar-2:     #141d33;
  --sidebar-texto: #9aa6bd;
  --sidebar-activo:#ffffff;
  /* Acento del menu: el mismo azul del logo. Un solo valor por tema. */
  --sidebar-acento: #3b82f6;

  --r-sm: 7px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;

  --sombra-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --sombra:    0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --sombra-md: 0 4px 12px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .04);
  --sombra-lg: 0 12px 32px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .05);

  --ancho-sidebar: 282px;
  --ancho-sidebar-min: 78px;
  --alto-topbar: 62px;
  --transicion: 160ms cubic-bezier(.4, 0, .2, 1);
}

[data-tema="oscuro"] {
  --lienzo:        #0a0f1c;
  --superficie:    #111827;
  --superficie-2:  #151d2e;
  --superficie-3:  #1b2436;
  --borde:         #253046;
  --borde-fuerte:  #33405a;

  --tinta:         #eef2f8;
  --tinta-2:       #a8b4c8;
  --tinta-3:       #77839a;

  --marca:         #5b8bff;
  --marca-hover:   #7ba1ff;
  --marca-suave:   #16233f;
  --marca-borde:   #2c3f66;

  --exito-suave:   #10281d;
  --alerta-suave:  #2b1f0d;
  --peligro-suave: #2d1512;
  --info-suave:    #0d2231;
  --exito:         #4ade80;
  --alerta:        #fbbf24;
  --peligro:       #f87171;
  --info:          #60a5fa;

  --sidebar:       #070b14;
  --sidebar-2:     #0e1524;
  --sidebar-acento: #5b8bff;

  --sombra-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --sombra:    0 1px 3px rgba(0, 0, 0, .5);
  --sombra-md: 0 4px 12px rgba(0, 0, 0, .5);
  --sombra-lg: 0 12px 32px rgba(0, 0, 0, .6);
}

/* ---------- Reinicio ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fuente);
  font-size: 14px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--lienzo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 650; letter-spacing: -.014em; color: var(--tinta); }
h1 { font-size: 24px; }
h2 { font-size: 19px; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p  { margin: 0 0 12px; }

a { color: var(--marca); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--marca-hover); }

img { max-width: 100%; height: auto; }
code, kbd, pre, .mono { font-family: var(--fuente-mono); font-size: .92em; }

::selection { background: var(--marca-suave); color: var(--marca); }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 8px; border: 2px solid var(--lienzo); }
::-webkit-scrollbar-thumb:hover { background: var(--tinta-3); }

/* =====================================================================
   Estructura
   ===================================================================== */
.app { display: flex; min-height: 100vh; }

/* =====================================================================
   Barra lateral  ·  forma del menu "rail" (Contapisos)
   Los colores son los de siempre: --sidebar, --sidebar-2, --sidebar-texto
   y --sidebar-acento (que sale del azul del logo). Aqui solo cambia la
   geometria: opciones mas altas, activo con barrita y icono tenido,
   submenus desplegables y globo flotante cuando esta contraida.
   ===================================================================== */
.sidebar {
  width: var(--ancho-sidebar);
  flex-shrink: 0;
  background: var(--sidebar);
  color: var(--sidebar-texto);
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 60;
  border-right: 1px solid rgba(255, 255, 255, .05);
  transition: width var(--transicion), transform var(--transicion);
}

/* ---------- Marca ---------- */
.sidebar__marca {
  height: var(--alto-topbar);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  flex-shrink: 0;
  overflow: hidden;
}

/* Esta regla la usan tambien login.php, instalar.php y comprobante.php:
   se deja igual y solo se ajusta el tamano cuando vive dentro del menu. */
.sidebar__logo {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  display: grid; place-items: center;
  color: #fff; font-weight: 700; font-size: 14px;
  box-shadow: 0 2px 8px rgba(59, 130, 246, .35);
  flex-shrink: 0;
}
.sidebar__marca .sidebar__logo { width: 36px; height: 36px; border-radius: 11px; font-size: 15px; }

.sidebar__nombre {
  font-size: 15px; font-weight: 650; color: #fff;
  letter-spacing: -.01em; line-height: 1.15;
  min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: opacity var(--transicion);
}
/* El nombre de la empresa, debajo del de la plataforma.
   Con line-height 1.15 heredado quedaban pegados el uno al otro y se
   leian como una sola linea partida. Un poco de aire y un tono mas
   apagado los separan sin necesidad de una raya en medio. */
.sidebar__nombre span {
  display: block; margin-top: 3px;
  font-size: 10.5px; font-weight: 500; line-height: 1.3;
  color: var(--sidebar-texto); letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .82;
}

/* ---------- Navegacion ---------- */
.sidebar__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 14px 12px 20px; }
.sidebar__nav::-webkit-scrollbar { width: 6px; }
.sidebar__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border: 0; }

.nav__grupo { margin-bottom: 14px; }

.nav__titulo {
  font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: #5b6880;
  margin: 0 0 6px; padding: 0 12px;
  transition: opacity var(--transicion);
}

/* Opcion del menu: alta y con aire, como el rail de Contapisos */
.nav__enlace {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  height: 46px; padding: 0 12px; margin-bottom: 3px;
  border-radius: var(--r-md);
  color: var(--sidebar-texto);
  font-size: 14px; font-weight: 500;
  transition: background var(--transicion), color var(--transicion);
}
.nav__enlace:hover { background: rgba(255, 255, 255, .06); color: #fff; }

.nav__enlace.activo {
  background: var(--sidebar-2);  /* respaldo para navegadores sin color-mix */
  background: color-mix(in srgb, var(--sidebar-acento) 22%, transparent);
  color: var(--sidebar-activo);
  font-weight: 600;
}
/* Barrita de acento pegada al borde izquierdo del menu */
.nav__enlace.activo::before {
  content: ''; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 22px; border-radius: 0 3px 3px 0;
  background: var(--sidebar-acento);
}

/* UNA RAMA ABIERTA NO ES UNA PANTALLA ABIERTA.
   "Administracion" y "Configuracion" se pintaban igual: mismo fondo,
   misma barra. Dos renglones marcados y ninguno decia cual se esta
   mirando. La rama pasa a un realce apenas insinuado -sin barra- y la
   barra de acento queda para lo unico que la merece: la pantalla en la
   que se esta. */
.nav__enlace--rama.activo {
  background: rgba(255, 255, 255, .05);
  color: #dbe3f0; font-weight: 600;
}
.nav__enlace--rama.activo::before { display: none; }
.nav__enlace--rama.activo svg { stroke: var(--sidebar-texto); }
.nav__enlace--rama.activo:hover { background: rgba(255, 255, 255, .09); color: #fff; }

.nav__enlace svg {
  width: 20px; height: 20px; flex-shrink: 0;
  stroke-width: 1.75;
}
.nav__enlace.activo svg { stroke: var(--sidebar-acento); }

.nav__enlace > span:not(.nav__badge) { white-space: nowrap; overflow: hidden; }

.nav__badge {
  margin-left: auto; font-size: 10.5px; font-weight: 650;
  background: var(--peligro); color: #fff;
  padding: 1px 6px; border-radius: 20px; min-width: 18px; text-align: center;
}

/* ---------- Submenu desplegable ---------- */
.nav__rama { position: relative; }

.nav__enlace--rama {
  width: 100%; border: 0; background: none; text-align: left;
  font-family: inherit; cursor: pointer;
}

.nav__flecha {
  margin-left: auto; flex: 0 0 15px; width: 15px; height: 15px;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .5; transition: transform var(--transicion);
}
.nav__rama.abierta .nav__flecha { transform: rotate(90deg); opacity: .9; }

/* max-height y no grid: con grid solo se aplasta la primera fila y el
   resto de opciones sigue ocupando alto invisible. */
.nav__sub { overflow: hidden; max-height: 0; transition: max-height var(--transicion); }
.nav__rama.abierta .nav__sub { max-height: 520px; }

.nav__subenlace {
  display: block; position: relative;
  margin-left: 26px; padding: 7px 11px;
  border-radius: var(--r-sm);
  /* Estaba en #8593ab: sobre el azul oscuro del menu apenas llegaba a
     3.4:1 y las opciones se leian como deshabilitadas. */
  color: #9fadc4; font-size: 13px; line-height: 1.35;
  overflow: hidden; opacity: 0;
  transition: background var(--transicion), color var(--transicion), opacity var(--transicion);
}
.nav__rama.abierta .nav__subenlace { opacity: 1; }

/* Linea guia a la izquierda del submenu */
.nav__subenlace::before {
  content: ''; position: absolute; left: -12px; top: 0; bottom: 0;
  width: 1px; background: rgba(255, 255, 255, .12);
}
.nav__subenlace:first-child::before { top: 3px; }
.nav__subenlace:last-child::before { bottom: 3px; }

.nav__subenlace:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* La opcion abierta. El punto de 6 px que la marcaba se confundia con la
   linea guia; pasando el raton por al lado se veia casi lo mismo. Ahora
   lleva barra de acento -la misma senial que arriba-, el texto en blanco
   y un fondo con mas cuerpo que el del raton encima. */
.nav__subenlace.activo {
  color: #fff; font-weight: 600;
  background: var(--sidebar-2);  /* respaldo para navegadores sin color-mix */
  background: color-mix(in srgb, var(--sidebar-acento) 26%, transparent);
}
.nav__subenlace.activo::before { background: var(--sidebar-acento); width: 2px; }
.nav__subenlace.activo::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; border-radius: 0 3px 3px 0;
  background: var(--sidebar-acento);
}

/* ---------- Pie: quien esta dentro y el ambiente ---------- */
.sidebar__pie { padding: 12px; border-top: 1px solid rgba(255, 255, 255, .06); flex-shrink: 0; }

.sidebar__quien {
  display: flex; align-items: center; gap: 10px;
  padding: 4px 6px 10px; min-width: 0;
}
.sidebar__quien > span { min-width: 0; }
.sidebar__quien strong {
  display: block; font-size: 12.5px; font-weight: 600; color: #e6ebf5; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar__quien small { font-size: 11px; color: var(--sidebar-texto); }

.sidebar__avatar {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(135deg, #6366f1, #3b82f6); color: #fff;
  display: grid; place-items: center;
  font-size: 12.5px; font-weight: 650; letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.sidebar__ambiente {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 11px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  font-size: 11.5px; color: var(--sidebar-texto);
}

/* Boton propio del menu: no toca el sistema de botones general */
.sidebar__salir {
  margin-top: 8px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 40px; border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .1);
  color: #c6cfdf; font-size: 12.5px; font-weight: 600;
  transition: background var(--transicion), color var(--transicion);
}
.sidebar__salir:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.sidebar__salir svg { width: 16px; height: 16px; }

/* ---------- Barra lateral contraida ---------- */
/* Vive DENTRO de la cabecera de la barra, al final de la fila de la
   marca. Antes era un circulo de 22 px colgando por fuera del borde y
   que solo aparecia al pasar el raton: se veia como una pegatina
   despegada del panel. */
.sidebar__contraer {
  margin-left: auto; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 9px;
  background: transparent; border: 1px solid transparent;
  color: rgba(255, 255, 255, .45); cursor: pointer;
  display: grid; place-items: center; padding: 0;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.sidebar__contraer:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .12);
  color: #fff;
}
.sidebar__contraer:focus-visible {
  outline: 2px solid var(--marca); outline-offset: 2px; color: #fff;
}
.sidebar__contraer svg { width: 17px; height: 17px; transition: transform var(--transicion); }

body.sidebar-min .sidebar { width: var(--ancho-sidebar-min); }
body.sidebar-min .principal { margin-left: var(--ancho-sidebar-min); }
body.sidebar-min .sidebar__contraer svg { transform: rotate(180deg); }

body.sidebar-min .sidebar__nombre,
body.sidebar-min .nav__titulo,
body.sidebar-min .nav__badge,
body.sidebar-min .sidebar__quien > span:not(.sidebar__avatar),
body.sidebar-min .sidebar__salir span,
body.sidebar-min .sidebar__ambiente span:not(.punto),
body.sidebar-min .sidebar__ambiente strong {
  opacity: 0; width: 0; overflow: hidden; pointer-events: none;
}

body.sidebar-min .sidebar__marca { justify-content: center; padding: 0; }

/* Contraida la barra mide 78 px y el logo con el boton al lado no caben.
   Se probo escondiendo el logo y quedaba peor: la marca desaparecia y la
   barra se volvia anonima.

   El boton estuvo colgado en la esquina de arriba a la derecha, encima
   del logo: pisaba la unica cosa que identifica el sistema y quedaba
   como una pegatina mal puesta. Ahora la cabecera se pone en columna y
   el boton va DEBAJO del logo, centrado con el. Los dos se leen enteros
   y la columna de iconos del menu sigue la misma linea vertical. */
body.sidebar-min .sidebar__marca {
  position: relative;
  flex-direction: column; justify-content: center; gap: 7px;
  height: auto; padding: 13px 0 11px;
}
body.sidebar-min .sidebar__logo { display: grid; }
/* El nombre esta invisible pero, en columna, seguia ocupando SU ALTO:
   dos lineas de nada que estiraban la cabecera de 93 px a 135. En fila
   no se notaba porque lo que se anulaba era el ancho. */
body.sidebar-min .sidebar__marca .sidebar__nombre { height: 0; margin: 0; }
body.sidebar-min .sidebar__contraer {
  position: static; margin: 0;
  width: 28px; height: 20px; border-radius: 6px;
  background: rgba(255, 255, 255, .07);
}
body.sidebar-min .sidebar__contraer svg { width: 13px; height: 13px; }

body.sidebar-min .sidebar__nav { padding: 14px 10px 20px; }
body.sidebar-min .nav__grupo { margin-bottom: 8px; }
body.sidebar-min .nav__titulo { height: 10px; margin: 10px 0 2px; }
body.sidebar-min .nav__enlace { justify-content: center; padding: 0; }
body.sidebar-min .sidebar__quien { justify-content: center; padding: 4px 0 10px; }
body.sidebar-min .sidebar__ambiente { justify-content: center; padding: 9px 0; }
body.sidebar-min .sidebar__salir { gap: 0; }

/* El rotulo se convierte en globo flotante al pasar el raton */
body.sidebar-min .nav__enlace > span:not(.nav__badge) {
  position: absolute; left: calc(100% + 12px); top: 50%;
  transform: translateY(-50%) translateX(-6px);
  background: var(--sidebar-2); color: #fff;
  padding: 7px 11px; border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 500; white-space: nowrap;
  box-shadow: var(--sombra-md);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transicion), transform var(--transicion);
  z-index: 70;
}
body.sidebar-min .nav__enlace:hover > span:not(.nav__badge) {
  opacity: 1; transform: translateY(-50%) translateX(0);
}

/* Contraida, el submenu sale flotando al costado */
body.sidebar-min .nav__flecha { display: none; }
body.sidebar-min .nav__rama .nav__sub {
  position: absolute; left: calc(100% + 10px); top: 0; z-index: 60;
  max-height: none; overflow: visible; min-width: 200px; padding: 6px;
  background: var(--sidebar-2); border-radius: var(--r-md); box-shadow: var(--sombra-lg);
  opacity: 0; pointer-events: none; transform: translateX(-6px);
  transition: opacity var(--transicion), transform var(--transicion);
}
body.sidebar-min .nav__rama:hover .nav__sub { opacity: 1; pointer-events: auto; transform: translateX(0); }
body.sidebar-min .nav__subenlace { margin-left: 0; opacity: 1; }
body.sidebar-min .nav__subenlace::before,
body.sidebar-min .nav__subenlace::after { display: none; }

.principal { transition: margin-left var(--transicion); }
.punto { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.punto--pruebas { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245, 158, 11, .18); }
.punto--produccion { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .18); }
/* Un reporte que nadie ha abierto todavia. Un punto y no una palabra: la
   columna de estado ya dice lo suyo y dos etiquetas seguidas se pelean
   por la atencion sin que gane ninguna. Lleva display porque este si va
   suelto dentro de una celda, no dentro de una fila flex como los otros. */
.punto--nuevo { display: inline-block; vertical-align: middle;
  background: var(--peligro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--peligro) 18%, transparent); }

/* ---------- Contenido ---------- */
.principal {
  flex: 1;
  margin-left: var(--ancho-sidebar);
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  height: var(--alto-topbar);
  background: color-mix(in srgb, var(--superficie) 85%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 14px;
  padding: 0 26px;
  position: sticky; top: 0; z-index: 40;
}

/* min-width: 0 permite que el titulo se recorte en vez de empujar la barra */
.topbar__donde { min-width: 0; }
.topbar__titulo { font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; }
.topbar__migas { font-size: 12px; color: var(--tinta-3); }
.topbar__titulo, .topbar__migas { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__acciones { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* En el telefono la barra no cabe con el texto del boton: se queda el icono.
   Sin esto la pagina entera se desplaza de lado. */
@media (max-width: 620px) {
  .topbar { padding: 0 13px; gap: 9px; }
  .topbar__acciones { gap: 4px; }
  .topbar__acciones .boton--primario { font-size: 0; padding: 8px 10px; gap: 0; }
  .topbar__acciones .boton--primario svg { width: 17px; height: 17px; }
}

.icono-boton {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid transparent; background: transparent; color: var(--tinta-2);
  border-radius: var(--r-sm); cursor: pointer; transition: all var(--transicion);
}
.icono-boton:hover { background: var(--superficie-3); color: var(--tinta); }
.icono-boton svg { width: 18px; height: 18px; }

.avatar {
  width: 33px; height: 33px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #3b82f6);
  color: #fff; display: grid; place-items: center;
  font-size: 12px; font-weight: 650; letter-spacing: .02em;
  cursor: pointer; flex-shrink: 0;
}

.contenido { padding: 26px; flex: 1; }
.contenido--ancho { max-width: 1480px; margin: 0 auto; width: 100%; }

/* ---------- Encabezado de pagina ---------- */
.pagina__cabecera {
  display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 22px;
}
.pagina__cabecera h1 { font-size: 23px; }
.pagina__sub { color: var(--tinta-3); font-size: 13.5px; margin-top: 3px; }
.pagina__acciones { margin-left: auto; display: flex; gap: 9px; flex-wrap: wrap; }

/* =====================================================================
   Componentes
   ===================================================================== */

/* ---------- Tarjetas ---------- */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-sm);
}
.tarjeta__cabecera {
  padding: 16px 20px;
  border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.tarjeta__titulo { font-size: 14.5px; font-weight: 650; }
.tarjeta__sub { font-size: 12.5px; color: var(--tinta-3); margin-top: 2px; }
.tarjeta__cuerpo { padding: 20px; }
.tarjeta__cuerpo--plano { padding: 0; }
.tarjeta__pie {
  padding: 14px 20px; border-top: 1px solid var(--borde);
  background: var(--superficie-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  display: flex; gap: 9px; align-items: center; flex-wrap: wrap;
}
.tarjeta__cabecera .pagina__acciones,
.tarjeta__cabecera .acciones-der { margin-left: auto; display: flex; gap: 8px; }

/* ---------- KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 15px; margin-bottom: 22px; }

.kpi {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: 17px 19px;
  box-shadow: var(--sombra-sm);
  position: relative; overflow: hidden;
  transition: box-shadow var(--transicion), transform var(--transicion);
}
.kpi:hover { box-shadow: var(--sombra-md); transform: translateY(-1px); }
.kpi__fila { display: flex; align-items: flex-start; gap: 12px; }
.kpi__etiqueta { font-size: 12px; font-weight: 550; color: var(--tinta-3); letter-spacing: .01em; }
.kpi__valor { font-size: 26px; font-weight: 680; letter-spacing: -.028em; margin-top: 5px; line-height: 1.15; }
.kpi__pie { font-size: 11.5px; color: var(--tinta-3); margin-top: 7px; display: flex; align-items: center; gap: 5px; }
.kpi__icono {
  margin-left: auto; width: 38px; height: 38px; border-radius: var(--r-md);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--marca-suave); color: var(--marca);
}
.kpi__icono svg { width: 19px; height: 19px; }
.kpi__icono--exito  { background: var(--exito-suave);  color: var(--exito); }
.kpi__icono--alerta { background: var(--alerta-suave); color: var(--alerta); }
.kpi__icono--peligro{ background: var(--peligro-suave);color: var(--peligro); }
.kpi__icono--info   { background: var(--info-suave);   color: var(--info); }

.tendencia { font-weight: 600; display: inline-flex; align-items: center; gap: 3px; }
.tendencia--sube { color: var(--exito); }
.tendencia--baja { color: var(--peligro); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 8.5px 15px;
  font-family: inherit; font-size: 13.5px; font-weight: 570;
  line-height: 1.2;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition: all var(--transicion);
  text-decoration: none;
}
.boton svg { width: 16px; height: 16px; flex-shrink: 0; }
.boton:disabled, .boton.cargando { opacity: .6; cursor: not-allowed; pointer-events: none; }

.boton--primario { background: var(--marca); color: #fff; box-shadow: var(--sombra-sm); }
.boton--primario:hover { background: var(--marca-hover); color: #fff; box-shadow: var(--sombra); }

.boton--secundario { background: var(--superficie); color: var(--tinta); border-color: var(--borde-fuerte); box-shadow: var(--sombra-sm); }
.boton--secundario:hover { background: var(--superficie-3); color: var(--tinta); }

.boton--fantasma { background: transparent; color: var(--tinta-2); }
.boton--fantasma:hover { background: var(--superficie-3); color: var(--tinta); }

.boton--peligro { background: var(--peligro); color: #fff; }
.boton--peligro:hover { background: #96271d; color: #fff; }

.boton--exito { background: var(--exito); color: #fff; }
.boton--exito:hover { background: #04603a; color: #fff; }

.boton--sm { padding: 5.5px 11px; font-size: 12.5px; }
.boton--sm svg { width: 14px; height: 14px; }
.boton--lg { padding: 11px 20px; font-size: 14.5px; }
.boton--bloque { width: 100%; }

.boton-grupo { display: inline-flex; }
.boton-grupo .boton { border-radius: 0; margin-left: -1px; }
.boton-grupo .boton:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); margin-left: 0; }
.boton-grupo .boton:last-child  { border-radius: 0 var(--r-sm) var(--r-sm) 0; }

/* ---------- Formularios ---------- */
.campo { margin-bottom: 16px; }
.campo__etiqueta {
  display: block; font-size: 12.5px; font-weight: 570;
  color: var(--tinta-2); margin-bottom: 6px;
}
.campo__etiqueta .req { color: var(--peligro); margin-left: 2px; }
.campo__ayuda { font-size: 11.5px; color: var(--tinta-3); margin-top: 5px; }
.campo__error { font-size: 11.5px; color: var(--peligro); margin-top: 5px; font-weight: 500; }

.entrada, .selector, .area {
  width: 100%;
  padding: 8.5px 12px;
  font-family: inherit; font-size: 13.5px; color: var(--tinta);
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
  appearance: none;
}
.entrada::placeholder, .area::placeholder { color: var(--tinta-3); }
.entrada:focus, .selector:focus, .area:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--marca) 15%, transparent);
}
.entrada:disabled, .selector:disabled, .area:disabled { background: var(--superficie-3); color: var(--tinta-3); cursor: not-allowed; }
.entrada.invalido, .selector.invalido { border-color: var(--peligro); }
.area { min-height: 84px; resize: vertical; }

.selector {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c8899' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
}

.entrada--mono { font-family: var(--fuente-mono); letter-spacing: -.02em; }
.entrada--der { text-align: right; }

.grupo-entrada { display: flex; }
.grupo-entrada .prefijo, .grupo-entrada .sufijo {
  display: grid; place-items: center; padding: 0 11px;
  background: var(--superficie-3); border: 1px solid var(--borde-fuerte);
  color: var(--tinta-3); font-size: 13px; white-space: nowrap;
}
.grupo-entrada .prefijo { border-right: 0; border-radius: var(--r-sm) 0 0 var(--r-sm); }
.grupo-entrada .sufijo  { border-left: 0;  border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.grupo-entrada .prefijo + .entrada { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.grupo-entrada .entrada:has(+ .sufijo) { border-radius: var(--r-sm) 0 0 var(--r-sm); }

.rejilla { display: grid; gap: 16px; }
.rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rejilla--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rejilla--auto { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-completa { grid-column: 1 / -1; }

.interruptor { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor__pista {
  width: 38px; height: 21px; border-radius: 20px;
  background: var(--borde-fuerte); position: relative;
  transition: background var(--transicion); flex-shrink: 0;
}
.interruptor__pista::after {
  content: ''; position: absolute; top: 2.5px; left: 2.5px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #fff; box-shadow: var(--sombra-sm);
  transition: transform var(--transicion);
}
.interruptor input:checked + .interruptor__pista { background: var(--marca); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(17px); }
.interruptor__texto { font-size: 13.5px; }

.casilla { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 13.5px; }
.casilla input[type="checkbox"], .casilla input[type="radio"] {
  width: 16px; height: 16px; accent-color: var(--marca); cursor: pointer; margin: 0;
}

/* ---------- Tablas ---------- */
.tabla-envoltura { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla thead th {
  text-align: left; font-size: 11px; font-weight: 620;
  letter-spacing: .055em; text-transform: uppercase;
  color: var(--tinta-3);
  padding: 11px 16px;
  background: var(--superficie-2);
  border-bottom: 1px solid var(--borde);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.tabla tbody td { padding: 12px 16px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla tbody tr { transition: background var(--transicion); }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tfoot td { padding: 12px 16px; font-weight: 650; background: var(--superficie-2); border-top: 1px solid var(--borde); }

.tabla .der  { text-align: right; }
.tabla .cen  { text-align: center; }
.tabla .num  { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--fuente-mono); font-size: 12.5px; }
.tabla .acciones { white-space: nowrap; text-align: right; width: 1%; }
.tabla--compacta tbody td { padding: 8px 12px; }
.tabla--compacta thead th { padding: 8px 12px; }

.celda-principal { font-weight: 570; color: var(--tinta); }
.celda-secundaria { font-size: 12px; color: var(--tinta-3); margin-top: 1px; }

/* ---------- Insignias ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2.5px 9px;
  font-size: 11.5px; font-weight: 570;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge--exito   { background: var(--exito-suave);   color: var(--exito);   border-color: color-mix(in srgb, var(--exito) 22%, transparent); }
.badge--peligro { background: var(--peligro-suave); color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 22%, transparent); }
.badge--alerta  { background: var(--alerta-suave);  color: var(--alerta);  border-color: color-mix(in srgb, var(--alerta) 22%, transparent); }
.badge--info    { background: var(--info-suave);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 22%, transparent); }
.badge--neutro  { background: var(--superficie-3);  color: var(--tinta-2); border-color: var(--borde); }
.badge--marca   { background: var(--marca-suave);   color: var(--marca);   border-color: var(--marca-borde); }

/* ---------- Alertas ---------- */
.alerta {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 13px 16px;
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: 13.5px;
  margin-bottom: 16px;
}
.alerta svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alerta__titulo { font-weight: 620; margin-bottom: 2px; }
.alerta--exito  { background: var(--exito-suave);   border-color: color-mix(in srgb, var(--exito) 25%, transparent);   color: var(--exito); }
.alerta--error, .alerta--peligro { background: var(--peligro-suave); border-color: color-mix(in srgb, var(--peligro) 25%, transparent); color: var(--peligro); }
.alerta--advertencia { background: var(--alerta-suave); border-color: color-mix(in srgb, var(--alerta) 25%, transparent); color: var(--alerta); }
.alerta--info   { background: var(--info-suave);    border-color: color-mix(in srgb, var(--info) 25%, transparent);    color: var(--info); }
.alerta p:last-child { margin-bottom: 0; }

/* ---------- Notificaciones flotantes ---------- */
.notificaciones {
  position: fixed; top: 18px; right: 18px; z-index: 200;
  display: flex; flex-direction: column; gap: 9px;
  max-width: 380px;
}
.notificacion {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--marca);
  border-radius: var(--r-md);
  padding: 12px 15px;
  box-shadow: var(--sombra-lg);
  font-size: 13.5px;
  animation: entrar-derecha .26s cubic-bezier(.16,1,.3,1);
}
.notificacion--exito  { border-left-color: var(--exito); }
.notificacion--error  { border-left-color: var(--peligro); }
.notificacion--advertencia { border-left-color: var(--alerta); }
.notificacion--saliendo { animation: salir-derecha .2s ease forwards; }
.notificacion__cerrar { margin-left: auto; background: none; border: 0; color: var(--tinta-3); cursor: pointer; padding: 0; line-height: 1; font-size: 17px; }

@keyframes entrar-derecha { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes salir-derecha  { to { opacity: 0; transform: translateX(24px); } }

/* ---------- Modales ---------- */
.modal-fondo {
  position: fixed; inset: 0; z-index: 150;
  background: rgba(10, 15, 28, .5);
  backdrop-filter: blur(3px);
  display: grid; place-items: center;
  padding: 20px;
  animation: aparecer .16s ease;
}
.modal {
  background: var(--superficie);
  border-radius: var(--r-xl);
  box-shadow: var(--sombra-lg);
  width: 100%; max-width: 560px;
  max-height: 90vh; display: flex; flex-direction: column;
  animation: subir .24s cubic-bezier(.16,1,.3,1);
  border: 1px solid var(--borde);
}
.modal--ancho { max-width: 880px; }
.modal--estrecho { max-width: 420px; }
.modal__cabecera { padding: 19px 24px; border-bottom: 1px solid var(--borde); display: flex; align-items: center; gap: 12px; }
.modal__titulo { font-size: 16px; font-weight: 650; }
.modal__cerrar { margin-left: auto; background: none; border: 0; cursor: pointer; color: var(--tinta-3); padding: 4px; border-radius: 6px; line-height: 0; }
.modal__cerrar:hover { background: var(--superficie-3); color: var(--tinta); }
.modal__cuerpo { padding: 22px 24px; overflow-y: auto; flex: 1; }
.modal__pie { padding: 16px 24px; border-top: 1px solid var(--borde); display: flex; gap: 9px; justify-content: flex-end; background: var(--superficie-2); border-radius: 0 0 var(--r-xl) var(--r-xl); }

@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes subir { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

/* ---------- Barra de herramientas / filtros ---------- */
.barra-herramientas {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 14px 20px; border-bottom: 1px solid var(--borde);
}
.buscador { position: relative; flex: 1; min-width: 200px; max-width: 380px; }
.buscador svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--tinta-3); pointer-events: none; }
.buscador .entrada { padding-left: 35px; }

/* ---------- Estado vacio ---------- */
.vacio { text-align: center; padding: 56px 24px; }
.vacio__icono {
  width: 54px; height: 54px; border-radius: var(--r-lg);
  background: var(--superficie-3); color: var(--tinta-3);
  display: grid; place-items: center; margin: 0 auto 16px;
}
.vacio__icono svg { width: 26px; height: 26px; }
.vacio h3 { font-size: 15.5px; margin-bottom: 5px; }
.vacio p { color: var(--tinta-3); font-size: 13.5px; max-width: 400px; margin: 0 auto 18px; }

/* ---------- Paginacion ---------- */
.paginacion { display: flex; align-items: center; gap: 5px; padding: 14px 20px; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.paginacion__info { font-size: 12.5px; color: var(--tinta-3); margin-right: auto; }
.paginacion a, .paginacion span {
  min-width: 32px; height: 32px; padding: 0 9px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); font-size: 13px; font-weight: 540;
  color: var(--tinta-2); border: 1px solid transparent;
}
.paginacion a:hover { background: var(--superficie-3); color: var(--tinta); }
.paginacion .actual { background: var(--marca); color: #fff; }

/* ---------- Pestanas ---------- */
.pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--borde); margin-bottom: 20px; overflow-x: auto; }
.pestana {
  padding: 10px 15px; font-size: 13.5px; font-weight: 550;
  color: var(--tinta-3); border-bottom: 2px solid transparent;
  cursor: pointer; white-space: nowrap; background: none; border-top: 0; border-left: 0; border-right: 0;
  font-family: inherit; transition: all var(--transicion);
}
.pestana:hover { color: var(--tinta); }
.pestana.activa { color: var(--marca); border-bottom-color: var(--marca); }

/* ---------- Linea de tiempo ---------- */
.linea-tiempo { position: relative; padding-left: 26px; }
.linea-tiempo::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--borde); }
.linea-tiempo__item { position: relative; padding-bottom: 18px; }
.linea-tiempo__item:last-child { padding-bottom: 0; }
.linea-tiempo__punto {
  position: absolute; left: -26px; top: 3px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--superficie); border: 2px solid var(--borde-fuerte);
}
.linea-tiempo__item--ok  .linea-tiempo__punto { border-color: var(--exito); background: var(--exito); }
.linea-tiempo__item--err .linea-tiempo__punto { border-color: var(--peligro); background: var(--peligro); }
.linea-tiempo__titulo { font-weight: 570; font-size: 13.5px; }
.linea-tiempo__meta { font-size: 11.5px; color: var(--tinta-3); }
.linea-tiempo__detalle { font-size: 12.5px; color: var(--tinta-2); margin-top: 4px; white-space: pre-wrap; word-break: break-word; }

/* ---------- Graficos ---------- */
.grafico { width: 100%; height: 240px; display: block; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--tinta-2); }
.leyenda__item { display: inline-flex; align-items: center; gap: 6px; }
.leyenda__color { width: 9px; height: 9px; border-radius: 2.5px; }

.barra-progreso { height: 7px; background: var(--superficie-3); border-radius: 20px; overflow: hidden; }
.barra-progreso__valor { height: 100%; background: var(--marca); border-radius: 20px; transition: width .35s ease; }
.barra-progreso__valor--exito  { background: var(--exito); }
.barra-progreso__valor--alerta { background: var(--alerta); }
.barra-progreso__valor--peligro{ background: var(--peligro); }

/* =====================================================================
   Punto de venta
   ===================================================================== */

/* Fichas de categoria */
.pos__chips { display: flex; gap: 7px; overflow-x: auto; padding: 2px 0; scrollbar-width: none; }
.pos__chips::-webkit-scrollbar { display: none; }
.pos__chip {
  padding: 6px 13px; border-radius: 20px; white-space: nowrap;
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--tinta-2); font-size: 12.5px; font-weight: 540;
  cursor: pointer; font-family: inherit; transition: all var(--transicion);
}
.pos__chip:hover { border-color: var(--marca); color: var(--marca); }
.pos__chip.activo { background: var(--marca); border-color: var(--marca); color: #fff; }

/* Bloque del cliente */
.pos__cliente {
  padding: 14px 16px; border-bottom: 1px solid var(--borde);
  background: var(--superficie-2);
}
.pos__cliente-buscador { position: relative; }
.pos__cliente-resultados {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); box-shadow: var(--sombra-lg);
  max-height: 300px; overflow-y: auto;
}
.pos__cliente-item {
  display: block; width: 100%; text-align: left; padding: 9px 13px;
  background: none; border: 0; border-bottom: 1px solid var(--borde);
  cursor: pointer; font-family: inherit; color: var(--tinta);
}
.pos__cliente-item:last-child { border-bottom: 0; }
.pos__cliente-item:hover, .pos__cliente-item.activo { background: var(--marca-suave); }
.pos__cliente-item strong { display: block; font-size: 13px; font-weight: 570; }
.pos__cliente-item span { font-size: 11.5px; color: var(--tinta-3); font-family: var(--fuente-mono); }
.pos__cliente-vacio { padding: 13px; font-size: 12.5px; color: var(--tinta-3); }

.pos__cliente-ficha {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--superficie); border: 1px solid var(--borde);
  margin-top: 9px;
}
.pos__cliente-ficha .avatar { width: 34px; height: 34px; font-size: 12px; }
.pos__cliente-datos { flex: 1; min-width: 0; }
.pos__cliente-datos strong { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos__cliente-datos span { font-size: 11.5px; color: var(--tinta-3); font-family: var(--fuente-mono); }

/* Separador con la palabra al medio, para dos caminos alternativos */
.separador-o {
  display: flex; align-items: center; gap: 12px;
  margin: 20px 0; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: var(--tinta-3);
}
.separador-o::before, .separador-o::after {
  content: ""; flex: 1; height: 1px; background: var(--borde);
}

/* position/overflow: el panel lateral vive dentro de esta caja, no tapa
   la pantalla entera. El catalogo queda a la vista mientras se cobra. */
.pos { display: grid; grid-template-columns: 1fr 400px; gap: 18px; height: calc(100vh - var(--alto-topbar) - 52px); position: relative; overflow: hidden; }
.pos__catalogo { display: flex; flex-direction: column; min-height: 0; }
.pos__rejilla {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  grid-auto-rows: min-content; align-content: start;
  gap: 11px; overflow-y: auto; padding: 4px; flex: 1;
}
.pos__producto {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: 0; cursor: pointer;
  transition: all var(--transicion); text-align: left;
  font-family: inherit; display: flex; flex-direction: column;
  overflow: hidden; position: relative;
}
.pos__producto:hover { border-color: var(--marca); box-shadow: var(--sombra-md); transform: translateY(-2px); }
.pos__producto:active { transform: scale(.985); }
.pos__producto-tapa {
  height: 62px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--superficie-3), var(--superficie-2));
  color: var(--tinta-3); font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  border-bottom: 1px solid var(--borde);
}
.pos__producto:hover .pos__producto-tapa { background: linear-gradient(135deg, var(--marca-suave), var(--superficie-2)); color: var(--marca); }
.pos__producto-cuerpo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.pos__producto-agotado {
  position: absolute; top: 8px; right: 8px;
  background: var(--peligro); color: #fff;
  font-size: 9.5px; font-weight: 650; letter-spacing: .03em;
  padding: 2px 6px; border-radius: 4px; text-transform: uppercase;
}
.pos__producto-codigo { font-size: 10.5px; color: var(--tinta-3); font-family: var(--fuente-mono); }
.pos__producto-nombre { font-size: 13px; font-weight: 560; line-height: 1.35; margin: 2px 0 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pos__producto-precio { font-size: 15px; font-weight: 680; color: var(--marca); margin-top: auto; }
.pos__producto-stock { font-size: 10.5px; color: var(--tinta-3); }
.pos__producto-stock.agotado { color: var(--peligro); font-weight: 600; }

.pos__ticket { display: flex; flex-direction: column; min-height: 0; }
.pos__lineas { flex: 1; overflow-y: auto; }
.pos__linea { display: flex; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--borde); align-items: flex-start; }
.pos__linea-info { flex: 1; min-width: 0; }
.pos__linea-nombre { font-size: 13px; font-weight: 550; line-height: 1.35; }
.pos__linea-precio { font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }
.pos__linea-total { font-weight: 650; font-variant-numeric: tabular-nums; font-size: 13.5px; }
.pos__cantidad { display: flex; align-items: center; gap: 3px; margin-top: 6px; }
.pos__cantidad button {
  width: 24px; height: 24px; border-radius: 6px; border: 1px solid var(--borde-fuerte);
  background: var(--superficie); cursor: pointer; color: var(--tinta-2);
  display: grid; place-items: center; font-size: 15px; line-height: 1; font-family: inherit;
}
.pos__cantidad button:hover { background: var(--superficie-3); color: var(--tinta); }
.pos__cantidad input { width: 48px; text-align: center; padding: 3px; font-size: 12.5px; border: 1px solid var(--borde-fuerte); border-radius: 6px; background: var(--superficie); color: var(--tinta); font-family: inherit; }

.pos__totales { padding: 15px 18px; border-top: 1px solid var(--borde); background: var(--superficie-2); }
.pos__total-fila { display: flex; justify-content: space-between; font-size: 13px; color: var(--tinta-2); margin-bottom: 6px; }
.pos__total-fila--grande { font-size: 21px; font-weight: 700; color: var(--tinta); margin: 11px 0 0; padding-top: 11px; border-top: 1px solid var(--borde); }
.pos__total-fila--grande span:last-child { color: var(--marca); font-variant-numeric: tabular-nums; }

/* =====================================================================
   Autenticacion
   ===================================================================== */
.auth {
  min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr;
  background: var(--superficie);
}
.auth__panel {
  background: linear-gradient(150deg, #0d1424 0%, #16254a 55%, #1d4ed8 140%);
  color: #fff; padding: 52px 56px;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.auth__panel::after {
  content: ''; position: absolute; width: 460px; height: 460px;
  border-radius: 50%; background: radial-gradient(circle, rgba(59,130,246,.28), transparent 70%);
  right: -140px; bottom: -160px;
}
.auth__panel-marca { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.auth__panel-titulo { font-size: 34px; font-weight: 700; line-height: 1.18; letter-spacing: -.03em; color: #fff; position: relative; z-index: 1; max-width: 460px; }
.auth__panel-texto { font-size: 15px; color: #b6c4dd; margin-top: 16px; max-width: 430px; position: relative; z-index: 1; line-height: 1.65; }
.auth__lista { list-style: none; padding: 0; margin: 26px 0 0; position: relative; z-index: 1; }
.auth__lista li { display: flex; gap: 11px; align-items: center; font-size: 14px; color: #cbd6ea; margin-bottom: 12px; }
.auth__lista svg { width: 17px; height: 17px; color: #60a5fa; flex-shrink: 0; }
.auth__panel-pie { font-size: 12.5px; color: #7d8db0; position: relative; z-index: 1; }

.auth__formulario { display: grid; place-items: center; padding: 40px 24px; }
.auth__caja { width: 100%; max-width: 384px; }
.auth__titulo { font-size: 25px; margin-bottom: 7px; }
.auth__sub { color: var(--tinta-3); margin-bottom: 28px; font-size: 14px; }

/* =====================================================================
   Utilidades
   ===================================================================== */
.oculto { display: none !important; }
.mt-0{margin-top:0}.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:26px}
.mb-0{margin-bottom:0}.mb-1{margin-bottom:6px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}.mb-4{margin-bottom:26px}
.flex{display:flex}form.flex{flex-wrap:wrap}.flex-col{flex-direction:column}.items-center{align-items:center}.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}
.gap-1{gap:5px}.gap-2{gap:9px}.gap-3{gap:14px}.gap-4{gap:20px}.flex-1{flex:1}.flex-wrap{flex-wrap:wrap}
.texto-der{text-align:right}.texto-cen{text-align:center}
.texto-sm{font-size:12.5px}.texto-xs{font-size:11.5px}.texto-lg{font-size:16px}
.texto-suave{color:var(--tinta-3)}.texto-medio{color:var(--tinta-2)}
.texto-exito{color:var(--exito)}.texto-peligro{color:var(--peligro)}.texto-alerta{color:var(--alerta)}.texto-marca{color:var(--marca)}
.negrita{font-weight:650}.semi{font-weight:570}
.mono{font-family:var(--fuente-mono);font-size:12.5px}
.tabular{font-variant-numeric:tabular-nums}
.truncar{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-full{width:100%}
.cursor-pointer{cursor:pointer}
.sep{height:1px;background:var(--borde);margin:18px 0;border:0}

.cargador {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent;
  animation: girar .65s linear infinite; display: inline-block;
}
@keyframes girar { to { transform: rotate(360deg); } }

.esqueleto {
  background: linear-gradient(90deg, var(--superficie-3) 25%, var(--superficie-2) 50%, var(--superficie-3) 75%);
  background-size: 200% 100%; animation: brillo 1.4s infinite; border-radius: var(--r-sm);
}
@keyframes brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* =====================================================================
   Responsivo
   ===================================================================== */
.sidebar__alternar { display: none; }

@media (max-width: 1180px) {
  .pos { grid-template-columns: 1fr 350px; }
}

@media (max-width: 1024px) {
  .auth { grid-template-columns: 1fr; }
  .auth__panel { display: none; }
  .rejilla--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pos { grid-template-columns: 1fr; height: auto; }
}

@media (max-width: 860px) {
  .sidebar { transform: translateX(-100%); box-shadow: var(--sombra-lg); }
  .sidebar.abierta { transform: none; }
  /* En el telefono el menu se abre completo: nunca en modo icono. */
  .sidebar, body.sidebar-min .sidebar { width: var(--ancho-sidebar); }
  .principal, body.sidebar-min .principal { margin-left: 0; }
  body.sidebar-min .sidebar__nombre,
  body.sidebar-min .nav__titulo,
  body.sidebar-min .nav__badge,
  body.sidebar-min .sidebar__quien > span:not(.sidebar__avatar),
  body.sidebar-min .sidebar__salir span,
  body.sidebar-min .sidebar__ambiente span:not(.punto),
  body.sidebar-min .sidebar__ambiente strong { opacity: 1; width: auto; height: auto; pointer-events: auto; }
  body.sidebar-min .sidebar__marca {
    flex-direction: row; justify-content: flex-start; align-items: center;
    height: var(--alto-topbar); gap: 11px; padding: 0 18px;
  }
  /* En fila el nombre vuelve a medir: en columna se le habia puesto
     height 0 para que la cabecera no creciera con dos lineas invisibles. */
  body.sidebar-min .sidebar__marca .sidebar__nombre { height: auto; }
  body.sidebar-min .nav__enlace { justify-content: flex-start; padding: 0 12px; }
  body.sidebar-min .sidebar__quien { justify-content: flex-start; padding: 4px 6px 10px; }
  body.sidebar-min .nav__enlace > span:not(.nav__badge) {
    position: static; transform: none; opacity: 1;
    background: none; box-shadow: none; padding: 0;
  }
  body.sidebar-min .nav__flecha { display: block; }
  body.sidebar-min .nav__rama .nav__sub {
    position: static; opacity: 1; pointer-events: auto; transform: none;
    background: none; box-shadow: none; padding: 0; min-width: 0;
    max-height: 0; overflow: hidden;
  }
  body.sidebar-min .nav__rama.abierta .nav__sub { max-height: 520px; }
  body.sidebar-min .nav__subenlace { margin-left: 26px; }
  body.sidebar-min .nav__subenlace::before { display: block; }
  body.sidebar-min .nav__subenlace.activo::after { display: block; }
  .sidebar__contraer { display: none; }
  .principal { margin-left: 0; }
  .sidebar__alternar { display: grid; }
  .contenido { padding: 18px 15px; }
  .topbar { padding: 0 15px; }
  /* minmax(0,1fr) y no 1fr: con 1fr un hijo ancho estira la rejilla mas alla
     de la pantalla y aparece desplazamiento lateral. */
  .rejilla--2, .rejilla--3, .rejilla--4 { grid-template-columns: minmax(0, 1fr); }

  /* LAS REJILLAS CON COLUMNA FIJA PUESTA A MANO
     43 vistas escriben grid-template-columns dentro del atributo style,
     casi siempre "minmax(0,1fr) 340px" para dejar una barra lateral.
     Un estilo en linea le gana a esta hoja, asi que ninguna de las
     reglas de arriba podia corregirlas: en un telefono de 375 px la
     primera columna se quedaba en 0 y la tarjeta de al lado se le
     montaba encima. De ahi que el texto saliera a una palabra por
     linea. Con !important se colapsan las 43 sin tocar 41 archivos.

     Se dejan fuera auto-fill y auto-fit: esas ya se adaptan solas y
     forzarlas a una columna empeoraria el resultado. */
  .rejilla[style*="grid-template-columns"]:not([style*="auto-fill"]):not([style*="auto-fit"]) {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .col-2, .col-3 { grid-column: span 1; }
  .pagina__acciones { width: 100%; }
  .velo-sidebar { position: fixed; inset: 0; background: rgba(10,15,28,.45); z-index: 55; }

  /* FILAS QUE NO SE PARTIAN
     La utilidad .flex no trae flex-wrap, asi que una fila de "fecha +
     tipo + boton" se salia de la pantalla. Envolver aqui no cambia
     nada de lo que ya cabe: flex-wrap solo actua cuando el contenido
     no entra. */
  .flex { flex-wrap: wrap; }

  /* Un desplegable con una opcion larga o un campo con ancho propio
     se salian por la derecha y arrastraban toda la pagina. */
  select, input, textarea, .selector { max-width: 100%; }

  /* Las etiquetas de estado con texto largo se salian enteras en vez
     de partirse. */
  .badge { white-space: normal; overflow-wrap: anywhere; }

  /* Ningun bloque puede empujar la pagina a lo ancho: el desplazamiento
     lateral en un telefono es lo que hace que todo se vea corrido. */
  img, video, canvas, svg, pre, table { max-width: 100%; }

  /* HIJOS QUE NO ENCOGIAN
     Un hijo de flex o de grid trae min-width: auto, y eso le impide
     bajar del ancho de su contenido aunque el padre sea mas estrecho.
     Por eso una tarjeta seguia midiendo 660 px dentro de una columna
     de 345. Con min-width: 0 se le permite encoger. Es la misma
     correccion que ya se usa en la barra superior y en el punto de
     venta, aplicada al resto. */
  .rejilla > *, .flex > * { min-width: 0; }

  /* Y ademas un techo. Cuando la columna de la rejilla colapsa, el
     contenedor de dentro se queda con el ancho que tenia ANTES de
     colapsar y se lo pasa a sus hijos: por eso una tarjeta seguia
     midiendo 660 px dentro de una columna de 345, aunque su contenido
     solo pide 137. El techo del 100% no encoge nada que ya quepa. */
  .rejilla > *, .flex > *, .tarjeta { max-width: 100%; }
}

@media print {
  .sidebar, .topbar, .pagina__acciones, .barra-herramientas, .notificaciones, .no-imprimir { display: none !important; }
  .principal { margin-left: 0; }
  .contenido { padding: 0; }
  .tarjeta { border: 0; box-shadow: none; }
  body { background: #fff; }
}


/* =====================================================================
   PANTALLA DE ACCESO  ·  VITRINA
   ---------------------------------------------------------------------
   Panel oscuro de presentacion a la izquierda, tarjeta de acceso a la
   derecha. Se pega al final de public/assets/css/app.css.

   La imagen del panel sale de public/assets/img/acceso.png (vea el
   encabezado de app/Views/auth/login.php).

   Los azules salen de los tokens que ya existen (--marca, --sidebar).
   Los tonos propios del panel oscuro se declaran una sola vez aqui
   abajo para poder cambiarlos de un solo sitio.
   ===================================================================== */
.acceso--vitrina {
  --vit-fondo:     #f4f7fc;   /* fondo de la pagina */
  --vit-panel-1:   #0b1730;   /* degradado del panel oscuro */
  --vit-panel-2:   #12233f;
  --vit-panel-3:   #0d1424;
  --vit-azul:      #3b82f6;   /* azul de acento del panel */
  --vit-azul-luz:  #60a5fa;
  --vit-texto:     #c3d1e6;   /* texto sobre el panel oscuro */
  --vit-texto-2:   #8ea3c4;
  --vit-linea:     rgba(255, 255, 255, .1);
  --vit-radio:     18px;

  /* ▸ Alto maximo de la imagen del panel. Si su PNG se ve muy grande
     o muy chico, este es el unico valor que hay que mover. */
  --vit-imagen-alto: min(42vh, 380px);
}

.acceso--vitrina {
  min-height: 100vh; min-height: 100dvh;
  display: grid; grid-template-columns: 54fr 46fr;
  padding: 16px;
  background: var(--vit-fondo);
  font-family: var(--fuente);
  color: var(--tinta);
  /* Las mitades entran desplazadas hacia afuera: hay que recortar ese
     sobrante. Va "clip" y no "hidden" a proposito, porque hidden
     convertiria la pagina en una caja con desplazamiento propio y en
     pantallas bajas saldria una barra dentro del login. */
  overflow-x: clip;
}

/* ---------------------------------------------------------------------
   Cerrar sesion pasó de enlace a boton

   Va por POST y con token, porque con un enlace cualquiera podia sacarle
   del sistema desde fuera. Pero un <button> trae de fabrica su borde, su
   fondo y su tipografia, y los tres estaban escritos para un <a>. Esto
   los devuelve a como estaban: en pantalla no cambia nada.
   --------------------------------------------------------------------- */
button.sidebar__salir,
button.cuenta__salir,
button.icono-boton--salir {
  font: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  /* El de la barra lateral ocupa todo el ancho, como el enlace. */
  width: 100%;
  text-align: inherit;
}
button.icono-boton--salir { width: auto; }

/* ---------------------------------------------------------------------
   El atributo hidden manda por encima del display de este archivo.
   Sin esto, el aviso de Bloq Mayus (que es display:flex) se queda
   visible siempre, porque cualquier display del CSS le gana al
   hidden que trae el navegador por omision.
   --------------------------------------------------------------------- */
.acceso--vitrina [hidden] { display: none !important; }

/* ---------------------------------------------------------------------
   Entrada: cada mitad llega desde su lado
   --------------------------------------------------------------------- */
@keyframes vit-desde-izquierda { from { opacity: 0; transform: translateX(-46px); } }
@keyframes vit-desde-derecha   { from { opacity: 0; transform: translateX(46px);  } }
@keyframes vit-asoma           { from { opacity: 0; transform: translateY(12px);  } }

/* =====================================================================
   Panel oscuro de presentacion
   ===================================================================== */
.vitrina__lienzo {
  position: relative; overflow: hidden;
  border-radius: var(--vit-radio);
  padding: 34px 38px 30px;
  display: flex; flex-direction: column;
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(59, 130, 246, .20) 0%, transparent 55%),
    linear-gradient(155deg, var(--vit-panel-1) 0%, var(--vit-panel-2) 58%, var(--vit-panel-3) 100%);
  color: var(--vit-texto);
  box-shadow: 0 20px 50px -28px rgba(11, 23, 48, .7);
  animation: vit-desde-izquierda .6s cubic-bezier(.22, .61, .36, 1) both;
}

/* Dentro del panel, cada pieza asoma con un pequeno retraso */
.vitrina__cima     { animation: vit-asoma .5s cubic-bezier(.22, .61, .36, 1) .18s both; }
.vitrina__escena   { animation: vit-asoma .5s cubic-bezier(.22, .61, .36, 1) .26s both; }
.vitrina__ventajas { animation: vit-asoma .5s cubic-bezier(.22, .61, .36, 1) .34s both; }

/* Constelacion de puntos */
.vitrina__trama { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.vitrina__cima { position: relative; z-index: 1; flex: 0 0 auto; }

/* ---------- Logotipo ---------- */
.vitrina__logo { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }

.vitrina__marca-icono { flex: 0 0 44px; width: 44px; height: 44px; display: block; }
.vitrina__marca-icono svg { width: 100%; height: 100%; display: block; }

/* El logotipo que sube el operador en /saas/marca. Ocupa exactamente la
   caja del dibujo de fabrica, asi que sustituirlo no mueve nada de al
   lado. Se usa "contain" para no recortar logos que no sean cuadrados. */
.sidebar__logo img { width: 100%; height: 100%; object-fit: contain; border-radius: inherit; display: block; }
.vitrina__marca-icono img { width: 100%; height: 100%; object-fit: contain; display: block; }
.vitrina__insignia img { width: 36px; height: 36px; object-fit: contain; display: block; }

/* El mismo dibujo sirve en el panel oscuro y en la tarjeta clara */
.vitrina__marca-icono .hoja,
.vitrina__insignia .hoja { fill: #fff; }
.vitrina__marca-icono .pliegue,
.vitrina__insignia .pliegue { fill: #c7d7f2; }
.vitrina__marca-icono .renglones,
.vitrina__insignia .renglones { fill: none; stroke: var(--vit-azul, #3b82f6); stroke-width: 2.6; stroke-linecap: round; }
.vitrina__marca-icono .sello,
.vitrina__insignia .sello { fill: #2563eb; }
.vitrina__marca-icono .visto,
.vitrina__insignia .visto { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.vitrina__marca-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vitrina__marca-texto strong {
  font-size: 25px; font-weight: 700; letter-spacing: -.03em; line-height: 1; color: #fff;
}
.vitrina__marca-texto small {
  font-size: 9.5px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--vit-texto-2);
}

/* ---------- Titular ---------- */
.vitrina__titulo {
  font-size: clamp(21px, 1.95vw, 29px); font-weight: 700;
  line-height: 1.18; letter-spacing: -.03em;
  color: #fff; margin: 0; max-width: 16ch;
}
.vitrina__titulo em { font-style: normal; display: block; color: var(--vit-azul-luz); }

.vitrina__raya {
  display: block; width: 48px; height: 3px; border-radius: 3px;
  background: var(--vit-azul); margin: 14px 0 15px;
}

.vitrina__texto {
  font-size: 13px; line-height: 1.65; color: var(--vit-texto);
  max-width: 44ch; margin: 0;
}

/* ---------- Marco de la imagen ---------- */
.vitrina__escena {
  position: relative; z-index: 1;
  flex: 1 1 auto; min-height: 0;
  margin: 20px 0 18px;
  display: flex; align-items: center; justify-content: center;
}

.vitrina__imagen {
  display: block;
  width: 100%; height: 100%;
  max-height: var(--vit-imagen-alto);
  object-fit: contain;
}

/* Aviso que sale solo con el modo depuracion encendido */
.vitrina__escena--vacia {
  border: 1px dashed rgba(255, 255, 255, .22);
  border-radius: 12px;
  min-height: 150px; padding: 18px;
  text-align: center;
}
.vitrina__escena--vacia span { font-size: 12px; line-height: 1.8; color: var(--vit-texto-2); }
.vitrina__escena--vacia code { font-family: var(--fuente-mono); font-size: 11.5px; color: var(--vit-azul-luz); }

/* ---------- Tres garantias ---------- */
.vitrina__ventajas {
  position: relative; z-index: 1; flex: 0 0 auto;
  list-style: none; margin: 0; padding: 18px 0 0;
  border-top: 1px solid var(--vit-linea);
  display: grid; grid-template-columns: repeat(3, 1fr);
}
.vitrina__ventajas li {
  display: flex; align-items: center; gap: 10px;
  padding: 0 15px;
  border-left: 1px solid var(--vit-linea);
}
.vitrina__ventajas li:first-child { border-left: 0; padding-left: 0; }

.vitrina__ventajas svg {
  flex: 0 0 22px; width: 22px; height: 22px;
  fill: none; stroke: var(--vit-azul-luz); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.vitrina__ventajas span {
  display: flex; flex-direction: column; min-width: 0;
  font-size: 11px; color: var(--vit-texto-2); line-height: 1.4;
}
.vitrina__ventajas strong { font-size: 12px; font-weight: 620; color: #fff; line-height: 1.3; }


/* =====================================================================
   Lado claro: la tarjeta de acceso
   ===================================================================== */
.vitrina__lado {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 24px 22px;
  animation: vit-desde-derecha .6s cubic-bezier(.22, .61, .36, 1) both;
}

.vitrina__tarjeta { animation: vit-asoma .5s cubic-bezier(.22, .61, .36, 1) .2s both; }
.vitrina__pie     { animation: vit-asoma .5s cubic-bezier(.22, .61, .36, 1) .3s both; }

.vitrina__tarjeta {
  width: 100%; max-width: 420px;
  background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--borde) 70%, transparent);
  border-radius: var(--vit-radio);
  box-shadow: 0 18px 44px -26px rgba(15, 33, 66, .28), 0 2px 6px rgba(15, 33, 66, .05);
  padding: 32px 34px 28px;
  text-align: center;
}

/* Insignia circular con el logotipo */
.vitrina__insignia {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--superficie);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--borde) 80%, transparent),
              0 6px 18px -10px rgba(15, 33, 66, .35);
}
.vitrina__insignia svg { width: 36px; height: 36px; display: block; }
/* Dentro de la tarjeta la hoja va en gris claro para que se vea sobre blanco */
.vitrina__insignia .hoja { fill: #e8eefa; }
.vitrina__insignia .pliegue { fill: #cbd9f0; }

.vitrina__bienvenida {
  font-size: 21px; font-weight: 650; letter-spacing: -.025em;
  margin: 0 0 7px; color: var(--tinta);
}
.vitrina__indicacion {
  font-size: 13px; line-height: 1.55; color: var(--tinta-3);
  margin: 0 auto 22px; max-width: 34ch;
}

/* ---------- Campos ---------- */
.acceso--vitrina .campo { text-align: left; margin-bottom: 14px; }
.acceso--vitrina .campo__etiqueta { font-size: 12.5px; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; }

.vitrina__campo { position: relative; display: block; }

.vitrina__campo-icono {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; pointer-events: none;
  fill: none; stroke: var(--tinta-3); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke var(--transicion);
}
.vitrina__campo:focus-within .vitrina__campo-icono { stroke: var(--marca); }

.acceso--vitrina .entrada {
  height: 44px; padding: 0 14px 0 41px;
  font-size: 13.5px; border-radius: 10px;
  border-color: var(--borde);
  background: var(--superficie-2);
}
.acceso--vitrina .entrada:focus { background: var(--superficie); }
.vitrina__campo .entrada#clave { padding-right: 44px; }

/* Boton de ver / ocultar */
.acceso__ojo {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--tinta-3);
  cursor: pointer; transition: color var(--transicion), background var(--transicion);
}
.acceso__ojo:hover { color: var(--tinta-2); background: var(--superficie-3); }
.acceso__ojo svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.acceso__ojo .ojo-cerrado { display: none; }
.acceso__ojo[aria-pressed="true"] .ojo-abierto { display: none; }
.acceso__ojo[aria-pressed="true"] .ojo-cerrado { display: block; }

/* Aviso de Bloq Mayus */
.acceso__mayus {
  display: flex; align-items: center; gap: 6px;
  margin: 7px 0 0; font-size: 11.5px; font-weight: 500; color: var(--alerta);
}
.acceso__mayus::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ---------- Recordar / olvido ---------- */
.vitrina__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin: 2px 0; text-align: left;
}

.vitrina__recordar { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.vitrina__recordar input {
  width: 16px; height: 16px; margin: 0; flex-shrink: 0;
  accent-color: var(--marca); cursor: pointer;
}
.vitrina__recordar span { font-size: 12px; color: var(--tinta-2); }

.vitrina__enlace {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--marca);
}
.vitrina__enlace:hover { color: var(--marca-hover); text-decoration: underline; }

.vitrina__ayuda {
  margin: 11px 0 0; padding: 10px 12px;
  background: var(--marca-suave); border: 1px solid var(--marca-borde);
  border-radius: 9px;
  font-size: 11.5px; line-height: 1.55; color: var(--tinta-2); text-align: left;
}
.vitrina__ayuda a { font-weight: 600; }

/* ---------- Boton de entrar ---------- */
.vitrina__entrar { height: 46px; border-radius: 10px; font-size: 14px; font-weight: 620; margin-top: 18px; }
.vitrina__entrar svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Separador y acceso externo (opcional) ---------- */
.vitrina__separador {
  display: flex; align-items: center; gap: 11px;
  margin: 19px 0; color: var(--tinta-3); font-size: 11.5px;
}
.vitrina__separador::before, .vitrina__separador::after {
  content: ''; flex: 1; height: 1px; background: var(--borde);
}

.vitrina__google {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  height: 44px; border-radius: 10px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  font-size: 13px; font-weight: 570; color: var(--tinta);
  transition: background var(--transicion), border-color var(--transicion);
}
.vitrina__google:hover { background: var(--superficie-3); color: var(--tinta); }
.vitrina__google svg { width: 17px; height: 17px; }

.vitrina__cuenta { margin: 20px 0 0; font-size: 12px; color: var(--tinta-3); }
.vitrina__cuenta a { font-weight: 600; }

/* ---------- Pie fuera de la tarjeta ---------- */
.vitrina__pie {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap; margin: 0;
  font-size: 11px; color: var(--tinta-3);
}
.vitrina__pie svg {
  width: 12px; height: 12px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.vitrina__pie i { width: 1px; height: 11px; background: var(--borde-fuerte); }


/* =====================================================================
   Fondo del telefono

   En el escritorio no se dibuja: el panel oscuro de la izquierda ya
   ocupa esa mitad. Se enciende mas abajo, en el corte de 940 px, que es
   justo donde ese panel se esconde.

   Va en absoluto y no en fijo a proposito: .acceso--vitrina tiene
   overflow-x: clip, y un elemento fijo dentro de una caja recortada
   depende del navegador. En absoluto cubre exactamente la pantalla de
   acceso, que es lo que se quiere, y se comporta igual en todos.

   Y la foto se pinta con background-image y no con una <img>, porque
   una <img> dentro de un display:none se descarga igual: en el
   escritorio se estarian bajando hasta 3 MB para nada, en la primera
   pantalla del sistema. La direccion llega en --vit-movil desde el
   HTML, y solo se usa aqui dentro; mientras la consulta de medios no
   cuadre, el navegador no la pide.
   ===================================================================== */
.vitrina__movil { display: none; }

.acceso--movil { position: relative; }

@media (max-width: 940px) {
  .acceso--movil .vitrina__movil {
    display: block;
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden;
    background-image: var(--vit-movil);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* La cortina.

     La tarjeta es blanca y opaca, asi que se lee sobre cualquier foto.
     Lo que no se lee es el pie, que va suelto encima del fondo. En vez
     de pedirle al operador una foto oscura -que no va a controlar- se
     oscurece aqui: cualquier foto que suba queda utilizable. */
  .acceso--movil .vitrina__movil::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(7, 12, 24, .58) 0%,
      rgba(7, 12, 24, .46) 42%,
      rgba(7, 12, 24, .74) 100%);
  }

  /* La tarjeta y el pie por encima del fondo */
  .acceso--movil .vitrina__lado { position: relative; z-index: 1; }

  .acceso--movil .vitrina__tarjeta {
    box-shadow: 0 26px 64px -22px rgba(0, 0, 0, .6), 0 3px 10px rgba(0, 0, 0, .18);
  }

  .acceso--movil .vitrina__pie { color: rgba(255, 255, 255, .88); }
  .acceso--movil .vitrina__pie i { background: rgba(255, 255, 255, .34); }
  .acceso--movil .vitrina__pie a { color: rgba(255, 255, 255, .95); }
}


/* =====================================================================
   Tema oscuro
   ===================================================================== */
[data-tema="oscuro"] .acceso--vitrina { --vit-fondo: #070b14; }
[data-tema="oscuro"] .vitrina__tarjeta {
  border-color: var(--borde-fuerte);
  box-shadow: 0 24px 60px -26px rgba(0, 0, 0, .8);
}
[data-tema="oscuro"] .vitrina__insignia .hoja { fill: #1b2740; }
[data-tema="oscuro"] .vitrina__insignia .pliegue { fill: #2b3a5c; }


/* =====================================================================
   Pantallas medianas y telefono
   ===================================================================== */
/* Pantalla baja: la imagen es lo primero que cede */
@media (max-height: 780px) {
  .acceso--vitrina { --vit-imagen-alto: min(34vh, 260px); }
  .vitrina__lienzo { padding: 26px 30px 24px; }
  .vitrina__logo { margin-bottom: 20px; }
}

@media (max-width: 1180px) {
  .acceso--vitrina { grid-template-columns: 50fr 50fr; }
  .vitrina__lienzo { padding: 28px 26px 24px; }
  .vitrina__ventajas li { padding: 0 10px; }
  .vitrina__tarjeta { padding: 28px 24px 26px; }
}

/* El panel de presentacion no cabe: se queda solo la tarjeta */
@media (max-width: 940px) {
  .acceso--vitrina { grid-template-columns: 1fr; padding: 0; }
  .vitrina__lienzo { display: none; }
  .vitrina__lado { min-height: 100vh; min-height: 100dvh; padding: 26px 16px; }
}

@media (max-width: 520px) {
  .vitrina__lado { justify-content: flex-start; padding: 22px 14px; }
  .vitrina__tarjeta { padding: 26px 20px 24px; border-radius: 16px; }
  .vitrina__bienvenida { font-size: 20px; }
  .vitrina__insignia { width: 58px; height: 58px; }
  .vitrina__insignia svg { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .acceso--vitrina *, .acceso--vitrina *::before, .acceso--vitrina *::after {
    transition: none !important; animation: none !important;
  }
}

/* Conversacion con el servidor de correo, en Configuracion > Correo.
   Se muestra tal cual la devuelve el servidor: si la ultima linea empieza
   con 250, el mensaje se acepto. */
.smtp-dialogo {
  margin: 0 0 8px; padding: 11px 13px; max-height: 260px; overflow: auto;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-md);
  font-family: var(--mono, ui-monospace, 'Consolas', monospace);
  font-size: 11.5px; line-height: 1.6; color: var(--tinta-2);
  white-space: pre-wrap; word-break: break-word;
}

/* =====================================================================
   Asistente de alta
   ---------------------------------------------------------------------
   Va sin barra lateral: quien esta configurando su empresa no tiene
   todavia nada que hacer en el resto del sistema. Un carril a la
   izquierda con los pasos, la pantalla del paso a la derecha, y un pie
   con atras/continuar siempre en el mismo sitio.
   ===================================================================== */
.alta {
  min-height: 100vh; min-height: 100dvh;
  background: var(--lienzo);
  display: flex; flex-direction: column;
}

.alta__cima {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 26px;
  background: var(--superficie); border-bottom: 1px solid var(--borde);
}
.alta__cima-der { display: flex; align-items: center; gap: 14px; }
.alta__cima-der form { margin: 0; }
.alta__marca { display: flex; align-items: center; gap: 11px; }
.alta__logo {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--marca); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 17px;
}
.alta__marca-nombre { font-weight: 650; font-size: 15px; line-height: 1.2; }
.alta__marca-sub { font-size: 11.5px; color: var(--tinta-3); }

.alta__progreso { height: 3px; background: var(--superficie-3); }
.alta__progreso-valor {
  height: 100%; background: var(--marca);
  transition: width 320ms cubic-bezier(.4, 0, .2, 1);
}

.alta__cuerpo {
  flex: 1; width: 100%; max-width: 1120px; margin: 0 auto;
  display: grid; grid-template-columns: 268px minmax(0, 1fr);
  gap: 30px; padding: 30px 26px 56px; align-items: start;
}

/* ---------- El carril de pasos ---------- */
.alta__rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 30px; }
.alta__rail-item {
  display: grid; grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px; padding: 10px 12px; border-radius: var(--r-md);
  opacity: .55; transition: var(--transicion);
}
.alta__rail-item.es-actual { opacity: 1; background: var(--superficie); box-shadow: var(--sombra-sm); }
.alta__rail-item.es-hecho { opacity: .9; }
.alta__rail-punto {
  width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 650;
  background: var(--superficie-3); color: var(--tinta-3);
  border: 1px solid var(--borde);
}
.alta__rail-item.es-actual .alta__rail-punto { background: var(--marca); color: #fff; border-color: var(--marca); }
.alta__rail-item.es-hecho .alta__rail-punto { background: var(--exito-suave); color: var(--exito); border-color: transparent; }
.alta__rail-punto svg { width: 14px; height: 14px; }
.alta__rail-titulo { font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.alta__rail-detalle { font-size: 11.5px; color: var(--tinta-3); line-height: 1.4; margin-top: 2px; }

/* ---------- La pantalla del paso ---------- */
.alta__panel {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-lg); box-shadow: var(--sombra);
  padding: 30px 32px 26px;
}
.alta__titular { margin-bottom: 22px; }
.alta__titular h1 { font-size: 23px; line-height: 1.25; margin-bottom: 7px; }
.alta__titular p { color: var(--tinta-2); font-size: 14px; line-height: 1.55; max-width: 58ch; }
.alta__forma { margin-top: 4px; }

.alta__pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--borde);
}
.alta__pie-der { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.alta__pie form { margin: 0; }

/* ---------- Paso 1: negocio o contador ---------- */
.alta__opciones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.alta__opcion input { position: absolute; opacity: 0; width: 0; height: 0; }
.alta__opcion-caja {
  display: flex; flex-direction: column; gap: 8px; height: 100%;
  padding: 22px 20px; cursor: pointer;
  border: 2px solid var(--borde); border-radius: var(--r-lg);
  background: var(--superficie-2); transition: var(--transicion);
}
.alta__opcion-caja:hover { border-color: var(--borde-fuerte); }
.alta__opcion input:checked + .alta__opcion-caja {
  border-color: var(--marca); background: var(--marca-suave);
}
.alta__opcion input:focus-visible + .alta__opcion-caja { outline: 2px solid var(--marca); outline-offset: 2px; }
.alta__opcion-icono {
  width: 42px; height: 42px; border-radius: 11px; margin-bottom: 4px;
  display: grid; place-items: center;
  background: var(--superficie); border: 1px solid var(--borde); color: var(--marca);
}
.alta__opcion-icono svg { width: 22px; height: 22px; }
.alta__opcion-titulo { font-weight: 650; font-size: 15px; }
.alta__opcion-texto { font-size: 13px; color: var(--tinta-2); line-height: 1.55; }

/* ---------- Paso 2: subir el PDF ---------- */
.alta__ayuda {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 20px;
}
.alta__ayuda-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; font-size: 13.5px; }
.alta__ayuda-cabecera svg { width: 17px; height: 17px; color: var(--info); flex: none; }
.alta__pasos-mini { margin: 0 0 13px 18px; padding: 0; color: var(--tinta-2); font-size: 13px; line-height: 1.85; }

.alta__soltar {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 34px 22px; cursor: pointer; text-align: center;
  border: 2px dashed var(--borde-fuerte); border-radius: var(--r-lg);
  background: var(--superficie-2); transition: var(--transicion);
}
.alta__soltar:hover, .alta__soltar.es-encima { border-color: var(--marca); background: var(--marca-suave); }
.alta__soltar-icono { color: var(--tinta-3); }
.alta__soltar-icono svg { width: 38px; height: 38px; }
.alta__soltar-titulo { font-weight: 600; font-size: 14.5px; }
.alta__soltar-texto { font-size: 12.5px; color: var(--tinta-3); }
.alta__soltar-lista { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.alta__chip {
  font-size: 11.5px; padding: 4px 9px; border-radius: 999px;
  background: var(--marca-suave); color: var(--marca); border: 1px solid var(--marca-borde);
}

/* ---------- Paso 3: lo leido del certificado ---------- */
.alta__leido {
  border: 1px solid var(--exito); background: var(--exito-suave);
  border-radius: var(--r-md); padding: 13px 16px; margin-bottom: 20px;
}
.alta__leido-marca {
  display: flex; align-items: center; gap: 7px; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 650; color: var(--exito);
}
.alta__leido-marca svg { width: 15px; height: 15px; }
.alta__leido-datos { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 12.5px; color: var(--tinta-2); }
.alta__leido-datos b { font-weight: 600; color: var(--tinta-3); margin-right: 4px; }
.alta__interruptor { padding: 14px 0 4px; }
.alta__mas { margin-top: 8px; }
.alta__mas summary {
  cursor: pointer; font-size: 13px; color: var(--tinta-2);
  padding: 9px 0; user-select: none;
}
.alta__mas[open] summary { margin-bottom: 8px; }

/* ---------- Paso 4: el rubro ---------- */
.alta__sugerencia {
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid var(--marca-borde); background: var(--marca-suave);
  border-radius: var(--r-md); padding: 15px 17px; margin-bottom: 18px;
}
.alta__sugerencia-icono { color: var(--marca); flex: none; }
.alta__sugerencia-icono svg { width: 22px; height: 22px; }
.alta__sugerencia-titulo { font-size: 14.5px; margin-bottom: 4px; }
.alta__sugerencia-texto { font-size: 12.5px; color: var(--tinta-2); line-height: 1.6; }

.alta__buscador { position: relative; margin-bottom: 16px; }
.alta__buscador svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 17px; height: 17px; color: var(--tinta-3); pointer-events: none;
}
.alta__buscador .entrada { padding-left: 38px; }

.alta__rubros { max-height: 430px; overflow-y: auto; padding-right: 4px; }
.alta__grupo + .alta__grupo { margin-top: 18px; }
.alta__grupo-titulo {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 8px;
}
.alta__grupo-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.alta__rubro {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 11px 13px; text-align: left; cursor: pointer;
  border: 1.5px solid var(--borde); border-radius: var(--r-md);
  background: var(--superficie); color: inherit; font: inherit;
  transition: var(--transicion);
}
.alta__rubro:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.alta__rubro.es-elegido { border-color: var(--marca); background: var(--marca-suave); }
.alta__rubro-nombre { font-size: 13.5px; font-weight: 550; line-height: 1.35; }
.alta__rubro-marcas { display: flex; flex-wrap: wrap; gap: 4px; }
.alta__marca {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: var(--superficie-3); color: var(--tinta-3); font-weight: 600;
}
.alta__marca--modulo { background: var(--info-suave); color: var(--info); }

/* ---------- Pasos con filas repetidas ---------- */
.alta__filas { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.alta__fila {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) minmax(0, 1.4fr) auto;
  gap: 10px; align-items: end;
  padding: 12px 13px; border: 1px solid var(--borde);
  border-radius: var(--r-md); background: var(--superficie-2);
}
.alta__fila--zona { grid-template-columns: minmax(0, 1fr) 150px auto; }
.alta__fila-estado { display: flex; align-items: center; gap: 8px; padding-bottom: 7px; }

/* ---------- Paso final: el resumen ---------- */
.alta__resumen { display: flex; flex-direction: column; gap: 8px; }
.alta__resumen-fila {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
  gap: 13px; align-items: center;
  padding: 13px 15px; border: 1px solid var(--borde);
  border-radius: var(--r-md); background: var(--superficie-2);
}
.alta__resumen-fila.es-falta { border-color: var(--alerta); background: var(--alerta-suave); }
.alta__resumen-punto {
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--exito-suave); color: var(--exito);
}
.alta__resumen-fila.es-falta .alta__resumen-punto { background: var(--superficie); color: var(--alerta); }
.alta__resumen-punto svg { width: 16px; height: 16px; }
.alta__resumen-titulo { font-size: 13.5px; font-weight: 600; }
.alta__resumen-detalle { font-size: 12.5px; color: var(--tinta-2); margin-top: 2px; }

.alta__plan {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 18px; padding: 16px 18px;
  border: 1px solid var(--marca-borde); background: var(--marca-suave);
  border-radius: var(--r-md);
}
.alta__plan-etiqueta {
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--marca);
}
.alta__plan-nombre { font-size: 16px; font-weight: 650; margin: 2px 0; }
.alta__plan-precio { font-size: 21px; font-weight: 700; }
.alta__plan-precio span { font-size: 12.5px; font-weight: 500; color: var(--tinta-3); }

/* La empresa en la que se esta trabajando, en Mis empresas. */
.alta__empresa--actual { border-color: var(--marca); box-shadow: 0 0 0 1px var(--marca-borde); }

/* Aviso del panel cuando el alta quedo a medias. */
.alta__aviso {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: 18px; padding: 15px 18px;
  border: 1px solid var(--marca-borde); background: var(--marca-suave);
  border-radius: var(--r-md);
}
.alta__aviso-titulo { font-size: 14.5px; font-weight: 650; margin-bottom: 3px; }
.alta__aviso-texto { font-size: 13px; color: var(--tinta-2); line-height: 1.5; }

@media (max-width: 900px) {
  .alta__cuerpo { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px 14px 44px; }
  /* En movil el carril se vuelve una tira horizontal y solo el paso
     actual muestra su titulo: los detalles ocupan mas de lo que aportan
     en una pantalla pequena. */
  .alta__rail { position: static; flex-direction: row; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
  .alta__rail-item { flex: none; grid-template-columns: 26px; padding: 8px; }
  .alta__rail-texto { display: none; }
  .alta__rail-item.es-actual { grid-template-columns: 26px minmax(0, 1fr); }
  .alta__rail-item.es-actual .alta__rail-texto { display: block; }
  .alta__rail-item.es-actual .alta__rail-detalle { display: none; }
  .alta__panel { padding: 22px 18px 20px; }
  .alta__opciones { grid-template-columns: minmax(0, 1fr); }
  .alta__fila, .alta__fila--zona { grid-template-columns: minmax(0, 1fr); }
  .alta__pie { flex-direction: column-reverse; align-items: stretch; }
  .alta__pie-der { flex-direction: column-reverse; align-items: stretch; }
  .alta__pie .boton { justify-content: center; }
}

/* Enlace al alta autoservicio, en la pantalla de acceso. Solo aparece si
   el operador abrio el registro al publico. */
.acceso__crear {
  margin-top: 18px; text-align: center;
  font-size: 13px; color: var(--tinta-3);
}
.acceso__crear a { color: var(--marca); font-weight: 600; }

/* Subtitulo dentro de un paso que agrupa dos cosas (firma y correo). */
.alta__seccion {
  font-size: 15px; font-weight: 650; margin: 0 0 4px;
  padding-bottom: 8px; border-bottom: 1px solid var(--borde);
}
.alta__fila--tecnico { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 160px auto; }

@media (max-width: 900px) {
  .alta__fila--tecnico { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   Boton de instalar la aplicacion.

   Flota abajo a la derecha y solo existe cuando el navegador ofrece
   instalarla. Se aparta del borde en telefonos con barra inferior.
   ================================================================== */
.instalar-app {
  position: fixed; right: 20px; z-index: 55;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; border-radius: 999px; border: 0;
  background: var(--marca); color: #fff; cursor: pointer;
  font: inherit; font-size: 14.5px; font-weight: 600;
  box-shadow: 0 12px 28px -8px rgba(29, 78, 216, .6);
  transition: transform var(--transicion), background var(--transicion);
}
.instalar-app:hover { background: var(--marca-hover); transform: translateY(-2px); }
.instalar-app:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.instalar-app svg { width: 18px; height: 18px; }
.instalar-app[hidden] { display: none; }

@media (max-width: 620px) {
  .instalar-app span { display: none; }
  .instalar-app { padding: 14px; border-radius: 50%; }
}

/* =====================================================================
   Aspecto: contraste y modo oscuro
   ===================================================================== */

/* El tema de la app manda sobre los colores del sistema.
   Sin esto, el texto de los <button> sin color propio salia con el color
   'buttontext' del NAVEGADOR, no el de la app. Con Windows en oscuro y la
   app en claro, el nombre del producto en el punto de venta se dibujaba
   BLANCO SOBRE BLANCO. Medido: contraste 1.18:1, o sea invisible.
   Tambien deja las barras de scroll y los desplegables del color correcto. */
:root { color-scheme: light; }
[data-tema="oscuro"] { color-scheme: dark; }

/* Y ademas se fija el color a mano, para no depender de eso nunca mas. */
.pos__producto { color: var(--tinta); }
.pos__producto-nombre { color: var(--tinta); }

/* ---------- Tarjeta de producto ---------- */

/* La franja de las iniciales ocupaba 62 de 167 px: el 37% de la tarjeta
   para dos letras. Se recorta y la informacion util gana sitio. */
.pos__producto-tapa { height: 50px; font-size: 19px; }

/* La marca de "sin stock" iba en rojo pleno. Con veinte productos casi
   todos en cero, la pantalla se volvia una pared de etiquetas rojas.
   Se deja en tono apagado: se ve, avisa, y no grita. */
.pos__producto-agotado--stock {
  background: var(--peligro-suave);
  color: var(--peligro);
  border: 1px solid currentColor;
}
/* Agotado: apagado y sin manos. El :hover que lo devolvia a opacidad 1
   decia "se puede pulsar" justo de lo que no se puede, que es la peor
   mentira que puede contar una interfaz. */
.pos__producto--agotado { opacity: .5; cursor: not-allowed; filter: saturate(.35); }
.pos__producto--agotado:hover { opacity: .5; border-color: var(--borde); box-shadow: none; transform: none; }
.pos__producto--agotado .pos__producto-precio { color: var(--tinta-3); }

/* ---------- Los mismos arreglos, en oscuro ---------- */
[data-tema="oscuro"] .pos__producto {
  /* La tarjeta (#111827) sobre el lienzo (#0a0f1c) daba 1.08:1: no se
     distinguia del fondo y todo el catalogo se veia plano. */
  background: var(--superficie-2);
  border-color: var(--borde-fuerte);
}
[data-tema="oscuro"] .pos__producto-tapa {
  /* En claro la franja es MAS OSCURA que la tarjeta, o sea hundida.
     En oscuro salia mas CLARA: se levantaba y el ojo se iba a la parte
     vacia de la tarjeta. Se invierte para que se hunda igual. */
  background: linear-gradient(135deg, var(--lienzo), #0d1524);
  color: var(--marca);
  border-bottom-color: var(--borde-fuerte);
}
[data-tema="oscuro"] .pos__producto:hover .pos__producto-tapa {
  background: linear-gradient(135deg, var(--marca-suave), var(--lienzo));
}

/* ---------- Logo de la barra lateral ---------- */

/* El logo es azul sobre transparente y la placa pintaba un degradado
   AZUL detras: azul sobre azul, contraste 1.71:1. Contraida la barra ese
   cuadrito era lo unico que quedaba de la marca y no se distinguia nada.
   Se le pone fondo blanco, que es donde el logo se lee (11.4:1).
   La regla toca solo al <img>: cuando no hay logo y se dibuja la inicial,
   el degradado de siempre se queda como estaba. */
.sidebar__logo img {
  background: #fff;
  padding: 3px;
}

/* Salvo cuando el logo ya esta hecho para este fondo. Entonces la placa
   blanca es justo lo que sobra: tapa la barra con un cuadrado blanco y
   deja el logo -que suele ser blanco- encima de blanco. Sin placa, y sin
   el degradado azul de la caja tampoco, que asomaria por las esquinas. */
.sidebar__logo--propio { background: none; box-shadow: none; }
.sidebar__logo--propio img { background: none; padding: 0; }

/* Contraida la barra mide 78 px y el logo se quedaba en 36. Cabe mas. */
body.sidebar-min .sidebar__logo { width: 42px; height: 42px; border-radius: 12px; }


/* =====================================================================
   Pantalla de espera para lo que tarda minutos
   ===================================================================== */

/* Pedirle al SRI un comprobante es una llamada a su servicio; pedirle
   dieciseis son dieciseis, una detras de otra. Sin esto la pantalla se
   queda quieta y nadie sabe si trabaja o si se colgo. */
.espera {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--lienzo) 82%, transparent);
  backdrop-filter: blur(3px);
  padding: 24px;
}

.espera__caja {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg, 14px);
  box-shadow: var(--sombra-lg);
  padding: 30px 32px;
  max-width: 460px; width: 100%;
  text-align: center;
}

.espera__aro {
  width: 46px; height: 46px; margin: 0 auto 18px;
  border: 3px solid var(--borde);
  border-top-color: var(--marca);
  border-radius: 50%;
  animation: espera-gira .9s linear infinite;
}

@keyframes espera-gira { to { transform: rotate(360deg); } }

.espera__titulo {
  font-size: 17px; font-weight: 650; letter-spacing: -.01em;
  margin-bottom: 6px; color: var(--tinta);
}

.espera__paso {
  font-size: 14px; color: var(--tinta-2);
  min-height: 40px; line-height: 1.5;
}

/* La barra solo aparece cuando se sabe cuantos son. Media barra
   inventada es peor que ninguna: promete un final que nadie midio. */
.espera__barra {
  width: 100%;
  height: 6px;
  margin: 14px 0 10px;
  border-radius: 999px;
  background: var(--borde);
  overflow: hidden;
}

.espera__barra > div {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--marca);
  transition: width .25s ease;
}

.espera__reloj {
  font-family: var(--fuente-mono);
  font-size: 12.5px; color: var(--tinta-3);
  margin-top: 14px;
  font-variant-numeric: tabular-nums;
}

.espera__aviso {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--borde);
  font-size: 12.5px; color: var(--alerta);
}

@media (prefers-reduced-motion: reduce) {
  .espera__aro { animation-duration: 3s; }
}

/* ---------- Buscador de pantallas (Ctrl+K) ----------
   Cuarenta y ocho pantallas no se recorren abriendo ramas del menu. El
   menu se queda como esta; esto es un atajo por encima.
   Ni un color nuevo: todo sale de las variables de siempre, asi que el
   modo oscuro funciona sin escribir el tema dos veces. */
.topbar__buscar {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 10px 0 11px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  color: var(--tinta-3);
  font: inherit; font-size: 13px;
  cursor: pointer;
  transition: all var(--transicion);
  margin-right: 2px;
}
.topbar__buscar:hover { border-color: var(--borde-fuerte); color: var(--tinta); }
.topbar__buscar svg { width: 15px; height: 15px; flex-shrink: 0; }
.topbar__atajo,
.paleta kbd {
  font-family: inherit; font-size: 10.5px; font-weight: 600;
  padding: 2px 5px; border-radius: 5px;
  background: var(--superficie); border: 1px solid var(--borde);
  color: var(--tinta-3); white-space: nowrap;
}

/* En pantalla estrecha el boton se queda en el icono: la barra de
   arriba no puede empujar al titulo fuera de la vista. */
@media (max-width: 900px) {
  .topbar__buscar-texto, .topbar__atajo { display: none; }
  .topbar__buscar { padding: 0 9px; }
}

.paleta {
  position: fixed; inset: 0; z-index: 200;
  background: color-mix(in srgb, #0b1220 55%, transparent);
  backdrop-filter: blur(3px);
  display: flex; justify-content: center;
  padding: 12vh 20px 20px;
}
.paleta[hidden] { display: none; }

.paleta__caja {
  width: 100%; max-width: 620px;
  max-height: 70vh;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-lg);
  box-shadow: 0 24px 60px rgba(8, 15, 30, .28);
  display: flex; flex-direction: column;
  overflow: hidden;
  animation: paleta-entra .14s ease-out;
}
@keyframes paleta-entra {
  from { opacity: 0; transform: translateY(-8px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .paleta__caja { animation: none; }
}

.paleta__campo {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
.paleta__campo svg { width: 17px; height: 17px; color: var(--tinta-3); flex-shrink: 0; }
.paleta__campo input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 15px; color: var(--tinta);
}
.paleta__campo input::placeholder { color: var(--tinta-3); }

.paleta__lista { overflow-y: auto; padding: 6px; flex: 1; }

.paleta__grupo {
  font-size: 10.5px; font-weight: 650; letter-spacing: .06em;
  text-transform: uppercase; color: var(--tinta-3);
  padding: 10px 10px 5px;
}

.paleta__ir {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 10px;
  border: 0; border-radius: var(--r-sm);
  background: none; color: var(--tinta);
  font: inherit; font-size: 14px; text-align: left;
  text-decoration: none; cursor: pointer;
}
.paleta__ir:hover,
.paleta__ir[aria-selected="true"] {
  background: var(--marca-suave);
  color: var(--marca);
}
.paleta__ir-donde { margin-left: auto; font-size: 11.5px; color: var(--tinta-3); }
.paleta__ir[aria-selected="true"] .paleta__ir-donde { color: inherit; opacity: .75; }

.paleta__vacio {
  padding: 28px 16px; text-align: center;
  font-size: 13.5px; color: var(--tinta-3);
}

.paleta__pie {
  display: flex; gap: 16px; align-items: center;
  padding: 9px 16px;
  border-top: 1px solid var(--borde);
  font-size: 11.5px; color: var(--tinta-3);
  flex-shrink: 0;
}
.paleta__pie span { display: inline-flex; align-items: center; gap: 5px; }
@media (max-width: 560px) { .paleta__pie { display: none; } }

/* ---------- Campana de avisos ----------
   Los avisos estaban repartidos por el panel y quien no lo abria no se
   enteraba de nada. Aqui se ven desde cualquier pantalla. */
.campana { position: relative; }
.campana__boton { position: relative; }

.campana__cuenta {
  position: absolute; top: 1px; right: 0;
  min-width: 15px; height: 15px; padding: 0 4px;
  border-radius: 999px;
  background: var(--alerta); color: #fff;
  font-size: 9.5px; font-weight: 700; line-height: 15px;
  text-align: center;
  border: 1.5px solid var(--superficie);
}
/* Rojo SOLO cuando algo para el trabajo. Si todo fuera rojo, el rojo
   dejaria de querer decir nada. */
.campana__cuenta--peligro { background: var(--peligro); }

.campana__panel {
  position: absolute; top: calc(100% + 8px); right: 0;
  width: min(360px, calc(100vw - 32px));
  max-height: 65vh; overflow-y: auto;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(8, 15, 30, .2);
  z-index: 60;
  padding: 5px;
}
.campana__panel[hidden] { display: none; }

.campana__cabecera {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 10px 8px;
  font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-3);
}

.campana__aviso {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  color: var(--tinta); text-decoration: none;
}
.campana__aviso:hover { background: var(--superficie-2); }
.campana__aviso strong { display: block; font-size: 13.5px; font-weight: 570; }
.campana__aviso small { display: block; font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }

.campana__punto {
  width: 7px; height: 7px; border-radius: 50%;
  margin-top: 6px; flex-shrink: 0;
  background: var(--info);
}
.campana__aviso--alerta  .campana__punto { background: var(--alerta); }
.campana__aviso--peligro .campana__punto { background: var(--peligro); }

/* ---------- Barra del plan ----------
   Cuantos comprobantes lleva del mes y cuando vence, arriba del panel.
   Enterarse de que se acabo el cupo el dia que no se puede facturar es
   enterarse tarde. */
.plan-barra {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: 13px 18px;
  margin-bottom: 18px;
}
.plan-barra__nombre { font-size: 14px; font-weight: 620; }
.plan-barra__dato { font-size: 11.5px; color: var(--tinta-3); }
.plan-barra__dato strong { display: block; font-size: 13px; color: var(--tinta); font-weight: 570; }

.plan-barra__uso { flex: 1; min-width: 170px; }
.plan-barra__cifras {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11.5px; color: var(--tinta-3); margin-bottom: 5px;
}
.plan-barra__cifras b { color: var(--tinta); font-weight: 600; }
.plan-barra__riel {
  height: 6px; border-radius: 999px;
  background: var(--borde); overflow: hidden;
}
.plan-barra__riel > div {
  height: 100%; border-radius: 999px;
  background: var(--marca);
  transition: width var(--transicion);
}
.plan-barra--cerca .plan-barra__riel > div { background: var(--alerta); }
.plan-barra--lleno .plan-barra__riel > div { background: var(--peligro); }

@media (max-width: 700px) {
  .plan-barra { gap: 12px; }
  .plan-barra__uso { min-width: 100%; order: 9; }
}

/* ---------- Boton "Modulos" ----------
   Recoge lo que salio del lateral: contabilidad, nomina, bancos y
   activos. Cada tarjeta dice para que sirve, que es lo que el menu
   nunca pudo decir -ahi solo cabia el nombre-. */
.modulos { position: relative; }

.modulos__panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  width: min(330px, calc(100vw - 32px));
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-md);
  box-shadow: 0 16px 40px rgba(8, 15, 30, .2);
  z-index: 60; padding: 5px;
}
.modulos__panel[hidden] { display: none; }

.modulos__cabecera {
  padding: 9px 10px 8px;
  font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tinta-3);
}

.modulos__uno {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 9px 10px; border-radius: var(--r-sm);
  color: var(--tinta); text-decoration: none;
}
.modulos__uno:hover { background: var(--superficie-2); }
.modulos__uno strong { display: block; font-size: 13.5px; font-weight: 570; }
.modulos__uno small { display: block; font-size: 11.5px; color: var(--tinta-3); margin-top: 2px; }

.modulos__icono {
  width: 32px; height: 32px; border-radius: var(--r-sm);
  display: grid; place-items: center; flex-shrink: 0;
  background: var(--marca-suave); color: var(--marca);
}
.modulos__icono svg { width: 17px; height: 17px; }

@media (max-width: 900px) { .modulos__panel { left: auto; right: 0; } }

/* El mismo panel, pero colgado del avatar: ahi el borde de referencia es
   el derecho, no el izquierdo, o se saldria de la pantalla. */
.modulos__panel--der { left: auto; right: 0; width: min(300px, calc(100vw - 32px)); }

.cuenta__quien {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 10px 11px; margin-bottom: 4px;
  border-bottom: 1px solid var(--borde);
}
.cuenta__quien > span { min-width: 0; }
.cuenta__quien strong {
  display: block; font-size: 13.5px; font-weight: 600; color: var(--tinta);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cuenta__quien small {
  display: block; font-size: 11.5px; color: var(--tinta-3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* ---------- El estado de la conexion ----------
   Nace escondido y lo ensena el navegador: el servidor, por definicion,
   solo puede contestar cuando hay conexion, asi que no puede pintar el
   estado. */
.conexion {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 11px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta-3); font-family: inherit;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; white-space: nowrap;
  transition: background var(--transicion), color var(--transicion), border-color var(--transicion);
}
.conexion__punto { font-size: 13px; line-height: 1; color: var(--exito, #1a7f4b); }
.conexion:hover { background: var(--superficie-2); color: var(--tinta); }

/* Sin conexion NO se pinta en rojo de error: no esta roto nada, es un
   estado en el que se puede seguir trabajando. El rojo es para lo que
   hay que arreglar. */
.conexion--caida {
  border-color: var(--alerta); background: var(--alerta-suave); color: var(--alerta);
}
.conexion--caida .conexion__punto { color: var(--alerta); }

@media (max-width: 700px) { .conexion__texto { display: none; } }

/* ---------- Aviso de version nueva ----------
   Discreto y abajo: no es un error, y no puede tapar lo que se esta
   haciendo. Se actualiza cuando quiera quien esta delante. */
.aviso-version {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  z-index: 90; display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 999px;
  background: var(--sidebar); color: #e8edf7;
  box-shadow: 0 12px 32px rgba(8, 15, 30, .3);
  font-size: 13px; font-weight: 550;
}
.aviso-version[hidden] { display: none; }
.aviso-version__x {
  border: 0; background: none; color: #9aa6bd; cursor: pointer;
  font-size: 19px; line-height: 1; padding: 0 4px;
}
.aviso-version__x:hover { color: #fff; }

/* ---------- La bandera del idioma ----------
   Va DIBUJADA y no como emoji: Windows no trae los glifos de bandera y
   del emoji solo salian sus dos letras -"ES", "GB"-. Se ve en el panel
   de idiomas y en el boton de la barra. */
.bandera {
  display: inline-grid; place-items: center; flex-shrink: 0;
  border-radius: 50%; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16);
  background: var(--superficie-2);
}
.bandera svg,
.bandera img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bandera__letras {
  font-size: 9px; font-weight: 700; letter-spacing: .02em;
  color: var(--tinta-3); line-height: 1;
}

/* El boton redondo de la barra: solo la bandera, sin recuadro. */
.icono-boton--bandera { padding: 0; }
.icono-boton--bandera .bandera { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }

.modulos__panel--idiomas { width: min(230px, calc(100vw - 32px)); }
.modulos__panel--idiomas form { margin: 0; }

.idioma__uno {
  width: 100%; border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left;
  align-items: center;
}
.idioma__uno small {
  display: block; font-size: 11px; color: var(--tinta-3);
  letter-spacing: .06em; margin-top: 1px;
}
.idioma__uno.activo { background: var(--marca-suave); }
.idioma__uno.activo strong { color: var(--marca); }

.cuenta__salir { margin-top: 4px; border-top: 1px solid var(--borde); border-radius: 0 0 var(--r-sm) var(--r-sm); }
.cuenta__salir .modulos__icono { background: var(--peligro-suave); color: var(--peligro); }

/* Suelto en la barra sigue estando: al terminar el dia es lo que se
   busca, y esconderlo dos clics adentro seria un paso atras. */
@media (max-width: 700px) { .icono-boton--salir { display: none; } }

/* ---------- Submenu del modulo ----------
   Doce pantallas de contabilidad no caben en el menu lateral sin hacerlo
   interminable, pero tampoco pueden quedar sin puerta. Aqui estan las
   hermanas de la pantalla en la que uno esta.

   Se llama .submenu y no .pestanas porque ese nombre ya estaba cogido
   por otro componente de esta misma hoja. */
.submenu {
  display: flex; gap: 2px;
  padding: 0 26px;
  background: var(--superficie);
  border-bottom: 1px solid var(--borde);
  overflow-x: auto;
  scrollbar-width: thin;
  position: sticky; top: var(--alto-topbar); z-index: 30;
}
.submenu::-webkit-scrollbar { height: 3px; }
.submenu::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 3px; }

.submenu__una {
  padding: 11px 13px 10px;
  font-size: 13px; font-weight: 520;
  color: var(--tinta-3);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}
.submenu__una:hover { color: var(--tinta); text-decoration: none; }
.submenu__una.activa {
  color: var(--marca);
  border-bottom-color: var(--marca);
  font-weight: 600;
}

@media (max-width: 720px) { .submenu { padding: 0 16px; } }

/* El numero solo mientras haya algo sin mirar. Una campana que siempre
   grita no avisa de nada: a la tercera vez el ojo la ignora. */
.campana--al-dia .campana__cuenta { display: none; }

/* Los que esta persona todavia no ha mirado, con fondo suave. Asi se
   distinguen de los que ya vio sin tener que acordarse. */
.campana__aviso--nuevo { background: var(--marca-suave); }
.campana__aviso--nuevo:hover { background: var(--marca-suave); }
.campana__aviso--alerta.campana__aviso--nuevo  { background: var(--alerta-suave); }
.campana__aviso--peligro.campana__aviso--nuevo { background: var(--peligro-suave); }
.campana__aviso--nuevo strong::after {
  content: ''; display: inline-block; vertical-align: 2px;
  width: 5px; height: 5px; border-radius: 50%; margin-left: 6px;
  background: currentColor; opacity: .55;
}

/* ---------- Codigo de incidente ----------
   El codigo tiene que poder dictarse por telefono y copiarse a mano, asi
   que va grande, monoespaciado y con separacion entre letras. Si hay que
   entrecerrar los ojos para leerlo, no sirve. */
.incidente {
  text-align: center;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-lg);
  padding: 18px 20px;
}
.incidente__que { font-size: 12.5px; color: var(--tinta-3); margin-bottom: 10px; }

.incidente__codigo {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transicion);
}
.incidente__codigo:hover { border-color: var(--marca); }
.incidente__codigo svg { width: 15px; height: 15px; color: var(--tinta-3); flex-shrink: 0; }

.codigo-incidente {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 20px; font-weight: 700; letter-spacing: .14em;
  color: var(--tinta);
  user-select: all;
}

.incidente__codigo.copiado { border-color: var(--exito); }
.incidente__codigo.copiado svg { color: var(--exito); }
.incidente__codigo.copiado::after {
  content: 'copiado';
  font-size: 11px; color: var(--exito); font-weight: 600;
}

.incidente__cuando { font-size: 11.5px; color: var(--tinta-3); margin-top: 9px; }

/* ---------- Reportar un problema ----------
   Reutiliza la caja del buscador: es el mismo gesto -algo que se abre
   encima de lo que hay- y dos cajas distintas para lo mismo se ven como
   dos sistemas distintos. */
.soporte__cabecera {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--borde);
}
.soporte__cabecera strong { display: block; font-size: 15.5px; font-weight: 620; }
.soporte__cabecera small { display: block; font-size: 12px; color: var(--tinta-3); margin-top: 3px; }

.soporte__cuerpo { padding: 16px 18px; overflow-y: auto; }

/* Lo que se manda solo. Se ensena a proposito: nadie tiene que sentir
   que se manda algo a sus espaldas. */
.soporte__auto {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  margin-top: 4px;
}
.soporte__auto-titulo {
  font-size: 11px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tinta-3); margin-bottom: 7px;
}
.soporte__auto ul { margin: 0; padding-left: 17px; }
.soporte__auto li { font-size: 12.5px; color: var(--tinta-2); margin-bottom: 3px; }
.soporte__auto strong { color: var(--tinta); font-weight: 600; }

.soporte__pie {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 13px 18px;
  border-top: 1px solid var(--borde);
}

/* El codigo del reporte, para dictarlo. Mismas reglas que el de
   incidente: grande y espaciado. */
.soporte__gracias { padding: 30px 24px; text-align: center; }
.soporte__gracias-codigo {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 24px; font-weight: 700; letter-spacing: .14em;
  color: var(--marca); margin: 14px 0 6px; user-select: all;
}

/* ---------- El chat que guia ----------
   Panel lateral, no modal: el que pregunta "como hago una nota de
   credito" necesita leer la respuesta MIENTRAS la hace. Un modal que
   tapa la pantalla y se cierra al primer clic no sirve para eso. */
.guia {
  position: fixed; right: 0; top: 0; bottom: 0;
  width: min(400px, 100vw);
  z-index: 150;
  background: var(--superficie);
  border-left: 1px solid var(--borde-fuerte);
  box-shadow: -12px 0 40px rgba(8, 15, 30, .14);
  display: flex; flex-direction: column;
  animation: guia-entra .18s ease-out;
}
.guia[hidden] { display: none; }
@keyframes guia-entra { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .guia { animation: none; } }

.guia__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--borde);
  flex-shrink: 0;
}
.guia__quien { display: flex; align-items: center; gap: 10px; min-width: 0; }
.guia__quien strong { display: block; font-size: 14.5px; font-weight: 620; }
.guia__quien small { display: block; font-size: 11.5px; color: var(--tinta-3); }
.guia__avatar {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--marca-suave); color: var(--marca);
}
.guia__avatar svg { width: 19px; height: 19px; }

.guia__hilo { flex: 1; overflow-y: auto; padding: 16px; }

.guia__msg { margin-bottom: 14px; max-width: 88%; }
.guia__msg--yo { margin-left: auto; }

/* La cara de quien contesta.
   Se puso porque en una conversacion larga las dos columnas de burbujas
   se parecen demasiado y hay que fijarse en de que lado esta cada una
   para saber quien dijo que. Con el logo se ve de un golpe. */
.guia__msg--el { display: grid; grid-template-columns: 26px 1fr; gap: 8px; align-items: start; }
.guia__msg--el > .guia__burbuja,
.guia__msg--el > .guia__ir,
.guia__msg--el > .guia__aqui { grid-column: 2; }

.guia__cara {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; overflow: hidden;
  background: var(--marca-suave); color: var(--marca);
  border: 1px solid var(--marca-borde); margin-top: 2px;
}
.guia__cara img { width: 100%; height: 100%; object-fit: contain; padding: 3px; }
.guia__cara svg { width: 15px; height: 15px; }

/* Cuando el destino que propone la guia es la pantalla en la que ya se
   esta, no se ofrece un boton: se dice y ya. Un boton que no lleva a
   ninguna parte hace dudar de todo lo demas que dice. */
.guia__aqui {
  display: inline-block; margin-top: 7px;
  font-size: 12.5px; color: var(--tinta-3);
}
.guia__burbuja {
  padding: 10px 13px; border-radius: 14px;
  font-size: 14px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
}
.guia__msg--el .guia__burbuja {
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-bottom-left-radius: 5px;
}
.guia__msg--yo .guia__burbuja {
  background: var(--marca); color: #fff;
  border-bottom-right-radius: 5px;
}

/* El boton de "ir a": es lo que convierte una respuesta en una accion. */
.guia__ir {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 8px; padding: 7px 12px;
  background: var(--superficie); border: 1px solid var(--marca);
  border-radius: var(--r-sm);
  color: var(--marca); text-decoration: none;
  font-size: 13px; font-weight: 570;
}
.guia__ir:hover { background: var(--marca-suave); }
.guia__ir svg { width: 14px; height: 14px; }

.guia__vacio { padding: 8px 2px; }
.guia__vacio p { font-size: 13.5px; color: var(--tinta-3); margin: 0 0 12px; }
.guia__ejemplo {
  display: block; width: 100%; text-align: left;
  padding: 9px 12px; margin-bottom: 6px;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  font: inherit; font-size: 13px; color: var(--tinta);
  cursor: pointer;
}
.guia__ejemplo:hover { border-color: var(--marca); color: var(--marca); }

.guia__forma {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 14px;
  border-top: 1px solid var(--borde);
  flex-shrink: 0;
}
.guia__forma .entrada { flex: 1; }
.guia__forma .boton svg { width: 15px; height: 15px; }

.guia__pensando { display: flex; gap: 4px; padding: 4px 2px; }
.guia__pensando span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--tinta-3);
  animation: guia-late 1.1s infinite ease-in-out;
}
.guia__pensando span:nth-child(2) { animation-delay: .16s; }
.guia__pensando span:nth-child(3) { animation-delay: .32s; }
@keyframes guia-late { 0%, 70%, 100% { opacity: .25; } 35% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .guia__pensando span { animation: none; opacity: .5; } }

/* En pantalla estrecha ocupa todo: media pantalla de chat en un telefono
   no deja ver ni el chat ni el sistema. */
@media (max-width: 560px) { .guia { width: 100vw; border-left: 0; } }

/* Donde vive la conversacion. Va escrito porque si no, el usuario se
   queda con la duda de si esto se acumula en alguna parte. */
.guia__nota {
  padding: 0 14px 11px;
  font-size: 11px; color: var(--tinta-3); text-align: center;
  flex-shrink: 0;
}

/* ---------- El menu que se abre al pasar por encima ----------
   Contraido es un riel de iconos. Al pasar el raton se abre FLOTANDO
   sobre el contenido: no lo empuja, asi que no descoloca lo que se
   estaba leyendo. Antes, para ver un nombre habia que abrir la barra
   entera y todo se movia — por eso nadie la contraia. */

/* El pin va EN LA FILA, no flotando encima.
   Dos veces me ha mordido el mismo absolute: primero se colgaba de la
   barra entera y aparecia un punto azul suelto junto a Inventario;
   arreglado eso, con un nombre largo se montaba sobre el texto. Un
   elemento absoluto no reserva sitio, asi que siempre acaba pisando algo
   cuando el contenido de al lado crece. En la fila, no puede.
   El margin-left: auto lo empuja al borde; el min-width: 0 del nombre es
   lo que deja que el texto se recorte en vez de empujar al pin fuera. */
.sidebar__marca { position: relative; }

.sidebar__fijar {
  margin-left: auto; flex-shrink: 0;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: none; color: rgba(255, 255, 255, .45);
  cursor: pointer; padding: 0;
  transition: color var(--transicion), background var(--transicion);
}
.sidebar__fijar:hover { color: #fff; background: rgba(255, 255, 255, .12); }
.sidebar__fijar svg { width: 17px; height: 17px; }

/* Fijada: el punto se pinta con el color de marca, para que se vea de un
   vistazo que la barra esta clavada y no es que se quedo abierta sola. */
body:not(.sidebar-min) .sidebar__fijar { color: var(--marca); }

/* Contraida no cabe: el pin se va y manda el boton de contraer, que es
   el que la vuelve a abrir. */
body.sidebar-min .sidebar__fijar { display: none; }

/* ---- Lo que abre el hover ---- */
@media (hover: hover) and (pointer: fine) {
  /* Se abre y se cierra con una CLASE, no con :hover.

     Con :hover no habia forma de que todo cambiara a la vez. El ancho se
     puede animar y retrasar; "position: absolute" de los rotulos, no:
     salta en seco. Al poner el retraso solo en el ancho quedaba medio
     segundo de barra ancha y muda, con el contenido debajo. Peor que el
     problema que venia a resolver.

     Con una clase, el retraso lo lleva el JS -espera antes de quitarla-
     y entonces el ancho y los rotulos se mueven juntos. Nunca hay un
     estado a medias. */
  body.sidebar-min .sidebar {
    transition: width .18s ease;
    z-index: 120;
  }

  /* Al pasar por encima recupera su ancho, PERO el contenido no se mueve:
     .principal se queda con el margen del riel. La barra flota encima. */
  body.sidebar-min .sidebar.asomada { width: var(--ancho-sidebar); }

  body.sidebar-min .sidebar.asomada .sidebar__nombre,
  body.sidebar-min .sidebar.asomada .nav__titulo,
  body.sidebar-min .sidebar.asomada .nav__badge,
  body.sidebar-min .sidebar.asomada .sidebar__quien > span:not(.sidebar__avatar),
  body.sidebar-min .sidebar.asomada .sidebar__salir span,
  body.sidebar-min .sidebar.asomada .sidebar__ambiente span:not(.punto),
  body.sidebar-min .sidebar.asomada .sidebar__ambiente strong {
    opacity: 1; width: auto; height: auto; overflow: visible; pointer-events: auto;
  }

  body.sidebar-min .sidebar.asomada .sidebar__marca {
    flex-direction: row; justify-content: flex-start; align-items: center;
    height: var(--alto-topbar); gap: 11px; padding: 0 18px;
  }
  body.sidebar-min .sidebar.asomada .sidebar__contraer {
    position: static; width: 30px; height: 30px; border-radius: 9px;
    background: none; margin-left: auto;
  }
  body.sidebar-min .sidebar.asomada .sidebar__contraer svg { width: 17px; height: 17px; }
  /* Como arriba: en fila el nombre vuelve a ocupar su alto. */
  body.sidebar-min .sidebar.asomada .sidebar__marca .sidebar__nombre { height: auto; }

  /* Los nombres del menu.
     ATENCION AL DESHACER: contraida, el rotulo NO se esconde, se
     convierte en un globito flotante FUERA de la barra -position
     absolute, left: 100% + 12px, con su fondo y su sombra-. Devolverle
     solo la opacidad no sirve de nada: sigue siendo un globo colocado
     donde ya no toca. Hay que devolverlo a texto normal dentro del
     enlace, propiedad por propiedad.
     Esto se me paso la primera vez y dejo la barra ancha con los nombres
     invisibles: se ensanchaba y no se leia nada. */
  body.sidebar-min .sidebar.asomada .nav__enlace > span:not(.nav__badge) {
    position: static; transform: none;
    background: none; box-shadow: none; padding: 0;
    border-radius: 0; font-size: 13.5px; font-weight: 500;
    opacity: 1; pointer-events: auto; z-index: auto;
    white-space: nowrap;
  }

  /* Y el enlace vuelve a alinearse a la izquierda: centrado es como se
     colocan los iconos solos, no un icono con su nombre al lado. */
  body.sidebar-min .sidebar.asomada .nav__enlace { justify-content: flex-start; padding: 0 12px; }
  body.sidebar-min .sidebar.asomada .sidebar__quien { justify-content: flex-start; padding: 4px 14px 10px; }
  body.sidebar-min .sidebar.asomada .sidebar__ambiente { justify-content: flex-start; padding: 9px 14px; }
  body.sidebar-min .sidebar.asomada .sidebar__salir { gap: 10px; }

  /* La flecha de los grupos, y el submenu que contraido sale flotando. */
  body.sidebar-min .sidebar.asomada .nav__flecha { display: block; opacity: 1; }
  body.sidebar-min .sidebar.asomada .nav__subenlace { margin-left: 26px; opacity: 1; }
  body.sidebar-min .sidebar.asomada .nav__subenlace::before { display: block; }
  body.sidebar-min .sidebar.asomada .nav__subenlace.activo::after { display: block; }

  /* El mismo caso que los rotulos: contraido, el submenu de un grupo es
     un panel que flota al costado. Abierta la barra tiene que volver a
     ser una lista dentro, o se abriria un panel sobre el contenido. */
  body.sidebar-min .sidebar.asomada .nav__rama .nav__sub {
    position: static; transform: none; z-index: auto;
    min-width: 0; padding: 0;
    background: none; border-radius: 0; box-shadow: none;
    opacity: 1; pointer-events: auto;
    /* Y vuelve a plegarse: contraido se le puso max-height none para que
       el panel flotante se viera entero. Sin devolverlo, al pasar el
       raton se abririan TODOS los grupos a la vez. */
    overflow: hidden; max-height: 0;
  }
  body.sidebar-min .sidebar.asomada .nav__rama.abierta .nav__sub { max-height: 520px; }
  body.sidebar-min .sidebar.asomada .nav__subenlace { opacity: 0; }
  body.sidebar-min .sidebar.asomada .nav__rama.abierta .nav__subenlace { opacity: 1; }

  /* Una sombra a la derecha mientras flota: sin ella parece que el texto
     esta escrito ENCIMA del contenido, no en una barra. */
  body.sidebar-min .sidebar.asomada { box-shadow: 6px 0 28px rgba(8, 15, 30, .28); }
}

/* El numerito rojo de un boton. Aqui SI va el numero y no un punto:
   uno sin mirar y ocho sin mirar no piden lo mismo. */
.pastilla-aviso {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  border-radius: 9px;
  background: var(--peligro); color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   PUNTOS DE RESTAURACION

   Antes era una tabla de nombres de archivo con fecha y un boton. Eso
   obliga a leer "actualizacion-20260828-173233.zip" y traducirlo a un
   momento en la cabeza, y a saberse de memoria si esa copia llevaba la
   base o no.

   Aqui manda el MOMENTO: "hace 12 min" primero y grande, el nombre del
   archivo al final y pequenio. Y cada punto dice sus dos partes, porque
   volver solo los archivos cuando tambien cambio la base deja el sistema
   en un estado que nadie probo nunca.
   ===================================================================== */
.puntos { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }

.puntos__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 2px;
}
.puntos__titulo { margin: 0; font-size: 16px; font-weight: 640; letter-spacing: -.01em; }
.puntos__sub {
  margin: 4px 0 0; max-width: 62ch;
  font-size: 12.5px; line-height: 1.5; color: var(--tinta-3);
}

.punto-r {
  display: grid; gap: 4px 18px; align-items: center;
  grid-template-columns: minmax(160px, 1.1fr) minmax(180px, 1.2fr) auto;
  grid-template-areas: "cuando que acciones" "archivo archivo acciones";
  padding: 13px 16px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.punto-r:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-sm); }

/* El ultimo lleva un filo de color: en una lista de fechas parecidas es
   lo unico que se distingue de un vistazo, y es al que se vuelve el 90%
   de las veces. */
.punto-r--ultimo { border-left: 3px solid var(--marca); }

.punto-r__cuando { grid-area: cuando; display: flex; flex-direction: column; gap: 1px; }
.punto-r__cuando strong { font-size: 14px; font-weight: 600; }
.punto-r__cuando span { font-size: 11.5px; color: var(--tinta-3); }
.punto-r__cuando .badge { align-self: flex-start; margin-top: 3px; }

.punto-r__que { grid-area: que; display: flex; flex-direction: column; gap: 3px; }
.punto-r__parte {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500;
}
.punto-r__parte svg { width: 14px; height: 14px; flex-shrink: 0; }
.punto-r__parte em { font-style: normal; color: var(--tinta-3); font-weight: 400; }
.punto-r__parte--si { color: var(--tinta-2); }
/* Lo que NO tiene se ve apagado y tachado en la palabra clave: decirlo
   con el mismo peso que lo que si tiene invita a contar con ello. */
.punto-r__parte--no { color: var(--tinta-3); opacity: .65; }
.punto-r__parte--no em { text-decoration: line-through; }

.punto-r__acciones { grid-area: acciones; display: flex; align-items: center; gap: 8px; }
.punto-r__forma { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.punto-r__base {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--tinta-2); cursor: pointer; user-select: none;
}
.punto-r__base input { cursor: pointer; }

.campo__control--mini { max-width: 118px; padding: 6px 9px; font-size: 12.5px; }

.punto-r__borrar { color: var(--tinta-3); }
.punto-r__borrar:hover { color: var(--peligro); background: color-mix(in srgb, var(--peligro) 10%, transparent); }
.punto-r__borrar svg { width: 15px; height: 15px; }

.punto-r__archivo {
  grid-area: archivo; font-size: 10.5px; color: var(--tinta-3); opacity: .7;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 900px) {
  .punto-r {
    grid-template-columns: 1fr;
    grid-template-areas: "cuando" "que" "acciones" "archivo";
    gap: 9px;
  }
  .punto-r__acciones { flex-wrap: wrap; }
}

/* =====================================================================
   EL PANEL

   Tres zonas y un orden que no es estetico: lo que exige respuesta, el
   pulso, y por donde seguir. Quien entra a las siete de la maniana tiene
   tres segundos de atencion, y en esos tres segundos tiene que saber que
   hacer PRIMERO -no cuanto vendio el mes pasado-.

   El tamanio significa algo: lo urgente ocupa el ancho entero y va
   arriba; lo informativo se reparte debajo. Si todo midiera igual, todo
   diria "mirame", que es lo mismo que no decir nada.
   ===================================================================== */

/* ---------- Zona 1: lo que exige respuesta ---------- */
.hoy { margin-bottom: 16px; }

.hoy__cabecera { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.hoy__titulo { margin: 0; font-size: 14px; font-weight: 650; letter-spacing: .01em; }
.hoy__cuenta {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  background: var(--peligro); color: #fff;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.hoy__lista { display: flex; flex-direction: column; gap: 8px; }

/* Nada pendiente cabe en una linea. Un "todo en orden" de doscientos
   pixeles es espacio robado a lo que si hay que mirar. */
.hoy--limpio {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--exito) 7%, var(--superficie));
  border: 1px solid color-mix(in srgb, var(--exito) 22%, transparent);
  color: var(--exito); font-size: 13px; font-weight: 500;
}
.hoy--limpio svg { width: 16px; height: 16px; flex-shrink: 0; }

.urge {
  display: grid; grid-template-columns: 3px 1fr auto;
  align-items: center; gap: 0 14px;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: 0; overflow: hidden;
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.urge:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-sm); }
.urge__marca { align-self: stretch; }
.urge--peligro .urge__marca { background: var(--peligro); }
.urge--alerta  .urge__marca { background: var(--alerta); }
.urge--info    .urge__marca { background: var(--marca); }

.urge__texto { padding: 12px 0; min-width: 0; }
.urge__que { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.urge__que strong { font-size: 14px; font-weight: 600; }
.urge__texto p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--tinta-3); }
.urge > .boton { margin-right: 14px; flex-shrink: 0; }

/* El nivel va escrito, no solo pintado: un daltonico tiene que poder
   distinguir lo urgente de lo informativo sin ver el color. */
.urge__nivel {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 5px;
}
.urge__nivel--peligro { background: color-mix(in srgb, var(--peligro) 12%, transparent); color: var(--peligro); }
.urge__nivel--alerta  { background: color-mix(in srgb, var(--alerta) 14%, transparent);  color: var(--alerta); }
.urge__nivel--info    { background: color-mix(in srgb, var(--marca) 11%, transparent);   color: var(--marca); }

/* ---------- Zona 2: el pulso ---------- */
.pulso {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.cifra {
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-md); padding: 15px 17px;
}
/* La de hoy manda: es la unica que cambia mientras se trabaja. */
.cifra--hoy { border-left: 3px solid var(--marca); }
.cifra--ojo { border-color: color-mix(in srgb, var(--peligro) 35%, var(--borde)); }

.cifra__etiqueta {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--tinta-3);
}
.cifra__valor {
  margin-top: 5px; font-size: 27px; font-weight: 650;
  letter-spacing: -.025em; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.cifra__pie { margin-top: 4px; font-size: 12px; color: var(--tinta-3); }

.delta { font-weight: 650; font-variant-numeric: tabular-nums; }
.delta--sube { color: var(--exito); }
.delta--baja { color: var(--peligro); }

/* ---------- La serie de 30 dias ---------- */
.serie { width: 100%; height: 132px; display: block; overflow: visible; }
.serie__guia { stroke: var(--borde); stroke-width: .35; vector-effect: non-scaling-stroke; }
.serie__area { fill: url(#serieRelleno); }
.serie__linea {
  fill: none; stroke: var(--marca); stroke-width: 2;
  stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.serie__pie {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 8px; font-size: 11px; color: var(--tinta-3);
}

/* ---------- Los anillos de la cartera ---------- */
.anillo-fila {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 0; border-bottom: 1px solid var(--borde);
}
.anillo-fila:last-child { border-bottom: 0; padding-bottom: 0; }
.anillo-fila__texto { flex: 1; min-width: 0; }
.anillo-fila__rotulo { font-size: 12px; color: var(--tinta-3); }
.anillo-fila__valor { font-size: 17px; font-weight: 650; font-variant-numeric: tabular-nums; }
.anillo-fila__pie { font-size: 11.5px; color: var(--tinta-3); margin-top: 1px; }

/* Anillo fino, no un velocimetro. r=16 da 2*pi*16 = 100.53, que se
   redondea a 100: asi el dasharray ES el porcentaje y no hay que
   calcular nada al pintarlo. */
.anillo { width: 44px; height: 44px; flex-shrink: 0; transform: rotate(-90deg); }
.anillo circle { fill: none; stroke-width: 4; }
.anillo__fondo { stroke: var(--borde); }
.anillo__valor { stroke-linecap: round; }
.anillo__valor--exito   { stroke: var(--exito); }
.anillo__valor--alerta  { stroke: var(--alerta); }
.anillo__valor--peligro { stroke: var(--peligro); }

/* ---------- Zona 3: por donde seguir ---------- */
.salto {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--borde); background: var(--superficie);
  color: inherit; text-decoration: none;
  transition: border-color var(--transicion), background var(--transicion);
}
.salto:hover { border-color: var(--borde-fuerte); background: var(--superficie-2); }
.salto strong { display: block; font-size: 13.5px; font-weight: 600; }
.salto span { display: block; font-size: 12px; color: var(--tinta-3); margin-top: 1px; }
.salto svg { width: 16px; height: 16px; color: var(--tinta-3); flex-shrink: 0; }
.salto--peligro { border-left: 3px solid var(--peligro); }
.salto--alerta  { border-left: 3px solid var(--alerta); }
.salto--exito   { border-left: 3px solid var(--exito); }

/* El estado, con color Y con forma: si no se distinguen el verde y el
   rojo, el simbolo sigue diciendo cual es cual. */
.marca-estado {
  display: inline-flex; align-items: center; justify-content: center;
  width: 19px; height: 19px; border-radius: 50%;
  font-size: 11px; font-weight: 700; line-height: 1;
}
.marca-estado--exito   { background: color-mix(in srgb, var(--exito) 14%, transparent);   color: var(--exito); }
.marca-estado--alerta  { background: color-mix(in srgb, var(--alerta) 16%, transparent);  color: var(--alerta); }
.marca-estado--peligro { background: color-mix(in srgb, var(--peligro) 13%, transparent); color: var(--peligro); }

.vacio--chico { padding: 26px 16px; }

/* Que quepa lo importante sin desplazarse en 1366x768, que es el portatil
   real de una oficina contable, no el monitor del que disenia. */
@media (max-width: 1200px) {
  .pulso { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
  .cifra__valor { font-size: 24px; }
}
@media (max-width: 900px) {
  .urge { grid-template-columns: 3px 1fr; }
  .urge > .boton { grid-column: 2; margin: 0 14px 12px 0; justify-self: start; }
  .serie { height: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .urge, .salto, .cifra { transition: none; }
}

/* =====================================================================
   VENTAS EN ESPERA · el riel del punto de venta

   "Se me quedo la cartera": el cliente se va a buscarla, hay cola
   detras, y la venta a medias no se puede perder.

   Va entre el catalogo y el ticket porque asi se ve de un golpe cuantas
   hay, de cuanto y DESDE CUANDO. Lo ultimo es lo que mas se usa: la que
   lleva veinte minutos esperando ya no vuelve.
   ===================================================================== */
.pos { grid-template-columns: 1fr 106px 400px; }

/* El riel cuesta 106 px de ancho, y en un portatil de 1366 eso era una
   columna entera de productos menos: de cinco pasaba a cuatro.
   Se recupera bajando el ancho minimo de la ficha de 148 a 132 px, que
   es lo que hace falta para que quepan las cinco otra vez. La ficha se
   estrecha 16 px y a cambio no se pierde una columna: el cajero busca en
   la rejilla con el cliente delante, y una columna menos son cuatro
   productos menos a la vista. */
.pos__rejilla { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }

.pos__espera {
  display: flex; flex-direction: column; gap: 7px;
  min-height: 0; overflow-y: auto; padding-bottom: 2px;
}

.pos__espera-titulo {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--tinta-3);
  padding: 2px 2px 3px; flex-shrink: 0;
}

.pos__espera-lista { display: flex; flex-direction: column; gap: 7px; }

.pos__espera-vacio {
  padding: 14px 8px; text-align: center;
  font-size: 11px; line-height: 1.4; color: var(--tinta-3);
  border: 1px dashed var(--borde); border-radius: var(--r-sm);
}

.pos__espera-venta { position: relative; }

.pos__espera-tomar {
  display: grid; gap: 1px; width: 100%;
  padding: 9px 8px; text-align: left; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-sm);
  transition: border-color var(--transicion), box-shadow var(--transicion);
}
.pos__espera-tomar:hover { border-color: var(--marca); box-shadow: var(--sombra-sm); }

.pos__espera-quien {
  font-size: 10px; color: var(--tinta-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos__espera-total {
  font-size: 15px; font-weight: 650; color: var(--tinta);
  font-variant-numeric: tabular-nums;
}
.pos__espera-pie, .pos__espera-cuando { font-size: 10.5px; color: var(--tinta-3); }

/* A los veinte minutos ese cliente ya no vuelve. Se marca para que la
   venta se cierre o se tire, y no se quede ahi ocupando sitio y cabeza. */
.pos__espera-venta--vieja .pos__espera-tomar { border-left: 3px solid var(--alerta); }
.pos__espera-venta--vieja .pos__espera-cuando { color: var(--alerta); font-weight: 600; }

/* Descartar: pequenio y arriba a la derecha. Tirar una venta no puede
   ser tan facil como retomarla. */
.pos__espera-tirar {
  position: absolute; top: 3px; right: 3px;
  width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: none; color: var(--tinta-3);
  font-size: 15px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--transicion), color var(--transicion);
}
.pos__espera-venta:hover .pos__espera-tirar,
.pos__espera-tirar:focus-visible { opacity: 1; }
.pos__espera-tirar:hover { color: var(--peligro); }

.pos__espera-nueva {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 6px; cursor: pointer; flex-shrink: 0;
  background: none; border: 1px dashed var(--borde-fuerte);
  border-radius: var(--r-sm); color: var(--marca);
  font-size: 11.5px; font-weight: 600;
  transition: background var(--transicion), border-color var(--transicion);
}
.pos__espera-nueva:hover {
  background: color-mix(in srgb, var(--marca) 7%, transparent);
  border-color: var(--marca);
}
.pos__espera-nueva svg { width: 15px; height: 15px; }
.pos__espera-nueva kbd {
  font-family: var(--mono, monospace); font-size: 9.5px;
  padding: 1px 4px; border: 1px solid var(--borde); border-radius: 4px;
  color: var(--tinta-3); font-weight: 400;
}

/* Estrecho, el riel se pone en horizontal encima del ticket: en vertical
   dejaria el catalogo sin sitio para nada. */
@media (max-width: 1100px) {
  .pos { grid-template-columns: 1fr 400px; }
  .pos__espera {
    grid-column: 1 / -1; grid-row: 1;
    flex-direction: row; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; gap: 8px;
  }
  .pos__espera-titulo { display: none; }
  .pos__espera-lista { flex-direction: row; }
  .pos__espera-tomar { min-width: 108px; }
  .pos__espera-nueva { flex-direction: row; min-width: 120px; }
}

@media (prefers-reduced-motion: reduce) {
  .pos__espera-tomar, .pos__espera-tirar, .pos__espera-nueva { transition: none; }
}

/* =====================================================================
   LA CANTIDAD, EN LA PROPIA LINEA

   Antes cualquier toque en la linea abria un modal, y subir de 1 a 3
   unidades eran cuatro gestos: tocar, escribir, aceptar, cerrar. Con
   cola detras, eso es lo que hace que el cajero teclee mal.

   El modal sigue existiendo -descuento por linea, cambiar el precio,
   quitarla- pero se llega tocando el NOMBRE, que es lo que se toca
   cuando se quiere entrar a algo.
   ===================================================================== */
.pos__linea { align-items: center; }

/* El nombre es un boton, pero tiene que leerse como texto: si pareciera
   un boton, competiria con el + y el - por la atencion. */
.pos__linea-nombre {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pos__linea-nombre:hover { color: var(--marca); text-decoration: underline; }
.pos__linea-nombre:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; border-radius: 3px; }

.pos__cant {
  display: flex; align-items: center; gap: 2px; flex-shrink: 0;
  background: var(--superficie-2); border: 1px solid var(--borde);
  border-radius: 999px; padding: 2px;
}

/* 30 px de lado: es el minimo con el que un dedo acierta sin mirar, que
   es como se usa un mostrador. */
.pos__cant-boton {
  width: 30px; height: 30px; border: 0; border-radius: 50%;
  background: var(--superficie); color: var(--tinta-2);
  font-size: 17px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background var(--transicion), color var(--transicion);
}
.pos__cant-boton:hover { background: var(--marca); color: #fff; }
.pos__cant-boton:active { transform: scale(.93); }

.pos__cant-valor {
  min-width: 26px; text-align: center;
  font-size: 14px; font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* =====================================================================
   LAS FORMAS DE PAGO, EN BOTONES

   Cobrar en efectivo con gente detras es el 90% de lo que pasa en un
   mostrador, y en una lista desplegable eso son tres gestos: abrir,
   buscar entre ocho, elegir. Aqui es uno.
   ===================================================================== */
.pos-pagos {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px;
  margin-top: 4px;
}

.pos-pago {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 13px 8px; cursor: pointer;
  background: var(--superficie); border: 1.5px solid var(--borde);
  border-radius: var(--r-md);
  font-size: 12.5px; font-weight: 550; color: var(--tinta-2);
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.pos-pago svg { width: 21px; height: 21px; }
.pos-pago:hover { border-color: var(--borde-fuerte); }

/* La elegida se marca con borde Y con fondo, no solo con color: en un
   mostrador con luz de tubo el matiz no se distingue. */
.pos-pago--puesta {
  border-color: var(--marca); color: var(--marca);
  background: color-mix(in srgb, var(--marca) 8%, transparent);
}

.pos-pago--mas {
  grid-column: 1 / -1; flex-direction: row; padding: 9px;
  border-style: dashed; font-size: 12px; color: var(--tinta-3);
}
.pos-pago--mas:hover { color: var(--marca); border-color: var(--marca); }

@media (prefers-reduced-motion: reduce) {
  .pos__cant-boton, .pos-pago { transition: none; }
  .pos__cant-boton:active { transform: none; }
}

/* La X que quita un aviso de la vista.
   Discreta: aparece al pasar por encima, y no compite con "Resolver".
   Quitar no es la accion principal — la principal es hacerlo. */
.urge__x, .hoy__x {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 0; border-radius: 50%; background: none;
  color: var(--tinta-3); font-size: 17px; line-height: 1; cursor: pointer;
  opacity: 0; transition: opacity var(--transicion), color var(--transicion);
}
.urge { position: relative; }
.urge__x { margin-right: 10px; }
.hoy__x { margin-left: auto; }
.urge:hover .urge__x, .hoy--limpio:hover .hoy__x,
.urge__x:focus-visible, .hoy__x:focus-visible { opacity: 1; }
.urge__x:hover, .hoy__x:hover { color: var(--peligro); }

@media (prefers-reduced-motion: reduce) {
  .urge__x, .hoy__x { transition: none; opacity: 1; }
}


/* ===== NexoDigy · privacidad visual y salida de sesión ===== */
.nexo-context{position:fixed;z-index:999999;width:245px;padding:7px;background:rgba(15,23,42,.98);border:1px solid rgba(148,163,184,.22);border-radius:13px;box-shadow:0 22px 65px rgba(0,0,0,.34);backdrop-filter:blur(14px)}
.nexo-context[hidden]{display:none}.nexo-context button{width:100%;border:0;background:transparent;color:#e5edf7;display:grid;grid-template-columns:24px 1fr auto;gap:7px;align-items:center;text-align:left;padding:9px 10px;border-radius:8px;font:inherit;font-size:13px;cursor:pointer}.nexo-context button:hover{background:#1e293b}.nexo-context button>span{color:#60a5fa;text-align:center}.nexo-context kbd{font:500 10px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;color:#94a3b8;background:#111827;border:1px solid #334155;border-radius:4px;padding:1px 4px}.nexo-context>i{display:block;height:1px;background:#263449;margin:5px 4px}
.session-transition{position:fixed;inset:0;z-index:1000000;display:grid;place-content:center;justify-items:center;text-align:center;background:radial-gradient(circle at 50% 42%,#173f7a 0,#0d1b34 38%,#07101e 76%);color:#fff}.session-transition[hidden]{display:none}.session-transition__logo{font-size:2.2rem;font-weight:850;letter-spacing:-.06em}.session-transition__logo span{color:#38bdf8}.session-transition__ring{width:62px;height:62px;border-radius:50%;border:4px solid rgba(255,255,255,.15);border-top-color:#38bdf8;margin:24px 0 17px;animation:nexoSpin .75s linear infinite}.session-transition strong{font-size:1.1rem}.session-transition small{color:#a9bad0;margin-top:7px}.nexo--saliendo .app-shell,.nexo--saliendo .sidebar,.nexo--saliendo .topbar{animation:nexoLogout .55s ease forwards}@keyframes nexoSpin{to{transform:rotate(360deg)}}@keyframes nexoLogout{to{opacity:0;transform:scale(.992);filter:blur(2px)}}