/**
 * style.css — Fundación San José de Buga
 * Sistema de Gestión del Talento Humano FSJB
 * Versión 3.0 — Paleta oficial FSJB
 *
 * Paleta extraída del logotipo corporativo:
 *   Navy  #1B3A6B  — figura y tipografía principal del logo
 *   Teal  #2D8E7E  — alas/brazos del logo
 *   Red   #C63B2D  — corazón del logo
 */

/* ── Variables de marca ─────────────────────────────────────────── */
:root {
  /* Azul navy */
  --fsjb-navy:        #1B3A6B;
  --fsjb-navy-mid:    #234EA0;
  --fsjb-navy-dark:   #122950;
  --fsjb-navy-shadow: rgba(27, 58, 107, 0.22);
  /* Verde teal */
  --fsjb-teal:        #2D8E7E;
  --fsjb-teal-dark:   #1F6B5E;
  --fsjb-teal-light:  #E0F5F0;
  --fsjb-teal-shadow: rgba(45, 142, 126, 0.22);
  /* Rojo */
  --fsjb-red:         #C63B2D;
  --fsjb-red-light:   #FAE8E6;
  /* Neutros */
  --fsjb-bg:          #EFF3F8;
  --fsjb-surface:     #FFFFFF;
  --fsjb-text:        #1A2940;
  --fsjb-text-muted:  #5E7491;
  --fsjb-border:      #D0DAEA;
}

/* ── Estilos globales ───────────────────────────────────────────── */
* { box-sizing: border-box; }

body {
    font-family: 'Montserrat','Segoe UI','Arial',sans-serif;
    background: var(--fsjb-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--fsjb-text);
}

/* ── Navbar ─────────────────────────────────────────────────────── */
.fsjb-navbar {
    background: linear-gradient(135deg, var(--fsjb-navy) 0%, var(--fsjb-navy-mid) 100%) !important;
    box-shadow: 0 4px 20px var(--fsjb-navy-shadow);
    padding: 1rem 0;
    position: sticky;
    top: 0;
    z-index: 1000;
    animation: fadeInDown 0.5s ease;
}

@keyframes fadeInDown {
    from { opacity:0; transform:translateY(-20px); }
    to   { opacity:1; transform:translateY(0); }
}

.fsjb-navbar .navbar-brand {
    color: #fff !important;
    font-weight: 700;
    font-size: 1.3rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.fsjb-navbar .navbar-brand img {
    border-radius: 8px;
    background: white;
    padding: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
}
.fsjb-navbar .navbar-brand:hover img { transform: scale(1.05); }

.fsjb-navbar .nav-link {
    color: rgba(255,255,255,0.9) !important;
    font-weight: 500;
    padding: 0.6rem 1.2rem !important;
    border-radius: 8px;
    transition: all 0.3s ease;
    margin: 0 0.25rem;
}
.fsjb-navbar .nav-link:hover {
    background: rgba(255,255,255,0.15);
    color: #fff !important;
    transform: translateY(-2px);
}
.fsjb-navbar .nav-link.active {
    background: rgba(255,255,255,0.2);
    color: #fff !important;
}
.fsjb-navbar .navbar-toggler { border-color: rgba(255,255,255,0.3); padding:0.5rem 0.75rem; }
.fsjb-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.fsjb-navbar .btn-solicitar {
    background: rgba(255,255,255,0.2);
    border: 2px solid rgba(255,255,255,0.4);
    color: white;
    font-weight: 600;
    padding: 0.5rem 1.5rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.fsjb-navbar .btn-solicitar:hover {
    background: white;
    color: var(--fsjb-navy);
    border-color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.fsjb-navbar .navbar-text { color: rgba(255,255,255,0.95) !important; font-weight:500; }

/* ── Footer ─────────────────────────────────────────────────────── */
.fsjb-footer {
    background: linear-gradient(135deg, var(--fsjb-navy-dark) 0%, var(--fsjb-navy) 100%);
    color: rgba(255,255,255,0.95);
    font-family: 'Montserrat','Segoe UI',sans-serif;
    box-shadow: 0 -4px 20px var(--fsjb-navy-shadow);
    padding: 2rem 0;
    margin-top: auto;
    animation: fadeInUp 0.5s ease;
}
@keyframes fadeInUp {
    from { opacity:0; transform:translateY(30px); }
    to   { opacity:1; transform:translateY(0); }
}
.fsjb-footer .container { background:transparent; box-shadow:none; padding:0; margin:0 auto; }
.fsjb-footer a { color:rgba(255,255,255,0.9); text-decoration:none; transition:all 0.3s ease; font-weight:500; }
.fsjb-footer a:hover { color:#fff; text-decoration:underline; }
.fsjb-footer .footer-divider { border-top:1px solid rgba(255,255,255,0.2); margin:1.5rem 0; }
.fsjb-footer .footer-brand  { font-weight:700; font-size:1.1rem; color:white; margin-bottom:0.5rem; display:block; }
.fsjb-footer .footer-text   { font-size:0.9rem; color:rgba(255,255,255,0.8); line-height:1.6; }
.fsjb-footer .footer-icon   { color:rgba(255,255,255,0.7); margin-right:0.5rem; transition:color 0.3s ease; }
.fsjb-footer a:hover .footer-icon { color:white; }

/* ── Container principal (legacy — mantener para compatibilidad) ── */
.container {
    background: var(--fsjb-surface);
    color: var(--fsjb-text);
    border-radius: 14px;
    padding: 2rem;
    margin-top: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 20px rgba(27,58,107,0.10);
    width: 90% !important;
    max-width: 1600px !important;
    animation: fadeInUp 0.5s ease;
    flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE LAYOUT UNIFICADO — aplica a TODOS los formularios
   ═══════════════════════════════════════════════════════════════ */

/* Wrapper de página — ocupa el 90% del ancho disponible */
.fsjb-page {
    padding: 1.5rem;
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    flex: 1;
}
.fsjb-page-wide { width: 95%; max-width: 1800px; }
/* Alias dashboard — mismo layout que fsjb-page */
.gh-wrapper { padding: 1.2rem 1.5rem; width: 90%; max-width: 1800px; margin: 0 auto; flex: 1; }
@media (max-width: 1200px) { .fsjb-page, .fsjb-page-wide { width: 95%; } }
@media (max-width: 768px)  { .fsjb-page, .fsjb-page-wide { width: 100%; padding: 0.75rem; } }

/* Card principal */
.fsjb-card {
    background: var(--fsjb-surface);
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(27,58,107,0.10);
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.4s ease;
}

/* Cabecera del card — gradiente navy FSJB */
.fsjb-card-header {
    background: linear-gradient(135deg, var(--fsjb-navy) 0%, var(--fsjb-navy-mid) 100%);
    color: white;
    padding: 1.2rem 1.75rem;
    border-radius: 14px 14px 0 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.fsjb-card-header h4,
.fsjb-card-header h5,
.fsjb-card-header h6 {
    color: white !important;
    margin: 0;
    font-weight: 700;
}
.fsjb-card-header .fsjb-header-badge {
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    padding: 0.25rem 0.85rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Body del card */
.fsjb-card-body {
    padding: 1.75rem;
}
@media (max-width: 768px) {
    .fsjb-page    { padding: 1rem; }
    .fsjb-card-body { padding: 1.25rem; }
    .fsjb-card-header { padding: 1rem 1.25rem; }
}

/* ── Títulos ────────────────────────────────────────────────────── */
h2, h4 { color: var(--fsjb-navy); font-weight:700; }
h2 { margin-bottom:2rem; }
h4 { margin-bottom:2rem; }
h5, h6 { font-weight:600; }

/* Encabezado de sección en formularios — TEAL (color secundario FSJB) */
.section-title {
    background: linear-gradient(135deg, var(--fsjb-teal) 0%, var(--fsjb-teal-dark) 100%);
    color: white;
    padding: 0.875rem 1.25rem;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    font-weight: 600;
    font-size: 1.1rem;
    box-shadow: 0 4px 12px var(--fsjb-teal-shadow);
    transition: transform 0.2s ease;
}
.section-title:hover { transform: translateY(-2px); }
.section-title i { margin-right:0.5rem; }

.section-title-modal {
    color: var(--fsjb-navy);
    font-weight: 600;
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--fsjb-teal);
}

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.07);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover { transform:translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,0.11); }
.card-header {
    background: linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%);
    border-bottom: 1px solid var(--fsjb-border);
    padding: 1rem 1.25rem;
    font-weight: 600;
    border-radius: 12px 12px 0 0;
}
.card-header.bg-light { background: linear-gradient(135deg,#f8f9fa 0%,#e9ecef 100%) !important; }
.card-body { padding: 1.25rem; }

/* ── Formularios ────────────────────────────────────────────────── */
.form-section { margin-bottom:1.5rem; }
.form-label { font-weight:500; color:var(--fsjb-text); margin-bottom:0.5rem; }
.form-control, .form-select {
    border-radius: 8px;
    border: 2px solid var(--fsjb-border);
    padding: 0.675rem 0.875rem;
    transition: all 0.3s ease;
}
.form-control:focus, .form-select:focus {
    border-color: var(--fsjb-teal);
    box-shadow: 0 0 0 0.2rem var(--fsjb-teal-shadow);
    transform: translateY(-1px);
}
.form-control.is-invalid { border-color: var(--fsjb-red); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 0.2rem rgba(198,59,45,0.25); }
.form-text { font-size:0.875rem; color:var(--fsjb-text-muted); }
.text-danger     { color: var(--fsjb-red) !important; }
.text-danger-req { color: var(--fsjb-red); font-weight:700; }

/* ── Motivos de permiso ──────────────────────────────────────────── */
.checkbox-columns { margin-bottom:1rem; }
.checkbox-columns .row { justify-content:center; }
.checkbox-columns .col-md-6 { max-width:500px; }

.motivo-box {
    border: 2px solid var(--fsjb-border);
    border-radius: 12px;
    padding: 1.5rem;
    background: linear-gradient(135deg,#f8f9fa 0%,#ffffff 100%);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    height: 100%;
    transition: all 0.3s ease;
}
.motivo-box:hover { transform:translateY(-4px); box-shadow:0 6px 20px rgba(0,0,0,0.10); border-color:var(--fsjb-teal); }
.motivo-box h6 { border-bottom:2px solid; padding-bottom:0.5rem; margin-bottom:1rem; font-size:1rem; }
.motivo-box h6.text-primary  { border-bottom-color:var(--fsjb-navy); color:var(--fsjb-navy) !important; }
.motivo-box h6.text-success  { border-bottom-color:var(--fsjb-teal); color:var(--fsjb-teal) !important; }
.motivo-box .form-check { margin-bottom:0.75rem; }
.motivo-box .form-check-label { font-weight:400; cursor:pointer; font-size:0.95rem; transition:color 0.2s ease; }
.motivo-box .form-check-label:hover { color:var(--fsjb-teal); }
.motivo-box .form-check-input { cursor:pointer; margin-top:0.3rem; }
.motivo-box .form-check-input:checked { background-color:var(--fsjb-teal); border-color:var(--fsjb-teal); }

/* ── Info permiso ───────────────────────────────────────────────── */
.info-permiso-box {
    background: linear-gradient(135deg, var(--fsjb-teal-light) 0%, #f0faf8 100%);
    border-left: 4px solid var(--fsjb-teal);
    padding: 1.25rem;
    border-radius: 10px;
    margin-top: 1.5rem;
    box-shadow: 0 4px 12px var(--fsjb-teal-shadow);
    animation: fadeIn 0.3s ease-out;
}
.info-permiso-box h6 { color:var(--fsjb-teal-dark); font-weight:700; margin-bottom:1rem; font-size:1rem; }
.info-permiso-box p  { margin-bottom:0.5rem; font-size:0.95rem; }
.info-permiso-box .badge { font-size:0.85rem; padding:0.35rem 0.75rem; }

.info-row { padding:0.75rem 0; border-bottom:1px solid var(--fsjb-border); }
.info-row:last-child { border-bottom:none; }
.info-label  { font-weight:600; color:var(--fsjb-navy); width:200px; display:inline-block; }
.info-value  { color:var(--fsjb-text); }

/* ── Adjunto ────────────────────────────────────────────────────── */
#adjuntoContainer {
    background: linear-gradient(135deg,#fff3cd 0%,#fffbe6 100%);
    border: 3px solid #ffc107;
    border-radius: 12px;
    padding: 1.75rem;
    margin-top: 1.5rem;
    box-shadow: 0 4px 16px rgba(255,193,7,0.22);
    animation: slideDown 0.4s ease-out;
    position: relative;
}
#adjuntoContainer::before {
    content:''; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px;
    background:linear-gradient(135deg,#ffc107,#ffdb4d); border-radius:12px; z-index:-1; opacity:0.3;
}
#adjuntoContainer .form-label  { color:#856404; font-weight:700; font-size:1.15rem; margin-bottom:0.75rem; }
#adjuntoContainer .form-text   { color:#856404; font-weight:500; font-size:0.9rem; }
#adjuntoContainer .form-control{ background:#fff; border:2px dashed #ffc107; padding:0.75rem; font-size:0.95rem; }
#adjuntoContainer .form-control:focus { border-color:#ff9800; box-shadow:0 0 0 0.2rem rgba(255,193,7,0.25); }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge { font-size:0.85rem; padding:0.4em 0.6em; border-radius:6px; font-weight:600; }
.tipo-badge { display:inline-block; padding:0.3rem 0.85rem; border-radius:20px; font-size:0.85rem; font-weight:600; margin-left:0.5rem; }
.badge-permiso  { background:#d1ecf1; color:#0c5460; }
.badge-licencia { background:var(--fsjb-teal-light); color:var(--fsjb-teal-dark); }
.bg-warning.text-dark { background-color:#ffc107 !important; color:#212529 !important; }
.bg-info    { background-color:#0dcaf0 !important; }
.bg-success { background-color:#198754 !important; }
.bg-danger  { background-color:#dc3545 !important; }
.bg-secondary{ background-color:#6c757d !important; }

/* ── Botones ────────────────────────────────────────────────────── */
.btn { border-radius:8px; font-weight:600; transition:all 0.3s ease; }

.btn-primary {
    background: linear-gradient(135deg, var(--fsjb-navy) 0%, var(--fsjb-navy-mid) 100%);
    border: none;
    padding: 0.75rem 2rem;
    font-weight: 600;
    border-radius: 10px;
    box-shadow: 0 4px 12px var(--fsjb-navy-shadow);
}
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px var(--fsjb-navy-shadow);
    background: linear-gradient(135deg, var(--fsjb-navy-mid) 0%, var(--fsjb-navy) 100%);
}
.btn-primary:active  { transform:translateY(0); }
.btn-primary:disabled{ opacity:0.6; cursor:not-allowed; transform:none; }

/* Botón teal — acción secundaria positiva */
.btn-teal {
    background: linear-gradient(135deg, var(--fsjb-teal) 0%, var(--fsjb-teal-dark) 100%);
    border: none; color: white; font-weight:600;
    box-shadow: 0 4px 12px var(--fsjb-teal-shadow);
}
.btn-teal:hover { transform:translateY(-2px); color:white; filter:brightness(1.08); }

.btn-table   { margin-right:6px; margin-bottom:3px; font-size:0.875rem; padding:0.375rem 0.75rem; }
.btn-sm      { padding:0.375rem 0.75rem; font-size:0.875rem; }

.btn-secondary { background-color:#6c757d; border-color:#6c757d; }
.btn-secondary:hover { background-color:#5a6268; border-color:#545b62; }

.btn-success { background-color:#198754; border-color:#198754; }
.btn-success:hover { background-color:#157347; border-color:#146c43; transform:translateY(-2px); }

.btn-danger  { background-color:#dc3545; border-color:#dc3545; }
.btn-danger:hover  { background-color:#bb2d3b; border-color:#b02a37; transform:translateY(-2px); }

.btn-info    { background-color:#0dcaf0; border-color:#0dcaf0; color:#000; }
.btn-info:hover  { background-color:#31d2f2; transform:translateY(-2px); color:#000; }

.btn-outline-primary { color:var(--fsjb-navy); border-color:var(--fsjb-navy); }
.btn-outline-primary:hover { background-color:var(--fsjb-navy); color:white; transform:translateY(-2px); }

.btn-outline-teal { color:var(--fsjb-teal); border-color:var(--fsjb-teal); border-width:2px; }
.btn-outline-teal:hover { background-color:var(--fsjb-teal); color:white; transform:translateY(-2px); }

.btn-outline-danger { color:#dc3545; border-color:#dc3545; }
.btn-outline-danger:hover { background-color:#dc3545; color:white; transform:translateY(-2px); }

.btn-outline-info   { color:#17a2b8; border-color:#17a2b8; }
.btn-outline-info:hover   { background-color:#17a2b8; color:white; transform:translateY(-2px); }

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

/* ── Alertas ────────────────────────────────────────────────────── */
.alert {
    border-radius: 10px; border: none;
    padding: 1rem 1.25rem; margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.alert-success { background:linear-gradient(135deg,#d4edda 0%,#e8f5e9 100%); color:#155724; border-left:4px solid #28a745; }
.alert-warning { background:linear-gradient(135deg,#fff3cd 0%,#fffbe6 100%); color:#856404; border-left:4px solid #ffc107; }
.alert-danger  { background:linear-gradient(135deg,#f8d7da 0%,#ffe0e3 100%); color:#721c24; border-left:4px solid var(--fsjb-red); }
.alert-info    { background:linear-gradient(135deg, var(--fsjb-teal-light) 0%,#e7f3ff 100%); color:var(--fsjb-teal-dark); border-left:4px solid var(--fsjb-teal); }
.alert-dismissible .btn-close { padding:0.75rem 1.25rem; }
.alert .bi { margin-right:0.5rem; }

/* ── Checkboxes ─────────────────────────────────────────────────── */
.form-check { padding-left:1.75rem; margin-bottom:0.5rem; }
.form-check-input { width:1.25rem; height:1.25rem; margin-top:0.15rem; cursor:pointer; }
.form-check-label { cursor:pointer; user-select:none; }
.form-check .border { border:1px solid var(--fsjb-border) !important; }
.form-check .border.rounded { border-radius:8px !important; }

/* ── Tablas ─────────────────────────────────────────────────────── */
.table-responsive { margin-top:1rem; border-radius:10px; overflow:hidden; box-shadow:0 2px 10px rgba(0,0,0,0.06); }
.table { margin-bottom:0; width:100%; }

/* ── Encabezados de tabla — sobrescribe DataTables con alta especificidad ── */
.table thead,
.table thead tr,
table.dataTable thead,
table.dataTable thead tr {
    background: linear-gradient(135deg, var(--fsjb-navy) 0%, var(--fsjb-navy-mid) 100%) !important;
}
.table thead th,
table.dataTable thead th,
table.dataTable thead > tr > th,
table.dataTable thead > tr > th.sorting,
table.dataTable thead > tr > th.sorting_asc,
table.dataTable thead > tr > th.sorting_desc,
table.dataTable thead > tr > th.sorting_asc_disabled,
table.dataTable thead > tr > th.sorting_desc_disabled {
    background: transparent !important;   /* hereda del tr/thead */
    background-color: transparent !important;
    color: white !important;
    border: none !important;
    border-bottom: none !important;
    padding: 1rem !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    white-space: nowrap;
}
/* Flechas de ordenamiento DataTables en blanco */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    color: rgba(255,255,255,0.7) !important;
}

.table-dark { background:linear-gradient(135deg, var(--fsjb-navy) 0%, var(--fsjb-navy-mid) 100%); color:white; }
.table tbody tr { transition:all 0.2s ease; }
.table tbody tr:hover { background-color:#f0f6f5; }
.table td { padding:0.875rem; vertical-align:middle; }
.table-striped tbody tr:nth-of-type(odd) { background-color:rgba(45,142,126,0.04); }
.table-bordered { border:1px solid var(--fsjb-border); }
.table-bordered td, .table-bordered th { border:1px solid var(--fsjb-border); }
.table-hover tbody tr:hover { background-color:rgba(45,142,126,0.06); }
#tabla_permisos td { vertical-align:middle; }
.text-nowrap { white-space:nowrap; }

/* ── DataTables ─────────────────────────────────────────────────── */
.dataTables_wrapper .dt-buttons { margin-bottom:1rem; }
.dataTables_wrapper .dataTables_filter input {
    border:2px solid var(--fsjb-border); border-radius:8px;
    padding:0.5rem 0.875rem; margin-left:0.5rem; transition:all 0.3s ease;
}
.dataTables_wrapper .dataTables_filter input:focus { border-color:var(--fsjb-teal); box-shadow:0 0 0 0.2rem var(--fsjb-teal-shadow); }
.dataTables_wrapper .dataTables_length select { border:2px solid var(--fsjb-border); border-radius:8px; padding:0.5rem 0.875rem; margin:0 0.5rem; }
.dataTables_wrapper .dataTables_info { padding-top:0.85rem; }
.dataTables_wrapper .dataTables_paginate { padding-top:0.5rem; }

/* ── Modales ────────────────────────────────────────────────────── */
.modal-content {
    border: none; border-radius:16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.22);
    max-height: calc(100vh - 3.5rem);
    display: flex; flex-direction: column;
}
.modal-header { border-bottom:1px solid var(--fsjb-border); padding:1.25rem 1.5rem; border-radius:16px 16px 0 0; flex-shrink:0; }
.modal-header.bg-primary { background:linear-gradient(135deg, var(--fsjb-navy) 0%, var(--fsjb-navy-mid) 100%) !important; color:white; }
.modal-header.bg-danger  { background:linear-gradient(135deg, var(--fsjb-red) 0%, #a03025 100%) !important; color:white; }
.modal-title { font-weight:600; font-size:1.15rem; }
.modal-body  { padding:1.5rem; max-height:calc(100vh - 200px); overflow-y:auto; }
.modal-footer{ border-top:1px solid var(--fsjb-border); padding:1rem 1.5rem; flex-shrink:0; }
.modal-dialog { margin:1.75rem auto; }
.modal-xl { max-width:1140px; }
.modal-lg { max-width:800px; }
.modal-dialog-scrollable { height:calc(100vh - 3.5rem); }
.modal-dialog-scrollable .modal-body { overflow-y:auto; max-height:none; }
#modalDetalleContenido, #info_permiso_contenido { padding:0; }
#modalDetalle .modal-dialog { max-width:900px; }
#modalDetalle .modal-body   { max-height:calc(100vh - 200px); overflow-y:auto; padding:1.5rem; }
#modalDetalleContenido h5,
#modalDetalleContenido h6 {
    color: var(--fsjb-navy); font-weight:600;
    margin-top:1.5rem; margin-bottom:1rem;
    padding-bottom:0.5rem; border-bottom:2px solid var(--fsjb-teal-light);
}
#modalDetalleContenido h5:first-child,
#modalDetalleContenido h6:first-child { margin-top:0; }
#modalDetalleContenido .row { margin-bottom:0.75rem; }
#modalDetalleContenido .col-md-6 { margin-bottom:0.5rem; }
#modalDetalleContenido strong { color:var(--fsjb-navy); font-weight:600; display:block; margin-bottom:0.25rem; font-size:0.9rem; }
#modalDetalleContenido p { margin-bottom:0; color:var(--fsjb-text); font-size:0.95rem; }
#modalDetalleContenido .badge { font-size:0.85rem; padding:0.4rem 0.8rem; border-radius:6px; }
#modalDetalleContenido .alert { margin-top:1rem; margin-bottom:1rem; }

/* ── Spinner ────────────────────────────────────────────────────── */
.spinner-border    { width:3rem; height:3rem; border-width:0.3rem; }
.spinner-border-sm { width:1rem; height:1rem; border-width:0.2rem; }
.text-center { text-align:center !important; }

/* ── Paginación ─────────────────────────────────────────────────── */
.pagination { margin-top:1rem; justify-content:center; }
.page-link {
    padding:0.6rem 1rem; margin:0 0.25rem;
    border-radius:8px; background:#f8f9fa;
    color:var(--fsjb-navy); text-decoration:none;
    border:2px solid var(--fsjb-border);
    transition:all 0.3s ease; cursor:pointer; font-weight:500;
}
.page-link:hover { background:var(--fsjb-teal); color:white; border-color:var(--fsjb-teal); transform:translateY(-2px); }
.page-item.active .page-link {
    background: linear-gradient(135deg, var(--fsjb-teal) 0%, var(--fsjb-teal-dark) 100%);
    color:white; font-weight:600; border-color:var(--fsjb-teal);
    box-shadow:0 4px 8px var(--fsjb-teal-shadow);
}
.page-item.disabled .page-link { opacity:0.5; cursor:not-allowed; }

/* ── Tooltips ───────────────────────────────────────────────────── */
.tooltip-inner { background-color:var(--fsjb-navy); font-family:'Montserrat',sans-serif; padding:0.5rem 0.75rem; border-radius:6px; }

/* ── Utilidades de color ────────────────────────────────────────── */
.text-primary  { color:var(--fsjb-navy)  !important; }
.text-teal     { color:var(--fsjb-teal)  !important; }
.text-success  { color:#198754 !important; }
.text-info     { color:#0dcaf0 !important; }
.text-warning  { color:#ffc107 !important; }
.text-dark     { color:#212529 !important; }
.text-white    { color:#ffffff !important; }
.text-muted    { color:var(--fsjb-text-muted) !important; }
.bg-light      { background-color:#f8f9fa !important; }

/* ── Animaciones ────────────────────────────────────────────────── */
@keyframes fadeIn  { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
@keyframes slideDown{ from{opacity:0;transform:translateY(-15px)} to{opacity:1;transform:translateY(0)} }
@keyframes pulse   { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
.pulse-animation { animation:pulse 2s infinite; }
.fade-in  { animation:fadeIn 0.3s ease-out; }
.slide-down{ animation:slideDown 0.4s ease-out; }

/* ── Utilidades generales ───────────────────────────────────────── */
.small { font-size:0.875rem; }
.fw-bold    { font-weight:700 !important; }
.fw-normal  { font-weight:400 !important; }
.fw-semibold{ font-weight:600 !important; }
.bi { vertical-align:middle; }

/* ── Focus / Accesibilidad ──────────────────────────────────────── */
:focus-visible { outline:2px solid var(--fsjb-teal); outline-offset:2px; }
a:focus, button:focus { outline:2px solid var(--fsjb-teal); outline-offset:2px; }

/* ── Scrollbar ──────────────────────────────────────────────────── */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:#f1f1f1; border-radius:5px; }
::-webkit-scrollbar-thumb { background:linear-gradient(135deg, var(--fsjb-teal) 0%, var(--fsjb-navy) 100%); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:linear-gradient(135deg, var(--fsjb-teal-dark) 0%, var(--fsjb-navy-dark) 100%); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width:768px) {
    .container { padding:1.5rem; margin-top:1.5rem; margin-bottom:1.5rem; }
    .section-title { font-size:1rem; padding:0.75rem 1rem; }
    .motivo-box { padding:1rem; margin-bottom:1rem; }
    .checkbox-columns .col-md-6 { max-width:100%; }
    #adjuntoContainer { padding:1.25rem; }
    .btn-primary { padding:0.65rem 1.5rem; font-size:0.95rem; }
    h2 { font-size:1.5rem; }
    .table-responsive { font-size:0.875rem; }
    .modal-dialog { margin:0.5rem; }
    .modal-body { padding:1rem; }
    .fsjb-navbar .navbar-brand { font-size:1.1rem; }
    .fsjb-footer { padding:1.5rem 0; }
    #modalDetalle .modal-dialog { margin:0.5rem; max-width:calc(100% - 1rem); }
    #modalDetalle .modal-body   { max-height:calc(100vh - 150px); padding:1rem; }
}
@media (max-width:576px) {
    .container { padding:1rem; border-radius:12px; }
    .form-control, .form-select { font-size:0.9rem; }
    .motivo-box h6 { font-size:0.95rem; }
    .motivo-box .form-check-label { font-size:0.875rem; }
    .btn-table { font-size:0.8rem; padding:0.25rem 0.5rem; }
    .modal-title { font-size:1rem; }
}

/* ── Impresión ───────────────────────────────────────────────────── */
@media print {
    body { background:white; }
    .container { box-shadow:none; border:1px solid #ddd; margin:0; padding:1rem; }
    .fsjb-navbar,.fsjb-footer,.btn,.section-title,.modal,.alert { display:none !important; }
    .form-control,.form-select { border:1px solid #000; }
    .table { border:1px solid #000; }
    .table thead { background:#f0f0f0 !important; color:#000 !important; }
}