/* =========================
   MODALES GENERALES
========================= */
.modal {
    overflow: hidden;
}

.modal-dialog {
    max-height: 90vh;
}

.modal-content {
    height: 90vh;
    display: flex;
    flex-direction: column;
}

.modal-body {
    flex: 1;
    overflow-y: auto;
}

/* =========================
   MODAL CONSULTA MÉDICA
========================= */
.modal-consulta-medica {
    max-width: 1200px;
}

.modal-consulta-body {
    padding: 12px;
}

.card-consulta-seccion {
    border-radius: 10px;
    margin-bottom: 10px;
}

.card-consulta-seccion .card-header {
    border-bottom: 1px solid #e9ecef;
}

.card-consulta-seccion .card-title {
    font-size: 16px;
}

/* =========================
   FORMULARIOS
========================= */
.form-group-sm {
    margin-bottom: 8px;
}

.form-group-sm label {
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: 600;
}

/* =========================
   TABS
========================= */
.nav-consulta-medica .nav-link {
    font-size: 14px;
    padding: 8px 12px;
}

/* =========================
   TEXTAREAS
========================= */
.area-consulta {
    min-height: 240px;
    resize: vertical;
}

.area-consulta-sm {
    min-height: 160px;
    max-height: 220px;
    resize: vertical;
}

/* =========================
   SOLO LECTURA
========================= */
#modalConsultaMedica .form-control[readonly],
#modalConsultaMedica textarea[readonly] {
    background-color: #eef2f7;
    opacity: 1;
}

/* =========================
   HISTORIAL / TRIAJE
========================= */
.historial-triaje-box {
    max-height: 260px;
    overflow-y: auto;
}

.timeline-triaje-mini .item-triaje {
    border-left: 4px solid #17a2b8;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #f8f9fa;
    border-radius: 8px;
}

/* =========================
   HISTORIAL CLÍNICO
========================= */
.item-historial {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
    background: #fff;
}

.item-historial .fecha-titulo {
    font-weight: 700;
    color: #0d2b74;
    margin-bottom: 10px;
    font-size: 1.05rem;
}

.item-historial hr {
    margin: 12px 0;
}

.bloque-historial {
    margin-bottom: 10px;
}

.bloque-historial strong {
    color: #0d2b74;
}

/* =========================
   COMPONENTES GENERALES
========================= */
.bg-gradient-pink {
    background: linear-gradient(135deg, #c04c7a, #d86b94);
}

.card-consultas {
    border-radius: 14px;
}

.thead-consultas th {
    background-color: #dca1b7;
    color: #1d1d1d;
    font-weight: 700;
    vertical-align: middle;
}

.fila-cita {
    cursor: pointer;
}

.fila-cita:hover {
    background-color: #fff6fa !important;
}

.badge-consulta-si {
    background-color: #28a745;
    color: #fff;
    padding: 6px 10px;
    border-radius: 12px;
}

.badge-consulta-no {
    background-color: #dc3545;
    color: #fff;
    padding: 6px 10px;
    border-radius: 12px;
}

/* =========================
   LAYOUT PRINCIPAL
========================= */
.col-agenda,
.col-consultas {
    min-width: 0;
}

.card-consultas .card-body {
    overflow: hidden;
}

/* =========================
   CALENDARIO
========================= */
#cmCalendarioInline {
    width: 100%;
    overflow: hidden;
}

#cmCalendarioInline .flatpickr-calendar.inline {
    box-shadow: none !important;
    border: 0 !important;
    background: transparent;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 0;
}

#cmCalendarioInline .flatpickr-months,
#cmCalendarioInline .flatpickr-weekdays,
#cmCalendarioInline .flatpickr-days,
#cmCalendarioInline .flatpickr-rContainer,
#cmCalendarioInline .dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

#cmCalendarioInline .dayContainer {
    display: block !important;
}

#cmCalendarioInline .flatpickr-day {
    width: 14.2857% !important;
    max-width: 14.2857% !important;
    height: 38px !important;
    line-height: 38px !important;
    font-size: 14px;
}

#cmCalendarioInline .flatpickr-weekday {
    font-size: 13px;
}

#cmCalendarioInline .flatpickr-current-month {
    font-size: 16px;
}

#cmCalendarioInline .flatpickr-day.selected,
#cmCalendarioInline .flatpickr-day.startRange,
#cmCalendarioInline .flatpickr-day.endRange {
    background: #c04c7a !important;
    border-color: #c04c7a !important;
}

/* 🔥 BASE (laptops pequeñas ~1366x768) */
.flatpickr-calendar.inline {
    transform: scale(0.85);
    transform-origin: top left;
    font-size: 16px;
}

/* 🔥 MEDIANO (laptops grandes ~1600px) */
@media (min-width: 1500px) {
    .flatpickr-calendar.inline {
        transform: scale(0.90);
        font-size: 17px;
    }
}

/* 🔥 GRANDE (Full HD 1920x1080) */
@media (min-width: 1800px) {
    .flatpickr-calendar.inline {
        transform: scale(0.95);
        font-size: 18px;
    }
}

/* 🔥 ULTRA (monitores grandes 2K+) */
@media (min-width: 2200px) {
    .flatpickr-calendar.inline {
        transform: scale(1.0);
        font-size: 19px;
    }
}

/* 🔥 EVITAR CORTE */
.flatpickr-calendar {
    overflow: visible !important;
}


/* =========================
   TABS TURNO
========================= */
#cmTabsTurno .nav-link {
    border-radius: 20px;
    margin-right: 8px;
    font-weight: 600;
}

#cmTabsTurno .nav-link.active {
    background-color: #c04c7a;
    color: #fff;
}

/* =========================
   TABLA CONSULTAS
========================= */
#tablaConsultasMedicas td,
#tablaConsultasMedicas th {
    padding: 1px 6px !important;
    font-size: 15px;
    vertical-align: middle;
}

#tablaConsultasMedicas tbody tr {
    height: 26px;
}

#tablaConsultasMedicas.dataTable tbody tr > td {
    padding: 1px 1px !important;
}

#tablaConsultasMedicas.dataTable thead tr > th {
    padding: 1px 1px !important;
}

table.dataTable {
    width: 100% !important;
    table-layout: fixed;
}

#tablaConsultasMedicas td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =========================
   FECHA Y HORA
========================= */
.cm-fecha-hora {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

#cmHoraActual {
    font-size: 24px;
    font-weight: 700;
    color: #17a2b8;
}

#cmFechaTexto {
    font-size: 13px;
    background: #17a2b8;
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
}

/* =========================
   TRIAJE
========================= */
.triaje-lista {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 13px;
}

.triaje-box-observacion {
    background: #f4f6f9;
    padding: 10px;
    border-radius: 8px;
    min-height: 60px;
    font-size: 13px;
    border: 1px solid #e0e0e0;
}

/* =========================
   RESPONSIVE GENERAL
========================= */
@media (max-width: 991.98px) {
    .historial-triaje-box {
        max-height: 220px;
    }

    .area-consulta-sm {
        min-height: 150px;
    }
}

@media (max-width: 767.98px) {
    .modal-content {
        height: 95vh;
    }

    .nav-consulta-medica .nav-link {
        font-size: 13px;
        padding: 7px 10px;
    }

    .area-consulta-sm {
        min-height: 130px;
    }

    .area-consulta {
        min-height: 180px;
    }

    .cm-fecha-hora {
        justify-content: flex-start;
        gap: 8px;
    }

    #cmHoraActual {
        font-size: 20px;
    }

    #cmFechaTexto {
        font-size: 12px;
        padding: 4px 8px;
    }
}

/* 🔥 CENTRAR CALENDARIO */
#cmCalendarioInline {
    display: flex;
    justify-content: center;
}

/* 🔥 OPCIONAL: centrar también verticalmente si crece */
#cmCalendarioInline .flatpickr-calendar.inline {
    margin: 0 auto;
}