/* ══════════════════════════════════════════════════════════════════
   School Mate 92 — hoja única de la app.
   Tokens copiados del design system (tokens/*.css) y encima solo las
   clases que estas pantallas necesitan. Va en un archivo para que el
   teléfono haga una petición, no nueve.

   Reglas que gobiernan todo lo de abajo:
   · navy = escenario (hero, confirmación, proyector, sorteo)
   · dorado = voz (un elemento por pantalla, casi siempre el que se toca)
   · pergamino = memoria (datos del evento, nostalgia)
   · las pantallas de trabajo son claras: 60% neutro, 30% navy, 10% dorado
   ══════════════════════════════════════════════════════════════════ */

/* ── Tokens ───────────────────────────────────────────────────── */
:root {
  --navy-950:#00101F; --navy-900:#001730; --navy-800:#04244A; --navy-700:#0A3161;
  --navy-600:#14417A; --navy-500:#23568F; --navy-400:#4C7AAD; --navy-300:#86A6C9;
  --navy-200:#C0D2E3; --navy-100:#E4EDF5;

  --gold-900:#6B4A0E; --gold-800:#8C6314; --gold-700:#A87A1E; --gold-600:#C08F26;
  --gold-500:#D4A02E; --gold-400:#E0B650; --gold-300:#EBCC81; --gold-200:#F3E2B7;
  --gold-100:#FAF2DF;

  --paper-500:#C9AE87; --paper-400:#DCC6A6; --paper-300:#E8D6BA;
  --paper-200:#F1E3CC; --paper-100:#F8EEDD; --paper-050:#FDF8EF;

  --red-700:#A81217; --red-600:#C4161C; --red-500:#E31B23; --red-400:#EF4A4F;
  --red-200:#F8C4C6; --red-100:#FDECEC;

  --ink-900:#10151C; --ink-800:#1E2733; --ink-700:#313D4C; --ink-600:#4A5768;
  --ink-500:#6B7889; --ink-400:#939EAC; --ink-300:#BFC7D1; --ink-200:#DEE3E9;
  --ink-100:#EEF1F4; --ink-050:#F7F9FB; --white:#FFFFFF;

  --text-strong:var(--ink-900); --text-body:var(--ink-700); --text-muted:var(--ink-500);
  --text-faint:var(--ink-400); --text-on-navy:#FFFFFF; --text-on-navy-muted:#A9BED6;
  --text-accent:var(--gold-700);

  --border-subtle:var(--ink-200); --border-default:var(--ink-300);
  --border-gold-soft:rgba(212,160,46,.38); --border-on-navy:rgba(255,255,255,.16);
  --border-paper:rgba(168,122,30,.28);

  --success-500:#1E8E5A; --success-100:#E1F4EA;
  --danger-500:var(--red-500); --danger-100:var(--red-100);
  --whatsapp:#25D366; --instagram:#C4377F;
  --focus-ring:0 0 0 3px rgba(212,160,46,.45);
  --focus-ring-on-navy:0 0 0 3px rgba(224,182,80,.60);

  --font-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --font-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --font-body:"Manrope","Segoe UI",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px;
  --fs-lg:20px; --fs-xl:24px; --fs-2xl:30px; --fs-3xl:38px; --fs-4xl:48px;
  --fs-5xl:64px; --fs-6xl:88px; --fs-7xl:128px;
  --lh-tight:1.04; --lh-snug:1.18; --lh-heading:1.24; --lh-body:1.55;
  --ls-mega:-.03em; --ls-tight:-.015em; --ls-wide:.04em; --ls-wider:.10em; --ls-widest:.18em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px;
  --gutter-mobile:var(--space-5);
  --tap-min:44px; --control-md:48px; --control-lg:56px; --field-height:52px;
  --container-mobile:440px; --container-content:760px; --container-admin:1440px;
  --header-height:60px; --safe-bottom:28px;

  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:22px; --radius-2xl:28px; --radius-full:999px;

  --shadow-xs:0 1px 2px rgba(0,23,48,.06);
  --shadow-sm:0 1px 3px rgba(0,23,48,.08),0 1px 2px rgba(0,23,48,.04);
  --shadow-md:0 4px 12px rgba(0,23,48,.10),0 1px 3px rgba(0,23,48,.06);
  --shadow-lg:0 12px 28px rgba(0,23,48,.14),0 2px 6px rgba(0,23,48,.07);
  --shadow-xl:0 24px 56px rgba(0,23,48,.20),0 4px 12px rgba(0,23,48,.09);
  --shadow-gold:0 8px 24px rgba(168,122,30,.30);
  --shadow-gold-lg:0 16px 44px rgba(168,122,30,.42);
  --scrim-navy:rgba(0,16,31,.68); --blur-scrim:blur(14px) saturate(1.1);

  --dur-instant:90ms; --dur-fast:150ms; --dur-base:220ms; --dur-slow:340ms;
  --dur-celebrate:900ms; --dur-raffle-spin:4200ms;
  --ease-standard:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1); --ease-raffle:cubic-bezier(.12,.68,.04,1);
  --press-scale:.97; --hover-lift:-2px;

  --bg-navy-stage:radial-gradient(120% 80% at 50% -10%,#0A3161 0%,#04244A 42%,#001730 100%);
  --bg-gold-bar:linear-gradient(90deg,#A87A1E 0%,#D4A02E 30%,#EBCC81 52%,#D4A02E 74%,#A87A1E 100%);
  --bg-paper:linear-gradient(168deg,#FDF8EF 0%,#F1E3CC 58%,#E8D6BA 100%);
  --bg-app:var(--ink-050);
  --divider-gold:linear-gradient(90deg,transparent 0%,var(--gold-500) 18%,var(--gold-500) 82%,transparent 100%);
  --texture-grain:repeating-linear-gradient(112deg,rgba(168,122,30,.035) 0px,rgba(168,122,30,.035) 1px,transparent 1px,transparent 4px);
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-instant:1ms; --dur-fast:1ms; --dur-base:1ms; --dur-slow:1ms;
          --dur-celebrate:1ms; --dur-raffle-spin:200ms; --press-scale:1; --hover-lift:0px; }
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* ── Base ─────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; }
/* `hidden` lo pisa cualquier clase que declare display; sin esto, un botón
   marcado como oculto se ve igual, y uno que no hace nada es peor que ninguno. */
[hidden] { display:none !important; }

body {
  min-height:100dvh; background:var(--bg-app); color:var(--text-body);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
}
img { max-width:100%; display:block; }
svg { flex:none; }

.page { max-width:var(--container-mobile); margin:0 auto;
        padding:var(--space-6) var(--gutter-mobile) var(--space-9); }
.page--content { max-width:var(--container-content); }
.page--admin  { max-width:var(--container-admin); }
.page--dock   { padding-bottom:calc(var(--control-lg) + var(--safe-bottom) + var(--space-8)); }

/* Escenario navy: solo hero, celebración, proyector y sorteo. */
.stage { background:var(--bg-navy-stage); color:var(--text-on-navy); }
.stage--full { min-height:100dvh; }

/* ── Tipografía ───────────────────────────────────────────────── */
.hero { font-family:var(--font-display); font-weight:900; font-size:var(--fs-3xl);
        line-height:var(--lh-tight); letter-spacing:var(--ls-mega); }
.titulo { font-family:var(--font-display); font-weight:800; font-size:var(--fs-2xl);
          line-height:var(--lh-snug); letter-spacing:var(--ls-tight); color:var(--text-strong); }
.seccion { font-family:var(--font-display); font-weight:700; font-size:var(--fs-lg);
           line-height:var(--lh-heading); color:var(--text-strong); }
.stage .titulo, .stage .seccion { color:var(--text-on-navy); }

/* Voz de la invitación: una línea por pantalla, siempre sobre pergamino. */
.nostalgia { font-family:var(--font-serif); font-weight:600; font-style:italic;
             line-height:var(--lh-heading); }

/* El detalle de tipo más identificable del sistema, sacado del banner. */
.label { font-family:var(--font-body); font-weight:700; font-size:var(--fs-2xs);
         letter-spacing:var(--ls-widest); text-transform:uppercase; }
.label--gold { color:var(--gold-600); }
.label--muted { color:var(--text-faint); }
.stage .label--gold { color:var(--gold-400); }

.muted { color:var(--text-muted); font-size:var(--fs-sm); }
.stage .muted { color:var(--text-on-navy-muted); }
.tiny { font-size:var(--fs-xs); color:var(--text-faint); line-height:var(--lh-body); }
.stage .tiny { color:var(--text-on-navy-muted); }
.center { text-align:center; }
.num { font-variant-numeric:tabular-nums; }

/* ── El rombo dorado: la firma ornamental del sistema ─────────── */
.divisor { display:flex; align-items:center; gap:var(--space-3); margin:var(--space-6) 0 var(--space-4); }
.divisor::before, .divisor::after { content:''; flex:1; height:1px; background:var(--divider-gold); }
.divisor > span { font-family:var(--font-body); font-weight:700; font-size:var(--fs-2xs);
                  letter-spacing:var(--ls-widest); text-transform:uppercase; color:var(--gold-700); }
.stage .divisor > span { color:var(--gold-400); }
.divisor--solo::before, .divisor--solo::after { content:''; }
.rombo { width:7px; height:7px; background:var(--gold-500); transform:rotate(45deg); flex:none; }

/* ── Botones: siempre píldora ─────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  width:100%; min-height:var(--control-lg); padding:0 var(--space-6);
  font-family:var(--font-body); font-size:var(--fs-md); font-weight:700;
  border:0; border-radius:var(--radius-full); cursor:pointer; text-decoration:none;
  background:var(--gold-500); color:var(--navy-900);
  transition:background var(--dur-fast) var(--ease-standard),
             transform var(--dur-instant) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
.btn:active { transform:scale(var(--press-scale)); background:var(--gold-600); }
.btn:focus-visible { outline:none; box-shadow:var(--focus-ring); }
.btn:disabled { background:var(--ink-200); color:var(--ink-400); cursor:not-allowed; transform:none; }
.btn + .btn, .btn + .btn-fila { margin-top:var(--space-3); }

.btn--ghost { background:var(--white); color:var(--navy-800);
              border:1px solid var(--border-default); }
.btn--ghost:active { background:var(--ink-100); }
.stage .btn--ghost, .btn--ghost-navy { background:transparent; color:var(--text-on-navy);
              border:1px solid var(--border-on-navy); }
.stage .btn--ghost:active, .btn--ghost-navy:active { background:rgba(255,255,255,.08); }
.btn--danger { background:var(--white); color:var(--red-600); border:1px solid var(--red-200); }
.btn--danger:active { background:var(--red-100); }
.btn--sm { width:auto; min-height:var(--tap-min); font-size:var(--fs-sm);
           padding:0 var(--space-4); gap:var(--space-2); }
.btn--md { min-height:var(--control-md); font-size:var(--fs-base); }

/* Acción principal anclada abajo: alcance del pulgar, no esquina superior. */
.dock { position:fixed; left:0; right:0; bottom:0; z-index:30;
        padding:var(--space-4) var(--gutter-mobile) calc(var(--safe-bottom) - var(--space-1));
        background:rgba(247,249,251,.88); backdrop-filter:var(--blur-scrim);
        -webkit-backdrop-filter:var(--blur-scrim); border-top:1px solid var(--border-subtle); }
.dock > .contenedor { max-width:var(--container-mobile); margin:0 auto; }
.dock--navy { background:var(--scrim-navy); border-top:1px solid var(--border-on-navy); }

/* ── Cabecera ─────────────────────────────────────────────────── */
.cabecera { position:sticky; top:0; z-index:20; min-height:var(--header-height);
            display:flex; align-items:center; gap:var(--space-3);
            padding:var(--space-2) var(--gutter-mobile);
            background:rgba(247,249,251,.86); backdrop-filter:var(--blur-scrim);
            -webkit-backdrop-filter:var(--blur-scrim);
            border-bottom:1px solid var(--border-subtle); }
.cabecera h1 { flex:1; font-family:var(--font-display); font-weight:800;
               font-size:var(--fs-md); color:var(--text-strong); letter-spacing:var(--ls-tight); }
.icon-btn { width:var(--tap-min); height:var(--tap-min); flex:none; display:grid; place-items:center;
            border-radius:var(--radius-full); border:1px solid var(--border-subtle);
            background:var(--white); color:var(--navy-800); text-decoration:none; cursor:pointer;
            transition:background var(--dur-fast) var(--ease-standard); }
.icon-btn:active { background:var(--ink-100); transform:scale(var(--press-scale)); }
.icon-btn--navy { background:rgba(255,255,255,.07); border-color:var(--border-on-navy);
                  color:var(--text-on-navy); }

/* ── Tarjetas ─────────────────────────────────────────────────── */
.card { background:var(--white); border-radius:var(--radius-lg); padding:var(--space-5);
        box-shadow:var(--shadow-sm); }
.card + .card { margin-top:var(--space-4); }
.card--paper { background:var(--bg-paper); border:1px solid var(--border-paper);
               box-shadow:none; color:var(--navy-900); position:relative; overflow:hidden; }
.card--paper::before { content:''; position:absolute; inset:0; background:var(--texture-grain);
                       pointer-events:none; }
.card--paper > * { position:relative; }
.card--navy { background:var(--navy-800); color:var(--text-on-navy);
              border:1px solid var(--border-on-navy); box-shadow:none; }
.card--admin { border-radius:var(--radius-md); border:1px solid var(--border-subtle);
               box-shadow:none; padding:var(--space-4); }

/* ── Campos ───────────────────────────────────────────────────── */
.campo { margin-bottom:var(--space-4); }
.campo > label { display:block; font-family:var(--font-body); font-weight:600;
                 font-size:var(--fs-sm); color:var(--text-body); margin-bottom:var(--space-2); }
.campo .req { color:var(--gold-700); }
.campo .ayuda { font-size:var(--fs-xs); color:var(--text-muted); margin-top:var(--space-2); }

input, select, textarea {
  width:100%; min-height:var(--field-height); padding:0 var(--space-4);
  font-family:var(--font-body); font-size:16px;      /* 16px evita el zoom de iOS */
  color:var(--text-strong); background:var(--white);
  border:1px solid var(--border-default); border-radius:var(--radius-md);
  -webkit-appearance:none; appearance:none;
  transition:border-color var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-fast) var(--ease-standard);
}
textarea { min-height:96px; padding:var(--space-3) var(--space-4);
           line-height:var(--lh-body); resize:vertical; }
input::placeholder, textarea::placeholder { color:var(--ink-400); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--gold-500);
                                            box-shadow:var(--focus-ring); }
select { background-image:
    linear-gradient(45deg,transparent 50%,var(--ink-500) 50%),
    linear-gradient(135deg,var(--ink-500) 50%,transparent 50%);
  background-position:calc(100% - 21px) 24px, calc(100% - 15px) 24px;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; }

.fila { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
@media (max-width:359px) { .fila { grid-template-columns:1fr; } }

/* ── Interruptores de privacidad ──────────────────────────────── */
.priv { display:flex; align-items:center; gap:var(--space-4); min-height:var(--tap-min);
        padding:var(--space-3) 0; border-bottom:1px solid var(--border-subtle); }
.priv:last-child { border-bottom:0; }
.priv .t { flex:1; }
.priv .t b { display:block; font-size:var(--fs-base); font-weight:600; color:var(--text-strong); }
.priv .t span { font-size:var(--fs-xs); color:var(--text-muted); }
.switch { position:relative; width:52px; height:32px; flex:none; }
.switch input { position:absolute; inset:0; width:100%; height:100%; opacity:0; margin:0;
                z-index:2; cursor:pointer; }
.switch i { position:absolute; inset:0; background:var(--ink-300); border-radius:var(--radius-full);
            transition:background var(--dur-fast) var(--ease-standard); }
.switch i::after { content:''; position:absolute; top:3px; left:3px; width:26px; height:26px;
                   border-radius:50%; background:var(--white); box-shadow:var(--shadow-xs);
                   transition:transform var(--dur-fast) var(--ease-standard); }
.switch input:checked + i { background:var(--gold-500); }
.switch input:checked + i::after { transform:translateX(20px); }
.switch input:focus-visible + i { box-shadow:var(--focus-ring); }

/* ── Chips ────────────────────────────────────────────────────── */
.chips { display:flex; flex-wrap:wrap; gap:var(--space-2); }
.chip { display:inline-flex; align-items:center; gap:var(--space-2); min-height:var(--tap-min);
        padding:0 var(--space-4); border-radius:var(--radius-full);
        border:1px solid var(--border-default); background:var(--white);
        font-family:var(--font-body); font-size:var(--fs-sm); font-weight:600;
        color:var(--text-body); cursor:pointer; text-decoration:none;
        transition:background var(--dur-fast) var(--ease-standard); }
.chip:active { transform:scale(var(--press-scale)); }
.chip.on { background:var(--gold-100); border-color:var(--gold-500); color:var(--gold-800); }
.chip--wa { color:var(--whatsapp); } .chip--ig { color:var(--instagram); }

/* ── Insignias ────────────────────────────────────────────────── */
.badge { display:inline-flex; align-items:center; gap:6px; padding:5px var(--space-3);
         border-radius:var(--radius-full); font-family:var(--font-body); font-weight:700;
         font-size:var(--fs-2xs); letter-spacing:var(--ls-wider); text-transform:uppercase; }
.badge--gold { background:var(--gold-100); color:var(--gold-800); }
.badge--navy { background:var(--navy-100); color:var(--navy-700); }
.badge--ok { background:var(--success-100); color:var(--success-500); }
.badge--warn { background:var(--gold-100); color:var(--gold-800); }
.badge--quiet { background:var(--ink-100); color:var(--ink-500); }
.badge--on-navy { background:rgba(255,255,255,.10); color:var(--gold-300);
                  border:1px solid var(--border-gold-soft); }

/* ── Avatar ───────────────────────────────────────────────────── */
.avatar { width:56px; height:56px; flex:none; border-radius:var(--radius-full);
          overflow:hidden; background:var(--navy-100); display:grid; place-items:center;
          font-family:var(--font-display); font-weight:800; font-size:var(--fs-md);
          color:var(--navy-600); }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar--oro { box-shadow:0 0 0 2px var(--gold-500); }

/* ── Tarjeta de participante ──────────────────────────────────── */
.grid { display:grid; gap:var(--space-3); }
@media (min-width:620px) { .grid { grid-template-columns:1fr 1fr; } }
@media (min-width:980px) { .page--admin .grid { grid-template-columns:repeat(3,1fr); } }

.persona { display:flex; gap:var(--space-4); align-items:flex-start; background:var(--white);
           border-radius:var(--radius-lg); padding:var(--space-4); box-shadow:var(--shadow-sm);
           transition:transform var(--dur-fast) var(--ease-standard),
                      box-shadow var(--dur-fast) var(--ease-standard); }
@media (hover:hover) { .persona:hover { transform:translateY(var(--hover-lift)); box-shadow:var(--shadow-md); } }
.persona .info { flex:1; min-width:0; }
.persona .nom { font-family:var(--font-display); font-weight:700; font-size:var(--fs-md);
                color:var(--text-strong); letter-spacing:var(--ls-tight); }
.persona .apodo { font-family:var(--font-serif); font-style:italic; font-weight:600;
                  font-size:var(--fs-sm); color:var(--gold-700); }
.persona .det { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm);
                color:var(--text-muted); margin-top:3px; }
.persona .rifa { font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--text-faint);
                 margin-top:var(--space-2); font-variant-numeric:tabular-nums; }
.acciones { display:flex; gap:var(--space-2); flex-wrap:wrap; margin-top:var(--space-3); }
.acciones .chip { min-height:38px; padding:0 var(--space-3); font-size:var(--fs-xs); }

/* ── Boleto de rifa: la única tarjeta con sombra de color ─────── */
.ticket { position:relative; overflow:hidden; text-align:center;
          background:var(--navy-800); color:var(--text-on-navy);
          border:1px solid var(--border-gold-soft); border-radius:var(--radius-xl);
          box-shadow:var(--shadow-gold); padding:var(--space-8) var(--space-5) var(--space-7); }
.ticket::before { content:''; position:absolute; top:0; left:0; right:0; height:6px;
                  background:var(--bg-gold-bar); }
.ticket .numero { font-family:var(--font-display); font-weight:900;
                  font-size:clamp(56px,19vw,var(--fs-6xl)); line-height:var(--lh-tight);
                  letter-spacing:var(--ls-mega); font-variant-numeric:tabular-nums;
                  margin:var(--space-3) 0 var(--space-2); }

/* ── Bloques de dato ──────────────────────────────────────────── */
.stats { display:flex; align-items:center; justify-content:space-around; }
.stat { text-align:center; }
.stat .v { font-family:var(--font-display); font-weight:800; font-size:var(--fs-xl);
           color:var(--text-strong); font-variant-numeric:tabular-nums; letter-spacing:var(--ls-tight); }
.stat .l { font-family:var(--font-body); font-weight:700; font-size:var(--fs-2xs);
           letter-spacing:var(--ls-widest); text-transform:uppercase; color:var(--text-faint);
           margin-top:2px; }
.stat-sep { width:1px; height:44px; background:var(--border-subtle); }

.kpis { display:grid; gap:var(--space-3); grid-template-columns:repeat(2,1fr);
        margin-bottom:var(--space-5); }
@media (min-width:620px) { .kpis { grid-template-columns:repeat(4,1fr); } }
.kpi { background:var(--white); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
       padding:var(--space-4); }
.kpi .v { font-family:var(--font-display); font-weight:800; font-size:var(--fs-2xl);
          color:var(--text-strong); font-variant-numeric:tabular-nums; line-height:1.1; }
.kpi .l { font-family:var(--font-body); font-weight:700; font-size:var(--fs-2xs);
          letter-spacing:var(--ls-widest); text-transform:uppercase; color:var(--text-faint); margin-top:2px; }

/* ── Avisos ───────────────────────────────────────────────────── */
.aviso { border-radius:var(--radius-md); padding:var(--space-4);
         font-size:var(--fs-sm); line-height:var(--lh-body);
         display:flex; gap:var(--space-3); align-items:flex-start; }
.aviso--ok   { background:var(--success-100); color:#12603C; }
/* El duplicado es una oferta, no un error: dorado, nunca rojo. */
.aviso--gold { background:var(--gold-100); color:var(--gold-800); border:1px solid var(--border-gold-soft); }
.aviso--error{ background:var(--danger-100); color:var(--red-700); }

.vacio { text-align:center; padding:var(--space-10) var(--space-5); color:var(--text-muted); }

/* ── Progreso ─────────────────────────────────────────────────── */
.progreso { margin-bottom:var(--space-5); }
.progreso .txt { display:flex; justify-content:space-between; align-items:baseline;
                 margin-bottom:var(--space-2); }
.progreso .barra { height:6px; background:var(--ink-200); border-radius:var(--radius-full); overflow:hidden; }
.progreso .barra > i { display:block; height:100%; background:var(--gold-500);
                       border-radius:var(--radius-full); transition:width var(--dur-base) var(--ease-out); }

/* ── Tablas (admin, más densas que el resto) ──────────────────── */
.tabla-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; background:var(--white);
              border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); min-width:640px; }
th, td { padding:var(--space-3) var(--space-4); text-align:left; white-space:nowrap;
         border-bottom:1px solid var(--border-subtle); }
th { font-family:var(--font-body); font-weight:700; font-size:var(--fs-2xs);
     letter-spacing:var(--ls-widest); text-transform:uppercase; color:var(--text-faint);
     background:var(--ink-050); }
tbody tr:nth-child(even) td { background:var(--ink-050); }
tr:last-child td { border-bottom:0; }
td.num, th.num { font-variant-numeric:tabular-nums; font-family:var(--font-mono); }

/* ── Foto ─────────────────────────────────────────────────────── */
.foto-pick { display:flex; align-items:center; gap:var(--space-4); }
.foto-prev { width:76px; height:76px; flex:none; border-radius:var(--radius-full);
             overflow:hidden; background:var(--ink-100); border:1px solid var(--border-subtle);
             display:grid; place-items:center; color:var(--ink-400); }

/* ── Aviso flotante ───────────────────────────────────────────── */
.toast { position:fixed; left:50%; bottom:calc(var(--control-lg) + var(--safe-bottom) + var(--space-4));
         transform:translate(-50%,16px); z-index:60; max-width:calc(100vw - var(--space-8));
         background:var(--navy-900); color:var(--white); border-radius:var(--radius-full);
         padding:var(--space-3) var(--space-5); font-size:var(--fs-sm); font-weight:600;
         box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
         transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.toast.show { opacity:1; transform:translate(-50%,0); }

/* ── Marca ────────────────────────────────────────────────────── */
.marca { display:flex; align-items:center; justify-content:center; gap:var(--space-3); }
.marca img { height:52px; width:auto; }
.marca .txt { text-align:left; }
.marca .txt b { display:block; font-family:var(--font-body); font-weight:700;
                font-size:var(--fs-2xs); letter-spacing:var(--ls-widest);
                text-transform:uppercase; color:var(--gold-400); }
.marca .txt span { font-family:var(--font-body); font-weight:600; font-size:var(--fs-2xs);
                   letter-spacing:var(--ls-wider); text-transform:uppercase;
                   color:var(--text-on-navy-muted); }

/* Carabela de fondo: marca de agua al 8–14%, nunca recortada por el barco. */
.filigrana { position:absolute; right:-6%; bottom:-4%; width:56%; max-width:320px;
             opacity:.10; pointer-events:none; user-select:none; }

.redes { display:flex; flex-wrap:wrap; gap:var(--space-5); justify-content:center;
         font-size:var(--fs-sm); font-weight:600; color:var(--text-muted); }
.redes span { display:inline-flex; align-items:center; gap:7px; }