/* ==========================================================================
   EncarreraOK — sistema de diseño
   --------------------------------------------------------------------------
   Fuente única de verdad para TODA la interfaz (público, admin y operador).

   Antes de este archivo había 14 bloques <style> independientes, 773 líneas
   de CSS duplicado y `.btn` redefinido en 12 templates. Si tocás un color,
   tocalo acá y en ningún otro lado.

   Los colores de marca están tomados del logo real (assets/logo-encarreraok.png),
   no estimados:
     naranja  #E46C00   escudo y wordmark "OK"
     gris     #3C4854   wordmark "Encarrera"  → base de los neutros
     verde    #48A80C   check
     rojo     #D83C24   franja

   REGLA DE COLOR: el naranja es identidad de marca y NUNCA es un control.
   Lo interactivo es azul. Motivo: en el monitor conviven "Aceptar" (verde) y
   "Rechazar" (rojo) — un naranja de acción se confunde con el rojo justo en
   la pantalla donde equivocarse es irreversible.
   ========================================================================== */

/* ==========================================================================
   1. TOKENS
   ========================================================================== */
/* Un solo tema, a propósito.
   El sistema es probatorio: que todos vean exactamente lo mismo simplifica el
   soporte ("¿ves el recuadro amarillo?") y elimina una superficie entera donde
   pueden esconderse errores de contraste. `color-scheme: light` además fuerza
   los controles nativos (casillas, desplegables, barras de scroll) a
   renderizarse en claro aunque el sistema operativo esté en modo oscuro. */
:root {
  color-scheme: light;

  /* --- Neutros. Derivados del gris del wordmark (#3C4854), no gris puro --- */
  --paper:       #F7F9FB;
  --surface:     #FFFFFF;
  --surface-2:   #F1F4F8;
  --surface-3:   #E7ECF2;
  --line:        #DCE3EB;
  --line-soft:   #EAEFF4;
  --ink:         #131A24;
  --ink-2:       #3C4854;  /* exacto del wordmark */
  --ink-3:       #5E6A7B;  /* mínimo que pasa AA en texto chico sobre blanco */

  /* --- Marca (identidad; nunca un control) --- */
  --brand:       #E46C00;
  --brand-dark:  #C25A00;
  --brand-soft:  #FDF0E3;

  /* --- Acción (todo lo interactivo) --- */
  --action:      #1B4D8F;
  --action-hover:#16406F;
  --action-ink:  #FFFFFF;
  --action-soft: #E7EEF8;

  /* --- Semánticos. Independientes del acento. --- */
  --ok:          #0B6E4F;
  --ok-soft:     #E2F2EB;
  --warn:        #875A00;
  --warn-soft:   #FCF3DF;
  --bad:         #B42318;
  --bad-soft:    #FBE9E7;
  --neutral:     #56626F;
  --neutral-soft:#EEF1F5;

  /* --- Tipografía ---
     Sin webfonts: nada que descargar, nada que falle en silencio.
     El reparto es estricto — prosa en sans, dato probatorio en mono. */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono",
               "Roboto Mono", Menlo, Consolas, monospace;

  --fs-xs:  0.75rem;    /* 12px  meta, hints */
  --fs-sm:  0.8125rem;  /* 13px  UI densa */
  --fs-md:  0.875rem;   /* 14px  UI */
  --fs-base:1rem;       /* 16px  prosa y campos (16px evita el zoom de iOS) */
  --fs-lg:  1.0625rem;
  --fs-xl:  1.3125rem;
  --fs-2xl: 1.625rem;

  /* --- Espaciado, radios, elevación --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(19,26,36,.06), 0 1px 3px rgba(19,26,36,.04);
  --shadow-2: 0 4px 16px rgba(19,26,36,.08), 0 1px 3px rgba(19,26,36,.06);
  --shadow-3: 0 18px 46px rgba(19,26,36,.16), 0 2px 8px rgba(19,26,36,.08);

  /* Alto mínimo de cualquier control táctil */
  --touch: 46px;
}

/* ==========================================================================
   2. RESET
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* El atributo `hidden` debe ganarle a cualquier `display` de una clase.
   Sin esto, una regla como `.upload-preview { display: flex }` deja visible
   un contenedor marcado como hidden (le gana por especificidad al UA). */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); font-weight: 750; }
h2 { font-size: var(--fs-xl);  font-weight: 700; }
h3 { font-size: var(--fs-lg);  font-weight: 650; }

p { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--action); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Foco visible y consistente en todo el sistema. No se elimina nunca. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Utilidad: visible solo para lectores de pantalla */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Texto que solo aparece cuando hay ancho de sobra (etiquetas largas de botón) */
@media (max-width: 700px) { .solo-ancho { display: none; } }


/* ==========================================================================
   3. TIPOGRAFÍA DE APOYO
   ========================================================================== */

/* Todo dato probatorio: cédula, hora, IP, hash, token.
   Ancho fijo para que se coteje carácter por carácter y las columnas alineen. */
.dato {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.meta      { font-size: var(--fs-sm); color: var(--ink-3); }
.hint      { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.45; }
.text-muted{ color: var(--ink-3); }


/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.wrap        { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--sp-5); }
.wrap-narrow { width: 100%; max-width: 660px;  margin: 0 auto; padding: 0 var(--sp-4); }
@media (max-width: 600px) {
  .wrap, .wrap-narrow { padding: 0 var(--sp-4); }
}

.stack   { display: flex; flex-direction: column; gap: var(--sp-4); }
.stack-2 { display: flex; flex-direction: column; gap: var(--sp-2); }
.stack-6 { display: flex; flex-direction: column; gap: var(--sp-6); }
.row     { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.row-tight { display: flex; align-items: center; gap: var(--sp-2); }
.push    { margin-left: auto; }

/* Cualquier contenido ancho (tablas, código) scrollea dentro suyo:
   el body nunca scrollea de costado. */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }


/* ==========================================================================
   5. MARCA
   ========================================================================== */
.brand      { display: inline-flex; align-items: center; gap: var(--sp-2); }
.brand img  { display: block; }
.brand-logo { height: 30px; width: auto; }
.brand-iso  { height: 26px; width: auto; }
.brand-name { font-size: var(--fs-md); font-weight: 700; color: var(--ink-2); letter-spacing: -.01em; }

.tagline {
  font-size: var(--fs-xs); color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em;
}


/* ==========================================================================
   6. BOTONES  (una sola definición para todo el sistema)
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  font-family: inherit; font-size: var(--fs-md); font-weight: 600;
  line-height: 1;
  padding: 0 var(--sp-4);
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

.btn-primary   { background: var(--action); color: var(--action-ink); border-color: var(--action); }
.btn-primary:hover:not(:disabled) { background: var(--action-hover); border-color: var(--action-hover); }

.btn-secondary { background: var(--surface); color: var(--ink-2); border-color: var(--line); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-3); }

.btn-ghost     { background: transparent; color: var(--ink-2); border-color: transparent; }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); }

.btn-ok        { background: var(--ok);  color: #fff; border-color: var(--ok); }
.btn-ok:hover:not(:disabled)  { filter: brightness(1.1); }

.btn-danger    { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn-danger:hover:not(:disabled) { filter: brightness(1.1); }

/* Acción destructiva de bajo perfil: contorno, no relleno. */
.btn-danger-outline { background: transparent; color: var(--bad);
                      border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.btn-danger-outline:hover:not(:disabled) { background: var(--bad); color: #fff; border-color: var(--bad); }

.btn-sm    { min-height: 32px; font-size: var(--fs-sm); padding: 0 var(--sp-3); }
.btn-lg    { min-height: 52px; font-size: var(--fs-lg); padding: 0 var(--sp-6); border-radius: var(--r); }
.btn-block { width: 100%; }


/* ==========================================================================
   7. SUPERFICIES
   ========================================================================== */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}
.card-pad    { padding: var(--sp-5); }
.card-head   { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--line); }
.card-body   { padding: var(--sp-5); }
.card-foot   { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); background: var(--surface-2); }

.section-title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3);
}


/* ==========================================================================
   8. FORMULARIOS
   ========================================================================== */
.field { display: flex; flex-direction: column; gap: var(--sp-1); }

.field > label,
.label {
  font-size: var(--fs-md); font-weight: 600; color: var(--ink);
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.label-opt { font-weight: 400; font-size: var(--fs-xs); color: var(--ink-3); }
.label-req { color: var(--bad); font-weight: 700; }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  font-family: inherit;
  font-size: var(--fs-base);   /* 16px: por debajo, iOS hace zoom al enfocar */
  line-height: 1.4;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.textarea { min-height: 96px; resize: vertical; padding-top: var(--sp-3); line-height: 1.55; }
.input.dato { font-family: var(--font-mono); letter-spacing: .04em; }

.input::placeholder, .textarea::placeholder { color: var(--ink-3); opacity: .75; }

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--action);
  box-shadow: 0 0 0 3px var(--action-soft);
}
.input[aria-invalid="true"], .textarea[aria-invalid="true"] {
  border-color: var(--bad);
}
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--bad-soft); }

.select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 18px) 51%, calc(100% - 13px) 51%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-8);
}

/* --- Checkbox / radio --- */
.check {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.check:hover { border-color: var(--ink-3); }
.check input[type="checkbox"], .check input[type="radio"] {
  width: 20px; height: 20px; margin: 1px 0 0; flex: none;
  accent-color: var(--action); cursor: pointer;
}
.check-text { font-size: var(--fs-md); line-height: 1.5; }
.check-oath { background: var(--surface-2); }
.check-oath .check-text { font-weight: 600; }


/* ==========================================================================
   9. MENSAJES
   ========================================================================== */
.msg {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  line-height: 1.5;
}
.msg-icon  { flex: none; font-size: 1rem; line-height: 1.4; }
.msg-body  { min-width: 0; }
.msg-title { font-weight: 650; display: block; }
.msg-text  { color: var(--ink-2); font-size: var(--fs-sm); }

.msg-error { background: var(--bad-soft);  border-color: color-mix(in srgb, var(--bad) 30%, transparent);  border-left-color: var(--bad); }
.msg-error .msg-title { color: var(--bad); }
.msg-warn  { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 35%, transparent); border-left-color: var(--warn); }
.msg-warn .msg-title { color: var(--warn); }
.msg-ok    { background: var(--ok-soft);   border-color: color-mix(in srgb, var(--ok) 30%, transparent);   border-left-color: var(--ok); }
.msg-ok .msg-title { color: var(--ok); }
.msg-info  { background: var(--action-soft); border-color: color-mix(in srgb, var(--action) 25%, transparent); border-left-color: var(--action); }
.msg-info .msg-title { color: var(--action); }

/* Error a nivel de campo */
.field-error {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--bad); font-weight: 600;
  margin-top: var(--sp-1);
}


/* ==========================================================================
   10. PILLS DE ESTADO
   Forma + color: el estado no depende solo del color.
   ========================================================================== */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--fs-xs); font-weight: 650; line-height: 1.4;
  padding: 3px 10px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; flex: none; }
.pill-ok      { background: var(--ok-soft);      color: var(--ok); }
.pill-warn    { background: var(--warn-soft);    color: var(--warn); }
.pill-bad     { background: var(--bad-soft);     color: var(--bad); }
.pill-neutral { background: var(--neutral-soft); color: var(--neutral); }
.pill-info    { background: var(--action-soft);  color: var(--action); }


/* ==========================================================================
   11. TABLAS
   Ojo: <table> NO hereda `color` del contenedor en todos los navegadores.
   Se declara explícito o en tema oscuro el texto sale claro sobre celda clara.
   ========================================================================== */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
  color: var(--ink);
  background: var(--surface);
}
.table th {
  text-align: left;
  font-family: var(--font-mono);
  font-size: var(--fs-xs); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-3);
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  white-space: nowrap;
}
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--action-soft); }
.table-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.empty-state {
  padding: var(--sp-10) var(--sp-5);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--fs-md);
}
.empty-state strong { display: block; color: var(--ink); font-size: var(--fs-lg); margin-bottom: var(--sp-2); }

/* Dato secundario dentro de una celda (quién revisó, motivo, día) */
.sub-meta { display: block; font-size: var(--fs-xs); color: var(--ink-3); margin-top: 2px; line-height: 1.35; }
.hora { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; }

.row-acciones { display: flex; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap; }

/* Acciones de fila: sobrias en reposo, con el color semántico al apuntarlas.
   Con el rojo pleno permanente, una pantalla de 25 filas se vuelve un muro
   de botones rojos — y "Rechazar" queda a un click de distancia por accidente
   justo al lado de "Ver". El color aparece cuando hay intención. */
.btn-fila {
  background: var(--surface); color: var(--ink-2); border-color: var(--line);
}
.btn-fila:hover:not(:disabled),
.btn-fila:focus-visible { background: var(--surface-2); }
.btn-fila-ok:hover:not(:disabled),
.btn-fila-ok:focus-visible  { background: var(--ok);  border-color: var(--ok);  color: #fff; }
.btn-fila-bad:hover:not(:disabled),
.btn-fila-bad:focus-visible { background: var(--bad); border-color: var(--bad); color: #fff; }
/* Anular es destructiva y se distingue en reposo, no solo al pasar por encima. */
.btn-fila-anular { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 28%, transparent); }
.btn-fila-anular:hover:not(:disabled),
.btn-fila-anular:focus-visible { background: var(--bad); border-color: var(--bad); color: #fff; }

.pager {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); flex-wrap: wrap;
}
.pager-info { font-size: var(--fs-sm); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   Tabla que se convierte en tarjetas en pantallas chicas.

   La tabla anterior medía 724 px de ancho en un viewport de 375: las columnas
   Hora y Acciones quedaban fuera de pantalla, accesibles solo por un scroll
   lateral sin ninguna señal visual. Quien está en la puerta del evento no
   podía aceptar ni rechazar desde el teléfono.

   Cada <td> lleva data-label con el nombre de su columna, que en modo tarjeta
   se muestra como etiqueta.
   -------------------------------------------------------------------------- */
@media (max-width: 780px) {
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    margin-bottom: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    box-shadow: var(--shadow-1);
  }
  .table-cards tbody tr:hover td { background: transparent; }
  .table-cards td {
    border: 0;
    padding: var(--sp-1) 0;
    display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3);
    text-align: right;
  }
  .table-cards td::before {
    content: attr(data-label);
    font-family: var(--font-mono);
    font-size: var(--fs-xs); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-3);
    text-align: left; flex: none;
  }
  /* El nombre encabeza la tarjeta: sin etiqueta y a ancho completo. */
  .table-cards td[data-label="Participante"] {
    display: block; text-align: left;
    font-size: var(--fs-lg); font-weight: 700;
    padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line-soft);
  }
  .table-cards td[data-label="Participante"]::before { content: none; }
  /* Las acciones ocupan el ancho completo y quedan a la vista, no tras un scroll. */
  .table-cards td[data-label="Acciones"] {
    display: block; text-align: left;
    padding-top: var(--sp-3); margin-top: var(--sp-2);
    border-top: 1px solid var(--line-soft);
  }
  .table-cards td[data-label="Acciones"]::before { content: none; }
  .table-cards .row-acciones { justify-content: stretch; }
  .table-cards .row-acciones > * { flex: 1 1 auto; min-height: 40px; }
  .sub-meta { text-align: right; }
}


/* ==========================================================================
   12. CHIPS DE FILTRO
   ========================================================================== */
.chips { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: inherit; font-size: var(--fs-sm); font-weight: 600;
  padding: 7px var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--ink-3); text-decoration: none; }
.chip-count {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  background: var(--surface-3); color: inherit;
  border-radius: var(--r-full); padding: 1px 7px;
}
.chip[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip[aria-current="true"] .chip-count { background: rgba(255,255,255,.22); color: inherit; }
/* Chip de trabajo pendiente: destaca por ser lo que hay que resolver */
.chip-pending { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 40%, transparent); color: var(--warn); }
.chip-pending .chip-count { background: color-mix(in srgb, var(--warn) 18%, transparent); }
.chip-pending[aria-current="true"] { background: var(--warn); border-color: var(--warn); color: #fff; }


/* ==========================================================================
   13. BARRA SUPERIOR
   54px, no 440. La marca en la escala de una herramienta de trabajo.
   ========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: 54px;
  padding: var(--sp-2) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
.topbar-user { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--ink-3); }
.avatar {
  width: 26px; height: 26px; border-radius: var(--r-full); flex: none;
  background: var(--action); color: var(--action-ink);
  display: grid; place-items: center;
  font-size: var(--fs-xs); font-weight: 700;
}
/* Acceso directo a las secciones desde cualquier pantalla del panel */
.secciones { display: flex; align-items: center; gap: var(--sp-1); }
.secciones a {
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
  padding: 6px var(--sp-3); border-radius: var(--r-sm);
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
.secciones a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.secciones a[aria-current="page"] { background: var(--action-soft); color: var(--action); }

/* Bajo 900 px las secciones no entran en la barra: pasan a una fila propia. */
.secciones-mobile { display: none; }
@media (max-width: 900px) {
  .secciones { display: none; }
  .secciones-mobile {
    display: flex; gap: var(--sp-1);
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface); border-bottom: 1px solid var(--line);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    position: sticky; top: 54px; z-index: 49;
  }
  .secciones-mobile a {
    font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
    padding: 6px var(--sp-3); border-radius: var(--r-full);
    white-space: nowrap; flex: none;
  }
  .secciones-mobile a:hover { text-decoration: none; }
  .secciones-mobile a[aria-current="page"] { background: var(--action-soft); color: var(--action); }
}

.crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); color: var(--ink-3); min-width: 0; }
.crumbs a { color: var(--ink-3); }
.crumbs a:hover { color: var(--action); }
.crumbs strong { color: var(--ink); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crumbs-sep { color: var(--line); }

@media (max-width: 700px) {
  .topbar { padding: var(--sp-2) var(--sp-4); gap: var(--sp-2); }
  /* Se sacrifica lo prescindible para que el nombre del evento entre entero:
     sin él, la barra dice "T…" y no se sabe en qué evento se está trabajando. */
  .topbar .tagline,
  .topbar .brand-name,
  .topbar .topbar-user-name,
  .crumbs > a,
  .crumbs-sep { display: none; }
  .crumbs { flex: 1 1 auto; min-width: 0; }
  .crumbs strong { font-size: var(--fs-md); }
}


/* ==========================================================================
   14. PIE
   ========================================================================== */
/* Aviso flotante tras una acción (el resultado llega por ?msg= / ?error=) */
.toast-aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 200; max-width: calc(100vw - 32px);
  background: var(--ink); color: var(--paper);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-full);
  font-size: var(--fs-md); font-weight: 600;
  box-shadow: var(--shadow-3); text-align: center;
}
.toast-aviso.es-error { background: var(--bad); color: #fff; }


.footer {
  margin-top: var(--sp-10);
  padding: var(--sp-6) 0 var(--sp-8);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-3);
  text-align: center;
}


/* ==========================================================================
   15. PÁGINA DE ERROR
   Reemplaza la respuesta JSON cruda que hoy sustituye la página entera.
   ========================================================================== */
.errorpage {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--sp-6) var(--sp-4);
}
.errorpage-card { width: 100%; max-width: 480px; text-align: center; }
.errorpage-code {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: 2.5rem; font-weight: 700; letter-spacing: -.04em;
  color: var(--bad); line-height: 1;
}
.errorpage h1 { font-size: var(--fs-xl); margin: var(--sp-3) 0 var(--sp-2); }
.errorpage-detail { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.55; }


/* ==========================================================================
   16. IMPRESIÓN
   ========================================================================== */
@media print {
  .topbar, .footer, .btn, .chips, .no-print { display: none !important; }
  body { background: #fff; color: #000; }
  .card { border: 1px solid #999; box-shadow: none; }
}