/* =====================================================================
 * ADVOCATE SaaS - CYBERPUNK PANELES  (assets/css/cyberpunk_paneles.css)
 * Modo Oscuro Profundo para las pantallas internas del CRM:
 * dashboard, clientes, tribunales, casos y abogados (y cualquier otra que lo cargue).
 *
 * CÓMO SE ACTIVA (1 línea, al FINAL del <head> de cada pantalla, después de Bootstrap
 * y de su propio <style>):
 *     <link rel="stylesheet" href="assets/css/cyberpunk_paneles.css?v=1">
 *
 * NO toca ninguna lógica PHP/PDO. Sobrescribe a Bootstrap 5.3 de forma limpia:
 *   1) Cambia las VARIABLES CSS de Bootstrap (--bs-*) en :root: la mayoría de los
 *      componentes (tablas, tarjetas, alertas, modales, menús) se oscurecen solos.
 *   2) Usa selectores con MAYOR ESPECIFICIDAD ("html body ...") que los estilos propios
 *      de cada página y que los del sidebar, así no depende del orden de carga.
 *   3) Solo usa !important donde Bootstrap también lo usa (utilidades como .bg-white,
 *      .text-dark, .text-bg-*).
 *
 * PALETA:  fondo #0f172a · cristal rgba(30,41,59,.5) · azul neón #38bdf8
 *          cian de foco #06b6d4 · magenta ADVOCATE AI #d946ef · oro #fbbf24 · verde #4ade80
 * ===================================================================== */


/* =====================================================================
 * 1. TOKENS DE LA PALETA + VARIABLES DE BOOTSTRAP
 *    "html:root" (especificidad 0,1,1) gana a ":root" de Bootstrap y del sidebar.
 * ===================================================================== */
html:root {
    /* --- Tokens propios --- */
    --cp-fondo:        #0f172a;
    --cp-fondo-2:      #1e293b;
    --cp-azul:         #38bdf8;
    --cp-azul-claro:   #7dd3fc;
    --cp-cian:         #06b6d4;
    --cp-magenta:      #d946ef;
    --cp-magenta-claro:#f0abfc;
    --cp-oro:          #fbbf24;
    --cp-verde:        #4ade80;
    --cp-rosa:         #fb7185;
    --cp-texto:        #ffffff;
    --cp-texto-suave:  #cbd5e1;
    --cp-vidrio:       rgba(30, 41, 59, 0.5);
    --cp-borde:        rgba(56, 189, 248, 0.2);
    --cp-glow:         0 0 26px rgba(56, 189, 248, .10), 0 10px 32px rgba(2, 6, 23, .45);

    /* --- Variables de Bootstrap 5.3 --- */
    --bs-body-bg: #0f172a;
    --bs-body-bg-rgb: 15, 23, 42;
    --bs-body-color: #ffffff;
    --bs-body-color-rgb: 255, 255, 255;
    --bs-emphasis-color: #ffffff;
    --bs-emphasis-color-rgb: 255, 255, 255;
    --bs-heading-color: #ffffff;
    --bs-secondary-color: rgba(203, 213, 225, .82);      /* .text-muted */
    --bs-secondary-color-rgb: 203, 213, 225;
    --bs-tertiary-color: rgba(148, 163, 184, .8);
    --bs-secondary-bg: rgba(30, 41, 59, .6);
    --bs-tertiary-bg: rgba(30, 41, 59, .45);
    --bs-border-color: rgba(56, 189, 248, .22);          /* .border */
    --bs-border-color-translucent: rgba(56, 189, 248, .22);
    --bs-link-color: #38bdf8;
    --bs-link-color-rgb: 56, 189, 248;
    --bs-link-hover-color: #7dd3fc;
    --bs-link-hover-color-rgb: 125, 211, 252;
    --bs-code-color: #f0abfc;
    --bs-highlight-bg: rgba(251, 191, 36, .25);

    /* Colores semánticos en neón (afectan .text-primary, .text-success, .bg-*, .border-*, etc.) */
    --bs-primary-rgb: 56, 189, 248;
    --bs-success-rgb: 74, 222, 128;
    --bs-warning-rgb: 251, 191, 36;
    --bs-danger-rgb: 251, 113, 133;
    --bs-info-rgb: 34, 211, 238;
    --bs-secondary-rgb: 148, 163, 184;

    /* Sombras de Bootstrap (.shadow, .shadow-sm, .shadow-lg) -> brillo azul neón */
    --bs-box-shadow:    0 0 22px rgba(56, 189, 248, .14), 0 8px 24px rgba(2, 6, 23, .45);
    --bs-box-shadow-sm: 0 0 16px rgba(56, 189, 248, .12), 0 3px 12px rgba(2, 6, 23, .4);
    --bs-box-shadow-lg: 0 0 34px rgba(56, 189, 248, .20), 0 16px 44px rgba(2, 6, 23, .6);

    color-scheme: dark;     /* controles nativos (calendarios, listas desplegables, scroll) en oscuro */
}


/* =====================================================================
 * 2. GLOBAL: cuerpo, texto, enlaces, scroll, selección y foco
 * ===================================================================== */
html {
    background-color: #0f172a;                 /* también cubre el "rebote" al hacer scroll en el celular */
    scrollbar-color: rgba(56, 189, 248, .55) #0f172a;
    scrollbar-width: thin;
}
html body {
    background: transparent;                   /* el fondo real son los pseudo-elementos animados de la sección 3 */
    color: #ffffff;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
html body .main-wrapper,
html body .content { background: transparent; }

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6 { color: #ffffff; }

html body a { color: #38bdf8; }
html body a:hover { color: #7dd3fc; }
html body hr { border-color: rgba(56, 189, 248, .25); opacity: 1; }

::selection { background: rgba(56, 189, 248, .35); color: #ffffff; }

html body :focus-visible { outline: 2px solid #06b6d4; outline-offset: 2px; }

/* Barras de desplazamiento finas y neón (Chrome, Edge, Safari) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, .45); border-radius: 10px; border: 2px solid #0f172a; }
::-webkit-scrollbar-thumb:hover { background: rgba(56, 189, 248, .75); }


/* =====================================================================
 * 3. FONDO ANIMADO (CSS puro) - misma estética del Sidebar y del Login
 *    Capas fijas detrás del contenido (z-index:-1, sin eventos del mouse).
 *    Se animan con transform (acelerado por GPU): fluido también en celulares.
 *      html::before  puntos vectoriales que derivan
 *      html::after   líneas finas diagonales
 *      body::before  línea de escaneo
 *      body::after   resplandor estático
 * ===================================================================== */
html::before {
    content: ''; position: fixed; top: -56px; right: -56px; bottom: -56px; left: -56px;
    z-index: -1; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.1' fill='%2394a3b8' fill-opacity='.55'/%3E%3C/svg%3E");
    background-size: 28px 28px;
    opacity: .30;
    animation: cp-puntos 48s linear infinite;
    will-change: transform;
    -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .3) 0%, #000 100%);
            mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, .3) 0%, #000 100%);
}
html::after {
    content: ''; position: fixed; top: -140px; right: -140px; bottom: -140px; left: -140px;
    z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(115deg, transparent 0 46%, rgba(56, 189, 248, .22) 46.4% 46.8%, transparent 47.2% 100%),
        linear-gradient(115deg, transparent 0 71%, rgba(99, 102, 241, .20) 71.3% 71.6%, transparent 72% 100%);
    background-size: 140px 140px;
    opacity: .32;
    animation: cp-lineas 32s linear infinite, cp-parpadeo 8s ease-in-out infinite alternate;
    will-change: transform, opacity;
}
html body::before {
    content: ''; position: fixed; left: 0; right: 0; top: -90px; height: 90px;
    z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(56, 189, 248, .06) 55%, rgba(56, 189, 248, .14) 98%, transparent);
    animation: cp-escaneo 12s ease-in-out infinite;
    will-change: transform, opacity;
}
html body::after {
    content: ''; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 42% at 50% 0%, rgba(56, 189, 248, .11), transparent 70%),
        radial-gradient(45% 40% at 100% 100%, rgba(99, 102, 241, .13), transparent 70%),
        radial-gradient(40% 35% at 0% 100%, rgba(217, 70, 239, .06), transparent 70%);
}

@keyframes cp-puntos    { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(28px, 56px, 0); } }
@keyframes cp-lineas    { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(140px, 140px, 0); } }
@keyframes cp-parpadeo  { 0% { opacity: .18; } 50% { opacity: .38; } 100% { opacity: .24; } }
@keyframes cp-escaneo   { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 60% { opacity: 1; } 100% { transform: translateY(calc(100vh + 120px)); opacity: 0; } }


/* =====================================================================
 * 4. BARRA SUPERIOR (topbar del sidebar), MENÚ DEL PERFIL Y AVATAR
 * ===================================================================== */
html body .main-wrapper .topbar {
    background: rgba(15, 23, 42, .72);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(56, 189, 248, .22);
    box-shadow: 0 6px 26px rgba(2, 6, 23, .45);
}
html body .topbar .avatar {
    background: linear-gradient(135deg, #38bdf8, #6366f1);
    color: #0f172a; font-weight: 800;
    box-shadow: 0 0 14px rgba(56, 189, 248, .55);
}

html body .dropdown-menu {
    --bs-dropdown-bg: rgba(15, 23, 42, .96);
    --bs-dropdown-color: #ffffff;
    --bs-dropdown-border-color: rgba(56, 189, 248, .3);
    --bs-dropdown-link-color: #e2e8f0;
    --bs-dropdown-link-hover-color: #ffffff;
    --bs-dropdown-link-hover-bg: rgba(56, 189, 248, .14);
    --bs-dropdown-link-active-bg: rgba(56, 189, 248, .25);
    --bs-dropdown-divider-bg: rgba(56, 189, 248, .22);
    background: rgba(15, 23, 42, .96);
    border: 1px solid rgba(56, 189, 248, .3);
    border-radius: 12px;
    box-shadow: 0 0 26px rgba(56, 189, 248, .16), 0 14px 36px rgba(2, 6, 23, .6);
}
html body .dropdown-menu .dropdown-item { color: #e2e8f0; }
html body .dropdown-menu .dropdown-item:hover,
html body .dropdown-menu .dropdown-item:focus { background: rgba(56, 189, 248, .14); color: #ffffff; }
html body .dropdown-menu .dropdown-item.text-danger { color: #fb7185 !important; }
html body .dropdown-menu .dropdown-item.text-danger:hover { background: rgba(251, 113, 133, .14); }


/* =====================================================================
 * 5. TARJETAS Y CONTENEDORES: cristal esmerilado (Glassmorphism)
 *    .card  .wrapper  .box  + las tarjetas propias de cada pantalla
 * ===================================================================== */
html body .card,
html body .wrapper,
html body .box,
html body .table-card,
html body .stat-card,
html body .mini-card {
    --bs-card-bg: transparent;
    --bs-card-color: #ffffff;
    --bs-card-border-color: rgba(56, 189, 248, .2);
    --bs-card-cap-bg: rgba(15, 23, 42, .45);
    --bs-card-cap-color: #ffffff;
    background: rgba(30, 41, 59, 0.5);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border: 1px solid rgba(56, 189, 248, 0.2);
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 0 26px rgba(56, 189, 248, .10), 0 10px 32px rgba(2, 6, 23, .45);   /* glow azul neón de fondo */
}
html body .card-header,
html body .card-footer {
    background: rgba(15, 23, 42, .45);
    border-color: rgba(56, 189, 248, .18);
    color: #ffffff;
}
html body .card-body { background: transparent; color: #ffffff; }
html body .card .card-title, html body .card .card-header h6 { color: #ffffff; }

/* Si el navegador no soporta backdrop-filter, el cristal se hace más opaco para no perder legibilidad */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    html body .card, html body .wrapper, html body .box, html body .table-card, html body .stat-card,
    html body .mini-card { background: rgba(30, 41, 59, .92); }
    html body .main-wrapper .topbar { background: rgba(15, 23, 42, .96); }
}

/* --- Dashboard: tarjetas de métricas --- */
html body .stat-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
html body .stat-card:hover {
    transform: translateY(-3px); border-color: rgba(56, 189, 248, .55);
    box-shadow: 0 0 34px rgba(56, 189, 248, .26), 0 14px 38px rgba(2, 6, 23, .55);
}
html body .stat-number { color: #ffffff; text-shadow: 0 0 18px rgba(56, 189, 248, .45); }
html body .stat-icon { color: #0f172a; box-shadow: 0 0 20px rgba(56, 189, 248, .45); }
html body .bg-grad-blue   { background: linear-gradient(135deg, #38bdf8, #2563eb); box-shadow: 0 0 20px rgba(56, 189, 248, .55); }
html body .bg-grad-green  { background: linear-gradient(135deg, #4ade80, #059669); box-shadow: 0 0 20px rgba(74, 222, 128, .5); }
html body .bg-grad-violet { background: linear-gradient(135deg, #e879f9, #7c3aed); box-shadow: 0 0 20px rgba(217, 70, 239, .5); }
html body .bg-grad-amber  { background: linear-gradient(135deg, #fde047, #f59e0b); box-shadow: 0 0 20px rgba(251, 191, 36, .5); }
html body .bg-grad-red    { background: linear-gradient(135deg, #f0abfc, #d946ef); box-shadow: 0 0 20px rgba(217, 70, 239, .55); }

/* --- Casos: minitarjetas de filtro por estado (cada acento es un neón) --- */
html body .acento-azul     { --acento: #38bdf8; }
html body .acento-verde    { --acento: #4ade80; }
html body .acento-amarillo { --acento: #fbbf24; }
html body .acento-rojo     { --acento: #d946ef; }
html body .mini-card { border: 1px solid rgba(56, 189, 248, .2); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; color: #ffffff; }
html body .mini-card:hover { transform: translateY(-2px); border-color: var(--acento, #38bdf8); box-shadow: 0 0 26px rgba(56, 189, 248, .22), 0 12px 30px rgba(2, 6, 23, .5); }
html body .mini-card.activa { border: 2px solid var(--acento, #38bdf8); box-shadow: 0 0 28px rgba(56, 189, 248, .45), 0 10px 30px rgba(2, 6, 23, .5); box-shadow: 0 0 28px color-mix(in srgb, var(--acento, #38bdf8) 55%, transparent), 0 10px 30px rgba(2, 6, 23, .5); }
html body .mini-icon { color: #0f172a; box-shadow: 0 0 16px rgba(56, 189, 248, .5); box-shadow: 0 0 16px color-mix(in srgb, var(--acento, #38bdf8) 60%, transparent); }
html body .mini-num { color: #ffffff; text-shadow: 0 0 14px rgba(56, 189, 248, .4); }
html body .mini-label { color: #cbd5e1; }

/* --- Abogados: avatar de cada fila --- */
html body .avatar-fila {
    background: rgba(56, 189, 248, .14); color: #7dd3fc;
    border: 1px solid rgba(56, 189, 248, .5); box-shadow: 0 0 12px rgba(56, 189, 248, .35);
}


/* =====================================================================
 * 6. TABLAS: fondo transparente, cabeceras neón, filas que se iluminan
 *    Variables --bs-table-* de Bootstrap 5.3 + reglas con especificidad alta
 *    (superan a ".table thead th { color:#64748b; background:#f8fafc }" de cada página)
 * ===================================================================== */
html body .table {
    --bs-table-color: #ffffff;
    --bs-table-bg: transparent;
    --bs-table-border-color: rgba(56, 189, 248, .14);
    --bs-table-striped-color: #ffffff;
    --bs-table-striped-bg: rgba(148, 163, 184, .05);
    --bs-table-active-color: #ffffff;
    --bs-table-active-bg: rgba(56, 189, 248, .18);
    --bs-table-hover-color: #ffffff;
    --bs-table-hover-bg: rgba(56, 189, 248, .12);
    color: #ffffff;
    background: transparent;
    border-color: rgba(56, 189, 248, .14);
    margin-bottom: 0;
}

/* Cabeceras: azul neón (o magenta con la clase .table-magenta) */
html body .table thead th,
html body .table > thead > tr > th {
    background: transparent;
    color: #38bdf8;
    border-bottom: 1px solid rgba(56, 189, 248, .45);
    font-weight: 700;
    text-shadow: 0 0 12px rgba(56, 189, 248, .55);
    white-space: nowrap;
}
html body .table.table-magenta thead th,
html body .table-magenta > thead > tr > th {
    color: #d946ef; border-bottom-color: rgba(217, 70, 239, .5); text-shadow: 0 0 12px rgba(217, 70, 239, .6);
}

/* Celdas: texto blanco, sin fondo propio */
html body .table > tbody > tr > td,
html body .table > tbody > tr > th { background-color: transparent; color: #ffffff; border-color: rgba(56, 189, 248, .12); }
html body .table > tbody > tr > td { transition: box-shadow .2s ease; }

/* Filas: se iluminan con un azul translúcido al pasar el mouse o al tocarlas en el celular */
html body .table > tbody > tr:hover > *,
html body .table > tbody > tr:active > * {
    --bs-table-bg-state: rgba(56, 189, 248, .13);
    --bs-table-color-state: #ffffff;
    color: #ffffff;
}
html body .table > tbody > tr:hover > td:first-child,
html body .table > tbody > tr:active > td:first-child {
    box-shadow: inset 3px 0 0 #38bdf8, inset 0 0 0 9999px rgba(56, 189, 248, .13);
}
html body .table > tbody > tr { -webkit-tap-highlight-color: rgba(56, 189, 248, .18); }

/* Contenedor con scroll horizontal: las tablas nunca se deforman, se desplazan */
html body .table-responsive {
    background: transparent;
    border-radius: inherit;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-color: rgba(56, 189, 248, .55) transparent;
    scrollbar-width: thin;
}
html body .table-responsive::-webkit-scrollbar { height: 8px; }
html body .table-responsive::-webkit-scrollbar-track { background: rgba(15, 23, 42, .5); border-radius: 8px; }
html body .table-responsive::-webkit-scrollbar-thumb { background: rgba(56, 189, 248, .5); border-radius: 8px; border: 0; }


/* =====================================================================
 * 7. FORMULARIOS: cajas oscuras con borde neón tenue; foco cian brillante
 * ===================================================================== */
html body .form-label { color: #e2e8f0; font-weight: 600; }
html body .form-text  { color: #94a3b8; }

html body .form-control,
html body .form-select,
html body .input-group-text {
    background-color: rgba(15, 23, 42, .65);
    color: #ffffff;
    border: 1px solid rgba(56, 189, 248, .30);
    border-radius: 10px;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
html body .form-control::placeholder { color: #94a3b8; opacity: 1; }
html body .form-control:hover:not(:disabled):not([readonly]),
html body .form-select:hover:not(:disabled) { border-color: rgba(56, 189, 248, .55); }

/* FOCO: el borde brilla intensamente en cian con una sombra difuminada */
html body .form-control:focus,
html body .form-select:focus,
html body .buscador .form-control:focus {
    background-color: rgba(15, 23, 42, .88);
    color: #ffffff;
    border-color: #06b6d4;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(6, 182, 212, .28), 0 0 22px rgba(6, 182, 212, .55);
}
html body .form-control:disabled, html body .form-control[readonly],
html body .form-select:disabled { background-color: rgba(30, 41, 59, .55); color: #94a3b8; opacity: .85; }

/* Flecha de la lista desplegable en azul neón (la de Bootstrap es negra y no se vería) */
html body .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2338bdf8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
html body .form-select option { background: #0f172a; color: #ffffff; }

/* Buscador de casos: grupo "icono + caja" (cada pieza ya lleva su borde neón; el grupo solo aporta el brillo) */
html body .buscador { background: transparent; border: 0; border-radius: 12px; box-shadow: 0 0 26px rgba(56, 189, 248, .10), 0 10px 32px rgba(2, 6, 23, .45); }
html body .buscador .input-group-text,
html body .buscador .form-control { background-color: rgba(15, 23, 42, .65); border-color: rgba(56, 189, 248, .30); color: #ffffff; }
html body .buscador .input-group-text { color: #38bdf8; }
html body .buscador:focus-within { box-shadow: 0 0 26px rgba(6, 182, 212, .45), 0 10px 32px rgba(2, 6, 23, .45); }

/* El autocompletado del navegador pinta de blanco/amarillo: se mantiene el estilo oscuro */
html body .form-control:-webkit-autofill,
html body .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff; caret-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #0f172a inset; box-shadow: 0 0 0 1000px #0f172a inset;
}

html body .form-check-input { background-color: rgba(15, 23, 42, .7); border-color: rgba(56, 189, 248, .45); }
html body .form-check-input:checked { background-color: #06b6d4; border-color: #06b6d4; }
html body .form-check-input:focus { border-color: #06b6d4; box-shadow: 0 0 0 3px rgba(6, 182, 212, .28); }


/* =====================================================================
 * 8. BOTONES
 * ===================================================================== */
html body .btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease; }
html body .btn:focus-visible { box-shadow: 0 0 0 3px rgba(6, 182, 212, .4); }

html body .btn-primary {
    --bs-btn-color: #ffffff; --bs-btn-bg: #0369a1; --bs-btn-border-color: rgba(125, 211, 252, .55);
    --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #0284c7; --bs-btn-hover-border-color: #7dd3fc;
    --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #075985; --bs-btn-active-border-color: #7dd3fc;
    --bs-btn-focus-shadow-rgb: 6, 182, 212;
    background-image: linear-gradient(135deg, #0369a1 0%, #2563eb 100%);
    color: #ffffff; border: 1px solid rgba(125, 211, 252, .55);
    box-shadow: 0 0 18px rgba(56, 189, 248, .40), 0 6px 18px rgba(37, 99, 235, .35);
}
html body .btn-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.12); box-shadow: 0 0 28px rgba(56, 189, 248, .65), 0 10px 24px rgba(37, 99, 235, .45); }
html body .btn-agregar, html body .btn-registrar { box-shadow: 0 0 18px rgba(56, 189, 248, .45), 0 6px 18px rgba(37, 99, 235, .35); }

html body .btn-outline-primary {
    --bs-btn-color: #38bdf8; --bs-btn-border-color: rgba(56, 189, 248, .6);
    --bs-btn-hover-color: #0f172a; --bs-btn-hover-bg: #38bdf8; --bs-btn-hover-border-color: #38bdf8;
    --bs-btn-active-color: #0f172a; --bs-btn-active-bg: #7dd3fc; --bs-btn-active-border-color: #7dd3fc;
    --bs-btn-focus-shadow-rgb: 6, 182, 212;
    color: #38bdf8; border-color: rgba(56, 189, 248, .6); background-color: transparent;
}
html body .btn-outline-primary:hover { background-color: #38bdf8; color: #0f172a; box-shadow: 0 0 20px rgba(56, 189, 248, .6); }

html body .btn-outline-danger {
    --bs-btn-color: #fb7185; --bs-btn-border-color: rgba(251, 113, 133, .6);
    --bs-btn-hover-color: #0f172a; --bs-btn-hover-bg: #fb7185; --bs-btn-hover-border-color: #fb7185;
    --bs-btn-active-color: #0f172a; --bs-btn-active-bg: #fda4af; --bs-btn-active-border-color: #fda4af;
    color: #fb7185; border-color: rgba(251, 113, 133, .6); background-color: transparent;
}
html body .btn-outline-danger:hover { background-color: #fb7185; color: #0f172a; box-shadow: 0 0 20px rgba(251, 113, 133, .55); }

html body .btn-outline-secondary {
    --bs-btn-color: #cbd5e1; --bs-btn-border-color: rgba(148, 163, 184, .5);
    --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: rgba(148, 163, 184, .2); --bs-btn-hover-border-color: #cbd5e1;
    --bs-btn-active-color: #ffffff; --bs-btn-active-bg: rgba(148, 163, 184, .3);
    color: #cbd5e1; border-color: rgba(148, 163, 184, .5); background-color: transparent;
}
html body .btn-outline-secondary:hover { background-color: rgba(148, 163, 184, .2); color: #ffffff; }

html body .btn-secondary, html body .btn-dark {
    --bs-btn-color: #ffffff; --bs-btn-bg: rgba(51, 65, 85, .8); --bs-btn-border-color: rgba(148, 163, 184, .4);
    --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: rgba(71, 85, 105, .9); --bs-btn-hover-border-color: #cbd5e1;
    color: #ffffff; background-color: rgba(51, 65, 85, .8); border-color: rgba(148, 163, 184, .4);
}
html body .btn-success { --bs-btn-color: #052e16; --bs-btn-bg: #4ade80; --bs-btn-border-color: #4ade80; --bs-btn-hover-color: #052e16; --bs-btn-hover-bg: #86efac; --bs-btn-hover-border-color: #86efac;
    color: #052e16; background-color: #4ade80; border-color: #4ade80; box-shadow: 0 0 18px rgba(74, 222, 128, .45); }
html body .btn-warning { --bs-btn-color: #1c1400; --bs-btn-bg: #fbbf24; --bs-btn-border-color: #fbbf24; --bs-btn-hover-color: #1c1400; --bs-btn-hover-bg: #fcd34d; --bs-btn-hover-border-color: #fcd34d;
    color: #1c1400; background-color: #fbbf24; border-color: #fbbf24; box-shadow: 0 0 18px rgba(251, 191, 36, .45); }
html body .btn-danger { --bs-btn-color: #ffffff; --bs-btn-bg: #be123c; --bs-btn-border-color: #fb7185; --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #e11d48; --bs-btn-hover-border-color: #fda4af;
    color: #ffffff; background-color: #be123c; border-color: #fb7185; box-shadow: 0 0 18px rgba(251, 113, 133, .4); }
html body .btn-info { --bs-btn-color: #082f49; --bs-btn-bg: #22d3ee; --bs-btn-border-color: #22d3ee; --bs-btn-hover-color: #082f49; --bs-btn-hover-bg: #67e8f9; --bs-btn-hover-border-color: #67e8f9;
    color: #082f49; background-color: #22d3ee; border-color: #22d3ee; box-shadow: 0 0 18px rgba(34, 211, 238, .45); }

/* Botón "claro" de Bootstrap (cancelar, menú del perfil, abrir sidebar) -> cristal oscuro */
html body .btn-light {
    --bs-btn-color: #ffffff; --bs-btn-bg: rgba(30, 41, 59, .7); --bs-btn-border-color: rgba(56, 189, 248, .3);
    --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: rgba(56, 189, 248, .18); --bs-btn-hover-border-color: #38bdf8;
    --bs-btn-active-color: #ffffff; --bs-btn-active-bg: rgba(56, 189, 248, .25); --bs-btn-active-border-color: #38bdf8;
    color: #ffffff; background-color: rgba(30, 41, 59, .7); border-color: rgba(56, 189, 248, .3);
}
html body .btn-light:hover { background-color: rgba(56, 189, 248, .18); border-color: #38bdf8; box-shadow: 0 0 16px rgba(56, 189, 248, .35); }
html body .btn-link { color: #38bdf8; }

html body .btn:disabled, html body .btn.disabled { opacity: .5; box-shadow: none; }

/* Botones de acción de las tablas (editar / eliminar) */
html body .btn-accion { display: inline-flex; align-items: center; justify-content: center; }

/* Cerrar (alertas y modales): la "X" de Bootstrap es negra */
html body .btn-close { filter: invert(1) grayscale(100%) brightness(200%); opacity: .75; }
html body .btn-close:hover { opacity: 1; }


/* =====================================================================
 * 9. BADGES: neón vibrante
 *    Bootstrap pinta los .text-bg-* con !important: aquí también, con mayor especificidad.
 *    Activo (success)  -> verde neón        Pausa (warning)   -> amarillo oro
 *    Cerrado (danger)  -> magenta neón      Archivado (secondary) -> gris azulado
 *    Rol principal (primary) -> azul neón   Abogado (info)    -> cian
 * ===================================================================== */
html body .badge {
    font-weight: 700; letter-spacing: .2px; border-width: 1px; border-style: solid;
}
html body .badge.text-bg-success, html body .badge.bg-success, html body .badge-neon-verde, html body .badge-activo {
    color: #4ade80 !important; background-color: rgba(34, 197, 94, .15) !important;
    border-color: rgba(74, 222, 128, .65) !important; box-shadow: 0 0 12px rgba(74, 222, 128, .38); text-shadow: 0 0 8px rgba(74, 222, 128, .6);
}
html body .badge.text-bg-warning, html body .badge.bg-warning, html body .badge-neon-oro, html body .badge-audiencia {
    color: #fbbf24 !important; background-color: rgba(251, 191, 36, .14) !important;
    border-color: rgba(251, 191, 36, .65) !important; box-shadow: 0 0 12px rgba(251, 191, 36, .38); text-shadow: 0 0 8px rgba(251, 191, 36, .55);
}
html body .badge.text-bg-danger, html body .badge.bg-danger, html body .badge-neon-magenta, html body .badge-emergencia {
    color: #f0abfc !important; background-color: rgba(217, 70, 239, .16) !important;
    border-color: rgba(217, 70, 239, .75) !important; box-shadow: 0 0 14px rgba(217, 70, 239, .5); text-shadow: 0 0 8px rgba(217, 70, 239, .7);
}
html body .badge.text-bg-primary, html body .badge.bg-primary, html body .badge-neon-azul {
    color: #7dd3fc !important; background-color: rgba(56, 189, 248, .15) !important;
    border-color: rgba(56, 189, 248, .65) !important; box-shadow: 0 0 12px rgba(56, 189, 248, .38); text-shadow: 0 0 8px rgba(56, 189, 248, .55);
}
html body .badge.text-bg-info, html body .badge.bg-info, html body .badge-neon-cian {
    color: #67e8f9 !important; background-color: rgba(6, 182, 212, .15) !important;
    border-color: rgba(34, 211, 238, .65) !important; box-shadow: 0 0 12px rgba(34, 211, 238, .38); text-shadow: 0 0 8px rgba(34, 211, 238, .55);
}
html body .badge.text-bg-secondary, html body .badge.bg-secondary {
    color: #cbd5e1 !important; background-color: rgba(100, 116, 139, .22) !important; border-color: rgba(148, 163, 184, .5) !important;
}
html body .badge.text-bg-dark, html body .badge.bg-dark {                       /* el dashboard usa "dark" para Cerrado */
    color: #e2e8f0 !important; background-color: rgba(51, 65, 85, .55) !important; border-color: rgba(148, 163, 184, .55) !important;
}
html body .badge.text-bg-light, html body .badge.bg-light {                     /* chips de nombre ("Tú", abogado asignado) */
    color: #ffffff !important; background-color: rgba(56, 189, 248, .10) !important; border-color: rgba(56, 189, 248, .35) !important;
}


/* =====================================================================
 * 10. ALERTAS Y MODALES
 * ===================================================================== */
html body .alert {
    --bs-alert-border-radius: 12px; border-radius: 12px;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
html body .alert-danger  { --bs-alert-color: #fecdd3; --bs-alert-bg: rgba(244, 63, 94, .14);  --bs-alert-border-color: rgba(251, 113, 133, .55); --bs-alert-link-color: #ffffff; color: #fecdd3; background-color: rgba(244, 63, 94, .14);  border-color: rgba(251, 113, 133, .55); }
html body .alert-success { --bs-alert-color: #bbf7d0; --bs-alert-bg: rgba(34, 197, 94, .13);  --bs-alert-border-color: rgba(74, 222, 128, .55);  --bs-alert-link-color: #ffffff; color: #bbf7d0; background-color: rgba(34, 197, 94, .13);  border-color: rgba(74, 222, 128, .55); }
html body .alert-warning { --bs-alert-color: #fde68a; --bs-alert-bg: rgba(251, 191, 36, .13); --bs-alert-border-color: rgba(251, 191, 36, .55);  --bs-alert-link-color: #ffffff; color: #fde68a; background-color: rgba(251, 191, 36, .13); border-color: rgba(251, 191, 36, .55); }
html body .alert-info    { --bs-alert-color: #bae6fd; --bs-alert-bg: rgba(56, 189, 248, .12); --bs-alert-border-color: rgba(56, 189, 248, .55);  --bs-alert-link-color: #ffffff; color: #bae6fd; background-color: rgba(56, 189, 248, .12); border-color: rgba(56, 189, 248, .55); }
html body .alert-secondary, html body .alert-light { --bs-alert-color: #e2e8f0; --bs-alert-bg: rgba(100, 116, 139, .18); --bs-alert-border-color: rgba(148, 163, 184, .45); color: #e2e8f0; background-color: rgba(100, 116, 139, .18); border-color: rgba(148, 163, 184, .45); }

html body .modal {
    --bs-modal-bg: rgba(15, 23, 42, .92);
    --bs-modal-color: #ffffff;
    --bs-modal-border-color: rgba(56, 189, 248, .35);
    --bs-modal-header-border-color: rgba(56, 189, 248, .2);
    --bs-modal-footer-border-color: rgba(56, 189, 248, .2);
}
html body .modal-content {
    background: rgba(15, 23, 42, .92);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid rgba(56, 189, 248, .35); border-radius: 14px; color: #ffffff;
    box-shadow: 0 0 38px rgba(56, 189, 248, .22), 0 24px 60px rgba(2, 6, 23, .7);
}
html body .modal-header, html body .modal-footer { border-color: rgba(56, 189, 248, .2); }
html body .modal-title { color: #ffffff; }
html body .modal-backdrop { --bs-backdrop-bg: #020617; --bs-backdrop-opacity: .72; }


/* =====================================================================
 * 11. UTILIDADES DE BOOTSTRAP (con !important, como las originales)
 * ===================================================================== */
html body .text-dark, html body .text-black, html body .link-dark { color: #ffffff !important; }
html body .text-muted, html body .text-body-secondary { color: #cbd5e1 !important; }
html body .text-secondary { color: #94a3b8 !important; }
html body .text-primary { color: #38bdf8 !important; }
html body .bg-white, html body .bg-body, html body .bg-light {
    background-color: rgba(30, 41, 59, .5) !important; color: #ffffff;
}
html body .list-group-item { background: rgba(30, 41, 59, .5); color: #ffffff; border-color: rgba(56, 189, 248, .2); }
html body .page-link { background: rgba(30, 41, 59, .6); color: #7dd3fc; border-color: rgba(56, 189, 248, .25); }
html body .page-item.active .page-link { background: #0284c7; border-color: #38bdf8; color: #ffffff; }
html body .page-item.disabled .page-link { background: rgba(15, 23, 42, .6); color: #64748b; }
html body .nav-pills .nav-link { color: #cbd5e1; }
html body .nav-pills .nav-link.active { background: rgba(56, 189, 248, .2); color: #ffffff; box-shadow: 0 0 14px rgba(56, 189, 248, .4); }


/* =====================================================================
 * 12. RESPONSIVO (celulares y tabletas)
 * ===================================================================== */
@media (max-width: 991.98px) {
    html body .main-wrapper .topbar { padding-left: 1rem; padding-right: 1rem; }
}

@media (max-width: 767.98px) {
    /* Las tablas conservan un ancho mínimo y se desplazan en horizontal: las columnas no se aplastan */
    html body .table-responsive > .table { min-width: 640px; }
    html body .table > :not(caption) > * > * { padding: .7rem .85rem; font-size: .86rem; }
    html body .table thead th { font-size: .7rem; letter-spacing: .4px; }
    html body .table-card, html body .card { border-radius: 12px; }

    /* Inputs de 16 px: iOS no hace zoom al enfocarlos */
    html body .form-control, html body .form-select { font-size: 1rem; }

    /* Menos carga gráfica en equipos modestos: se retira la capa de líneas diagonales */
    html::after { display: none; }
}

@media (max-width: 575.98px) {
    html body .content { padding: 1rem .75rem; }
    html body .stat-number { font-size: 1.6rem; }
    html body .modal-dialog { margin: .75rem; }
    html body .btn-agregar, html body .btn-registrar { width: 100%; }      /* botón principal a todo el ancho */
}

/* Celular girado: menos aire vertical */
@media (max-height: 520px) and (orientation: landscape) {
    html body .content { padding-top: .75rem; padding-bottom: .75rem; }
}


/* =====================================================================
 * 13. ACCESIBILIDAD: sin animaciones si el sistema las desactivó
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    html::before, html::after, html body::before { animation: none !important; }
    html body .stat-card, html body .mini-card, html body .btn, html body .form-control, html body .form-select,
    html body .table > tbody > tr > td { transition: none !important; }
    html body .stat-card:hover, html body .mini-card:hover, html body .btn-primary:hover:not(:disabled) { transform: none; }
}