/* =====================================================================
   INSCRIPCIONES · La agenda pública en el tono del ecosistema (oct 2026)

   Pedido del dueño (6-oct-2026): «la agenda completa no tiene el diseño de
   ekklesia … se ve extraño con relación al nuevo login». Sin rehacer la
   agenda (agenda.php sigue con su Tailwind y sus reglas), se le pone la
   misma piel que al ingreso (login.php, css/acceso-ecosistema.css):
   · arriba, la franja del ecosistema;
   · la cabecera y la portada en el azul medianoche de Ekklesia, con su
     halo y el emblema de la iglesia apagado, el logo blanco y «Iniciar
     sesión» en blanco;
   · la letra de Ekklesia (Schibsted Grotesk) y los rótulos en mono;
   · la lista y las tarjetas de los eventos siguen en blanco, como la hoja
     del ingreso.
   Carga después de las reglas de la agenda; por eso algunos !important
   sobre las utilidades de Tailwind.
   ===================================================================== */

/* -- La letra de Ekklesia -- */
body{ font-family:"Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif !important; }
.display, .display-it, .ghost-num{ font-family:"Schibsted Grotesk", system-ui, sans-serif !important; font-weight:400 !important; }
/* Los rótulos chicos en versales, en la mono de Ekklesia. */
.tracking-\[0\.3em\], .tracking-\[0\.25em\]{
  font-family:"JetBrains Mono", ui-monospace, monospace !important; letter-spacing:.2em !important;
}

/* -- La franja: aquí va en el flujo, sobre el azul (en el ingreso flota) -- */
.ag-franja{ position:relative; z-index:41; background:#071129; }
.ag-franja .au-eco{ position:relative; animation:none; }

/* -- La cabecera, en el azul -- */
.ag-cab{
  background:rgba(7,17,41,.94) !important; border-bottom-color:rgba(255,255,255,.08) !important;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.ag-cab .view-toggle{ background:rgba(255,255,255,.07); box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.ag-cab .view-btn{ color:rgba(255,255,255,.62); }
.ag-cab .view-btn:hover{ color:#fff; }
.ag-cab .view-btn.active{ background:#fff; color:#0e2a63; box-shadow:none; }
.ag-cab .ag-ingresar{ background:#fff !important; color:#0e2a63 !important; box-shadow:none !important; }
.ag-cab .ag-ingresar:hover{ background:#eef1f8 !important; }
.ag-cab .ag-ingresar > span:last-child{ background:#0e2a63 !important; }
.ag-cab .ag-ingresar > span:last-child svg{ color:#fff !important; }

/* -- La portada, en el azul de Ekklesia con su halo y el emblema apagado -- */
.ag-banda{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(circle 640px at 22% 20%, rgba(127,166,255,.20), rgba(127,166,255,0) 70%),
    radial-gradient(circle 560px at 86% 84%, rgba(127,166,255,.13), rgba(127,166,255,0) 70%),
    radial-gradient(circle 760px at 56% 46%, rgba(0,51,153,.24), rgba(0,51,153,0) 70%),
    #071129;
}
.ag-banda::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  left:-190px; bottom:-230px; width:660px; height:660px;
  background:url("../images/ecosistema/logo-renacer-emblema-blanco.png") center/contain no-repeat;
  opacity:.05; transform:rotate(-7deg);
}
.ag-banda > .ag-hero{ position:relative; z-index:1; }
.ag-hero h1, .ag-hero .text-slate-900{ color:#fff !important; }
.ag-hero .text-\[var\(--acc\)\], .ag-hero h1 .display-it{ color:#7fa6ff !important; }
.ag-hero .bg-\[var\(--acc\)\]{ background:#7fa6ff !important; }
.ag-hero .text-slate-500, .ag-hero .text-slate-600{ color:rgba(255,255,255,.62) !important; }
.ag-hero .text-slate-400, .ag-hero .text-slate-300{ color:rgba(255,255,255,.42) !important; }
.ag-hero a:hover, .ag-hero a:hover .text-\[var\(--acc\)\]{ color:#fff !important; }
.ag-hero .kpi-item::after{ background:#7fa6ff; }
.ag-hero .kpi-item.active .kpi-num, .ag-hero .kpi-item.active .kpi-label{ color:#7fa6ff !important; }
.ag-hero .kpi-item:focus-visible{ outline:2px solid #7fa6ff; outline-offset:4px; border-radius:4px; }
/* Lo que viene después del azul (la línea de tiempo o la lista) toma aire. */
.ag-banda + section, .ag-banda + div{ margin-top:44px; }

@media (max-width:860px){
  .ag-banda::before{ left:-140px; bottom:-190px; width:460px; height:460px; opacity:.045; }
}