/* ============================================================================
 * TEMA DIACAP — capa visual sobre Metronic 7 (mismo esquema que tema-dif.css del CEEM)
 * Se carga DESPUÉS de style.bundle.css. Todo el color sale de las variables.
 * Colores del logo: índigo #3E4294, turquesa #5FC3D9, verde #62B33A, rojo #EA504C.
 * ========================================================================== */
:root {
    --diacap-indigo: #3E4294;
    --diacap-indigo-oscuro: #2E3170;
    --diacap-indigo-suave: #EEEFFA;
    --diacap-marino: #1E2047;
    --diacap-marino-2: #2A2D63;
    --diacap-turquesa: #5FC3D9;
    --diacap-turquesa-texto: #17697B;
    --diacap-turquesa-suave: #E6F7FB;
    --diacap-verde: #62B33A;
    --diacap-verde-texto: #2F6E14;
    --diacap-verde-suave: #EAF6E3;
    --diacap-ambar: #F5A524;
    --diacap-ambar-texto: #7A5500;
    --diacap-ambar-suave: #FFF6E0;
    --diacap-rojo: #EA504C;
    --diacap-rojo-texto: #A82A26;
    --diacap-rojo-suave: #FDECEB;
    --diacap-fondo: #F4F5FA;
    --diacap-borde: #E4E6F0;
    --diacap-texto: #1E2235;
    --diacap-texto-suave: #6B7090;
    --diacap-radio: 14px;
    --diacap-sombra: 0 1px 2px rgba(30, 32, 71, .04), 0 6px 20px rgba(30, 32, 71, .06);
    --diacap-sombra-fuerte: 0 10px 30px rgba(30, 32, 71, .16);
}

body, .content, .wrapper { background: var(--diacap-fondo) !important; color: var(--diacap-texto); font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif; }
.text-dark-75, .text-dark { color: var(--diacap-texto) !important; }
.text-dark-50 { color: #4B5070 !important; }
.text-muted { color: var(--diacap-texto-suave) !important; }
a { color: var(--diacap-indigo); }
a:hover { color: var(--diacap-indigo-oscuro); }

/* ---------- Colores de marca (reemplazan los de Metronic) ---------- */
.btn-primary { background: var(--diacap-indigo) !important; border-color: var(--diacap-indigo) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(62, 66, 148, .25); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background: var(--diacap-indigo-oscuro) !important; border-color: var(--diacap-indigo-oscuro) !important; }
.btn-primary:disabled { opacity: .65; }
.btn-light-primary { background: var(--diacap-indigo-suave) !important; color: var(--diacap-indigo) !important; border-color: transparent !important; }
.btn-light-primary:hover { background: var(--diacap-indigo) !important; color: #fff !important; }
.btn-light-success { background: var(--diacap-verde-suave) !important; color: var(--diacap-verde-texto) !important; }
.btn-light-success:hover { background: var(--diacap-verde) !important; color: #fff !important; }
.btn-light-danger { background: var(--diacap-rojo-suave) !important; color: var(--diacap-rojo-texto) !important; }
.btn-light-danger:hover { background: var(--diacap-rojo) !important; color: #fff !important; }
.btn-warning { background: var(--diacap-ambar) !important; border-color: var(--diacap-ambar) !important; color: #3A2A00 !important; }
.btn { border-radius: 10px; font-weight: 600; }
.btn:not(.btn-icon):not(.btn-sm):not(.btn-xs) { padding: .62rem 1.2rem; }
.btn i { padding-right: .35rem; }
.text-primary { color: var(--diacap-indigo) !important; }
.text-success { color: var(--diacap-verde-texto) !important; }
.text-danger { color: var(--diacap-rojo-texto) !important; }
.text-info { color: var(--diacap-turquesa-texto) !important; }
.bg-light-primary { background: var(--diacap-indigo-suave) !important; }

/* Etiquetas (insignias) legibles: texto oscuro sobre fondo claro */
.label { border-radius: 8px; font-weight: 600; }
.label.label-inline { padding: .35rem .75rem; height: auto; font-size: .8rem; }
.label-light-primary { background: var(--diacap-indigo-suave) !important; color: var(--diacap-indigo) !important; }
.label-light-success { background: var(--diacap-verde-suave) !important; color: var(--diacap-verde-texto) !important; }
.label-light-warning { background: var(--diacap-ambar-suave) !important; color: var(--diacap-ambar-texto) !important; }
.label-light-danger { background: var(--diacap-rojo-suave) !important; color: var(--diacap-rojo-texto) !important; }
.label-light-info { background: var(--diacap-turquesa-suave) !important; color: var(--diacap-turquesa-texto) !important; }
.label-light { background: #EEF0F6 !important; color: #4B5070 !important; }

/* ---------- Encabezado (header-top blanco + menú índigo) ---------- */
.header.header-fixed { box-shadow: 0 2px 14px rgba(30, 32, 71, .08); }
.header .header-top { background: #fff !important; border-bottom: 1px solid var(--diacap-borde); padding: .55rem 0; }
.header .header-top .container { display: flex; align-items: center; justify-content: space-between; }
.header .header-bottom { background: linear-gradient(90deg, var(--diacap-marino) 0%, var(--diacap-marino-2) 100%) !important; }
.header-menu .menu-nav > .menu-item > .menu-link { border-radius: 10px; margin: .55rem .15rem; padding: .6rem 1rem; }
.header-menu .menu-nav > .menu-item > .menu-link .menu-text { color: #D3D5EE !important; font-weight: 500; font-size: .95rem; }
.header-menu .menu-nav > .menu-item > .menu-link .menu-icon { color: #A9ACD6 !important; font-size: 1.25rem; margin-right: .5rem; line-height: 1; }
.header-menu .menu-nav > .menu-item:hover > .menu-link,
.header-menu .menu-nav > .menu-item.menu-item-here > .menu-link { background: rgba(255, 255, 255, .1) !important; }
.header-menu .menu-nav > .menu-item:hover > .menu-link .menu-text,
.header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-text,
.header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-text { color: #fff !important; }
.header-menu .menu-nav > .menu-item.menu-item-active > .menu-link { background: var(--diacap-indigo) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.header-menu .menu-nav > .menu-item.menu-item-active > .menu-link .menu-icon,
.header-menu .menu-nav > .menu-item.menu-item-here > .menu-link .menu-icon { color: var(--diacap-turquesa) !important; }
.header-menu .menu-nav > .menu-item > .menu-link .menu-arrow { color: #A9ACD6 !important; }
.header-menu .menu-submenu.menu-submenu-classic { border-radius: 14px; box-shadow: var(--diacap-sombra-fuerte); border: 1px solid var(--diacap-borde); padding: .5rem; width: 280px; }
.header-menu .menu-subnav > .menu-item > .menu-link { border-radius: 10px; padding: .65rem .9rem; }
.header-menu .menu-subnav > .menu-item > .menu-link .menu-text { color: var(--diacap-texto) !important; font-weight: 500; }
.header-menu .menu-subnav > .menu-item:hover > .menu-link,
.header-menu .menu-subnav > .menu-item.menu-item-active > .menu-link { background: var(--diacap-indigo-suave) !important; }
.header-menu .menu-subnav > .menu-item:hover > .menu-link .menu-text,
.header-menu .menu-subnav > .menu-item.menu-item-active > .menu-link .menu-text { color: var(--diacap-indigo) !important; }
.header-menu .menu-subnav .menu-icon { color: var(--diacap-indigo) !important; margin-right: .6rem; font-size: 1.15rem; }

.diacap-brand { display: flex; align-items: center; gap: .9rem; }
.diacap-brand img { height: 40px; }
.diacap-brand .sep { width: 1px; height: 30px; background: var(--diacap-borde); }
.diacap-brand .centro { font-size: .72rem; line-height: 1.25; color: var(--diacap-texto-suave); font-weight: 500; max-width: 200px; text-transform: uppercase; letter-spacing: .5px; }
.diacap-user-chip { display: flex; align-items: center; gap: .75rem; padding: .35rem .45rem .35rem 1rem; background: #fff; border: 1px solid var(--diacap-borde); border-radius: 50px; cursor: pointer; }
.diacap-user-chip:hover { box-shadow: var(--diacap-sombra); }
.diacap-user-chip .nombre { font-weight: 600; font-size: .9rem; color: var(--diacap-texto); line-height: 1.15; }
.diacap-user-chip .rol { font-size: .74rem; color: var(--diacap-texto-suave); }
.diacap-avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--diacap-indigo), var(--diacap-turquesa)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.diacap-avatar-grande { width: 72px; height: 72px; font-size: 1.5rem; }
.header-mobile { background: #fff; border-bottom: 1px solid var(--diacap-borde); }
.header-mobile .burger-icon span, .header-mobile .burger-icon span::before, .header-mobile .burger-icon span::after { background-color: var(--diacap-indigo); }

/* ---------- Encabezado de página ---------- */
.diacap-pagehead { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin: 1.6rem 0 1.2rem; }
.diacap-pagehead h1 { font-size: 1.6rem; font-weight: 700; color: var(--diacap-marino); margin: 0; }
.diacap-pagehead p { margin: .15rem 0 0; color: var(--diacap-texto-suave); font-size: .9rem; }

/* ---------- Tarjetas ---------- */
.card.card-custom { border: 1px solid var(--diacap-borde); border-radius: var(--diacap-radio); box-shadow: var(--diacap-sombra); background: #fff; }
.card.card-custom > .card-header { border-bottom: 1px solid var(--diacap-borde); background: transparent; padding: 1rem 1.75rem; min-height: 64px; flex-wrap: wrap; gap: .75rem; }
.card.card-custom > .card-header .card-title { margin: 0; }
.card.card-custom > .card-header .card-label { font-weight: 700; font-size: 1.15rem; color: var(--diacap-marino); }
.card.card-custom > .card-body { padding: 1.5rem 1.75rem; }

/* ---------- Formularios ---------- */
label { font-weight: 600; font-size: .9rem; color: #3B4060; margin-bottom: .4rem; }
label.required::after { content: " *"; color: var(--diacap-rojo); }
.form-control { border: 1.5px solid var(--diacap-borde) !important; border-radius: 10px !important; background: #fff !important; min-height: 44px; color: var(--diacap-texto); font-size: 1rem; }
.form-control:focus { border-color: var(--diacap-indigo) !important; box-shadow: 0 0 0 4px rgba(62, 66, 148, .12) !important; }
.form-control.is-invalid { border-color: var(--diacap-rojo) !important; }
.form-control-sm { min-height: 36px; }
textarea.form-control { min-height: 80px; }
.form-text { font-size: .8rem; color: var(--diacap-texto-suave); }
.input-group-text { border: 1.5px solid var(--diacap-borde); border-right: 0; border-radius: 10px 0 0 10px; background: #F7F8FC; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.form-check { padding-left: 1.6rem; }
.form-check-input { width: 1.1rem; height: 1.1rem; margin-left: -1.6rem; margin-top: .2rem; accent-color: var(--diacap-indigo); }
.form-check-label { font-weight: 500; }

/* ---------- Tablas ---------- */
.table thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--diacap-texto-suave) !important; font-weight: 600; border-bottom: 1px solid var(--diacap-borde) !important; background: #F8F9FC; padding: .9rem 1rem; border-top: 0 !important; }
.table tbody td { padding: .9rem 1rem; vertical-align: middle; border-top: 1px solid #EEF0F6 !important; color: var(--diacap-texto); }
.table tbody tr:hover { background: #F8F9FD; }
.table tfoot td, .table tfoot th { padding: .9rem 1rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active .page-link { background: var(--diacap-indigo); color: #fff; }
.dataTables_empty { color: var(--diacap-texto-suave) !important; padding: 2.5rem !important; }

/* ---------- Modales / SweetAlert / alertas ---------- */
.modal-content { border: 0; border-radius: 18px; box-shadow: var(--diacap-sombra-fuerte); overflow: hidden; }
.modal-header { border-bottom: 1px solid var(--diacap-borde); padding: 1.25rem 1.75rem; background: #FAFBFE; align-items: center; }
.modal-header .modal-title { color: var(--diacap-marino); font-size: 1.15rem; }
.modal-header .close { background: #EEF0F6; border-radius: 10px; width: 34px; height: 34px; opacity: 1; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0 0 0 auto; }
.modal-body { padding: 1.75rem; }
.modal-footer { border-top: 1px solid var(--diacap-borde); padding: 1rem 1.75rem; background: #FAFBFE; }
.modal-backdrop.show { opacity: .55; background: var(--diacap-marino); }
.swal2-popup { border-radius: 18px !important; font-family: 'Poppins', sans-serif !important; }
.alert { border-radius: 12px; }
.nav-tabs-line .nav-link.active { color: var(--diacap-indigo) !important; border-bottom-color: var(--diacap-indigo) !important; }

/* ---------- Botón «Guardando...» (funciones.js botonCargando) ---------- */
.indicator-progress { display: none; }
[data-kt-indicator="on"] > .indicator-progress { display: inline-block; }
[data-kt-indicator="on"] > .indicator-label { display: none; }

/* ---------- Utilidades que Bootstrap 4 no trae ---------- */
.gap-1 { gap: .25rem !important; } .gap-2 { gap: .5rem !important; } .gap-3 { gap: .75rem !important; } .gap-4 { gap: 1rem !important; }
.gap-5 { gap: 1.25rem !important; } .gap-6 { gap: 1.5rem !important; } .gap-8 { gap: 2rem !important; } .gap-10 { gap: 2.5rem !important; }
.fila-espaciada > [class*="col"] { margin-bottom: 1.5rem; }
.fila-espaciada.mb-0 > [class*="col"], .fila-espaciada:last-child > [class*="col"]:last-child { margin-bottom: 0; }
.border-bottom.border-dashed { border-bottom: 1px dashed var(--diacap-borde) !important; }
.border.border-dashed { border-style: dashed !important; }
.mw-300px { max-width: 300px !important; } .mw-400px { max-width: 400px !important; } .mw-650px { max-width: 650px !important; }
.mw-700px { max-width: 700px !important; } .mw-750px { max-width: 750px !important; } .mw-800px { max-width: 800px !important; } .mw-900px { max-width: 900px !important; }
.w-175px { width: 175px !important; } .w-150px { width: 150px !important; } .w-250px { width: 250px !important; } .w-200px { width: 200px !important; }
.texto-multilinea { white-space: pre-line; }

/* ---------- Piezas propias del sistema ---------- */
.buscador-usuario .buscador-resultados { z-index: 20; max-height: 320px; overflow-y: auto; }
.pasos-caratula { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.pasos-caratula li { display: flex; align-items: center; gap: 10px; flex: 1 1 160px; }
.pasos-caratula .num { width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; background: #F1F2F7; color: #5E6278; }
.pasos-caratula li.actual .num { background: var(--diacap-indigo); color: #fff; }
.pasos-caratula li.hecho .num { background: var(--diacap-verde-suave); color: var(--diacap-verde-texto); }
.pasos-caratula li.actual .titulo { color: var(--diacap-texto); font-weight: 700; }
.paso-caratula[hidden] { display: none !important; }
.aviso-cifrado { background: var(--diacap-indigo-suave); color: var(--diacap-indigo); border-radius: 6px; padding: 6px 12px; font-weight: 600; font-size: .9rem; }

@media print {
    .header, .header-mobile, .footer, .scrolltop, .offcanvas, .no-imprimir { display: none !important; }
    body, .content, .wrapper { background: #fff !important; padding: 0 !important; }
    .card.card-custom { box-shadow: none; border: 0; }
}

/* Alertas en tonos suaves (Metronic 7 las trae muy saturadas) */
.alert-warning { background: var(--diacap-ambar-suave) !important; color: var(--diacap-ambar-texto) !important; border: 1px solid #F3DCA6 !important; }
.alert-info { background: var(--diacap-turquesa-suave) !important; color: var(--diacap-turquesa-texto) !important; border: 1px solid #BFE6EF !important; }
.alert-danger { background: var(--diacap-rojo-suave) !important; color: var(--diacap-rojo-texto) !important; border: 1px solid #F6C9C7 !important; }
.alert-success { background: var(--diacap-verde-suave) !important; color: var(--diacap-verde-texto) !important; border: 1px solid #CDE8BF !important; }
.alert a { color: inherit; font-weight: 600; text-decoration: underline; }
.bg-primary { background-color: var(--diacap-indigo) !important; }
.form-check.p-4 { padding-left: 2.9rem !important; }
.form-check.p-4 .form-check-input { margin-left: -1.75rem; }

/* Foto del usuario en el encabezado del expediente */
.foto-expediente { width: 80px; height: 80px; object-fit: cover; border-radius: 50%; border: 3px solid #5FC3D9; }