/*
  fesja.css — Sistema de diseño de FESJA SARC (Registro a eventos)
  Identidad: sarape, desierto y cantera de Saltillo, Ramos Arizpe y Arteaga.
  Ver docs/DISENO.md para el detalle y el motivo de cada refinamiento.
*/

/* ============================================================
   1. TIPOGRAFÍA — @font-face
   ============================================================ */
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/big-shoulders-display-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/big-shoulders-display-latin-800-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Atkinson Hyperlegible Next";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-latin-600-normal.woff2") format("woff2");
}

/* ============================================================
   2. TOKENS
   ============================================================ */
:root {
  /* --- Paleta (valores fijos del plan; no se alteran los hex) --- */
  --monte: #142A23;
  --sarape: #E4701E;
  --trigo: #D2BE65;
  --barro: #A8401C;
  --cielo: #1C86C4;
  --cal: #F4F6F2;
  --tinta: #18201C;
  --sarape-franja: repeating-linear-gradient(
    135deg,
    #C8322B 0 8px,
    #E4701E 8px 16px,
    #F2B632 16px 24px,
    #3F8F3A 24px 32px,
    #1C86C4 32px 40px,
    #D6457A 40px 48px
  );

  /* Refinamiento: --cielo pierde contraste AA como texto plano sobre --cal
     (≈3.5:1). Se usa --cielo para fondos/bordes/iconos y --cielo-texto,
     una versión oscurecida, cuando --cielo debe leerse como texto. */
  --cielo-texto: #145C89;

  /* Refinamiento: variantes de --monte para separar líneas/bordes sutiles
     del uso como fondo sólido de la barra lateral. */
  --monte-suave: #1D3A30;
  --monte-linea: rgba(20, 42, 35, 0.16);

  /* --- Tipografía --- */
  --fuente-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --fuente-texto: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Escala tipográfica del plan (14/16/18/22/28/40), base 16px */
  --fs-xs: 0.875rem;   /* 14px — leyendas, etiquetas */
  --fs-base: 1rem;     /* 16px — texto */
  --fs-md: 1.125rem;   /* 18px — subtítulos, botones */
  --fs-lg: 1.375rem;   /* 22px — h2 en móvil */
  --fs-xl: 1.75rem;    /* 28px — h2 en escritorio */
  --fs-2xl: 2.5rem;    /* 40px — h1, cifras de .kpi */

  /* Refinamiento: escala de espaciado en base 4px (consistente con los 16px
     de base) para que todo el marcado use los mismos saltos. */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 24px;
  --e-6: 32px;
  --e-7: 48px;

  /* Refinamiento: radios discretos (no muy redondeados), evocando la
     cantera labrada en ángulos rectos de la arquitectura de Saltillo. */
  --radio-sm: 6px;
  --radio-md: 10px;
  --radio-pill: 999px;

  /* Refinamiento: sombra con tinte cálido (no gris neutro) para que las
     tarjetas combinen con --cal en vez de verse "frías". */
  --sombra-tarjeta: 0 1px 2px rgba(20, 42, 35, 0.06), 0 4px 12px rgba(20, 42, 35, 0.08);

  /* Puntos de corte (documental; los media queries usan el valor literal) */
  --punto-sm: 576px;
  --punto-md: 768px;
  --punto-lg: 992px;

  --ancho-sidebar: 288px;
  --alto-franja: 6px;
  --alto-pestanas: 60px;
}

/* ============================================================
   3. BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 100%; } /* 16px por defecto en todos los tamaños */

body {
  margin: 0;
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--fs-base);
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden; /* piso de calidad: nunca desplazamiento horizontal */
}

h1, h2 {
  font-family: var(--fuente-display);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  color: var(--monte);
  margin: 0 0 var(--e-4);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-lg); }
@media (min-width: 768px) {
  h2 { font-size: var(--fs-xl); }
}

h3, h4 {
  font-family: var(--fuente-texto);
  font-weight: 700;
  color: var(--monte);
  margin: 0 0 var(--e-3);
}

p { margin: 0 0 var(--e-3); }

a { color: var(--cielo-texto); }
a:hover { color: var(--monte); }

/* Cifras: folios, montos y fechas en listas, en mono con tabular-nums */
.cifra, .avance-pago__etiqueta, td.cifra, .lista-responsiva [data-tipo="cifra"] {
  font-family: var(--fuente-mono);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============================================================
   4. ACCESIBILIDAD — foco y movimiento
   ============================================================ */
:focus-visible {
  outline: 3px solid var(--sarape);
  outline-offset: 2px;
  border-radius: var(--radio-sm);
}

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

/* ============================================================
   5. CONTROLES — piso de 44px (verificar.py) y 16px de fuente
   ============================================================ */
.btn,
.form-control,
.form-select,
.nav-link {
  min-height: 44px;
}

input, select, textarea, .form-control, .form-select {
  font-size: 16px; /* piso de calidad: nunca menos de 16px en móvil */
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-4);
  font-family: var(--fuente-texto);
  font-size: var(--fs-md);
  font-weight: 700; /* AA: texto en negritas ≥14px solo exige 3:1 */
  border-radius: var(--radio-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.05s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-primario {
  background: var(--sarape);
  border-color: var(--sarape);
  color: #fff;
  /* Regla de usabilidad: la acción principal de la pantalla es la más fácil
     de tocar. 48px, no solo el piso de 44px que llevan los demás controles. */
  min-height: 48px;
  font-size: var(--fs-md);
}
.btn-primario:hover:not(:disabled) { filter: brightness(0.94); }

.btn-secundario {
  background: transparent;
  border-color: var(--monte);
  color: var(--monte);
}
.btn-secundario:hover:not(:disabled) { background: rgba(20, 42, 35, 0.06); }

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

.form-control, .form-select {
  border: 1px solid rgba(20, 42, 35, 0.28);
  border-radius: var(--radio-sm);
  padding: var(--e-2) var(--e-3);
  background-color: #fff;
  color: var(--tinta);
}
/* La flecha de Bootstrap se conserva (antes `background` la borraba y el select parecía caja de texto). */
.form-select {
  padding-right: 2.75rem;
  background-position: right 0.9rem center;
  background-size: 18px 14px;
  font-weight: 600;
  cursor: pointer;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sarape);
  box-shadow: 0 0 0 3px rgba(228, 112, 30, 0.25);
}

label, .form-label {
  font-weight: 600;
  font-size: var(--fs-xs);
  color: var(--monte);
}

/* Mensajes de validación: ocultos hasta que el formulario falla */
.field-validation-error, .validation-summary-errors {
  color: var(--barro);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.field-validation-valid { display: none; }

/* .campo — etiqueta siempre visible + texto de ayuda + error en lenguaje llano,
   junto al campo (regla de usabilidad: nunca solo un placeholder). */
.campo { margin-bottom: var(--e-4); }
.campo > label, .campo > .form-label {
  display: block;
  margin-bottom: var(--e-1);
}
/* Generalizada (no solo dentro de .campo): mismo tono discreto para ayuda y
   avisos fuera de un campo de formulario, p. ej. el aviso fijo del login. */
.texto-ayuda {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--fs-xs);
  color: rgba(24, 32, 28, 0.65);
}
.campo .mensaje-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: var(--e-1);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--barro);
}
.campo .mensaje-error svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.campo.campo--con-error .form-control,
.campo.campo--con-error .form-select {
  border-color: var(--barro);
  box-shadow: 0 0 0 1px var(--barro);
}

/* .estado-vacio — dice qué hacer, no solo que no hay datos */
.estado-vacio {
  text-align: center;
  padding: var(--e-6) var(--e-4);
  border: 1px dashed var(--monte-linea);
  border-radius: var(--radio-md);
  background: #fff;
}
.estado-vacio__icono {
  width: 44px;
  height: 44px;
  margin: 0 auto var(--e-3);
  color: var(--monte);
}
.estado-vacio h3 { margin-bottom: var(--e-1); }
.estado-vacio p {
  color: rgba(24, 32, 28, 0.7);
  max-width: 42ch;
  margin: 0 auto var(--e-4);
}

/* ============================================================
   6. LAYOUT AUTENTICADO — franja, sidebar/offcanvas, contenido
   ============================================================ */
.franja-superior {
  position: fixed;
  top: 0;
  left: 0;
  height: var(--alto-franja);
  width: 100%;
  background: var(--sarape-franja);
  background-size: 68px 68px;
  z-index: 1040;
}
@media (min-width: 992px) {
  .franja-superior { width: var(--ancho-sidebar); }
}

.barra-superior {
  position: sticky;
  top: 0;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  height: 60px;
  margin-top: var(--alto-franja);
  padding-inline: var(--e-2) var(--e-4);
  background: var(--monte);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.barra-superior__marca {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  min-width: 0;
  color: #fff;
  text-decoration: none;
}
.barra-superior__logo { height: 38px; width: auto; flex: none; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35)); }
.barra-superior__marca strong {
  display: block;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.02em;
}
.barra-superior__marca small {
  display: block;
  font-size: 0.8125rem;
  color: var(--trigo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.barra-superior .btn-abrir-menu {
  background: transparent;
  border: none;
  color: #fff;
  min-height: 48px;
  min-width: 48px;
  border-radius: var(--radio-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.barra-superior .btn-abrir-menu:active { background: rgba(255, 255, 255, 0.1); }

/* ---- Menú lateral ---------------------------------------------------- */
#menu-principal {
  --bs-offcanvas-width: min(86vw, var(--ancho-sidebar));
  border-right: none;
}
@media (min-width: 992px) {
  /* Bootstrap deja .offcanvas-lg estático desde 992px; lo fijamos como barra lateral completa. */
  #menu-principal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--ancho-sidebar);
    z-index: 1030;
    overflow-y: auto;
  }
  #menu-principal .offcanvas-body { height: 100%; }
  /* En escritorio el sarape cae por el borde del menú en vez de cruzar arriba. */
  .franja-superior { display: none; }
}
#menu-principal .offcanvas-body {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.menu-principal__panel {
  position: relative;
  flex: 1 1 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--e-5) var(--e-4) var(--e-4);
  color: #fff;
  background:
    radial-gradient(130% 55% at 0% 0%, rgba(228, 112, 30, 0.20), transparent 62%),
    radial-gradient(100% 45% at 100% 100%, rgba(210, 190, 101, 0.12), transparent 60%),
    var(--monte);
}
@media (min-width: 992px) {
  .menu-principal__panel { padding-right: calc(var(--e-4) + 6px); }
  .menu-principal__panel::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 6px;
    background: var(--sarape-franja);
    background-size: 68px 68px;
  }
}

.menu-principal__cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-4);
}
.marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  color: #fff;
  text-decoration: none;
  min-width: 0;
}
.marca:hover { color: #fff; }
.marca img {
  width: 64px;
  height: auto;
  flex: none;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}
.marca__nombre {
  display: block;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 1.625rem;
  line-height: 0.95;
  letter-spacing: 0.02em;
}
.marca__sub {
  display: block;
  margin-top: var(--e-1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--trigo);
}
.menu-principal__cerrar {
  flex: none;
  width: 48px;
  height: 48px;
  margin: -8px -8px 0 0;
  border: none;
  border-radius: var(--radio-md);
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.menu-principal__cerrar:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Contexto: a qué iglesia afecta lo que se hace (siempre visible). */
.contexto {
  display: block;
  margin-bottom: var(--e-4);
  padding: var(--e-3) var(--e-4);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
.contexto__etiqueta {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.contexto__valor {
  display: block;
  margin-top: 2px;
  font-weight: 700;
  font-size: var(--fs-base);
  line-height: 1.3;
  color: #fff;
}
.contexto__detalle {
  display: block;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.65);
}

.menu-principal__enlaces {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
}
.menu-principal__grupo {
  margin: var(--e-4) var(--e-3) var(--e-1);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.menu-principal__grupo:first-child { margin-top: 0; }
.menu-principal__enlaces .nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 48px;
  padding: 0 var(--e-3) 0 var(--e-4);
  border-radius: var(--radio-md);
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-base);
  font-weight: 600;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.menu-principal__enlaces .nav-link svg {
  width: 22px;
  height: 22px;
  flex: none;
  opacity: 0.8;
}
.menu-principal__enlaces .nav-link:hover {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.menu-principal__enlaces .nav-link.active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
.menu-principal__enlaces .nav-link.active svg { color: var(--trigo); opacity: 1; }
.menu-principal__enlaces .nav-link.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--sarape);
}
.menu-principal__enlaces .nav-link:focus-visible { outline-color: var(--trigo); }

/* Pie: usuario y menú de cuenta (se abre hacia arriba) */
.menu-principal__pie {
  margin-top: var(--e-5);
  padding-top: var(--e-3);
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
#boton-usuario {
  width: 100%;
  min-height: 56px;
  background: transparent;
  border: none;
  color: #fff;
  border-radius: 12px;
  padding: var(--e-2);
  display: flex;
  align-items: center;
  gap: var(--e-3);
  text-align: left;
}
#boton-usuario:hover,
#boton-usuario[aria-expanded="true"] { background: rgba(255, 255, 255, 0.08); }
#boton-usuario .avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radio-pill);
  background: var(--trigo);
  color: var(--monte);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 1.25rem;
  flex: none;
}
#boton-usuario .datos { flex: 1 1 auto; min-width: 0; }
#boton-usuario .datos strong {
  display: block;
  font-size: var(--fs-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#boton-usuario .datos small { color: rgba(255, 255, 255, 0.65); font-size: 0.8125rem; }
#boton-usuario .chevron { flex: none; opacity: 0.7; }

.menu-usuario {
  width: calc(var(--ancho-sidebar) - 2 * var(--e-4));
  padding: var(--e-2);
  border: none;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
}
.menu-usuario .dropdown-item {
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radio-sm);
  font-weight: 600;
  color: var(--tinta);
}
.menu-usuario__salir { color: var(--barro) !important; }
.menu-usuario__titulo {
  display: block;
  margin-bottom: var(--e-2);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(24, 32, 28, 0.6);
}

.contenido-principal {
  margin-top: 0;
  /* Ocupa todo el ancho disponible junto al menú (pedido del usuario 2026-09-27). */
  max-width: none;
  padding: var(--e-5) var(--e-5) var(--e-7);
}
@media (max-width: 575.98px) {
  .contenido-principal { padding-inline: 16px; } /* piso de calidad: ≤16px bajo 576px */
}
@media (min-width: 992px) {
  body.con-menu-lateral .contenido-principal { margin-left: var(--ancho-sidebar); }
}

body.con-pestanas-inferiores .contenido-principal {
  padding-bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + var(--e-5));
}
@media (min-width: 992px) {
  body.con-pestanas-inferiores .contenido-principal { padding-bottom: var(--e-7); }
}

/* Pestañas inferiores (rol Director, <992px) */
#pestanas-inferiores {
  display: none;
}
@media (max-width: 991.98px) {
  body.con-pestanas-inferiores #pestanas-inferiores {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035;
    background: #fff;
    border-top: 1px solid var(--monte-linea);
    box-shadow: 0 -2px 10px rgba(20, 42, 35, 0.08);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
#pestanas-inferiores a {
  flex: 1 1 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: var(--monte);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}
#pestanas-inferiores a { position: relative; color: rgba(20, 42, 35, 0.72); }
#pestanas-inferiores a svg {
  width: 44px; height: 30px; padding: 4px 11px;
  border-radius: var(--radio-pill);
  transition: background-color 0.15s ease;
}
#pestanas-inferiores a.active { color: var(--monte); font-weight: 700; }
#pestanas-inferiores a.active svg { background: rgba(228, 112, 30, 0.16); color: var(--barro); }

/* ============================================================
   7. LAYOUT PÚBLICO
   ============================================================ */
.layout-publico {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cal);
}
.layout-publico .franja-superior { width: 100%; }
.layout-publico__cabecera {
  padding: var(--e-6) var(--e-4) var(--e-4);
  display: flex;
  justify-content: center;
}
.layout-publico__cabecera img { height: 64px; width: auto; }
.layout-publico__contenido {
  flex: 1 1 auto;
  width: 100%;
  max-width: 480px;
  margin-inline: auto;
  padding: 0 var(--e-4) var(--e-6);
}
@media (max-width: 575.98px) {
  .layout-publico__contenido { padding-inline: 16px; }
}

/* ============================================================
   8. COMPONENTES
   ============================================================ */

/* .tarjeta */
.tarjeta {
  background: #fff;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--e-5);
}
@media (max-width: 575.98px) {
  .tarjeta { padding: var(--e-4); }
}

/* .tarjeta--alerta: aviso que pide una decisión o avisa un cambio; mismo acento que .kpi */
.tarjeta--alerta { border-left: 4px solid var(--sarape); }
.tarjeta--alerta h2, .tarjeta--alerta h3 { margin-top: var(--e-1); }
.tarjeta__acciones { display: flex; gap: var(--e-3); flex-wrap: wrap; margin-top: var(--e-4); }
@media (max-width: 575.98px) {
  .tarjeta__acciones > *, .tarjeta__acciones form .btn { flex: 1 1 100%; width: 100%; }
}

/* .kpi */
.kpi {
  background: #fff;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-tarjeta);
  border-left: 4px solid var(--sarape);
  padding: var(--e-4) var(--e-5);
  display: flex;
  flex-direction: column;
  gap: var(--e-1);
}
.kpi__etiqueta {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--monte);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.kpi__valor {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: var(--fs-2xl);
  color: var(--monte);
  line-height: 1;
}
.kpi__detalle {
  font-size: var(--fs-xs);
  color: rgba(24, 32, 28, 0.65);
}

/* .estado */
.estado {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radio-pill);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
}
.estado::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.estado--pendiente { background: rgba(210, 190, 101, 0.28); color: #6b5a12; }
.estado--confirmado { background: rgba(63, 143, 58, 0.18); color: #2b6b27; }
.estado--baja { background: rgba(168, 64, 28, 0.14); color: var(--barro); }
.estado--vigente { background: rgba(28, 134, 196, 0.16); color: var(--cielo-texto); }
.estado--cancelado { background: rgba(24, 32, 28, 0.12); color: rgba(24, 32, 28, 0.7); }
.estado--menor { background: rgba(228, 112, 30, 0.16); color: #9a4a10; }

/* .avance-pago — firma visual */
.avance-pago {
  position: relative;
  height: 20px;
  border-radius: var(--radio-pill);
  background: var(--cal);
  border: 1px solid var(--monte-linea);
  overflow: hidden;
}
.avance-pago__relleno {
  position: absolute;
  inset: 0;
  width: var(--avance, 0%);
  background: var(--sarape-franja);
  background-size: 48px 48px;
  border-radius: var(--radio-pill) 0 0 var(--radio-pill);
  transition: width 0.6s ease-out;
}
.avance-pago[style*="--avance: 100%"] .avance-pago__relleno,
.avance-pago__relleno[data-completo="true"] {
  border-radius: var(--radio-pill);
}
.avance-pago__anticipo {
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: var(--anticipo, 0%);
  width: 3px;
  background: var(--monte);
  box-shadow: 0 0 0 1px #fff;
}
.avance-pago__leyenda {
  display: flex;
  justify-content: space-between;
  margin-top: var(--e-1);
  font-size: var(--fs-xs);
}
.avance-pago__leyenda .cifra { color: var(--monte); font-weight: 600; }

/* .barra-filtros */
.barra-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  align-items: end;
  background: #fff;
  border-radius: var(--radio-md);
  padding: var(--e-4);
  box-shadow: var(--sombra-tarjeta);
  margin-bottom: var(--e-5);
}
.barra-filtros > * { flex: 1 1 200px; }
.barra-filtros .btn { flex: 0 0 auto; }
.btn-mostrar-filtros { display: none; }
@media (max-width: 767.98px) {
  .btn-mostrar-filtros { display: inline-flex; width: 100%; margin-bottom: var(--e-3); }
  .barra-filtros { flex-direction: column; align-items: stretch; display: none; }
  .barra-filtros.mostrar-movil { display: flex; }
}

/* .encabezado-evento */
.encabezado-evento {
  background: var(--monte);
  color: #fff;
  border-radius: var(--radio-md);
  padding: var(--e-5);
  display: flex;
  align-items: center;
  gap: var(--e-4);
  margin-bottom: var(--e-5);
}
.encabezado-evento img {
  max-height: 56px;
  width: auto;
}
.encabezado-evento__nombre {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: var(--fs-xl);
}

/* .lista-responsiva — una sola estructura, tabla en desktop, tarjetas en móvil */
.lista-responsiva {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.lista-responsiva__encabezado { display: none; }
.lista-responsiva__fila {
  background: #fff;
  border-radius: var(--radio-md);
  box-shadow: var(--sombra-tarjeta);
  padding: var(--e-3) var(--e-4);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-2);
}
.lista-responsiva__fila > * {
  display: flex;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 24px;
  align-items: center;
}
.lista-responsiva__fila > *::before {
  content: attr(data-etiqueta);
  font-weight: 600;
  color: var(--monte);
  font-size: var(--fs-xs);
}
@media (min-width: 768px) {
  .lista-responsiva { gap: 0; border-radius: var(--radio-md); overflow: hidden; box-shadow: var(--sombra-tarjeta); }
  .lista-responsiva__encabezado {
    display: grid;
    background: var(--monte);
    color: #fff;
    font-size: var(--fs-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: var(--e-3) var(--e-4);
  }
  .lista-responsiva__fila {
    border-radius: 0;
    box-shadow: none;
    border-bottom: 1px solid var(--monte-linea);
    background: #fff;
  }
  .lista-responsiva__fila:nth-child(odd) { background: rgba(20, 42, 35, 0.02); }
  .lista-responsiva__fila > *::before { content: none; }
  .lista-responsiva__encabezado,
  .lista-responsiva__fila {
    grid-template-columns: var(--columnas-lista, 2fr 1.4fr 1fr 1fr);
  }
}

/* .subir-archivo */
.subir-archivo {
  border: 1px dashed var(--monte-linea);
  border-radius: var(--radio-md);
  padding: var(--e-4);
  background: #fff;
}
.subir-archivo__vista {
  margin-top: var(--e-3);
  display: flex;
  align-items: center;
  gap: var(--e-2);
}
.subir-archivo__vista img {
  max-height: 90px;
  max-width: 160px;
  border-radius: var(--radio-sm);
  border: 1px solid var(--monte-linea);
  object-fit: cover;
}
.subir-archivo__nombre {
  font-family: var(--fuente-mono);
  font-size: var(--fs-xs);
  background: var(--cal);
  padding: var(--e-1) var(--e-2);
  border-radius: var(--radio-sm);
}

/* .aviso — toast que lee TempData["Aviso"] */
.aviso-contenedor { z-index: 1090; }
.aviso {
  background: var(--monte);
  color: #fff;
  border-radius: var(--radio-md);
  min-width: 260px;
  box-shadow: var(--sombra-tarjeta);
}
.aviso .toast-body { font-size: var(--fs-xs); }
.aviso--error { background: var(--barro); }

/* ============================================================
   9. GUÍA DE ESTILOS (/Estilos)
   ============================================================ */
.muestra-paleta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--e-4);
}
.muestra-paleta__ficha {
  border-radius: var(--radio-md);
  overflow: hidden;
  box-shadow: var(--sombra-tarjeta);
  background: #fff;
}
.muestra-paleta__color { height: 64px; }
.muestra-paleta__info { padding: var(--e-2) var(--e-3); }
.muestra-paleta__info strong { display: block; font-size: var(--fs-xs); }
.muestra-paleta__info code { font-family: var(--fuente-mono); font-size: 0.75rem; }
.muestra-paleta__info span { display: block; font-size: 0.75rem; color: rgba(24, 32, 28, 0.65); }

.muestra-tipografia dt { font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.6); margin-top: var(--e-3); }
.muestra-tipografia dd { margin: 0; }

.fila-botones, .fila-estados { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: center; }

section.bloque-guia { margin-bottom: var(--e-7); }
section.bloque-guia > p.explicacion { color: rgba(24, 32, 28, 0.7); max-width: 65ch; }

/* ============================================================
   COMPONENTE: selector de eventos (.selector-eventos)
   Tarjetas tocables con logo, nombre y fechas; la elegida queda
   marcada con borde --sarape y palomita. En móvil se desliza.
   ============================================================ */
.selector-eventos { margin-bottom: var(--e-4); }
.selector-eventos__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-2);
  margin-bottom: var(--e-2);
}
.selector-eventos__titulo { font-family: var(--fuente-texto); font-size: var(--fs-xs); font-weight: 700; letter-spacing: .02em; color: var(--monte); margin: 0; }
.selector-eventos__pista { font-size: 0.8125rem; color: rgba(24, 32, 28, 0.6); }
@media (min-width: 992px) { .selector-eventos__pista { display: none; } }
.selector-eventos__lista {
  display: flex;
  gap: var(--e-3);
  margin: 0 -16px;
  padding: 4px 16px var(--e-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 16px;
  scrollbar-width: none;
  list-style: none;
}
.selector-eventos__lista::-webkit-scrollbar { display: none; }
/* Cada tarjeta llena su celda: todas miden lo mismo aunque el nombre ocupe una o dos líneas. */
.selector-eventos__lista > li { display: flex; flex: 0 0 auto; }
@media (min-width: 992px) {
  .selector-eventos__lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: 1fr;
    margin: 0;
    padding: 4px 4px var(--e-2);
    overflow: visible;
  }
  .selector-eventos__lista > li .selector-eventos__opcion { width: 100%; }
}
.selector-eventos__opcion {
  position: relative;
  flex: 0 0 auto;
  width: 240px;
  min-height: 76px;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-3);
  scroll-snap-align: start;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  box-shadow: var(--sombra-tarjeta);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.selector-eventos__opcion:hover { border-color: rgba(20, 42, 35, 0.18); color: var(--tinta); }
.selector-eventos__opcion:active { transform: scale(0.98); }
.selector-eventos__opcion[aria-current="true"] {
  border-color: var(--sarape);
  box-shadow: 0 0 0 4px rgba(228, 112, 30, 0.14), var(--sombra-tarjeta);
}
.selector-eventos__mini {
  width: 48px;
  height: 48px;
  flex: none;
  border-radius: 12px;
  background: var(--monte);
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--trigo);
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 1.25rem;
}
.selector-eventos__mini img { width: 44px; height: auto; }
.selector-eventos__texto { min-width: 0; flex: 1 1 auto; }
.selector-eventos__nombre {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  font-size: 0.9375rem;
  line-height: 1.25;
}
.selector-eventos__fecha { display: block; font-size: 0.8125rem; color: rgba(24, 32, 28, 0.68); }
.selector-eventos__estado {
  display: inline-block;
  margin-top: 2px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--barro);
}
.selector-eventos__palomita {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: var(--radio-pill);
  background: var(--sarape);
  color: #fff;
  display: none;
  place-items: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.selector-eventos__opcion[aria-current="true"] .selector-eventos__palomita { display: grid; }

/* Portada del evento elegido: logo grande sobre --monte, datos y acción principal. */
.portada-evento {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-4);
  align-items: center;
  margin-bottom: var(--e-5);
  padding: var(--e-5);
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(228, 112, 30, 0.28), transparent 55%),
    var(--monte);
  box-shadow: 0 10px 30px rgba(20, 42, 35, 0.25);
}
.portada-evento__logo { width: 100%; max-width: 220px; height: auto; }
.portada-evento__nombre {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: #fff;
}
.portada-evento__dato {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, 0.86);
}
.portada-evento__dato svg { width: 18px; height: 18px; flex: none; color: var(--trigo); }
.portada-evento .btn { width: 100%; min-height: 52px; font-size: var(--fs-md); }
@media (min-width: 768px) {
  .portada-evento { grid-template-columns: auto 1fr auto; gap: var(--e-5); padding: var(--e-5) var(--e-6); }
  .portada-evento__logo { width: 200px; }
  .portada-evento .btn { width: auto; padding-inline: var(--e-6); }
}

/* ============================================================
   TANDA 2 — Eventos disponibles (P-05) y Mis inscritos (P-06)
   ============================================================ */

/* Encabezado de página: título + una línea que dice qué se hace aquí */
.encabezado-pagina { margin-bottom: var(--e-5); }
.encabezado-pagina h1 { margin-bottom: var(--e-1); }
.encabezado-pagina__ayuda { margin: 0; color: rgba(24, 32, 28, 0.75); max-width: 60ch; }

.titulo-seccion {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  margin: 0 0 var(--e-3);
  font-size: var(--fs-lg);
}
.titulo-seccion__cuenta {
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  border-radius: var(--radio-pill);
  background: rgba(20, 42, 35, 0.1);
  color: var(--monte);
  font-family: var(--fuente-texto);
  font-size: var(--fs-xs);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.seccion-cerrados { margin-top: var(--e-7); }
.seccion-cerrados > .texto-ayuda { margin: calc(-1 * var(--e-2)) 0 var(--e-3); }

.selector-iglesia { max-width: 520px; margin-bottom: var(--e-5); }
.selector-iglesia .form-select { font-size: var(--fs-md); min-height: 52px; }

/* Rejilla y tarjeta de evento */
.rejilla-eventos { display: grid; gap: var(--e-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .rejilla-eventos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); } }
@media (min-width: 1280px) { .rejilla-eventos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.tarjeta-evento {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--sombra-tarjeta);
}
.tarjeta-evento__portada {
  position: relative;
  display: grid;
  place-items: center;
  height: 148px;
  padding: var(--e-4);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(228, 112, 30, 0.30), transparent 55%),
    var(--monte);
}
.tarjeta-evento__portada img { max-height: 112px; max-width: 80%; width: auto; }
.tarjeta-evento__iniciales {
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 3.5rem;
  line-height: 1;
  color: var(--trigo);
  letter-spacing: 0.04em;
}
.tarjeta-evento__sello {
  position: absolute;
  left: var(--e-3);
  top: var(--e-3);
  padding: 5px 12px;
  border-radius: var(--radio-pill);
  font-size: 0.8125rem;
  font-weight: 700;
  background: #fff;
  color: var(--monte);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.tarjeta-evento__sello--lleno { background: var(--barro); color: #fff; }
.tarjeta-evento__sello--cerrado { background: #fff; color: var(--barro); }
.tarjeta-evento__sello--gratis { background: var(--trigo); color: var(--monte); }

.tarjeta-evento__cuerpo {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  padding: var(--e-4) var(--e-4) var(--e-4);
}
@media (min-width: 576px) { .tarjeta-evento__cuerpo { padding: var(--e-5); } }
.tarjeta-evento__nombre { margin: 0; font-size: var(--fs-lg); line-height: 1.2; }
.tarjeta-evento__datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; color: rgba(24, 32, 28, 0.8); }
.tarjeta-evento__datos li { display: flex; align-items: center; gap: var(--e-2); }
.tarjeta-evento__datos svg { width: 18px; height: 18px; flex: none; color: var(--sarape); }

.tarjeta-evento__costos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--e-2);
  margin: 0;
}
.tarjeta-evento__costos div {
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-md);
  background: var(--cal);
}
.tarjeta-evento__costos dt { font-size: 0.75rem; font-weight: 600; color: rgba(24, 32, 28, 0.65); }
.tarjeta-evento__costos dd {
  margin: 0;
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--monte);
}

.tarjeta-evento__cupo-texto { font-size: var(--fs-xs); margin-bottom: 6px; color: rgba(24, 32, 28, 0.8); }
.tarjeta-evento__cupo-texto strong { color: var(--monte); }
.medidor { height: 8px; border-radius: var(--radio-pill); background: var(--cal); overflow: hidden; }
.medidor__relleno { height: 100%; border-radius: var(--radio-pill); background: var(--monte); }
.medidor__relleno--lleno { background: var(--barro); }

.tarjeta-evento__iglesia {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  padding-top: var(--e-3);
  border-top: 1px dashed var(--monte-linea);
}
.tarjeta-evento__iglesia-dato { display: flex; flex-direction: column; line-height: 1.2; }
.tarjeta-evento__iglesia-dato strong { font-size: var(--fs-md); color: var(--monte); }
.tarjeta-evento__iglesia-dato span { font-size: 0.8125rem; color: rgba(24, 32, 28, 0.65); }
.tarjeta-evento__iglesia-dato--deuda strong { color: var(--barro); }
.tarjeta-evento__accion { margin-top: auto; width: 100%; min-height: 52px; }
.tarjeta-evento--cerrado .tarjeta-evento__portada { filter: saturate(0.6); }

/* Volver */
.volver {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  margin: calc(-1 * var(--e-2)) 0 var(--e-2) -6px;
  padding: 0 8px 0 2px;
  border-radius: var(--radio-sm);
  font-weight: 700;
  color: var(--monte);
  text-decoration: none;
}
.volver:hover { background: rgba(20, 42, 35, 0.06); color: var(--monte); }

/* Encabezado del evento en Mis inscritos */
.encabezado-evento--inscritos {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--e-3);
  border-radius: 18px;
  padding: var(--e-4) var(--e-4) var(--e-4);
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(228, 112, 30, 0.28), transparent 55%),
    var(--monte);
}
.encabezado-evento--inscritos img { max-height: 72px; }
.encabezado-evento__info { display: flex; flex-direction: column; gap: 2px; color: rgba(255, 255, 255, 0.86); font-size: var(--fs-base); }
.encabezado-evento__info span:first-child { color: #fff; font-weight: 700; }
.encabezado-evento__accion { display: flex; flex-direction: column; gap: 6px; }
.encabezado-evento__accion .btn { width: 100%; min-height: 52px; }
.encabezado-evento__accion .btn:disabled { opacity: 1; background: rgba(255, 255, 255, 0.14); border-color: transparent; color: rgba(255, 255, 255, 0.7); }
.encabezado-evento__motivo { font-size: var(--fs-xs); font-weight: 700; color: var(--trigo); text-align: center; }
@media (min-width: 768px) {
  .encabezado-evento--inscritos { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--e-5); padding: var(--e-4) var(--e-5); }
  .encabezado-evento__accion .btn { width: auto; padding-inline: var(--e-6); }
}

.titulo-con-contexto { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-1) var(--e-3); margin-bottom: var(--e-3); }
.titulo-con-contexto h1 { margin: 0; }
.titulo-con-contexto__detalle { font-weight: 700; color: rgba(24, 32, 28, 0.6); }

/* Resumen de la iglesia en el evento */
.resumen-inscritos {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "cuantos deuda" "pago pago";
  gap: var(--e-3) var(--e-5);
  align-items: center;
  margin-bottom: var(--e-4);
}
.resumen-inscritos__dato { display: flex; flex-direction: column; line-height: 1; grid-area: cuantos; }
.resumen-inscritos__dato--deuda { grid-area: deuda; align-items: flex-end; text-align: right; }
.resumen-inscritos__valor { font-family: var(--fuente-display); font-weight: 800; font-size: 2rem; color: var(--monte); }
.resumen-inscritos__dato--deuda .resumen-inscritos__valor { color: var(--barro); }
.resumen-inscritos__etiqueta { margin-top: 4px; font-size: var(--fs-xs); font-weight: 600; color: rgba(24, 32, 28, 0.65); }
.resumen-inscritos__pago { grid-area: pago; }
@media (min-width: 768px) {
  .resumen-inscritos { grid-template-columns: auto 1fr auto; grid-template-areas: "cuantos pago deuda"; gap: var(--e-6); }
}

/* Chips de filtro + buscador */
.herramientas-lista { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
@media (min-width: 992px) { .herramientas-lista { grid-template-columns: 1fr 320px; align-items: center; } }
.chips-filtro {
  display: flex;
  gap: var(--e-2);
  margin: 0 -16px;
  padding: 2px 16px 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.chips-filtro::-webkit-scrollbar { display: none; }
@media (min-width: 576px) { .chips-filtro { margin: 0; padding: 2px 0 4px; flex-wrap: wrap; overflow: visible; } }
.chip-filtro {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 44px;
  padding: 0 var(--e-3) 0 var(--e-4);
  border-radius: var(--radio-pill);
  border: 1.5px solid rgba(20, 42, 35, 0.2);
  background: #fff;
  color: var(--monte);
  font-weight: 700;
  font-size: var(--fs-xs);
  text-decoration: none;
  white-space: nowrap;
}
.chip-filtro:hover { border-color: var(--monte); color: var(--monte); }
.chip-filtro__cuenta {
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: var(--radio-pill);
  background: var(--cal);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
}
.chip-filtro[aria-current="true"] { background: var(--monte); border-color: var(--monte); color: #fff; }
.chip-filtro[aria-current="true"] .chip-filtro__cuenta { background: rgba(255, 255, 255, 0.18); }
.chip-filtro--alerta .chip-filtro__cuenta { background: #fbe3d6; color: var(--barro); }

.buscador { position: relative; }
.buscador svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: rgba(24, 32, 28, 0.55); pointer-events: none; }
.buscador .form-control { padding-left: 44px; min-height: 48px; border-radius: var(--radio-pill); }

/* Lista de inscritos: una fila tocable por joven (tarjeta en móvil, tabla en escritorio) */
.lista-inscritos { display: flex; flex-direction: column; gap: var(--e-3); }
.lista-inscritos__encabezado { display: none; }
.inscrito {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  grid-template-areas:
    "avatar principal ir"
    "pago pago pago"
    "pie pie pie";
  gap: var(--e-3) var(--e-3);
  align-items: center;
  padding: var(--e-4);
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sombra-tarjeta);
  color: var(--tinta);
  text-decoration: none;
  border: 2px solid transparent;
  transition: border-color 0.15s ease;
}
.inscrito:hover { border-color: rgba(20, 42, 35, 0.14); color: var(--tinta); }
.inscrito:active { transform: scale(0.995); }
.inscrito__avatar {
  grid-area: avatar;
  width: 44px;
  height: 44px;
  border-radius: var(--radio-pill);
  background: rgba(20, 42, 35, 0.08);
  color: var(--monte);
  font-weight: 700;
  display: grid;
  place-items: center;
}
.inscrito__principal { grid-area: principal; min-width: 0; }
.inscrito__nombre { display: block; font-weight: 700; font-size: var(--fs-base); line-height: 1.25; color: var(--monte); }
.inscrito__etiquetas { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.inscrito__etiquetas .estado { font-size: 0.8125rem; padding: 3px 10px; }
.inscrito__nota { font-size: 0.8125rem; color: rgba(24, 32, 28, 0.6); }
.inscrito__pago { grid-area: pago; display: grid; gap: 6px; }
.avance-pago--mini { display: block; height: 12px; }
.avance-pago--mini .avance-pago__anticipo { top: -2px; bottom: -2px; width: 2px; }
.inscrito__pago-texto { font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.75); }
.inscrito__pago-texto .cifra { color: var(--monte); font-weight: 600; }
.inscrito__pie { grid-area: pie; display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.inscrito__saldo { grid-area: saldo; display: flex; align-items: baseline; gap: 6px; }
.inscrito__saldo-nota { font-size: var(--fs-xs); font-weight: 600; color: rgba(24, 32, 28, 0.65); }
.inscrito__deuda { font-size: var(--fs-md); font-weight: 700; color: var(--barro); }
.inscrito__liquidado { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: var(--fs-xs); color: #2b6b27; }
.inscrito__extras { grid-area: extras; text-align: right; font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.7); }
.inscrito__ir { grid-area: ir; color: rgba(20, 42, 35, 0.4); }
.inscrito--baja { background: rgba(255, 255, 255, 0.6); box-shadow: none; border-color: var(--monte-linea); }
.inscrito--baja .inscrito__nombre { color: rgba(20, 42, 35, 0.6); text-decoration: line-through; text-decoration-color: rgba(168, 64, 28, 0.5); }
.lista-inscritos__pie { margin-top: var(--e-3); }

@media (min-width: 768px) {
  .lista-inscritos { gap: 0; background: #fff; border-radius: 16px; box-shadow: var(--sombra-tarjeta); overflow: hidden; }
  .lista-inscritos__encabezado,
  .inscrito {
    grid-template-columns: 44px minmax(0, 2.2fr) minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, 1fr) 22px;
    grid-template-areas: "avatar principal pago saldo extras ir";
    gap: var(--e-4);
  }
  .lista-inscritos__encabezado {
    display: grid;
    padding: var(--e-3) var(--e-4);
    background: var(--monte);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .lista-inscritos__encabezado span:first-child { grid-column: 1 / 3; }
  .inscrito {
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--monte-linea);
    padding: var(--e-3) var(--e-4);
  }
  .inscrito:last-child { border-bottom: none; }
  .inscrito:hover { background: rgba(228, 112, 30, 0.05); }
  .inscrito--baja { background: rgba(20, 42, 35, 0.025); }
  .inscrito__pie { display: contents; }
  .inscrito__saldo { flex-direction: column; gap: 0; }
  .inscrito__extras { justify-self: start; text-align: left; }
}

.inscrito[hidden], [data-fila][hidden] { display: none !important; }

/* ============================================================
   TANDA 3 — Inscribir (P-07), Detalle de inscripción (P-08)
   ============================================================ */
.btn-bloque { width: 100%; min-height: 52px; }
.btn-sm { font-size: var(--fs-xs); padding-inline: var(--e-3); }

.evento-mini { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); }
.evento-mini strong { display: block; color: var(--monte); line-height: 1.2; }
.evento-mini span span { display: block; font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.65); }

.titulo-seccion--chico { font-size: var(--fs-md); margin-top: var(--e-6); }

/* Aviso de bloqueo (registro cerrado, cupo lleno, baja) */
.aviso-bloqueo {
  display: flex;
  gap: var(--e-4);
  align-items: flex-start;
  padding: var(--e-5);
  margin-bottom: var(--e-5);
  border-radius: 16px;
  background: #fff7f2;
  border: 1.5px solid rgba(168, 64, 28, 0.25);
}
.aviso-bloqueo > svg { width: 40px; height: 40px; flex: none; color: var(--barro); }
.aviso-bloqueo h2 { margin: 0 0 var(--e-1); font-size: var(--fs-lg); color: var(--barro); }
.aviso-bloqueo p { margin: 0 0 var(--e-4); }
.aviso-bloqueo--baja p { margin-bottom: 0; }

/* P-07: lista de candidatos con casilla grande (toda la fila es tocable) */
.herramientas-lista--simple { grid-template-columns: 1fr; }
@media (min-width: 768px) { .herramientas-lista--simple { grid-template-columns: minmax(0, 420px) 1fr; align-items: center; } }
.pista-lugares { font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.7); }
.pista-lugares strong { color: var(--monte); }

.lista-candidatos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
@media (min-width: 992px) { .lista-candidatos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); } }
.candidato { position: relative; }
.candidato__casilla { position: absolute; opacity: 0; width: 1px; height: 1px; }
.candidato__etiqueta {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 64px;
  padding: var(--e-3) var(--e-4);
  margin: 0;
  background: #fff;
  border: 2px solid transparent;
  border-radius: 14px;
  box-shadow: var(--sombra-tarjeta);
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 400;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.candidato__etiqueta:hover { border-color: rgba(20, 42, 35, 0.18); }
.candidato__marca {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 9px;
  border: 2px solid rgba(20, 42, 35, 0.35);
  background: #fff;
  display: grid;
  place-items: center;
  color: transparent;
  transition: all 0.12s ease;
}
.candidato__marca svg { width: 18px; height: 18px; }
.candidato__texto { flex: 1 1 auto; min-width: 0; }
.candidato__nombre { display: block; font-weight: 700; color: var(--monte); line-height: 1.25; }
.candidato__detalle { font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.65); }
.candidato .estado { font-size: 0.75rem; padding: 3px 9px; white-space: normal; text-align: center; }
.candidato__casilla:checked + .candidato__etiqueta { border-color: var(--sarape); background: #fff8f2; }
.candidato__casilla:checked + .candidato__etiqueta .candidato__marca { background: var(--sarape); border-color: var(--sarape); color: #fff; }
.candidato__casilla:focus-visible + .candidato__etiqueta { outline: 3px solid var(--sarape); outline-offset: 2px; }
.candidato--inscrito .candidato__etiqueta { cursor: default; background: rgba(255, 255, 255, 0.55); box-shadow: none; border-color: var(--monte-linea); }
.candidato--inscrito .candidato__marca { background: rgba(63, 143, 58, 0.18); border-color: transparent; color: #2b6b27; }
.candidato[hidden] { display: none; }
.alta-nuevo { margin: var(--e-5) 0; font-weight: 600; }
.alta-nuevo a { color: var(--barro); }

/* Barra de acción fija abajo (sobre las pestañas en móvil) */
.barra-accion {
  position: sticky;
  bottom: calc(var(--alto-pestanas) + env(safe-area-inset-bottom) + 8px);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin: var(--e-4) -8px 0;
  padding: var(--e-3) var(--e-3) var(--e-3) var(--e-4);
  border-radius: 16px;
  background: var(--monte);
  color: #fff;
  box-shadow: 0 10px 30px rgba(20, 42, 35, 0.35);
}
@media (min-width: 992px) { .barra-accion { bottom: var(--e-4); margin-inline: 0; } }
.barra-accion__resumen { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.barra-accion__resumen strong { font-size: var(--fs-base); }
.barra-accion__detalle { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.75); }
.barra-accion__detalle--error { color: #ffc9b3; font-weight: 700; }
.barra-accion .btn { flex: none; min-height: 52px; }
.barra-accion .btn:disabled { opacity: 1; background: rgba(255, 255, 255, 0.14); border-color: transparent; color: rgba(255, 255, 255, 0.6); }

/* P-08: ficha del joven */
.ficha-joven {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3) var(--e-4);
  align-items: center;
  margin-bottom: var(--e-4);
}
.ficha-joven__avatar {
  width: 64px;
  height: 64px;
  border-radius: var(--radio-pill);
  background: var(--monte);
  color: var(--trigo);
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 1.75rem;
  display: grid;
  place-items: center;
}
.ficha-joven__titulo {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--sarape);
}
.ficha-joven__nombre {
  margin: 2px 0 var(--e-2);
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1.05;
  color: var(--monte);
}
.ficha-joven__etiquetas { display: flex; flex-wrap: wrap; gap: 6px var(--e-2); align-items: center; }
.ficha-joven__dato { font-size: var(--fs-xs); font-weight: 600; color: rgba(24, 32, 28, 0.7); }
.ficha-joven__evento {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--sombra-tarjeta);
}
.ficha-joven__evento strong { display: block; font-size: var(--fs-xs); color: var(--monte); }
.ficha-joven__evento span span { display: block; font-size: 0.8125rem; color: rgba(24, 32, 28, 0.65); }
@media (min-width: 992px) {
  .ficha-joven { grid-template-columns: auto 1fr auto; }
  .ficha-joven__evento { grid-column: auto; }
  .ficha-joven__nombre { font-size: 2.5rem; }
}

/* Cuenta del joven */
.cuenta-joven { margin-bottom: var(--e-4); }
.cuenta-joven__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.cuenta-joven__cifra { display: flex; flex-direction: column; }
.cuenta-joven__etiqueta { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(24, 32, 28, 0.6); }
.cuenta-joven__valor { font-family: var(--fuente-display); font-weight: 800; font-size: 1.5rem; line-height: 1.1; color: var(--monte); }
@media (min-width: 576px) { .cuenta-joven__valor { font-size: 2.25rem; } }
.cuenta-joven__cifra--saldo .cuenta-joven__valor { color: var(--barro); }
.cuenta-joven__cifra--saldada .cuenta-joven__valor { color: #2b6b27; }
.cuenta-joven__pie { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-3); margin-top: var(--e-3); }
.cuenta-joven__pie .btn { min-height: 52px; }
@media (max-width: 575.98px) { .cuenta-joven__pie .btn { width: 100%; } }
.insignia { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); font-weight: 700; }
.insignia--ok { color: #2b6b27; }
.insignia--falta { color: #8a5a00; }

/* Lo que falta */
.pendientes { margin-bottom: var(--e-4); }
.pendientes h2 { font-size: var(--fs-md); margin: 0 0 var(--e-3); }
.pendientes__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.pendiente { display: flex; align-items: center; gap: var(--e-3); min-height: 40px; font-weight: 600; }
.pendiente a { margin-left: auto; font-weight: 700; color: var(--barro); white-space: nowrap; }
.pendiente__icono {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: var(--radio-pill);
  border: 2px dashed rgba(168, 64, 28, 0.55);
}
.pendiente--hecho { color: rgba(24, 32, 28, 0.6); font-weight: 400; }
.pendiente--hecho .pendiente__icono {
  border: none;
  background: #2b6b27 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-9'/%3E%3C/svg%3E") center / 16px no-repeat;
}

.atajos { display: flex; gap: var(--e-2); margin: 0 -16px var(--e-4); padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; position: sticky; top: 66px; z-index: 15; background: var(--cal); }
.atajos::-webkit-scrollbar { display: none; }
@media (min-width: 992px) { .atajos { top: 0; margin-inline: 0; padding-inline: 0; padding-top: var(--e-2); } }
.seccion-detalle { margin-bottom: var(--e-4); scroll-margin-top: 130px; }
.seccion-detalle > h2 { font-size: var(--fs-lg); margin: 0 0 var(--e-3); }
.seccion-detalle h3 { font-size: var(--fs-md); margin: 0 0 var(--e-3); }

/* Pagos */
.lista-pagos { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: var(--e-2); }
.pago {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "monto ver" "info ver" "motivo motivo";
  gap: 2px var(--e-3);
  align-items: center;
  padding: var(--e-3) var(--e-4);
  border-radius: 12px;
  background: var(--cal);
}
.pago__monto { grid-area: monto; font-size: var(--fs-md); font-weight: 700; color: var(--monte); }
.pago__info { grid-area: info; display: flex; align-items: center; gap: var(--e-2); font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.7); }
.pago__info .estado { font-size: 0.75rem; padding: 2px 8px; }
.pago__motivo { grid-area: motivo; margin-top: 6px; font-size: var(--fs-xs); color: var(--barro); }
.pago__ver { grid-area: ver; }
.pago--cancelado .pago__monto { text-decoration: line-through; color: rgba(24, 32, 28, 0.5); }

.form-pago, .form-extra { padding-top: var(--e-4); border-top: 1px dashed var(--monte-linea); display: grid; gap: var(--e-4); }
.form-pago h3, .form-extra h3 { margin: 0; }
.form-pago .campo, .form-extra .campo { margin: 0; }
.entrada-moneda { position: relative; }
.entrada-moneda span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-weight: 700; color: rgba(24, 32, 28, 0.55); font-size: 1.25rem; }
.entrada-moneda .form-control { padding-left: 34px; min-height: 56px; font-size: 1.375rem; font-weight: 700; font-family: var(--fuente-mono); }
.sugerencias { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.sugerencia {
  min-height: 44px;
  padding: 0 var(--e-3);
  border-radius: var(--radio-pill);
  border: 1.5px dashed rgba(20, 42, 35, 0.35);
  background: #fff;
  color: var(--monte);
  font-weight: 700;
  font-size: var(--fs-xs);
}
.sugerencia:hover { border-style: solid; border-color: var(--sarape); }
.campo__error { margin: 6px 0 0; font-size: var(--fs-xs); font-weight: 700; color: var(--barro); }
.campo--con-error .form-control { border-color: var(--barro); }

/* Subir archivo: zona grande tocable (el input nativo queda oculto pero accesible) */
.subir-archivo__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.subir-archivo:has(.subir-archivo__zona) { border: none; padding: 0; background: none; }
.subir-archivo__zona {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 112px;
  padding: var(--e-4);
  margin: 0;
  border: 2px dashed rgba(20, 42, 35, 0.3);
  border-radius: 14px;
  background: #fff;
  text-align: center;
  cursor: pointer;
  font-size: var(--fs-base);
  font-weight: 400;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.subir-archivo__zona:hover { border-color: var(--sarape); background: #fff8f2; }
.subir-archivo__zona svg { width: 32px; height: 32px; color: var(--sarape); }
.subir-archivo__zona strong { color: var(--monte); }
.subir-archivo__zona span { font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.65); }
.subir-archivo__input:focus-visible + .subir-archivo__zona { outline: 3px solid var(--sarape); outline-offset: 2px; }
.subir-archivo__vista:empty { display: none; }

/* Extras */
.lista-extras { list-style: none; margin: 0 0 var(--e-4); padding: 0; display: grid; gap: var(--e-2); }
.linea-extra { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: 12px; background: var(--cal); }
.linea-extra__icono { width: 40px; height: 40px; flex: none; border-radius: 10px; background: #fff; display: grid; place-items: center; color: var(--sarape); }
.linea-extra__icono svg { width: 24px; height: 24px; }
.linea-extra__texto { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.linea-extra__texto strong { color: var(--monte); }
.linea-extra__texto > span { font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.7); }
.linea-extra form { margin: 0; }

.opciones-segmento { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--e-2); }
.opcion-segmento, .opcion-talla {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 52px;
  margin: 0;
  border-radius: 12px;
  border: 2px solid rgba(20, 42, 35, 0.2);
  background: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--monte);
  cursor: pointer;
}
.opcion-segmento span { font-weight: 600; color: rgba(24, 32, 28, 0.6); }
.btn-check:checked + .opcion-segmento, .btn-check:checked + .opcion-talla { border-color: var(--sarape); background: #fff3ea; color: var(--monte); }
.btn-check:focus-visible + .opcion-segmento, .btn-check:focus-visible + .opcion-talla { outline: 3px solid var(--sarape); outline-offset: 2px; }
.opciones-talla { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: var(--e-2); }
fieldset.campo { border: 0; padding: 0; min-width: 0; }
fieldset.campo legend { float: none; width: auto; margin-bottom: var(--e-2); }
.contador-cantidad { display: grid; grid-template-columns: 52px 88px 52px; gap: var(--e-2); }
.contador-cantidad .btn { min-height: 52px; padding: 0; font-size: 1.5rem; }
.contador-cantidad .form-control { min-height: 52px; text-align: center; font-weight: 700; font-size: 1.25rem; }

/* Carta */
.pasos-carta { list-style: none; counter-reset: paso; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-4); }
.pasos-carta li { counter-increment: paso; position: relative; padding-left: 48px; display: grid; gap: var(--e-2); }
.pasos-carta li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -2px;
  width: 34px;
  height: 34px;
  border-radius: var(--radio-pill);
  background: var(--monte);
  color: var(--trigo);
  font-family: var(--fuente-display);
  font-weight: 800;
  font-size: 1.25rem;
  display: grid;
  place-items: center;
}
.pasos-carta li > span { font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.7); }
.pasos-carta .btn { justify-self: start; }
.pasos-carta form { display: grid; gap: var(--e-3); }
.carta-entregada { display: flex; gap: var(--e-4); align-items: center; }
.carta-entregada img { width: 96px; border-radius: 8px; border: 1px solid var(--monte-linea); }
.carta-entregada p { margin: var(--e-2) 0; }

/* Sustituir / baja */
.bloque-cambio { padding: var(--e-4) 0; display: grid; gap: var(--e-3); }
.bloque-cambio + .bloque-cambio { border-top: 1px dashed var(--monte-linea); }
.bloque-cambio h3 { margin: 0; }
.bloque-cambio p, .bloque-cambio .campo { margin: 0; }
.bloque-cambio .btn { justify-self: start; }
.bloque-cambio--peligro h3 { color: var(--barro); }

/* Ajustes tanda 3 */
.candidato .estado { white-space: nowrap; }
.candidato--inscrito .candidato__casilla:checked + .candidato__etiqueta { border-color: var(--monte-linea); background: rgba(255, 255, 255, 0.55); }
.candidato--inscrito .candidato__casilla:checked + .candidato__etiqueta .candidato__marca { background: rgba(63, 143, 58, 0.18); border-color: transparent; color: #2b6b27; }
.candidato--inscrito .candidato__nombre { color: rgba(20, 42, 35, 0.7); }
.pago__info { white-space: nowrap; }
.cuenta-joven__cifra--baja .cuenta-joven__valor { color: rgba(24, 32, 28, 0.45); text-decoration: line-through; }

/* ============================================================
   TANDA 4 — Padrón (P-09), Joven (P-10), Ficha pública (P-02)
   ============================================================ */
.encabezado-pagina--accion { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--e-3) var(--e-5); }
.encabezado-pagina--accion .btn { min-height: 52px; }
@media (max-width: 575.98px) { .encabezado-pagina--accion .btn { width: 100%; } }

.filtros-admin { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); }
.filtros-admin .campo { margin: 0; }
@media (min-width: 768px) { .filtros-admin { grid-template-columns: repeat(2, minmax(0, 320px)); } }

.lista-padron { display: flex; flex-direction: column; gap: var(--e-2); }
.fila-joven {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  grid-template-areas: "avatar principal ir" "avatar ficha ir";
  gap: 6px var(--e-3);
  align-items: center;
  padding: var(--e-3) var(--e-4);
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra-tarjeta);
  border: 2px solid transparent;
  color: var(--tinta);
  text-decoration: none;
}
.fila-joven:hover { border-color: rgba(20, 42, 35, 0.14); color: var(--tinta); }
.fila-joven .inscrito__avatar { grid-area: avatar; }
.fila-joven__principal { grid-area: principal; min-width: 0; }
.fila-joven__nombre { display: block; font-weight: 700; color: var(--monte); line-height: 1.25; }
.fila-joven__detalle { font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.65); }
.fila-joven__telefono { display: none; }
.fila-joven__ficha { grid-area: ficha; display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--e-2); }
.fila-joven__ficha .estado { font-size: 0.75rem; padding: 3px 9px; }
.fila-joven__fecha { font-size: 0.8125rem; color: rgba(24, 32, 28, 0.6); }
.fila-joven .inscrito__ir { grid-area: ir; }
.fila-joven[hidden] { display: none; }
@media (min-width: 768px) {
  .lista-padron { gap: 0; background: #fff; border-radius: 16px; box-shadow: var(--sombra-tarjeta); overflow: hidden; }
  .fila-joven {
    grid-template-columns: 44px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.6fr) 22px;
    grid-template-areas: "avatar principal telefono ficha ir";
    border-radius: 0;
    box-shadow: none;
    border: none;
    border-bottom: 1px solid var(--monte-linea);
  }
  .fila-joven:last-child { border-bottom: none; }
  .fila-joven:hover { background: rgba(228, 112, 30, 0.05); }
  .fila-joven__telefono { grid-area: telefono; display: inline-flex; align-items: center; gap: 6px; font-family: var(--fuente-mono); font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.75); }
}

/* P-10 */
.rejilla-joven { display: grid; gap: var(--e-4); }
@media (min-width: 1100px) { .rejilla-joven { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--e-5); align-items: start; } }
.rejilla-joven__lateral { display: grid; gap: var(--e-4); }
.form-joven h2, .liga-ficha h2, .ficha-medica h2, .rejilla-joven__lateral .tarjeta > h2 { font-size: var(--fs-lg); margin: 0 0 var(--e-3); }
.form-joven__campos { display: grid; gap: var(--e-4); margin-bottom: var(--e-5); }
.form-joven__campos .campo { margin: 0; }
@media (min-width: 768px) {
  .form-joven__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-joven__ancho { grid-column: 1 / -1; }
}
.opcional { font-weight: 400; color: rgba(24, 32, 28, 0.55); }
@media (max-width: 575.98px) { .btn-bloque-movil { width: 100%; min-height: 52px; } }

.liga-ficha { border: 2px solid rgba(228, 112, 30, 0.35); background: linear-gradient(180deg, #fff 0%, #fff8f2 100%); }
.liga-ficha__campo .form-control { font-family: var(--fuente-mono); font-size: 16px; background: #fff; color: var(--monte); }
.liga-ficha__acciones { display: grid; gap: var(--e-2); margin-top: var(--e-3); }
@media (min-width: 576px) { .liga-ficha__acciones { grid-template-columns: 1fr 1fr; } .liga-ficha__acciones [hidden] { display: none; } }
.liga-ficha__acciones .btn { min-height: 52px; }
.btn-whatsapp { background: #1f8f4e; border-color: #1f8f4e; color: #fff; }
.btn-whatsapp:hover { filter: brightness(0.94); color: #fff; }
.liga-ficha__confirmacion { margin: var(--e-3) 0 0; font-weight: 700; color: #2b6b27; }
.btn-enlace {
  min-height: 44px;
  margin-top: var(--e-2);
  padding: 0;
  border: none;
  background: none;
  font-weight: 700;
  font-size: var(--fs-xs);
  color: var(--barro);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ficha-medica__vacia { padding: var(--e-4); border-radius: 12px; background: #fff7f2; }
.ficha-medica__vacia p { margin: 0; }
.datos-ficha { margin: 0; display: grid; gap: var(--e-2); }
.datos-ficha div { display: grid; grid-template-columns: 130px 1fr; gap: var(--e-3); padding: var(--e-2) 0; border-bottom: 1px dashed var(--monte-linea); }
.datos-ficha div:last-child { border-bottom: none; }
.datos-ficha dt { font-size: var(--fs-xs); font-weight: 600; color: rgba(24, 32, 28, 0.65); }
.datos-ficha dd { margin: 0; font-weight: 600; color: var(--monte); }
.datos-ficha__emergencia { background: #fff7f2; border-radius: 10px; padding: var(--e-3) !important; border: none !important; }
.datos-ficha__emergencia a { color: var(--barro); font-family: var(--fuente-mono); }

.historial { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.historial a { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); min-height: 56px; padding: var(--e-2) var(--e-3); border-radius: 12px; background: var(--cal); color: var(--tinta); text-decoration: none; }
.historial a:hover { background: #fff3ea; }
.historial strong { display: block; color: var(--monte); }
.historial a > span > span { font-size: 0.8125rem; color: rgba(24, 32, 28, 0.65); }

/* P-02 ficha pública */
.ficha-publica { display: grid; gap: var(--e-4); }
.ficha-publica__encabezado h1 { margin: 0 0 var(--e-2); }
.ficha-publica__saludo { font-size: var(--fs-md); margin: 0 0 var(--e-3); }
.ficha-publica__privacidad { display: flex; gap: var(--e-2); align-items: flex-start; margin: 0; padding: var(--e-3); border-radius: 12px; background: rgba(20, 42, 35, 0.06); font-size: var(--fs-xs); color: var(--monte); }
.ficha-publica__privacidad svg { flex: none; margin-top: 1px; }
.form-ficha { display: grid; gap: var(--e-4); }
.form-ficha h2 { font-size: var(--fs-lg); margin: var(--e-2) 0 0; }
.form-ficha h2:first-child { margin-top: 0; }
.form-ficha .campo { margin: 0; }
.form-ficha__ultima { margin: 0; text-align: center; }
.ficha-publica--invalida { text-align: center; padding: var(--e-6) var(--e-5); }
.ficha-publica--invalida h1 { margin: var(--e-3) 0 var(--e-2); color: var(--barro); }
.ficha-publica--invalida p { margin: 0; }
.ficha-publica__icono { width: 56px; height: 56px; color: var(--barro); }

/* Botones: se fijan las variables de Bootstrap para que :hover/:active/:focus no
   reemplacen el fondo por el valor por omisión (transparente). */
.btn-primario {
  --bs-btn-color: #fff; --bs-btn-bg: var(--sarape); --bs-btn-border-color: var(--sarape);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #d4641a; --bs-btn-hover-border-color: #d4641a;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #c25a16; --bs-btn-active-border-color: #c25a16;
  --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--sarape); --bs-btn-disabled-border-color: var(--sarape);
}
.btn-secundario {
  --bs-btn-color: var(--monte); --bs-btn-bg: transparent; --bs-btn-border-color: var(--monte);
  --bs-btn-hover-color: var(--monte); --bs-btn-hover-bg: rgba(20, 42, 35, 0.06); --bs-btn-hover-border-color: var(--monte);
  --bs-btn-active-color: var(--monte); --bs-btn-active-bg: rgba(20, 42, 35, 0.12); --bs-btn-active-border-color: var(--monte);
}
.btn-peligro {
  --bs-btn-color: #fff; --bs-btn-bg: var(--barro); --bs-btn-border-color: var(--barro);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #933716; --bs-btn-hover-border-color: #933716;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #822f12; --bs-btn-active-border-color: #822f12;
}
.btn-whatsapp {
  --bs-btn-color: #fff; --bs-btn-bg: #1f8f4e; --bs-btn-border-color: #1f8f4e;
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1a7d44; --bs-btn-hover-border-color: #1a7d44;
  --bs-btn-active-color: #fff; --bs-btn-active-bg: #166b3a; --bs-btn-active-border-color: #166b3a;
}
.btn-primario, .btn-peligro, .btn-whatsapp { background-color: var(--bs-btn-bg); }
.btn-primario:hover, .btn-peligro:hover, .btn-whatsapp:hover { background-color: var(--bs-btn-hover-bg); }

/* ============================================================
   FASE 3 — Tablero general (P-03)
   ============================================================ */
.dinero-evento { margin-bottom: var(--e-4); }
.dinero-evento__cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.dinero-evento__etiqueta { display: block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(24, 32, 28, 0.6); }
.dinero-evento__valor { display: block; font-family: var(--fuente-display); font-weight: 800; font-size: 1.375rem; line-height: 1.1; color: var(--monte); }
@media (min-width: 576px) { .dinero-evento__valor { font-size: 2.5rem; } }
.dinero-evento__valor--recolectado { color: var(--cielo-texto); }
.dinero-evento__valor--falta { color: var(--barro); }
.dinero-evento__nota { margin: var(--e-3) 0 0; font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.7); }

.kpi-grid--general { margin-bottom: var(--e-5); }
@media (min-width: 768px) { .kpi-grid--general { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kpi-grid--general { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.kpi-grid--general .kpi:last-child:nth-child(odd) { grid-column: auto; }
@media (max-width: 767.98px) { .kpi-grid--general .kpi:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.kpi-grid--general .kpi__valor { font-size: 2rem; }
.kpi-grid--general .medidor { margin-top: 6px; }
.kpi--enlace { text-decoration: none; color: inherit; transition: transform 0.15s ease; }
.kpi--enlace:hover { color: inherit; transform: translateY(-2px); }

.rejilla-graficas { display: grid; gap: var(--e-4); margin-bottom: var(--e-4); }
@media (min-width: 992px) { .rejilla-graficas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); } }
.grafica { min-width: 0; }
.grafica__cabecera { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--e-2) var(--e-4); margin-bottom: var(--e-3); }
.grafica__cabecera h3 { margin: 0; font-size: var(--fs-md); }
.grafica__lienzo { position: relative; width: 100%; }
.leyenda { list-style: none; display: flex; gap: var(--e-4); margin: 0; padding: 0; font-size: var(--fs-xs); font-weight: 600; color: rgba(24, 32, 28, 0.8); }
.leyenda li { display: inline-flex; align-items: center; gap: 6px; }
.leyenda__marca { width: 12px; height: 12px; border-radius: 3px; }
.leyenda__marca--a { background: var(--cielo); }
.leyenda__marca--b { background: var(--sarape); }

.extras-evento { margin-bottom: var(--e-4); }
.extras-evento h3 { font-size: var(--fs-md); margin: 0; }
.extras-lista--general { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
.tabla-datos { margin-bottom: var(--e-5); }
.tabla-datos summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; color: var(--monte); cursor: pointer; }
.tabla-datos .table { background: #fff; border-radius: 12px; overflow: hidden; font-size: var(--fs-xs); }

/* Cuadrícula de KPIs compartida (tableros) */
.kpi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-3); }
.kpi-grid .kpi { padding: var(--e-3) var(--e-4); margin: 0; }
.kpi-grid .kpi__valor { line-height: 1.05; }
.kpi--alerta { border-left-color: var(--barro) !important; background: #fff7f2; }
.kpi--alerta .kpi__valor { color: var(--barro); }
@media (min-width: 768px) { .kpi-grid.kpi-grid--general { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* En pantallas anchas todos los indicadores en una fila, repartidos a partes iguales (son 6 o 7 según el evento). */
@media (min-width: 1200px) { .kpi-grid.kpi-grid--general { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.extras-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--e-2); margin-top: var(--e-3); }
.extras-lista .extra { padding: var(--e-3); border-radius: 12px; background: var(--cal); text-align: center; }
.extras-lista .extra__cantidad { display: block; font-family: var(--fuente-display); font-weight: 800; font-size: 1.75rem; line-height: 1; color: var(--monte); }
.extras-lista .extra__nombre { display: block; margin-top: 4px; font-size: .8125rem; font-weight: 600; color: rgba(24, 32, 28, .75); }

/* ============================================================
   FASE 3 — Revisión de pagos (P-11)
   ============================================================ */
.filtros-pagos { display: grid; gap: var(--e-3); margin-bottom: var(--e-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.filtros-pagos .campo { margin: 0; }
.filtros-pagos .campo:nth-child(-n+2) { grid-column: 1 / -1; }
.filtros-pagos__acciones { grid-column: 1 / -1; display: flex; gap: var(--e-2); }
.filtros-pagos__acciones .btn-primario { flex: 1 1 auto; }
@media (min-width: 992px) {
  .filtros-pagos { grid-template-columns: 1.4fr 1.2fr 0.8fr 0.8fr auto; align-items: end; }
  .filtros-pagos .campo:nth-child(-n+2) { grid-column: auto; }
  .filtros-pagos__acciones { grid-column: auto; }
}
.resumen-pagos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-3); margin-bottom: var(--e-4); }
.resumen-pagos > div { background: #fff; border-radius: 14px; box-shadow: var(--sombra-tarjeta); padding: var(--e-3) var(--e-4); display: flex; flex-direction: column; }
.resumen-pagos__valor { font-family: var(--fuente-display); font-weight: 800; font-size: 1.5rem; color: var(--monte); line-height: 1.1; }
@media (min-width: 576px) { .resumen-pagos__valor { font-size: 2rem; } }
.resumen-pagos__etiqueta { font-size: 0.8125rem; color: rgba(24, 32, 28, 0.65); }
.resumen-pagos--alerta .resumen-pagos__valor { color: var(--barro); }
.chips-filtro--margen { margin-bottom: var(--e-4); }

.lista-pagos-revision { display: flex; flex-direction: column; gap: var(--e-2); }
.lista-pagos-revision__encabezado { display: none; }
.pago-revision {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "joven monto" "evento estado" "fecha fecha" "motivo motivo" "acciones acciones";
  gap: 4px var(--e-3);
  align-items: center;
  padding: var(--e-3) var(--e-4);
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra-tarjeta);
}
.pago-revision__fecha { grid-area: fecha; font-size: 0.8125rem; color: rgba(24, 32, 28, 0.6); }
.pago-revision__joven { grid-area: joven; min-width: 0; }
.pago-revision__joven a { display: block; font-weight: 700; color: var(--monte); text-decoration: none; }
.pago-revision__joven a:hover { text-decoration: underline; }
.pago-revision__joven span { display: block; font-size: 0.8125rem; color: rgba(24, 32, 28, 0.65); }
.pago-revision__evento { grid-area: evento; font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.75); }
.pago-revision__monto { grid-area: monto; justify-self: end; font-weight: 700; font-size: var(--fs-md); color: var(--monte); }
.pago-revision__estado { grid-area: estado; justify-self: end; }
.pago-revision__acciones { grid-area: acciones; display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-2); }
.pago-revision__acciones .btn { flex: 1 1 auto; }
.pago-revision__motivo { grid-area: motivo; font-size: var(--fs-xs); color: var(--barro); }
.pago-revision--cancelado { background: rgba(255, 255, 255, 0.6); box-shadow: none; border: 1px solid var(--monte-linea); }
.pago-revision--cancelado .pago-revision__monto { text-decoration: line-through; color: rgba(24, 32, 28, 0.5); }
.btn-peligro-suave { --bs-btn-color: var(--barro); --bs-btn-border-color: rgba(168, 64, 28, 0.45); --bs-btn-hover-color: var(--barro); --bs-btn-hover-bg: #fff3ec; --bs-btn-hover-border-color: var(--barro); background: #fff; border: 2px solid rgba(168, 64, 28, 0.45); color: var(--barro); }
@media (min-width: 992px) {
  .lista-pagos-revision { gap: 0; background: #fff; border-radius: 16px; box-shadow: var(--sombra-tarjeta); overflow: hidden; }
  .lista-pagos-revision__encabezado,
  .pago-revision {
    grid-template-columns: 100px minmax(0, 1.6fr) minmax(0, 1.1fr) 120px 110px 330px;
    grid-template-areas: "fecha joven evento monto estado acciones" ". motivo motivo motivo motivo motivo";
  }
  .lista-pagos-revision__encabezado { display: grid; gap: var(--e-3); padding: var(--e-3) var(--e-4); background: var(--monte); color: rgba(255, 255, 255, 0.85); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
  .pago-revision { border-radius: 0; box-shadow: none; border: none; border-bottom: 1px solid var(--monte-linea); }
  .pago-revision:last-child { border-bottom: none; }
  .pago-revision--cancelado { background: rgba(20, 42, 35, 0.025); border: none; border-bottom: 1px solid var(--monte-linea); }
  .pago-revision__estado, .pago-revision__monto { justify-self: start; }
  .pago-revision__acciones { margin: 0; justify-content: flex-end; flex-wrap: nowrap; }
  .pago-revision__acciones .btn { flex: none; }
}

/* ============================================================
   FASE 3 — Eventos (P-12) y Alta/edición de evento (P-13)
   ============================================================ */
body:not(.con-pestanas-inferiores) .barra-accion { bottom: 12px; }
.estado--neutro { background: rgba(20, 42, 35, 0.08); color: var(--monte); }
.estado--neutro::before { display: none; }

.grupo-eventos { margin-bottom: var(--e-6); }
.lista-eventos-admin { display: grid; gap: var(--e-3); }
.evento-admin {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-areas: "logo principal" "cupo cupo" "dinero dinero" "acciones acciones";
  gap: var(--e-3) var(--e-4);
  align-items: center;
  padding: var(--e-4);
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--sombra-tarjeta);
}
.evento-admin__logo { grid-area: logo; width: 64px; height: 64px; border-radius: 14px; background: var(--monte); display: grid; place-items: center; overflow: hidden; color: var(--trigo); font-family: var(--fuente-display); font-weight: 800; font-size: 1.5rem; }
.evento-admin__logo img { width: 58px; height: auto; }
.evento-admin__principal { grid-area: principal; min-width: 0; }
.evento-admin__nombre { margin: 0 0 2px; font-size: var(--fs-md); line-height: 1.25; }
.evento-admin__dato { display: block; font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.7); }
.evento-admin__etiquetas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.evento-admin__etiquetas .estado { font-size: 0.75rem; padding: 3px 9px; }
.evento-admin__cupo { grid-area: cupo; }
.evento-admin__dinero { grid-area: dinero; }
.evento-admin__cifra { display: block; font-weight: 700; font-size: var(--fs-md); color: var(--monte); }
.evento-admin__etiqueta { display: block; font-size: 0.8125rem; color: rgba(24, 32, 28, 0.65); margin-bottom: 4px; }
.evento-admin__acciones { grid-area: acciones; display: flex; gap: var(--e-2); }
.evento-admin__acciones .btn { flex: 1 1 auto; }
@media (min-width: 992px) {
  .evento-admin {
    grid-template-columns: 64px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    grid-template-areas: "logo principal cupo dinero acciones";
  }
  .evento-admin__acciones .btn { flex: none; }
}

/* Formulario de evento */
.form-evento { display: grid; gap: var(--e-4); }
.seccion-form { display: grid; gap: var(--e-4); }
.seccion-form > h2 { margin: 0; font-size: var(--fs-lg); }
.seccion-form .campo { margin: 0; }
.campos-dos { display: grid; gap: var(--e-4); }
@media (min-width: 768px) { .campos-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .campo--angosto { max-width: 320px; } }
.campos-dos[hidden], .subcampos[hidden] { display: none; }
.subcampos { display: grid; gap: var(--e-4); padding: var(--e-4); border-radius: 12px; background: var(--cal); margin-top: calc(-1 * var(--e-2)); }
.entrada-moneda--chica .form-control { min-height: 48px; font-size: 1.125rem; }
.entrada-moneda--chica span { font-size: 1.0625rem; }

.subir-archivo--logo .subir-archivo__vista { margin-top: var(--e-3); padding: var(--e-4); border-radius: 14px; background: var(--monte); justify-content: center; }
.subir-archivo--logo .subir-archivo__vista img { max-height: 120px; max-width: 100%; border: none; object-fit: contain; }

/* Interruptor (checkbox role=switch) */
.interruptor { display: flex; align-items: flex-start; gap: var(--e-3); min-height: 48px; margin: 0; cursor: pointer; font-size: var(--fs-base); font-weight: 400; }
.interruptor input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor__pista { position: relative; flex: none; width: 52px; height: 30px; margin-top: 2px; border-radius: 999px; background: rgba(20, 42, 35, 0.25); transition: background-color 0.15s ease; }
.interruptor__pista::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.15s ease; }
.interruptor input:checked + .interruptor__pista { background: var(--sarape); }
.interruptor input:checked + .interruptor__pista::after { transform: translateX(22px); }
.interruptor input:focus-visible + .interruptor__pista { outline: 3px solid var(--sarape); outline-offset: 2px; }
.interruptor__texto strong { display: block; color: var(--monte); }
.interruptor__texto span { display: block; font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.65); }
.opciones-segmento--estado { max-width: 480px; }
/* Opciones con nombres largos (distritos): una por renglón, texto a la izquierda. */
.opciones-segmento--apiladas { grid-template-columns: 1fr; }
.opciones-segmento--apiladas .opcion-segmento { justify-content: flex-start; padding-left: var(--e-4); padding-right: var(--e-4); text-align: left; }
.barra-accion--form { margin-top: 0; }

/* ============================================================
   FASE 3 — Inscritos del evento (P-14)
   ============================================================ */
.filtros-inscritos { align-items: end; }
.filtros-inscritos .campo { margin: 0; flex: 1 1 160px; }
.filtros-inscritos__casillas { display: flex; gap: var(--e-4); flex: 1 1 220px; min-height: 44px; align-items: center; }
.casilla { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; margin: 0; font-size: var(--fs-base); font-weight: 600; color: var(--monte); cursor: pointer; }
.casilla input { width: 22px; height: 22px; accent-color: var(--sarape); }
.filtros-inscritos__acciones { display: flex; gap: var(--e-2); flex: 0 0 auto; }
.btn-mostrar-filtros { gap: var(--e-2); }
.inscrito__iglesia { display: none; }
.lista-inscritos--admin .inscrito { grid-template-areas: "avatar principal ir" "iglesia iglesia iglesia" "pago pago pago" "pie pie pie"; }
.lista-inscritos--admin .inscrito__iglesia { grid-area: iglesia; display: flex; gap: 6px; align-items: baseline; font-size: var(--fs-xs); }
.inscrito__iglesia strong { color: var(--monte); }
.inscrito__iglesia span { color: rgba(24, 32, 28, 0.6); }
@media (min-width: 768px) {
  .lista-inscritos--admin .lista-inscritos__encabezado,
  .lista-inscritos--admin .inscrito {
    grid-template-columns: 44px minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.6fr) minmax(0, 0.9fr) minmax(0, 0.9fr) 22px;
    grid-template-areas: "avatar principal iglesia pago saldo extras ir";
  }
  .lista-inscritos--admin .inscrito__iglesia { flex-direction: column; gap: 0; }
}

/* ============================================================
   FASE 3 — Usuarios (P-15, P-16)
   ============================================================ */
.lista-usuarios { display: flex; flex-direction: column; gap: var(--e-2); }
.fila-usuario {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 22px;
  grid-template-areas: "avatar principal ir" "avatar rol ir" "avatar estado ir";
  gap: 4px var(--e-3);
  align-items: center;
  padding: var(--e-3) var(--e-4);
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--sombra-tarjeta);
  color: var(--tinta);
  text-decoration: none;
  border: 2px solid transparent;
}
.fila-usuario:hover { border-color: rgba(20, 42, 35, 0.14); color: var(--tinta); }
.fila-usuario .inscrito__avatar { grid-area: avatar; }
.fila-usuario__avatar--admin { background: var(--monte) !important; color: var(--trigo) !important; }
.fila-usuario__avatar--tesorero { background: rgba(28, 134, 196, 0.16) !important; color: var(--cielo-texto) !important; }
.fila-usuario__principal { grid-area: principal; min-width: 0; }
.fila-usuario__nombre { display: block; font-weight: 700; color: var(--monte); }
.fila-usuario__login { font-family: var(--fuente-mono); font-size: 0.8125rem; color: rgba(24, 32, 28, 0.6); }
.fila-usuario__rol { grid-area: rol; display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: var(--fs-xs); }
.fila-usuario__rol strong { color: var(--monte); }
.fila-usuario__rol span { color: rgba(24, 32, 28, 0.65); }
.fila-usuario__estado { grid-area: estado; }
.fila-usuario__estado .estado { font-size: 0.75rem; padding: 3px 9px; }
.fila-usuario .inscrito__ir { grid-area: ir; }
.fila-usuario--inactivo { opacity: 0.7; }
.fila-usuario[hidden] { display: none; }
@media (min-width: 768px) {
  .lista-usuarios { gap: 0; background: #fff; border-radius: 16px; box-shadow: var(--sombra-tarjeta); overflow: hidden; }
  .fila-usuario {
    grid-template-columns: 44px minmax(0, 1.6fr) minmax(0, 1.6fr) 120px 22px;
    grid-template-areas: "avatar principal rol estado ir";
    border-radius: 0; box-shadow: none; border: none; border-bottom: 1px solid var(--monte-linea);
  }
  .fila-usuario:last-child { border-bottom: none; }
  .fila-usuario:hover { background: rgba(228, 112, 30, 0.05); }
  .fila-usuario__rol { flex-direction: column; gap: 0; }
}
.entrada-con-boton { display: flex; gap: var(--e-2); }
.entrada-con-boton .form-control { flex: 1 1 auto; font-family: var(--fuente-mono); }
.entrada-con-boton .btn { flex: none; }
.form-restablecer { display: grid; gap: var(--e-3); }
.form-restablecer h2 { margin: 0; font-size: var(--fs-lg); }
.form-restablecer .campo, .form-restablecer p { margin: 0; }
#campo-iglesia[hidden] { display: none; }

.campo > label.interruptor, label.interruptor { display: flex; margin-bottom: 0; }
.interruptor__pista { display: inline-block; }

/* ============================================================
   FASE 3 — Catálogos (P-17 a P-20)
   ============================================================ */
.lista-catalogo { display: flex; flex-direction: column; background: #fff; border-radius: 16px; box-shadow: var(--sombra-tarjeta); overflow: hidden; max-width: 900px; }
.fila-catalogo { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "orden texto" "orden uso" "acciones acciones"; gap: 4px var(--e-3); align-items: center; padding: var(--e-3) var(--e-4); border-bottom: 1px solid var(--monte-linea); }
.fila-catalogo:last-child { border-bottom: none; }
.fila-catalogo__orden { grid-area: orden; width: 36px; height: 36px; border-radius: 10px; background: var(--monte); color: var(--trigo); font-family: var(--fuente-display); font-weight: 800; font-size: 1.125rem; display: grid; place-items: center; }
.fila-catalogo:not(:has(.fila-catalogo__orden)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "uso" "acciones"; }
.fila-catalogo__texto { grid-area: texto; min-width: 0; }
.fila-catalogo__texto strong { display: block; color: var(--monte); }
.fila-catalogo__texto span { font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.65); }
.fila-catalogo__uso { grid-area: uso; font-size: 0.8125rem; color: rgba(24, 32, 28, 0.6); }
.fila-catalogo__acciones { grid-area: acciones; display: flex; gap: var(--e-2); margin-top: var(--e-2); }
.fila-catalogo__acciones .btn { flex: 1 1 auto; }
@media (min-width: 768px) {
  .fila-catalogo { grid-template-columns: auto minmax(0, 1fr) minmax(0, 220px) auto; grid-template-areas: "orden texto uso acciones"; }
  .fila-catalogo:not(:has(.fila-catalogo__orden)) { grid-template-columns: minmax(0, 1fr) minmax(0, 220px) auto; grid-template-areas: "texto uso acciones"; }
  .fila-catalogo__acciones { margin: 0; }
  .fila-catalogo__acciones .btn { flex: none; }
}

/* ============================================================
   FASE 3 — Carta responsiva (P-21) y Contraseña (P-22)
   ============================================================ */
.rejilla-carta { display: grid; gap: var(--e-4); }
@media (min-width: 1100px) { .rejilla-carta { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--e-5); align-items: start; } .marcadores { position: sticky; top: var(--e-4); } }
.editor-carta, .marcadores { display: grid; gap: var(--e-3); }
.editor-carta h2, .marcadores h2 { margin: 0; font-size: var(--fs-lg); }
.editor-carta p, .marcadores p { margin: 0; }
.editor-carta__cabecera { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); }
.editor-carta__texto { font-size: 16px; line-height: 1.6; min-height: 360px; font-family: var(--fuente-texto); }
.editor-carta__acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
@media (max-width: 575.98px) { .editor-carta__acciones .btn { flex: 1 1 100%; } }
.marcadores__lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-2); }
.marcador { width: 100%; min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: var(--e-2) var(--e-3); border: 1.5px dashed rgba(20, 42, 35, 0.3); border-radius: 12px; background: #fff; text-align: left; }
.marcador:hover { border-style: solid; border-color: var(--sarape); background: #fff8f2; }
.marcador code { font-family: var(--fuente-mono); font-size: 0.875rem; color: var(--barro); }
.marcador span { font-size: 0.8125rem; color: rgba(24, 32, 28, 0.7); }
.marcador em { font-style: normal; color: var(--monte); }

.form-contrasena { max-width: 520px; display: grid; gap: var(--e-4); }
.form-contrasena .campo { margin: 0; }
.requisitos { list-style: none; margin: var(--e-2) 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--fs-xs); color: rgba(24, 32, 28, 0.65); }
.requisitos li::before { content: "○"; margin-right: 6px; }
.requisitos li.cumple { color: #2b6b27; font-weight: 700; }
.requisitos li.cumple::before { content: "✓"; }

/* Inscribir con anticipo (regla 2026-09-27: inscribir = registrar anticipo) */
.candidato__boton { width: 100%; text-align: left; font: inherit; color: inherit; }
.candidato__accion { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 700; color: var(--sarape); }
.candidato__boton:hover .candidato__accion { color: var(--barro); }
.form-pago--modal { border-top: none; padding-top: 0; }
.aviso-menor { margin: 0; padding: var(--e-3); border-radius: 10px; background: #fff3ea; font-size: var(--fs-xs); font-weight: 600; color: #9a4a10; }
.candidato__boton { min-width: 0; }
.candidato__boton .candidato__texto { min-width: 0; }
@media (max-width: 575.98px) {
  .candidato__boton { flex-wrap: wrap; }
  .candidato__boton .estado { order: 4; margin-left: 56px; white-space: normal; }
  .candidato__accion-texto { display: none; }
}

/* Menú lateral: el panel mide exactamente la pantalla; se desplazan las opciones
   y el pie (usuario + Salir) queda siempre visible abajo. */
#menu-principal { background-color: var(--monte) !important; overflow: hidden; }
#menu-principal .offcanvas-body { height: 100% !important; overflow: visible; }
.menu-principal__panel {
  height: 100%;
  min-height: 0;
  padding: 0;
}
.menu-principal__desplazable {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--e-5) var(--e-4) var(--e-3);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}
.menu-principal__pie {
  flex: none;
  margin-top: 0;
  padding: var(--e-3) var(--e-4) max(var(--e-3), env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: var(--e-2);
  background: rgba(0, 0, 0, 0.18);
}
@media (min-width: 992px) {
  .menu-principal__desplazable,
  .menu-principal__pie { padding-right: calc(var(--e-4) + 6px); }
}
.menu-principal__pie #boton-usuario { flex: 1 1 auto; min-width: 0; }
.menu-principal__salir-form { flex: none; margin: 0; }
.menu-principal__salir {
  min-height: 56px;
  min-width: 56px;
  padding: var(--e-1) var(--e-2);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 12px;
  background: transparent;
  color: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0.8125rem;
  font-weight: 700;
}
.menu-principal__salir:hover { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.4); }
.menu-principal__salir:focus-visible { outline: 3px solid var(--trigo); outline-offset: 2px; }
.subir-archivo--flyer .subir-archivo__vista img { max-height: 260px; max-width: 100%; width: auto; border-radius: 10px; box-shadow: var(--sombra-tarjeta); object-fit: contain; }

/* Flyer del evento */
.tarjeta-evento__flyer { width: 100%; }
.btn-sobre-oscuro { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255, 255, 255, 0.55); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, 0.1); --bs-btn-hover-border-color: #fff; color: #fff; border-color: rgba(255, 255, 255, 0.55); background: transparent; }
@media (min-width: 768px) { .encabezado-evento__accion { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: flex-end; } .encabezado-evento__motivo { flex-basis: 100%; text-align: right; } }
.modal-flyer__cuerpo { display: grid; place-items: center; background: #0f1f1a; }
.modal-flyer__cuerpo img { max-width: 100%; max-height: 72vh; border-radius: 8px; }
.modal-flyer .modal-footer p { margin: 0; }

/* Usuarios: correo y celular en la fila */
.fila-usuario__contacto { display: flex; flex-wrap: wrap; column-gap: var(--e-3); row-gap: 2px; font-size: 0.8125rem; color: rgba(24, 32, 28, 0.7); overflow-wrap: anywhere; }
.fila-usuario__contacto span:last-child { font-family: var(--fuente-mono); }

/* Selector con búsqueda (_SelectorBusqueda): reemplaza a los select largos. El botón mide y se
   comporta como un campo; la hoja reutiliza las tarjetas .candidato con palomita. */
.selector-busqueda__boton {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  padding: var(--e-2) var(--e-3);
  background: #fff;
  border: 1px solid rgba(20, 42, 35, 0.28);
  border-radius: var(--radio-sm);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  color: var(--tinta);
  text-align: left;
  cursor: pointer;
}
.selector-busqueda__boton:hover { border-color: rgba(20, 42, 35, 0.5); }
.selector-busqueda__boton:focus-visible { outline: none; border-color: var(--sarape); box-shadow: 0 0 0 3px rgba(228, 112, 30, 0.25); }
.selector-busqueda__boton svg { width: 18px; height: 18px; flex: none; color: var(--monte); }
.selector-busqueda__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-busqueda__texto--vacio { color: rgba(24, 32, 28, 0.55); font-weight: 400; }
.campo--con-error .selector-busqueda__boton { border-color: var(--barro); }
.selector-busqueda__buscador { position: sticky; top: calc(-1 * var(--e-4)); z-index: 2; background: #fff; padding: var(--e-1) 0 var(--e-3); margin-top: calc(-1 * var(--e-1)); }
.selector-busqueda__grupo + .selector-busqueda__grupo, .selector-busqueda__lista + .selector-busqueda__grupo { margin-top: var(--e-4); }
.selector-busqueda__titulo-grupo {
  font-family: var(--fuente-texto);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--monte);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0 0 var(--e-2);
}
.selector-busqueda__grupo[hidden], .selector-busqueda__opcion[hidden] { display: none; }
.selector-busqueda__sin-resultados { margin: var(--e-3) 0 0; }
/* Se elige una sola opción: marca redonda (convención de radio), no cuadro de casilla. */
.selector-busqueda__opcion .candidato__marca { border-radius: 50%; }
.selector-busqueda__hoja .modal-body { padding-top: var(--e-4); }