/*
 * Identidad de marca MCI Patagonia — según el Brand Book / Manual de marca 2025.
 * Paleta: azul marino (navy), celeste y beige. Tipografía: Outfit.
 *
 * Estrategia de implementación: en vez de reescribir cada vista para usar clases nuevas,
 * reutilizamos los slots de utilidades de Bootstrap que ya están en uso en todo el sitio:
 *   - "warning" (ámbar, color de acento/CTA anterior) → ahora es el celeste de marca.
 *   - "dark" (el color oscuro de navbar/footer/sidebar) → ahora es el navy de marca.
 * Así los .btn-warning, .text-warning, .bg-dark, .navbar-dark, etc. que ya existían en
 * docenas de vistas quedan con la marca nueva sin tocar cada archivo uno por uno.
 * Los colores semánticos (success/danger/info/secondary) NO se tocan.
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    --mci-navy: #02152B;
    --mci-blue: #91CDF2;
    --mci-beige: #EDE6DA;

    /* Alias retrocompatibles, por si queda alguna referencia suelta */
    --mci-gold: var(--mci-blue);
}

body {
    font-family: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

body.mci-public {
    font-family: 'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Acento celeste de marca (antes "warning"/ámbar)                        */
/* ---------------------------------------------------------------------- */

.btn-warning {
    background-color: var(--mci-blue);
    border-color: var(--mci-blue);
    color: var(--mci-navy);
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
    background-color: #7cc0ea;
    border-color: #7cc0ea;
    color: var(--mci-navy);
}

.btn-outline-warning {
    color: #1a5c85;
    border-color: var(--mci-blue);
}

.btn-outline-warning:hover {
    background-color: var(--mci-blue);
    border-color: var(--mci-blue);
    color: var(--mci-navy);
}

.text-warning {
    color: var(--mci-blue) !important;
}

.badge.text-bg-warning,
.badge.bg-warning {
    background-color: var(--mci-blue) !important;
    color: var(--mci-navy) !important;
}

.border-warning {
    border-color: var(--mci-blue) !important;
}

/* ---------------------------------------------------------------------- */
/* Navy de marca (antes "dark")                                           */
/* ---------------------------------------------------------------------- */

.bg-dark {
    background-color: var(--mci-navy) !important;
}

.navbar-dark {
    background-color: var(--mci-navy);
}

.btn-dark {
    background-color: var(--mci-navy);
    border-color: var(--mci-navy);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
    background-color: #0a2646;
    border-color: #0a2646;
}

.btn-outline-dark {
    color: var(--mci-navy);
    border-color: var(--mci-navy);
}

.btn-outline-dark:hover {
    background-color: var(--mci-navy);
    border-color: var(--mci-navy);
}

/* ---------------------------------------------------------------------- */
/* Secciones / componentes propios del sitio                              */
/* ---------------------------------------------------------------------- */

.hero-mci {
    min-height: 60vh;
    background: linear-gradient(135deg, var(--mci-navy) 0%, #123259 100%);
}

.card {
    transition: transform .15s ease-in-out;
}

.card:hover {
    transform: translateY(-3px);
}

.mci-logo {
    height: 42px;
    width: auto;
}

.mci-logo-footer {
    height: 56px;
    width: auto;
}

/* Fondo beige suave, disponible para secciones que quieran diferenciarse del blanco puro */
.bg-mci-beige {
    background-color: var(--mci-beige) !important;
}

/* ---------------------------------------------------------------------- */
/* Panel administrativo                                                   */
/* ---------------------------------------------------------------------- */

.mci-admin-sidebar {
    min-height: 100vh;
    background: var(--mci-navy);
}

.mci-admin-sidebar .nav-link {
    color: #b9c8db;
}

.mci-admin-sidebar .nav-link.active,
.mci-admin-sidebar .nav-link:hover {
    color: var(--mci-navy);
    background: var(--mci-blue);
    border-radius: .375rem;
}

.nav-pills .nav-link.active {
    background-color: var(--mci-blue);
    color: var(--mci-navy);
}

/* Buscador de miembros (assets/js/buscador-miembros.js) */
.mci-buscador-miembro {
    position: relative;
}

.mci-buscador-resultados {
    display: none;
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
}

/* ---------------------------------------------------------------------- */
/* Refresh visual — dirección "MCI Bogotá" (agregado en esta etapa)       */
/*                                                                         */
/* Referencia: https://iglesiamci.org/ — la iglesia donde nace la Visión  */
/* G12. Manteniendo la paleta navy/celeste/beige del brand book (ya       */
/* estaba bien encaminada), se suma acá el resto del lenguaje visual de   */
/* esa referencia: formas más redondeadas, botones tipo "pill", paneles   */
/* grandes en vez de banners a todo el ancho, y tipografía más pesada en  */
/* los títulos. Todo queda scopeado a "body.mci-public" — el panel        */
/* administrativo no se toca.                                             */
/* ---------------------------------------------------------------------- */

body.mci-public {
    /* Bootstrap 5.3 expone el radio de sus componentes como variables CSS
       en cascada (.card, .btn, .modal, .form-control, etc. heredan de
       estas). Subirlas acá redondea TODO el sitio público de una sola vez,
       sin tener que tocar cada vista una por una — mismo criterio que ya
       se usaba para los colores. */
    --bs-border-radius: 1rem;
    --bs-border-radius-sm: .6rem;
    --bs-border-radius-lg: 1.5rem;
    --bs-border-radius-xl: 2rem;
    --bs-border-radius-xxl: 2.5rem;

    /* Fondo "niebla" clarito que usa la referencia en vez de blanco puro. */
    --mci-mist: #EEF2F5;
}

/* Botones tipo "pill" (totalmente redondeados) — el tratamiento más       */
/* característico de la referencia para todos sus CTA.                    */
body.mci-public .btn {
    --bs-btn-border-radius: 50rem;
    padding-left: 1.4em;
    padding-right: 1.4em;
}

body.mci-public .btn-sm {
    padding-left: 1.1em;
    padding-right: 1.1em;
}

body.mci-public .badge {
    border-radius: 50rem;
}

/* Wordmark y títulos más pesados, con el tracking mayúsculo de la marca. */
body.mci-public .navbar-brand {
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 800;
    font-size: 1.05rem;
}

body.mci-public h1,
body.mci-public .display-1,
body.mci-public .display-2,
body.mci-public .display-3,
body.mci-public .display-4 {
    font-weight: 800;
    letter-spacing: -.01em;
}

/* Panel "hero" grande y contenido — reemplaza los banners a todo el ancho */
/* por el patrón de panel redondeado con foto/gradiente que usa la        */
/* referencia en su portada. */
.mci-hero-panel {
    position: relative;
    border-radius: var(--bs-border-radius-xxl, 2.5rem);
    overflow: hidden;
    min-height: 62vh;
    background: linear-gradient(150deg, var(--mci-navy) 0%, #123259 65%, #1a4a7a 100%);
}

.mci-hero-panel.has-bg-image {
    background-size: cover;
    background-position: center;
}

.mci-hero-panel .mci-hero-content {
    position: relative;
    z-index: 1;
    min-height: 62vh;
}

/* Paneles de foto grandes (equivalente a los "rounded-rectangle" con      */
/* fotos reales de congregación que usa la referencia en Nosotros/Visión). */
.mci-panel-xl {
    border-radius: var(--bs-border-radius-xxl, 2.5rem);
    overflow: hidden;
}

/* Franja beige para CTAs — mismo rol que el footer/CTA beige de la       */
/* referencia. */
.mci-franja-beige {
    background-color: var(--mci-beige);
    border-radius: var(--bs-border-radius-xxl, 2.5rem);
}

/* Footer rediseñado — wordmark grande + iconos sociales arriba a la      */
/* derecha, sobre fondo beige (ver partials/footer.php). */
.mci-footer-word {
    font-size: clamp(2.25rem, 6vw, 4.25rem);
    line-height: .95;
    letter-spacing: -.02em;
}