/* ============================================================
   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. */

/* ── 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:   #C4526F;
  --crema:         #F0E4CC;
  --crema-bright:  #F8F1DD;
  --crema-mute:    rgba(240,228,204,.58);
  --crema-dim:     rgba(240,228,204,.34);

  --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;
}

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; }

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); }

.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);
}

/* ── 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); }
.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
   ================================================================ */
html[data-theme="dark"] {
  --ink:   #20111A;
  --ink-2: #2C1822;
  --ink-3: #3A1F30;
  --ink-4: #4A263E;
  --crema-mute:  rgba(240,228,204,.76);
  --crema-dim:   rgba(240,228,204,.56);
  --line:        rgba(240,228,204,.13);
  --line-2:      rgba(240,228,204,.24);
  --body-bg:
    radial-gradient(800px 600px at 80% -5%, rgba(139,37,64,.28), transparent 60%),
    radial-gradient(600px 400px at -5% 105%, rgba(62,10,25,.62), transparent 60%),
    var(--ink);
  --card-bg:      linear-gradient(180deg, rgba(54,28,44,.74), rgba(38,18,32,.74));
  --input-bg:     rgba(28,12,22,.65);
  --hover-subtle: rgba(240,228,204,.08);
  --row-hover:    rgba(240,228,204,.045);
}
html[data-theme="dark"] .stat-good {
  background: linear-gradient(180deg, rgba(111,174,125,.22), rgba(38,18,32,.65));
}
html[data-theme="dark"] .stat-bad {
  background: linear-gradient(180deg, rgba(201,90,106,.22), rgba(38,18,32,.65));
}
html[data-theme="dark"] .stat-bordo {
  background: linear-gradient(180deg, rgba(169,49,81,.26), rgba(38,18,32,.65));
}

/* ================================================================
   MEDIUM THEME
   ================================================================ */
html[data-theme="medium"] {
  --ink:   #321728;
  --ink-2: #421E35;
  --ink-3: #512542;
  --ink-4: #62304E;
  --crema-mute:  rgba(240,228,204,.80);
  --crema-dim:   rgba(240,228,204,.55);
  --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"] {
  /* Fondo general algo más profundo: separa las cards sin lavar la calidez */
  --ink:          #EAE0CB;
  --ink-2:        #E2D6BC;
  --ink-3:        #D9CBAA;
  --ink-4:        #CEBD95;
  --crema:        #3E0A19;
  --crema-bright: #1A0408;
  /* Textos secundarios más oscuros → mejor lectura de labels/eyebrow/subtítulos */
  --crema-mute:   rgba(62,10,25,.74);
  --crema-dim:    rgba(62,10,25,.62);
  /* Sobre fondos claros el acento fuerte sí pasa AA; el claro (#C4526F) no. */
  --bordo-texto:  var(--bordo-bright);
  /* Semánticos más oscuros para texto sobre superficies claras */
  --gold:         #9C7A36;
  --good:         #3E8E5A;
  --warn:         #A9722B;
  --bad:          #B23A4A;
  --st-ok:        #2F7D4B;
  --st-bad:       #B23A4A;
  --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);
  --body-bg:
    radial-gradient(800px 600px at 80% -5%, rgba(107,26,46,.10), transparent 60%),
    radial-gradient(600px 400px at -5% 105%, rgba(255,252,245,.55), transparent 60%),
    var(--ink);
  /* Cards casi blancas pero cálidas (no blanco puro), opacas para separar bien */
  --card-bg:      #FFFDF8;
  --input-bg:     #FBF6EC;
  --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: #F5EDD8; }

/* Login card en modo claro: ya es clara, forzamos blanco puro */
html[data-theme="light"] .card-cream { background: #FFFFFF; }

/* 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: #3E8E5A; }
html[data-theme="light"] .stat-bad  .stat-label { color: #B23A4A; }

/* 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 chicos por defecto */
  .btn             { padding: 10px 14px; font-size: 12px; }
  .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; }
}

/* 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(--crema-bright);
  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;
}
.dow-opt input:checked + span {
  background: var(--bordo); border-color: var(--bordo-2);
  color: var(--crema-bright); 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);
}
/* ── Selector de tema fijo — esquina superior izquierda ── */
.tema-corner {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  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-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; }
}

/* ── 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; }
/* Pestañas de módulo: control segmentado contenido (mismo lenguaje que las
   .cfg-tabs de Config. Tickets) en vez de botones-píldora sueltos: la barra
   es UNA pieza y la solapa activa se pinta adentro. */
.tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 4px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--input-bg);
}
.tabs .btn {
  flex: 1;
  text-align: center;
  border-color: transparent;
  padding: 9px 12px;
  min-width: 0;
}
/* El segmento activo conserva su borde de marca: sin esto, el
   border-color transparente de arriba (0,2,0) le gana a .btn-primary. */
.tabs .btn.btn-primary { border-color: var(--bordo); }
/* Dentro de la barra el hover no levanta el botón: los segmentos son parte
   de una misma pieza, no botones que flotan. */
.tabs .btn:hover { transform: none; }
/* En modo claro, los segmentos inactivos quedan transparentes: la regla
   general pinta los .btn secundarios y acá tiñe la barra entera. */
html[data-theme="light"] .tabs .btn:not(.btn-primary):not(.im-btn-danger):not(.btn-cream):not(.btn-ghost) {
  background: transparent;
  border-color: transparent;
}
/* En teléfonos angostos la barra envuelve en filas SIEMPRE llenas: cada
   solapa pide ~un tercio del ancho y crece para completar su fila (con
   grid auto-fit quedaban celdas vacías cuando 6 solapas caían en 4+2).
   Rifas llega a 6 solapas: quedan 2 filas de 3. */
@media (max-width: 640px) {
  .tabs {
    flex-wrap: wrap;
    border-radius: 18px;
  }
  .tabs .btn { flex: 1 1 30%; min-width: 96px; padding: 9px 8px; }
}
/* Variante de módulo: en pantallas angostas las pestañas scrollean horizontal
   (sin envolver ni encoger el texto). La usan Perfil del sitio y Página pública. */
/* touch-action: manipulation evita que un tap con leve arrastre en la barra
   se pierda como gesto de scroll (tabs que "no responden"). */
.tabs-mod .btn { flex: 1; white-space: nowrap; touch-action: manipulation; }
@media (max-width: 900px) {
  /* En móvil: grilla 2×2 SIN scroll lateral, sticky para acompañar los
     paneles largos (el swipe también cambia de pestaña). */
  .tabs-mod {
    position: sticky; top: 8px; z-index: 60;
    display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
    padding: 6px; border: 1px solid var(--line-2); border-radius: 14px;
    background: var(--input-bg);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  }
  .tabs-mod .btn { white-space: normal; padding: 9px 8px; }
}

/* ── 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;
  width: 18px; height: 18px; margin: 0; flex-shrink: 0;
  border: 1.5px solid var(--line-2); border-radius: 5px;
  background: var(--input-bg);
  display: inline-grid; place-content: center;
  cursor: pointer; vertical-align: middle;
  transition: background .12s ease, border-color .12s 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); transform: scale(0);
  transition: transform .12s ease;
}
input[type="checkbox"]:checked { background: var(--bordo); border-color: var(--bordo); }
input[type="checkbox"]:checked::before { transform: scale(1); }
input[type="checkbox"]:hover:not(:disabled):not(:checked) { border-color: var(--bordo); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--bordo); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .45; cursor: default; }

/* ── 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-4{margin-top:4px}.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}
.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}