/* DataTables: forzar ancho completo del contenedor.
   DataTables escribe un style="width:Xpx" calculado al inicializar; si el
   contenedor estaba oculto o en transición (tabs, sidebar, re-render), la tabla
   queda más angosta que su contenedor. Esto lo corrige. */
table.dataTable {
    width: 100% !important;
}

/* Variables de color: definidas en theme-vars.css (carga después de este archivo) */

html, body {
    overflow-x: hidden;
}

/* Header - Fondo azul médico y estilo general */
.navbar {
    background: linear-gradient(90deg, var(--dm-topbar-grad-1, var(--medical-blue)) 0%, var(--dm-topbar-grad-2, #0047ab) 100%);
    padding: 0.7rem 0;
    border-bottom: 3px solid var(--dm-acento, var(--gold-accent));
    margin-bottom: 0;
    position: sticky;
    top: 0;
    z-index: 1030;
    box-shadow: 0 4px 18px rgba(var(--dm-primario-rgb, 0,48,135), 0.35);
}

.navbar-brand {
    display: flex;
    align-items: center;
}

.navbar-brand img.avatar {
    max-height: 50px;
    margin-right: 10px;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.navbar-brand img.logo {
    max-height: 48px;
    transition: transform 0.3s ease;
}

.navbar-brand:hover img.avatar,
.navbar-brand:hover img.logo {
    transform: scale(1.05);
}

/* Menú - Color de texto y efecto hover */
.navbar .navbar-nav .nav-link {
    color: #fff;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    position: relative;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: 0.15rem;
    height: 2px;
    background: var(--gold-accent);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
}

.navbar .navbar-nav .nav-link:hover {
    color: var(--gold-accent);
    background-color: rgba(255, 255, 255, 0.1);
}

.navbar-nav .nav-link:hover::after {
    transform: scaleX(1);
}

/* Botones de sesión en la barra */
.navbar .btn-nav {
    border-radius: 999px;
    padding: 0.45rem 1.25rem;
    font-weight: 600;
    font-size: 0.92rem;
}

.navbar .btn-nav-login {
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    transition: all 0.3s ease;
}

.navbar .btn-nav-login:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: #fff;
    color: #fff;
}

.navbar .btn-nav-register {
    color: var(--medical-blue);
    background: var(--gold-accent);
    border: 2px solid var(--gold-accent);
    box-shadow: 0 4px 12px rgba(var(--dm-acento-rgb, 255,215,0), 0.35);
    transition: all 0.3s ease;
}

.navbar .btn-nav-register:hover {
    background: #fff;
    border-color: #fff;
    transform: translateY(-1px);
}

/* Dropdown de usuario */
.navbar .dropdown-toggle .nav-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid var(--gold-accent);
    object-fit: cover;
    vertical-align: middle;
}

.navbar .dropdown-menu {
    border: none;
    border-radius: 14px;
    box-shadow: 0 14px 36px rgba(var(--dm-primario-rgb, 0,48,135), 0.22);
    padding: 0.5rem;
    margin-top: 0.6rem;
    min-width: 220px;
}

.navbar .dropdown-item {
    border-radius: 9px;
    padding: 0.6rem 1rem;
    font-size: 0.95rem;
    color: var(--dm-texto-oscuro);
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.navbar .dropdown-item i {
    width: 22px;
    text-align: center;
    color: var(--medical-blue);
    margin-right: 0.4rem;
}

.navbar .dropdown-item:hover {
    background: rgba(var(--dm-primario-rgb, 0,48,135), 0.07);
    color: var(--medical-blue);
    padding-left: 1.3rem;
}

.navbar .dropdown-divider {
    margin: 0.4rem 0;
}

/* Toggler */
.navbar .navbar-toggler {
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    padding: 0.35rem 0.6rem;
    transition: border-color 0.2s ease;
}

.navbar .navbar-toggler:hover {
    border-color: var(--gold-accent);
}

.navbar .navbar-toggler-icon {
    filter: invert(1);
}

/* Carousel - Full width and padded to header */
.carousel {
    background-color: var(--light-gray);
    border: none;
    border-radius: 0;
    overflow: hidden; /* Evita desbordes */
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding-top: 0;
    box-shadow: 0 6px 24px rgba(var(--dm-primario-rgb, 0,48,135), 0.18);
}

.carousel-item {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Rellena sin deformar */
    object-position: center;
    display: block;
}

.carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(var(--dm-primario-oscuro-rgb, 0,28,82), 0.75) 0%, rgba(var(--dm-primario-rgb, 0,48,135), 0.35) 45%, rgba(var(--dm-primario-rgb, 0,48,135), 0.1) 100%);
}

.carousel-inner {
    width: 100%;
    height: 70vh; /* Altura adaptable */
    max-height: 800px;
    min-height: 400px;
    overflow: hidden; /* Corta cualquier exceso de imagen */
    position: relative;
}

.carousel-caption {
    background: none;
    color: #fff;
    padding: 2rem 3.5rem;
    border-radius: 0;
    bottom: 18%;
    left: 12%;
    right: auto;
    text-align: left;
    max-width: 620px;
    z-index: 2;
}

.carousel-caption h5 {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.8rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.carousel-caption p {
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    font-weight: 300;
    opacity: 0.95;
    margin-bottom: 1.6rem;
}

.carousel-caption::before {
    content: "";
    position: absolute;
    left: 3.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 80%;
    border-radius: 4px;
    background: var(--gold-accent);
}

/* Controles del carrusel */
.carousel-control-prev,
.carousel-control-next {
    width: 52px;
    height: 52px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.85;
    background: rgba(var(--dm-primario-rgb, 0,48,135), 0.55);
    border-radius: 50%;
    margin: 0 0.8rem;
    transition: background 0.3s ease, transform 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: var(--medical-blue);
    transform: translateY(-50%) scale(1.08);
    color: #fff;
    opacity: 1;
}

.carousel-control-prev {
    margin-right: auto;
}

.carousel-control-next {
    margin-left: auto;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(1);
    width: 1.4rem;
    height: 1.4rem;
}

/* Indicadores de posición */
.carousel-indicators {
    bottom: 6%;
}

.carousel-indicators button {
    width: 34px;
    height: 5px;
    border-radius: 6px;
    border: 0;
    background-color: rgba(255, 255, 255, 0.5);
    transition: width 0.3s ease, background-color 0.3s ease;
}

.carousel-indicators button.active {
    width: 52px;
    background-color: var(--gold-accent);
}

/* Transición fade suave entre imágenes */
.carousel.carousel-fade .carousel-item {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.carousel.carousel-fade .carousel-item.active,
.carousel.carousel-fade .carousel-item-next.carousel-item-start,
.carousel.carousel-fade .carousel-item-prev.carousel-item-end {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.carousel.carousel-fade .carousel-item-next,
.carousel.carousel-fade .carousel-item-prev,
.carousel.carousel-fade .active.carousel-item-start,
.carousel.carousel-fade .active.carousel-item-end {
    opacity: 0;
}

/* Footer - Anclado abajo con flexbox */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

main {
    flex: 1 0 auto;
}

/* Footer profesional de columnas */
footer.main-footer {
    background: linear-gradient(180deg, var(--dm-sidebar-bg) 0%, var(--dm-sidebar-bg-2) 100%);
    color: var(--dm-sidebar-texto);
    padding: 3rem 0 0;
    text-align: left;
    flex-shrink: 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}

footer.main-footer .footer-marca {
    max-width: 320px;
}

footer.main-footer .footer-marca img {
    max-height: 52px;
    max-width: 200px;
    object-fit: contain;
    margin-bottom: 0.9rem;
}

footer.main-footer .footer-marca p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--dm-sidebar-subtexto);
    margin-bottom: 1.1rem;
}

footer.main-footer .footer-titulo {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin-bottom: 1rem;
}

footer.main-footer .footer-enlaces {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.55rem;
}

footer.main-footer .footer-enlaces a {
    color: var(--dm-sidebar-subtexto);
    text-decoration: none;
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color var(--dm-transicion), transform var(--dm-transicion);
}

footer.main-footer .footer-enlaces a i {
    font-size: 0.7rem;
    color: var(--dm-acento);
    transition: transform var(--dm-transicion);
}

footer.main-footer .footer-enlaces a:hover {
    color: #fff;
    transform: translateX(3px);
}

footer.main-footer .footer-enlaces a:hover i {
    transform: translateX(2px);
}

footer.main-footer .footer-inferior {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin-top: 2.25rem;
    padding: 1rem 0;
    font-size: 0.85rem;
    color: var(--dm-sidebar-subtexto);
}

footer.main-footer .footer-inferior a {
    color: var(--dm-sidebar-texto);
    text-decoration: none;
}

footer.main-footer .footer-inferior a:hover {
    color: var(--dm-acento);
}

footer.main-footer a {
    color: var(--dm-acento);
    text-decoration: none;
}

footer.main-footer a:hover {
    color: #fff;
    text-decoration: underline;
}

/* Íconos sociales del footer */
footer.main-footer .footer-social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    transition: background-color var(--dm-transicion), transform var(--dm-transicion), color var(--dm-transicion);
}
footer.main-footer .footer-social-link:hover {
    background: var(--dm-acento);
    color: var(--dm-sidebar-bg);
    transform: translateY(-3px);
    text-decoration: none;
}
footer.main-footer .social-links.iconos-blancos .footer-social-link { color: #ffffff; }
footer.main-footer .social-links.iconos-negros .footer-social-link { color: #111111; }

/* ============ Utilidades compartidas ============ */
.info { margin-bottom: 20px; }
.comentarios { margin-top: 30px; }

.dm-spinner-lg {
    width: 3rem;
    height: 3rem;
}

.dm-avatar-56 {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.dm-modal-alto {
    max-height: calc(100vh - 80px);
    object-fit: contain;
    cursor: zoom-out;
}

/* Visor de imágenes del expediente dentro de modal */
.visor-imagen-modal .modal-content {
    background: #000;
    border: 0;
}
.visor-imagen-modal .modal-body {
    background: #000;
}

/* Estilos globales para el sitio */
.container {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Ajustes responsivos */
@media (max-width: 768px) {
    .navbar-nav {
        background-color: var(--medical-blue);
        padding: 1rem;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem;
        text-align: center;
    }

    .carousel-inner {
        height: 40vh;
        min-height: 220px;
    }

    .carousel-caption {
        left: 6%;
        right: 6%;
        bottom: 12%;
        padding: 1rem 1.5rem;
    }

    .carousel-caption h5 {
        font-size: 1.15rem;
    }

    .carousel-caption p {
        font-size: 0.9rem;
        margin-bottom: 0.5rem;
    }

    .carousel-caption::before {
        left: 1.5rem;
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 40px;
        height: 40px;
        margin: 0 0.4rem;
    }
}


.section-title {
    color: var(--dm-texto-oscuro);
    font-weight: 700;
    margin-bottom: 1rem;
}
.hero-section {
    background: linear-gradient(120deg, var(--dm-primario-oscuro) 0%, var(--dm-primario) 55%, var(--dm-primario-claro) 100%);
    color: #fff;
    padding: 80px 0;
    text-align: center;
}
.values-icon {
    font-size: 2rem;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--dm-radio-lg);
    background: rgba(var(--dm-primario-rgb, 0,48,135), 0.08);
    color: var(--dm-primario);
    margin-bottom: 0.75rem;
    transition: transform var(--dm-transicion), background-color var(--dm-transicion);
}
.values-icon:hover {
    transform: translateY(-4px);
    background: rgba(var(--dm-acento-rgb, 255,215,0), 0.18);
}
.team-card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}
.team-card:hover {
    transform: translateY(-5px);
}
.team-card img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Fondo blanco con marca de agua médica */
.medical-bg {
    background-color: #ffffff;
    background-image: url('../img/fondo.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%; /* Ajusta al alto y ancho del container */
    position: relative;
    /* z-index: 1; */
}

.medical-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    z-index: -1;
}

/* Modal de horarios - estilo profesional */
.modal-horarios {
    border: none;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(var(--dm-primario-rgb, 0,48,135), 0.25);
}

.modal-horarios-header {
    background: linear-gradient(135deg, var(--medical-blue) 0%, var(--dm-primario-claro) 100%);
    color: #fff;
    border-bottom: none;
    padding: 1.25rem 1.5rem;
}

.modal-horarios-header .btn-close {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.modal-horarios-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--gold-accent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.horarios-tabla thead th {
    background-color: var(--light-gray);
    color: var(--medical-blue);
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--medical-blue);
    white-space: nowrap;
}

.horarios-tabla tbody tr {
    transition: background-color 0.2s ease;
}

.modal-horarios-footer {
    border-top: 1px solid #e9ecef;
    background-color: var(--light-gray);
}

/* ============ Consejos de salud ============ */
.seccion-titulo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--medical-blue);
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 1.5rem;
}

.seccion-titulo::after {
    content: "";
    flex: 1;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--medical-blue), rgba(var(--dm-primario-rgb, 0,48,135), 0.12));
}

.seccion-titulo i {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    color: #fff;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px rgba(var(--dm-primario-rgb, 0,48,135), 0.3);
}

.consejo-tarjeta .card {
    border-radius: 16px;
    border: 1px solid rgba(var(--dm-primario-rgb, 0,48,135), 0.12);
    background: linear-gradient(135deg, rgba(var(--dm-primario-claro-rgb, 0,86,179), 0.07) 0%, rgba(255, 255, 255, 0.6) 100%);
    border-left: 5px solid var(--medical-blue);
}

.consejo-tarjeta .card-title {
    color: var(--medical-blue);
    font-weight: 700;
}

.consejo-tarjeta .card-text {
    color: var(--dm-texto-medio, #4b5563);
}

/* ============ Buscador de médicos ============ */
.buscador-medicos {
    background: var(--dm-fondo-tarjeta);
    border-radius: 999px;
    padding: 0.4rem;
    box-shadow: 0 12px 34px rgba(var(--dm-primario-rgb, 0,48,135), 0.14);
    border: 1px solid rgba(var(--dm-primario-rgb, 0,48,135), 0.1);
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
    max-width: 680px;
    margin: 0 auto;
}

.buscador-medicos:focus-within {
    border-color: var(--medical-blue);
    box-shadow: 0 14px 40px rgba(var(--dm-primario-rgb, 0,48,135), 0.22);
}

.buscador-medicos .form-control {
    border: none;
    background: transparent;
    padding: 0.7rem 1.2rem;
    font-size: 1rem;
    border-radius: 999px !important;
}

.buscador-medicos .form-control:focus {
    box-shadow: none;
    background: transparent;
}

.buscador-medicos .form-control::placeholder {
    color: var(--dm-texto-claro);
}

.btn-buscar {
    border-radius: 999px !important;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--dm-primario-rgb, 0,48,135), 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-buscar:hover {
    transform: scale(1.06);
    color: #fff;
    box-shadow: 0 6px 18px rgba(var(--dm-acento-rgb, 255,215,0), 0.45);
    background: var(--dm-boton-hover-gradient, linear-gradient(135deg, var(--dm-acento, var(--gold-accent)), var(--dm-acento-oscuro, #e6b800)));
}

/* ============ Tarjetas de médicos ============ */
.card-medico {
    border-radius: 18px;
    overflow: hidden;
    background: var(--dm-fondo-tarjeta);
    border: 1px solid var(--dm-borde-claro);
    box-shadow: 0 4px 16px rgba(15, 29, 69, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.card-medico:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(var(--dm-primario-rgb, 0,48,135), 0.18);
    border-color: rgba(var(--dm-primario-rgb, 0,48,135), 0.25);
}

.foto-portada {
    position: relative;
    height: 132px;
    background: linear-gradient(135deg, var(--medical-blue) 0%, var(--dm-primario-claro) 60%, var(--dm-terciario) 100%);
    margin-bottom: 58px;
}

.foto-portada::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 75% 25%, rgba(var(--dm-acento-rgb, 255,215,0), 0.28), transparent 55%);
}

.medico-foto {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, -50%);
    width: 112px;
    height: 112px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
    background: #fff;
    box-shadow: 0 8px 20px rgba(var(--dm-primario-rgb, 0,48,135), 0.35);
    z-index: 1;
    transition: transform 0.3s ease;
}

.card-medico:hover .medico-foto {
    transform: translate(-50%, -50%) scale(1.06);
}

.card-medico .card-title {
    color: var(--dm-texto-oscuro, #13213c);
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 0.35rem;
}

.card-medico .card-ubicacion {
    font-size: 0.85rem;
    color: var(--dm-texto-muted, #6b7688);
    margin-bottom: 0.5rem;
}

.card-medico .card-bio {
    color: var(--dm-texto-claro);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}

.badge-especialidad {
    display: inline-block;
    background: rgba(var(--dm-primario-claro-rgb, 0,86,179), 0.1);
    color: var(--medical-blue);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    margin-bottom: 0.6rem;
}

.tarjeta-pie {
    padding: 1rem 1.25rem 1.25rem;
}

.btn-ver-mas {
    border-radius: 999px;
    padding: 0.5rem 1.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(var(--dm-primario-rgb, 0,48,135), 0.3);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    width: 100%;
}

.btn-ver-mas:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--dm-acento-rgb, 255,215,0), 0.45);
    color: #fff;
    background: var(--dm-boton-hover-gradient, linear-gradient(135deg, var(--dm-acento, var(--gold-accent)), var(--dm-acento-oscuro, #e6b800)));
}

/* ============ Paginación ============ */
.pagination {
    gap: 0.35rem;
    margin-top: 1.5rem;
}

.pagination .page-link {
    color: var(--medical-blue);
    font-weight: 600;
    border: none;
    border-radius: 10px;
    min-width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dm-fondo-tarjeta);
    box-shadow: 0 2px 8px rgba(15, 29, 69, 0.1);
    transition: all 0.2s ease;
}

.pagination .page-link:hover {
    background: rgba(var(--dm-primario-rgb, 0,48,135), 0.08);
    color: var(--medical-blue);
    transform: translateY(-1px);
}

.pagination .page-item.active .page-link {
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    color: #fff;
    box-shadow: 0 6px 16px rgba(var(--dm-primario-rgb, 0,48,135), 0.4);
}

.pagination .page-item.disabled .page-link {
    color: #adb5bd;
    background: var(--dm-borde-claro);
    box-shadow: none;
}

/* ============ Página info - perfil del médico ============ */
.perfil-medico {
    border-radius: 20px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--dm-borde-claro);
    box-shadow: 0 12px 40px rgba(var(--dm-primario-rgb, 0,48,135), 0.12);
}

.perfil-medico-portada {
    height: 150px;
    background: linear-gradient(135deg, var(--medical-blue) 0%, var(--dm-primario-claro) 55%, var(--dm-terciario) 100%);
    position: relative;
}

.perfil-medico-portada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 30%, rgba(var(--dm-acento-rgb, 255,215,0), 0.25), transparent 45%);
}

.perfil-medico-foto-wrap {
    width: 132px;
    height: 132px;
    margin: -66px auto 0;
    border: 5px solid #fff;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(var(--dm-primario-rgb, 0,48,135), 0.35);
    overflow: hidden;
    background: #fff;
    position: relative;
    z-index: 2;
}

.perfil-medico-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.perfil-medico-foto-wrap {
    cursor: zoom-in;
}

.foto-zoom-icono {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(var(--dm-primario-rgb, 0,48,135), 0.85);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
    z-index: 3;
}

.perfil-medico-foto-wrap:hover .foto-zoom-icono,
.perfil-foto-ampliable:hover .foto-zoom-icono {
    opacity: 1;
    background: var(--gold-accent);
    color: var(--medical-blue);
    transform: scale(1.1);
}

/* ============ Visor de foto ampliada ============ */
.visor-foto {
    position: fixed;
    inset: 0;
    background: rgba(0, 20, 60, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    cursor: zoom-out;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.visor-foto.visible {
    opacity: 1;
    visibility: visible;
}

.visor-foto img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 12px;
    border: 4px solid #fff;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
    object-fit: contain;
}

.visor-foto-cerrar {
    position: absolute;
    top: 1.2rem;
    right: 1.5rem;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.visor-foto-cerrar:hover {
    background: var(--gold-accent);
    color: var(--medical-blue);
    transform: scale(1.1);
}

.perfil-medico-nombre {
    text-align: center;
    font-weight: 800;
    color: var(--dm-texto-oscuro, #13213c);
    margin: 1rem 0 0.25rem;
    font-size: 1.5rem;
}

.perfil-medico-ubicacion {
    text-align: center;
    color: var(--dm-texto-muted, #6b7688);
    font-weight: 500;
}

.perfil-medico-ubicacion i {
    color: var(--medical-blue);
}

.perfil-medico-datos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

@media (max-width: 767.98px) {
    .perfil-medico-datos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .perfil-medico-datos {
        grid-template-columns: 1fr;
    }
}

.perfil-dato {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.2rem;
    background: var(--dm-fondo-claro);
    border: 1px solid var(--dm-borde-claro);
    border-radius: 14px;
    align-items: flex-start;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.perfil-dato:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(var(--dm-primario-rgb, 0,48,135), 0.1);
}

.perfil-dato-bio {
    grid-column: 1 / -1;
    order: 10;
}

.perfil-dato-icono {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 4px 10px rgba(var(--dm-primario-rgb, 0,48,135), 0.3);
}

.perfil-dato-info {
    min-width: 0;
}

.perfil-dato-info span {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.9px;
    color: var(--dm-texto-claro, #8a93a6);
    font-weight: 700;
    margin-bottom: 0.2rem;
}

.perfil-dato-info p {
    margin: 0;
    font-weight: 600;
    color: var(--dm-texto-oscuro);
    word-break: break-word;
}

.perfil-dato-info p i {
    margin-right: 0.35rem;
}

/* ============ Secciones de la página info ============ */
.seccion-info-titulo {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: var(--medical-blue);
    font-weight: 800;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid rgba(var(--dm-primario-rgb, 0,48,135), 0.12);
}

.seccion-info-titulo i {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    color: #fff;
    font-size: 1rem;
    box-shadow: 0 4px 12px rgba(var(--dm-primario-rgb, 0,48,135), 0.3);
}

.especialidad-card {
    display: flex;
    gap: 0.9rem;
    padding: 1.1rem 1.2rem;
    background: var(--dm-fondo-tarjeta);
    border: 1px solid var(--dm-borde-claro);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 29, 69, 0.06);
    height: 100%;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.especialidad-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(var(--dm-primario-rgb, 0,48,135), 0.12);
}

.especialidad-icono {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(var(--dm-primario-rgb, 0,48,135), 0.08);
    color: var(--medical-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.especialidad-card h6 {
    margin: 0 0 0.25rem;
    color: var(--medical-blue);
    font-weight: 700;
}

.especialidad-card p {
    margin: 0;
    color: var(--dm-texto-muted);
    font-size: 0.9rem;
}

/* Tarjetas de consultorio */
.consultorio-card {
    padding: 1.2rem;
    background: var(--dm-fondo-tarjeta);
    border: 1px solid var(--dm-borde-claro);
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(15, 29, 69, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.consultorio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(var(--dm-primario-rgb, 0,48,135), 0.12);
}

.consultorio-icono {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(var(--dm-primario-rgb, 0,48,135), 0.3);
}

.consultorio-titulo {
    font-weight: 700;
    color: var(--dm-texto-oscuro, #13213c);
    margin: 0;
    font-size: 1.02rem;
    word-break: break-word;
}

.consultorio-tipo {
    display: inline-block;
    margin-top: 0.6rem;
    background: rgba(var(--dm-primario-claro-rgb, 0,86,179), 0.1);
    color: var(--medical-blue);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    align-self: flex-start;
}

.consultorio-detalles {
    list-style: none;
    padding: 0;
    margin: 0.9rem 0 0;
    display: grid;
    gap: 0.45rem;
}

.consultorio-detalles li {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.9rem;
    color: var(--dm-texto-medio, #4b5563);
}

.consultorio-detalles li i {
    margin-top: 0.18rem;
    width: 16px;
    text-align: center;
}

.consultorio-acciones {
    margin-top: auto;
    padding-top: 1.1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.consultorio-acciones .btn {
    border-radius: 999px;
    font-size: 0.82rem;
    padding: 0.4rem 1rem;
}

/* Formulario de comentarios */
.tarjeta-comentario {
    border-radius: 18px;
    border: 1px solid var(--dm-borde-claro);
    box-shadow: 0 10px 30px rgba(var(--dm-primario-rgb, 0,48,135), 0.1);
    max-width: 640px;
    margin: 0 auto;
}

.tarjeta-comentario .form-control,
.tarjeta-comentario textarea.form-control {
    border-radius: 10px;
    border: 1px solid var(--dm-borde-claro);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-comentario .form-control:focus {
    border-color: var(--medical-blue);
    box-shadow: 0 0 0 0.2rem rgba(var(--dm-primario-rgb, 0,48,135), 0.12);
}

/* ============ Botones de acción de consultorios ============ */
.btn-accion {
    border-radius: 999px;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.55rem 1.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    color: #fff;
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background-color 0.2s ease;
}

.btn-accion:hover {
    color: #fff;
    transform: translateY(-2px);
}

.btn-accion:active {
    transform: translateY(0);
}

.btn-accion-mapa {
    background: linear-gradient(135deg, #28a745, #20c997);
    box-shadow: 0 4px 14px rgba(40, 167, 69, 0.35);
}

.btn-accion-mapa:hover {
    background: var(--dm-boton-hover-gradient, linear-gradient(135deg, var(--dm-acento, var(--gold-accent)), var(--dm-acento-oscuro, #e6b800)));
    box-shadow: 0 8px 22px rgba(var(--dm-acento-rgb, 255,215,0), 0.45);
}

.btn-accion-horarios {
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    box-shadow: 0 4px 14px rgba(var(--dm-primario-rgb, 0,48,135), 0.35);
}

.btn-accion-horarios:hover {
    background: var(--dm-boton-hover-gradient, linear-gradient(135deg, var(--dm-acento, var(--gold-accent)), var(--dm-acento-oscuro, #e6b800)));
    box-shadow: 0 8px 22px rgba(var(--dm-acento-rgb, 255,215,0), 0.45);
}

.btn-accion-cita {
    background: linear-gradient(135deg, #fd7e14, #e8590c);
    box-shadow: 0 4px 14px rgba(232, 89, 12, 0.35);
}

.btn-accion-cita:hover {
    background: var(--dm-boton-hover-gradient, linear-gradient(135deg, var(--dm-acento, var(--gold-accent)), var(--dm-acento-oscuro, #e6b800)));
    box-shadow: 0 8px 22px rgba(var(--dm-acento-rgb, 255,215,0), 0.45);
}

/* ============ Calendario mensual del médico (citas por lugar) ============ */
.cal-citas-cabecera {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
    font-weight: 700;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--medical-blue);
    margin-bottom: 8px;
}

.cal-citas-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-citas-dia {
    min-height: 86px;
    border: 1px solid var(--dm-borde-claro);
    background: var(--dm-fondo-tarjeta);
    border-radius: 10px;
    padding: 6px 8px;
    text-align: left;
    color: var(--dm-texto-oscuro);
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cal-citas-dia:hover {
    border-color: var(--medical-blue);
    background: var(--dm-fondo-claro);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--dm-primario-rgb, 0,48,135), 0.15);
}

.cal-citas-dia.sin-citas {
    background: var(--dm-fondo-claro);
    color: var(--dm-texto-claro);
}

.cal-citas-dia.hoy {
    border-color: rgba(var(--dm-acento-rgb, 255,215,0), 0.8);
    box-shadow: inset 0 0 0 2px rgba(var(--dm-acento-rgb, 255,215,0), 0.6);
}

.cal-citas-dia.filtrada {
    background: var(--medical-blue);
    color: #fff;
    border-color: var(--medical-blue);
}

.cal-citas-dia.filtrada .cal-citas-total {
    color: #fff;
}

.cal-citas-numero {
    font-weight: 700;
    font-size: 0.95rem;
}

.cal-citas-total {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--medical-blue);
}

.cal-citas-chip {
    font-size: 0.66rem;
    line-height: 1.2;
    color: var(--dm-texto-medio);
    background: var(--dm-borde-claro);
    border-radius: 6px;
    padding: 1px 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-citas-mas {
    font-size: 0.62rem;
    font-style: italic;
    color: #94a3b8;
}

.cal-citas-vacio {
    min-height: 86px;
}

@media (max-width: 576px) {
    .cal-citas-dia {
        min-height: 64px;
        padding: 4px;
    }
    .cal-citas-chip, .cal-citas-mas, .cal-citas-total {
        display: none;
    }
}

/* ============ Calendario de citas ============ */
.calendario-cabecera {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    text-align: center;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--medical-blue);
    margin-bottom: 8px;
}

.calendario-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.calendario-dia {
    aspect-ratio: 1 / 1;
    border: 1px solid var(--dm-borde-claro);
    background: var(--dm-fondo-tarjeta);
    border-radius: 10px;
    font-weight: 600;
    color: var(--dm-texto-oscuro);
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.calendario-dia:not(:disabled) {
    cursor: pointer;
}

.calendario-dia:not(:disabled):hover {
    border-color: var(--medical-blue);
    background: var(--dm-fondo-claro);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(var(--dm-primario-rgb, 0,48,135), 0.15);
}

.calendario-dia-pasado,
.calendario-dia-fuera {
    color: var(--dm-texto-claro);
    background: var(--dm-fondo-claro);
}

.calendario-dia-hoy:not(.calendario-dia-seleccionado) {
    border-color: rgba(var(--dm-acento-rgb, 255,215,0), 0.8);
    box-shadow: inset 0 0 0 2px rgba(var(--dm-acento-rgb, 255,215,0), 0.6);
}

.calendario-dia-seleccionado {
    background: var(--medical-blue) !important;
    color: #fff !important;
    border-color: var(--medical-blue) !important;
    box-shadow: 0 6px 16px rgba(var(--dm-primario-rgb, 0,48,135), 0.35);
}

/* Calendario de reserva: adaptable a móvil (redice celdas y gap toques) */
@media (max-width: 575.98px) {
    .calendario-cabecera, .calendario-grid {
        gap: 3px;
    }
    .calendario-cabecera {
        font-size: 0.65rem;
    }
    .calendario-dia {
        border-radius: 6px;
        font-size: 0.85rem;
    }
}

/* Filtros del directorio de la página de inicio: responsive */
.directorio-filtros .form-select {
    width: auto;
    min-width: 0;
}
@media (max-width: 575.98px) {
    .directorio-filtros {
        width: 100%;
    }
    .directorio-filtros .form-select {
        width: 100%;
        flex: 1 1 100%;
    }
}

.calendario-lateral {
    background: var(--dm-fondo-claro);
    border: 1px solid var(--dm-borde-claro);
    border-radius: 14px;
    padding: 1.25rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.cita-slots {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.slot-hora {
    border: 1px solid var(--dm-borde-claro);
    background: var(--dm-fondo-tarjeta);
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--medical-blue);
    transition: all 0.15s ease;
}

.slot-hora:hover {
    border-color: var(--medical-blue);
    background: var(--dm-fondo-claro);
}

.slot-hora-activo {
    background: var(--medical-blue) !important;
    color: #fff !important;
    border-color: var(--medical-blue) !important;
    box-shadow: 0 4px 12px rgba(var(--dm-primario-rgb, 0,48,135), 0.3);
}

/* ============ Formulario de comentarios ============ */
.tarjeta-comentario {
    border-radius: 18px;
    border: 1px solid var(--dm-borde-claro);
    box-shadow: 0 12px 34px rgba(var(--dm-primario-rgb, 0,48,135), 0.12);
    max-width: 640px;
    margin: 0 auto;
    overflow: hidden;
}

.tarjeta-comentario-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--medical-blue) 0%, var(--dm-primario-claro) 100%);
    color: #fff;
}

.tarjeta-comentario-icono {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--gold-accent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.tarjeta-comentario .form-control,
.tarjeta-comentario textarea.form-control {
    border-radius: 10px;
    border: 1px solid var(--dm-borde-claro);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tarjeta-comentario .form-control:focus {
    border-color: var(--medical-blue);
    box-shadow: 0 0 0 0.2rem rgba(var(--dm-primario-rgb, 0,48,135), 0.12);
}

.rating-stars {
    display: inline-flex;
    gap: 0.3rem;
    font-size: 1.6rem;
}

.rating-stars i {
    cursor: pointer;
    transition: transform 0.15s ease, color 0.15s ease;
}

.rating-stars i:hover {
    transform: scale(1.2);
}

.btn-enviar-comentario {
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    font-weight: 700;
    color: #fff;
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    border: none;
    box-shadow: 0 6px 18px rgba(var(--dm-primario-rgb, 0,48,135), 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-enviar-comentario:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--dm-acento-rgb, 255,215,0), 0.45);
    background: var(--dm-boton-hover-gradient, linear-gradient(135deg, var(--dm-acento, var(--gold-accent)), var(--dm-acento-oscuro, #e6b800)));
}

.btn-enviar-comentario:active {
    transform: translateY(0);
}

/* ============ Tarjetas de reseñas ============ */
.resena-card {
    display: flex;
    gap: 1rem;
    padding: 1.15rem 1.3rem;
    background: var(--dm-fondo-tarjeta);
    border: 1px solid var(--dm-borde-claro);
    border-radius: 14px;
    box-shadow: 0 3px 12px rgba(15, 29, 69, 0.06);
    margin-bottom: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.resena-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(var(--dm-primario-rgb, 0,48,135), 0.1);
    border-color: rgba(var(--dm-primario-rgb, 0,48,135), 0.18);
}

.resena-avatar {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    box-shadow: 0 4px 10px rgba(var(--dm-primario-rgb, 0,48,135), 0.3);
}

.resena-usuario {
    font-weight: 700;
    color: var(--dm-texto-oscuro, #13213c);
    font-size: 0.95rem;
}

.resena-usuario i {
    color: var(--medical-blue);
}

.resena-fecha {
    font-size: 0.8rem;
    color: var(--dm-texto-claro, #8a93a6);
}

.resena-estrellas {
    font-size: 1rem;
    line-height: 1;
    display: flex;
    gap: 0.1rem;
}

.resena-texto {
    color: var(--dm-texto-medio, #4b5563);
    margin-bottom: 0;
    line-height: 1.55;
}

/* ============ Página de perfil ============ */
.perfil-usuario {
    border-radius: 18px;
    border: 1px solid var(--dm-borde-claro);
    overflow: hidden;
}

.perfil-usuario-portada {
    height: 130px;
    background: linear-gradient(135deg, var(--medical-blue) 0%, var(--dm-primario-claro) 60%, var(--dm-terciario) 100%);
    position: relative;
}

.perfil-usuario-portada::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 30%, rgba(var(--dm-acento-rgb, 255,215,0), 0.25), transparent 50%);
    pointer-events: none;
}

.perfil-usuario-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    margin-top: -70px;
    box-shadow: 0 8px 20px rgba(var(--dm-primario-rgb, 0,48,135), 0.3);
    background: #fff;
    position: relative;
    z-index: 2;
}

.perfil-foto-ampliable {
    cursor: zoom-in;
}

.perfil-foto-ampliable .foto-zoom-icono {
    bottom: 0;
    right: 0;
}

.foto-preview {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--dm-borde-claro);
    background: var(--dm-fondo-claro);
    flex-shrink: 0;
}

.perfil-usuario-datos li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed var(--dm-borde-claro);
    font-size: 0.92rem;
    color: var(--dm-texto-medio, #4b5563);
}

.perfil-usuario-datos li:last-child {
    border-bottom: none;
}

.perfil-usuario-datos li i {
    width: 22px;
    text-align: center;
}

.formulario-perfil {
    border-radius: 18px;
    border: 1px solid var(--dm-borde-claro);
    overflow: hidden;
}

.formulario-perfil-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 1.4rem;
    background: linear-gradient(135deg, var(--medical-blue) 0%, var(--dm-primario-claro) 100%);
    color: #fff;
}

.formulario-perfil-icono {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--gold-accent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
}

.formulario-perfil .form-control {
    border-radius: 10px;
    border: 1px solid var(--dm-borde-claro);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.formulario-perfil .form-control:focus {
    border-color: var(--medical-blue);
    box-shadow: 0 0 0 0.2rem rgba(var(--dm-primario-rgb, 0,48,135), 0.12);
}

/* ============ Exámenes e imágenes de la cita ============ */
.examen-thumb {
    height: 130px;
    overflow: hidden;
    background: #f1f4f9;
    border-radius: 10px 10px 0 0;
}

.examen-thumb .examen-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s ease;
}

.examen-thumb:hover .examen-img {
    transform: scale(1.06);
}

.examen-item {
    border-radius: 10px;
    overflow: hidden;
}

.examen-thumb {
    cursor: zoom-in;
}

.toggle-pass {
    border: 1px solid var(--dm-borde-claro);
    border-left: none;
    background: var(--dm-fondo-tarjeta);
    color: var(--dm-texto-claro);
    border-radius: 0 10px 10px 0;
}

.toggle-pass:hover {
    color: var(--medical-blue);
    background: var(--dm-fondo-claro);
}

/* Miniatura del usuario en el menú */
.navbar-user-photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--dm-borde-claro);
    display: inline-block;
    vertical-align: -7px;
}

.dropdown-user-photo {
    width: 44px;
    height: 44px;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px var(--dm-borde-claro);
}

.dropdown-user-header {
    cursor: default;
}

.dropdown-user-header:hover {
    background: transparent;
}

.resena-acciones .btn {
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.btn-aprobar {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
    border: 1px solid rgba(25, 135, 84, 0.3);
}

.btn-aprobar:hover {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
}

.btn-desaprobar {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

.btn-desaprobar:hover {
    background: var(--dm-boton-hover-gradient, linear-gradient(135deg, var(--dm-acento, var(--gold-accent)), var(--dm-acento-oscuro, #e6b800)));
    color: #fff;
    border-color: transparent;
    transform: translateY(-1px);
}

/* Botones primarios del área principal: blanco y hover amarillo */
main .btn-primary {
    color: #fff;
    background: var(--dm-topbar-gradient, linear-gradient(135deg, var(--medical-blue), var(--dm-primario-claro)));
    border: none;
    box-shadow: 0 4px 14px rgba(var(--dm-primario-rgb, 0,48,135), 0.3);
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

main .btn-primary:hover {
    color: #fff;
    background: var(--dm-boton-hover-gradient, linear-gradient(135deg, var(--dm-acento, var(--gold-accent)), var(--dm-acento-oscuro, #e6b800)));
    border: none;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(var(--dm-acento-rgb, 255,215,0), 0.45);
}

main .btn-primary:active {
    transform: translateY(0);
}

/* ============ Tarjetas de médicos (foto) ============ */
.medico-foto-wrap {
    position: relative;
    height: 150px;
    background: linear-gradient(135deg, var(--dm-borde-claro), var(--dm-fondo-claro));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-bottom: 1px solid var(--dm-borde-claro);
}

.medico-foto-wrap .medico-foto {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.medico-foto-wrap .medico-foto-fallback {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: var(--medical-blue, #003087);
    opacity: 0.45;
}

/* Tarjetas de médicos enlazadas al detalle */
.medico-card-link .card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.medico-card-link:hover .card {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(var(--dm-primario-rgb, 0,48,135), 0.15) !important;
    border-color: var(--medical-blue, #003087) !important;
}
/* Tablas con dropdowns de acciones: sin recorte del menú desplegable */
.tabla-sin-scroll {
    overflow: visible !important;
}
.tabla-sin-scroll .table {
    min-width: 100%;
}

/* ---- Tablas responsive: filas -> tarjetas apiladas en móvil ----
   Cada <td> lleva data-label="Etiqueta"; en pantallas pequeñas el encabezado
   se oculta y cada fila se vuelve una tarjeta con la etiqueta encima del valor.
   Se activa añadiendo la clase .tabla-cards al wrapper (.table-responsive o .tabla-sin-scroll). */
@media (max-width: 767.98px) {
    .table-responsive.tabla-cards,
    .tabla-sin-scroll.tabla-cards {
        overflow: visible !important;
    }
    .table-responsive.tabla-cards table,
    .table-responsive.tabla-cards thead,
    .table-responsive.tabla-cards tbody,
    .table-responsive.tabla-cards tr,
    .table-responsive.tabla-cards td,
    .tabla-sin-scroll.tabla-cards table,
    .tabla-sin-scroll.tabla-cards thead,
    .tabla-sin-scroll.tabla-cards tbody,
    .tabla-sin-scroll.tabla-cards tr,
    .tabla-sin-scroll.tabla-cards td {
        display: block;
        width: 100%;
    }
    .table-responsive.tabla-cards thead,
    .tabla-sin-scroll.tabla-cards thead {
        display: none;
    }
    .table-responsive.tabla-cards tr,
    .tabla-sin-scroll.tabla-cards tr {
        border: 1px solid var(--dm-borde-claro);
        border-radius: .5rem;
        margin-bottom: .75rem;
        padding: .5rem .75rem;
        background: var(--dm-fondo-tarjeta);
    }
    .table-responsive.tabla-cards tr + tr,
    .tabla-sin-scroll.tabla-cards tr + tr {
        border-top: 1px solid rgba(0, 0, 0, .1);
    }
    .table-responsive.tabla-cards td,
    .tabla-sin-scroll.tabla-cards td {
        border: 0;
        padding: .3rem .25rem;
        text-align: left !important;
        word-break: break-word;
    }
    .table-responsive.tabla-cards td::before,
    .tabla-sin-scroll.tabla-cards td::before {
        content: attr(data-label);
        display: block;
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        line-height: 1.2;
        color: #6c757d;
        margin-bottom: .1rem;
    }
    .table-responsive.tabla-cards td:empty::before,
    .tabla-sin-scroll.tabla-cards td:empty::before {
        content: attr(data-label);
    }
    .table-responsive.tabla-cards td[data-label=""],
    .table-responsive.tabla-cards td:not([data-label]),
    .tabla-sin-scroll.tabla-cards td[data-label=""],
    .tabla-sin-scroll.tabla-cards td:not([data-label]) {
        display: none;
    }
    .table-responsive.tabla-cards td .dropdown,
    .tabla-sin-scroll.tabla-cards td .dropdown,
    .table-responsive.tabla-cards td .btn-group,
    .tabla-sin-scroll.tabla-cards td .btn-group {
        float: none;
        display: inline-block;
    }
    .table-responsive.tabla-cards td .dropdown-menu,
    .tabla-sin-scroll.tabla-cards td .dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
        max-width: 90vw;
    }
}


/* ============ Botón toggle modo claro/oscuro ============ */
.btn-modo-tema {
    border: 1px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--dm-transicion), transform var(--dm-transicion), border-color var(--dm-transicion);
}

.btn-modo-tema:hover {
    background: var(--dm-acento);
    border-color: var(--dm-acento);
    color: var(--dm-sidebar-bg);
    transform: rotate(-12deg);
}