/* ==========================================================================
   SIMAFI · Estilos institucionales
   Port de las clases definidas en el diseño base (Canva) para convivir con
   las utilidades de Tailwind CSS. Colores, tipografía DM Sans y componentes
   propios del portal (sidebar, topbar, paneles, KPIs, calendario, acordeones,
   pestañas, modales y avisos flotantes).
   ========================================================================== */

:root {
    --navy: #102a43;
    --blue: #1769aa;
    --soft: #eff6fb;
    --line: #d9e5ef;
    --ink: #1f3448;
    --muted: #63788c;
    --green: #15803d;
}

body.simafi {
    margin: 0;
    font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
    color: var(--ink);
}

.simafi button,
.simafi input,
.simafi select,
.simafi textarea {
    font: inherit;
}

.simafi button {
    cursor: pointer;
}

.simafi button:disabled {
    cursor: not-allowed;
}

.simafi button:focus-visible,
.simafi input:focus-visible,
.simafi select:focus-visible,
.simafi textarea:focus-visible {
    outline: 3px solid rgba(23, 105, 170, .28);
    outline-offset: 2px;
}

/* ---------- Pantalla de acceso ---------- */
.login-screen {
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(120deg, rgba(16, 42, 67, .97), rgba(23, 105, 170, .88));
    position: relative;
    overflow: hidden;
}

.login-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .18;
}

.login-screen:after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 82% 20%, rgba(24, 166, 115, .35), transparent 28rem);
}

.login-card {
    position: relative;
    z-index: 1;
    box-shadow: 0 28px 80px rgba(4, 24, 43, .38);
}

/* ---------- Shell del portal ---------- */
.portal-shell {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
}

.sidebar {
    width: 252px;
    background: #102a43;
    color: #dbeafe;
    flex: none;
}

.main-area {
    min-width: 0;
    flex: 1;
    background: radial-gradient(circle at 90% 0%, rgba(24, 166, 115, .1), transparent 25rem), #eff6fb;
}

.nav-link {
    border-left: 3px solid transparent;
    color: #b9d1e5;
    transition: .18s;
    text-decoration: none;
}

.nav-link:hover,
.nav-link.active {
    background: rgba(255, 255, 255, .1);
    border-left-color: #5ee0b3;
    color: #fff;
}

.topbar {
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.panel {
    background: #fff;
    border: 1px solid var(--line);
    box-shadow: 0 10px 28px rgba(25, 66, 97, .07);
}

/* ---------- KPIs ---------- */
.kpi {
    border-left: 4px solid #1769aa;
}

.kpi.green {
    border-color: #18a673;
}

.kpi.amber {
    border-color: #d97706;
}

.kpi.red {
    border-color: #dc2626;
}

/* ---------- Widget de calendario ---------- */
.calendar-widget {
    border-left: 0;
    border-top: 4px solid #ef4444;
    border-radius: 20px;
    background: linear-gradient(180deg, #fff 0%, #f8fafc 100%);
    box-shadow: 0 12px 30px rgba(25, 66, 97, .1);
}

.calendar-widget-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid #e2e8f0;
}

.calendar-widget-icon {
    display: flex;
    width: 2.5rem;
    height: 2.5rem;
    align-items: center;
    justify-content: center;
    border-radius: .8rem;
    background: #ef4444;
    color: #fff;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28);
}

.calendar-widget-icon svg {
    width: 1.35rem;
    height: 1.35rem;
    stroke-width: 2.4;
}

/* ---------- Pestañas ---------- */
.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.tab-btn.active {
    color: #1769aa;
    border-bottom-color: #1769aa;
}

/* ---------- Acordeones ---------- */
.accordion-content {
    display: none;
}

.accordion.open .accordion-content {
    display: block;
}

.accordion.open .chevron {
    transform: rotate(180deg);
}

/* ---------- Mosaico de widgets (Mi empresa) ---------- */
/* Colapsados: tarjetas en rejilla; el expandido ocupa todo el ancho para dar aire al contenido. */
#widgets-mi-empresa .accordion.open {
    grid-column: 1 / -1;
}

#widgets-mi-empresa .accordion:not(.open) .accordion-trigger {
    min-height: 4rem;
}

/* Resaltado temporal de la zona abierta por liga directa desde el Dashboard. */
.zona-highlight {
    outline: 3px solid rgba(37, 99, 235, .45);
    outline-offset: 2px;
}

/* ---------- Modales ---------- */
.modal {
    display: none;
}

.modal.open {
    display: flex;
}

/* ---------- Scrollbars finos de los paneles aislados ---------- */
/* Equivalen a las utilidades scrollbar-thin / scrollbar-thumb-slate-300 del diseño:
   el visor de la ley y el catálogo lateral desplazan sólo su contenido. */
.scrollbar-thin {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

.scrollbar-thin::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
    background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 999px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

/* ---------- Fila de chips de filtros por tipo de norma ---------- */
/* Tailwind CDN no incluye scrollbar-none / no-scrollbar: la botonera horizontal
   de «Leyes / Códigos / Reglamentos…» desplaza sin mostrar barra visible. */
.no-scrollbar {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* ---------- Barra de desplazamiento del lector de leyes ---------- */
/* Riel y thumb siempre visibles y arrastrables dentro del área de lectura:
   el scroll queda aislado en #lector-scroll sin mover la página de fondo. */
#lector-scroll {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f1f5f9;
}

#lector-scroll::-webkit-scrollbar {
    width: 8px;
}

#lector-scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 9999px;
}

#lector-scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
    border: 2px solid #f1f5f9; /* Margen para efecto flotante limpio. */
}

#lector-scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* ---------- Pulso de enfoque al saltar entre subrayados ---------- */
@keyframes halo-subrayado {
    0% {
        box-shadow: 0 0 0 0 rgba(217, 119, 6, .55);
    }

    100% {
        box-shadow: 0 0 0 14px rgba(217, 119, 6, 0);
    }
}

.halo-subrayado {
    animation: halo-subrayado 1.1s ease-out 2;
    border-radius: 4px;
}

.modal-card {
    animation: rise .2s ease;
}

/* ---------- Avisos flotantes (toast) ---------- */
.toast {
    opacity: 0;
    transform: translate(-50%, 115%);
    pointer-events: none;
    transition: .25s;
}

.toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

.status-dot {
    width: .55rem;
    height: .55rem;
    border-radius: 999px;
    display: inline-block;
}

.demo-note {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
}

/* ---------- Zonas de carga ---------- */
.upload-dropzone {
    border: 2px dashed #9bb8ce;
    background: #f8fbfd;
    transition: .18s;
}

.upload-dropzone.dragover {
    border-color: #1769aa;
    background: #eff6fb;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.view-fade {
    animation: fadeIn .22s ease;
}

/* ---------- Responsive: sidebar horizontal ---------- */
@media (max-width: 820px) {
    .portal-shell {
        display: block;
    }

    .sidebar {
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 20;
    }

    .sidebar-inner {
        display: flex;
        align-items: center;
        overflow-x: auto;
    }

    .brand-block {
        min-width: 205px;
    }

    .sidebar nav {
        display: flex;
        padding: 0 !important;
    }

    .nav-link {
        white-space: nowrap;
        border-left: 0;
        border-bottom: 3px solid transparent;
    }

    .nav-link:hover,
    .nav-link.active {
        border-left: 0;
        border-bottom-color: #5ee0b3;
    }

    .desktop-user {
        display: none;
    }
}

/* ==========================================================================
   Drawer del chat «Tu Maestro Fiscal» (RAG local)
   ========================================================================== */
.mf-backdrop {
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease;
}

.mf-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.mf-drawer {
    transform: translateX(105%);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
    visibility: hidden;
}

.mf-drawer.open {
    transform: translateX(0);
    visibility: visible;
}

/* Cursor parpadeante mientras el texto de la respuesta se transmite. */
.mf-typing > :last-child::after {
    content: "▍";
    color: #1769aa;
    animation: mf-parpadeo 1s steps(1) infinite;
}

@keyframes mf-parpadeo {
    50% {
        opacity: 0;
    }
}

/* Previsualización fiel del correo emitido en el modal «Detalle del Correo Enviado». */
.correo-preview {
    background: #fff;
    border-radius: 12px;
    padding: 8px;
    overflow-x: auto;
}

.correo-preview img {
    max-width: 100%;
}