/* ========================================================== */
/* VARIABLES DE COLOR */
/* ========================================================== */
:root {
    --color-principal: #1DD158;          /* Verde brillante (Acento) */
    --color-secundario: #FF4DF6;         /* Magenta (Acento secundario) */
    --color-primario-oscuro: #004D20;    /* Verde oscuro (Textos y Nav) */
    --color-fondo: #f5f7f5;              /* Fondo fuera del contenedor principal */
    --color-texto: #343a40;
    --color-tutorial-azul: #007bff;      /* Azul para el ícono de cita */
    --color-tutorial-verde: #28a745;     /* Verde para el ícono de pago */
}

/* ========================================================== */
/* GLOBAL / BODY / HTML */
/* ========================================================== */
html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: var(--color-fondo);
    color: var(--color-texto);
    padding-top: 80px; 

    /* SOLUCIÓN FINAL PARA PEGAR EL FOOTER AL FONDO DE LA PANTALLA */
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; /* OBLIGA al body a usar la altura de la ventana */
    margin: 0; /* Asegura que el body no tenga margen propio */
}

/* ========================================================== */
/* CONTENEDOR PRINCIPAL - ¡Cambio clave para el "sticky footer"! */
/* ========================================================== */
.main-wrapper {
    background-color: white;
    border-radius: 20px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
    max-width: 1400px;
    width: 95%;
    
    /* CAMBIO CRÍTICO: 
       Establece el margen inferior a 0. Esto permite que flex-grow use todo el espacio
       hasta el footer. El espacio gris (fondo) es el resultado de flex-grow.
    */
    margin: 20px auto 0 auto; 
    
    overflow: hidden;
    
    /* ESTO EMPUJA EL FOOTER Y CREA EL ESPACIO GRIS */
    flex-grow: 1; 
}

/* ========================================================== */
/* HEADER DE NAVEGACIÓN (FIJO) */
/* ========================================================== */
.top-header {
    background-color: var(--color-principal);
    color: white;
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1030;
}

/* ========================================================== */
/* LOGO Y ÁREA DE TEXTO DEL HEADER */
/* ========================================================== */
.logo-area {
    display: flex;
    align-items: center;
    color: white;
    text-decoration: none;
}

.logo-text-highlight {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: white;
    white-space: nowrap;
}

/* Logo como imagen */
.logo-img {
    width: 40px;
    height: 40px;
    margin-right: 8px;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
}

/* ========================================================== */
/* ENLACES DE NAVEGACIÓN GENERALES */
/* ========================================================== */
.top-header .nav-link {
    color: white;
    font-weight: 500;
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
    border-radius: 20px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.top-header .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/* Enlace destacado */
.top-header .nav-link-destacado {
    font-weight: 700;
}

/* ========================================================== */
/* AJUSTES RESPONSIVE NAVIGATION (Pantallas grandes) */
/* ========================================================== */
@media (min-width: 992px) {
    .top-header .container-fluid > .row {
        align-items: center;
    }
    
    .top-header .navbar-collapse {
        flex-grow: 0;
    }

    .top-header .navbar-nav {
        margin-left: auto !important;
        display: flex;
        align-items: center;
    }

    .logo-area .logo-img {
        vertical-align: middle;
    }
}

/* ========================================================== */
/* FOOTER MINIMALISTA */
/* ========================================================== */
.site-footer-minimal {
    background-color: var(--color-principal); /* #1DD158 (Verde) */
    padding: 15px 0;
    width: 100%; /* Asegura ancho completo */
    margin-top: 0; /* Asegura que no haya margen superior en el footer */
}

/* Estilo alternativo de footer (mantenido) */
.bottom-footer {
    background-color: #333;
    color: #c0d9ff;
    padding: 15px 0;
    width: 100%;
    margin-top: auto;
}

.copyright-text-minimal {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 300;
    margin: 0;
}

/* Reglas duplicadas mantenidas al final para consistencia */
.site-footer-minimal {
    background-color: var(--color-principal); 
    padding: 15px 0;
    width: 100%; 
}

.copyright-text-minimal {
    color: #ffffff;
    font-size: 0.9rem;
    margin: 0;
    font-weight: 400;
}