/* Utilidades puntuales que no vienen en el bundle de Tailwind que trae
   Unfold (viene recortado a las clases que Unfold mismo usa, no es un build
   propio del proyecto) — para avisos que no calzan en la paleta base/primary. */

.alert-warning {
  background-color: rgba(139, 67, 64, 0.07);
  border-color: rgba(139, 67, 64, 0.25);
}

.text-alert-warning {
  color: #8b4340;
}

/* El navy (#0F3654, ver unfold_config.py) es el color principal y ya vive en
   `primary`. El teal queda reservado como acento puntual para un par de
   botones CTA específicos (no es un token global). `!important` porque este
   archivo se carga antes que el bundle de Tailwind de Unfold en el <head>
   (ver unfold/templates/unfold/layouts/skeleton.html), así que sin esto el
   `.bg-primary-600` del componente de botón gana el empate de especificidad. */
.btn-cta-teal {
  background-color: #0d9488 !important;
  border-color: #0d9488 !important;
}

.btn-cta-teal:hover {
  background-color: #0b7a72 !important;
}

/* Botón de mostrar/ocultar contraseña del login (ver
   `core/templates/admin/login.html`). Va a mano y no con utilidades de Tailwind
   porque el bundle recortado de Unfold no trae `-translate-y-1/2` ni valores
   arbitrarios; las variables `--color-base-*` sí existen (las inyecta el
   skeleton de Unfold a partir de `UNFOLD["COLORS"]`). */
.password-field input {
  padding-right: 2.75rem;
}

.password-toggle {
  align-items: center;
  color: var(--color-base-500);
  cursor: pointer;
  display: flex;
  position: absolute;
  right: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
}

.password-toggle:hover {
  color: var(--color-base-700);
}

.password-toggle .material-symbols-outlined {
  font-size: 1.25rem;
}

/* Sube ~4px cada escalón del tipo (text-xs...text-6xl) para que todo se lea
   más grande — pedido explícito, pensando en coordinadoras que no son muy
   tech-savvy (esto ya va en la tercera subida). Solo se tocan los tamaños de
   fuente, no `--spacing`, así que el espaciado/padding no cambia, nada más
   el texto se ve más grande. Los line-height (--text-*--line-height) son
   ratios unitless relativos al tamaño de fuente, así que escalan solos sin
   tocarlos.
   No hace falta `!important` ni preocuparse por el orden de carga: Tailwind
   define estas variables dentro de `@layer theme`, y una regla fuera de
   cualquier `@layer` (como esta) siempre gana sobre una dentro de un layer,
   sin importar el orden en el documento. */
:root {
  --text-xs: 0.9875rem;
  --text-sm: 1.125rem;
  --text-base: 1.25rem;
  --text-lg: 1.375rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.25rem;
  --text-6xl: 4rem;
}

/* El componente de botón de Unfold fuerza `whitespace-nowrap` (ver
   unfold/components/button.html). El CTA "Enviar por correo comprobante de
   inscripción y pago" (resumen.html) es un texto largo que a 375px de ancho
   no cabe en una línea: con nowrap el botón se ensancha más que la pantalla
   y mete scroll horizontal a toda la página. `!important` por la misma razón
   que .btn-cta-teal arriba: este archivo carga antes que el bundle de
   Tailwind, y en el CSS compilado `.whitespace-nowrap` queda después de
   `.whitespace-normal`, así que sin esto seguiría ganando el nowrap del
   componente sin importar el orden de las clases en el HTML. */
.btn-wrap-text {
  white-space: normal !important;
}

/* Spinner del overlay de "enviando correo" (ver resumen.html). No hay
   .border-t-transparent en el bundle recortado de Unfold para armar el
   anillo parcial con utilidades, así que el borde se define a mano; se
   combina con la utilidad `.animate-spin` (esa sí viene en el bundle). */
.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff;
}

/* Bug reportado en revisión con cliente: en un Chrome viejo (PC que ya no
   recibe actualizaciones — típicamente Chrome < 111, marzo 2023) los switches
   (UnfoldBooleanSwitchWidget, p. ej. "es contacto de emergencia") se veían
   bien apagados pero desaparecían por completo al encenderlos.

   Causa: `primary`/`base` son la única paleta que el proyecto inyecta como
   hex vía UNFOLD["COLORS"] (ver unfold_config.py); el resto de la paleta de
   Tailwind (green, red, orange, blue, yellow) viene tal cual la define el
   bundle de Unfold, y en Tailwind v4 esos tonos están escritos en oklch()
   (p. ej. --color-green-500: oklch(72.3% .219 149.579)). Un Chrome que no
   entiende oklch() no falla de forma ruidosa: la declaración queda inválida
   en tiempo de cómputo y el navegador la trata como si no existiera, así que
   `background-color: var(--color-green-500)` (el "encendido" verde del
   switch) se queda transparente — de ahí que desaparezca solo al prender,
   nunca apagado (el gris de `base-300` sí es hex real y renderiza bien).

   El mismo problema aplica a cualquier otro uso de estos tonos (badges,
   bordes/textos de error o advertencia, tanto del proyecto como de los
   templates propios de Unfold), así que el fallback redefine las variables
   de color en vez de parchear un selector puntual: como quedan fuera de
   cualquier `@layer`, ganan por encima de la definición oklch de Tailwind
   (misma razón que la sección de `--text-*` de arriba), pero solo cuando
   `@supports not (color: oklch(0% 0 0))` es verdadero, para no tocar el
   render (más preciso, gamut P3) en navegadores que sí soportan oklch(). */
@supports not (color: oklch(0% 0 0)) {
  :root {
    --color-red-100: #fee2e2;
    --color-red-300: #fca5a5;
    --color-red-400: #f87171;
    --color-red-500: #ef4444;
    --color-red-600: #dc2626;
    --color-red-700: #b91c1c;

    --color-green-100: #dcfce7;
    --color-green-300: #86efac;
    --color-green-400: #4ade80;
    --color-green-500: #22c55e;
    --color-green-600: #16a34a;
    --color-green-700: #15803d;

    --color-orange-100: #ffedd5;
    --color-orange-300: #fdba74;
    --color-orange-400: #fb923c;
    --color-orange-500: #f97316;
    --color-orange-600: #ea580c;
    --color-orange-700: #c2410c;

    --color-blue-100: #dbeafe;
    --color-blue-300: #93c5fd;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #2563eb;
    --color-blue-700: #1d4ed8;

    --color-yellow-500: #eab308;
  }
}

/* ==========================================================================
   Identidad "Catecismo Bosques" — calidez de la parroquia sobre la
   estructura navy del admin. Guía: `inspiracion.md`. La paleta
   (`--color-terracota-*`, `--color-sage-*`, `--color-mostaza-*`, el greige
   de `base` y el carbón de `font`) se inyecta desde `UNFOLD["COLORS"]` en
   `unfold_config.py`; aquí solo se *aplica*, porque el bundle de Tailwind de
   Unfold viene precompilado y no genera utilidades nuevas para esos colores.
   ========================================================================== */

:root {
  --cbosques-crema: #f0ede9; /* fondo grande — igual que `base-50` */
}

/* 1. Superficies -----------------------------------------------------------
   El panel de contenido de Unfold (`#main`) es `bg-white` fijo en el
   template del paquete; se pisa a crema. `base-50` (sidebar + toolbars de
   Unfold) ya es esa misma crema vía `unfold_config.py`, así que todo el
   lienzo queda cálido y uniforme, y las TARJETAS —`card.html` pasó a
   `bg-white`, y las `<section>` propias se pintan aquí— flotan en blanco
   encima, con la profundidad sutil que pide `inspiracion.md`. */
body {
  background-color: var(--cbosques-crema);
}

#main {
  background-color: var(--cbosques-crema) !important;
}

/* Barra superior (breadcrumbs + toggle de sidebar): `unfold/helpers/header.html`
   es `bg-white` fijo, aparte de `#main` — se pisa igual para que no quede
   como el único rectángulo blanco del lienzo. Es el único hijo directo de
   `#main` con `bg-white` (el resto del contenido no lo usa a ese nivel). */
#main > div.bg-white {
  background-color: var(--cbosques-crema) !important;
}

/* Login (`unfold/layouts/unauthenticated.html`): `#page` es `bg-white` fijo.
   Se pisa a crema y se monta la tarjeta del formulario en blanco, para que
   la portada tenga la misma calidez que el resto. */
#page {
  background-color: var(--cbosques-crema) !important;
}

body.login #page > div > div.w-full {
  background-color: #fff;
  border: 1px solid var(--color-base-200);
  border-radius: var(--radius-default);
  box-shadow: 0 1px 3px rgba(83, 60, 40, 0.08), 0 8px 24px rgba(83, 60, 40, 0.06);
  padding: 2rem;
}

/* Las pantallas propias (flujo de inscripción, resumen, reporte del día,
   panel de grupos) montan sus tarjetas como `<section ... rounded-default
   shadow-xs>` sin clase de fondo — sobre el `#main` blanco de antes se veían
   blancas; ahora hay que darles el blanco explícito para que no se pierdan
   en la crema. Se limita a `<section>` a propósito: los chips de día de
   `nueva.html` comparten `rounded-default border shadow-xs` pero son
   `<label>` y pintan su propio fondo (navy al seleccionarse). */
#main section.rounded-default.shadow-xs,
#main .card-surface {
  background-color: #fff;
}

/* Sombra un pelín más cálida/suave en las tarjetas para el aire "invitación
   hecha a mano" (el default de Unfold es un gris azulado muy tenue). */
#main .shadow-xs {
  --tw-shadow-color: rgba(83, 60, 40, 0.07);
  box-shadow: 0 1px 2px rgba(83, 60, 40, 0.04), 0 1px 3px rgba(83, 60, 40, 0.06);
}

/* 2. Tipografía editorial ------------------------------------------------
   `inspiracion.md`: encabezados en serif con carácter; el UI interactivo
   se queda en Inter. Lora ya está auto-hospedada (`.font-display`); acá se
   extiende a todos los <h1> del contenido (títulos de página del admin) sin
   tener que anotar clase por clase. */
#main h1,
#main .font-display,
body.login h1 {
  font-family: "Lora", ui-serif, Georgia, serif;
  letter-spacing: -0.01em;
}

/* Título de sección: Lora en mayúsculas con tracking amplio + barrita de
   color a la izquierda (el patrón de "franjas de color por categoría" del
   catecismo). Reemplaza a los <h2 class="font-semibold ..."> sueltos de las
   pantallas propias (nueva.html, resumen.html, corte_dia.html, panel.html). */
.section-title {
  align-items: center;
  display: flex;
  font-family: "Lora", ui-serif, Georgia, serif;
  font-size: var(--text-lg);
  font-weight: 600;
  gap: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-font-important-light);
}

.section-title::before {
  background-color: var(--color-terracota-500);
  border-radius: 9999px;
  content: "";
  display: block;
  flex-shrink: 0;
  height: 1.15em;
  width: 4px;
}

.section-title.accent-sage::before {
  background-color: var(--color-sage-400);
}
.section-title.accent-mostaza::before {
  background-color: var(--color-mostaza-400);
}
.section-title.accent-primary::before {
  background-color: var(--color-primary-600);
}

/* Número de paso en círculo (flujo de inscripción "1 · 2 · 3 · 4"). */
.step-badge {
  align-items: center;
  background-color: var(--color-terracota-500);
  border-radius: 9999px;
  color: #fff;
  display: inline-flex;
  flex-shrink: 0;
  font-family: "Lora", ui-serif, Georgia, serif;
  font-size: var(--text-sm);
  font-weight: 700;
  height: 1.75rem;
  justify-content: center;
  width: 1.75rem;
}

/* 3. Badges tipo "pill" -------------------------------------------------
   Relleno pastel sólido + texto oscuro + muy redondeado (`inspiracion.md`).
   Sustituyen a los `bg-green-50 text-green-700` / `bg-orange-50` /
   `bg-red-50` de sistema, que se veían "de alerta" y fríos. */
.pill {
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 600;
  padding: 0.2rem 0.7rem;
  white-space: nowrap;
  /* Nunca más ancha que su contenedor: en pantalla angosta se recorta con
     puntos suspensivos en vez de empujar el layout. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill-sage {
  background-color: var(--color-sage-100);
  color: var(--color-sage-700);
}
.pill-mostaza {
  background-color: var(--color-mostaza-100);
  color: var(--color-mostaza-700);
}
.pill-terracota {
  background-color: var(--color-terracota-100);
  color: var(--color-terracota-700);
}
.pill-mauve {
  background-color: #eadfe8;
  color: #6e4f6b;
}

/* 4. Barras de ocupación de grupos ----------------------------------------
   Antes: navy / naranja / rojo. Ahora: salvia (ok) / mostaza (por
   llenarse) / terracota (lleno) — más semántico y en paleta. */
.bar-ok {
  background-color: var(--color-sage-400);
}
.bar-warn {
  background-color: var(--color-mostaza-400);
}
.bar-full {
  background-color: var(--color-terracota-500);
}

/* 5. Stat cards con acento por categoría --------------------------------
   Borde superior grueso + icono coloreado, rotando salvia → blush →
   mostaza → terracota por posición (franjas de color del catecismo).
   La clase la pone `components/stat_card.html` según el parámetro `accent`. */
.stat-card {
  border-top-width: 4px;
  border-top-style: solid;
}
.stat-card .stat-icon {
  color: inherit;
}

/* Fondo de la tarjeta: un lavado del mismo acento — el -50 de cada escala
   (mismo tono que pills/botones, pero como área grande en vez de texto
   queda igual de difuminado). `!important` por la misma razón que el resto
   del archivo: esto carga antes que `.bg-white` del bundle de Unfold
   (`card.html`). */
.stat-accent-1 {
  background-color: var(--color-sage-50) !important;
  border-top-color: var(--color-sage-400);
}
.stat-accent-1 .stat-icon {
  color: var(--color-sage-500);
}
.stat-accent-2 {
  background-color: #fbeae5 !important;
  border-top-color: #e8b4a8;
}
.stat-accent-2 .stat-icon {
  color: #c67563;
}
.stat-accent-3 {
  background-color: var(--color-mostaza-50) !important;
  border-top-color: var(--color-mostaza-400);
}
.stat-accent-3 .stat-icon {
  color: var(--color-mostaza-500);
}
.stat-accent-4 {
  background-color: var(--color-terracota-50) !important;
  border-top-color: var(--color-terracota-500);
}
.stat-accent-4 .stat-icon {
  color: var(--color-terracota-600);
}

/* 6. Botón de acción principal (terracota) -----------------------------
   El acento más vivo de la paleta = color de CTA. `.btn-cta-teal` queda
   como alias deprecado (lo referencian 3 templates) apuntando al mismo
   terracota; el nombre nuevo es `.btn-cta`. `!important` por el mismo
   motivo documentado abajo para `.password-toggle`: este archivo carga
   antes que el bundle de Unfold, así que sin esto `.bg-primary-600` del
   componente de botón gana el empate de especificidad. */
.btn-cta,
.btn-cta-teal {
  background-color: var(--color-terracota-600) !important;
  border-color: var(--color-terracota-600) !important;
  color: #fff !important;
}

.btn-cta:hover,
.btn-cta-teal:hover {
  background-color: var(--color-terracota-700) !important;
  border-color: var(--color-terracota-700) !important;
}

/* Botón destructivo (cancelar inscripción): al pasar el cursor se oscurece.
   A mano porque el bundle de Unfold no trae ningún `hover:bg-red-*`; el
   literal de respaldo es por si tampoco emite la variable del 700. */
.btn-peligro:hover {
  background-color: var(--color-red-700, #b91c1c) !important;
  border-color: var(--color-red-700, #b91c1c) !important;
}

/* 7. Header de las listviews ------------------------------------------------
   Override de `unfold/helpers/change_list_headers.html`: usa `.clh-warm`
   en vez del tinte `primary` frío. Banda crema cálida + subrayado
   terracota fino. */
.clh-warm {
  background-color: var(--color-base-100);
  border-bottom: 2px solid var(--color-terracota-300);
}
.clh-warm th {
  color: var(--color-font-important-light);
}

/* Zebra muy sutil en las filas de las listviews, en cálido, para mejorar el
   escaneo sin llegar a "bandas de color" completas (eso queda para las
   pantallas propias). Unfold no pinta las filas pares. */
#result_list tbody tr:nth-child(even) > * {
  background-color: rgba(226, 213, 191, 0.18);
}

/* 8. Acento botánico -----------------------------------------------------
   `inspiracion.md`: ilustración de línea fina en las esquinas, "casi
   invisible", nunca compitiendo con el contenido. Un solo trazo fijo en la
   esquina inferior derecha del viewport + otro en el header del sidebar.
   Data-URI para no pedir un asset nuevo ni una request extra. */
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 200 200' fill='none' stroke='%235C5449' stroke-width='1.4'%3E%3Cpath d='M180 200c0-60-20-110-70-150'/%3E%3Cpath d='M150 70c-14-6-30-4-42 6 10 12 26 16 40 10z'/%3E%3Cpath d='M162 104c-15-2-30 4-38 16 12 10 29 10 41 0z'/%3E%3Cpath d='M168 140c-15 2-28 12-33 26 14 6 30 2 40-10z'/%3E%3Cpath d='M120 40c-12 4-21 14-24 27 13 3 27-3 33-15z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: bottom right;
  bottom: -34px;
  content: "";
  height: 210px;
  opacity: 0.04;
  pointer-events: none;
  position: fixed;
  right: -44px;
  width: 210px;
  z-index: 0;
}

/* Item activo del sidebar: además del fondo navy de Unfold, una barrita
   terracota a la izquierda para el toque cálido de marca. */
#nav-sidebar a[aria-current="page"],
#nav-sidebar li.active > a {
  box-shadow: inset 3px 0 0 0 var(--color-terracota-500);
}

/* <summary> del bloque "Responsable" en el resumen de inscripción: el
   triángulo nativo del navegador se renderiza como bloque propio arriba del
   contenido (Chrome lo pinta vía ::-webkit-details-marker, que `list-none` de
   Tailwind no toca — ese solo afecta list-style). Lo apagamos aquí para poner
   nuestra propia flechita en línea junto al nombre. */
.summary-sin-marcador {
  list-style: none;
}

.summary-sin-marcador::-webkit-details-marker {
  display: none;
}

.marcador-resumen {
  display: inline-block;
  transition: transform 150ms ease;
}

details[open] .marcador-resumen {
  transform: rotate(90deg);
}

/* 9. Ventanas emergentes (popups) -------------------------------------------
   Un solo componente para los tres usos de las pantallas propias: formulario
   de edición, confirmación de una acción y visor de PDF. Es un `<dialog>`
   nativo abierto con `showModal()` (ver `core/js/admin-extra.js`): trae gratis
   el foco atrapado, Escape para cerrar y el telón `::backdrop`, y existe desde
   Chrome 37 — importa por las PCs con Chrome viejo (ver el bloque de oklch
   arriba). No se usa el modal de Unfold (`unfold/helpers/modal.html`) porque
   ese está amarrado a sus propias acciones vía htmx.

   `margin: auto` va explícito: el preflight de Tailwind v4 pone `margin: 0` a
   todo y con eso el `<dialog>` deja de centrarse solo. */
dialog.cb-modal {
  background-color: #fff;
  border: 1px solid var(--color-base-200);
  /* `--border-radius` es la variable que Unfold inyecta desde
     UNFOLD["BORDER_RADIUS"] — la misma que usa `.rounded-default`. */
  border-radius: var(--border-radius, 14px);
  box-shadow: 0 4px 12px rgba(83, 60, 40, 0.1), 0 16px 48px rgba(83, 60, 40, 0.16);
  color: inherit;
  margin: auto;
  max-height: calc(100vh - 2rem);
  max-width: calc(100vw - 2rem);
  overflow: auto;
  padding: 0;
  width: 38rem;
}

dialog.cb-modal::backdrop {
  background-color: rgba(58, 52, 45, 0.5);
}

/* Mientras hay un popup abierto la página de atrás no hace scroll (la clase
   la pone y la quita `core/js/admin-extra.js`). */
html.cb-sin-scroll {
  overflow: hidden;
}

dialog.cb-modal.cb-modal-sm {
  width: 30rem;
}

.cb-modal-head {
  align-items: flex-start;
  border-bottom: 1px solid var(--color-base-200);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 1rem 1.25rem;
}

.cb-modal-title {
  color: var(--color-font-important-light);
  font-family: "Lora", ui-serif, Georgia, serif;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: 1.25;
}

.cb-modal-sub {
  color: var(--color-font-subtle-light);
  font-size: var(--text-xs);
  margin-top: 0.15rem;
}

.cb-modal-x {
  border-radius: 9999px;
  color: var(--color-base-500);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  padding: 0.25rem;
}

.cb-modal-x:hover {
  background-color: var(--color-base-100);
  color: var(--color-base-700);
}

.cb-modal-body {
  padding: 1.25rem;
}

.cb-modal-foot {
  border-top: 1px solid var(--color-base-200);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.875rem 1.25rem;
}

/* Visor de PDF: casi toda la pantalla, con el documento ocupando lo que
   sobra bajo la barra de acciones. */
dialog.cb-modal.cb-modal-pdf {
  height: calc(100vh - 6rem);
  overflow: hidden;
  width: 52rem;
}

dialog.cb-modal.cb-modal-pdf[open] {
  display: flex;
  flex-direction: column;
}

.cb-modal-pdf .cb-modal-head {
  align-items: center;
}

/* Barra bajo el documento: "abrir en otra pestaña" a la izquierda y
   "descargar" a la derecha. */
.cb-modal-foot.cb-pdf-acciones {
  justify-content: space-between;
}

.cb-pdf-frame {
  background-color: var(--color-base-100);
  border: 0;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Variante chica del visor, para documentos de una sola hoja que se leen de
   un vistazo (el QR de una plática). El visor solo existe en escritorio: en
   celular el enlace abre su pestaña normal (ver `core/js/admin-extra.js`). */
dialog.cb-modal.cb-modal-pdf.cb-modal-pdf-chico {
  height: min(44rem, calc(100vh - 6rem));
  width: 34rem;
}

/* 10. Dos tarjetas lado a lado -----------------------------------------------
   La usa el resumen de inscripción (adeudos | documentación). Las dos tarjetas miden lo mismo — mitad y mitad de ancho, y la
   más corta se estira a la altura de la otra (el `stretch` por defecto del
   grid) — para que no queden disparejas. Se parte con una *container
   query* y no con un breakpoint de pantalla: el ancho útil cambia al abrir o
   cerrar la sidebar, y `admin/base.html` de Unfold ya declara `@container` en
   el envoltorio de `#content`. Los navegadores sin container queries
   (Chrome < 105) caen al `@media` de respaldo. */
.dos-columnas {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

.dos-columnas > * {
  min-width: 0;
}

@container (min-width: 60rem) {
  .dos-columnas {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@supports not (container-type: inline-size) {
  @media (min-width: 1280px) {
    .dos-columnas {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
}

/* Fila compacta de las listas dentro de una tarjeta (cargos, documentos,
   responsables): separador fino arriba salvo en la primera. */
.fila + .fila {
  border-top: 1px solid var(--color-base-200);
}

/* Icono de estado de un documento/libro en el checklist. */
.check-ok {
  color: var(--color-sage-500);
}
.check-pend {
  color: var(--color-base-300);
}

/* Datos de la inscripción dentro de la ficha del resumen: un recuadro por
   dato, y el que se puede cambiar lleva su botón ahí mismo. Las columnas se
   acomodan solas al ancho disponible. */
.datos-franja {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.dato {
  align-items: center;
  background-color: var(--color-base-50);
  border-radius: var(--border-radius, 14px);
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.75rem 1rem;
}

/* Recuadro con sus renglones uno bajo el otro (el que lleva botón de
   "Cambiar"): así el botón nunca compite por el ancho con el valor. */
.dato.dato-apilado {
  align-items: stretch;
  flex-direction: column;
  gap: 0.125rem;
  justify-content: center;
}

.dato.dato-apilado.items-center {
  align-items: center;
}

/* Responsables: tarjetitas con aire en vez de renglones apretados. `auto-fill`
   (no `auto-fit`) para que un solo responsable no se estire a todo el ancho. */
.resp-grid {
  display: grid;
  gap: 0.75rem;
  /* 14rem: lo justo para que en cada mitad de la ficha (responsables |
     padrinos) quepan dos tarjetas por renglón. */
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}

.dato-resp {
  background-color: var(--color-base-50);
  border-radius: var(--border-radius, 14px);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
}

/* Responsables a la izquierda y padrinos a la derecha dentro de la ficha. Se
   parte según el ancho disponible (misma razón que `.dos-columnas`). */
.contactos-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: minmax(0, 1fr);
}

@container (min-width: 60rem) {
  .contactos-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@supports not (container-type: inline-size) {
  @media (min-width: 1280px) {
    .contactos-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
}

/* Botón de solo icono (editar / quitar en las tarjetas compactas). Lleva
   siempre `title` y `aria-label`, porque no tiene texto. */
.btn-icono {
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--color-base-200);
  border-radius: 9999px;
  color: var(--color-font-important-light);
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.btn-icono:hover {
  background-color: var(--color-base-100);
}

/* Acción que ahora no aplica: se ve apagada y explica por qué en su tooltip. */
.btn-icono.btn-icono-inactivo {
  cursor: not-allowed;
  opacity: 0.4;
}

.btn-icono.btn-icono-inactivo:hover {
  background-color: #fff;
}

.btn-icono.btn-icono-peligro:hover {
  background-color: var(--color-red-700, #b91c1c);
  border-color: var(--color-red-700, #b91c1c);
  color: #fff;
}

/* 11. Lista de personas (asistencia a pláticas) ------------------------------
   Antes era un renglón por persona a todo el ancho, y con cientos de
   convocados la página no acababa. Ahora son recuadros compactos en tantas
   columnas como quepan: el mismo listado ocupa la mitad o un tercio de alto. */
.lista-personas {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
}

.persona {
  align-items: center;
  background-color: var(--color-base-50);
  border-radius: var(--border-radius, 14px);
  display: flex;
  gap: 0.75rem;
  padding: 0.5rem 0.875rem;
}

/* Pestañas de filtro con su conteo: hacen también de resumen (cuántos
   convocados, cuántos faltan, cuántos asistieron). */
/* La fila de pestañas va centrada en celular y tablet, y alineada a la
   izquierda en escritorio, donde centrada quedaba flotando lejos del título. */
.tabs-filtro {
  justify-content: center;
}

@media (min-width: 1024px) {
  .tabs-filtro {
    justify-content: flex-start;
  }
}

.tab-filtro {
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--color-base-200);
  border-radius: 9999px;
  color: var(--color-font-important-light);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 500;
  gap: 0.5rem;
  padding: 0.3rem 0.5rem 0.3rem 0.9rem;
}

.tab-filtro:hover {
  background-color: var(--color-base-100);
}

.tab-filtro.activa {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}

.tab-conteo {
  background-color: var(--color-base-100);
  border-radius: 9999px;
  color: var(--color-font-important-light);
  font-size: var(--text-xs);
  font-weight: 700;
  min-width: 2rem;
  padding: 0.05rem 0.5rem;
  text-align: center;
}

.tab-filtro.activa .tab-conteo {
  background-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}

/* 12. Que nada rompa en pantalla angosta --------------------------------------
   Lo que se sale de su caja en un celular casi siempre es texto que no puede
   partirse: un correo, una URL, un nombre muy largo. */

/* En estas pantallas el texto que no cabe se recorta con "…" (utilidad
   `truncate`), nunca desborda ni empuja el layout. Solo dentro de los popups
   se deja partir, porque ahí el texto es para leerse completo. */
.cb-modal-title,
.cb-modal-sub,
.cb-modal-body {
  overflow-wrap: anywhere;
}

/* Título de sección en una sola línea con "…". El `.section-title` normal es
   un flex (barrita + texto) y `text-overflow` no actúa sobre el texto suelto
   de un flex; aquí pasa a bloque y la barrita se posiciona aparte. Es una
   variante y no un cambio al original para no tocar las demás pantallas. */
.section-title.una-linea {
  display: block;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  padding-left: calc(4px + 0.625rem);
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-title.una-linea::before {
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Cuando el título trae su propio padding (`p-4`), la barrita va después de
   ese padding y el texto después de la barrita. */
.section-title.una-linea.p-4 {
  padding-left: calc(1rem + 4px + 0.625rem);
}

.section-title.una-linea.p-4::before {
  left: 1rem;
}

/* Un hijo de grid/flex no se encoge por debajo de su contenido salvo que se
   le diga; sin esto un nombre largo ensancha la columna entera. */
.datos-franja > *,
.resp-grid > *,
.lista-personas > *,
.cb-modal-head > div {
  min-width: 0;
}

/* Rejilla de los formularios emergentes: dos columnas, y una sola en
   celular. `.cb-span-2` ocupa el renglón completo en ambos casos (con
   `col-span-2` de Tailwind, en una columna se inventaría una segunda). */
.cb-grid-2 {
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
  .cb-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cb-span-2 {
  grid-column: 1 / -1;
}

/* Buscador junto a un título: crece hasta 36rem, pero si no le quedan al
   menos 18rem baja a su propio renglón en vez de aplastarse. */
.buscador {
  flex: 1 1 18rem;
  margin-left: auto;
  max-width: 36rem;
}

/* 13. Opciones grandes para elegir con un clic --------------------------------
   Formulario guiado de pláticas: la audiencia (una) y los niveles (varios) se
   eligen tocando una ficha, en vez de un desplegable o las dos cajas con
   flechas del admin. El <input> real sigue dentro de la ficha —invisible pero
   enfocable— para que el teclado y el envío del formulario funcionen igual;
   la clase `.marcada` la pone Alpine. */
.opciones-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
}

.opcion {
  align-items: center;
  background-color: #fff;
  border: 1px solid var(--color-base-200);
  border-radius: var(--border-radius, 14px);
  color: var(--color-font-important-light);
  cursor: pointer;
  display: flex;
  font-size: var(--text-sm);
  font-weight: 600;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.625rem 0.875rem;
  position: relative;
}

.opcion.opcion-alta {
  align-items: flex-start;
  padding: 0.875rem 1rem;
}

.opcion:hover {
  background-color: var(--color-base-50);
}

.opcion.marcada {
  background-color: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}

.opcion:focus-within {
  outline: 2px solid var(--color-primary-600);
  outline-offset: 2px;
}

.opcion input {
  opacity: 0;
  pointer-events: none;
  position: absolute;
}

.opcion-ayuda {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  margin-top: 0.125rem;
  opacity: 0.8;
}

/* Texto alterno según el tamaño de pantalla: etiquetas completas en
   escritorio y cortas en celular (p. ej. «Ver comprobante» / «Comprobante»). */
.solo-movil {
  display: none;
}

@media (max-width: 639px) {
  .solo-movil {
    display: inline;
  }
  .oculta-movil {
    display: none;
  }
}

/* 14. Resumen de inscripción en celular ---------------------------------------
   Cinco botones apilados ocupaban media pantalla antes de llegar a los datos.
   En celular van en una rejilla de dos columnas con etiquetas cortas — dos
   renglones para lo cotidiano — y «Cancelar inscripción» al final a todo el
   ancho, separado de lo demás por ser lo destructivo. `display: contents`
   disuelve los dos grupos para que los cinco compartan una sola rejilla. */
@media (max-width: 639px) {
  div.acciones-ficha {
    display: grid;
    gap: 0.5rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-inline: auto;
    max-width: 26rem;
    width: 100%;
  }

  .acciones-ficha .acciones-grupo {
    display: contents;
  }

  .acciones-ficha .acciones-grupo > a,
  .acciones-ficha .acciones-grupo > button,
  .acciones-ficha .acciones-grupo > form > button {
    font-size: 0.9375rem;
    line-height: 1.2;
    min-width: 0;
    /* En los celulares más angostos (320px) una etiqueta puede no caber en
       media pantalla: que baje a dos líneas antes que salirse del botón. */
    white-space: normal;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    width: 100%;
  }

  .acciones-ficha .acciones-grupo > .pill {
    justify-content: center;
  }

  .acciones-ficha [data-accion-ancha] {
    grid-column: 1 / -1;
    order: 9;
  }

  /* Son tres botones cotidianos: «Editar» y «Comprobante» comparten renglón y
     el del correo (o su aviso de enviado) ocupa el siguiente completo, para
     no dejar un hueco a su lado. */
  .acciones-ficha .acciones-grupo > form,
  .acciones-ficha .acciones-grupo > .pill {
    grid-column: 1 / -1;
  }

  /* Recuadros de datos: la etiqueta («NIVEL Y DÍA») ya no comparte renglón con
     "Cambiar" — se partía en dos líneas. `display: contents` disuelve el
     renglón de cabecera para que el botón pueda mandarse, con `order`, al pie
     del recuadro y a todo el ancho. */
  .dato-apilado .dato-cabecera {
    display: contents;
  }

  .dato-apilado [data-dato-accion] {
    align-self: stretch;
    margin-top: 0.5rem;
    order: 9;
    padding-bottom: 0.375rem;
    padding-top: 0.375rem;
  }

  /* Y el texto centrado, igual que los recuadros de Grupo, Centro y Ciclo. */
  .dato.dato-apilado {
    text-align: center;
  }
}

/* En tablet los cinco botones no caben en un renglón: en vez de dejar que el
   segundo grupo caiga solo a la derecha, cada grupo ocupa su propio renglón
   centrado — arriba los de la inscripción, abajo PDF y correo. */
@media (min-width: 640px) and (max-width: 1023px) {
  .acciones-ficha .acciones-grupo {
    justify-content: center;
    margin-left: 0;
    width: 100%;
  }
}


/* Barra de filtros del listado de inscripciones ---------------------------
   Pestañas de estado (segmented control) y chips de nivel multi-selección.
   Son enlaces: cada click solo cambia la URL (ver InscripcionAdmin.changelist_view). */
.filtros-barra {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.filtros-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.filtros-etiqueta {
  font-weight: 600;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-base-500);
  min-width: 5rem;
}
.seg-tabs {
  display: inline-flex;
  border: 1px solid var(--color-base-300);
  border-radius: 0.5rem;
  overflow: hidden;
}
.seg-tab {
  padding: 0.4rem 0.9rem;
  font-weight: 500;
  color: var(--color-base-600);
  background: #fff;
  border-right: 1px solid var(--color-base-300);
}
.seg-tab:last-child {
  border-right: 0;
}
.seg-tab:hover {
  background: var(--color-base-100);
}
.seg-tab-activa,
.seg-tab-activa:hover {
  background: var(--color-primary-600);
  color: #fff;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--color-base-300);
  border-radius: 9999px;
  background: #fff;
  color: var(--color-base-700);
  font-weight: 500;
  white-space: nowrap;
}
.chip:hover {
  border-color: var(--color-primary-600);
}
.chip-activo,
.chip-activo:hover {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
  color: #fff;
}
.chip-limpiar {
  color: var(--color-terracota-700);
  font-weight: 500;
  text-decoration: underline;
  padding: 0.35rem 0.5rem;
}