/* ============================================================
   INFRAMURGA — Design system
   ============================================================ */

/* Tipografía: se carga como <link> con preconnect (IM_FONTS_URL en helpers.php,
   emitida por inc.head.php) — un @import acá encadena la descarga detrás del CSS. */

/* El tamaño de la letra lo decide el sitio, no el navegador.

   Los navegadores de Android —Chrome y los que vienen de fábrica, que salen
   todos de Chromium— agrandan por su cuenta los bloques de texto largos, con
   un multiplicador que calculan solos según el ancho de la pantalla. Cuando en
   un mismo párrafo conviven varios tamaños —lo que pasa en un documento con
   marcas del editor— ese cálculo se descontrola y una sola letra puede llegar
   a tapar la pantalla entera.

   Pasó de verdad: un integrante de Ay Alberto abría el libreto más largo y le
   quedaba la pantalla de un solo color. En Chrome de escritorio y en iPhone se
   veía bien; en el navegador de su teléfono, no.

   `100%` NO le saca a nadie su preferencia de tamaño de letra del sistema: esa
   se sigue respetando entera. Lo único que apaga es el multiplicador que el
   navegador inventa encima. El prefijo -webkit- va primero porque es el que
   entienden los navegadores de Android; la propiedad sin prefijo es el
   estándar. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Tokens ─────────────────────────────────────────────── */
:root {
  --bordo-deep:    #3E0A19;
  --bordo:         #6B1A2E;
  --bordo-2:       #8B2540;
  --bordo-bright:  #A93151;
  /* Acento para TEXTO chico sobre fondos oscuros: --bordo-bright rinde ~3:1
     (falla AA); esta variante más clara llega a >=4.5:1. El tema light lo
     devuelve a --bordo-bright (que sobre claro sí pasa AA). Si el sitio
     configura su acento, inc.head.php deriva este token aclarando aquel. */
  --bordo-texto:   #D06A85;  /* 25/9: #C4526F daba 4,2:1 sobre las tarjetas oscuras nuevas */
  --crema:         #F0E4CC;
  --crema-bright:  #F8F1DD;
  --crema-mute:    rgba(240,228,204,.58);
  --crema-dim:     rgba(240,228,204,.34);
  /* Texto ENCIMA de un fondo bordó. Es el único crema que NO cambia con el
     tema: en el tema claro los "crema" se dan vuelta y se vuelven oscuros
     (ver más abajo), así que un texto sobre bordó que use --crema o
     --crema-bright queda oscuro sobre oscuro. Si el fondo es bordó, el texto
     va con este. */
  --sobre-bordo:   #F5EDD8;

  --ink:   #140A0E;
  --ink-2: #1D1015;
  --ink-3: #28161D;
  --ink-4: #341C25;
  --line:  rgba(240,228,204,.09);
  --line-2:rgba(240,228,204,.16);

  --gold: #C7A266;
  --good: #6FAE7D;
  --warn: #D49B5C;
  --bad:  #C95A6A;

  /* Colores de estado compartidos (antes hex sueltos repetidos por módulo).
     Texto de chips/labels sobre superficies oscuras; el tema light los oscurece. */
  --st-ok:     #7EE89A;  /* éxito, INSERT, cuota al día */
  --st-bad:    #F28B8B;  /* error suave, DELETE, anulado */
  --st-ambar:  #D4A820;  /* aviso, gestor, premio, serie */
  --ev-toque:  #E8A0AF;  /* rosa: toques, rol admin */
  --ev-ensayo: #8AB4F8;  /* azul: ensayos, UPDATE, cuota */

  --pad:    24px;
  --pad-sm: 14px;
  --r:      14px;
  --r-sm:   10px;

  --ff-display: "Playfair Display","Georgia","Times New Roman",serif;
  --ff-ui:      "DM Sans",system-ui,sans-serif;
  --ff-mono:    "JetBrains Mono",ui-monospace,monospace;

  /* ── Semantic theme tokens (overridden by data-theme) ── */
  --body-bg:
    radial-gradient(800px 600px at 80% -5%, rgba(139,37,64,.16), transparent 60%),
    radial-gradient(600px 400px at -5% 105%, rgba(62,10,25,.50), transparent 60%),
    var(--ink);
  --card-bg:      linear-gradient(180deg, rgba(40,22,29,.65), rgba(29,16,21,.65));
  --input-bg:     rgba(20,10,14,.60);
  --hover-subtle: rgba(240,228,204,.06);
  --row-hover:    rgba(240,228,204,.025);
}

/* ── Reset ────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* El atributo `hidden` esconde de verdad, siempre.

   Sin esto pierde contra cualquier clase que declare display —`.btn` es
   `inline-flex`— porque la hoja de autor le gana a la del navegador. El
   síntoma es un elemento marcado como oculto que igual se ve: pasó con el
   botón de instalar la app, que aparecía en iPhone (donde no hay API de
   instalación) y no hacía nada al tocarlo. `home.css` ya lo había parchado
   para un caso puntual; esta regla lo resuelve para todos. */
[hidden] { display: none !important; }

html, body {
  background: var(--ink);
  color: var(--crema);
  font-family: var(--ff-ui);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

body { background: var(--body-bg); background-attachment: fixed; }

/* Ninguna pantalla se arrastra de costado en el teléfono (Lucas, 28/9). Es
   la red: lo que se sale se arregla en su pantalla (lo mide un barrido con
   Playwright a 320/360/390), pero un píxel de más no vuelve a desplazar
   toda la página. `clip` y no `hidden`: no crea un contenedor de scroll, así
   que no rompe los `position: sticky`. */
html, body { overflow-x: clip; }

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* Sin outline azul por defecto — :focus-visible bordó se aplica abajo */
:focus { outline: none; }

/* ── Scrollbar ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: var(--bordo); }

/* ── Typography helpers ───────────────────────────────────── */
.display {
  font-family: var(--ff-display);
  font-weight: 500;
  letter-spacing: -.01em;
}
.display-italic {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 400;
}
.mono {
  font-family: var(--ff-mono);
  font-feature-settings: "tnum","zero";
}
/* Importes monetarios: el signo $ nunca se separa del número */
.amount {
  white-space: nowrap;
  display: inline-block;
}
.eyebrow {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--crema-mute);
}
.screen-title {
  font-family: var(--ff-display);
  font-size: 36px;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-weight: 500;
  color: var(--crema-bright);
}
.screen-title em { font-style: italic; color: var(--bordo-bright); font-weight: 400; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  font-family: var(--ff-ui);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--crema);
  cursor: pointer;
  transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
  white-space: nowrap;
  text-decoration: none;
}
.btn:hover { background: var(--hover-subtle); border-color: var(--crema-mute); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: linear-gradient(180deg, var(--bordo-2), var(--bordo));
  border-color: var(--bordo);
  /* --brand-on: lo inyecta inc.head.php por luminancia cuando el sitio configura
     un primario propio (un primario claro necesita texto oscuro, no crema) */
  color: var(--brand-on, var(--crema-bright));
  box-shadow: 0 4px 14px -4px rgba(107,26,46,.55), inset 0 1px 0 rgba(255,255,255,.08);
}
.btn-primary:hover {
  background: linear-gradient(180deg, var(--bordo-bright), var(--bordo-2));
  border-color: var(--bordo-2);
  box-shadow: 0 8px 22px -6px rgba(169,49,81,.6), inset 0 1px 0 rgba(255,255,255,.12);
}

.btn-block {
  width: 100%;
  border-radius: var(--r-sm);
  padding: 14px 18px;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.btn-cream {
  background: var(--crema);
  border-color: var(--crema);
  color: var(--bordo-deep);
}
.btn-cream:hover { background: var(--crema-bright); }

.btn-ghost {
  border-color: transparent;
  padding: 8px 12px;
}
.btn-ghost:hover { background: var(--hover-subtle); }

/* ── Cards ───────────────────────────────────────────────── */
.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--pad);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -16px rgba(0,0,0,.45);
}
.card-tight { padding: var(--pad-sm); }

.card-cream {
  background: var(--crema-bright);
  color: var(--bordo-deep);
  border-radius: var(--r);
  padding: var(--pad);
}

/* ── Stat tile ────────────────────────────────────────────── */
.stat {
  padding: 20px 22px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--card-bg);
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 28px -16px rgba(0,0,0,.45);
}
.stat-label {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--crema-dim);
  font-weight: 600;
}
.stat-value {
  font-family: var(--ff-display);
  /* clamp para que un importe de 6-7 cifras ($ 123.456) no desborde el tile
     en columnas angostas ni en móvil (antes 40px fijo). */
  font-size: clamp(24px, 7vw, 40px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--crema-bright);
  font-weight: 500;
  margin-top: 6px;
  overflow-wrap: anywhere;
  min-width: 0;
}
.stat-sub {
  font-family: var(--ff-mono);
  font-size: 11px;
  color: var(--good);
  margin-top: 4px;
}
.stat-sub.neg { color: var(--bad); }
.stat-good {
  background: linear-gradient(180deg, rgba(111,174,125,.18), rgba(20,10,14,.5));
  border-color: rgba(111,174,125,.35);
}
.stat-good .stat-label { color: rgba(111,174,125,.85); }
.stat-good .stat-value { color: var(--good); }
.stat-bad {
  background: linear-gradient(180deg, rgba(201,90,106,.18), rgba(20,10,14,.5));
  border-color: rgba(201,90,106,.35);
}
.stat-bad .stat-label { color: rgba(201,90,106,.85); }
.stat-bad .stat-value { color: var(--bad); }
.stat-bordo {
  background: linear-gradient(180deg, rgba(169,49,81,.22), rgba(20,10,14,.5));
  border-color: rgba(169,49,81,.4);
}

/* ── Inputs ─────────────────────────────────────────────── */
.input {
  width: 100%;
  padding: 12px 14px;
  background: var(--input-bg);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  color: var(--crema);
  font-family: var(--ff-ui);
  font-size: 14px;
  outline: none;
  transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
  appearance: none;
  -webkit-appearance: none;
}
.input:hover { border-color: var(--crema-dim); }
.input:focus {
  border-color: var(--bordo-bright);
  box-shadow: 0 0 0 3px rgba(169,49,81,.15);
}
.input::placeholder { color: var(--crema-dim); }

/* La flechita de los desplegables (Lucas, 28/9): con appearance:none el
   navegador saca la suya y un <select> se veía igual que un campo de texto,
   sin nada que dijera que se abre. Dos triángulos con el color del tema; va
   en background-image para no pisar el fondo de .input. */
select.input,
select.input-light {
  /* !important sólo en este lado: muchos selectores fijan su propio
     `padding` corto (.vm-select, .rf-selector-sel, .vt-filtro…) y el
     shorthand se comía el lugar de la flecha, que quedaba bajo el texto. */
  padding-right: 34px !important;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--crema-dim) 50%),
    linear-gradient(135deg, var(--crema-dim) 50%, transparent 50%);
  background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  text-overflow: ellipsis;
  cursor: pointer;
}
select.input[multiple],
select.input[size] { padding-right: 14px; background-image: none; }

.input-light {
  background: rgba(102,164,255,.06);
  border: 1px solid rgba(102,164,255,.18);
  border-radius: var(--r-sm);
  color: var(--bordo-deep);
  font-family: var(--ff-ui);
  font-size: 14px;
  outline: none;
  padding: 13px 15px;
  width: 100%;
  transition: border-color .14s;
}
.input-light:focus { border-color: var(--bordo); }

label.lbl {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--crema-dim);
}
label.lbl-dark { color: rgba(62,10,25,.65); }

/* ── Table ─────────────────────────────────────────────── */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th {
  text-align: left;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--crema-dim);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}
.tbl td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  color: var(--crema);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: var(--row-hover); }

/* ── Chips ─────────────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .03em;
  border: 1px solid var(--line-2);
  color: var(--crema-mute);
}
.chip-good { color: var(--good); border-color: rgba(111,174,125,.3); background: rgba(111,174,125,.08); }
.chip-bad  { color: var(--bad);  border-color: rgba(201,90,106,.3); background: rgba(201,90,106,.08); }
.chip-bordo{ color: var(--crema-bright); border-color: var(--bordo-2); background: var(--bordo); }
.chip-dot::before { content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }

/* ── Alert / flash ──────────────────────────────────────── */
.alert {
  padding: 13px 16px;
  border-radius: var(--r-sm);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid;
}
.alert-success {
  background: rgba(111,174,125,.12);
  border-color: rgba(111,174,125,.35);
  color: var(--good);
}
.alert-error {
  background: rgba(201,90,106,.12);
  border-color: rgba(201,90,106,.35);
  color: var(--bad);
}

/* ── Turnstile (partials/turnstile.blade.php) ─────────────
   Compartido por toda pantalla con el widget (login Y alta, spec
   2026-09-25): antes vivía sólo en login.css y el alta lo dibujaba sin
   estilos (ronda de arreglos 1, tarea 6). */
.ts-error {
  display: none;
  font-size: 13px;
  color: var(--bordo);
  background: rgba(201,90,106,.1);
  border: 1px solid rgba(201,90,106,.3);
  border-radius: 8px;
  padding: 10px 14px;
  margin-top: 4px;
  line-height: 1.5;
}
.ts-error .ts-reload {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--bordo-deep);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
/* El widget (~300px al desafiar) no debe desbordar la card en teléfonos
   angostos. */
.cf-turnstile { max-width: 100%; overflow: hidden; }

/* ── Nav items ──────────────────────────────────────────── */
.nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--crema-mute);
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
  text-decoration: none;
  border: 1px solid transparent;
  overflow: hidden;
}
.nav-item::after {
  content: "›";
  position: absolute;
  right: 18px;
  font-size: 18px;
  color: var(--crema-dim);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity .18s ease, transform .18s ease, color .18s ease;
}
.nav-item:hover {
  background: linear-gradient(90deg, rgba(107,26,46,.18), rgba(107,26,46,.04));
  color: var(--crema-bright);
  border-color: rgba(169,49,81,.28);
  transform: translateX(2px);
  box-shadow: 0 6px 18px -10px rgba(107,26,46,.5);
}
.nav-item:hover .nav-icon { color: var(--bordo-bright); }
.nav-item:hover::after { opacity: 1; transform: translateX(0); color: var(--bordo-bright); }
/* En el teléfono no hay hover: la flecha del ítem se queda invisible para
   siempre. Se muestra, apenas marcada (auditoría de celular, 21/9). */
@media (hover: none) {
  .nav-item::after { opacity: .5; transform: translateX(0); }
}
.nav-item:active { transform: translateX(2px) scale(.99); }
.nav-item.active {
  background: linear-gradient(90deg, var(--bordo), var(--bordo-deep));
  color: var(--crema-bright);
  border-color: var(--bordo-2);
  box-shadow: 0 8px 22px -8px rgba(107,26,46,.55);
}
.nav-icon { width: 18px; height: 18px; flex-shrink: 0; transition: color .18s ease; }

/* ── Logo ────────────────────────────────────────────────── */
.logo-wordmark {
  font-family: var(--ff-display);
  font-size: 16px;
  letter-spacing: .06em;
  color: var(--crema-bright);
  text-transform: uppercase;
  font-weight: 500;
}

/* ── Bar (progress) ─────────────────────────────────────── */
.bar {
  height: 6px;
  background: rgba(240,228,204,.08);
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--bordo-2), var(--bordo-bright));
  border-radius: 999px;
}

/* ── Divider ────────────────────────────────────────────── */
.divider { height: 1px; background: var(--line); margin: 20px 0; }

/* ── Layout helpers ─────────────────────────────────────── */
.row { display: flex; align-items: center; gap: 12px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.spacer { flex: 1; }
.center { text-align: center; }

/* ── Page wrapper ───────────────────────────────────────── */
.page {
  min-height: 100vh;
  padding: 32px 16px 80px;
}
.container {
  max-width: 480px;
  margin: 0 auto;
}
.container-lg {
  max-width: 720px;
  margin: 0 auto;
}

/* ── Layout de escritorio (dos columnas por módulo) ────────────
   En móvil y tablet estas clases no cambian nada: los .desk-col
   apilan en el orden del HTML, como siempre. Desde 1100px la
   página aprovecha el ancho real: cabecera (topbar/título/alertas)
   al 100% y el contenido repartido en dos columnas.
   Breakpoint 1000px: un notebook de 1366 con escala 125% de Windows
   queda en ~1092px de viewport — con 1100 nunca activaba. */
@media (min-width: 1000px) {
  .desk-max    { max-width: 1080px; }   /* módulos con tablas/grillas */
  .desk-max-sm { max-width: 760px; }    /* módulos de listas simples */
  .desk-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
  }
  .desk-cols-l { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } /* columna izquierda ancha */
  .desk-cols-r { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } /* columna derecha ancha */
  .desk-col    { min-width: 0; }
  .desk-sticky { position: sticky; top: 24px; }
  /* Tablas dentro de una columna: celdas compactas (como en móvil) para que
     las 6-7 columnas entren sin recortarse contra el borde de la card */
  .desk-col .tbl th, .desk-col .tbl td { padding: 10px 10px; font-size: 12px; }
  .desk-col .tbl th { font-size: 10px; }
}

/* ── Topbar / back row ───────────────────────────────────── */
.topbar-back {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.back-link {
  font-size: 13px;
  color: var(--crema-mute);
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  transition: color .12s;
}
.back-link:hover { color: var(--crema); }

/* ── Section header (title + sub) ────────────────────────── */
.section-head { margin-bottom: 22px; }
.section-head .eyebrow { margin-bottom: 4px; }

/* ── Collapsible ────────────────────────────────────────── */
.collapse-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: inherit;
  font-family: inherit;
}
.collapse-trigger:hover { opacity: .85; }

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.fade-in { animation: fadeUp .3s ease both; }

/* ── Focus ──────────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--bordo-bright); outline-offset: 2px; border-radius: 6px; }

/* ================================================================
   DARK THEME
   ================================================================ */
/* Desde el 24/9 son EXACTAMENTE los colores del documento de opciones de
   Página pública (Lucas: «me fascina el color que usaste, que sean los del
   tema oscuro en toda la web»). Tinta casi negra con un dejo bordó, tarjetas
   lisas un escalón más claras, líneas finas y sin los dos brillos bordó del
   fondo: el color lo ponen el acento y el contenido, no el lienzo.
   Antes era una gama más violácea (#20111A / #2C1822) con degradados. */
html[data-theme="dark"] {
  /* Controles nativos (el ícono y el selector de los campos de fecha, las
     barras de scroll) en el tono del tema (auditoría 27/9, I3). */
  color-scheme: dark;
  --ink:   #140A0E;
  --ink-2: #1D1015;
  --ink-3: #28161D;
  --ink-4: #341C25;
  --crema-mute:  rgba(240,228,204,.60);
  /* .52 y no el .34 del documento: con .34 las ayudas chicas quedaban en
     2,7:1 sobre las tarjetas; con .52 pasan el 4,5:1 (PanelTest). */
  --crema-dim:   rgba(240,228,204,.52);
  --line:        rgba(240,228,204,.10);
  --line-2:      rgba(240,228,204,.18);
  --body-bg:      var(--ink);
  --card-bg:      var(--ink-2);
  --input-bg:     var(--ink);
  --hover-subtle: rgba(240,228,204,.06);
  --row-hover:    rgba(240,228,204,.03);
}
/* Sin el resplandor del color del sitio: en el documento el lienzo es liso. */
html[data-theme="dark"] body::before { opacity: 0; }
html[data-theme="dark"] .stat-good {
  background: linear-gradient(180deg, rgba(111,174,125,.18), var(--ink-2));
}
html[data-theme="dark"] .stat-bad {
  background: linear-gradient(180deg, rgba(201,90,106,.18), var(--ink-2));
}
html[data-theme="dark"] .stat-bordo {
  background: linear-gradient(180deg, rgba(169,49,81,.22), var(--ink-2));
}

/* ================================================================
   MEDIUM THEME
   ================================================================ */
html[data-theme="medium"] {
  /* Controles nativos (el ícono y el selector de los campos de fecha, las
     barras de scroll) en el tono del tema (auditoría 27/9, I3). */
  color-scheme: dark;
  --ink:   #321728;
  --ink-2: #421E35;
  --ink-3: #512542;
  --ink-4: #62304E;
  --crema-mute:  rgba(240,228,204,.80);
  --crema-dim:   rgba(240,228,204,.58);  /* 25/9: .55 daba 4,48:1 */
  --line:        rgba(240,228,204,.16);
  --line-2:      rgba(240,228,204,.28);
  --body-bg:
    radial-gradient(800px 600px at 80% -5%, rgba(139,37,64,.35), transparent 60%),
    radial-gradient(600px 400px at -5% 105%, rgba(62,10,25,.70), transparent 60%),
    var(--ink);
  --card-bg:      linear-gradient(180deg, rgba(65,30,52,.76), rgba(45,20,38,.76));
  --input-bg:     rgba(36,16,30,.65);
  --hover-subtle: rgba(240,228,204,.09);
  --row-hover:    rgba(240,228,204,.055);
}
html[data-theme="medium"] .stat-good {
  background: linear-gradient(180deg, rgba(111,174,125,.25), rgba(45,20,38,.68));
}
html[data-theme="medium"] .stat-bad {
  background: linear-gradient(180deg, rgba(201,90,106,.25), rgba(45,20,38,.68));
}
html[data-theme="medium"] .stat-bordo {
  background: linear-gradient(180deg, rgba(169,49,81,.30), rgba(45,20,38,.68));
}

/* ================================================================
   LIGHT THEME
   ================================================================ */
html[data-theme="light"] {
  /* Controles nativos (el ícono y el selector de los campos de fecha, las
     barras de scroll) en el tono del tema (auditoría 27/9, I3). */
  color-scheme: light;
  /* Tostado cálido (Lucas, 25/9, con una captura de referencia): el fondo
     baja a #D3C5A8 y la barra lateral (--ink-2) queda un escalón abajo, como
     en la referencia. Antes era crema (#E6DBC2) con tarjetas casi blancas
     encima, y el contraste entre las dos cosas se leía como recortes. */
  --ink:          #D3C5A8;
  --ink-2:        #C7B898;
  --ink-3:        #BCAB88;
  --ink-4:        #AE9B74;
  --crema:        #3E0A19;
  --crema-bright: #1A0408;
  /* Textos secundarios más oscuros → mejor lectura de labels/eyebrow/subtítulos */
  /* Subidos el 25/9 con el fondo tostado: .62 daba 4,0:1 sobre el fondo y
     3,8:1 sobre la barra lateral. Con .72 y .82, todo pasa AA (≥ 4,5:1). */
  --crema-mute:   rgba(62,10,25,.82);
  --crema-dim:    rgba(62,10,25,.72);
  /* Acento de texto chico: #A93151 daba 3,3:1 sobre la barra tostada (los
     títulos de sección del menú); este da 4,6:1 ahí y 6,6:1 en las tarjetas. */
  --bordo-texto:  #84203D;
  /* Semánticos más oscuros para texto sobre superficies claras */
  --gold:         #9C7A36;
  --good:         #276A40;  /* 25/9: #3E8E5A daba 3,6:1 sobre la tarjeta clara */
  --warn:         #7A5A12;  /* 25/9: #A9722B daba 3,6:1 */
  --bad:          #9E2C3B;  /* 25/9: #B23A4A daba 4,4:1 sobre la tarjeta tostada */
  --st-ok:        #2F7D4B;
  --st-bad:       #9E2C3B;
  --st-ambar:     #8A6A1B;
  --ev-toque:     #8B2540;
  --ev-ensayo:    #2E5FA3;
  /* Bordes/divisiones más visibles, sin verse pesados */
  --line:         rgba(62,10,25,.14);
  --line-2:       rgba(62,10,25,.24);
  /* Más presencia del bordó (22/9). Eran dos focos y ahora son tres: el de
     arriba a la derecha sube de .10 a .17, y se suma uno abajo a la derecha
     para que la sombra no quede sólo en una esquina. El foco claro de abajo a
     la izquierda se mantiene: es el que evita que el conjunto se apague. */
  --body-bg:
    radial-gradient(800px 600px at 80% -5%, rgba(107,26,46,.17), transparent 60%),
    radial-gradient(700px 500px at 105% 90%, rgba(107,26,46,.11), transparent 62%),
    radial-gradient(600px 400px at -5% 105%, rgba(252,246,233,.5), transparent 60%),
    var(--ink);
  /* Beige claro del mismo material que el fondo (25/9): la referencia de
     Lucas las tenía en #DDD1B5, casi pegadas al fondo, y pidió «más claro
     aún». Siguen siendo la superficie más clara —lo que las separa—, junto
     con el borde y la sombra. Historia: #FCF7EB y #F8F1E1 (22/9) se leían
     como papel pegado encima. */
  --card-bg:      #E8DFC8;
  --input-bg:     #E0D6BD;
  --hover-subtle: rgba(62,10,25,.07);
  --row-hover:    rgba(62,10,25,.035);
}

/* Scrollbar en modo claro */
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(62,10,25,.22); }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: rgba(62,10,25,.42); }

/* Textos sobre fondo bordo: deben mantenerse crema, no oscuros */
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .chip-bordo { color: var(--sobre-bordo); }

/* Login card en modo claro. Era blanco puro (#FFFFFF) y quedaba como una hoja
   de papel pegada sobre el crema: es lo primero que ve alguien que entra, y no
   se parecía al resto del sitio. Crema claro, un punto por encima de las cards
   del panel para que siga siendo la superficie que manda en esa pantalla. */
html[data-theme="light"] .card-cream { background: #EEE6D2; }

/* Stat variants en modo claro (sin degradado oscuro en la base) */
html[data-theme="light"] .stat-good  { background: rgba(111,174,125,.16); border-color: rgba(111,174,125,.40); }
html[data-theme="light"] .stat-bad   { background: rgba(201,90,106,.14);  border-color: rgba(201,90,106,.40); }
html[data-theme="light"] .stat-bordo { background: rgba(107,26,46,.12);   border-color: rgba(107,26,46,.35); }

/* Nav active en modo claro: shadow visible */
html[data-theme="light"] .nav-item.active { box-shadow: 0 2px 10px rgba(107,26,46,.22); }

/* Cards y stats en claro: separación y profundidad con sombra cálida suave
   (la sombra base es un glow negro que sobre crema se ve sucio/débil) */
html[data-theme="light"] .card,
html[data-theme="light"] .stat {
  border-color: var(--line-2);
  box-shadow: 0 1px 2px rgba(62,10,25,.05), 0 10px 24px -14px rgba(62,10,25,.20);
}

/* Divisores más visibles en claro */
html[data-theme="light"] .divider { background: rgba(62,10,25,.16); }

/* Botones secundarios apoyados sobre la card (que no "floten").
   Se excluye .btn-ghost para que los botones-ícono de tablas sigan minimal. */
html[data-theme="light"] .btn:not(.btn-primary):not(.im-btn-danger):not(.btn-cream):not(.btn-ghost) {
  background: rgba(62,10,25,.045);
  border-color: var(--line-2);
}

/* Métricas con color: etiquetas legibles en claro (las base son rgba claras) */
html[data-theme="light"] .stat-good .stat-label { color: var(--good); }
html[data-theme="light"] .stat-bad  .stat-label { color: var(--bad); }

/* Modal/toasts ya usan tokens de tema → acompañan el modo claro */

/* Alert backgrounds en modo claro funcionan bien sin cambios */

/* ================================================================
   MOBILE — viewports angostos
   ================================================================ */
@media (max-width: 640px) {
  .page          { padding: 18px 12px 60px; }
  .screen-title  { font-size: 28px; }
  .section-head  { margin-bottom: 16px; }

  .stat          { padding: 14px 16px; }
  .stat-value    { font-size: clamp(22px, 8vw, 30px); margin-top: 4px; }
  .stat-label    { font-size: 10px; }

  .card          { padding: 18px; }
  .card-tight    { padding: 12px; }

  .topbar-back   { margin-bottom: 18px; }

  /* Tabla más compacta */
  .tbl th, .tbl td { padding: 10px 10px; font-size: 12px; }
  .tbl th          { font-size: 10px; }

  /* Botones más compactos de letra, pero nunca más bajos que un dedo: con el
     padding solo quedaban en 38px (auditoría de celular, 21/9). */
  .btn             { padding: 10px 14px; font-size: 12px; min-height: 40px; }
  .btn-block       { padding: 13px 16px; font-size: 12px; }

  /* Nav items un poco más densos */
  .nav-item        { padding: 12px 14px; font-size: 12px; gap: 10px; }

  /* Inputs con tamaño que evite zoom en iOS (>= 16px). Incluye .input-light,
     que usa EXCLUSIVAMENTE el login (usuario/contraseña): en 14px iOS hacía
     auto-zoom al enfocar y desplazaba toda la pantalla de ingreso. */
  .input, .input-light { font-size: 16px; padding: 11px 12px; }
}

/* El mismo freno, para los campos que lo perdían.
   El de arriba se declara temprano, así que cualquier hoja de módulo que
   después fije su propio `font-size` lo anula y iOS vuelve a hacer zoom al
   enfocar (auditoría de celular, 21/9). Estos seis lo hacían; van acá, al
   final, para ganar por orden: el padding chico de cada uno se respeta, lo
   único que se devuelve es el tamaño de letra. */
@media (max-width: 640px) {
  .rf-selector-sel,
  .ct-color-hex,
  .ap-color-text,
  .ap-modulo-alcance .input,
  .dc-hoja-select,
  .au-reset-input { font-size: 16px; }
}

/* Pantallas muy chicas (≤ 380px): apretar aún más */
@media (max-width: 380px) {
  .screen-title    { font-size: 24px; }
  .stat-value      { font-size: 26px; }
  .card            { padding: 14px; }
}

/* ================================================================
   CALENDARIO — vista mensual
   ================================================================ */
.cal-card { padding: 18px; }
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px;
}
.cal-title { font-size: 20px; color: var(--crema-bright); }
.cal-navbtn {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--crema-mute); border: 1px solid var(--line-2);
  background: var(--hover-subtle); transition: all .15s;
}
.cal-navbtn:hover { color: var(--crema-bright); border-color: var(--bordo-bright); }

/* minmax(0,1fr): sin el mínimo 0, un título largo (nowrap) fija el min-content
   de la celda y las 7 columnas desbordan la card */
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cal-dow {
  text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--crema-dim); padding: 6px 0 8px;
}
.cal-cell {
  min-height: 62px; border-radius: 8px; padding: 5px 6px;
  background: var(--hover-subtle); display: flex; flex-direction: column; gap: 3px;
  min-width: 0; overflow: hidden;
}
.cal-empty { background: transparent; }
.cal-has { cursor: pointer; transition: background .15s; }
.cal-has:hover { background: var(--row-hover); outline: 1px solid var(--line-2); }
.cal-num {
  font-family: var(--ff-mono); font-size: 12px; color: var(--crema-mute); line-height: 1;
}
.cal-hoy .cal-num {
  background: var(--bordo); color: var(--sobre-bordo);
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 600;
}
.cal-evs { display: flex; flex-direction: column; gap: 2px; overflow: hidden; }
.cal-evt {
  display: flex; align-items: center; gap: 4px; font-size: 10px;
  color: var(--crema); white-space: nowrap; overflow: hidden;
}
.cal-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c, #b9a98f); flex-shrink: 0; }
.cal-evt-txt { overflow: hidden; text-overflow: ellipsis; }
.cal-more { font-size: 10px; color: var(--crema-dim); padding-left: 2px; }

.cal-detalle { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.cal-detalle-head {
  font-size: 13px; font-weight: 600; color: var(--bordo-texto);
  margin-bottom: 10px; text-transform: capitalize;
}
.cal-detalle-evt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; }
.cal-detalle-evt .cal-dot { margin-top: 5px; width: 8px; height: 8px; }

/* Selector de días de la semana */
.dow-picker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.dow-opt { position: relative; cursor: pointer; }
.dow-opt input { position: absolute; opacity: 0; pointer-events: none; }
.dow-opt span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; padding: 8px 6px; border-radius: 8px; font-size: 12px;
  border: 1px solid var(--line-2); background: var(--input-bg); color: var(--crema-mute);
  transition: all .12s;
}
/* El día elegido queda con fondo bordó: el texto va con --sobre-bordo o en
   el tema claro no se lee CUÁLES quedaron marcados. */
.dow-opt input:checked + span {
  background: var(--bordo); border-color: var(--bordo-2);
  color: var(--sobre-bordo); font-weight: 600;
}

@media (max-width: 640px) {
  .cal-card { padding: 14px; }
  .cal-grid { gap: 3px; }
  .cal-cell { min-height: 42px; padding: 4px 3px; align-items: center; }
  .cal-num  { font-size: 11px; }
  .cal-evt-txt, .cal-more { display: none; }      /* en móvil: solo puntos */
  .cal-evs { flex-direction: row; flex-wrap: wrap; gap: 3px; justify-content: center; }
  .cal-evt { gap: 0; }
}

/* ================================================================
   TINTE DEL SITIO — el color de fondo configurable como glow sutil
   (se inyecta --site-fondo en inc.head.php; respeta los 3 modos)
   ================================================================ */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(1000px 600px at 50% -8%, var(--site-fondo, transparent), transparent 62%);
  opacity: .14;
}
html[data-theme="light"] body::before { opacity: .10; }

/* ================================================================
   TABLAS RESPONSIVE — en móvil se vuelven tarjetas apiladas
   (sin scroll lateral). Requiere class .tbl-cards y data-label en <td>.
   ================================================================ */
@media (max-width: 640px) {
  .tbl-cards { border-collapse: separate; }
  .tbl-cards thead { display: none; }
  .tbl-cards, .tbl-cards tbody, .tbl-cards tr, .tbl-cards td { display: block; width: 100%; }
  .tbl-cards tr {
    border: 1px solid var(--line-2);
    border-radius: 12px;
    padding: 6px 14px;
    margin-bottom: 10px;
    background: var(--row-hover);
  }
  .tbl-cards td {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 8px 0 !important;
    border: none !important;
    text-align: right !important;
    white-space: normal !important;
    min-height: 0;
  }
  .tbl-cards td + td { border-top: 1px solid var(--line) !important; }
  .tbl-cards td::before {
    content: attr(data-label);
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--crema-dim);
    text-align: left;
  }
  /* Celdas sin etiqueta (acciones) ocupan toda la fila y centran su contenido */
  .tbl-cards td[data-label=""]::before,
  .tbl-cards td.acciones::before { content: none; }
  .tbl-cards td.acciones { justify-content: flex-end; }
  /* Filas sin acciones (cuotas, anuladas de no-admin) emiten un td.acciones
     vacío: en modo tarjeta pintaba una franja de ~17px con divisor al pie.
     Ocultarla cuando no tiene contenido. */
  .tbl-cards td.acciones:empty { display: none; }
  /* Si la fila envuelve un wrapper con overflow, anularlo en móvil */
  .tbl-wrap { overflow-x: visible !important; }
}

/* ================================================================
   TOASTS + MODAL — componentes JS compartidos (assets/js/im.js)
   Usan los tokens de tema, así respetan dark / medium / light.
   ================================================================ */
@keyframes imToastIn {
  from { opacity: 0; transform: translateY(-10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}
@keyframes imToastOut {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(-8px) scale(.98); }
}
@keyframes imBackdropIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes imModalIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* ── Toasts ─────────────────────────────────────────────── */
.im-toasts {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 24px));
  pointer-events: none;
}
.im-toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-2);
  border-left-width: 3px;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 12px 32px -14px rgba(0,0,0,.5);
  color: var(--crema);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
  animation: imToastIn .26s ease both;
}
.im-toast.im-out { animation: imToastOut .2s ease forwards; }
.im-toast-ico { flex-shrink: 0; width: 16px; height: 16px; margin-top: 1px; }
.im-toast-msg { flex: 1; min-width: 0; word-break: break-word; }
.im-toast-success { border-left-color: var(--good); }
.im-toast-success .im-toast-ico { color: var(--good); }
.im-toast-error   { border-left-color: var(--bad); }
.im-toast-error .im-toast-ico { color: var(--bad); }
.im-toast-info    { border-left-color: var(--bordo-bright); }
.im-toast-info .im-toast-ico { color: var(--bordo-bright); }

@media (max-width: 560px) {
  .im-toasts { top: 10px; left: 10px; right: 10px; width: auto; }
}

/* ── Modal de confirmación ──────────────────────────────── */
.im-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9990;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  /* viñeta sutil: oscurece los bordes y deja el foco en el centro/contenido */
  background: radial-gradient(120% 120% at 50% 38%, rgba(20,10,14,.40), rgba(8,4,6,.68));
  backdrop-filter: blur(6px) saturate(1.04);
  -webkit-backdrop-filter: blur(6px) saturate(1.04);
  animation: imBackdropIn .22s ease both;
}
.im-modal {
  position: relative;
  width: 100%;
  max-width: 416px;
  background: var(--card-bg);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  padding: 30px 30px 26px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(255,255,255,.02),
    0 40px 90px -28px rgba(0,0,0,.80),
    0 24px 60px -34px rgba(107,26,46,.55);
  animation: imModalIn .3s cubic-bezier(.16,.84,.36,1) both;
}
/* filo superior cálido, como las cards premium del sistema */
.im-modal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  border-radius: 20px 20px 0 0;
  background: linear-gradient(90deg, transparent, rgba(240,228,204,.20), transparent);
  pointer-events: none;
}
.im-modal-badge {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  border: 1px solid var(--line-2);
}
.im-modal-badge svg { width: 22px; height: 22px; }
.im-modal-badge-danger  { background: rgba(201,90,106,.13);  border-color: rgba(201,90,106,.32); color: var(--bad); }
.im-modal-badge-warn    { background: rgba(212,155,92,.13);  border-color: rgba(212,155,92,.32); color: var(--warn); }
.im-modal-badge-info    { background: rgba(169,49,81,.13);   border-color: rgba(169,49,81,.30);  color: var(--bordo-texto); }
.im-modal-badge-success { background: rgba(111,174,125,.13); border-color: rgba(111,174,125,.32); color: var(--good); }
.im-modal-eyebrow { margin-bottom: 9px; color: var(--bordo-texto); }
.im-modal-title {
  font-family: var(--ff-display);
  font-size: 23px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -.01em;
  color: var(--crema-bright);
  margin-bottom: 10px;
}
.im-modal-msg {
  font-size: 14px;
  color: var(--crema-mute);
  line-height: 1.6;
  margin-bottom: 26px;
  max-width: 42ch;
}
.im-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}
.im-modal-actions .btn { min-width: 104px; }
/* variante en columna: modal de elección con varias opciones apiladas */
.im-modal-actions.es-col { flex-direction: column; align-items: stretch; }
.im-modal-actions.es-col .btn { width: 100%; }
/* botón destructivo: mismo acabado premium que .btn-primary, en rojo del sistema */
.im-btn-danger {
  background: linear-gradient(180deg, #D06B79, #B0414F);
  border-color: #B0414F;
  color: #fff;
  box-shadow: 0 4px 14px -4px rgba(201,90,106,.50), inset 0 1px 0 rgba(255,255,255,.12);
}
.im-btn-danger:hover {
  background: linear-gradient(180deg, #DA7A87, #C04D5B);
  border-color: #C04D5B;
  box-shadow: 0 8px 22px -6px rgba(201,90,106,.55), inset 0 1px 0 rgba(255,255,255,.16);
}

@media (max-width: 480px) {
  .im-modal { padding: 26px 22px 22px; border-radius: 18px; }
  .im-modal-actions { flex-direction: column-reverse; }
  .im-modal-actions.es-col { flex-direction: column; } /* opciones arriba, cancelar abajo */
  .im-modal-actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .im-toast, .im-modal, .im-modal-backdrop { animation-duration: .01ms !important; }
  /* Sensibilidad al movimiento: sin fades de página ni lifts de hover */
  .fade-in { animation: none !important; }
  .btn, .btn:hover, .nav-item, .nav-item:hover { transition: none !important; transform: none !important; }
}

/* ── Colapsables (menú principal y otros) ───────────────── */
.im-collapsed { display: none !important; }
.im-chevron { transition: transform .2s ease; flex-shrink: 0; }
[data-collapse][aria-expanded="false"] .im-chevron { transform: rotate(-90deg); }

.menu-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 8px;
  background: none;
  border: none;
  padding: 0 4px;
  margin-bottom: 10px;
  cursor: pointer;
  color: var(--bordo-texto);
  font-family: inherit;
}
/* Etiquetas de sección legibles en cualquier tema (oscuro es el default).
   En oscuro/medio usan el bordo claro; en claro, el bordo fuerte. */
.menu-sec-label { color: var(--bordo-texto); }
html[data-theme="light"] .menu-sec-head,
html[data-theme="light"] .menu-sec-label { color: var(--bordo); }
.menu-sec-head:hover .menu-sec-label,
.menu-sec-head:hover .im-chevron { color: var(--crema-bright); }

/* ── Botones del selector de tema (viven en .tema-corner) ─ */
.tema-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 999px;
  color: var(--crema-mute);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.tema-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
.tema-btn:hover { color: var(--crema-bright); }
.tema-btn.is-active {
  background: linear-gradient(180deg, var(--bordo-2), var(--bordo));
  color: #F5EDD8;
  box-shadow: 0 2px 8px -3px rgba(107,26,46,.5), inset 0 1px 0 rgba(255,255,255,.08);
}
/* La pastilla del selector de tema: los tres botones (oscuro, medio, claro)
   agrupados en una cápsula. */
.tema-pastilla {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--input-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.tema-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Dentro de una pantalla (Documentos): al ras del contenido y discreto. */
.tema-fila:not(.tema-corner) { margin-bottom: 14px; }
.tema-fila .tema-btn { flex: none; width: 34px; height: 30px; padding: 0; gap: 0; }

/* ── Selector de tema fijo — esquina superior izquierda ── */
.tema-corner {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
}
.tema-corner .tema-btn {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  gap: 0;
}
.tema-corner .tema-btn svg { width: 14px; height: 14px; }
/* Cuando un admin usa "Ver como", el banner sticky (z-index 9000) tapaba el
   selector de tema (z-index 200) en la esquina. La clase .has-imp-banner que
   agrega inc.head.php al body existía pero no tenía regla: acá se usa para
   bajar el selector debajo del banner. También se agranda el toque en móvil. */
body.has-imp-banner .tema-corner { top: 56px; }
@media (max-width: 640px) {
  .tema-corner .tema-btn { width: 40px; height: 40px; }
  /* La pastilla que va dentro de la pantalla (leer o escribir un documento)
     se toca igual que la de la esquina: tenía 34×30 (auditoría del 21/9). */
  .tema-fila:not(.tema-corner) .tema-btn { width: 40px; height: 40px; }
}

/* ── Honeypot anti-bot (campo trampa, fuera de pantalla) ── */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ── Mostrar/ocultar contraseña ─────────────────────────── */
.pw-wrap { position: relative; }
.pw-wrap .input-light,
.pw-wrap .input { padding-right: 44px; }
.pw-toggle {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  background: none;
  border-radius: 8px;
  color: var(--crema-mute);
  cursor: pointer;
  transition: color .15s ease, background .15s ease;
}
.pw-toggle:hover { color: var(--crema-bright); background: var(--hover-subtle); }
/* Sobre inputs claros (ej. login con .input-light): ícono oscuro fijo */
.pw-toggle.on-light { color: rgba(62,10,25,.5); }
.pw-toggle.on-light:hover { color: rgba(62,10,25,.85); background: rgba(62,10,25,.06); }
.pw-toggle svg { width: 18px; height: 18px; }
/* En móvil agrandar el área de toque del ojo (30px era chico). El input ya
   reserva 44px de padding-right, así que 40px entra sin pisar el texto. */
@media (max-width: 640px) { .pw-toggle { width: 40px; height: 40px; right: 4px; } }
.pw-toggle .pw-eye-off { display: none; }
.pw-toggle.is-on .pw-eye-on  { display: none; }
.pw-toggle.is-on .pw-eye-off { display: block; }

/* ================================================================
   "Ver como" — banner sticky cuando un admin impersona otro rol
   ================================================================ */
#im-imp-banner {
  position: sticky;
  top: 0;
  z-index: 9000;
  background: linear-gradient(180deg, #6b1a2e, #4d1320);
  border-bottom: 1px solid rgba(255,255,255,.18);
  color: #f6e7c4;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,.5);
}
.im-imp-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  font-family: var(--ff-ui);
  font-size: 13px;
  flex-wrap: wrap;
}
.im-imp-ico {
  display: inline-flex;
  align-items: center;
  color: #f6c97a;
  flex-shrink: 0;
}
.im-imp-label { color: #f6e7c4; }
.im-imp-label strong {
  color: #fff;
  font-weight: 600;
  text-transform: capitalize;
}
.im-imp-sub {
  color: rgba(246,231,196,.55);
  font-size: 11px;
  font-family: var(--ff-mono);
}
.im-imp-form { margin-left: auto; }
.im-imp-btn {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  color: #fff;
  font-family: var(--ff-ui);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease;
}
.im-imp-btn:hover {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.45);
}
@media (max-width: 480px) {
  .im-imp-inner { padding: 7px 12px; font-size: 12px; gap: 8px; }
  .im-imp-sub   { display: none; }
  .im-imp-btn   { font-size: 11px; padding: 5px 11px; }
}

/* ============ Pie "Creado por MiSplash" (assets/inc.footer.php) ============ */
.sg-footer { margin: 36px auto 16px; text-align: center; }
.sg-footer a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  opacity: .55;
  transition: opacity .15s ease;
}
.sg-footer a:hover { opacity: .85; }
.sg-footer img {
  width: 26px; height: auto; display: block;
  animation: sg-splash-float 3s ease-in-out infinite;
}
.sg-footer span { font-size: 11px; color: var(--crema-dim); }
.sg-footer .sg-footer-marca { font-weight: 700; }
@keyframes sg-splash-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
  .sg-footer img { animation: none; }
}

/* Monograma SVG compartido (assets/inc.logo.php) */
.logo-mark { flex-shrink: 0; }

/* Desplegable "Ver como otro rol" del menú (home) */
details.nav-details > summary { list-style: none; cursor: pointer; }
details.nav-details > summary::-webkit-details-marker { display: none; }
details.nav-details > summary .im-chevron { transition: transform .2s ease; }
details.nav-details[open] > summary .im-chevron { transform: rotate(180deg); }
/* El nav-item dibuja su propia flecha "›" al hover; acá el chevron del
   desplegable ya cumple ese rol — sin esto se superponen las dos flechas. */
details.nav-details > summary.nav-item::after { content: none; }

/* ============ Módulos: clases compartidas (migración CSP) ============ */
.section-head .screen-title { margin-top: 6px; }
.section-sub { font-size: 13px; color: var(--crema-mute); margin-top: 4px; }
/* ── Checkboxes de marca ──────────────────────────────────────────────
   Reemplazo del control nativo en todo el sitio: caja redondeada con los
   tokens del tema; al marcar se pinta del COLOR PRIMARIO configurable
   (--bordo, lo pisa inc.head.php con la paleta del sitio) y la tilde usa
   --brand-on (contraste por luminancia; fallback crema). */
input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  /* 19px y no 18: con el borde da un cuadrado de 20, que es el mínimo que se
     ve como control y no como adorno. El tamaño lo fija SOLO esta regla —
     había módulos pisándolo con 15, 16 y 18px, y el mismo control se veía de
     tres tamaños según la pantalla (Lucas, 23/9). */
  width: 19px; height: 19px; margin: 0; flex-shrink: 0;
  border: 1.5px solid var(--line-2); border-radius: 6px;
  background: var(--input-bg);
  display: inline-grid; place-content: center;
  cursor: pointer; vertical-align: middle;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
input[type="checkbox"]::before {
  content: ""; width: 10px; height: 10px;
  clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 82% 2%, 39% 62%);
  background: var(--brand-on, #F8F1DD);
  /* Entra girando un poco: el salto seco de 0 a 1 se leía como un parpadeo.
     `cubic-bezier` con rebote corto — se nota que pasó algo sin hacer
     esperar. */
  transform: scale(0) rotate(-12deg);
  transition: transform .18s cubic-bezier(.2, 1.4, .4, 1);
}
input[type="checkbox"]:checked {
  background: var(--bordo); border-color: var(--bordo);
  /* Un halo tenue del color de marca: separa el marcado del sin marcar de un
     vistazo, en una lista de ocho, sin agregar un color nuevo. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bordo) 18%, transparent);
}
input[type="checkbox"]:checked::before { transform: scale(1) rotate(0); }
input[type="checkbox"]:hover:not(:disabled):not(:checked) {
  border-color: var(--bordo);
  background: var(--hover-subtle);
}
input[type="checkbox"]:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
/* La etiqueta de al lado también es el control: sin esto hay que apuntarle al
   cuadradito de 19px, que en el teléfono se erra seguido. */
label:has(> input[type="checkbox"]) { cursor: pointer; }
@media (prefers-reduced-motion: reduce) {
  input[type="checkbox"], input[type="checkbox"]::before { transition: none; }
}

/* ── Texto solo para lectores de pantalla ───────────────────────────────
   Está en el documento y lo anuncia el lector, pero no ocupa un píxel. Es
   para lo que en pantalla se entiende por su lugar y para el que escucha no
   existe: el encabezado de la columna de acciones, el nombre de un control
   que solo muestra un ícono.

   No se usa `display: none` ni `visibility: hidden` porque esos también lo
   esconden del lector, que es justo lo contrario de lo que se busca. */
.im-solo-lectores {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Inputs de archivo con botón de marca (los arma im.js) ──────────────
   El input nativo queda oculto pero funcional; el botón Cargar lo dispara
   y el nombre elegido aparece al lado recién tras seleccionar. */
.im-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.im-file-input {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.im-file-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; }
.im-file-nombre {
  font-size: 12px; color: var(--crema-mute); font-family: var(--ff-mono);
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 100%;
}
.im-file-nombre:empty { display: none; }
.card-flush { padding: 0; overflow: hidden; }
.tbl-wrap { overflow-x: auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Los pares de campos colapsan a una columna en teléfonos (regla global;
   antes cada módulo repetía su propio parche). */
@media (max-width: 640px) { .grid2 { grid-template-columns: 1fr; } }

/* Barra de rifas (_nav.php): selector de rifa y aviso de finalizada. Globales
   porque el partial se incluye en páginas que no cargan rifas.css. */
.rf-selector { gap: 10px; align-items: center; }
.rf-selector .lbl { margin: 0; }
.rf-selector-sel { flex: 1; min-width: 0; max-width: 420px; font-size: 13px; padding: 9px 12px; }
.rf-alert-warn { background: rgba(180,140,0,.12); border-color: rgba(180,140,0,.4); color: var(--st-ambar); }
.rf-btn-sm { font-size: 12px; }

/* Botón de ícono de tablas/listas: en táctil el objetivo crece a 40px (regla
   global; antes cada módulo repetía su propio bloque). El padding fino de
   escritorio lo pone cada módulo según la densidad de su tabla. */
@media (max-width: 640px) {
  .btn-icono { min-width: 40px; min-height: 40px; display: inline-flex;
    align-items: center; justify-content: center; padding: 8px; }
}
.chevron { color: var(--crema-dim); transition: transform .2s; }
.chevron.girado { transform: rotate(180deg); }
.card-head { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.card-title { font-size: 18px; }
.card-title-lg { font-size: 20px; }
.empty-state { padding: 40px; text-align: center; color: var(--crema-mute); }
.chip-warn { background: rgba(180,140,0,.2); color: var(--st-ambar); }
.ico-chip { width: 10px; height: 10px; flex-shrink: 0; }

/* Utilidades de layout: reemplazan style= repetidos con los mismos valores */
.gap-0{gap:0}.gap-4{gap:4px}.gap-6{gap:6px}.gap-8{gap:8px}.gap-10{gap:10px}.gap-14{gap:14px}
.mb-2{margin-bottom:2px}.mb-4{margin-bottom:4px}.mb-12{margin-bottom:12px}.mb-14{margin-bottom:14px}.mb-16{margin-bottom:16px}.mb-20{margin-bottom:20px}.mb-24{margin-bottom:24px}
/* `mt-20` estaba escrita en Ventas y en Plantel y no existía acá: los dos
   bloques que se suponía que separaba quedaban pegados. Es el espejo de
   `mb-20`, que sí estaba. */
.mt-4{margin-top:4px}.mt-12{margin-top:12px}.mt-20{margin-top:20px}.ml-10{margin-left:10px}
.flex-1{flex:1}.min-w0{min-width:0}.txt-center{text-align:center}.txt-right{text-align:right}.txt-dim{color:var(--crema-dim)}
.oculto{display:none!important} /* como [hidden]: gana siempre (25/9) */
.wrap{flex-wrap:wrap}.items-end{align-items:flex-end}.items-stretch{align-items:stretch}
.inline-form{display:inline;margin:0}.m-0{margin:0}

/* ---- Campo dentro del modal de confirmación ----
   Para acciones que se registran hoy pero pudieron ocurrir antes (la baja de un
   integrante): el modal ofrece la fecha sin sacar al usuario del flujo. */
.im-modal-campo { display: block; margin: 14px 0 4px; text-align: left; }
.im-modal-campo-lbl {
  display: block; margin-bottom: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--crema-dim);
}
.im-modal-campo .input { width: 100%; }

/* ---- Visor de imágenes ([data-ver-foto], im.js) ---- */
.im-noscroll { overflow: hidden; }
[data-ver-foto] { cursor: zoom-in; }
button[data-ver-foto] { padding: 0; border: 0; background: none; line-height: 0; border-radius: 50%; }
button[data-ver-foto]:focus-visible { outline: 2px solid var(--crema-bright); outline-offset: 3px; }
.im-visor {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .88);
  cursor: zoom-out;
}
.im-visor.oculto { display: none; }
.im-visor img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  cursor: default;
}
.im-visor-cerrar {
  position: absolute; top: 14px; right: 20px;
  width: 44px; height: 44px;
  background: transparent; border: 0;
  color: #fff; font-size: 2.4rem; line-height: 1;
  cursor: pointer; opacity: .85;
}
.im-visor-cerrar:hover { opacity: 1; }

/* ---- Plegables (plegables.js): el título es el botón que pliega ---- */
.pl-boton {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  background: none; border: 0; padding: 0; margin: 0 0 4px; cursor: pointer;
  font: inherit; font-weight: 700; color: inherit; text-align: left;
}
.pl-boton:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.pl-chev { flex: none; opacity: .7; transition: transform .15s ease; }
.es-plegada .pl-chev { transform: rotate(-90deg); }
.es-plegada .pl-boton { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .pl-chev { transition: none; } }
.hm-nota .pl-boton { display: flex; width: 100%; }
.hm-nota .pl-chev { margin-left: auto; }
.nv-head .pl-boton { margin: 0; }
.es-plegada .nv-head { margin-bottom: 0; }

/* ── Objetivos de toque que se declaran más arriba en este mismo archivo ──
   Van al final a propósito: con la misma especificidad gana la última regla,
   y las de arriba (34px) pisaban a las del bloque móvil (auditoría 21/9). */
@media (max-width: 640px) {
  .cal-navbtn { width: 40px; height: 40px; }
}

/* ── Paginación (componente `paginacion`) ──
   Sale de la que Novedades tenía a mano; acá vale para cualquier lista larga.
   El botón deshabilitado se esconde con `visibility` y no con `display`: así el
   número del medio no se mueve al llegar a la primera o la última página. */
.pg { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; }
.pg-btn { font-size: 12px; padding: 7px 14px; }
.pg-btn.es-off { visibility: hidden; }
.pg-medio { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--crema-mute); }
.pg-cuantos { font-size: 11px; color: var(--crema-dim); }

/* ── El «Top» de lo que sea (`<x-ranking>`) ─────────────────────
   Lo comparten Ventas y Rifas. Antes eran dos familias casi iguales —
   `rf-rank-*` y `vt-rank-*`— con sus propios tamaños de letra, así que el
   mismo bloque se veía distinto según la pantalla. */
.rk-titulo { margin-bottom: 18px; }
.rk-fila { gap: 12px; align-items: center; }
.rk-pos { width: 22px; text-align: center; color: var(--crema-dim); font-size: 12px; flex-shrink: 0; }
.rk-nombre {
  font-size: 13px; color: var(--crema-bright); font-weight: 500; margin-bottom: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rk-total { font-size: 13px; font-weight: 600; color: var(--crema-bright); flex-shrink: 0; white-space: nowrap; }

/* El control del resto va SIEMPRE al pie, abierto o cerrado. `column-reverse`
   lo consigue sin tocar el orden del DOM: el <summary> sigue siendo el primer
   hijo —lo exige el <details>— y se dibuja último. Antes, al desplegar,
   quedaba clavado entre el quinto y el sexto puesto. */
.rk-resto { margin-top: 12px; display: flex; flex-direction: column-reverse; }
.rk-mas { list-style: none; width: 100%; justify-content: center; font-size: 12px; gap: 6px; }
.rk-mas::-webkit-details-marker { display: none; }
/* Abierto queda sólo la flechita, girada: el mismo gesto que el resto de los
   plegados del panel. El texto entero cortaba la lista al medio. */
.rk-resto[open] .rk-mas-cerrado { display: none; }
.rk-resto[open] .rk-mas .im-chevron { transform: rotate(180deg); }
/* Hacia el <summary>, que en el orden visual queda abajo. */
.rk-resto-lista { margin-bottom: 10px; }

@media (max-width: 640px) {
  /* Con el dedo: los dos botones grandes y el texto abajo, a lo ancho. */
  .pg { flex-wrap: wrap; row-gap: 10px; }
  .pg-btn { min-height: 40px; display: inline-flex; align-items: center; }
  .pg-medio { order: 3; flex-basis: 100%; }
}

/* ═══ BLOQUE DE CARGA ═══════════════════════════════════════════════════
   El criterio único para «agregar algo»: el título, y debajo un «+» redondo
   y rojo centrado al pie de la sección. Ver
   resources/views/components/bloque-carga.blade.php, que explica por qué es
   un <details> y por qué nacen todos cerrados.
   ═══════════════════════════════════════════════════════════════════════ */

.bc { padding: 0; }

/* La cabecera ES el control: se toca en cualquier parte, no sólo en el «+».
   En un teléfono apuntarle a un círculo de 38px es pedir puntería. */
/* El pie de la cabeza va mas corto que los otros tres lados: abajo del signo
   viene la lista (o el cuerpo desplegado), y 16px ahi dejaban el boton
   flotando lejos de lo que ordena (Lucas, 23/9). Ajustado, no pegado. */
.bc-cabeza {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 16px 16px 6px; cursor: pointer; list-style: none;
}
.bc-cabeza::-webkit-details-marker { display: none; }

.bc-titulo {
  font-family: var(--ff-display); font-size: 17px; line-height: 1.2;
  color: var(--crema-bright); text-align: center;
}

/* El «+» dibujado con dos barras en vez de la letra: así al abrir se va la
   vertical y queda un «−», sin tocar el texto desde JavaScript. */
.bc-mas {
  position: relative; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--bordo-bright) 45%, transparent);
  background: color-mix(in srgb, var(--bordo) 22%, transparent);
  transition: background .15s ease, border-color .15s ease;
}
.bc-mas::before, .bc-mas::after {
  content: ''; position: absolute; inset: 50% auto auto 50%;
  background: var(--bordo-texto); border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.bc-mas::before { width: 15px; height: 2px; transform: translate(-50%, -50%); }
.bc-mas::after  { width: 2px; height: 15px; transform: translate(-50%, -50%); }
/* Abierto: la barra vertical rota hasta confundirse con la horizontal. Girar y
   no esconder, porque el movimiento cuenta lo que pasó. */
.bc[open] .bc-mas::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }

.bc-cabeza:hover .bc-mas,
.bc-cabeza:focus-visible .bc-mas {
  background: color-mix(in srgb, var(--bordo) 38%, transparent);
  border-color: var(--bordo-bright);
}
.bc-cabeza:focus-visible { outline: 2px solid var(--bordo-bright); outline-offset: -3px; border-radius: var(--r); }

/* El cuerpo: separado del borde y con una línea que lo despega de la cabecera,
   para que al abrirse se lea como otra cosa y no como más de lo mismo. */
/* Sin línea entre la cabeza y el cuerpo (Lucas, 23/9): al desplegar aparecía
   un filete justo debajo del signo que cortaba la tarjeta en dos. La tarjeta
   ya tiene su propio borde; adentro no hace falta otra división. */
.bc-cuerpo { padding: 2px 16px 18px; margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .bc-mas, .bc-mas::before, .bc-mas::after { transition: none; }
}

/* ═══ BLOQUE DE BÚSQUEDA ════════════════════════════════════════════════
   Hermano del bloque de carga: misma tarjeta, mismo control redondo al pie,
   pero con lupa. Ver resources/views/components/bloque-busqueda.blade.php,
   que explica por qué los resultados van AFUERA del plegable.
   ═══════════════════════════════════════════════════════════════════════ */

.bq { padding: 0; }

.bq-cabeza {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  /* Mismo pie corto que `.bc-cabeza`: la lupa no tiene que quedar lejos de
     los resultados que ordena. */
  padding: 16px 16px 6px; cursor: pointer; list-style: none;
}
.bq-cabeza::-webkit-details-marker { display: none; }

.bq-titulo {
  font-family: var(--ff-display); font-size: 17px; line-height: 1.2;
  color: var(--crema-bright); text-align: center;
}

.bq-lupa {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--bordo-bright) 45%, transparent);
  background: color-mix(in srgb, var(--bordo) 22%, transparent);
  color: var(--bordo-texto);
  transition: background .15s ease, border-color .15s ease;
}
.bq-cabeza:hover .bq-lupa, .bq-cabeza:focus-visible .bq-lupa {
  background: color-mix(in srgb, var(--bordo) 38%, transparent);
  border-color: var(--bordo-bright);
}
.bq-cabeza:focus-visible { outline: 2px solid var(--bordo-bright); outline-offset: -3px; border-radius: var(--r); }

/* Igual que `.bc-cuerpo`: sin filete al desplegar. */
.bq-cuerpo { padding: 2px 16px 18px; margin-top: 0; }

/* El renglón de «estás viendo un resultado». Va entre la caja y los
   resultados, y en bordó suave para que se lea como un estado y no como una
   fila más de datos. */
.bq-activa {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--bordo) 12%, transparent);
  font-size: 12.5px; color: var(--crema-mute);
}
.bq-activa[hidden] { display: none; }
.bq-activa-txt { flex: 1; min-width: 0; }
.bq-activa-txt strong { color: var(--crema-bright); font-weight: 600; }
.bq-activa-x {
  display: flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 0; background: none; cursor: pointer; color: var(--crema-dim);
  transition: background .15s ease, color .15s ease;
}
.bq-activa-x:hover { background: var(--hover-subtle); color: var(--crema-bright); }
.bq-activa-x:focus-visible { outline: 2px solid var(--bordo-bright); outline-offset: 1px; }

/* Los resultados: sin relleno propio, porque adentro van tarjetas, tablas o
   fichas que ya traen el suyo. La línea los despega de lo de arriba. */
/* Sin línea entre la caja de búsqueda y sus resultados (Lucas, 23/9). Era la
   última que quedaba de las tres que tenía el bloque, y cortaba la tarjeta
   justo debajo de la lupa. La tarjeta ya tiene su propio borde; adentro no
   hace falta ninguna división más.

   El título de los resultados, además, pegado a la lupa que los ordena:
   `.card-head` la comparte medio panel con 16px arriba, y acá se acorta SOLO
   dentro de un bloque de búsqueda. */
.bq-resultados > .card-head:first-child { padding-top: 8px; }

@media (prefers-reduced-motion: reduce) {
  .bq-lupa, .bq-activa-x { transition: none; }
}

/* El aviso de pago pendiente del panel. Un renglon: texto a la izquierda,
   a donde ir a la derecha. Envuelve en el celular en vez de cortarse. */
.pn-aviso-pago {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 16px;
}
.pn-aviso-pago a { color: inherit; text-decoration: underline; white-space: nowrap; }

/* Bajar algo -Excel, PDF, la agenda- se ve igual en todo el sitio: borde y
   letras verdes (Lucas, 24/9). Antes habia tres estilos distintos repartidos
   en cinco pantallas, y como nunca se ven juntas nadie lo notaba.

   El verde es el del sistema (--good), que en tema claro cambia solo. */
.btn-exportar {
  color: var(--good);
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
  background: transparent;
}
.btn-exportar:hover {
  border-color: var(--good);
  background: color-mix(in srgb, var(--good) 10%, transparent);
}
.btn-exportar svg { color: inherit; }

/* Quien ve este modulo: UNA linea al pie de cada modulo. Discreta a
   proposito -no es una accion del dia a dia- pero a la vista. Hasta el 24/9
   era una tarjeta con un parrafo y pesaba mas que lo que controlaba. */
.vm-linea { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 24px; padding-top: 12px; border-top: 1px dashed var(--line-2); font-size: 12.5px; color: var(--crema-mute); }
.vm-rotulo { font-weight: 600; color: var(--crema-bright); }
.vm-sep { margin: 0 2px; color: var(--crema-mute); }
.vm-rotulo-que { font-weight: 400; color: var(--crema-mute); }
.vm-select { width: auto; font-size: 12.5px; padding: 6px 10px; border-radius: 999px; background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; }
.vm-btn { font-size: 12px; padding: 5px 12px; }
.vm-link { margin-left: auto; color: var(--crema-mute); text-decoration: underline; }


/* Todo campo del panel a 16px en el teléfono (auditoría 25/9). La lista de
   arriba se olvidaba de cada módulo nuevo —el pie de visibilidad, los filtros
   de Entradas y de Ventas— y iOS volvía a hacer zoom al enfocar. Elemento +
   clase para ganarle a los `font-size` chicos de cada módulo. */
@media (max-width: 640px) {
  input.input, select.input, textarea.input { font-size: 16px; }
}

/* ---- Imagen única (partials/imagen-unica, Lucas 28/9) ----
   El mismo bloque en todas las pantallas: la imagen grande, «Cambiar imagen»,
   «Quitar» y «Deshacer». Sin imagen, la caja punteada es el botón. */
.img1 { display: flex; flex-direction: column; gap: 10px; }
.img1-caja {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 150px; max-width: 420px; border-radius: var(--r-sm);
  background: var(--ink-2); border: 1px solid var(--line); overflow: hidden;
}
.img1-foto { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.img1.es-quitada .img1-foto { opacity: .3; filter: grayscale(1); }
.img1.es-vacia .img1-caja { border-style: dashed; border-width: 2px; }
.img1-vacia {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 150px; cursor: pointer; font-weight: 600; color: var(--crema-mute);
}
.img1-vacia:hover { color: var(--crema); }
.img1-mas { font-size: 22px; line-height: 1; }
.img1-estado {
  position: absolute; left: 8px; bottom: 8px; padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700; background: var(--bordo); color: var(--sobre-bordo);
}
.img1.es-quitada .img1-estado { background: var(--ink); color: var(--crema); border: 1px solid var(--line); }
.img1-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.img1-btn { cursor: pointer; border: 1px solid var(--line-2); border-radius: 999px; padding: 8px 16px; }
/* El input y el checkbox existen para el formulario, no se ven: las etiquetas
   y los botones son la cara. `clip` y no `display:none` para que el archivo se
   pueda elegir con el teclado desde la etiqueta. */
.img1-archivo, .img1-campo {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.img1-ayuda { margin: 0; font-size: 12px; color: var(--crema-dim); }
/* `hidden` tiene que ganarle al display de cada pieza (flex, inline-flex). */
.img1 [hidden] { display: none !important; }

/* Menú del comprobante: Compartir o Descargar (comprobante-wp.js, 28/9). */
.cwp-menu {
  position: fixed; z-index: 960; min-width: 180px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--ink-2); box-shadow: 0 16px 40px -12px rgba(0, 0, 0, .6);
}
.cwp-opcion {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 12px; border: 0; border-radius: 10px; background: transparent;
  color: var(--crema); font: 600 14px/1 var(--ff-ui, inherit); text-align: left; cursor: pointer;
}
.cwp-opcion:hover, .cwp-opcion:focus-visible { background: var(--hover-subtle); outline: none; }
.cwp-opcion svg { flex: none; color: var(--bordo-texto, currentColor); }