/* ==========================================================
   1. VARIABLES Y RESET
   ========================================================== */
:root { 
    --font-main: 'Plus Jakarta Sans', sans-serif; 
    --logo-azul: #0A2342;
    --logo-celeste: #00AEEF;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { 
    overflow: hidden; /* Bloquea el scroll de la página entera */
    width: 100%; 
    height: 100vh; /* Altura exacta de la pantalla */
    height: 100dvh; /* Altura dinámica (ignora barras del navegador en móvil) */
}

body {
    font-family: var(--font-main);
    background: #eef2f6; 
    color: #102a43;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column; /* Pone la foto arriba y el panel abajo */
    min-height: 100vh;
}

html.dark body {
    background: var(--logo-azul); /* Azul oscuro exacto del logo */
    color: white;
}

/* ==========================================================
   2. FONDO DEL DOCTOR Y AMBIENTE
   ========================================================== */
.doctor-bg {
    position: relative; 
    top: 0; left: 0;
    width: 100%;
    height: 35vh; 
    background-image: url("../assets/avatar.png");
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    z-index: 1;
    /* Efecto Ken Burns (Respiración sutil) */
    transform-origin: center center; 
    animation: subtleBreath 30s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    opacity: 0.8; /* Nivel de transparencia etéreo */
    flex-shrink: 0; /* Evita que el flexbox la aplaste */
}
html.dark .doctor-bg {
    mix-blend-mode: screen; 
}

.noise-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 2; opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}
html.dark .noise-overlay { opacity: 0.04; }

/* === ORBES DE LUZ SUTILES (Efecto CSS) === */
.light-orb {
    position: fixed; border-radius: 50%; pointer-events: none; z-index: 2;
    filter: blur(80px); opacity: 0.15;
}
.orb-1 {
    width: 400px; height: 400px; background: var(--logo-celeste);
    top: -100px; left: -100px; animation: floatOrb1 25s ease-in-out infinite;
}
.orb-2 {
    width: 300px; height: 300px; background: #e0f2fe;
    bottom: -50px; right: 0%; animation: floatOrb2 30s ease-in-out infinite;
}
/* En modo oscuro, se vuelven un susurro de luz */
html.dark .orb-1 { background: var(--logo-celeste); opacity: 0.08; }
html.dark .orb-2 { background: var(--logo-celeste); opacity: 0.06; }

@keyframes floatOrb1 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(100px, 50px); }
}
@keyframes floatOrb2 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-80px, -40px); }
}
/* ==========================================================
   3. PANEL FLOTANTE IZQUIERDO (Cristal con Fusión y Borde Sobrio)
   ========================================================== */
.floating-panel {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    /* Aumentamos el padding superior para simular el centrado sin usar justify-content */
    padding: 12vh 24px 32px; /* 12vh arriba lo empuja lo suficiente */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* CAMBIO CLAVE: Anclado arriba, inmune al bug */
    
    /* Cristal Súper Translúcido */
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.7) 100%);
    backdrop-filter: blur(20px) saturate(120%); 
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 12%, black 100%);
    
    margin-top: -60px; 
    border-radius: 0; 
    
    border-left: 1px solid rgba(186, 230, 253, 0.6);
    border-right: 1px solid rgba(186, 230, 253, 0.6);
    border-bottom: 1px solid rgba(186, 230, 253, 0.6);
    border-top: none; 
    
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05), 0 0 20px rgba(186, 230, 253, 0.3);
}
html.dark .floating-panel {
    /* Degradado oscuro usando el azul del logo */
    background: linear-gradient(180deg, rgba(10, 35, 66, 0.05) 0%, rgba(10, 35, 66, 0.4) 35%, rgba(10, 35, 66, 0.8) 100%);
    
    /* Bordesito pastel en modo oscuro (Celeste muy tenue) */
    border-left: 1px solid rgba(125, 211, 252, 0.15);
    border-right: 1px solid rgba(125, 211, 252, 0.15);
    border-bottom: 1px solid rgba(125, 211, 252, 0.15);
    
    /* Sombra difuminada sobria en oscuro */
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(125, 211, 252, 0.1);
}
/* === MODO ESCRITORIO/TABLET (Diseño Asimétrico Dividido) === */
@media (min-width: 768px) {
    body {
        display: flex;
        flex-direction: row; /* Vuelve a lado a lado en PC */
        align-items: stretch;
        overflow: hidden; /* Sigue bloqueado el scroll general */
    }
    .doctor-bg {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: 50%;
        height: 100%;
        background-size: contain;
        background-position: right bottom;
        background-repeat: no-repeat;
        mix-blend-mode: normal;
        filter: drop-shadow(-15px 5px 25px rgba(0, 0, 0, 0.3));
    }
    html.dark .doctor-bg {
        mix-blend-mode: screen;
        filter: drop-shadow(-15px 5px 25px rgba(0, 0, 0, 0.7));
    }

    .floating-panel {
        width: 50%; 
        max-width: 500px; 
        height: 100vh; /* Altura completa en PC */
        flex: none; /* Desactiva el flex 1 para que respete el 50% */
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.5) 60%, rgba(255, 255, 255, 0.1) 100%); 
        border-right: 1px solid rgba(255, 255, 255, 0.5);
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.1);
        border-radius: 0; 
        margin-top: 0;
    }
    html.dark .floating-panel {
        background: linear-gradient(90deg, rgba(10, 35, 66, 0.95) 0%, rgba(10, 35, 66, 0.7) 60%, rgba(10, 35, 66, 0.1) 100%); 
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.5);
    }
}

/* ==========================================================
   4. CABECERA DE PERFIL
   ========================================================== */
.avatar-ring-wrapper { position: relative; display: inline-block; padding: 2px; border-radius: 50%; margin-bottom: 12px; }
.avatar-ring-wrapper::before {
    content: ''; position: absolute; inset: -1px; border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0%, var(--logo-celeste) 30%, transparent 60%, var(--logo-celeste) 80%, transparent 100%);
    animation: spin 60s linear infinite; z-index: 0;
}
html.dark .avatar-ring-wrapper::before { 
    background: conic-gradient(from 0deg, transparent 0%, var(--logo-celeste) 30%, transparent 60%, var(--logo-celeste) 80%, transparent 100%); 
}

.profile-avatar { position: relative; z-index: 1; width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 2px solid #eef2f6; box-shadow: 0 4px 10px rgba(0,0,0,0.1); display: block; }
html.dark .profile-avatar { border: 2px solid var(--logo-azul); box-shadow: 0 0 15px rgba(0, 174, 239, 0.3); }

.brand-name { font-size: 1.5rem; font-weight: 900; line-height: 1.1; color: #102a43; text-shadow: 0 2px 4px rgba(255,255,255,0.5); }
html.dark .brand-name { color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }

.role-text { font-size: 0.875rem; color: var(--logo-celeste); font-weight: 600; margin-top: 4px; }
html.dark .role-text { color: var(--logo-celeste); }

.bio-text { font-size: 0.75rem; margin-top: 8px; text-align: center; color: #475569; text-shadow: 0 1px 2px rgba(255,255,255,0.3); }
html.dark .bio-text { color: #cbd5e1; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

.status-pill { background: rgba(0, 0, 0, 0.05); backdrop-filter: blur(12px); border: 1px solid rgba(0, 0, 0, 0.1); padding: 4px 12px; border-radius: 9999px; font-size: 11px; color: rgba(16, 42, 67, 0.8); margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }
html.dark .status-pill { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); }

/* ==========================================================
   5. BOTONES MÉDICOS (Paleta Logo)
   ========================================================== */
/* Modo Claro: Azul Oscuro del Logo */
.link-btn { 
    border-radius: 9999px; 
    background-color: var(--logo-azul); 
    color: #ffffff; 
    border: 1px solid var(--logo-azul); 
    box-shadow: 0 4px 10px rgba(10, 35, 66, 0.2); 
    transition: all 0.3s ease; 
}

/* Modo Oscuro: Blancos Sólidos */
html.dark .link-btn { 
    background-color: #ffffff; 
    color: var(--logo-azul); 
    border: 1px solid #f1f5f9; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); 
    backdrop-filter: none; 
} 

/* Efectos Hover */
.link-btn:hover { 
    background-color: #1a3a5b; 
    transform: translateY(-2px); 
    box-shadow: 0 6px 15px rgba(10, 35, 66, 0.3); 
} 
html.dark .link-btn:hover { 
    background-color: #f8fafc; 
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3); 
} 

.link-btn:active { transform: scale(0.97) translateY(0); }

/* Botón Destacado (Featured) - Celeste del Logo */
.link-btn-featured { 
    background-color: var(--logo-celeste); 
    color: #ffffff; 
    border: 2px solid var(--logo-celeste); 
    box-shadow: 0 4px 15px rgba(0, 174, 239, 0.3); 
} 
html.dark .link-btn-featured { 
    background-color: var(--logo-celeste); 
    color: #ffffff; 
    border: 2px solid var(--logo-celeste); 
    box-shadow: 0 0 15px rgba(0, 174, 239, 0.4); 
} 
.link-btn-featured:hover { 
    background-color: #0099d4; 
    box-shadow: 0 8px 25px rgba(0, 174, 239, 0.4); 
} 
html.dark .link-btn-featured:hover { 
    background-color: #0099d4; 
    box-shadow: 0 0 25px rgba(0, 174, 239, 0.5); 
}

/* ==========================================================
   6. ELEMENTOS DE BOTONES (Iconos, Texto, Flecha)
   ========================================================== */
.icon-box { 
    width: 36px; height: 36px; 
    background: rgba(255, 255, 255, 0.1); 
    border-radius: 9999px; 
    display: flex; align-items: center; justify-content: center; 
    flex-shrink: 0; 
} 
html.dark .icon-box { 
    background: rgba(10, 35, 66, 0.05); 
} 
.btn-icon { 
    width: 20px; height: 20px; 
    display: flex; align-items: center; justify-content: center; 
} 

/* Colores de Íconos */
.icon-service { color: var(--logo-celeste); } 
html.dark .icon-service { color: var(--logo-celeste); } 

.icon-whatsapp { color: #25D366; } 
html.dark .icon-whatsapp { color: #25D366; } 

.icon-location { color: #FF5252; } 
html.dark .icon-location { color: #FF5252; } 

/* Texto y Flecha */
.link-btn-text { font-weight: 600; font-size: 0.875rem; } 
.link-arrow { 
    width: 18px; height: 18px; 
    color: rgba(255, 255, 255, 0.6); 
    display: block; 
} 
html.dark .link-arrow { 
    color: rgba(10, 35, 66, 0.4); 
} 
html.dark .link-btn-featured .link-arrow { 
    color: rgba(255, 255, 255, 0.8); 
}
/* ==========================================================
   7. BOTÓN DE TEMA Y MODAL
   ========================================================== */
.theme-toggle-btn { 
    position: fixed; top: 24px; right: 24px; z-index: 50; 
    width: 44px; height: 44px; /* Tamaño fijo de círculo */
    padding: 0; /* Quitamos el padding que desajustaba */
    border-radius: 9999px; cursor: pointer; border: none; 
    background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(12px); 
    border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
    transition: transform 0.3s ease; 
    display: flex; align-items: center; justify-content: center; 
    line-height: 0; /* Elimina el espacio fantasma vertical de los íconos */
}
.theme-toggle-btn:hover { transform: scale(1.1); }
html.dark .theme-toggle-btn { background: rgba(10, 35, 66, 0.8); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 4px 15px rgba(0,0,0,0.5); }

.theme-toggle-icon { 
    width: 24px; height: 24px; 
    display: inline-flex; align-items: center; justify-content: center;
    color: #102a43; 
}
html.dark .theme-toggle-icon { color: #ffffff; }
.modal-backdrop { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); z-index: 100; display: flex; justify-content: center; align-items: center; padding: 1rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; }
.modal-backdrop.active { opacity: 1; pointer-events: auto; }
.modal-surface { max-width: 500px; width: 100%; max-height: 85vh; overflow-y: auto; padding: 2rem; border-radius: 1.5rem; transform: scale(0.9); transition: transform 0.3s ease; background: #ffffff; box-shadow: 0 20px 50px rgba(0,0,0,0.2); }
    /* Cabecera fija del Modal (Inmune al scroll) */
    .modal-header { 
        position: sticky; 
        top: -2rem; 
        margin: -2rem -2rem 1.5rem -2rem; /* Expande la cabecera a los bordes del modal */
        padding: 1.5rem 2rem; 
        background: #ffffff; 
        z-index: 10; 
        border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
        border-radius: 1.5rem 1.5rem 0 0; /* Respeta los bordes redondeados de arriba */
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
    } 
    html.dark .modal-header { 
        background: var(--logo-azul); 
        border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
    }
.modal-backdrop.active .modal-surface { transform: scale(1); }
html.dark .modal-surface { background: var(--logo-azul); box-shadow: 0 20px 50px rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.1); }
.modal-surface::-webkit-scrollbar { width: 6px; }
.modal-surface::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 10px; }
html.dark .modal-surface::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }

.modal-title { font-size: 1.5rem; font-weight: 900; color: #102a43; } 
html.dark .modal-title { color: #ffffff; }
.modal-subtitle { font-size: 1.125rem; font-weight: 700; color: #102a43; } 
html.dark .modal-subtitle { color: #ffffff; }
.modal-text { font-size: 0.875rem; color: #475569; margin-top: 0.25rem; } 
html.dark .modal-text { color: #cbd5e1; }

/* Categorías del Modal (Ginecología, Obstetricia, etc) */
.modal-category { 
    font-size: 1.125rem; 
    font-weight: 700; 
    color: #102a43; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    margin-bottom: 12px; 
    padding-bottom: 8px; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); 
} 
html.dark .modal-category { 
    color: #ffffff; 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1); 
}

/* Listas de Servicios */
.modal-list { 
    list-style: none; 
    padding-left: 4px; 
}
.modal-list li { 
    font-size: 0.875rem; 
    color: #475569; 
    margin-bottom: 8px; 
    padding-left: 16px; 
    position: relative; 
}
.modal-list li::before { 
    content: '•'; /* Viñeta personalizada */
    color: var(--logo-celeste); 
    font-weight: bold; 
    position: absolute; 
    left: 0; 
}
html.dark .modal-list li { 
    color: #cbd5e1; 
}

/* Items antiguos (por si se usan después) */
.service-item { padding: 1.5rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 
html.dark .service-item { border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.service-item:last-child { border-bottom: none; padding-bottom: 0; } 
.service-item:first-child { padding-top: 0; }

.modal-icon-cyan { color: var(--logo-celeste); } 
html.dark .modal-icon-cyan { color: var(--logo-celeste); }
.modal-close-btn { background: transparent; border: none; cursor: pointer; padding: 8px; border-radius: 9999px; transition: background 0.2s; } 
.modal-close-btn:hover { background: rgba(0,0,0,0.05); } 
html.dark .modal-close-btn:hover { background: rgba(255,255,255,0.1); }
.modal-close-icon { width: 24px; height: 24px; color: #102a43; } 
html.dark .modal-close-icon { color: #ffffff; }
/* ==========================================================
   8. ANIMACIONES Y UTILIDADES
   ========================================================== */
.footer-bottom { 
    margin-top: auto; 
    padding-top: 1.5rem; 
    text-align: center; 
    font-size: 10px; 
    font-weight: 500; 
    color: #64748b; /* Gris oscuro legible en modo claro */
    z-index: 10;
    position: relative;
}
html.dark .footer-bottom { 
    color: rgba(255, 255, 255, 0.4); /* Gris claro legible en modo oscuro */
}

/* El nombre de tu agencia resaltado */
.footer-brand { 
    font-weight: 700; 
    color: var(--logo-azul); /* Azul del logo en modo claro */
}
html.dark .footer-brand { 
    color: var(--logo-celeste); /* Celeste del logo en modo oscuro */
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.fade-in-up { opacity: 0; transform: translateY(20px); animation: fadeInUp 0.6s ease-out forwards; }
@keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } }

/* Animación de Respiración (Foto Doctor) - Sutil y Natural */
@keyframes subtleBreath {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.015); } /* Crecimiento mínimo del 1.5% */
}