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

/* !important porque el sidebar ahora es un .offcanvas-md (ver partials/admin_sidebar.php): en
   escritorio (>=768px) Bootstrap fuerza background-color: transparent !important en .offcanvas-md
   para que el fondo lo ponga el propio elemento — sin este !important quedaba blanco arriba de
   768px (el escondite en celular seguía andando bien, porque ahí Bootstrap no toca el fondo). */
.mci-admin-sidebar {
    min-height: 100vh;
    background: var(--mci-navy) !important;
}

/* Vigésima segunda ronda: pedido del usuario -- "que el menu del dashboard no quede vacio a la
   hora de desplazar la hoja hacia abajo". En escritorio (>=768px) el sidebar es un simple item de
   `.d-flex` (ver layouts/admin.php) sin nada que lo mantenga anclado a la pantalla: al scrollear
   una página con una tabla larga, el navy se iba con el contenido y quedaba fondo blanco vacío en
   su lugar apenas el usuario bajaba más allá del propio alto del menú. `position: sticky` lo fija
   a la ventana (se queda quieto mientras el resto de la página scrollea) y `height: 100vh` +
   `overflow-y: auto` hacen que, si algún día el menú tiene más links de los que entran en una
   pantalla chica (ej. un super_admin, que ve TODOS los bloques), scrollee él solo por dentro en vez
   de cortarse. Todo esto queda adentro del mismo breakpoint que ya usa Bootstrap para volver
   ".offcanvas-md" un sidebar fijo -- por debajo de 768px sigue siendo el panel deslizable de
   siempre, sin tocar. */
@media (min-width: 768px) {
    .mci-admin-sidebar {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100vh;
        overflow-y: auto;
    }
}

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

/* Vigésima segunda ronda: títulos de sección del sidebar (Escalera del éxito / Tienda y
   multimedia / Reportes y finanzas / Administración) -- ver partials/admin_sidebar.php. */
.mci-sidebar-titulo {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

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

/* Trigésima octava ronda: menú lateral reorganizado en grupos plegables (acordeón) -- ver
   partials/admin_sidebar.php. */
.mci-sidebar-grupo:hover {
    background: rgba(255, 255, 255, .06);
    border-radius: .375rem;
}

.mci-sidebar-chevron {
    background: transparent;
    border: none;
    color: #b9c8db;
    padding: .375rem .6rem;
    line-height: 1;
}

.mci-sidebar-chevron:hover,
.mci-sidebar-chevron:focus {
    color: #fff;
}

.mci-sidebar-chevron .bi-chevron-down {
    display: inline-block;
    transition: transform .2s ease;
}

/* Bootstrap le agrega/saca la clase "collapsed" solo, según el grupo esté plegado o desplegado --
   no hace falta JS propio para esto, solo esta regla de CSS. */
.mci-sidebar-chevron.collapsed .bi-chevron-down {
    transform: rotate(-90deg);
}

.mci-sidebar-submenu {
    margin-left: 1.15rem;
    padding-left: .65rem;
    border-left: 2px solid rgba(255, 255, 255, .12);
}

.mci-sidebar-submenu .nav-link {
    font-size: .92rem;
    padding-top: .35rem;
    padding-bottom: .35rem;
}

/* Trigésima novena ronda: rediseño del gráfico de Familias como árbol genealógico (tarjetas +
   codos, ver Views/admin/familias/grafico.php) -- resalta la tarjeta al pasar el mouse, para que
   se note que cada una es clickeable (va a la ficha, o recentra el árbol en esa persona). */
.mci-grafico-familiar a {
    cursor: pointer;
}

.mci-grafico-familiar a:hover rect {
    filter: brightness(0.97);
}

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

/* Video de fondo en loop (ej. Convención) — se apoya sobre el gradiente de .mci-hero-panel, que
   queda como fallback si el video no llega a cargar. mci-hero-overlay es un degradé oscuro
   ENCIMA del video para que el texto blanco de mci-hero-content siga siendo legible. */
.mci-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.mci-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(10, 30, 58, .35) 0%, rgba(10, 30, 58, .8) 100%);
}

.mci-hero-panel .mci-hero-content {
    position: relative;
    z-index: 2;
    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);
}

/* Botón flotante de WhatsApp — visible en todo el sitio público (ver          */
/* partials/whatsapp_flotante.php, incluido desde layouts/public.php). Se      */
/* mantiene con el verde propio de WhatsApp (no la paleta de marca) a          */
/* propósito, para que se reconozca de un vistazo como "esto abre WhatsApp".   */
.mci-whatsapp-flotante {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background-color: #25D366;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    box-shadow: 0 .5rem 1.25rem rgba(0, 0, 0, .25);
    transition: transform .15s ease;
}

.mci-whatsapp-flotante:hover,
.mci-whatsapp-flotante:focus {
    color: #fff;
    transform: scale(1.08);
}

@media (max-width: 575.98px) {
    .mci-whatsapp-flotante {
        right: 1rem;
        bottom: 1rem;
        width: 3.25rem;
        height: 3.25rem;
        font-size: 1.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;
}

/* ---------------------------------------------------------------------- */
/* Switches de tomar asistencia (célula, reunión general, capacitación) — */
/* pedido del usuario: "que los botones para tomar asistencias sean de    */
/* diferente color para no equivocarse". Antes eran switches de Bootstrap */
/* sin ningún color distintivo entre "presente" y "ausente" (el mismo     */
/* celeste tenue prendido o apagado). Ahora: verde = presente (el estado  */
/* por defecto al abrir la pantalla), rojo = ausente (al destildar a      */
/* alguien) -- tanto en el propio switch como en el texto del nombre, así */
/* se puede escanear la lista de un vistazo y detectar un error de carga. */
/* Se aplica agregando la clase .switch-asistencia al .form-check de cada */
/* fila (ver admin/celulas/reunion.php, reunion_general.php y             */
/* admin/capacitacion/asistencia.php). */
/* ---------------------------------------------------------------------- */
.switch-asistencia .form-check-input {
    cursor: pointer;
}

.switch-asistencia .form-check-input:checked {
    background-color: #198754;
    border-color: #198754;
}

.switch-asistencia .form-check-input:not(:checked) {
    background-color: #dc3545;
    border-color: #dc3545;
}

.switch-asistencia .form-check-input:not(:checked) ~ .form-check-label {
    color: #dc3545;
}