/* ============================================================
   VDP LEGAL - wwwroot/css/site.css
   Estilos principales del sistema.
   Paleta basada en Azul Navy (según Pantone.html provisto).
   ============================================================ */

/* ── 1. VARIABLES DE COLOR (paleta Navy) ──────────────────── */
:root {
    --navy-darkest:  #050F1D;
    --navy-darker:   #08172C;
    --navy-base:     #0B1F3B;   /* Color principal */
    --navy-dark:     #12305A;
    --navy-medium:   #1A3F73;
    --navy-mid:      #2C568F;
    --navy-light:    #3F6FA8;
    --navy-lighter:  #6B93C6;
    --navy-pale:     #9BB7DA;
    --navy-ghost:    #D6E1F0;
    --navy-bg:       #EEF3FA;   /* Fondo general */

    /* Colores semánticos */
    --color-success:  #1D9E75;
    --color-warning:  #BA7517;
    --color-danger:   #E24B4A;
    --color-info:     #378ADD;

    /* Layout */
    --sidebar-width:  240px;
    --topbar-height:   60px;
    --border-radius:    8px;
    --shadow-sm:   0 1px 3px rgba(11,31,59,.08);
    --shadow-md:   0 4px 12px rgba(11,31,59,.12);
    --transition:  .2s ease;
}

/* ── 2. RESET Y BASE ────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: 0.9rem;
    color: #1a1a2e;
    background-color: var(--navy-bg);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--navy-medium);
    text-decoration: none;
}
a:hover {
    color: var(--navy-dark);
    text-decoration: underline;
}

/* Scroll personalizado */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--navy-bg); }
::-webkit-scrollbar-thumb { background: var(--navy-ghost); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--navy-pale); }

/* ── 3. LAYOUT PRINCIPAL ────────────────────────────────────── */
.vdp-layout {
    display: flex;
    min-height: 100vh;
}

/* ── 4. SIDEBAR ─────────────────────────────────────────────── */
.vdp-sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background-color: var(--navy-base);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    transition: transform var(--transition);
    overflow-y: auto;
    overflow-x: hidden;
}

.vdp-sidebar-logo {
    padding: 1.25rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.vdp-logo-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    color: #fff !important;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: .3px;
    text-decoration: none !important;
}

.vdp-logo-link i {
    font-size: 1.4rem;
    color: var(--navy-lighter);
}

/* Espacio de trabajo / usuario logueado */
.vdp-workspace {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .85rem 1rem;
    border-bottom: 1px solid rgba(255,255,255,.06);
}

.vdp-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--navy-mid);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.vdp-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.vdp-user-name {
    color: #fff;
    font-size: .8rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vdp-user-rol {
    color: var(--navy-pale);
    font-size: .7rem;
}

/* Menú de navegación */
.vdp-nav {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0 .5rem;
    flex: 1;
}

.vdp-nav-item {
    margin-bottom: 2px;
}

.vdp-nav-link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .75rem;
    border-radius: var(--border-radius);
    color: rgba(255,255,255,.75);
    font-size: .85rem;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    transition: background var(--transition), color var(--transition);
    text-decoration: none !important;
}

.vdp-nav-link i {
    font-size: 1rem;
    flex-shrink: 0;
}

.vdp-nav-link:hover {
    background-color: rgba(255,255,255,.08);
    color: #fff;
    text-decoration: none !important;
}

.vdp-nav-link.active {
    background-color: var(--navy-medium);
    color: #fff;
    font-weight: 500;
}

/* Submenú */
.vdp-submenu {
    list-style: none;
    padding: .25rem 0 .25rem 1.5rem;
    margin: 0;
    overflow: hidden;
    max-height: 0;
    transition: max-height .25s ease;
}

.vdp-submenu.open {
    max-height: 200px;
}

.vdp-submenu-link {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .45rem .75rem;
    border-radius: var(--border-radius);
    color: rgba(255,255,255,.65);
    font-size: .82rem;
    text-decoration: none !important;
    transition: background var(--transition), color var(--transition);
}

.vdp-submenu-link:hover {
    background-color: rgba(255,255,255,.06);
    color: #fff;
    text-decoration: none !important;
}

.vdp-chevron {
    transition: transform var(--transition);
    font-size: .75rem;
}

.vdp-submenu-toggle[aria-expanded="true"] .vdp-chevron {
    transform: rotate(180deg);
}

/* Badge de contador */
.vdp-badge {
    background-color: var(--color-danger);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    margin-left: auto;
}

/* Footer del sidebar */
.vdp-sidebar-footer {
    padding: .75rem .5rem;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: auto;
}

.vdp-logout {
    color: rgba(255,255,255,.55) !important;
}
.vdp-logout:hover {
    background-color: rgba(226,75,74,.15) !important;
    color: #f87171 !important;
}

/* ── 5. ÁREA PRINCIPAL ──────────────────────────────────────── */
.vdp-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Topbar */
.vdp-topbar {
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid var(--navy-ghost);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 50;
    gap: .75rem;
}

.vdp-topbar-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vdp-sidebar-toggle {
    background: transparent;
    border: 1px solid var(--navy-ghost);
    color: var(--navy-medium);
    padding: .35rem .55rem;
    border-radius: 6px;
}

.vdp-sidebar-toggle:hover {
    background: var(--navy-bg);
    border-color: var(--navy-pale);
}

/* Icono de notificaciones */
.vdp-icon-btn {
    background: transparent;
    border: 1px solid var(--navy-ghost);
    color: var(--navy-medium);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: background var(--transition);
}
.vdp-icon-btn:hover {
    background: var(--navy-bg);
}

.vdp-notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: var(--color-danger);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #fff;
}

/* Avatar en topbar */
.vdp-avatar-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--navy-medium);
    color: #fff;
    border: none;
    font-size: .75rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--transition);
}
.vdp-avatar-btn:hover {
    background-color: var(--navy-dark);
}

/* Dropdown de notificaciones */
.vdp-notif-dropdown {
    width: 340px;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--navy-ghost);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
}

.vdp-notif-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--navy-ghost);
    font-size: .85rem;
}

/* Área de contenido */
.vdp-content {
    padding: 1.5rem;
    flex: 1;
}

/* ── 6. BOTONES ─────────────────────────────────────────────── */
.vdp-btn-primary {
    background-color: var(--navy-medium);
    border-color: var(--navy-medium);
    color: #fff;
    font-weight: 500;
    padding: .55rem 1.25rem;
    border-radius: var(--border-radius);
    transition: background var(--transition), border-color var(--transition);
}
.vdp-btn-primary:hover, .vdp-btn-primary:focus {
    background-color: var(--navy-dark);
    border-color: var(--navy-dark);
    color: #fff;
}

.vdp-btn-outline {
    background: transparent;
    border: 1px solid var(--navy-medium);
    color: var(--navy-medium);
    font-weight: 500;
    padding: .5rem 1.25rem;
    border-radius: var(--border-radius);
    transition: all var(--transition);
}
.vdp-btn-outline:hover {
    background: var(--navy-medium);
    color: #fff;
}

/* ── 7. TARJETAS / CARDS ────────────────────────────────────── */
.vdp-card {
    background: #fff;
    border: 1px solid var(--navy-ghost);
    border-radius: 10px;
    padding: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.vdp-card-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--navy-dark);
    margin-bottom: .75rem;
}

/* ── 8. BADGES DE TIPO/ESTADO ───────────────────────────────── */
/* ── Badges de Tipo de expediente ── */
.badge-judicial      { background-color: var(--navy-medium); color: #fff; }
.badge-extrajudicial { background-color: var(--navy-light);  color: #fff; }

/* ── Badges de Estado de tarea ── */
.badge-pendiente     { background-color: #fef3c7; color: #92400e;  border: 1px solid #fcd34d; } /* amarillo */
.badge-enprogreso    { background-color: #dbeafe; color: #1e40af;  border: 1px solid #93c5fd; } /* azul     */
.badge-completada    { background-color: #d1fae5; color: #065f46;  border: 1px solid #6ee7b7; } /* verde    */
.badge-vencida       { background-color: #fee2e2; color: #991b1b;  border: 1px solid #fca5a5; } /* rojo     */

/* ── Badges de Prioridad ── */
.badge-alta          { background-color: #fee2e2; color: #991b1b;  border: 1px solid #fca5a5; } /* rojo     */
.badge-media         { background-color: #fef3c7; color: #92400e;  border: 1px solid #fcd34d; } /* amarillo */
.badge-baja          { background-color: #d1fae5; color: #065f46;  border: 1px solid #6ee7b7; } /* verde    */
.badge-sin-prioridad { background-color: #f3f4f6; color: #6b7280;  border: 1px solid #d1d5db; } /* gris     */
.badge-proveida      { background-color: #ede9fe; color: #5b21b6;  border: 1px solid #c4b5fd; } /* violeta  */

/* ── 9. TABLA ───────────────────────────────────────────────── */
.vdp-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .85rem;
}

.vdp-table th {
    background-color: var(--navy-bg);
    color: var(--navy-dark);
    font-weight: 600;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .4px;
    padding: .65rem 1rem;
    border-bottom: 2px solid var(--navy-ghost);
    white-space: nowrap;
}

.vdp-table td {
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--navy-bg);
    color: #374151;
    vertical-align: middle;
}

.vdp-table tbody tr:hover {
    background-color: var(--navy-bg);
    cursor: pointer;
}

/* ── 10. TIMELINE (Solapa Movimientos) ──────────────────────── */
.vdp-timeline {
    position: relative;
    padding: 0;
    list-style: none;
}

.vdp-timeline::before {
    content: '';
    position: absolute;
    left: 18px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--navy-ghost);
}

.vdp-timeline-item {
    position: relative;
    padding: 0 0 1.25rem 3rem;
}

.vdp-timeline-icon {
    position: absolute;
    left: 6px;
    top: 2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--navy-medium);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    z-index: 1;
}

.vdp-timeline-icon.sistema  { background: var(--navy-pale); }
.vdp-timeline-icon.judicial { background: var(--navy-medium); }
.vdp-timeline-icon.consulta { background: var(--navy-light); }
.vdp-timeline-icon.extrajudicial  { background: #bae6fd; color: #0c4a6e; }
.vdp-timeline-icon.administrativo { background: #e9d5ff; color: #581c87; }

.vdp-timeline-content {
    background: #fff;
    border: 1px solid var(--navy-ghost);
    border-radius: var(--border-radius);
    padding: .75rem 1rem;
    box-shadow: var(--shadow-sm);
}

.vdp-timeline-title {
    font-weight: 600;
    font-size: .88rem;
    color: var(--navy-dark);
}

.vdp-timeline-meta {
    font-size: .75rem;
    color: #9ca3af;
    margin-top: .25rem;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

/* ── 11. PANTALLA DE LOGIN ──────────────────────────────────── */
.vdp-login-body {
    min-height: 100vh;
    background: var(--navy-bg);
    display: flex;
    align-items: stretch;
}

.vdp-login-container {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

/* Panel izquierdo: branding */
.vdp-login-brand {
    flex: 1;
    background: linear-gradient(160deg, var(--navy-base) 0%, var(--navy-medium) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 2.5rem;
    min-height: 100vh;
}

.vdp-login-brand-content {
    max-width: 380px;
    color: #fff;
}

.vdp-login-logo {
    font-size: 3rem;
    color: var(--navy-lighter);
    margin-bottom: 1rem;
}

.vdp-login-brand-name {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.vdp-login-brand-tagline {
    color: var(--navy-pale);
    font-size: 1rem;
    margin-bottom: 2.5rem;
}

.vdp-login-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vdp-login-features li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .6rem 0;
    color: rgba(255,255,255,.8);
    font-size: .9rem;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.vdp-login-features li i {
    color: var(--navy-lighter);
    font-size: 1.1rem;
    margin-top: 1px;
    flex-shrink: 0;
}

/* Panel derecho: formulario */
.vdp-login-form-panel {
    width: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: #fff;
    flex-shrink: 0;
}

.vdp-login-form-wrapper {
    width: 100%;
    max-width: 360px;
}

.vdp-login-form-header {
    margin-bottom: 1.75rem;
}

.vdp-login-form-header h2 {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--navy-base);
    margin-bottom: .25rem;
}

/* ── 12. RESPONSIVE (mobile) ────────────────────────────────── */
@media (max-width: 768px) {
    .vdp-sidebar {
        transform: translateX(-100%);
    }

    .vdp-sidebar.open {
        transform: translateX(0);
        box-shadow: var(--shadow-md);
    }

    .vdp-main {
        margin-left: 0;
    }

    .vdp-login-brand {
        display: none;
    }

    .vdp-login-form-panel {
        width: 100%;
    }

    .vdp-content {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .vdp-topbar {
        padding: 0 .75rem;
    }
}

/* ── 13. ACCESIBILIDAD ──────────────────────────────────────── */
/* Foco visible para navegación con teclado */
:focus-visible {
    outline: 2px solid var(--navy-lighter);
    outline-offset: 2px;
}

/* Skip link para lectores de pantalla */
.skip-link {
    position: absolute;
    top: -100%;
    left: .5rem;
    background: var(--navy-base);
    color: #fff;
    padding: .5rem 1rem;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    z-index: 9999;
    transition: top var(--transition);
}

.skip-link:focus {
    top: 0;
}

/* ── 14. ESTILOS MÓDULO EXPEDIENTES ──────────────────────── */
.vdp-page-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy-base);
    margin-bottom: .25rem;
}

.vdp-dato-label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #9ca3af;
    margin-bottom: .2rem;
}

.vdp-dato-valor {
    font-size: .88rem;
    color: #1f2937;
}

/* Solapas */
.vdp-solapas {
    border-bottom: 2px solid var(--navy-ghost);
    gap: .25rem;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.vdp-solapa-link {
    display: flex;
    align-items: center;
    padding: .5rem .9rem;
    font-size: .85rem;
    color: #6b7280;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    text-decoration: none !important;
    transition: color var(--transition), border-color var(--transition);
}

.vdp-solapa-link:hover {
    color: var(--navy-dark);
}

.vdp-solapa-link.active {
    color: var(--navy-medium);
    border-bottom-color: var(--navy-medium);
    font-weight: 500;
}

.vdp-solapa-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-danger);
    color: #fff;
    font-size: .62rem;
    font-weight: 700;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    margin-left: .3rem;
}

/* Cards de tipo (Judicial / Extrajudicial) */
.vdp-tipo-card {
    transition: all var(--transition);
}

.vdp-tipo-card:hover {
    border-color: var(--navy-medium) !important;
    background: var(--navy-bg) !important;
}

.vdp-tipo-card.border-primary {
    border-color: var(--navy-medium) !important;
    background: var(--navy-bg) !important;
}

/* Cards de parte (Actora / Demandada / Tercero) */
.vdp-parte-card {
    transition: all var(--transition);
}

.vdp-parte-card.border-primary {
    border-color: var(--navy-medium) !important;
    background: var(--navy-bg) !important;
}

/* Doc card */
.vdp-doc-card:hover {
    border-color: var(--navy-medium) !important;
    background: var(--navy-bg) !important;
}

/* ── 15. MODAL DETALLE TAREA ─────────────────────────────── */
.vdp-meta-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #9ca3af;
}

#lista-comentarios-tarea .vdp-comentario {
    display: flex;
    gap: .75rem;
    margin-bottom: 1rem;
}

#lista-comentarios-tarea .vdp-comentario-burbuja {
    flex: 1;
    background: var(--navy-bg);
    border-radius: 0 8px 8px 8px;
    padding: .6rem .85rem;
    font-size: .84rem;
}

#lista-comentarios-tarea .vdp-comentario-meta {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: .25rem;
}

/* ── 16. MOVIMIENTO FIJADO ───────────────────────────────── */
.vdp-mov-fijado-card {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    transition: box-shadow var(--transition);
}

.vdp-mov-fijado-card:hover {
    box-shadow: 0 2px 8px rgba(245,158,11,.15);
}

/* ── 17. SOLAPA PRUEBAS - ACORDEÓN ───────────────────────── */
.vdp-prueba-grupo-header:hover {
    background: var(--navy-bg) !important;
}

.vdp-prueba-grupo-header .vdp-chevron {
    transition: transform .2s;
}

/* ── 18. SELECTOR ESTADO PRUEBA ──────────────────────────── */
.vdp-estado-opcion:hover {
    background: var(--navy-bg);
}

.vdp-estado-opcion.seleccionado {
    background: var(--navy-bg);
}

.vdp-estado-opcion:last-child {
    border-bottom: none !important;
}

/* ── 19. BUSCADOR DE PERSONAS ────────────────────────────── */
.vdp-persona-item:hover {
    background: var(--navy-bg);
}

.vdp-persona-nueva:hover {
    background: #eff6ff;
    color: var(--navy-medium) !important;
}

.vdp-persona-dropdown {
    border-color: var(--navy-ghost) !important;
}

/* ── Notificaciones ──────────────────────────────────────── */
.vdp-notif-wrapper {
    position: relative;
}

.vdp-notif-panel {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 380px;
    max-height: 500px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0,0,0,.15);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 9999;
}

.vdp-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #f1f5f9;
    flex-shrink: 0;
}

.vdp-notif-tabs {
    display: flex;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.vdp-notif-tab {
    flex: 1;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 9px 0;
    font-size: .8rem;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: all .15s;
}

    .vdp-notif-tab.active {
        color: #1e3a5f;
        border-bottom-color: #1e3a5f;
        background: #fff;
    }

#notif-lista {
    overflow-y: auto;
    flex: 1;
}

.vdp-notif-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f5f9;
    text-decoration: none !important;
    color: inherit !important;
    transition: background .12s;
}

    .vdp-notif-item:hover {
        background: #f8fafc;
    }

    .vdp-notif-item.no-leida {
        background: #eff6ff;
    }

        .vdp-notif-item.no-leida:hover {
            background: #dbeafe;
        }

.vdp-notif-icono {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .95rem;
}

    .vdp-notif-icono.tipo-tarea {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .vdp-notif-icono.tipo-vencimiento {
        background: #fee2e2;
        color: #dc2626;
    }

    .vdp-notif-icono.tipo-alerta {
        background: #fef3c7;
        color: #d97706;
    }

    .vdp-notif-icono.tipo-info {
        background: #d1fae5;
        color: #059669;
    }

.vdp-notif-titulo {
    font-size: .83rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 2px;
    line-height: 1.35;
}

.vdp-notif-mensaje {
    font-size: .77rem;
    color: #6b7280;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vdp-notif-fecha {
    font-size: .72rem;
    color: #9ca3af;
    margin-top: 3px;
}

.vdp-notif-footer {
    padding: 10px 16px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
}

.vdp-notif-vacia {
    text-align: center;
    padding: 40px 16px;
    color: #9ca3af;
    font-size: .83rem;
}

.vdp-notif-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc2626;
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid #fff;
}
/* ── FIN Notificaciones ───────────────────────────────────── */
/* ── 20. MÓDULO AGENDA ───────────────────────────────────────── */

/* Encabezado de página — igual que el resto del sistema */
.vdp-agenda-titulo {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--navy-base);
    margin-bottom: .15rem;
}

.vdp-agenda-subtitulo {
    font-size: .82rem;
    color: #6b7280;
}

/* Card contenedora de filtros */
.vdp-agenda-filtros {
    background: #fff;
    border: 1px solid var(--navy-ghost);
    border-radius: 10px;
    padding: .85rem 1.1rem;
    box-shadow: var(--shadow-sm);
    margin-bottom: .75rem;
}

/* Etiquetas de filtro */
.vdp-agenda-filtros label {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #9ca3af;
    margin-bottom: .25rem;
    display: block;
}

/* Selects de filtro alineados con el sistema */
.vdp-agenda-filtros .form-select {
    font-size: .85rem;
    border-color: var(--navy-ghost);
    color: #374151;
}
.vdp-agenda-filtros .form-select:focus {
    border-color: var(--navy-lighter);
    box-shadow: 0 0 0 3px rgba(107,147,198,.18);
}

/* Botones de vista (Hoy / Mes / Semana / Lista) */
.vdp-agenda-btn-vista {
    background: transparent;
    border: 1px solid var(--navy-ghost);
    color: var(--navy-medium);
    font-size: .82rem;
    font-weight: 500;
    padding: .38rem .85rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: all var(--transition);
    white-space: nowrap;
}
.vdp-agenda-btn-vista:hover {
    background: var(--navy-bg);
    border-color: var(--navy-pale);
    color: var(--navy-dark);
}
.vdp-agenda-btn-vista.activo {
    background: var(--navy-medium);
    border-color: var(--navy-medium);
    color: #fff;
}

/* Leyenda de tipos de evento */
.vdp-agenda-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: .75rem;
}
.vdp-agenda-leyenda-item {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .75rem;
    color: #6b7280;
}
.vdp-agenda-leyenda-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* Card del calendario */
.vdp-agenda-calendar-card {
    background: #fff;
    border: 1px solid var(--navy-ghost);
    border-radius: 10px;
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}

/* Sobreescribir estilos de FullCalendar para que encaje con el sistema */
.fc {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    font-size: .85rem;
}

/* Toolbar de FullCalendar (prev/next/title) */
.fc .fc-toolbar-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--navy-dark);
}

.fc .fc-button {
    background-color: var(--navy-medium) !important;
    border-color: var(--navy-medium) !important;
    font-size: .8rem;
    padding: .3rem .7rem;
    border-radius: var(--border-radius) !important;
    font-weight: 500;
}
.fc .fc-button:hover {
    background-color: var(--navy-dark) !important;
    border-color: var(--navy-dark) !important;
}
.fc .fc-button:focus {
    box-shadow: 0 0 0 3px rgba(107,147,198,.25) !important;
}

/* Cabecera de días */
.fc .fc-col-header-cell-cushion {
    font-size: .78rem;
    font-weight: 600;
    color: var(--navy-medium);
    text-transform: uppercase;
    letter-spacing: .3px;
    text-decoration: none !important;
}

/* Números de día */
.fc .fc-daygrid-day-number {
    font-size: .8rem;
    color: #374151;
    text-decoration: none !important;
    padding: .3rem .5rem;
}
.fc .fc-daygrid-day.fc-day-today {
    background-color: rgba(26,63,115,.06) !important;
}
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number {
    background: var(--navy-medium);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* Eventos */
.fc-event {
    border-radius: 5px !important;
    border: none !important;
    font-size: .77rem !important;
    font-weight: 500;
    padding: 1px 5px !important;
    cursor: pointer;
}
.fc-event:hover {
    filter: brightness(.92);
}

/* "+N more" */
.fc .fc-daygrid-more-link {
    font-size: .74rem;
    color: var(--navy-medium);
    font-weight: 500;
}

/* Vista lista */
.fc .fc-list-event:hover td {
    background: var(--navy-bg) !important;
}
.fc .fc-list-event-title a {
    color: var(--navy-dark) !important;
    text-decoration: none !important;
}
.fc .fc-list-day-cushion {
    background: var(--navy-bg) !important;
    font-size: .78rem;
    font-weight: 600;
    color: var(--navy-medium);
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Vista timeGrid (día/semana) */
.fc .fc-timegrid-slot-label-cushion {
    font-size: .75rem;
    color: #9ca3af;
}
.fc .fc-timegrid-now-indicator-line {
    border-color: var(--color-danger) !important;
}
.fc .fc-timegrid-now-indicator-arrow {
    border-top-color: var(--color-danger) !important;
    border-bottom-color: var(--color-danger) !important;
}

/* Popover de detalle de evento */
.vdp-agenda-popover {
    background: #fff;
    border: 1px solid var(--navy-ghost);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    min-width: 270px;
    max-width: 330px;
    font-size: .84rem;
}
.vdp-agenda-popover-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem .85rem .5rem;
    border-bottom: 1px solid var(--navy-ghost);
}
.vdp-agenda-popover-body {
    padding: .65rem .85rem;
    color: #374151;
    line-height: 1.6;
}
.vdp-agenda-popover-body i {
    color: var(--navy-pale);
    width: 16px;
    text-align: center;
    margin-right: .35rem;
}
.vdp-agenda-popover-footer {
    padding: .5rem .85rem .65rem;
    display: flex;
    gap: .5rem;
    border-top: 1px solid var(--navy-ghost);
}

/* Badge de tipo en el popover */
.vdp-agenda-tipo-badge {
    font-size: .7rem;
    font-weight: 600;
    padding: .2rem .6rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

/* Modal de nuevo/editar evento — inputs alineados con el sistema */
#modalEvento .modal-content {
    border: 1px solid var(--navy-ghost);
    border-radius: 12px;
    box-shadow: var(--shadow-md);
}
#modalEvento .modal-header {
    border-bottom: 1px solid var(--navy-ghost);
    padding: 1rem 1.25rem .75rem;
}
#modalEvento .modal-title {
    font-size: .98rem;
    font-weight: 600;
    color: var(--navy-dark);
}
#modalEvento .form-label {
    font-size: .78rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: .3rem;
}
#modalEvento .form-control,
#modalEvento .form-select {
    font-size: .85rem;
    border-color: var(--navy-ghost);
    border-radius: var(--border-radius);
    color: #1f2937;
}
#modalEvento .form-control:focus,
#modalEvento .form-select:focus {
    border-color: var(--navy-lighter);
    box-shadow: 0 0 0 3px rgba(107,147,198,.18);
}
#modalEvento .form-text {
    font-size: .75rem;
    color: #9ca3af;
}
#modalEvento .form-check-label {
    font-size: .84rem;
    color: #374151;
}

/* Dropdown custom de tipo de evento */
.vdp-tipo-dropdown {
    position: relative;
}

.vdp-tipo-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    background: #fff !important;
}

.vdp-tipo-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}

.vdp-tipo-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid var(--navy-ghost);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow-md);
    list-style: none;
    margin: 0;
    padding: .25rem 0;
    z-index: 200;
}

    .vdp-tipo-menu.open {
        display: block;
    }

    .vdp-tipo-menu li {
        display: flex;
        align-items: center;
        gap: .5rem;
        padding: .4rem .75rem;
        font-size: .85rem;
        color: #374151;
        cursor: pointer;
        transition: background var(--transition);
    }

        .vdp-tipo-menu li::before {
            content: '';
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 3px;
            flex-shrink: 0;
            background: var(--dot-color, transparent);
            border: var(--dot-border, none);
        }

        .vdp-tipo-menu li:hover {
            background: var(--navy-bg);
        }

        .vdp-tipo-menu li.seleccionado {
            background: var(--navy-bg);
            font-weight: 500;
            color: var(--navy-dark);
        }

/* ── 21. TAREAS GLOBAL — KANBAN ──────────────────────────── */

/* Grupo por expediente */
.vdp-tarea-grupo-header:hover {
    background: var(--navy-bg);
    border-radius: 8px;
    padding: 4px 6px;
    margin: -4px -6px;
}

/* Columna kanban */
.vdp-kanban-col {
    background: var(--navy-bg);
    border-radius: 10px;
    padding: .6rem;
    min-height: 80px;
}

.vdp-kanban-col-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
    margin-bottom: .5rem;
    padding: 0 .25rem;
}

.vdp-kanban-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vdp-kanban-count {
    margin-left: auto;
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 20px;
    padding: 0 6px;
    font-size: .7rem;
}

/* Tarjeta de tarea */
.vdp-tarea-card {
    background: #fff;
    border: 1px solid var(--navy-ghost);
    border-radius: 8px;
    padding: .6rem .75rem;
    margin-bottom: .4rem;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow var(--transition), border-color var(--transition);
}

.vdp-tarea-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--navy-pale);
}

/* Franja de prioridad izquierda */
.vdp-tarea-card-prioridad {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 8px 0 0 8px;
}

/* Estado vencida */
.vdp-tarea-card--vencida {
    border-color: #fca5a5;
    background: #fff5f5;
}

.vdp-tarea-card--vencida:hover {
    border-color: #f87171;
}

/* Vence hoy */
.vdp-tarea-card--hoy {
    border-color: #fcd34d;
    background: #fffbeb;
}

/* Título de la tarjeta */
.vdp-tarea-card-titulo {
    font-size: .83rem;
    font-weight: 500;
    color: var(--navy-dark);
    margin-bottom: .4rem;
    line-height: 1.3;
    padding-left: 6px;
}

/* Footer: fecha + avatar */
.vdp-tarea-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 6px;
}

/* ── 22. VISTA GENERAL ───────────────────────────────────── */

/* Botones de cabecera de columna */
.vg-th-btn {
    background: none;
    border: none;
    padding: 0;
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #6b7280;
    cursor: pointer;
    display: flex;
    align-items: center;
}
.vg-th-btn:hover { color: var(--navy-medium); }

/* Item de prueba */
.vg-prueba-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    padding: .25rem .4rem;
    border-radius: 6px;
    transition: background var(--transition);
}
.vg-prueba-item:hover { background: var(--navy-bg); }

/* Item de movimiento */
.vg-mov-item {
    padding: .3rem .4rem;
    border-radius: 6px;
    transition: background var(--transition);
    border-bottom: 1px solid var(--navy-ghost);
}
.vg-mov-item:last-child { border-bottom: none; }
.vg-mov-item:hover { background: var(--navy-bg); }

.vg-mov-icono {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: var(--navy-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Item de tarea */
.vg-tarea-item {
    padding: .3rem .4rem;
    border-radius: 6px;
    border-bottom: 1px solid var(--navy-ghost);
    transition: background var(--transition);
}
.vg-tarea-item:last-child { border-bottom: none; }
.vg-tarea-item:hover { background: var(--navy-bg); }

.vg-tarea-vencida {
    background: #fff5f5;
}
.vg-tarea-vencida:hover { background: #fee2e2; }

/* Fila de expediente */
.vg-fila-header:hover > td:first-child {
    background: var(--navy-bg);
}

/* ── 23. MÓDULO FINANZAS GLOBAL ───────────────────────────────────── */

/* ── Contenedor de filtros ── */
.vdp-finanzas-filtros {
    border-top: 3px solid var(--navy-base);
}

/* ── KPI cards ── */
.vdp-finanzas-kpi-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #6b7280;
}

.vdp-finanzas-kpi-valor {
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: 4px;
}

/* ── Tabla: fila de expediente ── */
.vdp-finanzas-fila-exp {
    cursor: default;
}

    .vdp-finanzas-fila-exp:hover {
        background: var(--navy-ghost) !important;
    }

/* ── Fila de detalle expandida ── */
.vdp-finanzas-fila-detalle td {
    background: var(--navy-bg);
    border-top: none !important;
}

/* ── Chevron de colapso ── */
.vdp-finanzas-chevron {
    transition: transform .15s ease;
}

/* ── Pie de la tabla con totales ── */
.vdp-finanzas-pie {
    background: var(--navy-bg);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
}

/* ── 24. MÓDULO JURISPRUDENCIA SAIJ ───────────────────────────────────── */

/* ── Cards de resultado ── */
.vdp-saij-card {
    transition: box-shadow .15s ease, border-color .15s ease;
}

    .vdp-saij-card:hover {
        box-shadow: 0 4px 16px rgba(30, 58, 95, .1);
        border-color: var(--navy-base);
    }

.vdp-saij-card-titulo {
    font-size: .92rem;
    font-weight: 600;
    color: var(--navy-base);
    line-height: 1.4;
    margin-bottom: 4px;
}

.vdp-saij-card-meta {
    font-size: .78rem;
    color: #6b7280;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
}

.vdp-saij-card-sumario {
    font-size: .82rem;
    color: #4b5563;
    line-height: 1.6;
    margin-top: 6px;
}

/* ── Resaltado de palabras buscadas (devuelto por Veredicta con <mark>) ── */
.vdp-saij-card mark {
    background-color: #fef3c7;
    color: inherit;
    border-radius: 2px;
    padding: 0 2px;
    font-style: normal;
}

/* ── Botones de solapas (aplica a todas las vistas) ── */
button.vdp-solapa-link {
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
    cursor: pointer;
}