/* =====================================================================
   Memoria y Resistencia — rediseño 2026
   ---------------------------------------------------------------------
   Capa visual sobre mr.css: no cambia el marcado de las páginas internas,
   solo su apariencia. Para volver al diseño anterior basta con quitar el
   <link> de este archivo en vistas/layouts/publico.php.
     · Superficies más amplias y redondeadas, sombras suaves.
     · Cabecera translúcida y compacta; pie con el listón del logotipo.
     · Encabezados de página con fondo lila y el listón como firma.
   ===================================================================== */

:root {
  --mr-papel: #f6f4f9;
  --mr-linea: #e6e1ee;
  --mr-linea-2: #d5cde1;
  --mr-morado: #7444b4;
  --mr-morado-2: #5c3296;
  --mr-morado-claro: #f0e8fa;
  --mr-radio: 12px;
  --mr-radio-lg: 22px;
  --mr-sombra: 0 1px 2px rgba(21, 18, 43, .05), 0 10px 30px -8px rgba(21, 18, 43, .12);
  --mr-sombra-alta: 0 2px 4px rgba(21, 18, 43, .05), 0 24px 48px -16px rgba(43, 24, 84, .28);
  --mr-degradado-noche: radial-gradient(120% 120% at 85% 0%, #3a2566 0%, #1d1538 45%, #110c22 100%);
  --mr-ancho: 76rem;
  --bs-primary-rgb: 116, 68, 180;
  --bs-link-color-rgb: 116, 68, 180;
  --bs-link-hover-color-rgb: 92, 50, 150;
}

body { background: var(--mr-papel); }
h1 { letter-spacing: -0.025em; }
h2 { letter-spacing: -0.02em; }

/* Antetítulo: pastilla con punto de vela */
.antetitulo {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--mr-morado); margin-bottom: .9rem;
}
.antetitulo::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--mr-cempa);
  box-shadow: 0 0 0 3px rgba(242, 165, 65, .22);
}
.bg-noche .antetitulo, .muro .antetitulo { color: #f6c27a; }

/* ---------------------------------------------------------------------
   Botones
   --------------------------------------------------------------------- */
.btn { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.3rem; letter-spacing: -.005em; }
.btn-lg { --bs-btn-padding-y: .9rem; --bs-btn-padding-x: 1.65rem; }
.btn-primary {
  --bs-btn-bg: var(--mr-morado); --bs-btn-border-color: var(--mr-morado);
  --bs-btn-hover-bg: var(--mr-morado-2); --bs-btn-hover-border-color: var(--mr-morado-2);
  --bs-btn-active-bg: var(--mr-morado-2); --bs-btn-active-border-color: var(--mr-morado-2);
  box-shadow: 0 6px 16px -6px rgba(116, 68, 180, .55);
}
.btn-vela { box-shadow: 0 8px 20px -8px rgba(242, 165, 65, .75); }
.btn-primary:hover, .btn-vela:hover { transform: translateY(-1px); }

/* ---------------------------------------------------------------------
   Cabecera
   --------------------------------------------------------------------- */
.cabecera {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.6) blur(16px);
  -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid rgba(214, 205, 228, .7);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset;
}
.cabecera .liston { height: 3px; }
.cabecera .navbar { padding-block: .35rem; }
.marca img { height: 54px; }
.cabecera .nav-link { font-weight: 550; border-radius: 999px; }
.cabecera .nav-link.active { box-shadow: none; background: var(--mr-morado-claro); }
.cabecera .dropdown-menu {
  border-radius: 18px; border: 1px solid var(--mr-linea); box-shadow: var(--mr-sombra-alta);
  padding: .6rem; animation: rd-menu .18s ease-out;
}
@keyframes rd-menu { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.cabecera .dropdown-item { border-radius: 12px; }
.cabecera .dropdown-item i { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 10px; background: var(--mr-morado-claro); margin-right: .2rem; flex: none; }
.cabecera .dropdown-item { display: flex; align-items: flex-start; gap: .6rem; }
.nav-campo-buscar { border-radius: 999px !important; background: #f3f0f8 !important; border-color: transparent !important; }
.nav-campo-buscar:hover { background: #ebe5f4 !important; }
.nav-donar { box-shadow: 0 6px 16px -6px rgba(242, 165, 65, .8); }
@media (prefers-reduced-motion: reduce) { .cabecera .dropdown-menu { animation: none; } }

/* ---------------------------------------------------------------------
   Encabezados de página (todas las secciones internas)
   --------------------------------------------------------------------- */
.encabezado-pagina:not(.oscuro) {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60rem 22rem at 100% 0%, rgba(116, 68, 180, .10), transparent 70%),
    radial-gradient(40rem 18rem at 0% 100%, rgba(242, 165, 65, .10), transparent 70%),
    #fff;
  border-bottom: 1px solid var(--mr-linea);
}
.encabezado-pagina:not(.oscuro)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--mr-liston); opacity: .55;
}
.encabezado-pagina.oscuro { background: var(--mr-degradado-noche); }
.encabezado-pagina h1 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }

/* Secciones */
.titulo-seccion { margin-bottom: 2rem; }
.titulo-centrado { justify-content: center; text-align: center; }
.titulo-centrado > div { max-width: 44rem; margin-inline: auto; }
.titulo-centrado p { margin-inline: auto; }
.enlace-flecha { font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .45rem; }
.enlace-flecha i { transition: transform .2s; }
.enlace-flecha:hover i { transform: translateX(3px); }

/* ---------------------------------------------------------------------
   Superficies y tarjetas
   --------------------------------------------------------------------- */
.superficie { border-radius: var(--mr-radio-lg); border-color: var(--mr-linea); box-shadow: var(--mr-sombra); }
.memoria { border-radius: 20px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.memoria:hover { transform: translateY(-4px); box-shadow: var(--mr-sombra-alta); }
.memoria-foto { background: var(--mr-degradado-noche); }
.memoria-nombre { letter-spacing: -.01em; }
.tabla-marco { border-radius: var(--mr-radio-lg); box-shadow: var(--mr-sombra); }
.lista-filas { border-top: 0; background: #fff; border: 1px solid var(--mr-linea); border-radius: var(--mr-radio-lg); overflow: hidden; box-shadow: var(--mr-sombra); }
.lista-filas > li:last-child { border-bottom: 0; }
.fila-enlace { padding: 1rem 1.25rem; transition: background-color .15s; }
.fila-enlace:hover { background: #faf8fd; }
.marca-estado { border-radius: 999px; }
.form-control, .form-select { border-radius: 12px; }
.alert { border-radius: 14px; }

/* ---------------------------------------------------------------------
   Aniversarios y muro (memoria en la portada)
   --------------------------------------------------------------------- */
.aniv-seccion { background: var(--mr-degradado-noche); }

/* ---------------------------------------------------------------------
   Pie
   --------------------------------------------------------------------- */
.pie { background: linear-gradient(180deg, #17112d 0%, #0e0a1c 100%); position: relative; }
.pie::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--mr-liston); }
.pie-llamado { padding: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid rgba(255, 255, 255, .08); border-radius: var(--mr-radio-lg); background: linear-gradient(120deg, rgba(116, 68, 180, .35), rgba(242, 165, 65, .18)); border: 1px solid rgba(255, 255, 255, .08); }
.pie-reporte { background: rgba(255, 255, 255, .03); }