/*
  ========================================================
  Tema Oficial - MediSuite Web
  Paleta: "Confianza Tecnológica"
  ========================================================
*/

:root {
    /* 1. El Puente (Color de Interacción GIN - CTAs principales) */
    --ms-blue-gin: #2582FF;
    --ms-blue-gin-hover: #1C6ADB; /* Tono ligeramente más oscuro para el hover */
    /* 2. La Identidad (Colores Core de MediSuite - Headers y Acentos) */
    --ms-navy-slate: #0F172A;
    --ms-teal-medical: #0D9488;
    --ms-cyan-medical: #06B6D4;
    /* 3. La Base (Fondos y Textos compartidos con GIN) */
    --ms-bg-primary: #FFFFFF;
    --ms-bg-secondary: #F4F7F9;
    --ms-text-main: #334155;
    --ms-text-muted: #64748B;
    /* Extras funcionales */
    --ms-border-color: #E2E8F0; /* Para bordes suaves en tarjetas de precios o tablas */
}

/* =========================================
   Estilos Base de Etiquetas
   ========================================= */
body {
    background-color: var(--ms-bg-primary);
    color: var(--ms-text-main);
    /* Inter o Roboto le dan un toque muy limpio a los sistemas SaaS */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ms-navy-slate);
    font-weight: 700;
    line-height: 1.2;
}

p {
    color: var(--ms-text-main);
    line-height: 1.6;
}

/* =========================================
   Clases de Utilidad (Para usar en tus componentes Razor)
   ========================================= */

/* Fondos */
.bg-medisuite-main {
    background-color: var(--ms-bg-primary);
}

.bg-medisuite-light {
    background-color: var(--ms-bg-secondary);
}

.bg-medisuite-navy {
    background-color: var(--ms-navy-slate);
    color: var(--ms-bg-primary);
}

/* Textos */
.text-medisuite-navy {
    color: var(--ms-navy-slate);
}

.text-medisuite-teal {
    color: var(--ms-teal-medical);
}

.text-medisuite-cyan {
    color: var(--ms-cyan-medical);
}

.text-medisuite-gin {
    color: var(--ms-blue-gin);
}

.text-muted {
    color: var(--ms-text-muted);
}

/* =========================================
   Botones (Llamados a la Acción)
   ========================================= */
.btn-medisuite-primary {
    background-color: var(--ms-blue-gin);
    color: #FFFFFF;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem; /* Mantiene la redondez amigable de la UI del GIN */
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

    .btn-medisuite-primary:hover {
        background-color: var(--ms-blue-gin-hover);
        color: #FFFFFF;
    }

.btn-medisuite-secondary {
    background-color: transparent;
    color: var(--ms-navy-slate);
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    border: 2px solid var(--ms-navy-slate);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

    .btn-medisuite-secondary:hover {
        background-color: var(--ms-navy-slate);
        color: #FFFFFF;
    }

/* =========================================
   Tarjetas (Ideal para los paquetes y características)
   ========================================= */
.medisuite-card {
    background-color: var(--ms-bg-primary);
    border: 1px solid var(--ms-border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
    /* Sombra muy sutil para dar elevación y modernidad */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .medisuite-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    }


/* =========================================
   Responsive Design (Menú Lateral Móvil)
   ========================================= */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: block;
        z-index: 1002; /* Se asegura de estar por encima del menú lateral */
        position: relative;
    }

    /* El menú ahora es un panel fijo a la derecha */
    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%; /* Lo esconde fuera de la pantalla a la derecha */
        width: 280px; /* Ancho del menú lateral */
        height: 100vh;
        background-color: var(--ms-bg-primary);
        flex-direction: column;
        align-items: flex-start;
        padding: 5rem 2rem 2rem 2rem; /* Espacio arriba para no tapar con el botón hamburguesa */
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        transition: right 0.3s ease-in-out; /* Animación de deslizamiento suave */
        z-index: 1001; /* Por encima del resto del sitio */
        margin-top: 0;
        box-sizing: border-box;
    }

        /* Clase que se activa con JS para deslizarlo hacia adentro */
        .nav-menu.open {
            right: 0;
        }

    .nav-link {
        font-size: 1.125rem; /* Letras un poco más grandes para tocar con el dedo */
        padding: 0.5rem 0;
        width: 100%;
        border-bottom: 1px solid var(--ms-border-color);
        box-sizing: border-box;
    }

    .nav-menu .btn-medisuite-primary {
        width: 100%;
        text-align: center;
        margin-top: 1rem;
        box-sizing: border-box;
    }

    .logo-img {
        height: 40px;
    }

    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    /* Fondo oscuro semitransparente (Overlay) */
    /* Fondo oscuro semitransparente (Overlay) */
    .menu-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(15, 23, 42, 0.6); /* Azul marino semitransparente */
        z-index: 90; /* <--- ¡ESTE ES EL CAMBIO! */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

        /* Cuando el overlay se activa */
        .menu-overlay.open {
            opacity: 1;
            visibility: visible;
        }
}