/* --- VARIABLES --- */
:root {
    --primary-color: #003366; /* Azul Bootstrap por defecto, podemos cambiarlo a #00a8cc para tono cian/radiología */
    --secondary-color: #6c757d;
    --dark-bg: #212529;
    --light-bg: #f8f9fa;
}

/* --- GENERAL --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

/* --- NAVBAR --- */
.navbar-brand strong {
    font-size: 1.5rem;
    letter-spacing: 1px;
}

/* --- BANNER PRINCIPAL (HERO) --- */

.hero-banner {
    /* Fondo y posición */
    background: url('../img/bannerPrincipal.png') no-repeat center center;
    background-size: cover;
    background-color: #1e293b;
    position: relative;
    
    /* Flexbox para centrar */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* ALTURA Y ESPACIADO CORREGIDOS */
    min-height: 75vh; /* Más alto para dar aire */
    padding-top: 120px; /* Espacio para el menú superior */
    
    /* ESTO ES LO IMPORTANTE: Espacio abajo para que las tarjetas tengan donde "sentarse" */
    padding-bottom: 180px; 
}

/* La capa oscura semitransparente sobre la foto */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradiente moderno: De azul muy oscuro a negro */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(13, 110, 253, 0.3) 100%);
    z-index: 1; /* Se pone encima de la foto pero debajo del texto */
}

/* Ajuste para móviles: en celular sí conviene que sea un poco más alto para que quepa el texto */
@media (max-width: 768px) {
    .hero-banner {
        height: auto;
        padding-bottom: 60px;
    }
}

/* --- CARDS DE SERVICIOS --- */
.card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

.card i {
    color: var(--primary-color);
}

/* --- BOTONES --- */
.btn-primary {
    padding: 10px 25px;
    font-weight: 600;
}

/* --- FOOTER --- */
footer a:hover {
    color: white !important;
    text-decoration: underline !important;
}

/* --- MENÚ CÁPSULA FLOTANTE --- */

.floating-nav {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);   
    background: rgba(255, 255, 255, 0.5); 
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    padding: 8px 15px;
    z-index: 1050;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
    flex-wrap: nowrap !important;
    width: auto;       /* Que se estire según el contenido */
    min-width: 50%;    /* Pero que tenga un tamaño mínimo decente */
    max-width: 98%;
    display: flex;
    justify-content: space-between;
}

.floating-nav .btn {
    background-color: #fd7e14 !important; /* Naranja Corporativo */
    border-color: #fd7e14 !important;
    color: #ffffff !important;
    font-weight: 700;
    padding: 8px 25px; /* Un poco más ancho para destacar */
    box-shadow: 0 4px 10px rgba(253, 126, 20, 0.3); /* Resplandor naranja */
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-left: 10px;
}

.floating-nav .btn:hover {
    background-color: #e36a0d !important; /* Un naranja un poco más intenso al pasar el mouse */
    border-color: #e36a0d !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(253, 126, 20, 0.5);
}

/* --- ENLACES DEL MENÚ --- */
.navbar-nav .nav-link {
    color: #000000 !important; /* Negro para máximo contraste */
    font-weight: 600;
    font-size: 0.9rem;
    padding: 8px 16px !important;
    margin: 0 2px;
    border-radius: 30px;
    transition: all 0.3s ease;
    white-space: nowrap;
}

/* EL EFECTO BURBUJA ACTIVA (Como la imagen) */
/* Cuando el link tiene la clase 'active', se le pone el fondo azul */
.navbar-nav .nav-link.active {
    /* Usamos un Azul Marino muy oscuro y elegante */
    background-color: #052c65; 
    
    color: #ffffff !important;
    font-weight: 600;
    
    /* Sombra oscura acorde al color */
    box-shadow: 0 4px 12px rgba(5, 44, 101, 0.4); 
}

/* Efecto al pasar el mouse por los ítems inactivos (opcional, un fondo gris claro) */
.navbar-nav .nav-link:hover:not(.active) {
    background-color: rgba(255, 255, 255, 0.4); 
    color: #000 !important;
}

/* --- BOTÓN HAMBURGUESA (MÓVIL) --- */
.navbar-toggler {
    border: none;
    padding: 5px;
}
.navbar-toggler:focus {
    box-shadow: none;
}

/* --- AJUSTE RESPONSIVE (MÓVIL) --- */
@media (max-width: 991px) {
    .floating-nav {
        border-radius: 20px; /* Menos redondo en celular */
        padding: 10px;
        flex-wrap: wrap; /* Permitir que el menú caiga abajo */
        background: rgba(15, 23, 42, 0.85); /* Un poco más oscuro en móvil para leer */
    }
    
    .navbar-collapse {
        width: 100%;
        margin-top: 10px;
        background: transparent;
        border-top: 1px solid rgba(255,255,255,0.1);
        padding-top: 10px;
    }
    
    .navbar-nav .nav-link {
        text-align: center;
        margin-bottom: 5px;
    }
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Ajuste para el botón de Doctores */
/* Hacemos que el botón de CTA se distinga un poco, quizás con un borde en lugar de fondo sólido si no es la página activa, o lo dejamos sólido siempre.
   Por ahora, dejémoslo como está, ya se ve bien como "burbuja" permanente. */
.navbar-nav .btn-primary {
    padding: 10px 24px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.4);
}

/* --- LOGO IMAGEN EN NAVBAR --- */

/* Quitamos el margen derecho extra del contenedor de la marca */
.navbar-brand {
    margin-right: 20px;
    display: flex;
    align-items: center;
}

/* Estilos para la imagen del logo */
.navbar-logo {
    max-height: 45px;
    width: auto;
}

.floating-nav {
    /* Aseguramos que los items dentro de la barra (logo y menú) se alineen al centro vertical */
    display: flex;
    align-items: center; 
    
    /* Si aumentamos el logo, quizás necesitemos ajustar el padding de la cápsula */
    padding: 8px 20px; /* Reducimos un poco el padding vertical para compensar el logo grande */
}

/* Opcional: Un pequeño efecto de "respiro" al pasar el mouse sobre el logo */
.navbar-brand:hover .navbar-logo {
    transform: scale(1.05);
}

/* Ajuste para móvil: si el logo es muy ancho, lo achicamos un poco en celulares */
@media (max-width: 400px) {
    .navbar-logo {
        max-height: 32px;
    }
}

/* Ajuste para móviles: Que la cápsula ocupe más ancho */
@media (max-width: 991px) {
    .floating-nav {
        /* En móvil sí necesitamos más opacidad para leer */
        background: rgba(255, 255, 255, 0.9); 
        border-radius: 20px;
        flex-wrap: wrap;
    }
}




/* --- SECCIÓN GALERÍA --- */

/* Botones de Filtro */
.btn-filter {
    border: 1px solid #ddd;
    color: #555;
    border-radius: 50px;
    padding: 8px 25px;
    background: white;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 500;
}

.btn-filter:hover {
    background: #f1f1f1;
}

/* Estado activo del filtro: AQUÍ USAMOS TU NARANJA */
/* Asumo un naranja tipo #fd7e14 (Bootstrap warning) o tu propio código */
.btn-filter.active {
    background-color: #fd7e14; /* Naranja corporativo */
    color: white;
    border-color: #fd7e14;
    box-shadow: 0 4px 10px rgba(253, 126, 20, 0.4);
}

/* Tarjeta de Galería */
.gallery-card {
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

/* Contenedor de la imagen y efecto Hover */
.img-wrapper {
    position: relative;
    overflow: hidden;
    height: 250px; /* Altura fija para que todas se vean parejas */
}

.img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Recorta la imagen para llenar el espacio sin deformar */
    transition: transform 0.5s ease;
}

.gallery-card:hover .img-wrapper img {
    transform: scale(1.1); /* Zoom suave al pasar el mouse */
}

/* Capa oscura con la lupa */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(13, 110, 253, 0.7); /* Azul traslúcido */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0; /* Invisible por defecto */
    transition: opacity 0.3s ease;
}

.gallery-card:hover .overlay {
    opacity: 1; /* Visible al pasar el mouse */
}

/* --- SECCIÓN EN QUÉ DESTACAMOS --- */

/* Colores personalizados para esta sección */
:root {
    --xdlab-orange: #fd7e14; /* Ajusta este código al naranja exacto de tu logo */
    --xdlab-orange-light: rgba(253, 126, 20, 0.1);
    --xdlab-blue-light: rgba(13, 110, 253, 0.1);
}

.text-orange {
    color: var(--xdlab-orange) !important;
}

/* Diseño de la Tarjeta */
.feature-card {
    background: #fff;
    border: 1px solid #f0f0f0;
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 2;
}

/* Efecto Hover: La tarjeta sube y aparece una sombra naranja/azul sutil */
.feature-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    border-color: transparent;
}

/* Cajita del Icono */
.icon-box {
    width: 70px;
    height: 70px;
    border-radius: 20px; /* Bordes semi-cuadrados modernos (Squircle) */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Fondos suaves para los iconos */
.bg-orange-light { background-color: var(--xdlab-orange-light); }
.bg-blue-light { background-color: var(--xdlab-blue-light); }

/* Interacción: Al pasar el mouse por la tarjeta, el icono cambia de color */
.feature-card:hover .icon-box.bg-blue-light {
    background-color: var(--primary-color);
    color: white !important;
}

.feature-card:hover .icon-box.bg-orange-light {
    background-color: var(--xdlab-orange);
    color: white !important;
}

/* Fondo decorativo sutil (Blob) */
.blob-bg {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(13, 110, 253, 0.03) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    pointer-events: none;
}

/* --- SECCIÓN TESTIMONIOS (DARK MODE) --- */

.testimonial-section {
    background-color: #0f172a; /* Azul muy oscuro (casi negro) */
    overflow: hidden;
}

/* Fondo degradado sutil */
.overlay-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Degradado de azul oscuro a un tono un poco más claro */
    background: linear-gradient(180deg, rgba(15, 23, 42, 1) 0%, rgba(13, 62, 125, 0.4) 100%);
    z-index: 1;
}

/* Icono de Comillas Gigante */
.quote-icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.1); /* Blanco muy transparente */
    margin-bottom: 20px;
}

/* Texto del testimonio */
.testimonial-card p {
    font-size: 1.25rem;
    line-height: 1.8;
}

/* Foto del Doctor (Avatar) */
.avatar-img {
    width: 70px;
    height: 70px;
    border-radius: 50%; /* Círculo perfecto */
    object-fit: cover;
    border: 3px solid transparent; /* Base para el borde */
}

/* Borde naranja para el avatar (Tu branding) */
.border-orange {
    border-color: var(--xdlab-orange) !important;
}

/* Botones de navegación (Flechas) personalizadas */
.carousel-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.carousel-control-prev:hover .carousel-control-btn,
.carousel-control-next:hover .carousel-control-btn {
    background: var(--xdlab-orange); /* Se pone naranja al pasar el mouse */
    color: white;
}

/* Los puntitos indicadores */
.carousel-indicators [data-bs-target] {
    background-color: var(--xdlab-orange);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin: 0 5px;
    opacity: 0.5;
}

.carousel-indicators .active {
    opacity: 1;
    transform: scale(1.2);
}

/* --- FOOTER --- */

.footer-dark {
    background-color: #0b1120; /* Un tono casi negro, muy elegante */
    font-size: 0.95rem;
}

/* Enlaces del Footer */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Efecto Hover: Se pone blanco y se mueve un poco a la derecha */
.footer-links a:hover {
    color: var(--xdlab-orange); /* Naranja */
    transform: translateX(5px);
}

/* Iconos de Contacto */
.contact-info i {
    width: 20px; /* Ancho fijo para que el texto se alinee bien */
}

/* Botones de Redes Sociales */
.social-btn {
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: white;
    text-decoration: none;
    transition: all 0.3s ease;
}

.social-btn:hover {
    background-color: var(--xdlab-orange);
    color: white;
    transform: translateY(-3px);
}

/* Truco para el logo en el footer */
/* Si tu logo tiene letras negras y no tienes versión blanca, el filtro CSS 
   brightness(0) invert(1) lo vuelve blanco automáticamente en el HTML */

/* --- PÁGINAS INTERNAS --- */

/* Header más corto para Nosotros, Servicios, etc. */
.page-header {
    height: 45vh; /* Menos alto que el del home (65vh) */
    min-height: 350px;
    background: url('../img/header-nosotros.jpg') no-repeat center center;
    background-size: cover;
    margin-top: 0;
    padding-top: 80px; /* Espacio para el menú flotante */
}

/* Reutilizamos el overlay oscuro del home, pero definimos la clase por si acaso */
.overlay-dark {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.7); /* Azul oscuro semitransparente */
    z-index: 1;
}

/* --- TARJETAS MISIÓN / VISIÓN --- */
.mission-card {
    border-top: 5px solid var(--primary-color); /* Borde azul arriba por defecto */
    transition: transform 0.3s ease;
}

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

/* La tarjeta de Visión tiene el borde superior Naranja */
.mission-card.vision-border {
    border-top-color: var(--xdlab-orange);
}

/* Iconos redondos */
.icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- VALORES --- */
.value-item {
    padding: 20px;
    transition: all 0.3s ease;
}

.value-item:hover {
    background: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-radius: 15px;
    transform: translateY(-5px);
}

/* Color Naranja de fondo para decoración */
.bg-orange {
    background-color: var(--xdlab-orange);
}

/* --- PÁGINA DE SERVICIOS --- */

/* Listas con checkmarks */
.check-list li {
    margin-bottom: 8px;
    font-size: 0.95rem;
    color: #555;
}

/* Marco decorativo para imágenes de servicios */
.img-frame-tech {
    position: relative;
    padding: 10px;
    border: 2px dashed #e0e0e0; /* Un borde punteado técnico */
    border-radius: 20px;
}

.img-frame-tech img {
    border-radius: 15px; /* La imagen interna sigue redondeada */
}

/* Etiqueta flotante sobre la imagen (Ej: "CBCT 3D") */
.tech-badge {
    position: absolute;
    bottom: 25px;
    right: 25px;
    background-color: var(--primary-color);
    color: white;
    padding: 8px 20px;
    border-radius: 50px;
    font-weight: bold;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    z-index: 2;
}

.tech-badge.bg-orange {
    background-color: var(--xdlab-orange) !important;
}

/* Tarjetas de Paquetes */
.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Botón Outline Naranja (Personalizado) */
.btn-outline-orange {
    color: var(--xdlab-orange);
    border-color: var(--xdlab-orange);
}

.btn-outline-orange:hover {
    background-color: var(--xdlab-orange);
    color: white;
}


/* --- BLOG Y NOTICIAS --- */

/* Efecto Zoom en imagen de tarjeta */
.img-hover-zoom {
    height: 220px; /* Altura fija para uniformidad */
    overflow: hidden; /* Esconde lo que se salga al hacer zoom */
    position: relative;
    border-radius: 10px 10px 0 0;
}

.img-hover-zoom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .img-hover-zoom img {
    transform: scale(1.1); /* Zoom suave */
}

/* Tarjeta del Blog */
.blog-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
}

/* Badge de Categoría en Artículo Destacado */
.category-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    padding: 5px 15px;
    color: white;
    font-weight: bold;
    border-radius: 4px;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1px;
}

/* Sidebar: Links de Categorías */
.blog-categories li {
    margin-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 10px;
}

.blog-categories li:last-child {
    border-bottom: none;
}

.blog-categories a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    display: block;
    transition: color 0.2s;
}

.blog-categories a:hover {
    color: var(--primary-color);
}

/* Botón Naranja Sólido (para el Newsletter) */
.btn-orange {
    background-color: var(--xdlab-orange);
    color: white;
    border: none;
}

.btn-orange:hover {
    background-color: #e66b0d; /* Un naranja un poquito más oscuro */
    color: white;
}

/* Paginación Personalizada */
.page-link {
    color: var(--primary-color);
    border: none;
    margin: 0 5px;
    border-radius: 50% !important; /* Botones redondos */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}


/* --- PÁGINA DE CONTACTO --- */

/* Iconos Cuadrados (para dirección, teléfono, etc.) */
.icon-square {
    width: 50px;
    height: 50px;
    border-radius: 12px; /* Cuadrado con bordes suaves */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.icon-square:hover {
    transform: rotate(10deg); /* Pequeña animación divertida */
}

/* Campos del Formulario */
.form-control-lg {
    font-size: 0.95rem; /* No tan gigante, pero sí cómodo */
    padding: 12px 20px;
}

.form-control:focus {
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1); /* Resplandor azul suave */
}

/* Mapa */
.map-container {
    position: relative;
    width: 100%;
    height: 500px;
}

/* Tarjetita flotante sobre el mapa */
.map-card-float {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 200px;
    z-index: 10;
    border-left: 4px solid var(--xdlab-orange); /* Detalle naranja */
}

/* --- MODIFICACIÓN NAV PARA EFECTO FLUIDO --- */

/* --- MENÚ CÁPSULA ESTILO ROBUSTO --- */

/* Estilos base del enlace */
.navbar-nav .nav-link {
    color: #444 !important;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 10px 24px !important;
    border-radius: 30px; /* Forma redonda */
    transition: all 0.3s ease;
    margin: 0 2px;
    position: relative;
    z-index: 1;
}

/* LA BURBUJA AZUL (ESTADO ACTIVO) */
/* Esto asegura que SIEMPRE se vea azul si estás en la página correcta */
.navbar-nav .nav-link.active {
    background-color: var(--primary-color);
    color: #fff !important;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}

/* Hover suave para los que no están activos */
.navbar-nav .nav-link:hover:not(.active) {
     background-color: rgba(0,0,0, 0.05);
     color: #000 !important;
     transform: scale(1.05); /* Pequeño efecto de crecimiento */
}

/* Aseguramos que el texto esté por encima de la burbuja */
.navbar-nav .nav-link {
    position: relative;
    z-index: 2; 
}

/* --- TRANSICIONES SWUP --- */

/* Estado normal */
.transition-fade {
    transition: 0.4s;
    opacity: 1;
    transform: translateY(0);
}

/* Estado "Cargando" (cuando la página se está yendo) */
html.is-changing .transition-fade {
    opacity: 0;
    transform: translateY(10px); /* Un pequeño desplazamiento hacia abajo */
}

/* Opcional: Mantener el footer fijo abajo si el contenido es corto */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
main {
    flex: 1;
}

/* --- CONTACTO ESTILO "MASTER CARD" --- */

/* 1. Fondo de la Sección */
.contact-bg {
    background-color: #f4f7f6; /* Gris muy suave, casi blanco, para que resalte la tarjeta */
    min-height: 80vh; /* Asegura que ocupe buen espacio */
    display: flex;
    align-items: center; /* Centra la tarjeta verticalmente si hay espacio */
}

/* 2. La Tarjeta Maestra */
.contact-master-card {
    border-radius: 30px; /* Bordes muy modernos */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); /* Sombra difusa premium */
}

/* 3. Columna Izquierda (Azul Brand) */
.bg-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%) !important; /* Degradado sutil */
    overflow: hidden; /* Para recortar los círculos decorativos */
}

/* Decoración de fondo (Círculos abstractos) */
.circle-decoration {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}
.top-circle { width: 200px; height: 200px; top: -50px; right: -50px; }
.bottom-circle { width: 300px; height: 300px; bottom: -100px; left: -100px; }

/* Iconos con efecto vidrio */
.icon-glass {
    width: 45px;
    height: 45px;
    background: rgb(255, 255, 255);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: white;
}
/* 4. Widget de Mapa */
.map-widget {
    border: 4px solid rgba(255, 255, 255, 0.2); /* Marco semitransparente */
    transition: transform 0.3s ease;
}
.map-widget:hover {
    transform: translateY(-5px);
}
.map-widget iframe {
    filter: grayscale(100%); /* Mapa elegante en B/N */
    transition: filter 0.3s;
}
.map-widget:hover iframe {
    filter: grayscale(0%); /* Color al pasar el mouse */
}

/* Texto flotante sobre el mapa */
.map-overlay-text {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 0.75rem;
    text-align: center;
    padding: 5px;
    opacity: 0;
    transition: opacity 0.3s;
}
.map-widget:hover .map-overlay-text { opacity: 1; }


/* 5. Inputs Modernos (Estilo Apple/Google) */
.modern-input {
    background-color: #f8f9fa;
    border: 1px solid #eee;
    border-radius: 12px;
    height: 55px; /* Inputs más altos son más fáciles de clickear */
}
.modern-input:focus {
    background-color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1);
}
textarea.modern-input {
    height: auto !important; /* Para el textarea */
    padding-top: 15px;
}

/* 6. Botones de Selección (Paciente/Doctor) */
.btn-selection {
    border: 2px solid #f1f1f1;
    color: #6c757d;
    font-weight: 600;
    padding: 12px;
    border-radius: 12px;
    transition: all 0.2s;
    background: #fff;
}

.btn-selection:hover {
    background: #f8f9fa;
    border-color: #ddd;
}

/* Estado seleccionado */
.btn-check:checked + .btn-selection {
    background-color: rgba(13, 110, 253, 0.1);
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.2);
}

/* Animación Hover botón enviar */
.hover-up { transition: transform 0.2s; }
.hover-up:hover { transform: translateY(-3px); }


/* --- BLOG PREMIUM STYLES --- */

/* Fondo gris suave para resaltar las tarjetas blancas */
.bg-light-gray {
    background-color: #f8f9fa;
}

/* Helper para imágenes */
.object-fit-cover {
    object-fit: cover;
}

/* Tarjeta Hover (Efecto de elevación suave) */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* Tarjetas Grid Modernas */
.hover-card-modern {
    background: #fff;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.hover-card-modern:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
}

/* Wrapper de imagen con Zoom */
.img-wrapper-modern {
    height: 240px;
    overflow: hidden;
}
.img-wrapper-modern img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.hover-card-modern:hover .img-wrapper-modern img {
    transform: scale(1.08); /* Zoom sutil y elegante */
}

/* Lista de Categorías (Sidebar) */
.category-list li {
    margin-bottom: 12px;
}
.category-list a {
    text-decoration: none;
    color: #555;
    font-weight: 500;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.2s;
    background: transparent;
}
.category-list a:hover {
    background-color: #f1f5f9; /* Gris azulado muy tenue */
    color: var(--primary-color);
}
.text-primary-light {
    color: #6ea8fe; /* Azul más claro para iconos */
}

/* Widget Newsletter (Degradado de Marca) */
.bg-brand-gradient {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
}

/* Paginación Redonda */
.pagination .page-link {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-weight: 600;
    margin: 0 3px;
    background: white;
}
.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    color: white;
}
.pagination .page-item.disabled .page-link {
    background-color: #f8f9fa;
    color: #ccc;
}

/* --- SERVICIOS GRID VISUAL --- */

/* La Tarjeta del Grid */
.service-grid-card {
    position: relative;
    background-color: #000; /* Fondo negro por si la imagen tarda */
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* La Imagen de Fondo */
.bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease; /* Zoom suave */
}

/* Efecto Zoom al pasar el mouse */
.service-grid-card:hover .bg-img {
    transform: scale(1.1);
}

/* Overlay Degradado (Para que el texto se lea) */
.overlay-gradient {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Degradado de transparente a negro abajo */
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.9) 100%);
    pointer-events: none;
}

/* Contenido de Texto */
.service-grid-card .content {
    z-index: 2;
}

/* Icono pequeño cuadrado */
.icon-box-sm {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

/* --- PASOS DEL FLUJO DE TRABAJO --- */
.icon-step {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 800;
}

/* --- NOSOTROS PREMIUM STYLES --- */

/* Decoración de Puntos (Pattern Dots) */
.pattern-dots {
    width: 200px;
    height: 200px;
    background-image: radial-gradient(#dee2e6 2px, transparent 2px);
    background-size: 20px 20px;
    z-index: 0;
    left: -20px; /* Posición ajustada para que asome por la izquierda */
    top: -20px;
}

/* Iconos circulares pequeños (para la lista de pilares) */
.icon-circle-sm {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Iconos medianos cuadrados (para Misión/Visión) */
.icon-box-md {
    width: 60px;
    height: 60px;
    border-radius: 15px; /* Squircle */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

/* Tarjetas de Valores */
.value-card:hover {
    background: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-color: transparent !important;
}

/* Efecto Escala suave para botón final */
.hover-scale {
    transition: transform 0.3s ease;
}
.hover-scale:hover {
    transform: scale(1.05);
}

/* Clase de utilidad para transiciones */
.transition-all {
    transition: all 0.3s ease;
}

/* --- CTA CARD STYLES --- */

/* Botón blanco sólido para fondos oscuros/azules */
.btn-white {
    background-color: #ffffff;
    color: var(--primary-color);
    border: none;
    transition: all 0.3s ease;
}

.btn-white:hover {
    background-color: #f8f9fa;
    transform: translateY(-3px); /* Se eleva un poquito */
    box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Sombra más fuerte al subir */
}

/* Asegurar que el gradiente de marca esté definido (si no lo pusiste en el paso del Blog) */
.bg-brand-gradient {
    background: linear-gradient(135deg, #0d6efd 0%, #052c65 100%);
}

/* Ajuste de opacidad para decoración */
.opacity-10 {
    opacity: 0.1;
}

/* --- ESTILOS HOME MODERNOS --- */

/* 1. Hero Refinado */
.hero-banner .container {
    margin-top: 60px; /* Empuja el texto hacia abajo extra para separarlo del menú */
}

.hero-overlay-gradient {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Gradiente radial mejorado: Oscuro en bordes, transparente en el centro */
    background: radial-gradient(circle at center, rgba(15, 23, 42, 0.5) 0%, rgba(15, 23, 42, 0.95) 100%);
    z-index: 1;
}

/* Ajuste para pantallas pequeñas (Móvil) */
@media (max-width: 991px) {
    .hero-banner {
        height: auto;       /* Altura automática en celular */
        padding-top: 140px; /* Más espacio arriba porque el menú ocupa más */
        padding-bottom: 80px;
    }
    
    .hero-banner .container {
        margin-top: 0;
    }
}

/* Efecto Blur para Badges (Vidrio esmerilado) */
.backdrop-blur {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Texto Gradiente (Solo Webkit) */
.text-gradient-blue {
    background: linear-gradient(to right, #6ea8fe, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Botón Outline Blanco */
.btn-white-outline {
    background-color: rgba(255, 255, 255, 0.1); /* Un poco de fondo */
    border: 2px solid #fff;
    color: #fff;
}

.btn-white-outline:hover {
    background-color: #fff;
    color: var(--primary-color); /* Texto azul al pasar mouse */
    border-color: #fff;
}

/* 2. Tarjetas de Beneficios (Feature Box) */
.feature-box {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.feature-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08) !important;
}

/* Bordes de color sutiles abajo */
.border-bottom-brand { border-bottom: 4px solid var(--primary-color); }
.border-bottom-orange { border-bottom: 4px solid var(--xdlab-orange); }


/* 3. Galería Moderna (Gallery Card) */
.gallery-card-modern {
    cursor: pointer;
    background: #000;
}
.gallery-card-modern img {
    transition: transform 0.6s ease;
    opacity: 0.9;
}
.gallery-card-modern:hover img {
    transform: scale(1.1);
    opacity: 0.6; /* Se oscurece un poco para leer el texto */
}

/* Info flotante sobre la imagen */
.overlay-info {
    position: absolute;
    bottom: 0; left: 0; width: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}
.gallery-card-modern:hover .overlay-info {
    opacity: 1;
    transform: translateY(0);
}

/* Filtros Estilo Cápsula */
.btn-filter-modern {
    border: 1px solid #ddd;
    background: white;
    color: #555;
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
}
.btn-filter-modern:hover, 
.btn-filter-modern.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
}

/* 4. Testimonios Glass (Efecto Vidrio sobre fondo oscuro) */
.glass-card {
    background: rgba(255, 255, 255, 0.05); /* Muy transparente */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Animación de Rebote (Scroll Down) */
.animate-bounce {
    animation: bounce 2s infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0) translateX(-50%);}
    40% {transform: translateY(-10px) translateX(-50%);}
    60% {transform: translateY(-5px) translateX(-50%);}
}

/* Hover suave para CTA final */
.hover-lift-sm {
    transition: transform 0.3s;
}
.hover-lift-sm:hover {
    transform: translateY(-5px);
}

/* --- FOOTER PREMIUM CURVO --- */

.footer-premium {
    background-color: #0f172a; /* Color por defecto (Azul Noche) */
    color: white;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    margin-top: 0 !important;
    overflow: hidden;
    box-shadow: 0 -10px 30px rgba(0,0,0,0.5);
}

/* Enlaces limpios (SIN SUBRAYADO) */
.footer-clean-list li {
    margin-bottom: 12px;
}

.footer-clean-list a {
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none !important; /* ¡ESTO QUITA EL SUBRAYADO! */
    font-size: 0.95rem;
    transition: all 0.3s ease;
    display: inline-block;
}

/* Efecto al pasar el mouse (Hover) */
.footer-clean-list a:hover {
    color: #fff;
    transform: translateX(5px); /* Se mueve un poco a la derecha */
    text-decoration: none !important; /* Asegura que no salga línea tampoco en hover */
}

.footer-on-dark {
    /* El truco: Ponemos un 'box-shadow' gigante hacia arriba del mismo color que la sección anterior */
    /* Esto rellena los triangulitos blancos */
    box-shadow: 0 -50px 0 0 #020b1c; 
    
    /* Opcional: Si usas márgenes, esto asegura que pegue bien */
    margin-top: 0 !important;
}

/* Botones Sociales Circulares */
.social-circle {
    width: 45px;
    height: 45px;
    margin-top: 0px;
    margin-left: 35px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border: 1px solid rgba(255,255,255,0.1);
}

.social-circle:hover {
    background: var(--primary-color);
    color: white;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
    border-color: transparent;
}

/* Caja de Contacto Destacada */
.contact-box {
    /* Efecto vidrio */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Texto hover simple */
.hover-white:hover {
    color: white !important;
}

/* Corrección de la Curva SVG (Opcional si quieres efecto ola) */
/* Si prefieres solo bordes redondos, el border-radius de .footer-premium es suficiente */
.footer-curve {
    display: none; /* Lo ocultamos para un diseño más limpio solo con bordes redondos */
}

/* Ajuste Responsive */
@media (max-width: 768px) {
    .footer-premium {
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        text-align: center;
    }
    
    .social-group {
        justify-content: center;
        margin-bottom: 20px;
    }
    
    .contact-box {
        text-align: left; /* La caja de contacto se ve mejor alineada a la izquierda siempre */
    }
}

/* --- PORTAL DOCTORES STYLES --- */

/* Widget Login Glass (Vidrio sobre fondo oscuro) */
.login-glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Inputs transparentes para el Login (Glass Input) */
.glass-input {
    background: rgba(0, 0, 0, 0.2) !important; /* Fondo oscuro traslúcido */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    border-radius: 12px;
}

.glass-input:focus {
    background: rgba(0, 0, 0, 0.4) !important;
    border-color: var(--xdlab-orange) !important;
    box-shadow: 0 0 0 4px rgba(253, 126, 20, 0.2);
}

.form-floating > label.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Color del placeholder y label en el glass input */
.glass-input::placeholder { color: rgba(255,255,255,0.5); }
.form-floating > .glass-input:focus ~ label,
.form-floating > .glass-input:not(:placeholder-shown) ~ label {
    color: var(--xdlab-orange) !important;
    opacity: 1;
}

/* Botón Naranja Solido (Para Login) */
.btn-orange {
    background-color: var(--xdlab-orange);
    color: white;
    border: none;
    transition: all 0.3s;
}
.btn-orange:hover {
    background-color: #e36a0d;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(253, 126, 20, 0.3);
}

/* Ajuste: que el label no choque con el autocompletado del navegador */
.form-floating > .glass-input:-webkit-autofill {
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s; /* Truco para quitar fondo amarillo de Chrome */
}


/* --- DARK GLASS THEME (Para Portal Doctores) --- */

/* 1. Tarjeta Login Mejorada */
/* --- TARJETA LOGIN "HIGH VISIBILITY GLASS" --- */
.login-glass-card {
    /* 1. Fondo un poco más blanco (10%) para que se note la forma */
    background: rgba(255, 255, 255, 0.1); 
    
    /* 2. Blur potente */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    
    /* 3. Borde muy definido: Blanco semitransparente sólido */
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.6); /* Borde superior más brillante (luz) */
    border-left: 1px solid rgba(255, 255, 255, 0.6); /* Borde izq más brillante */
    
    /* 4. Sombra interna para volumen y externa para profundidad */
    box-shadow: 
        inset 0 0 20px rgba(255, 255, 255, 0.05), /* Brillo interior */
        0 25px 50px -12px rgba(0, 0, 0, 0.8); /* Sombra exterior fuerte */
}

/* 2. Tarjetas de Beneficios (Estilo Vidrio Oscuro) */
.glass-feature-card {
    background: rgba(255, 255, 255, 0.03); /* Casi invisible */
    border: 1px solid rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.glass-feature-card:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* 3. Iconos con Resplandor */
.icon-glass-glow {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 0 20px rgba(0,0,0,0.2); /* Glow oscuro */
}

/* 4. Inputs Glass Refinados */
.glass-input {
    background: rgba(0, 0, 0, 0.3) !important; /* Más oscuro */
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
}
.glass-input:focus {
    background: rgba(0, 0, 0, 0.5) !important;
    border-color: var(--xdlab-orange) !important;
    box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.3);
}

/* 5. Texto con Gradiente Azul (Para el título) */
.text-gradient-blue {
    background: linear-gradient(to right, #4facfe 0%, #00f2fe 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 6. Utilidad para hover blanco */
.hover-white:hover {
    color: white !important;
    background-color: rgba(255,255,255,0.1) !important;
}

/* 7. Animación de subida */
.transition-up {
    transition: transform 0.3s;
}

/* --- CONTACTO DARK GLASS --- */

/* Filtro para el mapa de Google (Lo vuelve oscuro y azulado) */
.map-dark-mode {
    filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%);
    mix-blend-mode: luminosity; /* Ayuda a que se mezcle mejor */
    opacity: 0.8;
    transition: all 0.3s;
}

/* Al pasar el mouse, el mapa se ve normal */
.map-dark-mode:hover {
    filter: invert(0%) hue-rotate(0deg);
    opacity: 1;
    mix-blend-mode: normal;
}

/* Botones de Selección Glass (Paciente/Doctor) */
.btn-glass-select {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    padding: 12px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-glass-select:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
}

/* Estado Seleccionado */
.btn-check:checked + .btn-glass-select {
    background: rgba(13, 110, 253, 0.2); /* Azul transparente */
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.2);
}

/* --- BLOG DARK GLASS STYLES --- */

/* Tarjeta de Blog de Vidrio */
.glass-blog-card {
    background: rgba(255, 255, 255, 0.03); /* Casi transparente */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08); /* Borde sutil */
    transition: all 0.3s ease;
}

/* Hover: Se ilumina un poco y sube */
.glass-blog-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Efecto Zoom en Imágenes */
.transition-transform {
    transition: transform 0.6s ease;
}
/* Al hacer hover en la tarjeta PADRE, la imagen HIJA hace zoom */
.glass-blog-card:hover .transition-transform {
    transform: scale(1.08);
}

/* Ajuste de badges */
.badge.bg-white.text-dark {
    background-color: rgba(255,255,255,0.9) !important;
    color: #000 !important;
}

/* Utilidad ancho contenido */
.w-fit-content {
    width: fit-content;
}

/* Límites de texto */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- SERVICIOS DARK GLASS --- */

/* Clase auxiliar para añadir borde de cristal a las tarjetas de imagen existentes */
.glass-border {
    border: 1px solid rgba(255, 255, 255, 0.15);
    transition: all 0.3s ease;
}

.glass-border:hover {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}

/* --- HOME DARK GLASS EXTRAS --- */

/* Botones Filtro de Galería (Vidrio) */
.btn-glass-filter {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    padding: 8px 24px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-glass-filter:hover, 
.btn-glass-filter.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
    box-shadow: 0 0 15px rgba(13, 110, 253, 0.3);
}

/* Gradiente sobre imágenes de galería (para que el texto se lea) */
.overlay-gradient-bottom {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Animaciones de Entrada (Opcionales, dan toque fino) */
.animate-fade-up {
    animation: fadeUp 1s ease-out forwards;
    opacity: 0;
    transform: translateY(20px);
}
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }

@keyframes fadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- ADMIN PANEL (DARK GLASS THEME) --- */

/* 1. Links del Sidebar */
.glass-nav-link {
    color: rgba(255, 255, 255, 0.6);
    border-radius: 12px;
    padding: 12px 15px;
    transition: all 0.3s;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
}

.glass-nav-link:hover,
.glass-nav-link.active {
    color: white;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.glass-nav-link i {
    width: 20px;
    text-align: center;
}

/* 2. Tarjetas KPI (Estadísticas) */
.glass-stat-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s;
}
.glass-stat-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
}

/* Borde naranja para alertas */
.border-orange-glow {
    border: 1px solid rgba(253, 126, 20, 0.3);
    box-shadow: inset 0 0 20px rgba(253, 126, 20, 0.05);
}

/* 3. Panel General (Contenedor de Tabla) */
.glass-panel {
    background: rgba(11, 28, 60, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 4. Tabla Dark Glass (Transparente) */
.table-dark-glass {
    --bs-table-bg: transparent;
    --bs-table-color: rgba(255, 255, 255, 0.8);
    --bs-table-border-color: rgba(255, 255, 255, 0.05);
    --bs-table-hover-bg: rgba(255, 255, 255, 0.05);
}

.table-dark-glass th {
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    border-bottom-width: 1px;
}

.table-dark-glass td {
    padding: 1rem;
    vertical-align: middle;
}

/* --- BOTÓN ADMIN NAVBAR (Estilo Integrado) --- */
.btn-admin-glass {
    /* Fondo casi invisible para que se mezcle con la barra */
    background: rgba(255, 255, 255, 0.05); 
    
    /* Borde muy sutil */
    border: 1px solid rgba(255, 255, 255, 0.1); 
    
    /* Texto grisáceo para no distraer */
    color: rgba(255, 255, 255, 0.6); 
    
    border-radius: 50px;
    padding: 6px 18px;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}

/* Hover: Se ilumina sutilmente */
.btn-admin-glass:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px); /* Pequeña elevación */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* =========================================
   PANEL DE ADMINISTRACIÓN (DARK GLASS UI)
   ========================================= */

/* --- 1. LAYOUT PRINCIPAL (SOLUCIÓN DE ALINEACIÓN) --- */

/* Sidebar Fijo a la Izquierda */
/* Sidebar Fijo */
.admin-sidebar-fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    width: 280px !important; /* Ancho forzado */
    z-index: 1050;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.02); /* Fondo base */
}

/* Contenido Principal */
.admin-content-fluid {
    /* El truco: Padding izquierdo igual al ancho del sidebar */
    padding-left: 280px !important;
    
    /* Ocupa todo el ancho y alto */
    width: 100%;
    min-height: 100vh;
    
    /* Aseguramos que sea relativo para que el z-index funcione */
    position: relative;
    z-index: 1;
    
    /* Forzamos display block para evitar conflictos flex */
    display: block;
}

/* Contenedor interno */
.admin-container-inner {
    padding: 3rem; /* Espaciado cómodo */
    width: 100%;
    max-width: 100%; /* Evita desbordes */
}

/* --- 2. TABLAS Y PANELES (SOLUCIÓN DE COLOR BLANCO) --- */

/* Panel de Vidrio Oscuro (Contenedor de la tabla) */
.glass-panel-admin {
    background: rgba(13, 25, 48, 0.7) !important; /* Fondo oscuro semi-transparente */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    border-radius: 16px;
    overflow: hidden;
    width: 100%;
}

/* Estilos de la Tabla (Forzando colores) */
.table-admin {
    width: 100%;
    margin-bottom: 0;
    color: #ffffff !important; /* TEXTO BLANCO OBLIGATORIO */
    border-collapse: separate;
    border-spacing: 0;
}

.table-admin th {
    background-color: rgba(255, 255, 255, 0.05) !important; /* Encabezado gris oscuro */
    color: #a0aec0 !important; /* Texto gris claro */
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.table-admin td {
    padding: 1.5rem;
    vertical-align: middle;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #ffffff !important; /* Asegura que el contenido sea blanco */
}

/* Efecto Hover en filas */
.table-admin tbody tr:hover td {
    background-color: rgba(255, 255, 255, 0.05);
}

/* --- 3. ELEMENTOS DE UI (BOTONES Y MODALES) --- */

/* Botones de Acción Circulares */
.btn-action {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: white !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
}

.btn-action:hover {
    background: white;
    color: var(--primary-color) !important;
    transform: scale(1.1);
}

.btn-action.delete:hover {
    background: #dc3545;
    color: white !important;
    border-color: #dc3545;
}

/* Modal Oscuro */
.modal-dark-glass .modal-content {
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 80px rgba(0,0,0,0.8);
    border-radius: 20px;
}

.modal-dark-glass .modal-header,
.modal-dark-glass .modal-footer {
    border-color: rgba(255, 255, 255, 0.1);
}

.modal-dark-glass .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

/* Inputs del Admin */
.input-admin {
    background-color: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: white !important;
    padding: 12px 15px;
    border-radius: 10px;
}

.input-admin:focus {
    background-color: rgba(0, 0, 0, 0.5) !important;
    border-color: var(--xdlab-orange) !important;
    box-shadow: 0 0 0 4px rgba(253, 126, 20, 0.15);
}

/* --- 4. RESPONSIVE (MÓVIL) --- */
@media (max-width: 991px) {
    .admin-sidebar-fixed { display: none !important; } /* Ocultar sidebar */
    .admin-content-fluid { margin-left: 0 !important; width: 100% !important; } /* Pantalla completa */
    .admin-container-inner { padding: 1.5rem; }
}

/* --- ACORDEÓN DARK GLASS --- */

.accordion-dark-glass .accordion-item {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    color: white;
}

.accordion-dark-glass .accordion-button {
    background: transparent;
    color: white;
    box-shadow: none; /* Quita el borde azul al hacer clic */
}

/* Cuando está abierto */
.accordion-dark-glass .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.05);
    color: var(--xdlab-orange); /* El título se pone naranja */
}

/* La flechita del acordeón (svg) */
.accordion-dark-glass .accordion-button::after {
    filter: invert(1); /* Vuelve la flecha blanca */
}

.accordion-dark-glass .accordion-body {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.1);
}


/* --- FOTO DE PERFIL --- */

.profile-upload-container {
    position: relative;
    border-radius: 50%;
    overflow: hidden; /* Importante para que el overlay no se salga del círculo */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto al pasar el mouse sobre todo el contenedor */
.profile-upload-container:hover {
    transform: scale(1.05);
    box-shadow: 0 0 30px rgba(13, 110, 253, 0.3); /* Resplandor azul */
    border-color: var(--xdlab-orange) !important;
}

/* El Overlay (Capa oscura) */
.profile-overlay {
    background: rgba(0, 0, 0, 0.6); /* Fondo negro semitransparente */
    opacity: 0; /* Invisible por defecto */
    
    /* OPCIÓN A: Efecto "Aparecer suave" (Fade In) - Más elegante */
    transition: all 0.3s ease;
    
    /* OPCIÓN B: Si quieres que "suba" como en Facebook antiguo, descomenta esto: */
    /* transform: translateY(100%); */
    /* transition: transform 0.3s ease; */
}

/* Al hacer hover, mostramos el overlay */
.profile-upload-container:hover .profile-overlay {
    opacity: 1;
    /* Si usaste la Opción B, descomenta esto: */
    /* transform: translateY(0); */
}

/* Icono de cámara y texto */
.profile-overlay i, 
.profile-overlay span {
    text-shadow: 0 2px 4px rgba(0,0,0,0.5); /* Sombra para leerse mejor */
}

/* =========================================
   RESPONSIVE DESIGN (MÓVILES Y TABLETS)
   ========================================= */

@media (max-width: 991px) {
    
    /* --- 1. AJUSTES DEL SITIO PÚBLICO --- */
    
    .hero-banner {
        padding-top: 140px; /* Más espacio para el menú móvil */
        padding-bottom: 100px;
        height: auto; /* Altura libre */
        min-height: 100vh;
    }

    .hero-title {
        font-size: 2.5rem; /* Títulos más pequeños */
    }
    
    /* Menú Cápsula en Móvil */
    .floating-nav {
        width: 95%;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.95); /* Menos transparente para leer mejor */
        flex-wrap: wrap;
    }
    
    .navbar-collapse {
        margin-top: 15px;
        border-top: 1px solid rgba(0,0,0,0.1);
        padding-top: 10px;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .navbar-nav .nav-link {
        text-align: center;
        padding: 10px;
        margin-bottom: 5px;
        width: 100%;
    }

    /* --- 2. AJUSTES DE LOS PANELES (ADMIN/DOCTOR) --- */

    /* Sidebar: Oculto por defecto (fuera de la pantalla a la izquierda) */
    @media (max-width: 991px) {
    
    /* Estado normal: Oculto a la izquierda */
    .admin-sidebar-fixed {
        display: block !important; /* Ahora sí existe */
        transform: translateX(-100%); /* Pero está escondido a la izquierda */
        transition: transform 0.3s ease;
        width: 280px;
        height: 100vh;
        z-index: 1050;
        top: 0; 
        left: 0;
    }

    /* Estado ACTIVADO (Cuando el JS le pone esta clase) */
    .admin-sidebar-fixed.show {
        transform: translateX(0); /* Entra a la pantalla */
    }

    /* El contenido siempre ocupa todo el ancho en móvil */
    .admin-content-fluid {
        margin-left: 0 !important;
        width: 100% !important;
        padding-left: 0 !important;
    }
}
    
    .admin-container-inner {
        padding: 1.5rem; /* Menos padding interno */
    }

    /* Tablas con scroll horizontal obligatorio */
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Botón de cerrar dentro del sidebar (lo crearemos en el HTML) */
    .sidebar-close-btn {
        display: block !important;
    }

    /* Overlay oscuro cuando se abre el menú */
    #sidebarOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0,0,0,0.7);
        z-index: 9998; /* Justo debajo del sidebar */
        display: none;
        backdrop-filter: blur(5px);
    }
    #sidebarOverlay.show {
        display: block;
    }
}

/* Ocultar botón cerrar sidebar en PC */
.sidebar-close-btn { display: none; }