:root {
  --bg: #f0f2ef;
  --card: #ffffff;
  --ink: #17262b;
  --muted: #64757b;
  --brand: #0d4f5a;
  --brand-light: #e7f1f2;
  --brand-2: #16808d;
  --accent: #d4952c;
  --accent-light: #fdf3e0;
  --ok: #217a41;
  --ok-light: #e4f4ea;
  --warn: #a97803;
  --warn-light: #fdf3da;
  --err: #bb3a2c;
  --err-light: #fcebe8;
  --line: #e2e7e7;
  --line-strong: #d3dbdb;
  --radius-sm: 9px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(16, 42, 48, 0.05);
  --shadow: 0 1px 2px rgba(16, 42, 48, 0.04), 0 10px 28px -14px rgba(16, 42, 48, 0.16);
  --shadow-lg: 0 2px 6px rgba(16, 42, 48, 0.05), 0 24px 60px -20px rgba(16, 42, 48, 0.22);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }

/* BTN-05: los botones y campos no heredan la letra por defecto (el navegador les pone Arial, o monospace en las fechas de
   Chrome). Con esto salen con la letra del panel. Va al inicio: cualquier regla de abajo que fije su propia letra la gana. */
button, input, select, textarea { font-family: inherit; }

/* ===== Iconos SVG (reemplazan emojis) ===== */
.ic { width: 18px; height: 18px; flex: 0 0 auto; display: inline-block; vertical-align: -0.18em; }
.ic-sm { width: 15px; height: 15px; }
.nav-item .ic { width: 19px; height: 19px; }
.modal h3 .ic { vertical-align: -0.15em; }

/* El atributo [hidden] DEBE ocultar siempre, aunque la clase tenga display:flex
   (si no, .loading y .alert quedan visibles para siempre = "siempre cargando"). */
[hidden] { display: none !important; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%; /* iPhone: que Safari no agrande texto al rotar */
}

/* ===== Layout ===== */
.app-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh; /* Safari iOS: 100vh queda detrás de la barra del navegador */
}

/* ===== Sidebar ===== */
.sidebar {
  width: 252px;
  background: linear-gradient(180deg, #093a43 0%, #0c4953 45%, #0d4f5a 100%);
  color: #fff;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.sidebar-header {
  padding: 24px 20px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.sidebar-header .brand-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-icon {
  width: 40px; height: 40px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  padding: 5px;
}
.brand-icon svg { width: 100%; height: 100%; display: block; }
.brand-icon img { width: 100%; height: 100%; display: block; object-fit: contain; border-radius: 50%; }
/* Insignia (42.6): el logo real dentro de un círculo blanco. Sidebar: 48 px · entrada: 88 px */
.sidebar-header .brand-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  padding: 3px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
}
.login-card .brand-icon {
  width: 88px; height: 88px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 8px 22px rgba(13, 79, 90, 0.28);
  padding: 5px;
}

.sidebar-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.sidebar-header .sub {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 3px;
  font-weight: 600;
}

.sidebar-nav {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}

.nav-group {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.38);
  padding: 16px 14px 6px;
  user-select: none;
}
.nav-group:first-child { padding-top: 8px; }

.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  border-radius: 9px;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-item .ic { opacity: 0.85; }

.nav-item:hover { background: rgba(255,255,255,0.08); color: #fff; }
.nav-item.active {
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px; bottom: 8px;
  width: 3.5px;
  border-radius: 0 4px 4px 0;
  background: #6fd08c;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex;
}

/* La tuerca: abre la ventana de Ajustes (cuenta + desbloqueo de funciones) */
.btn-ajustes {
  width: 42px; height: 42px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 11px;
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s var(--ease), transform 0.3s var(--ease), color 0.2s var(--ease);
}
.btn-ajustes .ic { width: 20px; height: 20px; }
.btn-ajustes:hover { background: rgba(255,255,255,0.16); color: #fff; transform: rotate(40deg); }

/* ===== Main content ===== */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}
/* SIS-10: con overflow:hidden, .main se vuelve el contenedor de desplazamiento del .topbar sticky; como .main no se desplaza
   (se mueve el documento), la barra se iba con la página. `clip` recorta igual pero no crea contenedor de desplazamiento:
   el sticky se calcula contra la ventana. Solo en pantallas anchas (≤ 880 px el encabezado es otro diseño, ver el final del
   archivo); los navegadores sin `overflow: clip` siguen con el `hidden` de arriba. */
@media (min-width: 881px) {
  .main { overflow: clip; }
}
/* REV-CSS-01: con la barra fija (SIS-10), un campo al que el panel lleva la vista con scrollIntoView (enfocar de cat-comun: errores
   de Clientes, Motivo de Quitar en Catálogo) o con Tab quedaba pegado al borde de arriba, justo debajo de la barra. `scroll-padding-top`
   en el documento (el contenedor que se desplaza) reserva ese borde: el alto de la barra (15 + 15 de relleno, 27 de línea del título y
   1 de borde = 58 px) más 14 px de aire. Solo donde la barra de verdad queda fija: mismo ancho que `overflow: clip` y, para los
   navegadores sin `overflow: clip` (la barra se va con la página), solo con @supports. En el celular no cambia. */
@media (min-width: 881px) {
  @supports (overflow: clip) {
    html { scroll-padding-top: 72px; }
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 28px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.015em;
}

.topbar-fecha {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page {
  flex: 1;
  padding: 22px 28px 34px;
  overflow-y: auto;
}

.page[hidden] { display: none; }

/* ===== Cards ===== */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 20px 22px;
}

.card + .card { margin-top: 16px; }

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.card-header h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-header h3 .ic { color: var(--brand-2); }

/* Títulos h4 dentro de tarjetas (CDA, pedidos, etc.) */
.card h4 { font-size: 13.5px; font-weight: 800; letter-spacing: -0.01em; }

/* ===== Tablas ===== */
.table-wrap {
  overflow-x: auto;
  margin: 0 -4px;
}

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

th, td {
  padding: 10px 13px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

th {
  font-weight: 800;
  color: var(--muted);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--card);
  border-bottom: 1.5px solid var(--line-strong);
  position: sticky;
  top: 0;
}

td { color: var(--ink); }
td.num, th.num { text-align: right; }

tbody tr { transition: background 0.12s var(--ease); }
tbody tr:hover td { background: #f6f9f9; }
tbody tr:active td { background: #eef3f3; }

/* ===== Badges (punto + etiqueta) ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid transparent;
}
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}

.badge-enviado { background: #e7f0fb; color: #1a5a9c; border-color: #cfe1f5; }
.badge-revisado { background: var(--ok-light); color: var(--ok); border-color: #c4e6cf; }
.badge-borrador { background: #eef0f1; color: var(--muted); border-color: #e0e4e6; }
.badge-faltante { background: var(--err-light); color: var(--err); border-color: #f4cfc8; }
.badge-sobrante { background: var(--warn-light); color: var(--warn); border-color: #efdcae; }
.badge-cuadrado { background: var(--ok-light); color: var(--ok); border-color: #c4e6cf; }

/* ===== Banner "Cierres de hoy" ===== */
.hoy-banner {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 14px;
  font-size: 14px;
  line-height: 1.5;
  border: 1px solid var(--line);
}
.hoy-banner.ok { background: var(--ok-light); border-color: #bfe2cb; color: #1d5e33; }
.hoy-banner.pend { background: var(--warn-light); border-color: #ecd9a4; color: #7a5b08; }

/* ===== Fichas del apartado "Cierres de hoy" (tiendas sin enviar) ===== */
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  margin: 0 6px 6px 0;
}
.chip.falta { background: var(--err-light); color: var(--err); border: 1px solid #f0c4bd; }
.chip.ok { background: var(--ok-light); color: var(--ok); border: 1px solid #bfe2cb; }

/* ===== Campo de umbral de alerta de faltante ===== */
.umbral-field {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted); font-weight: 600;
}
.umbral-field input {
  width: 68px; padding: 6px 8px; font-size: 13px;
  border: 2px solid var(--line); border-radius: var(--radius-sm);
}

/* ===== Fila de reporte con faltante por encima del umbral ===== */
tbody tr.fila-alerta td { background: #fdecea; }
tbody tr.fila-alerta:hover td { background: #fbe0dc; }
tbody tr.fila-alerta td:first-child { box-shadow: inset 3px 0 0 var(--err); }

/* ===== Sobrantes y faltantes del período =====
   El color va SOLO en la columna Total (el neto real): rojo si queda debiendo,
   verde si queda a favor. Las columnas de sobrantes/faltantes van en negro
   porque todo cierre tiene de los dos y pintarlas rojo no dice nada. */
#mensual-falt-card .value.faltante { color: var(--err); }
#mensual-falt-card .value.sobrante { color: var(--ok); }
#mensual-falt-card .value.cuadrado { color: var(--muted); }
#mensual-falt-card tfoot td { border-top: 2px solid var(--line); font-weight: 700; }

/* ===== Página Servidor ===== */
.srv-hero {
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  border: none;
}
.srv-hero-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.srv-hero-title { font-size: 16px; font-weight: 700; }
.srv-hero-pct { font-size: 40px; font-weight: 800; line-height: 1; }

.srv-bar { height: 14px; background: #eef2f3; border-radius: 999px; overflow: hidden; }
.srv-bar.big { height: 22px; background: rgba(255,255,255,0.25); margin: 16px 0 10px; box-shadow: inset 0 1px 3px rgba(0,0,0,0.2); }
.srv-bar-fill { height: 100%; width: 0; border-radius: 999px; background: #6fd08c; transition: width 0.5s var(--ease); }
.srv-hero .srv-bar-fill { background: linear-gradient(90deg, #7ee0a0, #4fc97e); }
.srv-bar-fill.alerta { background: linear-gradient(90deg, #ffd166, #f4b73e) !important; }
.srv-bar-fill.peligro { background: linear-gradient(90deg, #ff8a7a, #ff6b5a) !important; }
.srv-hero-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: 13px; font-weight: 600; }
.srv-hero-foot .muted { color: rgba(255,255,255,0.8); font-weight: 500; }

.srv-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.srv-stat {
  flex: 1 1 100px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 10px; text-align: center;
}
.srv-stat-ico { font-size: 20px; }
.srv-stat-num { font-size: 22px; font-weight: 800; color: var(--brand); margin-top: 2px; }
.srv-stat-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; margin-top: 2px; }

/* ===== Botones ===== */
.btn {
  font-size: 13px;
  font-weight: 700;
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-shadow: var(--shadow-sm);
  transition: all 0.15s var(--ease);
}

.btn:hover { background: #f4f7f7; border-color: #c0cccc; }
.btn:active { background: #ebf0f0; box-shadow: none; }

/* BTN-01 / REP-10: .btn es inline-flex y en una celda se alinea por la línea base. Un botón de solo ícono (la papelera) no
   tiene texto y su línea base cae abajo: quedaba unos 4 px más arriba que Ver y Aprobar. Con `middle` todos comparten el
   centro. Con el peso de .btn (:where no suma) y solo en celdas: un css/*.css posterior puede cambiarlo. */
:where(td, th) > .btn { vertical-align: middle; }

.btn.primary {
  background: linear-gradient(160deg, var(--brand-2), var(--brand));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 1px 2px rgba(13, 79, 90, 0.25), 0 6px 16px -6px rgba(13, 79, 90, 0.4);
}
.btn.primary:hover { filter: brightness(1.06); background: linear-gradient(160deg, var(--brand-2), var(--brand)); }
.btn.primary:active { filter: brightness(0.96); }

.btn.small { font-size: 11.5px; padding: 5px 11px; min-height: 29px; border-radius: 8px; }
.btn.ok { background: var(--ok); color: #fff; border-color: transparent; }
.btn.ok:hover { background: #1d6c39; }
.btn.danger { background: #fff; color: var(--err); border-color: #ecc8c1; }
.btn.danger:hover { background: var(--err); color: #fff; border-color: transparent; }
.btn.link { background: none; border: none; box-shadow: none; color: var(--brand-2); padding: 4px; min-height: auto; font-weight: 600; }
.btn.link:hover { color: var(--brand); background: none; }
.btn:disabled { opacity: 0.4; cursor: default; filter: none; transform: none; }

/* ===== Login ===== */
.screen-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px;
  background: linear-gradient(135deg, #0a3f48 0%, #126d7a 50%, #0d4f5a 100%);
  position: relative;
  overflow: hidden;
}
.screen-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% -20%, rgba(255,255,255,0.06) 0%, transparent 60%);
}

.login-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  position: relative;
  animation: slideUp 0.4s var(--ease);
}
@keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.login-card .brand-login {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.login-card h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--brand);
  letter-spacing: -0.02em;
}

.login-card .sub {
  color: var(--muted);
  margin: 4px 0 20px;
  font-size: 14px;
}

.form { display: flex; flex-direction: column; gap: 14px; }

.form label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-weight: 600;
  font-size: 13px;
  color: var(--ink);
}

.form input, .form select {
  font-size: 15px;
  padding: 11px 14px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.form input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px rgba(13, 79, 90, 0.08); }

/* BTN-02: esta regla es del botón «Entrar» del acceso. Estaba como «.form .btn» y agrandaba (43 px, letra de 15) los botones
   de todas las ventanas que usan la clase .form; ahora solo toca al formulario de acceso y las demás toman el .btn normal. */
#form-login .btn {
  margin-top: 4px;
  padding: 12px;
  font-size: 15px;
}

.screen-login[hidden] { display: none; }

/* ===== Login v43 (27/09/2026) =====
   Rediseño del login: logo al centro, nombre debajo, paisaje de fondo, tarjeta de vidrio
   y acceso rápido (Google y claves de acceso vinculados desde Ajustes).

   El candado. Todo lo de abajo cuelga de `html.login-v43`, que pone el script del <head>
   SOLO en los equipos del perfil Dev. Sin esa clase, estas dos reglas dejan el login
   idéntico al de la v42: lo nuevo no se ve y los textos de ayuda de los campos tampoco.
   Para estrenarlo con todos (cuando el dueño autorice la v43): que el script ponga la
   clase siempre, o quitar el prefijo `html.login-v43` y estas dos reglas. */
html:not(.login-v43) [data-login-v43] { display: none !important; }
html:not(.login-v43) #screen-login input::placeholder { color: transparent; }

html.login-v43 .screen-login {
  justify-content: flex-start;          /* el centrado lo da el margin:auto de la tarjeta: */
  flex-direction: column;               /* con justify-content:center, en un celular chico */
  align-items: center;                  /* la parte de arriba quedaba cortada sin scroll   */
  overflow: visible;
  padding: 32px 16px 24px;
  background: #0a343d;                  /* mientras el paisaje se pinta */
  color: #fff;
}
html.login-v43 .screen-login::before { content: none; }

.login-escena {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.login-escena svg { width: 100%; height: 100%; display: block; }

html.login-v43 .login-card {
  z-index: 1;
  margin: auto 0;
  max-width: 440px;
  padding: 32px 36px 26px;
  border-radius: 28px;
  text-align: center;
  color: #fff;
  /* Tinte medido para que el texto de ayuda de los campos pase 4.5:1 aun sobre la
     franja de bruma clara del paisaje (con 0.42 daba 2.6-3.1:1). */
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)) rgba(8, 42, 49, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
}
/* Sin vidrio esmerilado (navegadores viejos): tarjeta más opaca para que se lea igual. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html.login-v43 .login-card { background: rgba(8, 42, 49, 0.9); }
}

html.login-v43 .login-card .brand-login {
  flex-direction: column;
  gap: 12px;
  margin-bottom: 0;
}
html.login-v43 .login-card .brand-icon {
  width: 88px; height: 88px;
  border-radius: 50%;
  padding: 5px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html.login-v43 .login-card h1 { color: #fff; font-size: 27px; line-height: 1.15; }
html.login-v43 .login-card .sub { color: rgba(255, 255, 255, 0.8); margin: 4px 0 0; font-size: 14.5px; }

.login-saludo h2 {
  margin: 20px 0 6px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}
.login-saludo p {
  margin: 0 auto;
  max-width: 34ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.86);
}

/* --- Campos --- */
html.login-v43 #form-login { margin-top: 22px; gap: 12px; text-align: left; }
html.login-v43 #form-login label { position: relative; gap: 0; }
/* La etiqueta sigue en el HTML para los lectores de pantalla; a la vista queda el ícono
   y el texto de ayuda dentro del campo, como en el diseño. */
html.login-v43 .login-lbl {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
html.login-v43 #form-login input {
  height: 50px;
  padding: 0 16px 0 46px;
  font-size: 16px;                      /* con menos de 16 px el iPhone hace zoom al tocar el campo */
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 14px;
}
html.login-v43 #form-login input::placeholder { color: rgba(255, 255, 255, 0.85); }
html.login-v43 #form-login input:hover { border-color: rgba(255, 255, 255, 0.42); }
html.login-v43 #form-login input:focus {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.78);
  box-shadow: 0 0 0 4px rgba(110, 205, 212, 0.28);
}
/* Autocompletado del navegador: sin esto Chrome y Safari pintan el campo amarillo claro
   con letra oscura encima del vidrio. El color de relleno imita la tarjeta. */
html.login-v43 #form-login input:-webkit-autofill,
html.login-v43 #form-login input:-webkit-autofill:hover {
  -webkit-text-fill-color: #fff;
  caret-color: #fff;
  -webkit-box-shadow: 0 0 0 100px #1d5058 inset;
  box-shadow: 0 0 0 100px #1d5058 inset;
}
html.login-v43 #form-login input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 100px #1d5058 inset, 0 0 0 4px rgba(110, 205, 212, 0.28);
  box-shadow: 0 0 0 100px #1d5058 inset, 0 0 0 4px rgba(110, 205, 212, 0.28);
}
.login-ic {
  position: absolute;
  left: 15px; top: 50%;
  width: 20px; height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: rgba(255, 255, 255, 0.78);
  pointer-events: none;
}
html.login-v43 .login-campo { position: relative; }
html.login-v43 .login-campo input { padding-right: 52px; }
.login-ojo {
  position: absolute;
  right: 5px; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: rgba(255, 255, 255, 0.78);
  cursor: pointer;
  transition: color 0.15s var(--ease), background 0.15s var(--ease);
}
.login-ojo:hover { color: #fff; background: rgba(255, 255, 255, 0.1); }
.login-ojo:focus-visible { outline: 2px solid #fff; outline-offset: 0; }
.login-ojo svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.login-ojo .ojo-cerrado,
.login-ojo[aria-pressed="true"] .ojo-abierto { display: none; }
.login-ojo[aria-pressed="true"] .ojo-cerrado { display: block; }

/* --- Botón de entrar --- */
html.login-v43 #form-login .btn.primary {
  height: 50px;
  margin-top: 6px;
  gap: 10px;
  font-size: 15.5px;
  color: #fff;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(135deg, #16808b 0%, #0b5963 100%);
  box-shadow: 0 14px 30px -12px rgba(6, 110, 120, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
html.login-v43 #form-login .btn.primary:hover { filter: brightness(1.1); }
html.login-v43 #form-login .btn.primary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.login-flecha {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s var(--ease);
}
html.login-v43 #form-login .btn.primary:hover .login-flecha { transform: translateX(3px); }

html.login-v43 #screen-login .alert-error {
  margin: 0;
  color: #fff;
  background: rgba(196, 58, 44, 0.45);
  border: 1px solid rgba(255, 150, 130, 0.5);
}

/* --- Acceso rápido --- */
.login-sep {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 14px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.login-sep::before,
.login-sep::after { content: ''; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.24); }
.login-alt-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 14px;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.login-alt-btn[hidden] { display: none; }
.login-alt-btn + .login-alt-btn { margin-top: 10px; }
.login-alt-btn:hover { background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 255, 255, 0.5); }
.login-alt-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.login-alt-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
#btn-login-bio svg {
  fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
#btn-login-bio .bio-cara,
#btn-login-bio[data-bio="cara"] .bio-huella { display: none; }
#btn-login-bio[data-bio="cara"] .bio-cara { display: block; }
.login-alt-aviso {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
}
.login-alt-aviso[hidden] { display: none; }
.login-alt-nota { margin: 14px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, 0.8); }

/* Los métodos configurados también funcionan con el diseño anterior del login. */
html:not(.login-v43) .login-alt-btn { color: var(--ink); border-color: var(--line-strong); background: var(--card); }
html:not(.login-v43) .login-alt-btn:hover { background: var(--brand-light); }
html:not(.login-v43) .login-alt-btn:focus-visible { outline-color: var(--brand); }
html:not(.login-v43) .login-sep,
html:not(.login-v43) .login-alt-nota { color: var(--muted); }
html:not(.login-v43) .login-sep::before,
html:not(.login-v43) .login-sep::after { background: var(--line); }
#aj-acceso p { font-size: 13px; line-height: 1.5; }
#aj-acceso .ajustes-lbl { margin-top: 0; }
.aj-passkey-nombre { flex: 1; overflow-wrap: anywhere; }

/* --- Lema y pie --- */
.login-lema {
  position: absolute;
  top: 44px; right: 64px;
  z-index: 1;
  margin: 0;
  font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
  font-size: 36px;
  font-weight: 600;
  line-height: 0.95;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  transform: rotate(-7deg);
  pointer-events: none;
}
.login-lema svg { display: block; width: 110px; height: 14px; margin: 6px 0 0 12px; opacity: 0.8; }

.login-pie {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  color: rgba(255, 255, 255, 0.72);
}
.login-pie-marca { display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; }
.login-pie-marca strong { font-size: 13.5px; font-weight: 700; color: #fff; }
.login-pie-valores { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; }

/* Pantalla ancha: el pie se va a las esquinas y aparece el lema, como en el diseño. */
@media (min-width: 1100px) {
  .login-pie {
    position: absolute;
    left: 48px; right: 48px; bottom: 28px;
    width: auto; max-width: none;
    margin: 0;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
    pointer-events: none;   /* caja transparente a lo ancho: no puede robarle clics a la tarjeta */
  }
  .login-pie-marca::before {
    content: '';
    width: 26px; height: 1px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.6);
  }
}
@media (max-width: 1099px) {
  .login-lema { display: none; }
}
@media (max-width: 480px) {
  html.login-v43 .login-card { padding: 28px 20px 22px; border-radius: 24px; }
  html.login-v43 .screen-login { padding: 20px 16px; }
}
/* Pantallas bajas (laptop de 720 px con barras del navegador): se aprieta un poco. */
@media (max-height: 760px) {
  html.login-v43 .login-card { padding-top: 24px; padding-bottom: 20px; }
  html.login-v43 .login-card .brand-icon { width: 72px; height: 72px; border-radius: 50%; padding: 4px; }
  html.login-v43 .login-card .brand-login { gap: 10px; }
  .login-saludo h2 { margin-top: 14px; }
  html.login-v43 #form-login { margin-top: 16px; }
  .login-sep { margin: 14px 0 10px; }
  .login-alt-nota { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html.login-v43 .login-card { animation: none; }
  .login-flecha, .login-ojo, .login-alt-btn { transition: none; }
}

/* ===== Detalle cuadre ===== */
.cuadre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.cuadre-item {
  background: var(--bg);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  transition: transform 0.2s var(--ease);
}
.cuadre-item:hover { transform: translateY(-2px); }

.cuadre-item .label {
  font-size: 10px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.cuadre-item .value {
  font-size: 20px;
  font-weight: 800;
  margin-top: 4px;
  color: var(--ink);
}

.cuadre-item .value.faltante { color: var(--err); }
.cuadre-item .value.sobrante { color: var(--warn); }
.cuadre-item .value.cuadrado { color: var(--ok); }

/* ===== Nuevo pedido desde oficina (modal) =====
   Las mismas 4 medidas que ve el empleado: empaque (si el producto lo lleva) ·
   unidad base (lb/bot) · medias (1/2) · cuartas (1/4). Solo variables de color,
   para que el modo oscuro salga bien sin overrides aparte. */
.pn-list {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
  max-height: 46vh; overflow-y: auto;
}
.pn-item { background: var(--card); padding: 9px 12px 11px; }
.pn-nombre { font-weight: 600; font-size: 13.5px; margin-bottom: 6px; }
.pn-medidas { display: flex; gap: 7px; }
/* BTN-03: la casilla va siempre abajo. Si la etiqueta de una medida lleva una segunda línea (el empaque: huacal, marqueta),
   las cuatro casillas de la fila quedan en la misma línea y no más abajo la de esa medida. */
.pn-campo { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; }
.pn-lbl {
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Debajo del rótulo M+ va, chiquito, el nombre real del empaque del producto
   (huacal, marqueta, 10 botellas). El que no tiene, no muestra nada. */
.pn-hint { display: block; font-size: 8.5px; font-weight: 600; letter-spacing: 0; text-transform: lowercase; opacity: 0.8; }
.pn-hint:empty { display: none; }

.pn-input {
  width: 100%; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums;
  padding: 6px 4px; border: 2px solid var(--line); border-radius: 6px;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.pn-input:focus { outline: none; border-color: var(--brand); }
/* Casilla con algo escrito: se ve de un vistazo qué se está pidiendo. */
.pn-input.lleno { border-color: var(--brand); background: var(--brand-light); font-weight: 700; }

/* ===== Error / loading ===== */
.alert {
  padding: 12px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 13px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  animation: slideDown 0.3s var(--ease);
}
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

.alert-error { background: var(--err-light); color: var(--err); }
.alert-success { background: var(--ok-light); color: var(--ok); }
.alert-info { background: #e2edfa; color: #1a5a9c; }
.alert-warn { background: var(--warn-light); color: var(--warn); }

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--muted);
  font-size: 14px;
  gap: 12px;
}

.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

/* ===== Pantalla de carga (splash) — cubre el arranque y el reload =====
   Sale antes que nada para que NO parpadee el login en cada recarga. Usa las
   variables de tema, así que respeta claro/oscuro y nunca queda en blanco/negro seco. */
.screen-boot {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg);
  transition: opacity 0.4s var(--ease);
}
.boot-inner { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.boot-drop { width: 58px; height: 58px; color: var(--brand-2); animation: bootPulse 1.5s ease-in-out infinite; }
.boot-brand { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.boot-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--line-strong); border-top-color: var(--brand-2);
  animation: spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  margin-top: 4px;
}
.boot-msg { font-size: 13px; color: var(--muted); max-width: 260px; }
.boot-err-ic { width: 44px; height: 44px; color: var(--err); }
@keyframes bootPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.09); opacity: 0.82; } }

.empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--muted);
}

/* ===== Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fadeOverlay 0.2s var(--ease);
}
@keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }

.modal-overlay[hidden] { display: none; }

.modal {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 540px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: modalIn 0.25s var(--ease);
}
@keyframes modalIn { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.modal h3 { margin: 0 0 16px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }

.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
/* N3-03: los botones del pie de toda ventana miden lo mismo. Los de Colaboradores (`.pl-form .btn`, planta.css) llevan 9 px de relleno
   vertical y medían 36,5 px contra los 36 de las demás ventanas; con 8 px, como `.btn`, manda el mínimo de .btn en todas (36 px en escritorio,
   40 en tableta, 44 en celular). Los pequeños y los de enlace conservan el suyo. (Los «34 px» de Nuevo pedido, Crear reporte e Importar planilla
   eran la animación de apertura de la ventana, que va de 0,95 a 1: no era una diferencia real.) */
.modal-actions .btn:not(.small):not(.link) { padding-top: 8px; padding-bottom: 8px; }

/* Factura del pedido 42.5: la vista ocupa el modal sin salir de Pedidos. */
.modal-impresion { max-width: 1120px; padding: 20px; }
.impresion-pedido-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.impresion-pedido-cabecera h3 { margin: 0; }
#impresion-pedido-datos { margin: 10px 0; font-size: 13px; overflow-wrap: anywhere; }
#impresion-pedido-pendientes { font-size: 13px; line-height: 1.5; }
#impresion-pedido-pendientes ul { padding-left: 20px; }
.impresion-pedido-campos { display: grid; gap: 8px; margin: 12px 0; }
.impresion-pedido-campo { display: grid; grid-template-columns: minmax(160px, 1fr) minmax(140px, 220px); align-items: center; gap: 14px; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.impresion-pedido-campo small { display: block; color: var(--muted); margin-top: 4px; }
.impresion-pedido-dato { width: 100%; margin-top: 4px; }
.impresion-pedido-dato[aria-invalid="true"] { border-color: var(--err); }
@media (max-width: 560px) { .impresion-pedido-campo { grid-template-columns: 1fr; gap: 6px; } }
.impresion-pedido-frame { display: block; width: 100%; height: 58vh; height: 58dvh; min-height: 300px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.impresion-pedido-nota { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.modal-impresion .modal-actions { margin-top: 12px; padding-top: 12px; }

/* El menú nativo del navegador no debe imprimir el panel detrás del modal.
   La factura se imprime desde su propio documento, dentro del iframe. */
@media print {
  body.impresion-pedido-abierta > * { display: none !important; }
}

/* ===== Ventana de Ajustes (tuerca) ===== */
.ajustes-sec {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  margin-bottom: 12px;
  background: var(--sec-bg, #fbfcfc);
}
.aj-fila { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.aj-k { font-size: 12.5px; font-weight: 700; color: var(--muted); min-width: 86px; }

/* Interruptor (modo oscuro, herramientas del colaborador) */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch i {
  position: absolute; inset: 0; border-radius: 999px; background: #c9d4d4;
  transition: background 0.2s var(--ease); cursor: pointer;
}
.switch i::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.2s var(--ease);
}
.switch input:checked + i { background: var(--brand-2); }
.switch input:checked + i::after { transform: translateX(18px); }

/* Lista de toggles de herramientas (crear/editar colaborador) */
.np-herr { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.np-toggle {
  display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 600;
  border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; cursor: pointer;
  background: var(--card);
}

/* Fila de un perfil del panel en Ajustes */
.aj-perfil {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.aj-perfil:last-child { border-bottom: none; }
/* Columna «De confianza» (42.6): etiqueta a la izquierda, interruptor a la derecha */
.aj-confianza { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.aj-confianza input:disabled + i { opacity: .45; }
/* BTN-11: los botones de ícono (herramientas, resetear clave, activar/desactivar) miden 36 px de ancho sin importar el
   emoji (antes 36 y 33,1). La columna de los tres mide siempre 120 px (3 × 36 + 2 × 6 de separación) y los botones van
   pegados a la derecha: la fila que no tiene el de herramientas deja ese lugar libre y el interruptor «De confianza»
   queda en la misma columna en todas las filas. El marcado (js/app.js) lleva style="display:flex;gap:6px;flex-wrap:wrap". */
.aj-perfil .btn.ajp-clave, .aj-perfil .btn.ajp-toggle, .aj-perfil .btn.ajp-herr { width: 36px; padding: 0; justify-content: center; }
.aj-perfil > div:last-child { flex: none; width: 120px; justify-content: flex-end; margin-left: auto; }
.ajustes-lbl {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-bottom: 8px;
}
.ajustes-mail {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== Espacios de foto en "Crear reporte" (oficina) ===== */
.foto-oficina-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto-oficina {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fbfcfc;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
.foto-oficina:hover { border-color: var(--brand-2); background: #f4fafa; }
.foto-oficina .ic { width: 20px; height: 20px; color: var(--muted); }
.foto-oficina .fo-lbl { font-size: 11.5px; font-weight: 700; color: var(--ink); }
.foto-oficina .fo-estado { font-size: 10.5px; color: var(--muted); }
.foto-oficina.lista { border-style: solid; border-color: #9ed3ab; background: var(--ok-light); }
.foto-oficina.lista .ic, .foto-oficina.lista .fo-estado { color: var(--ok); }
@media (max-width: 480px) { .foto-oficina-grid { grid-template-columns: 1fr; } }

/* ===== Gastos list ===== */
.gasto-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}

.gasto-item .gasto-monto { font-weight: 700; color: var(--err); }
.gasto-item a { color: var(--brand-2); text-decoration: none; font-weight: 600; cursor: pointer; }
.gasto-item a:hover { text-decoration: underline; }

/* ===== Filtros (barra de herramientas) ===== */
.filtros {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 10px 14px;
}

.filtros select, .filtros input {
  font-size: 13px;
  padding: 8px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--card);
  color: var(--ink);
  min-height: 38px;
  transition: border-color 0.2s var(--ease);
}

/* BTN-06 / REP-14: los botones pequeños de la barra de filtros miden como los campos de la misma fila (38 px; 42 en el celular,
   ver más abajo). Antes eran de 29 junto a campos de 38. */
.filtros .btn.small { min-height: 38px; }

.filtros select:focus, .filtros input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(13, 79, 90, 0.08);
}

.filtros label { font-size: 13px; font-weight: 600; color: var(--muted); display: flex; align-items: center; gap: 6px; }

/* ===== Modal cuadre: tabs pequeños ===== */
.section-tabs {
  display: flex;
  gap: 4px;
  margin: 16px 0 12px;
}
.section-tab {
  font-size: 12px;
  font-weight: 700;
  padding: 8px 16px;
  border: none;
  background: var(--bg);
  border-radius: 20px;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.2s var(--ease);
}
.section-tab.active { background: var(--brand-light); color: var(--brand); }
.section-tab:hover { background: var(--brand-light); color: var(--brand); }

/* ===== Tablas dentro de modales ===== */
.modal table { font-size: 13px; }
.modal td { padding: 8px 12px; }

/* ===== CDA: pestañas (una por tienda + Crédito + Oficina) ===== */
.bwin {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.bwin-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 10px 12px 0;
  background: #e9eef0;
  border-bottom: 1px solid #c6d2d5;
}
.bwin-tabs {
  display: flex;
  gap: 4px;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bwin-tabs::-webkit-scrollbar { display: none; }
.bwin-tab {
  border: none;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: #46605d;
  background: rgba(255, 255, 255, 0.42);
  padding: 9px 18px 10px 14px;
  border-radius: 11px 11px 0 0;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.bwin-tab:hover { background: rgba(255, 255, 255, 0.65); }
.bwin-tab.active {
  background: var(--card);
  color: var(--brand);
  font-weight: 700;
  box-shadow: 0 -3px 10px rgba(13, 79, 90, 0.08);
}
.bwin-body { padding: 16px; background: #fbfbf8; }

/* Panel de cada pestaña. La hoja del día de cada tienda va en una sola columna
   (ver "CDA v41" al final del archivo); Crédito y Oficina siguen con tarjetas. */
.cda-pane[hidden] { display: none !important; }
.cda-pane > .cda-card { margin: 0 0 16px !important; }
.cda-hist { max-height: 480px; overflow-y: auto; }
.cda-toolbar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 10px 14px;
}
.cda-toolbar input {
  font-size: 13px; padding: 7px 10px; border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--card); color: var(--ink);
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .sidebar { width: 60px; overflow: hidden; }
  .sidebar-header { padding: 14px 6px 12px; }
  .sidebar-header .brand-top { justify-content: center; }
  .sidebar-header h1, .sidebar-header .sub, .nav-item span { display: none; }
  .nav-item { justify-content: center; padding: 12px; }
  .sidebar-footer { display: flex; justify-content: center; padding: 10px; }
  .sidebar-footer .btn.link { font-size: 10px; }
  .page { padding: 16px; }
  .topbar { padding: 12px 16px; }
  .topbar h2 { font-size: 17px; }
}

/* ===== Factura de entrada (oficina) en el modal de cuadre ===== */
.oficina-box {
  background: var(--accent-light);
  border: 1px solid #f0dcb4;
  border-radius: var(--radius);
  padding: 14px 16px;
  margin: 4px 0 16px;
}
.oficina-box h4 { margin: 0 0 10px; font-size: 14px; font-weight: 700; }
.cuadre-fotos { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cuadre-fotos figure { margin: 0; text-align: center; }
.cuadre-fotos img {
  height: 90px; width: auto; max-width: 140px;
  border-radius: 8px; border: 1px solid var(--line);
  object-fit: cover; background: #fff; cursor: pointer;
  transition: transform 0.15s var(--ease);
}
.cuadre-fotos img:hover { transform: scale(1.04); }
.cuadre-fotos figcaption { font-size: 10px; color: var(--muted); margin-top: 4px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 700; }
.cuadre-fotos .nofoto { font-size: 12px; color: var(--muted); font-style: italic; }
.cuadre-fotos a, .gasto-item a.gasto-recibo { cursor: zoom-in; }

/* ===== Visor de imagen (lightbox) ===== */
.img-overlay { z-index: 100; }
.img-viewer {
  position: relative;
  max-width: 94vw; max-height: 94vh;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.img-viewer img {
  max-width: 94vw; max-height: 84vh;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0,0,0,0.45);
  background: #fff;
}
.img-close {
  position: absolute; top: -16px; right: -16px;
  width: 42px; height: 42px; border-radius: 50%;
  border: none; background: #fff; color: var(--ink);
  font-size: 18px; font-weight: 700; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  z-index: 5; /* siempre por encima de la foto, aunque esté girada (transform) */
}
.img-close:hover { background: var(--err); color: #fff; }
.img-abrir { color: #fff; font-size: 13px; font-weight: 600; text-decoration: none; opacity: 0.92; }
.img-abrir:hover { text-decoration: underline; }
.oficina-inputs { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.oficina-inputs label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--ink); }
.oficina-inputs input { width: 150px; padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; font-size: 14px; background: #fff; }
.oficina-inputs input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(13,79,90,0.08); }
.oficina-inputs input:disabled { background: #f1efe9; color: var(--muted); }
.factura-detalle { margin: 4px 0 12px; }
.factura-detalle .fd-titulo { font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 6px; }
.fd-tabla { width: 100%; border-collapse: collapse; font-size: 12px; background: #fff; border-radius: 8px; overflow: hidden; }
.fd-tabla th, .fd-tabla td { padding: 5px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.fd-tabla th { background: #faf6ee; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.fd-tabla .num { text-align: right; }
.fd-tabla tfoot td { border-top: 2px solid var(--line); border-bottom: none; font-weight: 700; }

/* Rutas de envío de cierres */
.rutas-lista { display: flex; flex-direction: column; gap: 14px; }

/* ===== Optimización iPad (9.ª gen) — el apartado CDA se usará también en tablet ===== */
@media (max-width: 1120px) {
  .sidebar { width: 208px; padding-left: env(safe-area-inset-left); }
  .topbar, .page { padding-right: calc(28px + env(safe-area-inset-right)); }
  .oficina-inputs input { width: 130px; }
  input, select, textarea { font-size: 16px; } /* evita el auto-zoom de Safari iOS */
  /* Estas reglas base tienen más especificidad que la de arriba: repetirlas acá */
  .filtros select, .filtros input, .umbral-field input, .cda-toolbar input,
  .oficina-inputs input { font-size: 16px; }
  .btn { min-height: 40px; }
  /* N-EQ-04: con la letra de 16 px los campos de la barra de filtros miden 41 (39 el de búsqueda) y sus botones pequeños 38. En
     tableta todos a 41 px; en el celular mandan los 42 px de más abajo (min-height gana a height). */
  .filtros select, .filtros input:not([type="checkbox"]):not([type="radio"]), .filtros .btn.small { height: 41px; }
}
@media (max-width: 880px) {
  .app-layout { flex-direction: column; }
  .sidebar { width: 100%; height: auto; position: static; padding-left: 0; }
  /* iPhone horizontal (viewport-fit=cover): que el notch no tape nav ni contenido */
  .sidebar-header { padding: 12px calc(16px + env(safe-area-inset-right)) 6px calc(16px + env(safe-area-inset-left)); }
  .sidebar-header .sub { display: none; }
  .sidebar-nav {
    display: flex; flex-direction: row; overflow-x: auto;
    padding: 6px calc(10px + env(safe-area-inset-right)) 10px calc(10px + env(safe-area-inset-left));
    gap: 4px; -webkit-overflow-scrolling: touch;
  }
  .nav-group { display: none; }            /* en fila horizontal las secciones no caben */
  .nav-item.active::before { display: none; }
  .sidebar-nav .nav-item { white-space: nowrap; flex-shrink: 0; }
  .sidebar-footer { display: flex; flex-direction: row; gap: 8px; padding: 8px 14px; border-top: none; }
  .main { width: 100%; }
  .topbar { padding-left: calc(16px + env(safe-area-inset-left)); padding-right: calc(16px + env(safe-area-inset-right)); }
  /* El relleno de abajo lo da la barra inferior (al final de este archivo). */
  .page {
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
  .cuadre-fotos img, .cda-fotos img { width: 110px !important; height: 110px !important; }
  /* SIS-11: en Ajustes > Perfiles del panel la fila no cabe en una línea: el nombre se partía en 2 o 3 líneas y «De confianza»
     se montaba sobre el usuario. El texto ocupa su línea y el interruptor y los botones bajan a una segunda. El bloque de texto
     lleva style="flex:1;min-width:0" en js/app.js; solo !important lo gana desde la hoja. */
  .aj-perfil { flex-wrap: wrap; }
  .aj-perfil > div:first-child { flex: 1 1 100% !important; }
}

/* ===== Optimización iPhone (la jefa entra desde el celular) ===== */
@media (max-width: 600px) {
  /* Barra de navegación horizontal CON nombres (a 768px se ocultan; acá vuelven) */
  .sidebar-header { padding: 10px 14px 2px; }
  .sidebar-header h1 { display: block; font-size: 16px; }
  .sidebar-header .brand-top { justify-content: flex-start; }
  .sidebar-header .brand-icon { width: 36px; height: 36px; padding: 2px; }
  .sidebar-header .brand-top { gap: 10px; }
  .nav-item span { display: inline; }
  .nav-item { justify-content: flex-start; padding: 9px 13px; font-size: 13px; gap: 8px; }
  /* OJO: en móvil el sidebar es la CABECERA (arriba) — nada de safe-area-bottom acá */
  .sidebar-footer { padding: 6px 14px; }

  .topbar { padding: 10px 16px; }
  .topbar h2 { font-size: 16px; }
  .page { padding: 12px; }                 /* el de abajo: ver la barra inferior, al final del archivo */
  .card { padding: 14px; border-radius: 12px; }
  .filtros { gap: 8px; }
  .filtros select, .filtros input { min-height: 42px; }
  .btn { min-height: 44px; } /* área táctil mínima de Apple */
  .btn.small { min-height: 36px; font-size: 12px; }
  .filtros .btn.small { min-height: 42px; } /* BTN-06: igual que los campos de arriba */
  th, td { padding: 9px 10px; }

  /* Modales: hoja casi completa, con respiro para el notch */
  .modal-overlay { padding: 10px; }
  .modal {
    max-width: none;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom));
    border-radius: 14px;
    max-height: 94vh;
    max-height: 94dvh;
  }
  .modal-actions { flex-wrap: wrap; }
  .oficina-inputs label { flex: 1 1 45%; }
  .oficina-inputs input { width: 100%; }
  .cuadre-grid { grid-template-columns: repeat(2, 1fr); }
  .cuadre-item .value { font-size: 17px; }

  .login-card { padding: 28px 20px; }

  /* Pestañas CDA compactas */
  .bwin-body { padding: 10px; }
  .bwin-tab { padding: 8px 12px 9px 10px; font-size: 12px; }
  .bwin-bar { padding: 8px 8px 0; }
  .srv-hero-pct { font-size: 30px; }
}

/* ============================================================
   MODO OSCURO — se activa con html[data-theme="dark"] (Ajustes ⚙)
   ============================================================ */
html[data-theme="dark"] {
  --bg: #0f1618;
  --card: #172124;
  --ink: #e6edec;
  --muted: #8fa4a1;
  --brand-light: #12333a;
  --accent-light: #2a2110;
  --ok-light: #122a1b;
  --warn-light: #2b230c;
  --err-light: #321712;
  --line: #233034;
  --line-strong: #2e3e43;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 10px 28px -14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.35), 0 24px 60px -20px rgba(0, 0, 0, 0.6);
  --sec-bg: #131c1f;
}
html[data-theme="dark"] .topbar { background: rgba(23, 33, 36, 0.88); }
html[data-theme="dark"] tbody tr:hover td { background: #1c282c; }
html[data-theme="dark"] tbody tr:active td { background: #202e33; }
html[data-theme="dark"] .btn { background: #1d282c; border-color: var(--line-strong); color: var(--ink); }
html[data-theme="dark"] .btn:hover { background: #243338; border-color: #3a4c52; }
html[data-theme="dark"] .btn:active { background: #1a2529; }
html[data-theme="dark"] .btn.danger { background: #1d282c; color: #ff8b7c; border-color: #4b2a24; }
html[data-theme="dark"] .btn.danger:hover { background: var(--err); color: #fff; }
/* SIS-01: «html[data-theme="dark"] .btn» (0,2,1) ganaba a .btn.primary, .btn.ok y .btn.link (0,2,0) y les ponía el fondo y el
   color del botón secundario: la acción principal no se distinguía de «Cancelar». Estas reglas pesan más (0,3,1) y devuelven
   lo mismo que en el tema claro; el hover y el active repiten el fondo porque «.btn:hover» y «.btn:active» de arriba también los pisaban. */
html[data-theme="dark"] .btn.primary,
html[data-theme="dark"] .btn.primary:hover,
html[data-theme="dark"] .btn.primary:active {
  background: linear-gradient(160deg, var(--brand-2), var(--brand)); color: #fff; border-color: transparent;
}
html[data-theme="dark"] .btn.ok,
html[data-theme="dark"] .btn.ok:active { background: var(--ok); color: #fff; border-color: transparent; }
html[data-theme="dark"] .btn.ok:hover { background: #1d6c39; color: #fff; border-color: transparent; }
/* «Link» es un enlace sin recuadro; el verde azulado de marca (#16808d) sobre el fondo oscuro no llega a 4,5:1, se aclara. */
html[data-theme="dark"] .btn.link,
html[data-theme="dark"] .btn.link:hover,
html[data-theme="dark"] .btn.link:active { background: none; }
html[data-theme="dark"] .btn.link { color: #7fc7d1; }
html[data-theme="dark"] .btn.link:hover { color: #a6dce3; }
html[data-theme="dark"] .filtros select, html[data-theme="dark"] .filtros input,
html[data-theme="dark"] .cda-toolbar input,
html[data-theme="dark"] .form input, html[data-theme="dark"] .form select,
html[data-theme="dark"] .oficina-inputs input,
html[data-theme="dark"] .umbral-field input,
html[data-theme="dark"] .modal input, html[data-theme="dark"] .modal select,
html[data-theme="dark"] .modal textarea,
html[data-theme="dark"] .cred-cab input, html[data-theme="dark"] .cred-cab select,
html[data-theme="dark"] .tabla-cred-lineas input,
html[data-theme="dark"] .ef-date {
  background: #10181a; color: var(--ink); border-color: var(--line-strong);
  color-scheme: dark;   /* sin esto el calendario nativo de <input type=date> sale blanco */
}
html[data-theme="dark"] .ef-paso { background: #1d282c; }
/* N5-03: de noche el verde azulado de marca (--brand-2, #16808d) sobre la tarjeta daba 3,52 a 1 (total de efectivo y pestaña activa de Consolidado): se usa
   el claro de las demás pestañas (8,9). La flecha desactivada pasa de opacidad 0,35 (2,84) al gris apagado (5,7): se distingue de la activa por el color. */
html[data-theme="dark"] .ef-total, html[data-theme="dark"] .ef-tab.activo { color: #7ecbd6; }
html[data-theme="dark"] .ef-paso:disabled { opacity: 1; color: var(--muted); }
html[data-theme="dark"] .ef-paso:hover:not(:disabled) { background: var(--brand-light); }
/* La regla de arriba es más específica que `.pn-input.lleno`, así que de noche
   borraba el resaltado de la casilla escrita. Se lo devolvemos. */
html[data-theme="dark"] .modal .pn-input.lleno {
  background: var(--brand-light); border-color: var(--brand-2);
}
html[data-theme="dark"] .badge-enviado { background: #132638; color: #7db4e8; border-color: #1e3a55; }
html[data-theme="dark"] .badge-borrador { background: #1d2528; color: var(--muted); border-color: #2a3538; }
html[data-theme="dark"] .chip.falta { border-color: #4b2a24; }
html[data-theme="dark"] .chip.ok { border-color: #1f4029; }
html[data-theme="dark"] .cuadre-item { background: #131c1f; }
html[data-theme="dark"] .oficina-box { background: #241d0e; border-color: #3d3218; }
html[data-theme="dark"] .fd-tabla { background: var(--card); }
html[data-theme="dark"] .fd-tabla th { background: #1c2528; }
html[data-theme="dark"] .hoy-banner.pend { background: var(--warn-light); border-color: #4a3c14; color: #e8c96a; }
html[data-theme="dark"] .hoy-banner.ok { background: var(--ok-light); border-color: #1f4029; color: #7fd39a; }
html[data-theme="dark"] .bwin-bar { background: #141d20; border-bottom-color: #0c1214; }
html[data-theme="dark"] .bwin-tab { background: rgba(255, 255, 255, 0.05); color: #9db3b0; }
html[data-theme="dark"] .bwin-tab:hover { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .bwin-tab.active { background: var(--card); color: #7ecbd6; }
html[data-theme="dark"] .bwin-body { background: #121a1d; }
html[data-theme="dark"] .srv-bar { background: #222f33; }
html[data-theme="dark"] .foto-oficina { background: #131c1f; }
html[data-theme="dark"] .foto-oficina.lista { background: var(--ok-light); border-color: #2c5a3b; }
html[data-theme="dark"] .section-tab { background: #1d282c; color: var(--muted); }
html[data-theme="dark"] .section-tab.active, html[data-theme="dark"] .section-tab:hover { background: var(--brand-light); color: #7ecbd6; }
html[data-theme="dark"] .cuadre-fotos img { background: #10181a; border-color: var(--line-strong); }
html[data-theme="dark"] .np-toggle { background: #131c1f; }
html[data-theme="dark"] .switch i { background: #33454b; }
/* SIS-02: la regla de arriba pesa igual que «.switch input:checked + i» y va después, así que borraba el color de encendido:
   encendido y apagado se veían iguales. Este pesa más y devuelve el color de marca. */
html[data-theme="dark"] .switch input:checked + i { background: var(--brand-2); }
html[data-theme="dark"] .box-ambar { background: #241d0e !important; }
html[data-theme="dark"] .box-verde { background: #122a1b !important; }
html[data-theme="dark"] .fila-ambar td { background: #241d0e !important; }
html[data-theme="dark"] .version-box { background: #131c1f !important; }

/* Estados legibles en modo oscuro: rojo/verde/ámbar aclarados (el tema claro no cambia).
   Antes el rojo/verde oscuros y los fondos claros hardcodeados quedaban ilegibles de noche. */
html[data-theme="dark"] .cuadre-item .value.faltante,
html[data-theme="dark"] #mensual-falt-card .value.faltante,
html[data-theme="dark"] .chip.falta,
html[data-theme="dark"] .badge-faltante,
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .gasto-item .gasto-monto { color: #ff8b7c; }
html[data-theme="dark"] .badge-faltante { background: #321712; }
html[data-theme="dark"] .alert-error { background: #2a1512; }
html[data-theme="dark"] .cuadre-item .value.sobrante,
html[data-theme="dark"] .badge-sobrante { color: #f0c860; }
html[data-theme="dark"] .badge-sobrante { background: #2b230c; }
html[data-theme="dark"] .cuadre-item .value.cuadrado,
html[data-theme="dark"] #mensual-falt-card .value.sobrante,
html[data-theme="dark"] .chip.ok,
html[data-theme="dark"] .badge-revisado,
html[data-theme="dark"] .badge-cuadrado,
html[data-theme="dark"] .alert-success { color: #7fd39a; }
html[data-theme="dark"] .badge-revisado,
html[data-theme="dark"] .badge-cuadrado { background: #122a1b; }
html[data-theme="dark"] .alert-success { background: #122a1b; }
html[data-theme="dark"] .alert-info { background: #12263a; color: #8fc0f0; }
html[data-theme="dark"] .alert-warn { background: #2b230c; color: #f0c860; }

/* SIS-03: colores que usan --brand, --err y --ok del tema claro y de noche quedaban casi ilegibles (1,78 a 1 los números de
   Servidor; 2,93 el faltante de Reportes; 2,86 «Activo» de Clientes). Aclarados para pasar 4,5 a 1; el tema claro no cambia. */
html[data-theme="dark"] .srv-stat-num { color: #7fc8d4; }
html[data-theme="dark"] .tabla-reportes .value.faltante { color: #ff8b7c; }
html[data-theme="dark"] .cat44 .estado--aprobado { color: #7fd39a; }

/* Fila de reporte con faltante sobre el umbral: banda roja OSCURA
   (en el tema claro quedaba un rosa #fdecea que en modo noche era ilegible). */
html[data-theme="dark"] tbody tr.fila-alerta td { background: #241210; }
html[data-theme="dark"] tbody tr.fila-alerta:hover td { background: #2c1613; }
html[data-theme="dark"] tbody tr.fila-alerta td:first-child { box-shadow: inset 3px 0 0 #ff8b7c; }

/* Cajas de acento reutilizables (el tema claro conserva sus tonos de siempre) */
.box-ambar { background: #fff7e0; }
.box-verde { background: #eaf3ea; }
.fila-ambar td { background: #fff3cd; }

/* ===== Rutas de reparto =====
   Una ruta agrupa las tiendas de un repartidor. El color de cada tienda dice si
   puede cortar producto (verde) o si le tiene que llegar empacado (rojo). Todo
   con variables de color para que el modo noche salga sin overrides aparte. */
.ruta-card {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 12px 12px; margin-bottom: 11px; background: var(--card);
}
.ruta-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.ruta-head .rt-nombre {
  flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 14px;
  padding: 5px 8px; border: 1px solid transparent; border-radius: 7px;
  background: transparent; color: var(--ink);
}
.ruta-head .rt-nombre:hover { border-color: var(--line); }
.ruta-head .rt-nombre:focus { outline: none; border-color: var(--brand); background: var(--card); }

.rt-filas { display: flex; flex-direction: column; gap: 6px; }
.rt-fila { display: flex; gap: 7px; align-items: center; }
.rt-fila .rt-tienda { flex: 1 1 auto; min-width: 0; }
.rt-fila select {
  padding: 5px 8px; border: 1px solid var(--line-strong); border-radius: 7px;
  font-size: 13px; background: var(--card); color: var(--ink);
}
.rt-fila select:focus { outline: none; border-color: var(--brand); }
.rt-corte { flex: 0 0 132px; font-weight: 600; }

/* El semáforo: fondo suave + borde del color, legible en claro y en oscuro. */
.corte-verde    { background: var(--ok-light);   color: var(--ok);   border-color: #bfe2cb !important; }
.corte-amarillo { background: var(--warn-light); color: var(--warn); border-color: #efdcae !important; }
.corte-rojo     { background: var(--err-light);  color: var(--err);  border-color: #f0c4bd !important; }

.rt-agregar { margin-top: 8px; }
.rt-agregar select {
  width: 100%; padding: 6px 9px; border: 1px dashed var(--line-strong);
  border-radius: 7px; font-size: 12.5px; color: var(--muted); background: transparent;
}
.rt-agregar select:focus { outline: none; border-color: var(--brand); }
.rt-agregar select:disabled { opacity: 0.55; }

/* Puntito de color para las leyendas y el listado por ruta */
.rt-punto {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  vertical-align: baseline; margin: 0 1px 0 4px; border: 1px solid rgba(0,0,0,0.12);
}
.rt-punto.corte-verde    { background: var(--ok); }
.rt-punto.corte-amarillo { background: var(--warn); }
.rt-punto.corte-rojo     { background: var(--err); }

/* ===== Pedidos por ruta (control del día) ===== */
.pr-ruta { border-top: 1px solid var(--line); padding: 10px 0 4px; }
.pr-ruta:first-child { border-top: none; padding-top: 2px; }
.pr-ruta-head {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; margin-bottom: 7px;
}
.pr-ruta-nombre { font-weight: 700; font-size: 13.5px; }
.pr-tiendas { display: flex; flex-wrap: wrap; gap: 6px; }
.pr-tienda {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 4px 9px 4px 7px;
  border-radius: 999px; border: 1px solid var(--line-strong);
  background: var(--card); color: var(--muted);
}
/* Ya mandó su pedido */
.pr-tienda.ok { background: var(--ok-light); color: var(--ok); border-color: #bfe2cb; }
/* Todavía no manda nada: es lo que hay que perseguir */
.pr-tienda.falta { background: var(--err-light); color: var(--err); border-color: #f0c4bd; }
/* Lo mandó pero se canceló */
.pr-tienda.anulado { background: var(--bg); color: var(--muted); text-decoration: line-through; }

html[data-theme="dark"] .corte-verde    { background: #10281a; border-color: #1f5233 !important; }
html[data-theme="dark"] .corte-amarillo { background: #2a2110; border-color: #5c4715 !important; }
html[data-theme="dark"] .corte-rojo     { background: #2a1512; border-color: #5e2a22 !important; }
html[data-theme="dark"] .pr-tienda.ok    { background: #10281a; border-color: #1f5233; }
/* N5-01: el rojo del tema claro (--err) sobre este fondo daba 3,09 a 1; el rojo claro del resto del panel de noche da 7,6. */
html[data-theme="dark"] .pr-tienda.falta { background: #2a1512; border-color: #5e2a22; color: #ff8b7c; }

/* ===== Funciones en prueba (banco de pruebas del perfil de desarrollo) =====
   Todo lo que se estrena se marca con `data-dev` en el HTML y solo se ve en el
   perfil de desarrollo (rol `admin` — hoy "Juan José (Dev)"). El gate va acá y
   no en JavaScript a propósito: así un módulo que después haga `hidden = false`
   no puede destapar la función por accidente, y como la clase `es-dev` la pone
   el panel al cargar el perfil, nada nuevo alcanza a parpadear en la pantalla de
   la jefa o de un colaborador. Cuando una función se aprueba, se le quita el
   `data-dev` al elemento y pasa a estar a la vista de todos. */
body:not(.es-dev) [data-dev] { display: none !important; }

/* ============================================================================
   CDA v41 · "La hoja del día"
   ----------------------------------------------------------------------------
   Antes cada tienda mostraba 10 tarjetas apiladas y el dato que de verdad se
   mira —el cruce— quedaba de segundo. Ahora el cruce va arriba y en grande, y
   todo lo demás son secciones PLEGADAS que se abren solo cuando hacen falta.
   Los estilos viven acá y no dentro del JavaScript: antes había ~90 style="..."
   escritos a mano en cda.js, que es por qué se veía desparejo con el resto.
   ========================================================================== */

.cda-dia { display: grid; gap: 12px; max-width: 940px; }
.cda-dia-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 2px;
}
.cda-dia-head h3 { margin: 0; font-size: 17px; }
.cda-dia-head .cda-codigo {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--brand); background: var(--brand-light);
  padding: 3px 8px; border-radius: 999px;
}

/* ---- El marcador: vendió / entregó / diferencia ---- */
.cda-marcador {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 18px 20px;
}
.cda-cifras {
  display: grid; grid-template-columns: 1fr 1fr 1.15fr;
  gap: 14px; align-items: stretch;
}
.cda-cifra { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cda-cifra dt {
  font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); margin: 0;
}
.cda-cifra dd {
  margin: 0; font-size: 25px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--ink);
}
/* El pie va como segundo <dd> (dentro de un <dl> solo caben dt/dd), así que
   tiene que deshacer el tamaño y el peso que hereda de la cifra grande. */
.cda-cifra .cda-pie { font-size: 11.5px; font-weight: 500; line-height: 1.5; color: var(--muted); }

/* La tercera columna es el veredicto: se pinta entera según cómo salió el día */
.cda-cifra-veredicto {
  border-radius: var(--radius-sm); padding: 10px 14px; justify-content: center;
  background: var(--brand-light);
}
.cda-cifra-veredicto dt { color: inherit; opacity: 0.8; }
.cda-cifra-veredicto dd { font-size: 27px; }
.cda-cifra-veredicto.es-cuadrado { background: var(--ok-light); color: var(--ok); }
.cda-cifra-veredicto.es-faltante  { background: var(--err-light); color: var(--err); }
.cda-cifra-veredicto.es-sobrante  { background: var(--warn-light); color: var(--warn); }
.cda-cifra-veredicto.es-cuadrado dd,
.cda-cifra-veredicto.es-faltante dd,
.cda-cifra-veredicto.es-sobrante dd { color: inherit; }
.cda-veredicto-tag {
  font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.cda-sin-datos { color: var(--muted); font-size: 13.5px; margin: 0; }

/* ---- Los dos turnos, en una línea cada uno ---- */
.cda-turnos { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 6px; }
.cda-turno {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; padding: 5px 0;
}
.cda-turno-nombre { font-weight: 700; min-width: 74px; }
.cda-turno-dato { color: var(--muted); font-variant-numeric: tabular-nums; }
.cda-turno-dato strong { color: var(--ink); font-weight: 700; }
.cda-turno-vacio { color: var(--muted); font-style: italic; }
.cda-turno .btn { margin-left: auto; }
.cda-nota-ajuste {
  font-size: 12px; color: var(--warn); background: var(--warn-light);
  padding: 6px 10px; border-radius: var(--radius-sm); margin: 0;
}

/* ---- Secciones plegables: el detalle solo si lo pedís ---- */
.cda-bloque {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cda-bloque > summary {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; cursor: pointer; list-style: none;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  transition: background 0.14s var(--ease);
}
.cda-bloque > summary::-webkit-details-marker { display: none; }
.cda-bloque > summary:hover { background: var(--brand-light); }
/* La flechita la dibujamos nosotros para que gire igual en todos los navegadores */
.cda-bloque > summary::before {
  content: ''; flex: none; width: 7px; height: 7px; margin-right: 2px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.16s var(--ease);
}
.cda-bloque[open] > summary::before { transform: rotate(45deg); }
.cda-bloque[open] > summary { border-bottom: 1px solid var(--line); }
/* El valor de la derecha: para saber si adentro hay algo SIN tener que abrir */
.cda-bloque .cda-pista {
  margin-left: auto; font-size: 12.5px; font-weight: 600;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.cda-bloque .cda-pista-vacia { font-weight: 400; font-style: italic; opacity: 0.75; }
.cda-cuerpo { padding: 14px 16px 16px; }
.cda-cuerpo > :first-child { margin-top: 0; }
.cda-cuerpo table { font-size: 13px; }
.cda-total-linea { margin: 0; font-size: 13.5px; }

/* ---- Fotos ---- */
.cda-fotos { display: flex; flex-wrap: wrap; gap: 8px; }
.cda-fotos img {
  width: 86px; height: 86px; object-fit: cover;
  border-radius: var(--radius-sm); border: 1px solid var(--line-strong); display: block;
}

/* ---- "En vivo": el apartado se actualiza solo, sin recargar la página ---- */
.cda-vivo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.cda-vivo::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); flex: none;
  animation: cda-latido 2.4s var(--ease) infinite;
}
.cda-vivo.esta-pausado::before { background: var(--muted); animation: none; }
@keyframes cda-latido {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.8); }
}
/* Al llegar un dato nuevo la sección parpadea una vez, para que se note */
.cda-recien { animation: cda-destello 1.1s var(--ease) 1; }
@keyframes cda-destello {
  0%   { box-shadow: 0 0 0 0 rgba(33, 122, 65, 0.45); }
  100% { box-shadow: 0 0 0 14px rgba(33, 122, 65, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cda-vivo::before, .cda-recien { animation: none; }
}

/* ---- Modo noche ---- */
html[data-theme="dark"] .cda-bloque > summary:hover { background: rgba(255, 255, 255, 0.045); }
html[data-theme="dark"] .cda-cifra-veredicto { background: rgba(255, 255, 255, 0.05); }
html[data-theme="dark"] .cda-cifra-veredicto.es-cuadrado { background: #122a1b; }
html[data-theme="dark"] .cda-cifra-veredicto.es-faltante  { background: #241210; }
html[data-theme="dark"] .cda-cifra-veredicto.es-sobrante  { background: #241d0e; }
html[data-theme="dark"] .cda-nota-ajuste { background: #241d0e; }

/* ---- Pantallas chicas: el marcador se apila ---- */
@media (max-width: 640px) {
  .cda-cifras { grid-template-columns: 1fr 1fr; }
  .cda-cifra-veredicto { grid-column: 1 / -1; }
  .cda-cifra dd { font-size: 21px; }
  .cda-turno .btn { margin-left: 0; }
}

/* ===== Corregir cantidades de un pedido =====
   Para despachar menos de lo que la tienda pidió: se escribe lo que de verdad
   va a salir y el total a preparar y el Excel se rehacen con eso. Es la función
   que tenía el programa de bodega que se retiró el 02/08/2026. */
.ped-cant {
  width: 62px; text-align: right; font-size: 13px; font-variant-numeric: tabular-nums;
  padding: 4px 6px; border: 1.5px solid var(--line-strong); border-radius: 6px;
  background: var(--card); color: var(--ink);
}
.ped-cant:focus { outline: none; border-color: var(--brand); background: var(--brand-light); }
/* Sin las flechitas del spinner: estorban en una casilla tan angosta. */
.ped-cant::-webkit-outer-spin-button,
.ped-cant::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ped-cant { -moz-appearance: textfield; appearance: textfield; }

/* El candado por RELOJ de Pedidos (`body:not(.pedidos-libre) [data-estreno]`) se
   quitó el 04/08/2026: el dueño adelantó el estreno y Pedidos quedó liberado
   para todo el panel — Mañana, Rutas, Hoja de pedidos (Excel), Editar cantidades
   y la tarjeta de Pedidos por ruta ya no se esconden de nadie. */

/* ============================================================================
   Sumatoria de efectivo (Consolidado mensual · banco de pruebas)
   ----------------------------------------------------------------------------
   Todo con variables de tema (--card, --line, --ink…): el modo oscuro sale solo
   y no hay que mantener una segunda copia.

   Lo que de verdad se diseña acá son TRES cosas, y las tres existen para que
   nadie se lleve un susto leyendo la tabla:
     1. los renglones de corte (semana y mes), porque la tabla se lee saltando de
        total en total: si no se distinguen del resto, no sirve de nada;
     2. el hueco — un día sin cierres tiene que verse distinto de un día con $0,
        con su rótulo puesto (`.ef-chip.es-hueco`), nunca como una celda muda;
     3. las cifras de arriba (`.ef-cifra`), que son la respuesta rápida: total,
        cuántos días tienen dato, promedio y cobertura.
   ========================================================================== */

/* ---- Barra de controles: el calendario propio de la tarjeta ---- */
.ef-barra {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 14px;
  background: var(--sec-bg, var(--bg));
  border: 1px solid var(--line); border-radius: var(--radius);
}
.ef-modo {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--card); border: 1px solid var(--line); border-radius: 999px;
}
.ef-modo-btn {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; color: var(--muted);
  padding: 4px 14px; min-height: 28px; border-radius: 999px;   /* BTN-07: 28 + 3 + 3 de relleno + 2 de borde = 36 px, como el resto de la fila */
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.ef-modo-btn:hover { color: var(--ink); }
.ef-modo-btn.activo { background: var(--brand-2); color: #fff; }

.ef-caja { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ef-lbl {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.ef-date {
  font: inherit; font-size: 13px; color: var(--ink);
  padding: 6px 9px; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--card);
  min-height: 36px;   /* BTN-07: la misma altura que las flechas, Hoy y Ayer */
}
.ef-date:focus { outline: 2px solid var(--brand-2); outline-offset: 1px; }
/* Las flechas de día anterior / siguiente: se usan más que el calendario. */
.ef-paso {
  width: 36px; height: 36px; flex: 0 0 auto;   /* BTN-07: 36 como la fecha y los botones de la fila (eran 30) */
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); cursor: pointer;
  font-size: 17px; line-height: 1; font-weight: 700;
}
.ef-paso:hover:not(:disabled) { background: var(--brand-light); border-color: var(--brand-2); }
.ef-paso:disabled { opacity: 0.35; cursor: default; }
/* BTN-07: Hoy, Ayer, 7 días… miden como la fecha y las flechas (29 en escritorio, 36 en el celular, eran distintos). */
.ef-caja .btn.small { min-height: 36px; }
/* Celular: una línea con ‹ fecha › y debajo Hoy y Ayer, cada uno con la mitad. Antes «Ayer» caía solo en una segunda línea. */
@media (max-width: 600px) {
  #ef-caja-dia { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(0, 1fr) 36px; width: 100%; }
  #ef-caja-dia [data-atajo="antes"] { grid-column: 1; grid-row: 1; }
  #ef-caja-dia .ef-date { grid-column: 2 / 4; grid-row: 1; width: 100%; min-width: 0; }
  #ef-caja-dia [data-atajo="despues"] { grid-column: 4; grid-row: 1; }
  #ef-caja-dia [data-atajo="hoy"] { grid-column: 1 / 3; grid-row: 2; }
  #ef-caja-dia [data-atajo="ayer"] { grid-column: 3 / 5; grid-row: 2; }
}

/* ---- Cifras grandes: la respuesta antes de leer la tabla ---- */
.ef-cifras {
  display: grid; gap: 10px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.ef-cifras:empty { display: none; }
.ef-cifra {
  padding: 11px 13px; border-radius: var(--radius);
  background: var(--sec-bg, var(--bg)); border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
}
.ef-cifra-v { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.ef-cifra-r { font-size: 11.5px; color: var(--muted); margin-top: 2px; line-height: 1.35; }
.ef-cifra.es-ok { border-left-color: var(--ok); }
.ef-cifra.es-ok .ef-cifra-v { color: var(--ok); }
.ef-cifra.es-falta { border-left-color: var(--warn); }
.ef-cifra.es-falta .ef-cifra-v { color: var(--warn); }
.ef-cifra.es-hueco .ef-cifra-v { color: var(--muted); }

/* ---- El aviso que explica el hueco. Es la pieza central de la reforma del
   17/08/2026: antes, dos días en blanco (06 y 07 de agosto: las tiendas
   estaban cerradas) se leían como plata perdida. Ahora la herramienta lo dice
   con todas las letras en vez de dejar renglones mudos. ---- */
.ef-aviso {
  padding: 10px 13px; margin-bottom: 12px;
  border-radius: var(--radius); font-size: 12.5px; line-height: 1.5;
  background: var(--brand-light); color: var(--ink);
  border-left: 3px solid var(--brand-2);
}
.ef-aviso.es-warn { background: var(--warn-light); border-left-color: var(--warn); }

/* ---- Pestañas (solo en modo rango) ---- */
.ef-tabs {
  display: inline-flex; gap: 2px; padding: 3px; margin-bottom: 12px;
  background: var(--sec-bg, var(--bg));
  border: 1px solid var(--line); border-radius: 999px;
}
.ef-tab {
  border: 0; background: none; cursor: pointer; font: inherit;
  font-size: 12px; font-weight: 700; color: var(--muted);
  padding: 5px 13px; border-radius: 999px;
  transition: background 0.12s var(--ease), color 0.12s var(--ease);
}
.ef-tab:hover { color: var(--ink); }
.ef-tab.activo { background: var(--card); color: var(--brand-2); box-shadow: var(--shadow-sm); }

.ef-total { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-2); }

/* ---- Tabla ---- */
/* Total de la semana: el renglón que se mira primero. */
.ef-tabla tr.ef-fila-semana td {
  background: var(--brand-light); color: var(--ink); font-weight: 700;
  border-bottom: 1px solid var(--line-strong);
}
/* Corte de mes: solo aparece cuando el rango pisa más de un mes. */
.ef-tabla tr.ef-fila-mes td {
  background: var(--accent-light); font-weight: 800;
  border-top: 1.5px solid var(--line-strong);
  border-bottom: 1.5px solid var(--line-strong);
}
/* Separador del bloque "no reportaron ese día" dentro de la tabla del día. */
.ef-tabla tr.ef-fila-corte td {
  background: var(--warn-light); color: var(--ink);
  font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.04em;
  border-top: 1.5px solid var(--line-strong);
}
/* Un día (o una tienda) sin cierre se muestra igual, apagado: el hueco es
   información, no basura — pero nunca en forma de $0.00. */
.ef-tabla tr.ef-sin td { color: var(--muted); }
.ef-tabla tfoot td { border-top: 2px solid var(--line-strong); font-size: 14px; }
/* El punto que marca el efectivo de un cierre todavía sin aprobar. */
.ef-pend { color: var(--warn); font-weight: 800; }

/* Etiqueta de estado dentro de una celda. */
.ef-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.01em;
  background: var(--sec-bg, var(--bg)); color: var(--muted);
  border: 1px solid var(--line);
}
.ef-chip.es-ok { background: var(--ok-light); color: var(--ok); border-color: transparent; }
.ef-chip.es-falta { background: var(--warn-light); color: var(--warn); border-color: transparent; }
.ef-chip.es-hueco { background: transparent; color: var(--muted); border-style: dashed; }

/* Barrita de proporción detrás del número. Es decoración honesta: sirve para
   encontrar el día raro de un vistazo, y la cifra exacta siempre está al lado. */
.ef-bar {
  display: inline-block; vertical-align: middle;
  width: 46px; height: 6px; margin-right: 8px;
  border-radius: 999px; background: var(--line);
  position: relative; overflow: hidden;
}
.ef-bar::after {
  content: ''; position: absolute; inset: 0 auto 0 0;
  width: var(--p, 0%); background: var(--brand-2); border-radius: 999px;
}

/* ===========================================================================
   VISTA DE VERIFICACIÓN DEL CUADRE  ·  perfil Dev  ·  25/08/2026
   ---------------------------------------------------------------------------
   Antes, tocar una foto abría `#modal-imagen` ENCIMA del modal de cuadre: para
   comparar el papel contra los números había que abrir, memorizar, cerrar y
   volver a abrir. Acá la foto se pone AL LADO de los datos editables, que es
   para lo que se mira un comprobante.

   El candado es el de siempre: `data-dev` en `#cuadre-visor` + la regla
   `body:not(.es-dev) [data-dev] { display:none }`. La ventana nueva del cuadre
   (css/ventana.css) trae su propio diseño de dos columnas.
   =========================================================================== */

/* El split es una columna simple. */
#cuadre-split { display: block; }

#cuadre-visor {
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 0;
  background: var(--ink);
  border-radius: var(--radius);
  padding: 12px;
  color: #fff;
}
#cuadre-visor[hidden] { display: none !important; }

.cv-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}
.cv-x {
  background: rgba(255,255,255,0.12); border: none; color: #fff; cursor: pointer;
  border-radius: 7px; padding: 4px 6px; display: inline-flex; line-height: 0;
}
.cv-x:hover { background: rgba(255,255,255,0.24); }

/* El lienzo: recorta lo que sobra al acercar y es el que captura el arrastre. */
.cv-lienzo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: #0b1417;
  height: 54vh;
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
  touch-action: none;   /* el arrastre lo manejamos nosotros, no el navegador */
}
/* La manito solo aparece cuando de verdad hay algo fuera del recuadro que traer
   a la vista. Antes salía siempre y prometía un arrastre que no hacía nada. */
.cv-lienzo.movible { cursor: grab; }
.cv-lienzo.movible.arrastrando { cursor: grabbing; }
#cv-img {
  max-width: 100%; max-height: 100%;
  transform-origin: center center;
  user-select: none; -webkit-user-drag: none;
  transition: transform 0.14s var(--ease);
}
/* Mientras se arrastra no hay transición: si no, la foto va "atrás" del ratón. */
.cv-lienzo.arrastrando #cv-img { transition: none; }

.cv-tools {
  position: absolute; top: 10px; right: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.cv-btn {
  width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,0.92); color: var(--ink);
  border: none; font-size: 16px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}
.cv-btn:hover:not(:disabled) { background: #fff; }
.cv-btn:active:not(:disabled) { transform: translateY(1px); }
/* Al llegar al tope de acercar/alejar el botón se apaga a la vista. Antes no
   pasaba nada al apretarlo y parecía que se había roto. */
.cv-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.cv-zoom {
  position: absolute; left: 10px; bottom: 10px;
  background: rgba(0,0,0,0.55); color: #fff;
  font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 20px;
}

.cv-pie { display: flex; align-items: center; gap: 10px; }
.cv-tiras { display: flex; gap: 8px; flex: 1; justify-content: center; flex-wrap: wrap; }
.cv-tira {
  width: 46px; height: 46px; border-radius: 8px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #0b1417; padding: 0; line-height: 0;
  position: relative;
}
.cv-tira img { width: 100%; height: 100%; object-fit: cover; opacity: 0.6; }
.cv-tira:hover img { opacity: 0.85; }
.cv-tira.activa { border-color: var(--accent); }
.cv-tira.activa img { opacity: 1; }
.cv-pie .btn.small { padding: 5px 10px; font-size: 12px; }

.cv-abrir {
  font-size: 11.5px; color: rgba(255,255,255,0.66);
  text-align: center; text-decoration: none;
}
.cv-abrir:hover { color: #fff; text-decoration: underline; }

/* Pantallas angostas: la vista de dos columnas no tiene sentido, se apila. */
@media (max-width: 1100px) {
  #cuadre-visor { position: static; }
  .cv-lienzo { height: 44vh; }
}

/* Aviso de error global (util.js → vigilarErrores). Discreto y abajo: informa sin
   tapar nada ni bloquear el trabajo. Se va solo a los 8 segundos. */
#aviso-error-global {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%) translateY(120%);
  max-width: min(560px, calc(100vw - 32px));
  background: var(--err); color: #fff;
  font-size: 13px; line-height: 1.45; font-weight: 600;
  padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.28);
  opacity: 0; pointer-events: none; z-index: 9999;
  transition: transform .22s var(--ease), opacity .22s var(--ease);
}
#aviso-error-global.visible { transform: translateX(-50%) translateY(0); opacity: 1; }

/* ===========================================================================
   VISTA PREVIA DE LOS EXCEL  ·  perfil Dev  ·  25/08/2026
   ---------------------------------------------------------------------------
   El modal lo arma `js/vista-excel.js` desde JS, no está en index.html: así la
   función se puede sumar o quitar sin mover el HTML del panel. Todo lo de acá
   cuelga de #modal-vexcel, que además lleva `data-dev`.
   =========================================================================== */
.vexcel-modal {
  max-width: 1400px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow: hidden;        /* el que scrollea es el lienzo, no el modal */
}

.vexcel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.vexcel-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vexcel-id strong {
  font-size: 15px; font-weight: 800; letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
.vexcel-meta { font-size: 12px; color: var(--muted); }
.vexcel-modal .cv-x { background: var(--line); color: var(--ink); font-size: 13px; }
.vexcel-modal .cv-x:hover { background: #d9dde1; }

.vexcel-avisos {
  background: #fff8e6; border: 1px solid #e5c86a; border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 12.5px; color: #7a5c00;
  display: flex; flex-direction: column; gap: 4px;
}

.vexcel-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.vexcel-tab {
  border: 1px solid var(--line); background: var(--card); color: var(--muted);
  border-radius: 7px 7px 0 0; padding: 5px 12px; cursor: pointer;
  font-size: 12.5px; font-weight: 700; max-width: 240px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vexcel-tab:hover { color: var(--ink); }
.vexcel-tab.activa { background: var(--ink); color: #fff; border-color: var(--ink); }

/* El lienzo es lo único que scrollea, en los dos ejes. */
.vexcel-lienzo {
  flex: 1; min-height: 200px; overflow: auto;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card);
}

.vexcel-tabla { border-collapse: separate; border-spacing: 0; font-size: 12.5px; }
.vexcel-tabla th, .vexcel-tabla td {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 3px 7px;
  white-space: pre-wrap;      /* respeta los saltos de línea dentro de una celda */
  vertical-align: middle;
  max-width: 420px;
}
/* La cabecera de columnas (A, B, C…) y la de filas (1, 2, 3…) quedan fijas
   mientras se scrollea, que es lo que hace legible una hoja ancha. */
.vexcel-tabla thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg); color: var(--muted);
  font-weight: 700; font-size: 11px; text-align: center;
}
.vexcel-nfila {
  position: sticky; left: 0; z-index: 1;
  background: var(--bg); color: var(--muted);
  font-weight: 700; font-size: 11px; text-align: right;
  min-width: 42px;
}
.vexcel-esq { position: sticky; left: 0; z-index: 3; min-width: 42px; }
.vexcel-tabla td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Una celda calculada se distingue de una tecleada. Cuando un total no cuadra,
   saber cuál de las dos es resuelve media investigación. */
.vexcel-tabla td.formula { background: #f4f8ff; }
.vexcel-tabla td.formula:hover { background: #e6f0ff; cursor: help; }

.vexcel-corte {
  padding: 10px 12px; font-size: 12px; color: var(--muted);
  background: var(--bg); border-top: 1px solid var(--line);
}

.vexcel-pie { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vexcel-pref { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.vexcel-nota { font-size: 11.5px; color: var(--muted); flex: 1; min-width: 180px; }

@media (max-width: 760px) {
  .vexcel-modal { padding: 14px; }
  .vexcel-nota { display: none; }
}

/* --- Cargar pedido de crédito del CDA a mano -------------------------------
   Antes esto era una caja de fotos con OCR que nunca funcionó: los 17 créditos
   que había en la base tenían total pero cero renglones. Ahora se teclea con el
   papel firmado enfrente, en el mismo orden en que está impreso. */
.cred-cab { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.cred-cab label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); font-weight: 600; }
.cred-cab input, .cred-cab select { padding: 8px 10px; font-size: 14px; }
/* El Nº de pedido es la llave de todo el flujo: se lee de un vistazo. */
#cred-numero { font-variant-numeric: tabular-nums; letter-spacing: 0.5px; font-weight: 700; }

.tabla-cred-lineas { width: 100%; }
.tabla-cred-lineas input { width: 100%; padding: 6px 8px; font-size: 14px; }
.tabla-cred-lineas .cl-cant, .tabla-cred-lineas .cl-precio { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-cred-lineas .cl-sub { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tabla-cred-lineas tfoot th { font-variant-numeric: tabular-nums; font-size: 15px; }
.tabla-cred-lineas td { vertical-align: middle; }
.tabla-cred-lineas .btn-quitar-linea {
  border: none; background: none; cursor: pointer; font-size: 18px;
  color: var(--muted); line-height: 1; padding: 2px 6px;
}
.tabla-cred-lineas .btn-quitar-linea:hover { color: var(--err); }

/* --- Modo oscuro: lo que se quedó afuera ----------------------------------
   `.ajustes-mail` (las cajas de Usuario y Contraseña del modal de Ajustes) tenía
   `background: #fff` fijo y ninguna variante oscura: en modo noche salían dos
   rectángulos blancos en medio de un panel negro. Es un <span> con pinta de
   campo, no un <input>, así que la regla general de inputs oscuros no lo tocaba.

   El total de la tabla de crédito y las cabeceras se apoyan en los tokens, que ya
   tienen valor en los dos temas; acá sólo se corrige lo que estaba en duro. */
html[data-theme="dark"] .ajustes-mail {
  background: #10181a;
  border-color: var(--line-strong);
  color: var(--ink);
}
/* El calendario nativo del <input type="date"> sale blanco si no se le avisa
   que el tema es oscuro. Mismo motivo que la regla de `.ef-date` de más arriba. */
html[data-theme="dark"] .cred-cab input[type="date"] { color-scheme: dark; }

/* --- Apartado CDA reorganizado por DÍA (28/08/2026) ------------------------
   Antes había una pestaña por tienda, así que comparar las dos CDA del mismo día
   obligaba a ir y venir, y cada columna mezclaba el cuadre con la factura, el
   inventario, los gastos y las fotos. Ahora el día es una LISTA con un selector de
   tienda, y el detalle se abre en una ventana — igual que en Reportes. */
/* Cada tienda dentro de la pestaña Mes, con su nombre encima: sin esto las dos
   matrices quedaban pegadas y no se sabía cuál era cuál. */
.cda-mes-tienda { margin-top: 18px; }
.cda-mes-tienda:first-child { margin-top: 0; }
.cda-mes-titulo {
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}

/* Las pestañas del CDA ya no llevan emoji sino icono de trazo, como el resto del
   panel. El emoji se dibujaba distinto en cada equipo y desentonaba con el menú. */
.bwin-tab .ic { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; }

/* --- Switch de turno del apartado CDA -------------------------------------
   El CDA cierra dos veces al día. La lista sumaba los dos turnos sin permitir
   separarlos, y el corte de la mañana y el de la tarde los firma gente distinta:
   poder mirar uno solo es lo que deja pedir cuentas. */
.cda-turno-sw {
  display: inline-flex; border: 1px solid var(--line-strong);
  border-radius: 9px; overflow: hidden; background: var(--card);
}
.cda-turno-sw button {
  border: none; background: none; cursor: pointer;
  padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--muted);
  border-right: 1px solid var(--line);
  flex: none; white-space: nowrap;   /* BTN-08: cada pestaña en una línea y sin encogerse; si no caben, la tira se desplaza de lado */
  transition: background 0.13s, color 0.13s;
}
.cda-turno-sw button:last-child { border-right: none; }
.cda-turno-sw button:hover { background: var(--bg); color: var(--ink); }
.cda-turno-sw button.activo { background: var(--brand-2); color: #fff; }

/* ============================================================================
   Barra inferior y pantalla «Herramientas» · celulares y pantallas angostas (≤ 880 px)
   ----------------------------------------------------------------------------
   Hasta acá, a ≤ 880 px la barra lateral se volvía una franja arriba que se deslizaba de lado para elegir la
   herramienta. Ahora esa franja no se muestra: arriba queda el encabezado (el .topbar, con el logo, el título, la
   fecha y el engranaje de Ajustes) y abajo una barra fija con cuatro herramientas a los lados y un botón central,
   «Herramientas», que abre una pantalla con todas. La arma js/barra-inferior.js; el HTML está dentro de #app.
   En escritorio (> 880 px) no se ve nada de esto y el panel queda como siempre.

   Va al final del archivo a propósito: pisa las reglas de .sidebar y .topbar de más arriba (880 y 600 px) y la del
   .topbar de modo noche, que tienen la misma especificidad o más.

   Pilas (z-index), de abajo hacia arriba: .topbar 10 · pantalla «Herramientas» 40 · barra inferior 50 · ventanas
   (.modal-overlay) 100 · aviso de error y pantalla de arranque 9999. La pantalla va por debajo de la barra: el botón
   central tiene que seguir a mano para cerrarla. Lo que se fije abajo en otras hojas (css/*.css) tiene que dejar libre
   var(--barra-total); el aviso de error ya lo hace (más abajo).
   ============================================================================ */
.barra-inferior, .herramientas-pantalla, .topbar-logo, .topbar-ajustes { display: none; }

/* El color de la marca en la barra y en la pantalla. De noche --brand-2 sobre el fondo oscuro queda en ~3,5:1 y el texto
   chico pide 4,5:1: se aclara un poco. */
.barra-inferior, .herramientas-pantalla { --bi-activo: var(--brand-2); }
html[data-theme="dark"] .barra-inferior, html[data-theme="dark"] .herramientas-pantalla { --bi-activo: #6cc3cf; }

/* Con la pantalla abierta la página de atrás no se desplaza; al cerrarla (se quita la clase) vuelve a desplazarse. */
html.herramientas-abierta, html.herramientas-abierta body { overflow: hidden; }

@media (max-width: 880px) {
  :root {
    --barra-alto: 62px;                                                        /* sin el área segura del iPhone */
    --barra-total: calc(var(--barra-alto) + env(safe-area-inset-bottom, 0px));
  }

  /* La barra lateral no se muestra. Si la barra de abajo no llegó a armarse (algo falló), queda la franja de siempre. */
  .app-layout.con-barra-inferior .sidebar { display: none; }

  /* --- Encabezado: el .topbar con el fondo de la barra lateral --- */
  .topbar, html[data-theme="dark"] .topbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo titulo ajustes" "logo fecha ajustes";
    gap: 0 10px;                     /* el título y la fecha quedan pegados (el .topbar de arriba trae gap: 14px) */
    align-items: center;
    padding: calc(6px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 6px calc(14px + env(safe-area-inset-left, 0px));
    background: linear-gradient(180deg, #093a43 0%, #0c4953 45%, #0d4f5a 100%);
    border-bottom: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .topbar-logo {
    grid-area: logo;
    display: block;
    width: 34px; height: 34px;
    padding: 2px;
    border-radius: 50%;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
  }
  .topbar h2 {
    grid-area: titulo; align-self: end;
    min-width: 0;
    font-size: 17px; line-height: 1.2;
    color: #fff;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .topbar-fecha {
    grid-area: fecha; align-self: start;
    font-size: 11.5px; line-height: 1.3;
    color: rgba(255, 255, 255, 0.7);
  }
  .topbar-ajustes {
    grid-area: ajustes;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    cursor: pointer;
    touch-action: manipulation;
  }
  .topbar-ajustes .ic { width: 22px; height: 22px; }
  .topbar-ajustes:active { background: rgba(255, 255, 255, 0.18); }
  .topbar-ajustes:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

  /* Que la barra no tape el final de ninguna página: alto + área segura + un respiro. */
  .page { padding-bottom: calc(var(--barra-total) + 20px); }

  /* El aviso de error de util.js (abajo, centrado) sube por encima de la barra. */
  #aviso-error-global { bottom: calc(var(--barra-total) + 14px); }

  /* --- Barra inferior: cinco columnas iguales; el botón central va en la tercera --- */
  .barra-inferior {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--barra-total);
    padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: var(--card);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px -10px rgba(16, 42, 48, 0.28);
    -webkit-user-select: none; user-select: none;
  }
  .barra-inferior:empty { display: none; }

  /* Cada botón: ícono arriba y nombre abajo, pegados al fondo, así el nombre queda a la misma altura en los cinco. */
  .bi-boton {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px;
    min-width: 0; min-height: 44px;
    padding: 0 1px 6px;
    border: 0; border-radius: 0;
    background: none;
    color: var(--muted);
    /* 11 px, pero un nombre largo («Herramientas», «Colaboradores») no cabe en una quinta parte de un celular angosto:
       js/barra-inferior.js pone en --largo lo que mide cada nombre en «em» (con la letra del panel, en negrita) y el tamaño
       baja solo lo justo para que entre: una quinta parte del ancho, menos el relleno de los lados y con un 1 % de holgura. */
    font: inherit; font-size: min(11px, calc((20vw - 2px) / (var(--largo, 6) * 1.01))); font-weight: 600; line-height: 14px;
    cursor: pointer;
    touch-action: manipulation;
    transition: color 0.15s var(--ease), background 0.15s var(--ease);
  }
  .bi-boton:not(.bi-centro):active { background: var(--brand-light); }
  .bi-boton[aria-current="page"] { color: var(--bi-activo); font-weight: 700; }
  .bi-boton:focus-visible { outline: 2px solid var(--bi-activo); outline-offset: -3px; border-radius: 12px; }
  .bi-icono { display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; }
  .bi-icono .ic { width: 22px; height: 22px; }
  .bi-etiqueta { flex: none; display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* El botón central: un cuadrado de la marca, levantado sobre la barra. Su nombre queda alineado con los demás. */
  .bi-centro:focus-visible { outline: none; }
  .bi-centro .bi-icono {
    width: 52px; height: 52px;
    border-radius: 16px;
    background: linear-gradient(145deg, var(--brand-2), var(--brand));
    color: #fff;
    box-shadow: 0 8px 16px -6px rgba(13, 79, 90, 0.55), 0 2px 5px rgba(13, 79, 90, 0.25);
    transition: transform 0.15s var(--ease);
  }
  .bi-centro .bi-icono .ic { width: 26px; height: 26px; }
  .bi-centro:active .bi-icono { transform: scale(0.95); }
  .bi-centro:focus-visible .bi-icono { outline: 3px solid var(--bi-activo); outline-offset: 2px; }

  /* --- Pantalla «Herramientas»: a pantalla completa, sube desde abajo y deja libre la barra --- */
  .herramientas-pantalla {
    position: fixed; inset: 0; z-index: 40;
    display: flex; flex-direction: column;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) calc(var(--barra-total) + 14px) env(safe-area-inset-left, 0px);
    background: var(--bg);
    transform: translateY(100%);
    transition: transform 0.26s var(--ease);
    pointer-events: none;
  }
  .herramientas-pantalla.abierta { transform: none; pointer-events: auto; }
  .herramientas-pantalla:focus { outline: none; }

  .hp-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; max-width: 640px; margin: 0 auto; padding: 10px 12px 6px 20px; flex: none; }
  .hp-cab h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); }
  .hp-cerrar {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border: 1px solid var(--line); border-radius: 50%;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    touch-action: manipulation;
  }
  .hp-cerrar:active { background: var(--brand-light); }
  .hp-cerrar:focus-visible { outline: 2px solid var(--bi-activo); outline-offset: 2px; }

  .hp-cuerpo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: 8px 10px 18px; }
  .hp-grupo {
    max-width: 620px; margin: 0 auto;
    padding: 14px 4px 8px;
    background: var(--card);
    border: 1px solid var(--line); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .hp-grupo + .hp-grupo { margin-top: 12px; }
  .hp-grupo-titulo { margin: 0 0 8px 12px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
  .hp-rejilla { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 2px; }

  .hp-tarjeta {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 0; padding: 4px 0 6px;
    border: 0; border-radius: 14px;
    background: none;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none; user-select: none;
  }
  .hp-icono {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px;
    border-radius: 16px;
    background: var(--brand-light);
    color: var(--bi-activo);
    transition: transform 0.12s var(--ease);
  }
  .hp-icono .ic { width: 24px; height: 24px; }
  /* Más ancho que la tarjeta: «Colaboradores» no tiene que partirse en dos. Hasta dos líneas, sin cortar palabras. */
  .hp-nombre {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    width: calc(100% + 16px); overflow: hidden;
    font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center;
  }
  .hp-tarjeta:active .hp-icono { transform: scale(0.94); }
  .hp-tarjeta[aria-current="page"] .hp-icono { box-shadow: inset 0 0 0 2px var(--bi-activo); }
  .hp-tarjeta[aria-current="page"] .hp-nombre { font-weight: 700; }
  .hp-tarjeta:focus-visible { outline: 2px solid var(--bi-activo); outline-offset: 1px; }
}

/* Por debajo de 360 px la cuadrícula pasa a tres por fila. */
@media (max-width: 359.98px) {
  .hp-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Sin movimiento: la pantalla aparece y desaparece de golpe y los botones no se animan. */
@media (prefers-reduced-motion: reduce) {
  .herramientas-pantalla, .bi-boton, .bi-icono, .hp-icono { transition: none; }
  .bi-centro:active .bi-icono, .hp-tarjeta:active .hp-icono { transform: none; }
}

/* Al imprimir no sale la barra ni la pantalla, y el encabezado vuelve a ser texto oscuro sobre blanco. */
@media print {
  .barra-inferior, .herramientas-pantalla, .topbar-logo, .topbar-ajustes { display: none !important; }
  .topbar, html[data-theme="dark"] .topbar { background: none; }
  .topbar h2 { color: var(--ink); }
  .topbar-fecha { color: var(--muted); }
}