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

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

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