/* Panel de la Asociación San Elías — tokens y componentes.
   Decisiones en proceso/02-triada.md. Paleta de la marca de la Fundación (prompt maestro de piezas):
   crema papel, bordó institucional, dorado antiguo, gris muy oscuro. Contrastes calculados el 2026-09-29. */

@import url('/fuentes/fuentes.css');

:root {
  --fondo: #FAF8F4;
  --papel: #FFFDFA;
  --tinta: #1F2937;
  --tinta-2: #5B6470;
  --linea: #E6E0D6;
  --linea-fuerte: #CFC6B8;
  --bordo: #8C1C2B;
  --sobre-bordo: #FFFFFF;
  --bordo-suave: #F4E6E8;
  --dorado: #A47E1B;
  --dorado-texto: #7A5C10;
  --foco: #8C1C2B;

  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', 'Segoe UI', Tahoma, sans-serif;

  --t-1: 0.875rem;  /* 14 */
  --t-2: 1rem;      /* 16 */
  --t-3: 1.125rem;  /* 18 */
  --t-4: 1.375rem;  /* 22 */
  --t-5: 1.75rem;   /* 28 */
  --t-6: 2.25rem;   /* 36 */

  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 24px; --e-6: 32px; --e-7: 48px; --e-8: 64px;
  --r-control: 3px; --r-tarjeta: 6px;
  --ancho-lectura: 72ch;
  --barra: 56px;
  --transicion: 180ms ease;
  color-scheme: light;
}

:root[data-tema="oscuro"] {
  --fondo: #1C1917;
  --papel: #26221F;
  --tinta: #F3EEE6;
  --tinta-2: #A8A29E;
  --linea: #3A342F;
  --linea-fuerte: #4E4741;
  --bordo: #E07A84;
  --sobre-bordo: #1C1917;
  --bordo-suave: #3A2226;
  --dorado: #C9A24B;
  --dorado-texto: #C9A24B;
  --foco: #E07A84;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fondo: #1C1917; --papel: #26221F; --tinta: #F3EEE6; --tinta-2: #A8A29E; --linea: #3A342F;
    --linea-fuerte: #4E4741; --bordo: #E07A84; --sobre-bordo: #1C1917; --bordo-suave: #3A2226;
    --dorado: #C9A24B; --dorado-texto: #C9A24B; --foco: #E07A84; color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--sans); font-size: var(--t-2); line-height: 1.5;
  min-height: 100dvh; display: flex; flex-direction: column;
}
a { color: inherit; text-decoration-color: var(--linea-fuerte); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--bordo); }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: var(--r-control); }
button, input, select, textarea { font: inherit; color: inherit; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: var(--t-5); }
h2 { font-size: var(--t-4); }
h3 { font-size: var(--t-3); }
p { margin: 0; }
.serif { font-family: var(--serif); }
.tinta-2 { color: var(--tinta-2); }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Barra ─────────────────────────────────────────────────────────────────── */
.barra {
  position: sticky; top: 0; z-index: 10; height: var(--barra);
  display: flex; align-items: center; gap: var(--e-4);
  padding: 0 var(--e-4); background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.barra__marca { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; min-width: 0; }
.barra__logo { height: 40px; width: auto; }
.barra__nombre { font-family: var(--serif); font-size: var(--t-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra__nav { display: none; gap: var(--e-1); margin-left: var(--e-4); }
.barra__nav a { padding: var(--e-2) var(--e-3); border-radius: var(--r-control); text-decoration: none; color: var(--tinta-2); }
.barra__nav a:hover { color: var(--tinta); background: var(--papel); }
.barra__nav a[aria-current="page"] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--bordo); }
.barra__derecha { margin-left: auto; display: flex; align-items: center; gap: var(--e-2); }
.barra__persona { display: none; color: var(--tinta-2); font-size: var(--t-1); }
@media (min-width: 900px) {
  .barra { padding: 0 var(--e-6); }
  .barra__nav { display: flex; }
  .barra__persona { display: inline; }
}
.nav-movil { display: flex; gap: var(--e-1); overflow-x: auto; padding: var(--e-2) var(--e-4); border-bottom: 1px solid var(--linea); scrollbar-width: none; }
.nav-movil::-webkit-scrollbar { display: none; }
.nav-movil a { white-space: nowrap; padding: var(--e-2) var(--e-3); border-radius: var(--r-control); text-decoration: none; color: var(--tinta-2); }
.nav-movil a[aria-current="page"] { color: var(--tinta); box-shadow: inset 0 -2px 0 var(--bordo); }
@media (min-width: 900px) { .nav-movil { display: none; } }

/* ── Controles ─────────────────────────────────────────────────────────────── */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 44px; padding: 0 var(--e-4); border-radius: var(--r-control);
  border: 1px solid var(--linea-fuerte); background: var(--papel); color: var(--tinta);
  cursor: pointer; text-decoration: none; transition: background var(--transicion), border-color var(--transicion), color var(--transicion);
}
.boton:hover { border-color: var(--tinta-2); }
.boton--principal { background: var(--bordo); color: var(--sobre-bordo); border-color: var(--bordo); font-weight: 600; }
.boton--principal:hover { filter: brightness(0.94); border-color: var(--bordo); }
.boton--icono { min-width: 44px; padding: 0; }
.boton[disabled] { opacity: 0.55; cursor: not-allowed; }
.boton svg { width: 20px; height: 20px; flex: none; }

/* ── Contenido ─────────────────────────────────────────────────────────────── */
.principal { flex: 1; width: 100%; padding: var(--e-5) var(--e-4) var(--e-8); }
@media (min-width: 900px) { .principal { padding: var(--e-6) var(--e-6) var(--e-8); } }
.encabezado { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2) var(--e-4); margin-bottom: var(--e-5); }
.encabezado__sub { color: var(--tinta-2); }
.columnas { display: grid; gap: var(--e-6); }
@media (min-width: 1100px) { .columnas { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.seccion { margin-bottom: var(--e-6); }
.seccion__titulo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); padding-bottom: var(--e-2); border-bottom: 1px solid var(--linea-fuerte); margin-bottom: var(--e-2); }
.seccion__titulo h2 { font-size: var(--t-3); }
.seccion__conteo { color: var(--tinta-2); font-size: var(--t-1); }
.prosa { max-width: var(--ancho-lectura); }
.prosa p + p { margin-top: var(--e-3); }
.vacio { padding: var(--e-5) 0; color: var(--tinta-2); border-bottom: 1px solid var(--linea); }
.vacio a { color: var(--tinta); }

/* Lista reglada: filas separadas por línea, sin tarjetas. El «hilo de espera» es la audacia
   del panel: una línea bajo cada pendiente cuya longitud crece con los días que lleva abierto;
   dorada hasta 7 días, bordó pasados 14. Informa antigüedad de un vistazo. */
.lista { list-style: none; margin: 0; padding: 0; }
.fila { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-1) var(--e-4); padding: var(--e-3) 0 var(--e-4); border-bottom: 1px solid var(--linea); }
.fila__titulo { font-family: var(--serif); font-size: var(--t-3); }
.fila__titulo a { text-decoration: none; }
.fila__titulo a:hover { text-decoration: underline; }
.fila__meta { color: var(--tinta-2); font-size: var(--t-1); }
.fila__estado { font-size: var(--t-1); color: var(--tinta-2); white-space: nowrap; align-self: start; }
.hilo { position: absolute; left: 0; bottom: -1px; height: 2px; width: var(--hilo, 0%); max-width: 100%; background: var(--dorado); transition: width 600ms ease; }
.hilo--tarde { background: var(--bordo); }

/* Tarjeta de papel: solo para el login y para bloques que necesitan separarse del fondo. */
.papel { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); padding: var(--e-5); }

/* Aviso en línea (estado, error): texto con borde izquierdo, nunca un toast que desaparece. */
.aviso { padding: var(--e-3) var(--e-4); border-left: 3px solid var(--dorado); background: var(--papel); border-radius: 0 var(--r-control) var(--r-control) 0; }
.aviso--error { border-left-color: var(--bordo); }
.aviso[hidden] { display: none; }

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login { flex: 1; display: grid; place-items: center; padding: var(--e-5) var(--e-4); }
.login__caja { width: 100%; max-width: 420px; display: grid; gap: var(--e-5); }
.login__logo { height: 96px; width: auto; }
.login__titulo { font-size: var(--t-5); }
.login__texto { color: var(--tinta-2); }
.login .boton { width: 100%; }
.pie { padding: var(--e-4); color: var(--tinta-2); font-size: var(--t-1); border-top: 1px solid var(--linea); display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}