/**
 * SISTEMA DE DISEÑO CORPORATIVO Y ARMONÍA VISUAL - IPS FGI
 * Colores Institucionales:
 *   --fgi-orange: #f16c21 (Naranja institucional)
 *   --fgi-blue:   #26567a (Azul petróleo institucional)
 *   --fgi-sidebar-top: #204968
 *   --fgi-sidebar-bottom: #16364d
 *   --fgi-bg-body: #f1f5f9
 */

:root {
    --fgi-orange: #f16c21;
    --fgi-orange-hover: #d85710;
    --fgi-orange-light: #fff2ea;
    --fgi-blue: #26567a;
    --fgi-blue-hover: #1f4765;
    --fgi-blue-dark: #16364d;
    --fgi-blue-light: #e3ebed;
    --fgi-bg-light: #f1f5f9;
    --fgi-text-main: #1e293b;
    --fgi-text-muted: #64748b;
    --fgi-border: #e2e8f0;
    --fgi-radius: 14px;
    --fgi-radius-sm: 8px;
    --fgi-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* ==========================================================================
   RESETEO GLOBAL Y ESTRUCTURA DE 100VH
   ========================================================================== */
html, body {
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background-color: var(--fgi-bg-light) !important;
    color: var(--fgi-text-main) !important;
    font-family: 'Montserrat', 'Segoe UI', Roboto, sans-serif !important;
}

/* Franja Naranja Institucional Superior */
.barra-institucional {
    background-color: var(--fgi-orange);
    height: 3px;
    width: 100%;
}

/* ==========================================================================
   BARRA DE NAVEGACIÓN SUPERIOR (NAVBAR)
   ========================================================================== */
nav.navbar-fgi {
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    background-color: var(--fgi-blue) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 24px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
    z-index: 1020 !important;
    border: none !important;
}

.navbar-brand-fgi {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    color: #ffffff !important;
}

.navbar-brand-fgi img {
    height: 32px !important;
    width: 32px !important;
    max-height: 32px !important;
    max-width: 32px !important;
    object-fit: contain !important;
    margin-right: 12px !important;
    display: inline-block !important;
}

.brand-name {
    font-size: 1.12rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: 0.4px !important;
}

.brand-tag {
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    background-color: var(--fgi-orange) !important;
    color: #ffffff !important;
    padding: 3px 9px !important;
    border-radius: 12px !important;
    margin-left: 8px !important;
    letter-spacing: 0.3px !important;
}

.btn-sidebar-toggle {
    background: transparent !important;
    border: none !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.15rem !important;
    padding: 6px 12px !important;
    margin-left: 12px !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.btn-sidebar-toggle:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.nav-bell-link {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 1.2rem !important;
    position: relative !important;
    padding: 6px 10px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.nav-bell-link:hover {
    color: var(--fgi-orange) !important;
}

.user-pill {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-size: 0.86rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.user-pill i {
    color: var(--fgi-orange) !important;
    font-size: 0.95rem !important;
}

/* ==========================================================================
   LAYOUT PRINCIPAL: SIDEBAR + ÁREA DE CONTENIDO
   ========================================================================== */
#contenido {
    display: flex !important;
    height: calc(100vh - 57px) !important;
    width: 100% !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Sidebar Contenedor de Altura Completa */
.fondo {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

.sidebar-fgi {
    width: 245px !important;
    min-width: 245px !important;
    max-width: 245px !important;
    height: 100% !important;
    background: linear-gradient(180deg, #1f4765 0%, #16364d 100%) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 16px 0 !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.05) !important;
    border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
    z-index: 100 !important;
    box-sizing: border-box !important;
}

.sidebar-menu-top {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.sidebar-fgi .nav-link {
    color: #cbd5e1 !important;
    padding: 11px 18px !important;
    margin: 3px 12px !important;
    border-radius: 9px !important;
    font-weight: 500 !important;
    font-size: 0.91rem !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.sidebar-fgi .nav-link i {
    width: 24px !important;
    font-size: 1.05rem !important;
    margin-right: 12px !important;
    color: #94a3b8 !important;
    transition: color 0.2s ease !important;
}

.sidebar-fgi .nav-link:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    color: #ffffff !important;
    transform: translateX(3px) !important;
}

.sidebar-fgi .nav-link:hover i {
    color: var(--fgi-orange) !important;
}

/* Ítem Activo del Menú */
.sidebar-fgi .nav-item.active .nav-link {
    background-color: var(--fgi-orange) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 14px rgba(241, 108, 33, 0.35) !important;
}

.sidebar-fgi .nav-item.active .nav-link i {
    color: #ffffff !important;
}

/* Pie del Sidebar (Cerrar Sesión) */
.sidebar-footer {
    padding: 14px 12px 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.sidebar-footer .nav-link {
    color: #fca5a5 !important;
}

.sidebar-footer .nav-link i {
    color: #ef4444 !important;
}

.sidebar-footer .nav-link:hover {
    background: rgba(239, 68, 68, 0.16) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   ÁREA DE CONTENIDO PRINCIPAL
   ========================================================================== */
#contenido-w {
    flex: 1 !important;
    height: 100% !important;
    overflow-y: auto !important;
    background-color: var(--fgi-bg-light) !important;
    padding: 24px 30px !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#contenido-w::-webkit-scrollbar {
    width: 6px;
}
#contenido-w::-webkit-scrollbar-track {
    background: #e2e8f0;
}
#contenido-w::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#contenido-w .container-fluid {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
}

/* ==========================================================================
   TARJETA CONTENEDORA PRINCIPAL (CARD-FGI)
   ========================================================================== */
.card-fgi {
    background: #ffffff !important;
    border: 1px solid var(--fgi-border) !important;
    border-radius: var(--fgi-radius) !important;
    box-shadow: var(--fgi-shadow) !important;
    padding: 26px 28px !important;
    margin-bottom: 24px !important;
}

.view-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    margin-bottom: 20px !important;
    gap: 12px !important;
}

.view-title {
    color: var(--fgi-blue) !important;
    font-size: 1.38rem !important;
    font-weight: 700 !important;
    margin: 0 0 4px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.view-title i {
    color: var(--fgi-orange) !important;
}

.view-subtitle {
    color: var(--fgi-text-muted) !important;
    font-size: 0.86rem !important;
    margin: 0 !important;
}

/* Barra de Acciones y Herramientas */
.table-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
    margin-bottom: 18px !important;
}

/* Botones de DataTables Estilizados */
.dt-buttons .btn {
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    margin-right: 6px !important;
    border: 1px solid #cbd5e1 !important;
    background: #ffffff !important;
    color: #475569 !important;
    transition: all 0.2s ease !important;
}

.dt-buttons .btn:hover {
    background: #f8fafc !important;
    color: var(--fgi-blue) !important;
    border-color: #94a3b8 !important;
}

/* Buscador de DataTables Estilizado */
.dataTables_filter {
    display: flex !important;
    align-items: center !important;
}

.dataTables_filter label {
    font-weight: 500 !important;
    color: #475569 !important;
    font-size: 0.88rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.dataTables_filter input {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 20px !important;
    padding: 6px 14px !important;
    font-size: 0.88rem !important;
    color: #1e293b !important;
    outline: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    width: 220px !important;
}

.dataTables_filter input:focus {
    border-color: var(--fgi-blue) !important;
    box-shadow: 0 0 0 3px rgba(38, 86, 122, 0.15) !important;
}

/* ==========================================================================
   TABLA DATATABLES MODERNA
   ========================================================================== */
table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-top: 10px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 1px solid var(--fgi-border) !important;
}

table.dataTable thead th {
    background-color: var(--fgi-blue) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 14px !important;
    border: none !important;
    text-align: center !important;
    vertical-align: middle !important;
}

table.dataTable tbody td {
    padding: 11px 12px !important;
    font-size: 0.88rem !important;
    color: #334155 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    vertical-align: middle !important;
}

table.dataTable tbody tr:hover {
    background-color: #f8fafc !important;
}

/* Badges interactivos en la tabla */
.badge-sede, .badge-td, .badge-tel {
    background-color: #f1f5f9 !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 5px 10px !important;
    border-radius: 6px !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

.badge-sede:hover, .badge-td:hover, .badge-tel:hover {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

/* Badge Documentos Enviados */
.btn-doc-enviado {
    background-color: #0284c7 !important;
    color: #ffffff !important;
    border: none !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.btn-doc-enviado:hover {
    background-color: #0369a1 !important;
}

/* ==========================================================================
   PANEL DE DETALLES CLÍNICO EXPANDIDO (CHILD ROW)
   ========================================================================== */
.fgi-detail-panel {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    padding: 16px 20px !important;
    margin: 8px 4px !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

.fgi-detail-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
    gap: 16px !important;
}

.fgi-detail-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
}

.fgi-detail-card-title {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--fgi-blue) !important;
    margin-bottom: 8px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.fgi-detail-card-title i {
    color: var(--fgi-orange) !important;
}

.fgi-detail-item {
    font-size: 0.85rem !important;
    margin-bottom: 6px !important;
    color: #334155 !important;
}

.fgi-detail-item strong {
    color: #64748b !important;
    font-weight: 600 !important;
    margin-right: 4px !important;
}

.fgi-detail-text-box {
    background: #f8fafc !important;
    border-radius: 6px !important;
    padding: 8px 10px !important;
    font-size: 0.84rem !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    border: 1px solid #edf2f7 !important;
}

/* ==========================================================================
   CABECERA DE TARJETAS Y DESGLOSE RESPONSIVE DE DATATABLES
   ========================================================================== */
.card-header-fgi {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid var(--fgi-border) !important;
    margin-bottom: 20px !important;
}

.card-title-fgi {
    font-size: 1.32rem !important;
    font-weight: 700 !important;
    color: var(--fgi-blue) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
}

.card-title-fgi i {
    color: var(--fgi-orange) !important;
    font-size: 1.25rem !important;
}

/* Desglose Responsive Armónico de DataTables (Fila Expandida) */
table.dataTable > tbody > tr.child {
    background-color: #f8fafc !important;
}

table.dataTable > tbody > tr.child > td.child,
table.dataTable.nowrap > tbody > tr.child > td.child {
    padding: 14px 18px !important;
    white-space: normal !important; /* Desactiva el nowrap heredado de la tabla para que el texto fluya */
}

/* Contenedor principal de detalles expandidos DataTables */
ul.dtr-details {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 14px 16px !important;
    padding: 16px 20px !important;
    margin: 4px 0 !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    list-style: none !important;
    width: 100% !important;
    text-align: left !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

/* Modo flex vertical para navegadores con soporte :has cuando se usa el renderer FGI */
ul.dtr-details:has(> li.dtr-top-wrapper) {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* Wrapper de fila superior de campos regulares, fila de documentos y wrapper inferior de tarjetas */
ul.dtr-details > li.dtr-top-wrapper,
ul.dtr-details > li.dtr-docs-wrapper,
ul.dtr-details > li.dtr-cards-wrapper {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: block !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ==========================================================================
   FILA SUPERIOR: CORREO, DIRECCIÓN, HORA, FECHA Y ESTADO LADO A LADO
   ========================================================================== */
.fgi-dtr-top-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    gap: 12px 14px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tarjeta individual de cada campo de la fila superior */
.fgi-dtr-top-row .fgi-dtr-item {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    transition: all 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.fgi-dtr-top-row .fgi-dtr-item:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

/* Correo Electrónico: Amplio espacio para correos largos o combinados */
.fgi-dtr-top-row .fgi-item-correo {
    flex: 3.2 1 230px !important;
    min-width: 200px !important;
}

/* Dirección: Amplio espacio para direcciones residenciales completas */
.fgi-dtr-top-row .fgi-item-direccion {
    flex: 3.2 1 230px !important;
    min-width: 200px !important;
}

/* Hora: Tamaño compacto adecuado para hora (ej. 02:14 pm) */
.fgi-dtr-top-row .fgi-item-hora {
    flex: 1 1 95px !important;
    min-width: 85px !important;
    max-width: 135px !important;
}

/* Fecha: Tamaño compacto adecuado para fecha (ej. 01-10-2026) */
.fgi-dtr-top-row .fgi-item-fecha {
    flex: 1.1 1 105px !important;
    min-width: 95px !important;
    max-width: 145px !important;
}

/* Estado: Tamaño adecuado para etiqueta o botón de estado */
.fgi-dtr-top-row .fgi-item-estado {
    flex: 1.2 1 115px !important;
    min-width: 105px !important;
    max-width: 160px !important;
}

/* Teléfono (en caso de ocultarse en tablas pequeñas) */
.fgi-dtr-top-row .fgi-item-tel {
    flex: 1.5 1 130px !important;
    min-width: 110px !important;
    max-width: 180px !important;
}

/* Sede (en caso de ocultarse en tablas pequeñas) */
.fgi-dtr-top-row .fgi-item-sede {
    flex: 1.8 1 150px !important;
    min-width: 120px !important;
}

/* Título de cada campo */
.fgi-dtr-top-row .dtr-title {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--fgi-blue) !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.fgi-dtr-top-row .dtr-title i {
    color: var(--fgi-orange) !important;
    font-size: 0.82rem !important;
}

/* Dato de cada campo */
.fgi-dtr-top-row .dtr-data {
    font-size: 0.86rem !important;
    color: #1e293b !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    line-height: 1.45 !important;
    min-width: 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: center !important;
}

/* ==========================================================================
   ANULACIÓN DE NOWRAP DE BOOTSTRAP EN BADGES (PREVIENE SUPERPOSICIÓN)
   ========================================================================== */
table.dataTable > tbody > tr.child .badge,
ul.dtr-details .badge,
.fgi-dtr-top-row .badge,
.dtr-data .badge {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    display: inline-block !important;
    max-width: 100% !important;
    text-align: left !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
}

table.dataTable > tbody > tr.child .badge h6,
ul.dtr-details .badge h6,
.fgi-dtr-top-row .badge h6,
.dtr-data .badge h6 {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    display: inline !important;
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Badge de Correo Electrónico clickeable tipo pastilla/chip */
.fgi-dtr-top-row .fgi-item-correo .badge,
.fgi-dtr-top-row .fgi-item-correo .badge-light {
    background-color: #ffffff !important;
    color: var(--fgi-blue) !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 5px 9px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
}

.fgi-dtr-top-row .fgi-item-correo .badge:hover,
.fgi-dtr-top-row .fgi-item-correo .badge-light:hover {
    background-color: #f1f5f9 !important;
    border-color: var(--fgi-blue) !important;
    color: var(--fgi-blue-dark) !important;
}

/* Badge de Estado: Centrado, con tipografía nítida y sombra */
.fgi-dtr-top-row .fgi-item-estado button.badge,
.fgi-dtr-top-row .fgi-item-estado .badge {
    border: none !important;
    border-radius: 50px !important;
    padding: 6px 14px !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    cursor: pointer !important;
}

.fgi-dtr-top-row .fgi-item-estado button.badge h6,
.fgi-dtr-top-row .fgi-item-estado .badge h6 {
    color: #ffffff !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
   DOCUMENTOS ADJUNTOS / EXPEDIENTE: BANDA HORIZONTAL COMPACTA Y NO INTRUSIVA
   ========================================================================== */
ul.dtr-details > li.dtr-docs-wrapper {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

.fgi-dtr-docs-box {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    width: 100% !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.fgi-dtr-docs-box:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.fgi-dtr-docs-header {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: var(--fgi-blue) !important;
    letter-spacing: 0.5px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding-right: 12px !important;
    border-right: 2px solid #cbd5e1 !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}

.fgi-dtr-docs-header i {
    color: var(--fgi-orange) !important;
    font-size: 0.85rem !important;
}

.fgi-dtr-docs-content {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

.fgi-doc-list {
    display: inline-flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Chip estilizado para visualización directa de archivos PDF */
.fgi-doc-chip {
    display: inline-flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 4px 10px !important;
    font-size: 0.82rem !important;
    color: #1e293b !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    cursor: pointer !important;
}

.fgi-doc-chip:hover {
    background: #eff6ff !important;
    border-color: #3b82f6 !important;
    color: #1d4ed8 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 6px rgba(59, 130, 246, 0.15) !important;
    text-decoration: none !important;
}

.fgi-doc-chip i.fa-file-pdf {
    color: #ef4444 !important;
    font-size: 0.95rem !important;
}

.fgi-doc-name {
    font-weight: 600 !important;
    max-width: 220px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    margin-right: 2px !important;
}

.fgi-doc-size {
    font-size: 0.72rem !important;
    color: #64748b !important;
}

/* Badges suaves FGI para estados de documentación */
.badge-success-soft {
    background-color: #ecfdf5 !important;
    color: #065f46 !important;
    border: 1px solid #a7f3d0 !important;
    padding: 5px 10px !important;
    font-size: 0.76rem !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.badge-warning-soft {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
    padding: 5px 10px !important;
    font-size: 0.76rem !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
}

.badge-info-soft {
    background-color: #f0f9ff !important;
    color: #075985 !important;
    border: 1px solid #bae6fd !important;
    padding: 5px 10px !important;
    font-size: 0.76rem !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ==========================================================================
   DESCRIPCIÓN Y OBSERVACIÓN: DISPOSICIÓN EN 2 COLUMNAS (50% / 50%)
   ========================================================================== */
ul.dtr-details > li.dtr-cards-wrapper {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    display: block !important;
    margin-top: 6px !important;
    padding-top: 14px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.fgi-dtr-two-cols {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 2 columnas exactas al 50% lado a lado */
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.fgi-dtr-single-col {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Tarjeta individual de Descripción u Observación */
.fgi-dtr-card {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.fgi-dtr-card-header {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    color: var(--fgi-blue) !important;
    margin-bottom: 7px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.fgi-dtr-card-body {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 13px 16px !important;
    font-size: 0.89rem !important;
    line-height: 1.6 !important;
    color: #1e293b !important;
    min-height: 85px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
}

/* Acento Naranja para Descripción */
.fgi-card-descripcion .fgi-dtr-card-body {
    border: 1px solid #fed7aa !important;
    border-left: 4px solid var(--fgi-orange) !important;
    background: #fffbf7 !important;
}

/* Acento Azul Petróleo para Observación */
.fgi-card-observacion .fgi-dtr-card-body {
    border: 1px solid #bfdbfe !important;
    border-left: 4px solid var(--fgi-blue) !important;
    background: #f6f9fc !important;
}

/* ==========================================================================
   ADAPTACIÓN RESPONSIVE (TABLETS Y MÓVILES)
   ========================================================================== */
@media (max-width: 991px) {
    .fgi-dtr-top-row .fgi-item-correo,
    .fgi-dtr-top-row .fgi-item-direccion {
        flex: 1 1 calc(50% - 10px) !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .fgi-dtr-top-row .fgi-dtr-item {
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }
    .fgi-dtr-two-cols {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }
}

/* ==========================================================================
   CONTROLES Y DISTRIBUCIÓN DE DATATABLES
   ========================================================================== */
.dataTables_wrapper {
    width: 100% !important;
    position: relative !important;
    clear: both !important;
}

.dataTables_wrapper .dt-buttons {
    float: left !important;
    margin-bottom: 14px !important;
}

.dataTables_wrapper .dataTables_filter {
    float: right !important;
    margin-bottom: 14px !important;
}

.dataTables_wrapper:after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

.dataTables_wrapper .dataTables_info {
    float: left !important;
    padding-top: 14px !important;
    font-size: 0.86rem !important;
    color: #64748b !important;
}

.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    padding-top: 10px !important;
}

/* ==========================================================================
   BOTONES CORPORATIVOS GLOBALES
   ========================================================================== */
.btn-fgi-primary {
    background-color: var(--fgi-orange) !important;
    border-color: var(--fgi-orange) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    box-shadow: 0 2px 8px rgba(241, 108, 33, 0.25) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    transition: all 0.2s ease !important;
}

.btn-fgi-primary:hover {
    background-color: var(--fgi-orange-hover) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(241, 108, 33, 0.35) !important;
    transform: translateY(-1px) !important;
}

/* ==========================================================================
   MODALES CORPORATIVOS FGI (BOOTBOX Y BOOTSTRAP 4)
   ========================================================================== */

/* Fondo oscurecido con desenfoque suave */
.modal-backdrop {
    background-color: #0f172a !important;
}

.modal-backdrop.show {
    opacity: 0.55 !important;
    backdrop-filter: blur(4px) !important;
}

/* Centrado vertical y horizontal del diálogo */
.modal-dialog {
    display: flex !important;
    align-items: center !important;
    min-height: calc(100% - 3.5rem) !important;
    margin: 1.75rem auto !important;
    transition: transform 0.25s ease-out !important;
}

/* Anchos óptimos según el tamaño del modal */
.modal-sm {
    max-width: 440px !important;
}

.modal-dialog:not(.modal-lg):not(.modal-sm),
.modal-md {
    max-width: 660px !important;
}

.modal-lg {
    max-width: 860px !important;
}

/* Tarjeta / Contenedor principal del modal */
.modal-content {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 20px 45px rgba(38, 86, 122, 0.22) !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* ==========================================================================
   CABECERA DEL MODAL (CORRECCIÓN DE ORDEN Y ALINEACIÓN DE BOTÓN CERRAR)
   ========================================================================== */
.modal-header,
.bootbox .modal-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 24px !important;
    background-color: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-top-left-radius: 14px !important;
    border-top-right-radius: 14px !important;
    position: relative !important;
}

/* Título: Siempre al inicio (orden 1), ocupando el espacio izquierdo */
.modal-header .modal-title,
.bootbox .modal-header .modal-title {
    order: 1 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--fgi-blue) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
    line-height: 1.35 !important;
}

.modal-header .modal-title strong,
.bootbox .modal-header .modal-title strong {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--fgi-blue) !important;
}

.modal-header .modal-title i,
.bootbox .modal-header .modal-title i {
    font-size: 1.15rem !important;
    color: var(--fgi-orange) !important;
}

/* Botón cerrar (X): Siempre a la extrema derecha (orden 2) */
.modal-header .close,
.modal-header .bootbox-close-button,
.bootbox .modal-header .close,
.bootbox .modal-header .bootbox-close-button {
    order: 2 !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 1.5rem !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    color: #64748b !important;
    opacity: 0.75 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.18s ease !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 32px !important;
    width: 32px !important;
    min-width: 32px !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.modal-header .close:hover,
.modal-header .bootbox-close-button:hover,
.bootbox .modal-header .close:hover,
.bootbox .modal-header .bootbox-close-button:hover {
    color: #ef4444 !important;
    background-color: #fee2e2 !important;
    opacity: 1 !important;
}

.modal-header .close:focus,
.modal-header .bootbox-close-button:focus,
.bootbox .modal-header .close:focus,
.bootbox .modal-header .bootbox-close-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ==========================================================================
   CUERPO DEL MODAL (MENSAJES, FORMULARIOS Y PROMPTS)
   ========================================================================== */
.modal-body,
.bootbox .modal-body {
    padding: 24px 26px !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    background-color: #ffffff !important;
}

.modal-body p {
    margin-bottom: 14px !important;
    font-size: 0.95rem !important;
    color: #334155 !important;
}

.modal-body p.text-muted {
    color: #64748b !important;
    font-size: 0.92rem !important;
}

.modal-body p:last-child {
    margin-bottom: 0 !important;
}

/* Formulario interno de Bootbox Prompt */
.bootbox-form {
    margin: 0 !important;
    width: 100% !important;
}

/* Inputs y Selects dentro del modal */
.modal-body .form-control,
.modal-body .bootbox-input {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 0.94rem !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    height: auto !important;
    width: 100% !important;
    margin-top: 6px !important;
    box-sizing: border-box !important;
}

.modal-body .form-control:focus,
.modal-body .bootbox-input:focus {
    border-color: var(--fgi-orange) !important;
    box-shadow: 0 0 0 3px rgba(241, 108, 33, 0.18) !important;
    outline: none !important;
}

.modal-body textarea.bootbox-input,
.modal-body textarea.form-control {
    min-height: 95px !important;
    resize: vertical !important;
}

/* ==========================================================================
   PIE DEL MODAL (BOTONES ALINEADOS, PROPORCIONADOS Y CON ESPACIADO LIMPIO)
   ========================================================================== */
.modal-footer,
.bootbox .modal-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px 12px !important;
    padding: 16px 24px !important;
    background-color: #f8fafc !important;
    border-top: 1px solid #e2e8f0 !important;
    border-bottom-left-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.modal-footer > *,
.bootbox .modal-footer > * {
    margin: 0 !important; /* Neutraliza márgenes heredados de Bootstrap */
}

/* Botones dentro del footer modal */
.modal-footer .btn,
.bootbox .modal-footer .btn {
    padding: 9px 18px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.18s ease-in-out !important;
    border: 1px solid transparent !important;
    cursor: pointer !important;
    letter-spacing: 0.3px !important;
}

.modal-footer .btn:hover,
.bootbox .modal-footer .btn:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
}

.modal-footer .btn:active,
.bootbox .modal-footer .btn:active {
    transform: translateY(0) !important;
}

/* Botón Primario / Guardar / Confirmar */
.modal-footer .btn-primary,
.bootbox .modal-footer .btn-primary {
    background-color: var(--fgi-orange) !important;
    border-color: var(--fgi-orange) !important;
    color: #ffffff !important;
}

.modal-footer .btn-primary:hover,
.bootbox .modal-footer .btn-primary:hover {
    background-color: var(--fgi-orange-hover) !important;
    border-color: var(--fgi-orange-hover) !important;
    color: #ffffff !important;
}

/* Botón Éxito / Resuelto */
.modal-footer .btn-success,
.bootbox .modal-footer .btn-success {
    background-color: #10b981 !important;
    border-color: #10b981 !important;
    color: #ffffff !important;
}

.modal-footer .btn-success:hover,
.bootbox .modal-footer .btn-success:hover {
    background-color: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

/* Botón Peligro / No Resuelto */
.modal-footer .btn-danger,
.bootbox .modal-footer .btn-danger {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    color: #ffffff !important;
}

.modal-footer .btn-danger:hover,
.bootbox .modal-footer .btn-danger:hover {
    background-color: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

/* Botón Alerta / Pendiente / Renovación */
.modal-footer .btn-warning,
.bootbox .modal-footer .btn-warning {
    background-color: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #ffffff !important;
}

.modal-footer .btn-warning:hover,
.bootbox .modal-footer .btn-warning:hover {
    background-color: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
}

/* Botón Info / Modificar Correo */
.modal-footer .btn-info,
.bootbox .modal-footer .btn-info {
    background-color: #0284c7 !important;
    border-color: #0284c7 !important;
    color: #ffffff !important;
}

.modal-footer .btn-info:hover,
.bootbox .modal-footer .btn-info:hover {
    background-color: #0369a1 !important;
    border-color: #0369a1 !important;
    color: #ffffff !important;
}

/* Botón Secundario / Cancelar / Cerrar */
.modal-footer .btn-secondary,
.modal-footer .btn-default,
.bootbox .modal-footer .btn-secondary,
.bootbox .modal-footer .btn-default {
    background-color: #f1f5f9 !important;
    border-color: #cbd5e1 !important;
    color: #475569 !important;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-default:hover,
.bootbox .modal-footer .btn-secondary:hover,
.bootbox .modal-footer .btn-default:hover {
    background-color: #e2e8f0 !important;
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}

/* Adaptación responsive en pantallas pequeñas */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0.8rem !important;
        min-height: calc(100% - 1.6rem) !important;
    }
    .modal-footer,
    .bootbox .modal-footer {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .modal-footer .btn,
    .bootbox .modal-footer .btn {
        width: 100% !important;
    }
}