/* =============================
   RESET GENERAL
============================= */
body {
    margin: 0;
    font-family: 'Poppins', 'Segoe UI', sans-serif;

    display: flex;
    flex-direction: column;
    min-height: 100vh;

    background: #f5f7fa;
}

/* CONTENIDO PRINCIPAL */
.main-content {
    flex: 1;
    flex-direction: column;
}


/* =============================
   HEADER
============================= */
.main-header {
    background: white;
    box-shadow: 0px 2px 8px rgba(0,0,0,0.08);
}

.header-container {
    max-width: 1200px;
    margin: auto;
    padding: 10px 20px;
    
    display: flex;
    align-items: center;
    justify-content: space-between;

}

.logo-header {
    height: 60px;
}
/* =============================
   BOTÓN HEADER "INICIO"
============================= */

.header-home {
    background: #0CB8B6;
    color: white;

    padding: 6px 14px;
    border-radius: 20px;

    text-decoration: none;
    font-size: 13px;
    font-weight: 500;

    display: inline-block;

    transition: all 0.25s ease;

    box-shadow: 0px 4px 10px rgba(0,0,0,0.1);
}

/* Hover */
.header-home:hover {
    background: #089a98;
    transform: translateY(-1px);
}


/* =============================
   HERO
============================= */
/* =============================
   HERO NUEVO CON IMAGEN
============================= */

.hero {
    background: #f5f7fa;
    padding: clamp(60px, 8vw, 100px) 20px;
}

/* Contenedor principal */
.hero-container {
    max-width: 1200px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 5vw, 60px);
}

/* Texto */
.hero-text h1 {
    font-size: clamp(26px, 5vw, 42px);
    color: #1f2937;
}

.hero-text p {
    font-size: clamp(14px, 2.5vw, 18px);
    margin: 15px 0;
    color: #4b5563;
}

/* Imagen derecha */
.hero-image {
    flex: 1.5;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero h1 {
    font-size: 42px;
}

.hero p {
    margin: 15px 0;
}


/* =============================
   BOTONES
============================= */
.btn-primary {
    background: white;
    color: #0CB8B6;
    padding: 14px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0px 6px 15px rgba(0,0,0,0.12);
    border: none;
    font-size: 14px;
    font-family: inherit;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.btn-primary:hover {
    background: #0CB8B6;
    color: white;

    transform: translateY(-2px);

    box-shadow: 0px 10px 25px rgba(0,0,0,0.2);
}

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

    box-shadow: 0px 4px 10px rgba(0,0,0,0.15);
}

/* =============================
   SERVICIOS
============================= */
.services {
    padding: 60px 20px;
    text-align: center;
    background: white;
}

.section-title {
    margin-bottom: 40px;
    font-size: 28px;
}

.services-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
}

.service-card {
    background: #f5f7fa;
    padding: 25px;
    border-radius: 14px;

    box-shadow: 0px 8px 20px rgba(0,0,0,0.08); 

    transition: all 0.3s ease;
}

/* Hover moderno */
.service-card:hover {
    transform: translateY(-6px);

    box-shadow: 0px 12px 30px rgba(0,0,0,0.15);
}

.service-card img {
    height: 50px;
}


/* =============================
   DOCTOR IMAGE PREMIUM
============================= */
.doctor {
    padding: 80px 20px;
    background: #f5f7fa;
}

.doctor-container {
    max-width: 1100px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    flex-wrap: wrap;
}

.doctor-frame {
    background: #0CB8B6;
    padding: 18px;
    border-radius: 24px;

    box-shadow: 0px 20px 45px rgba(0,0,0,0.18);
    position: relative;
}

.doctor-frame::before {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 16px;
    background: white;
    z-index: 0;
}

.doctor-frame img {
    width: 320px;
    border-radius: 16px;
    display: block;
    position: relative;
    z-index: 1;
}

.doctor-info {
    max-width: 520px;
}


/* =============================
   PROCESO
============================= */
.process {
    padding: 60px 20px;
    text-align: center;
}

.process-container {
    display: flex;
    justify-content: center;
    gap: 50px;
    flex-wrap: wrap;
}

.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.step span {
    background: #0CB8B6;
    color: white;

    width: 60px;
    height: 60px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    font-size: 20px;

    box-shadow: 0px 6px 15px rgba(0,0,0,0.2);

    transition: transform 0.3s ease, box-shadow 0.3s ease;
}


.step p {
    margin: 0;
}


/* =============================
   CTA
============================= */
.cta {
    padding: clamp(50px, 6vw, 80px) 20px;
    text-align: center;
    background: #f5f7fa;
}


.cta-content {
    margin-top: 40px;
}

.cta-content h3 {
    margin-bottom: 20px;
    font-size: clamp(18px, 3vw, 22px);
}

/* Ajuste pasos dentro de CTA */
.cta .process-container {
    margin-top: 20px;
}


/* =============================
   FOOTER
============================= */
.main-footer {
    background: #0CB8B6;
    color: white;
    margin-top: auto;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    padding: 20px;

    display: flex;
    justify-content: space-between;
}

.footer-left a {
    color: white;
}


/* =============================
   EN CONSTRUCCIÓN
============================= */
.construction {
    flex: 1;

    /* ✅ hace el bloque más alto */
    min-height: calc(100vh - 120px);

    background: linear-gradient(135deg, #0CB8B6, #089a98);

    display: flex;
    align-items: center;
    justify-content: center;

    /* ✅ MÁS ESPACIO VERTICAL */
    padding: 80px 20px;
}

.construction-box {
    background: white;
    padding: 45px;
    border-radius: 16px;

    box-shadow: 0px 10px 25px rgba(0,0,0,0.12);
    max-width: 420px;

    text-align: center;
}


.construction-logo {
    height: 130px;   
    max-width: 100%;
    display: block;
    margin: 0 auto 20px auto;
}

/* =============================
   RESPONSIVE
============================= */
@media (max-width: 768px) {

    .doctor-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .doctor-frame img {
        width: 260px;
    }

    .process-container {
        flex-direction: column;
        gap: 25px;
    }

    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

}

/* =============================
   ICONOS SPRITE
============================= */

.icon {
    width: 80px;
    height: 80px;

    margin: 0 auto 15px auto;

    background-image: url("img/service-1.png");
    background-repeat: no-repeat;
    background-size: 500px; /* ajusta según tamaño real */
}


.icon-rx {
    background-position:-410px -100px;
}

.icon-endo {
    background-position: -105px -355px;
}

.icon-bleach {
    background-position: -315px -355px;
}

.icon-resina {
    background-position: -10px -355px;
}

.icon-protesis {
    background-position: -210px -265px;
}

.icon-peridoncia {
    background-position: -410px -355px;
}

.icon-ninos {
    background-position: -310px -265px;
}

.icon-carillas {
    background-position: -210px -5px;
}

.icon-extract {
    background-position: -10px -100px;
}

.icon-cirugias {
    background-position: -310px -100px;
}

.icon-clean {
    background-position: -310px -355px;
}

.icon-value {
    background-position: -10px -265px;
}

/* =============================
   ANIMACIONES BASE
============================= */

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

/* cuando aparece */
.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* delay opcional */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.3s; }
.delay-3 { transition-delay: 0.5s; }


/* =============================
   ANIMACIÓN HOVER ICONOS
============================= */

.service-card:hover .icon {
    transform: scale(1.1);
}

/* icono animado */
.icon {
    transition: transform 0.3s ease;
}


/* =============================
   BOTONES MÁS PROFESIONALES
============================= */

.btn-primary {
    position: relative;
    overflow: hidden;
}

/* efecto luz */
.btn-primary::after {
    content: "";
    position: absolute;

    width: 120%;
    height: 120%;

    background: rgba(255,255,255,0.2);

    top: -100%;
    left: -100%;

    transform: rotate(25deg);
    transition: 0.5s;
}

.btn-primary:hover::after {
    top: 0;
    left: 0;
}

/* =====================================
   RESPONSIVE MEJORADO (NO ROMPE NADA)
   Agregar al FINAL del archivo
===================================== */

/* ✅ Tipografía fluida */
.hero h1 {
    font-size: clamp(26px, 5vw, 42px);
}

.hero p {
    font-size: clamp(14px, 2.5vw, 18px);
}

.section-title {
    font-size: clamp(20px, 4vw, 28px);
}

.service-card h3 {
    font-size: clamp(16px, 3vw, 20px);
}

.service-card p {
    font-size: clamp(13px, 2.5vw, 15px);
}

.doctor-info h2 {
    font-size: clamp(20px, 4vw, 28px);
}

.step p {
    font-size: clamp(13px, 3vw, 15px);
}


/* ✅ Espaciado dinámico */
.hero {
    padding: clamp(60px, 8vw, 100px) 20px;
}

.services,
.doctor,
.process,
.cta {
    padding: clamp(40px, 6vw, 70px) 20px;
}


/* ✅ Cards más cómodas en móvil */
.service-card {
    padding: clamp(15px, 4vw, 25px);
}


/* ✅ Imagen del doctor adaptable */
.doctor-frame img {
    width: clamp(220px, 40vw, 320px);
    max-width: 100%;
}


/* ✅ ICONOS NO SE ROMPEN */
.icon img {
    width: clamp(50px, 10vw, 70px);
}


/* =====================================
   BREAKPOINT TABLET
===================================== */
@media (max-width: 768px) {

    /* ✅ Doctor en columna */
    .doctor-container {
        flex-direction: column;
        text-align: center;
    }

    /* ✅ Pasos en columna */
    .process-container {
        flex-direction: column;
        gap: 25px;
    }

    /* ✅ Footer vertical */
    .footer-container {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }

}


/* =====================================
   BREAKPOINT MÓVIL REAL
===================================== */
@media (max-width: 480px) {

    /* ✅ Hero compactado */
    .hero h1 {
        font-size: 26px;
    }

    .hero p {
        font-size: 14px;
    }

    /* ✅ Servicios 1 columna */
    .services-container {
        grid-template-columns: 1fr;
    }

    /* ✅ Espaciado más relajado */
    .service-card {
        margin-bottom: 10px;
    }

    /* ✅ Doctor mejor espaciado */
    .doctor-container {
        gap: 20px;
    }

    /* ✅ CTA sin overflow */
    .btn-primary {
        padding: 12px 22px;
        font-size: 14px;
    }

}

@media (max-width: 768px) {

    .hero-container {
        flex-direction: column;
        text-align: center;
    }

    .hero-text {
        max-width: 100%;
    }

}

/* =============================
   HERO CARD (NUEVO)
============================= */

.hero {
    background: #0CB8B6;
    padding: clamp(40px, 6vw, 80px) 20px;
}

/* Card blanca */
.hero-card {
    max-width: 1200px;
    margin: auto;

    background: white;
    border-radius: 20px;

    padding: clamp(30px, 5vw, 50px);

    box-shadow: 0px 15px 40px rgba(0,0,0,0.15);
}

/* Contenido interno */
.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(20px, 5vw, 50px);
}

/* Texto */
.hero-text {
    max-width: 520px;
}

.hero-text h1 {
    font-size: clamp(26px, 5vw, 40px);
    color: #1f2937;
}

.hero-text p {
    font-size: clamp(14px, 2.5vw, 18px);
    margin: 15px 0;
    color: #4b5563;
}

/* Imagen */
.hero-image img {
    width: clamp(350px, 55vw, 650px);
    max-width: 100%;
    display: block;
}

/* =============================
   FORMULARIO MODERNO
============================= */

.form-section {
    background: #D7D6D2;

    min-height: auto;

    display: flex;
    justify-content: center;
    align-items: center;

    padding: clamp(30px, 5vw, 60px) 20px;
}


/* Card */
.form-card {
    background: white;

    width: 100%;
    max-width: 380px;

    padding: 30px;
    border-radius: 18px;

    box-shadow: 0px 15px 40px rgba(0,0,0,0.15);

    text-align: center;
}

/* Títulos */
.form-card h2 {
    margin-bottom: 10px;
    color: #086b69;
}

.form-subtitle {
    margin-bottom: 20px;
    color: #6b7280;
}

/* Inputs */
.form-card input {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    outline: none;
    transition: 0.2s;
}

.form-card input:focus {
    border-color: #0c8a88;
    box-shadow: 0px 12px 30px rgba(31, 30, 30, 0.12);
}

input[type="date"] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 12px;
    min-height: 58px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    font-size: 14px;
    background: #fff;
}

/* =====================================
   DATE PICKER UNIFICADO
===================================== */

.form-card input[type="date"] {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    font-size: 14px;
    font-family: inherit;
    background-color: #f5f7fa;
    color: #2b3646;
    outline: none;
    transition: all 0.2s ease;
    height: 42px;
    min-height: 42px;
    appearance: none;
    -webkit-appearance: none;
}

.form-card input[type="date"]:focus {
    border-color: #07605f;
    box-shadow: 0px 0px 0px 2px rgba(12,184,182,0.2);
}

/* Checkbox */
.privacy-label {
    display: flex;
    align-items: center;
    gap: 8px;

    font-size: 13px;
    text-align: left;

    margin-bottom: 20px;
}

.privacy-label input {
    width: auto;
    margin: 0;
}

.privacy-label a {
    color: #0d9895;
    text-decoration: none;
}

.privacy-label a:hover {
    text-decoration: underline;
}

/* texto */
.privacy-label span {
    line-height: 1.3;
}

/* Botón */
.form-card button {
    width: 100%;
    max-width: 100%;

    box-sizing: border-box;
}

/* =============================
   RESPONSIVE
============================= */

@media (max-width: 480px) {

    .form-card {
        padding: 20px;
    }

}

.modal {
    display: none;
    position: fixed;
    top: 0; left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.4);

    align-items: center;
    justify-content: center;
}

.modal.active {
    display: flex;
}


.modal-card {
    background: white;

    width: 90%;
    max-width: 420px;

    padding: 25px;
    border-radius: 16px;

    box-shadow: 0px 20px 40px rgba(0,0,0,0.25);

    text-align: center;
}

/* Título */
.modal-card h3 {
    color: #0CB8B6;
    margin-bottom: 15px;
}

/* Texto */
.modal-card p {
    font-size: 14px;
    color: #4b5563;

    margin-bottom: 20px;
    line-height: 1.5;
}

/* Botón */
.modal-close {
    width: 100%;
}

/* =============================
   AGENDA
============================= */

.agenda-section {
    background: #D7D6D2;
    padding: clamp(40px, 6vw, 80px) 20px;
}

.agenda-title {
    text-align: center;
    margin-bottom: 30px;
    color: #0CB8B6;
}

/* GRID */
.agenda-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;

    max-width: 1000px;
    margin: auto;
}

/* CARD */
.agenda-card {
    max-width: 1100px; 
    margin: 0 auto;
    padding: 25px;
    border-radius: 20px;
    background: white;
}

/* CALENDAR */
.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

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

.calendar-grid div {
    padding: 10px;
    text-align: center;

    border-radius: 8px;
    background: #f5f7fa;

    cursor: pointer;
}

/* HOVER */
.calendar-grid div:hover {
    background: #bdeae0;
}

/* SELECCIONADO */
.calendar-grid .selected {
    background: #0CB8B6;
    color: white;
}

/* HORARIOS */
.time-slot {
    padding: 12px;
    margin-bottom: 10px;

    border: 1px solid #8a8b8c;
    border-radius: 10px;

    text-align: center;
    cursor: pointer;

    transition: 0.2s;
}

.time-slot:hover {
    border-color: #0CB8B6;
    background: #e6fffa;
}

/* =============================
   RESPONSIVE
============================= */

@media (max-width: 768px) {

    .agenda-grid {
        grid-template-columns: 1fr;
    }

}
/* =============================
   AGENDA CARD UNIFICADA
============================= */

.agenda-section {
    background: #D7D6D2;
    padding: clamp(40px, 6vw, 80px) 20px;

    display: flex;
    justify-content: center;
}

/* Card igual al formulario */
.agenda-card {
    background: white;

    width: 100%;
    max-width: 1200px;

    border-radius: 18px;
    padding: 25px;

    box-shadow: 0px 15px 40px rgba(0,0,0,0.15);

    text-align: center;
}

/* Header */
.agenda-card h2 {
    color: #07605e;
    margin-bottom: 8px;
}

.agenda-subtitle {
    margin-bottom: 20px;
    color: #6b7280;
}

/* CALENDARIO */
.calendar-box {
    margin-bottom: 20px;
}

/* NAV */
.calendar-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 10px;
}

.nav-btn {
    background: #f5f7fa;
    border: none;
    border-radius: 8px;

    width: 32px;
    height: 32px;

    cursor: pointer;
}

.nav-btn:hover {
    background: #e6fffa;
}

/* HEADER DÍAS */
.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);

    font-size: 12px;
    color: #6b7280;

    margin-bottom: 8px;
}

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

.calendar-grid div {
    padding: 10px;

    border-radius: 8px;
    background: #f5f7fa;

    text-align: center;
    cursor: pointer;

    font-size: 12px;
}

/* Hover días */
.calendar-grid div:hover {
    background: #ccfbf1;
}

/* Día seleccionado */
.calendar-grid .selected {
    background: #0CB8B6;
    color: white;
}

/* HORARIO */
.time-box {
    text-align: left;
    margin-bottom: 20px;
}

.time-box label {
    font-size: 13px;
    display: block;
    margin-bottom: 6px;
}

.time-box select {
    width: 100%;
    padding: 10px;

    border-radius: 10px;
    border: 1px solid #d1d5db;

    font-size: 14px;
}

/* RESPONSIVE */
@media (max-width: 480px) {

    .calendar-grid div {
        padding: 8px;
        font-size: 11px;
    }

}

.calendar-grid .disabled {
    background: #9ca3af; /* ✅ gris más oscuro */
    color: white;
    cursor: not-allowed;
}

.calendar-grid .disabled:hover {
    background: #9ca3af; /* ✅ no cambia en hover */
}

/* =============================
   VALIDACIÓN VISUAL
============================= */

.input-group {
    position: relative;
}

/* ERROR INPUT */
.input-error {
    border-color: #ef4444 !important;
}

/* TOOLTIP */
.error-tooltip {
    position: absolute;
    top: -45px;
    left: 10px;

    background: white;
    border-radius: 8px;

    padding: 8px 12px;

    font-size: 13px;

    box-shadow: 0px 10px 20px rgba(0,0,0,0.15);

    display: none;
}

/* Flechita */
.error-tooltip::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 15px;

    width: 10px;
    height: 10px;

    background: white;
    transform: rotate(45deg);
}
/* =============================
   CONFIRMACIÓN
============================= */

.confirm-section {
    background: #D7D6D2;

    display: flex;
    justify-content: center;

    padding: clamp(40px, 6vw, 80px) 20px;
}

/* Card */
.confirm-card {
    background: white;

    width: 100%;
    max-width: 420px;

    border-radius: 18px;
    padding: 25px;

    box-shadow: 0px 15px 40px rgba(0,0,0,0.15);

    text-align: center;
}

/* Header */
.confirm-card h2 {
    color: #07605e;
    margin-bottom: 8px;
}

.confirm-subtitle {
    margin-bottom: 20px;
    color: #6b7280;
}

/* Datos */
.confirm-data {
    text-align: left;
    margin-bottom: 25px;
}

.confirm-row {
    display: flex;
    justify-content: space-between;

    padding: 10px 0;
    border-bottom: 1px solid #f1f1f1;

    font-size: 14px;
}

.confirm-row .label {
    color: #6b7280;
    font-weight: 500;
}

/* Destacar fecha */
.confirm-row.highlight {
    color: #0CB8B6;
    font-weight: 600;
}

/* =============================
   ACCIONES CONFIRMACIÓN
============================= */

.confirm-actions {
    display: flex;
    justify-content: center; 
    gap: 15px; 
    margin-top: 20px;
}

.confirm-actions button {
    min-width: 140px; 
    flex: 0;
}

/* Botón secundario */
.btn-secondary {
    flex: 1;

    border: 2px solid #0CB8B6;
    background: white;
    color: #0CB8B6;

    padding: 12px;
    border-radius: 30px;

    cursor: pointer;

    transition: all 0.3s ease;
}

.btn-secondary:hover {
    background: #0CB8B6;
    color: white;
}

/* Timer */
.confirm-timer {
    margin-top: 15px;
    font-size: 14px;
    color: #6b7280;
}

.confirm-timer-time {
    margin-top: 15px;
    font-size: 15px;
    color: #07605e;
}
/* =====================================
   HARD FIX MOBILE IOS / ANDROID
===================================== */

/* ✅ Base universal */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* ✅ iOS fix tipografía */
html {
    -webkit-text-size-adjust: 100%;
}

/* ✅ Evita escalado raro en iOS */
body {
    overflow-x: hidden;
}

/* =====================================
   CALENDAR FIX (CRÍTICO)
===================================== */

.calendar-box {
    width: 100%;
}

.calendar-header,
.calendar-grid {
    width: 100%;
    max-width: 100%;
}

/* ✅ FIX principal iOS */
.calendar-grid {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

/* ✅ evita colapso en Safari */
.calendar-grid div {
    min-width: 0;
    flex-shrink: 0;
}

/* =====================================
   CARD FIX MOBILE
===================================== */

.confirm-card,
.form-card {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

/* =====================================
   BUTTON FIX MOBILE
===================================== */

.confirm-actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* ✅ clave */
    gap: 12px;
}

.confirm-actions button {
    min-width: 130px;
}

/* =====================================
   SELECT FIX iOS
===================================== */

select {
    appearance: none;
    -webkit-appearance: none;
}

/* =====================================
   MEDIA QUERIES REALES
===================================== */

/* 📱 MOBILE TOP (≤480px) */
@media (max-width: 480px) {

    .main-content {
        padding: 0;
    }

    .agenda-section,
    .confirm-section {
        padding: 20px 10px;
    }

    .agenda-card,
    .confirm-card {
        padding: 18px;
    }

    .calendar-grid {
        gap: 4px;
    }

    .calendar-grid div {
        padding: 8px;
        font-size: 11px;
    }

    .nav-btn {
        width: 28px;
        height: 28px;
    }

    .confirm-actions {
        flex-direction: column;
        align-items: center;
    }

    .confirm-actions button {
        width: 100%;
        max-width: 280px;
    }
}

/* 📱 TABLET (≤768px) */
@media (max-width: 768px) {

    .calendar-grid {
        gap: 5px;
    }

    .agenda-card,
    .confirm-card {
        max-width: 90%;
    }

}

/* =====================================
   SAFARI GRID FALLBACK
===================================== */

/* Si iOS falla con grid, usa flex fallback */
@supports not (display: grid) {

    .calendar-grid {
        display: flex;
        flex-wrap: wrap;
    }

    .calendar-grid div {
        width: calc(100% / 7);
    }
}

/* =====================================
   EXTRA SAFE: FORZAR RENDER
===================================== */

.calendar-grid,
.calendar-header,
.agenda-card {
    transform: translateZ(0);
}

/* =============================
   NOTA FORMULARIO
============================= */

.form-note {
    font-size: 13px;
    color: #6b7280;

    text-align: left;
    margin-bottom: 10px;
}

/* SELECT */
.form-card select {
    width: 100%;
    padding: 12px;

    border-radius: 10px;
    border: 1px solid #d1d5db;

    font-size: 14px;

    margin-bottom: 12px;

    outline: none;
    transition: 0.2s;
}

.form-card select:focus {
    border-color: #0CB8B6;
    box-shadow: 0px 0px 0px 2px rgba(12,184,182,0.2);
}

/* =============================
   SELECT UNIFICADO (EDAD)
============================= */

.form-card select {
    width: 100%;
    box-sizing: border-box;

    padding: 12px;
    margin-bottom: 12px;

    border-radius: 10px;
    border: 1px solid #d1d5db;

    font-size: 14px;
    font-family: inherit;

    background-color: #f5f7fa; /* ✅ igual tono que inputs */
    color: #2b3646;

    outline: none;

    transition: all 0.2s ease;

    /* ✅ Compatibilidad móvil */
    appearance: none;
    -webkit-appearance: none;
}

/* FOCUS */
.form-card select:focus {
    border-color: #07605f;
    box-shadow: 0px 0px 0px 2px rgba(12,184,182,0.2);
}

/* ICONO FLECHA CUSTOM */
.form-card .input-group select {
    background-image: url("data:image/svg+xml;utf8,<svg fill='%236b7280' height='20' viewBox='0 0 20 20' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M5 7l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;

    padding-right: 40px; /* espacio para flecha */
}

/* =============================
   AJUSTE LEYENDA EDAD
============================= */

.form-note {
    margin-top: 4px;    /* ✅ más pegado al select */
    margin-bottom: 16px; /* ✅ separa del siguiente campo */
}

/* =============================
   MENU HEADER (SOLO INDEX)
============================= */

.header-nav {
    display: flex;
    align-items: center;
    gap: 4px;
}

.header-nav a {
    text-decoration: none;
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;

    padding: 9px 18px;
    border-radius: 999px;

    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

/* Hover tipo "pill" (fondo turquesa suave, texto oscuro) */
.header-nav a:hover,
.header-nav a:focus-visible {
    background: #8edbd9;
    color: #07514f;
    transform: translateY(-1px);
}

/* =============================
   RESPONSIVE MENU
============================= */
@media (max-width: 768px) {

    .header-nav {
        display: none; /* ✅ escondido en móvil */
    }

}

html {
    scroll-behavior: smooth;
}

/* =============================
   ADMIN NAV (IGUAL INDEX)
============================= */

.admin-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;

    padding: 15px 0;
}

/* links */
.admin-nav a {
    text-decoration: none;
    color: #4b5563;
    font-size: 15px;
    font-weight: 500;

    padding: 9px 18px;
    border-radius: 999px;

    transition: background-color 0.25s ease, color 0.25s ease, transform 0.15s ease;
}

/* hover tipo "pill", igual al menú general */
.admin-nav a:hover,
.admin-nav a:focus-visible {
    background: #8edbd9;
    color: #07514f;
    transform: translateY(-1px);
}

/* =============================
   DASHBOARD - INDICADORES
============================= */

.admin-summary {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin: 25px 0 30px 0;
    align-items: stretch;
}

.admin-box {
    border-radius: 14px;
    padding: 20px;
    color: white;
    text-align: center;
    box-shadow: 0px 8px 20px rgba(0,0,0,0.12);
    height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.admin-box h3 {
    font-size: 32px;
    margin: 0 0 8px 0;
    font-weight: 700;
}

.admin-box p {
    margin: 0;
    font-size: 18px;
    line-height: 1.3;
}

/* Colores */
.admin-box-primary {
    background: #14b8b6; /* turquesa */
}

.admin-box-warning {
    background: #f59e0b; /* naranja */
}

.admin-box-success {
    background: #16a34a; /* verde */
}

.admin-box-danger {
    background: #ef4444; /* rojo */
}

.admin-box-secondary {
    background: #b1b2b3; /* gris */
    color:#0f172a;
}

/* Lista de próximas citas */
.lista-citas {
    margin: 18px 0 0 0;
    padding-left: 20px;
}

.lista-citas li {
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 18px;
}

@media (max-width: 1100px) {
    .admin-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .admin-summary {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   CITAS ADMINISTRACIÓN
========================================================= */
        .citas-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
            width: 100%;
            box-sizing: border-box;
        }

        .week-nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 20px;
            margin-bottom: 20px;
        }

        .week-range {
            display: inline-block;
            padding: 12px 28px;
            background: linear-gradient(
                135deg,
                #0CB8B6,
                #0d9997
            );
            color: #ffffff;
            font-weight: 700;
            border-radius: 999px;
            box-shadow: 0 8px 18px rgba(0,0,0,0.15);
            text-align: center;
        }

        .calendar-week {
            max-height: 80vh;
            overflow-x: auto;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: #fff;
            border-radius: 18px;
            box-shadow: 0px 15px 40px rgba(0,0,0,0.12);
            padding: 16px;
            margin-bottom: 24px;
        }

        .calendar-week table {
            width: 100%;
            border-collapse: collapse;
            min-width: 1100px;
        }

        .calendar-week th,
        .calendar-week td {
            border: 1px solid #6b7280;
            vertical-align: top;
        }

        .calendar-week th {
            position: sticky;
            top: 0;
            z-index: 300;
            background: #e1e2e3;
            padding: 10px;
            text-align: center;
            font-size: 14px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.08);
        }

        .hour-col {
            position: sticky;
            left: 0;
            background: #103c4a;
            color: #ffffff;
            font-weight: 700;
            border-right: 2px solid #334155;
            z-index: 200;
            width: 90px;
            text-align: center;
            font-weight: 600;
            font-size: 13px;
        }

        .calendar-week thead .hour-col {
            position: sticky;
            top: 0;
            left: 0;
            z-index: 400;
            background: linear-gradient(
                180deg,
                #1e293b,
                #0f172a
            );
            color: #ffffff;
        }

        .calendar-week thead th {
            position: sticky;
            top: 0;
            z-index: 300;
            background: linear-gradient(
                180deg,
                #64748b,
                #475569
            );
            color: #ffffff;
            font-weight: 700;
            box-shadow: 0 2px 8px rgba(0,0,0,.15);
            border-bottom: 3px solid #334155;
        }

        .time-cell {
            background: #ffffff;
            transition: background .2s ease;
            height: 80px;
            padding: 6px;
        }

        .calendar-week td:hover {
            background: #f0fdfa;
        }

        .cita-card-mini {
            background: #0CB8B6;
            color: #fff;
            border-radius: 8px;
            padding: 6px 8px;
            margin-bottom: 6px;
            font-size: 12px;
            line-height: 1.35;
            box-shadow: 0 4px 10px rgba(0,0,0,.12);
        }

        .cita-card-mini .estatus {
            display: inline-block;
            margin-top: 4px;
            font-size: 11px;
            font-weight: 600;
            padding: 2px 6px;
            border-radius: 10px;
            background: rgba(255,255,255,.18);
        }

        .cita-card-mini .acciones {
            margin-top: 6px;
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
        }

        .btn-mini {
            border: none;
            border-radius: 6px;
            padding: 4px 8px;
            font-size: 11px;
            cursor: pointer;
        }

        .btn-mini-edit {
            background: #fef3c7;
            color: #92400e;
        }

        .btn-mini-cancel {
            background: #fee2e2;
            color: #991b1b;
        }

        .form-admin-card {
            background: #fff;
            border-radius: 20px;
            box-shadow: 0px 15px 40px rgba(0,0,0,0.12);
            padding: 35px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .form-admin-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(300px,1fr));
            gap: 24px 40px;
        }

        .form-admin-grid label {
            display: block;
            margin-bottom: 6px;
            font-size: 14px;
            font-weight: 600;
            color: #374151;
        }

        .form-admin-grid input,
        .form-admin-grid select,
        .form-admin-grid textarea {

            width: 100%;
            box-sizing: border-box;

            padding: 12px 14px;

            border: 1px solid #d1d5db;
            border-radius: 10px;

            font-size: 14px;
            font-family: inherit;

            background: #f9fafb;

            transition: all .2s ease;
        }

        /* El input type="date" trae su propio widget nativo del
           navegador con una altura intrínseca distinta a la de los
           demás campos; se fija una altura explícita para que
           todos los campos del formulario midan lo mismo. */
        .form-admin-grid input[type="date"] {
            height: 47px;
            min-height: 47px;
            line-height: 1.4;
        }

        .form-admin-grid input[type="date"]::-webkit-calendar-picker-indicator {
            padding: 4px;
            cursor: pointer;
        }

        .form-admin-grid input:focus,
        .form-admin-grid select:focus,
        .form-admin-grid textarea:focus {

            outline: none;

            border-color: #0CB8B6;

            box-shadow: 0 0 0 3px rgba(12,184,182,.15);

            background: #fff;
        }

        .form-admin-grid .full {
            grid-column: 1 / -1;
        }

        .flash-ok,
        .flash-error {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 2000;

            display: flex;
            align-items: center;
            gap: 10px;

            max-width: 380px;
            padding: 14px 18px;
            border-radius: 12px;

            box-shadow: 0 10px 30px rgba(0,0,0,0.18);
            font-size: 14px;
            font-weight: 600;

            animation: toastEntrada 0.3s ease, toastSalida 0.3s ease 3.7s forwards;
        }

        .flash-ok {
            background: #dcfce7;
            color: #166534;
            border-left: 4px solid #16a34a;
        }

        .flash-error {
            background: #fee2e2;
            color: #991b1b;
            border-left: 4px solid #dc2626;
        }

        @keyframes toastEntrada {
            from { opacity: 0; transform: translateX(30px); }
            to { opacity: 1; transform: translateX(0); }
        }

        @keyframes toastSalida {
            from { opacity: 1; transform: translateX(0); }
            to { opacity: 0; transform: translateX(30px); visibility: hidden; }
        }

        @media (max-width: 480px) {
            .flash-ok,
            .flash-error {
                left: 16px;
                right: 16px;
                max-width: none;
            }
        }

        .status-confirmada { background: #54c09e !important; }
        .status-atendida { background: #06a340 !important; }
        .status-pendiente { background: #d2af31 !important; }
        .status-cancelada { background: #a71c1c !important; }
        .status-no-show { background: #788a8d !important; }

        @media (max-width: 768px) {
            .form-admin-grid {
                grid-template-columns: 1fr;
            }

            .week-nav {
                flex-direction: column;
                align-items: stretch;
            }
        }

/* =========================================================
   CITAS - MOBILE
========================================================= */

@media (max-width: 768px) {

   .citas-wrapper {
        padding: 10px;
    }

    .week-nav {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .week-range {
        font-size: 20px;
    }

    .calendar-week {
        padding: 10px;
    }

    .calendar-week table {
        min-width: 900px;
    }

   .form-admin-card {
        padding: 20px;
    }

    .form-admin-grid{
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .admin-form-actions {
        flex-direction: column;
        align-items: center;
    }

    .admin-form-actions button,
    .admin-form-actions a {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .cita-card-mini {
        font-size: 11px;
    }

    .cita-card-mini .acciones {
        flex-direction: column;
    }

    .btn-mini {
        width: 100%;
    }

}

@media (max-width: 768px) {

    .form-admin-grid input,
    .form-admin-grid select,
    .form-admin-grid textarea {
        font-size: 16px;
    }

}

/* ===================================
   RECETA
=================================== */

.receta-wrapper{
    max-width:1200px;
    margin:0 auto;
    padding:20px;
}

.receta-card{
    background:#fff;
    border-radius:18px;
    padding:30px;
    box-shadow:0 15px 40px rgba(0,0,0,.12);
}

.receta-section{
    margin-bottom:35px;
}

.receta-section h3{
    color:#07605e;
    border-bottom:2px solid #0CB8B6;
    padding-bottom:10px;
    margin-bottom:20px;
}

.receta-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 30px;
}

.receta-grid .full{
    grid-column:1 / -1;
}

.receta-grid label{
    display:block;
    margin-bottom:6px;
    font-weight:600;
}

.receta-grid input,
.receta-grid textarea,
.receta-grid select{
    width:100%;
    box-sizing:border-box;
    padding:12px;
    border:1px solid #d1d5db;
    border-radius:10px;
}

.receta-grid textarea{
    min-height:100px;
    resize:vertical;
}

.medicamento-card{
    background:#f9fafb;
    border:1px solid #e5e7eb;
    border-radius:12px;
    padding:20px;
    margin-bottom:20px;
}

.btn-add-medicamento{
    margin-top:10px;
}

.receta-actions{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:25px;
}

@media(max-width:768px){

    .receta-grid{
        grid-template-columns:1fr;
    }

    .receta-actions{
        flex-direction:column;
    }

}

/* =====================================
   RECETA - DATOS DE CITA
===================================== */

.receta-info {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin: 25px 0 35px 0;
}

.receta-info-item {
    background: #f5f7fa;
    border-left: 4px solid #0CB8B6;
    border-radius: 10px;
    padding: 12px 18px;
    min-width: 180px;
}

.receta-info-label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.receta-info-value {
    font-size: 16px;
    font-weight: 600;
    color: #07605e;
}

@media (max-width: 768px) {

    .receta-info {
        flex-direction: column;
    }

    .receta-info-item {
        min-width: auto;
    }

}

.btn-mini-receta {
    background: #dbeafe;
    color: #1d4ed8;
}

.btn-mini-receta-view {
    background: #dcfce7;
    color: #166534;
}

.titulo-receta-nueva {
    color: #089492;
    text-align: center;
}

.titulo-receta-consulta {
    color: #eba225;
    text-align: center;
}

.cita-dashboard-normal {
    margin-bottom: 10px;
}

.cita-dashboard-curso {
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 8px;
    background: #dcfce7;
    border-left: 4px solid #16a34a;
}

.badge-en-curso {
    display: inline-block;
    margin-left: 10px;
    padding: 4px 8px;
    border-radius: 20px;
    background: #16a34a;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.btn-mini-delete {
    background: #360505;
    color: #ffffff;
}

/* Placeholder en color institucional */
.receta-grid input::placeholder,
.receta-grid textarea::placeholder {

    color: #0CB8B6;

    opacity: 1;
}

.receta-grid input::-webkit-input-placeholder,
.receta-grid textarea::-webkit-input-placeholder {
    color: #0CB8B6;
}

.receta-grid input::-moz-placeholder,
.receta-grid textarea::-moz-placeholder {
    color: #0CB8B6;
}

.receta-grid input:-ms-input-placeholder,
.receta-grid textarea:-ms-input-placeholder {
    color: #0CB8B6;
}

input[readonly],
textarea[readonly] {
    background-color: #e5e7ebd6;
    color: #374151;
    cursor: not-allowed;
    border-color: #cbd5e1;
}

.medicamento-card{

    position: relative;
}

.btn-remove-medicamento{

    position:absolute;

    top:10px;

    right:10px;

    width:24px;

    height:24px;

    border:none;

    border-radius:50%;

    background:#cbd5e1;

    color:#475569;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    line-height:1;
}

.btn-remove-medicamento:hover{

    background:#94a3b8;

    color:#ffffff;
}

        .aviso-privacidad {

            max-width: 950px;
            text-align: left;
            margin: 0 auto;

            line-height: 1.8;

            color: #334155;
        }

        .aviso-privacidad h1 {

            color: #0CB8B6;

            text-align: center;

            margin-bottom: 10px;
        }

        .aviso-fecha {

            text-align: center;

            color: #64748b;

            margin-bottom: 30px;

            font-style: italic;
        }

        .aviso-privacidad h2 {

            color: #07605e;

            margin-top: 35px;

            border-bottom: 2px solid #0CB8B6;

            padding-bottom: 8px;
        }

        .aviso-privacidad p {

            text-align: justify;
        }

        .aviso-privacidad ul {

            padding-left: 25px;
        }

        .aviso-privacidad li {

            margin-bottom: 8px;
        }

        .aviso-resumen {

            background: #ecfeff;

            border-left: 5px solid #0CB8B6;

            padding: 20px;

            border-radius: 8px;

            margin-bottom: 30px;
        }

.dashboard-section-title {
    margin-top: 10px;
    margin-bottom: 20px;
    color: #0f172a;
}

/* =============================
   DASHBOARD - PESTAÑAS SUPERIORES
   Control segmentado integrado dentro de la tarjeta blanca
   (ya no se posiciona por fuera de la tarjeta con absolute,
   por lo que no puede "salirse" del card en ningún ancho).
============================= */

.dashboard-card {
    position: relative;
}

.dashboard-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    margin: 0 0 22px 0;
    padding: 5px;

    background: #eef2f3;
    border-radius: 999px;

    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.dashboard-tabs::-webkit-scrollbar {
    display: none;
}

.dashboard-tab {
    min-width: 110px;
    height: 40px;

    padding: 0 20px;
    border: none;
    border-radius: 999px;

    background: transparent;
    color: #5b6b74;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;

    transition: background-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

/* Interacción de pestañas inactivas */
.dashboard-tab:hover {
    background: rgba(12, 184, 182, 0.12);
    color: #07514f;
}

/* Accesibilidad con teclado */
.dashboard-tab:focus-visible {
    outline: 3px solid rgba(12, 184, 182, 0.3);
    outline-offset: 2px;
}

/* Pestaña activa */
.dashboard-tab.active {
    background: #0CB8B6;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(12, 184, 182, 0.35);
}

.dashboard-tab.active:hover {
    background: #0CB8B6;
    color: #ffffff;
}

/* Contenido de cada pestaña */
.dashboard-content {
    display: none;
    width: 100%;
}

/* Contenido visible */
.dashboard-content.active {
    display: block;
    animation: dashboardTabFadeIn 0.3s ease;
}

@keyframes dashboardTabFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* =============================
   DASHBOARD TABS - MÓVIL
============================= */

@media (max-width: 480px) {

    .dashboard-tabs {
        width: 100%;
        justify-content: stretch;
    }

    .dashboard-tab {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 10px;
        font-size: 13px;
    }

}

/* ====================================
   DISPONIBILIDAD PACIENTES
==================================== */

.slot-activo {
    background: #FFFFFF;
}

.slot-inactivo {
    background: #efebeb;
    border-color: #575656 !important;
}

.slot-inactivo .cita-card-mini,
.slot-inactivo .horario-bloqueado {
    opacity: 1;
}

/* =====================================================
   MEJORAS VISUALES — SOLO VISTA PACIENTE
   (Este bloque se agrega al final para no alterar el
   comportamiento de ninguna regla existente. No afecta
   componentes exclusivos de administración: dashboard,
   calendario admin, recetas.)
===================================================== */

/* -----------------------------------------------------
   1) TIPOGRAFÍA DE TÍTULOS (Poppins)
----------------------------------------------------- */
h1, h2, h3,
.form-card h2,
.agenda-card h2,
.confirm-card h2,
.section-title,
.doctor-info h2 {
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-weight: 600;
}

/* -----------------------------------------------------
   2) MENÚ MÓVIL (HAMBURGUESA) — SOLO INDEX
   Sustituye el "display:none" del menú en móvil por un
   menú desplegable accesible. No modifica los enlaces
   existentes, solo la forma de mostrarlos.
----------------------------------------------------- */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
}

.menu-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1f2937;
    position: relative;
    transition: background 0.2s ease;
}

.menu-toggle span::before,
.menu-toggle span::after {
    content: "";
    position: absolute;
    left: 0;
    width: 22px;
    height: 2px;
    background: #1f2937;
    transition: transform 0.25s ease, top 0.25s ease;
}

.menu-toggle span::before { top: -7px; }
.menu-toggle span::after  { top: 7px; }

.menu-toggle.active span { background: transparent; }
.menu-toggle.active span::before { top: 0; transform: rotate(45deg); }
.menu-toggle.active span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 768px) {

    .menu-toggle {
        display: flex;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 500;

        flex-direction: column;
        gap: 0;

        background: white;
        box-shadow: 0px 10px 20px rgba(0,0,0,0.12);
        border-top: 1px solid #eef0f2;
    }

    .header-nav.active {
        display: flex;
    }

    .header-nav a {
        padding: 14px 24px;
        border-bottom: 1px solid #f1f2f4;
        width: 100%;
        box-sizing: border-box;
        border-radius: 0;
    }

    .header-nav a:hover,
    .header-nav a:focus-visible {
        background: #eafaf9;
        color: #07514f;
        transform: none;
    }

    .header-nav .nav-sep {
        display: none;
    }

    /* =============================
       MENÚ MÓVIL — ADMINISTRACIÓN
       Mismo comportamiento que el menú general.
    ============================= */
    .admin-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: 500;

        flex-direction: column;
        gap: 0;

        background: white;
        box-shadow: 0px 10px 20px rgba(0,0,0,0.12);
        border-top: 1px solid #eef0f2;

        padding: 0;
    }

    .admin-nav.active {
        display: flex;
    }

    .admin-nav a {
        padding: 14px 24px;
        border-bottom: 1px solid #f1f2f4;
        width: 100%;
        box-sizing: border-box;
        border-radius: 0;
    }

    .admin-nav a:hover,
    .admin-nav a:focus-visible {
        background: #eafaf9;
        color: #07514f;
        transform: none;
    }

    .admin-nav .nav-sep {
        display: none;
    }

    .header-container {
        position: relative;
        flex-wrap: wrap;
    }
}

/* -----------------------------------------------------
   3) HERO RESPONSIVE (fix real, .hero-content)
----------------------------------------------------- */
@media (max-width: 860px) {
    .hero-content {
        flex-direction: column;
        flex-wrap: wrap;
        text-align: center;
    }

    .hero-text {
        max-width: 100%;
    }

    .hero-image img {
        width: clamp(260px, 70vw, 420px);
    }
}

/* -----------------------------------------------------
   4) JERARQUÍA DE BOTONES (acción principal vs secundaria)
   .btn-solid se usa junto con .btn-primary para marcar la
   acción principal (Agendar cita, Continuar, Confirmar cita)
   sin modificar el estilo base de .btn-primary que ya se
   usa en el resto del sitio (incluida administración).
----------------------------------------------------- */
.btn-solid.btn-primary {
    background: #0CB8B6;
    color: #ffffff;
}

.btn-solid.btn-primary:hover {
    background: #089a98;
    color: #ffffff;
}

/* -----------------------------------------------------
   5) ÍCONOS DENTRO DE CAMPOS DEL FORMULARIO (paciente)
----------------------------------------------------- */
.form-card input#nombre,
.form-card input#telefono,
.form-card input#email,
.form-card input#apellido {
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 16px;
    padding-left: 40px;
}

.form-card input#nombre,
.form-card input#apellido {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CB8B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

.form-card input#telefono {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CB8B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'/></svg>");
}

.form-card input#email {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230CB8B6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='2' y='4' width='20' height='16' rx='2'/><path d='m22 6-10 7L2 6'/></svg>");
}

/* -----------------------------------------------------
   6) LEYENDA DEL CALENDARIO (paciente_agenda)
----------------------------------------------------- */
.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin: 10px 0 18px 0;
    font-size: 12px;
    color: #6b7280;
}

.calendar-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.calendar-legend i {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    display: inline-block;
}

.calendar-legend .legend-disponible { background: #f5f7fa; border: 1px solid #d1d5db; }
.calendar-legend .legend-seleccionado { background: #0CB8B6; }
.calendar-legend .legend-no-disponible { background: #9ca3af; }

/* -----------------------------------------------------
   7) BADGES DE ESTATUS (paciente_ver_cita.php)
----------------------------------------------------- */
.badge-estatus {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

.badge-estatus-confirmada,
.badge-estatus-atendida {
    background: #dcfce7;
    color: #166534;
}

.badge-estatus-pendiente {
    background: #fef3c7;
    color: #92400e;
}

.badge-estatus-cancelada,
.badge-estatus-no-show {
    background: #fee2e2;
    color: #991b1b;
}

/* -----------------------------------------------------
   8) TEMPORIZADOR DE CONFIRMACIÓN — estado urgente
   (la clase .confirm-timer-urgente se agrega vía JS
   cuando quedan 30s o menos, sin tocar la lógica del
   conteo regresivo ni la expiración del horario)
----------------------------------------------------- */
.confirm-timer-urgente {
    color: #dc2626 !important;
    animation: pulseUrgente 1s ease-in-out infinite;
}

.confirm-timer-urgente .confirm-timer-time {
    color: #dc2626 !important;
}

@keyframes pulseUrgente {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.55; }
}

/* -----------------------------------------------------
   9) CONTRASTE DEL FOOTER (accesibilidad)
   El turquesa de marca (#0CB8B6) con texto blanco no
   alcanza un contraste AA aceptable para texto pequeño.
   Se oscurece únicamente el fondo del footer.
----------------------------------------------------- */
.main-footer {
    background: #087b79;
}

/* =====================================================
   MEJORAS VISUALES — ADMINISTRACIÓN (Dashboard)
   Estas reglas se agregan al final para no alterar
   ninguna regla existente. Solo afectan apariencia:
   íconos, hover, legibilidad y layout en móvil.
===================================================== */

/* Íconos decorativos por tipo de indicador (dashboard) */
.admin-box {
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.18);
}

.admin-box::before {
    content: "";
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 8px auto;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    opacity: 0.92;
}

.admin-box-primary::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2'/><path d='M16 2v4M8 2v4M3 10h18'/></svg>");
}

.admin-box-warning::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 3'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M12 7v5l3 3'/></svg>");
}

.admin-box-success::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12.5l2.5 2.5L16 9'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M8 12.5l2.5 2.5L16 9'/></svg>");
}

.admin-box-danger::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 9l6 6M15 9l-6 6'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M9 9l6 6M15 9l-6 6'/></svg>");
}

.admin-box-secondary::before {
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7' r='3'/><path d='M2 21v-1a6 6 0 0 1 6-6h2'/><path d='M17 8l4 4M21 8l-4 4'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='7' r='3'/><path d='M2 21v-1a6 6 0 0 1 6-6h2'/><path d='M17 8l4 4M21 8l-4 4'/></svg>");
}

/* "Próximas citas": tratamiento de tarjeta también para las que
   no están en curso, consistente con .cita-dashboard-curso */
.cita-dashboard-normal {
    margin-bottom: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #f8fafc;
    border-left: 4px solid #94a3b8;
}

/* Layout compacto en móvil: ícono + número + etiqueta en fila,
   en vez de cajas altas apiladas */
@media (max-width: 600px) {
    .admin-summary {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .admin-box {
        height: auto;
        min-height: 0;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 14px;
        padding: 14px 16px;
        text-align: left;
    }

    .admin-box::before {
        margin: 0;
        width: 26px;
        height: 26px;
        flex-shrink: 0;
    }

    .admin-box h3 {
        font-size: 24px;
        margin: 0;
    }

    .admin-box p {
        font-size: 14px;
        min-height: 0;
        margin: 0;
    }
}