/* ============================================================================
   PANTALLA·84 — Sistema de diseño v3 "Sala de control"
   ----------------------------------------------------------------------------
   Claro, sobrio y ancho. El color es información, no decoración:
   la interfaz es neutra y el azul señal aparece solo donde hay acción,
   foco o estado activo. Sin gradientes decorativos.
   Navegación horizontal: el ancho es para los datos.

   Carga DESPUÉS de bootstrap y del CSS del template, y gana.
   Las vistas antiguas usan --dm-*: aquí se redefinen para que hereden.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1 · TOKENS
--------------------------------------------------------------------------- */
:root {
    /* Superficies */
    --p84-bg:        #eef1f5;   /* fondo general, gris neutro */
    --p84-surface:   #ffffff;   /* tarjetas */
    --p84-surface-2: #f9fafb;   /* zonas hundidas */
    --p84-line:      #e6e8ec;   /* hairline */
    --p84-line-2:    #d3d7de;   /* borde de controles */

    /* Texto */
    --p84-ink:       #101323;   /* titulares y datos */
    --p84-steel:     #4a5162;   /* secundario */
    --p84-muted:     #858c9c;   /* terciario */

    /* Acento único — cian de marca (del logotipo: #00E5FF).
       El azul anterior (var(--p84-accent)) no era de la identidad y, siendo un azul
       político saturado, se leía como bandera de partido: en un expediente de
       un cliente de otro color, la herramienta parecía tomar partido.
       El cian puro no tiene contraste suficiente sobre blanco (1.6:1), así
       que para superficie clara se usa su versión profunda y el #00E5FF se
       reserva a la barra oscura, donde sí brilla. */
    --p84-accent:    #0E7490;   /* cian profundo: para TEXTO (5.36:1) */
    --p84-accent-dk: #155E75;   /* hover de texto y enlaces */
    --p84-accent-sf: #E8FDFF;   /* fondo suave de estado activo */

    /* El gesto del logotipo: cian eléctrico con tinta encima.
       Neutralizarlo a un teal apagado dejó la interfaz muerta. El cian puro
       no se lee sobre blanco (1.54:1), pero como RELLENO con texto oscuro da
       8.23:1 — vívido y legible a la vez. Es exactamente lo que hace el "84"
       del logo, y es lo que sostiene la estética. */
    --p84-cian:      #00A9BE;   /* relleno en reposo: 6.15:1 sobre la tinta */
    --p84-cian-alto: #00E5FF;   /* el del logo: hover, 11.32:1 — el encendido */
    --p84-cian-line: #008C9E;   /* borde, para que el relleno tenga filo */
    /* Tinta sobre cian. Se profundiza respecto de la barra (#141A26) porque
       al bajar el cian a reposo el texto perdía cuerpo: 6.15:1 -> 7.13:1 sin
       tocar el tono del relleno. */
    --p84-cian-ink:  #05090F;

    /* Cian de SELECCIÓN, distinto del de ACCIÓN.
       El cian brillante con tinta encima funciona en un botón: texto grande,
       peso 700, mucha superficie. En una píldora de filtro a 11 px el mismo
       par vibra y el texto se pierde — que es justo lo que se reportó.
       Para todo lo chico y seleccionado se usa cian profundo con texto
       BLANCO: 5.36:1, y a ese tamaño se lee limpio.
         acción    -> --p84-cian      + --p84-cian-ink   (grande, encendido)
         selección -> --p84-cian-sel  + blanco           (chico, sobrio) */
    --p84-cian-sel:  #0E7490;
    --p84-cian-sel-2:#0B5F76;

    --p84-marca-cian:#00E5FF;
    --p84-pizarra:   #283C50;   /* estructural de marca */
    --p84-violeta:   #7C3AED;   /* apuntes y metadatos (5.70:1) */
    --p84-live:      #0E7490;   /* cian: solo el pulso de registro */
    --p84-glow:      rgba(0,169,190,.30);
    /* Realce de interacción: el "levantarse" al pasar el cursor.
       Vivía suelto en el dashboard y con un morado (102,51,238) que ni
       siquiera era el acento; aquí queda una sola definición para todo. */
    /* Tinte del hover, OPACO a propósito.
       Con un rgba semitransparente la tarjeta dejaba ver la retícula del
       fondo de la página y parecía volverse translúcida. Este es el mismo
       color ya resuelto contra blanco. */
    --p84-glow-sf:   #EBF8FA;
    --p84-glow-line: rgba(0,169,190,.55);    /* borde al hover */
    --p84-glow-drop: 0 4px 16px rgba(0,169,190,.26);

    /* Semánticos */
    /* Semánticos apagados. El verde y el rojo saturados hacían que
       cualquier lectura pareciera una alarma, y además chocaban con la
       identidad del cliente. Estos son los mismos tonos, desaturados a
       nivel editorial: siguen leyéndose como bueno/malo sin gritar. */
    /* Vivos pero no semáforo. El verde bandera y el rojo alarma se cambian
       por esmeralda y rosa: mismo significado, registro synthwave, y no se
       parecen a la bandera de ningún partido. */
    --p84-ok:        #059669;   /* esmeralda */
    --p84-ok-ink:    #047857;
    --p84-amber:     #D97706;   /* ámbar */
    --p84-alert:     #E11D48;   /* rosa */
    --p84-alert-ink: #BE123C;

    /* LED / neón. Los tokens de arriba están calibrados para TEXTO, y por eso
       apagados: sobre una barra de 5px leen como borde pintado, no como luz.
       Estos son los mismos tonos llevados al brillo del grafo de nodos y solo
       se usan como fuente de luz —nunca como color de texto—. */
    --p84-led-cian:   #00E5FF;
    --p84-led-ok:     #00E58C;
    --p84-led-amber:  #FFB020;
    --p84-led-alert:  #FF2D62;
    --p84-led-violeta:#A855F7;

    /* Compat: alias que las vistas v1/v2 siguen usando */
    --p84-paper:     #ffffff;
    --p84-paper-2:   #f9fafb;
    --p84-concrete:  #d3d7de;
    --p84-signal:    #0E7490;
    --p84-signal-ink:#155E75;
    --p84-accent-2:  #00E5FF;
    --p84-magenta:   #6B7A99;
    --p84-grad:      #0E7490;   /* sin gradiente: color plano */
    --p84-ink-2:     #1b1f30;
    --p84-ink-3:     #2a2f42;

    /* --- Superficie de mando ---
       El marco de la aplicación (barra, ficha del expediente, encabezados de
       módulo) va en tinta; la superficie de trabajo se queda clara, porque los
       datos se leen mejor sobre blanco. Ese contraste entre marco oscuro y
       mesa clara es lo que da la lectura de "sala de control" en vez de
       plantilla de administración. */
    --p84-mando:       #141A26;
    --p84-mando-2:     #1D2635;   /* elevación dentro del mando */
    --p84-mando-line:  rgba(255,255,255,.10);
    --p84-mando-ink:   #eef0f7;   /* texto principal sobre tinta */
    --p84-mando-steel: #a3abc7;   /* secundario sobre tinta */
    --p84-mando-muted: #737d9e;   /* terciario sobre tinta */
    --p84-mando-acc:   #00E5FF;   /* el cian del logotipo: aquí sí brilla */

    /* Tipografía */
    --p84-font-display: 'Inter', 'Segoe UI', sans-serif;
    --p84-font-mono:    'IBM Plex Mono', 'Consolas', monospace;

    /* Geometría */
    --p84-radius:     10px;
    --p84-radius-sm:  7px;
    --p84-border:     1px solid var(--p84-line);
    --p84-shadow:     0 1px 2px rgba(16,19,35,.05), 0 6px 18px rgba(16,19,35,.06);
    --p84-shadow-sm:  0 1px 2px rgba(16,19,35,.05), 0 2px 8px rgba(16,19,35,.05);
    --p84-shadow-soft:0 1px 2px rgba(16,19,35,.04), 0 3px 10px rgba(16,19,35,.04);
    --p84-ring:       0 0 0 3px var(--p84-glow);

    /* Altura de la barra de navegación */
    --p84-nav-h:      58px;

    /* --- Re-mapeo de los tokens viejos (--dm-*) --- */
    --dm-radius:       10px;
    --dm-radius-sm:    7px;
    --dm-radius-pill:  999px;
    --dm-shadow:       var(--p84-shadow-soft);
    --dm-shadow-lg:    var(--p84-shadow);
    --dm-border:       var(--p84-line);
    --dm-bg-subtle:    #f9fafb;
    --dm-text:         var(--p84-ink);
    --dm-text-muted:   var(--p84-steel);
    --dm-primary:      var(--p84-accent);
    --dm-primary-soft: var(--p84-accent-sf);
    --dm-success:      var(--p84-ok);
    --dm-warning:      var(--p84-amber);
    --dm-danger:       var(--p84-alert);
    --dm-info:         var(--p84-accent);
    --dm-accent:       var(--p84-accent);
    --dm-teal:         var(--p84-ok);
    --dm-orange:       var(--p84-amber);
    --dm-transition:   .16s cubic-bezier(.4, 0, .2, 1);
}

/* ----------------------------------------------------------------------------
   2 · BASE
--------------------------------------------------------------------------- */
body {
    background: var(--p84-bg) !important;
    /* Retícula de dibujo técnico: quita el "blanco plano" sin meter color.
       El punto se apoya en el fondo un poco hundido para que se lea sin
       llegar a ser textura ruidosa. */
    background-image: radial-gradient(rgba(16,19,35,.085) 1px, transparent 1px) !important;
    background-size: 20px 20px !important;
    background-attachment: fixed !important;
    color: var(--p84-ink);
    font-family: var(--p84-font-display);
    font-size: .9rem;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--p84-cian-sel); color: #fff; }

h1, h2, h3, h4, h5, h6 { font-family: var(--p84-font-display); color: var(--p84-ink); }

a { color: var(--p84-accent); }
a:hover { color: var(--p84-accent-dk); }

/* Etiqueta técnica: metadatos, timestamps, hints */
.p84-tag {
    font-family: var(--p84-font-mono);
    font-size: .68rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: var(--p84-steel);
}

/* Numeración de módulo */
.p84-num {
    font-family: var(--p84-font-mono);
    font-weight: 600;
    color: var(--p84-accent);
}

/* Punto de registro: lo único que "respira" en la interfaz */
.p84-rec {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--p84-live);
    box-shadow: 0 0 0 0 rgba(0,229,255,.45);
    animation: p84-pulse 2.6s ease-out infinite;
}
@keyframes p84-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0,229,255,.45); }
    60%  { box-shadow: 0 0 0 6px rgba(0,229,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(0,229,255,0); }
}

/* Texto destacado: color plano, sin gradiente */
.p84-grad-text { color: var(--p84-accent); }

/* ----------------------------------------------------------------------------
   3 · LAYOUT HORIZONTAL
   El template original reservaba 260px a la izquierda. Aquí no hay sidebar:
   la navegación es una barra superior y el contenido usa todo el ancho.
--------------------------------------------------------------------------- */
.left-sidebar { display: none !important; }

.topbar {
    left: 0; right: 0; top: 0;
    position: fixed;
    z-index: 1000;
    height: var(--p84-nav-h);
    /* Barra de mando: tinta, no papel */
    background: var(--p84-mando) !important;
    border-bottom: 1px solid rgba(0,0,0,.5) !important;
    box-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 2px 12px rgba(10,12,24,.28) !important;
}

.page-wrapper {
    width: 100% !important;
    margin: 0 !important;
    padding-top: var(--p84-nav-h) !important;
    background: transparent;
}

.page-content-tab {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    padding: .85rem 1.4rem 2.5rem !important;
    min-height: calc(100vh - var(--p84-nav-h));
}

/* El contenedor interno también a ancho completo, con un tope cómodo */
.page-content-tab > .container-fluid { max-width: 1720px; margin: 0 auto; padding: 0; }

.footer {
    background: transparent;
    border-top: 1px solid var(--p84-line);
    font-family: var(--p84-font-mono);
    font-size: .66rem;
    letter-spacing: .04em;
    color: var(--p84-steel);
    padding: .85rem 1.4rem;
}

/* ----------------------------------------------------------------------------
   4 · COMPONENTES BOOTSTRAP RE-TEMATIZADOS
--------------------------------------------------------------------------- */

/* — Cards — */
.card, .dm-card, .dm-graph-card, .dm-chart-card, .dm-stat-card, .client-hero {
    background: var(--p84-surface) !important;
    border: var(--p84-border) !important;
    border-radius: var(--p84-radius) !important;
    box-shadow: var(--p84-shadow-soft) !important;
    transition: box-shadow var(--dm-transition), border-color var(--dm-transition);
}
.card .card-header, .dm-graph-card .dm-graph-header, .dm-chart-card .card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--p84-line) !important;
    border-radius: var(--p84-radius) var(--p84-radius) 0 0 !important;
}
.card:hover, .dm-card:hover, .dm-graph-card:hover {
    box-shadow: var(--p84-shadow) !important;
    border-color: var(--p84-line-2) !important;
    transform: none !important;
}

/* ----------------------------------------------------------------------------
   BOTONES — un solo sistema
   ----------------------------------------------------------------------------
   Había 32 combinaciones distintas de clases y 10 botones inventados fuera de
   Bootstrap (.p84-btn en el acceso, .enter-btn en la portada,
   .dm-btn-add-petition en peticiones, .dm-btn-apply en los filtros, los
   .btn-de-* del template). Todos eran el mismo botón con números distintos:
   radios de 7 y 8 px, pesos 600 y 700, cuatro paddings.
   Aquí se define UNA vez y los demás se alinean a esta forma.

   Jerarquía:
     sólido acento  -> la acción principal de la pantalla (una por vista)
     contorno       -> acciones secundarias
     fantasma       -> terciarias, dentro de tablas y barras
     sólido alerta  -> destructivas
--------------------------------------------------------------------------- */
:root {
    --p84-btn-radio:   8px;
    --p84-btn-pad-y:   .5rem;
    --p84-btn-pad-x:   1.05rem;
    --p84-btn-tam:     .82rem;
    --p84-btn-peso:    600;
}

.btn,
.p84-btn,
.enter-btn,
.dm-btn-add-petition,
.dm-btn-apply {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    border-radius: var(--p84-btn-radio) !important;
    font-family: var(--p84-font-display);
    font-size: var(--p84-btn-tam) !important;
    font-weight: var(--p84-btn-peso) !important;
    line-height: 1.35;
    padding: var(--p84-btn-pad-y) var(--p84-btn-pad-x);
    border: 1px solid transparent;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: all var(--dm-transition);
    box-shadow: none;
}

/* Tamaños */
.btn-sm, .btn-group-sm > .btn {
    --p84-btn-pad-y: .34rem;
    --p84-btn-pad-x: .72rem;
    --p84-btn-tam:   .76rem;
}
.btn-lg { --p84-btn-pad-y: .7rem; --p84-btn-pad-x: 1.4rem; --p84-btn-tam: .9rem; }

/* Sólido acento — la acción principal */
/* Sólido acento: cian profundo con texto BLANCO.
   Se probó el gesto del logo —relleno cian brillante con tinta encima— y
   sobre superficie clara no cuaja: el texto oscuro sobre un cian saturado
   vibra y se pierde, incluso con 7:1 de contraste medido. El blanco sobre
   cian profundo da 5.36:1 y se lee limpio a cualquier tamaño.
   El "encendido" del hover ya no viene de aclarar el relleno —eso obligaría
   a cambiar el color del texto a media interacción— sino de un halo del
   cian del logotipo alrededor. */
.btn-primary, .btn-info, .btn-success:not(.btn-outline-success),
.btn-de-primary, .p84-btn, .enter-btn,
.dm-btn-add-petition, .dm-btn-apply {
    background: var(--p84-cian-sel) !important;
    border-color: var(--p84-cian-sel-2) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.btn-primary:hover, .btn-info:hover, .btn-success:hover,
.btn-de-primary:hover, .p84-btn:hover, .enter-btn:hover,
.dm-btn-add-petition:hover, .dm-btn-apply:hover {
    background: #0F8099 !important;
    border-color: var(--p84-cian-alto) !important;
    color: #fff !important;
    box-shadow: 0 0 0 3px rgba(0,229,255,.28),
                0 4px 18px rgba(0,229,255,.35) !important;
}

/* Contorno — acciones secundarias. Todas las variantes neutras del template
   (secondary, light, dark) caen aquí para dejar de tener tres grises. */
.btn-outline-primary, .btn-outline-info,
.btn-outline-secondary, .btn-outline-dark,
.btn-secondary, .btn-light {
    border: 1px solid var(--p84-line-2) !important;
    color: var(--p84-steel) !important;
    background: var(--p84-surface) !important;
}

/* Destructivas */
.btn-danger, .btn-de-danger, .btn-outline-danger:hover {
    background: var(--p84-alert) !important;
    border-color: var(--p84-alert) !important;
    color: #fff !important;
}
.btn-outline-danger {
    border: 1px solid rgba(225,29,72,.45) !important;
    color: var(--p84-alert) !important;
    background: var(--p84-surface) !important;
}
.btn-warning { background: var(--p84-amber) !important; border-color: var(--p84-amber) !important; color: #fff !important; }

/* Un botón deshabilitado no debe verse pulsable */
.btn:disabled, .btn.disabled { opacity: .5 !important; box-shadow: none !important; transform: none !important; cursor: not-allowed; }

.btn:focus-visible, .p84-btn:focus-visible, .enter-btn:focus-visible {
    box-shadow: var(--p84-ring) !important;
    outline: none;
}

/* Icono solo: cuadrado, no rectángulo con aire de sobra */
.btn.p84-btn-icono { --p84-btn-pad-x: var(--p84-btn-pad-y); aspect-ratio: 1; }

/* — Formularios — */
.form-control, .form-select, input[type="number"], input[type="date"], input[type="text"], textarea, select {
    border-radius: var(--p84-radius-sm) !important;
    border: 1px solid var(--p84-line-2) !important;
    background: var(--p84-surface) !important;
    font-family: var(--p84-font-display);
    font-size: .84rem !important;
    color: var(--p84-ink) !important;
    box-shadow: none !important;
    transition: border-color var(--dm-transition), box-shadow var(--dm-transition);
}
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--p84-accent) !important;
    box-shadow: var(--p84-ring) !important;
    outline: none !important;
}
.form-label, label {
    font-family: var(--p84-font-display);
    font-size: .76rem;
    font-weight: 600;
    color: var(--p84-steel);
}
.form-check-input {
    border-radius: 4px !important;
    border: 1.5px solid var(--p84-line-2) !important;
    width: 1.02em; height: 1.02em;
    transition: all var(--dm-transition);
}
.form-check-input:checked { background-color: var(--p84-cian-sel) !important; border-color: var(--p84-cian-sel-2) !important; }
.form-check-input:focus { box-shadow: var(--p84-ring) !important; }
.form-switch .form-check-input { border-radius: 999px !important; width: 2em; }
.form-switch .form-check-input:checked { background-color: var(--p84-cian-sel) !important; border-color: var(--p84-cian-sel-2) !important; }
input[type="range"] { accent-color: var(--p84-accent) !important; }

/* — Tablas y DataTables — */
.table {
    font-size: .82rem;
    border-color: var(--p84-line) !important;
    background: var(--p84-surface);
}
.table thead th {
    background: var(--p84-surface-2) !important;
    color: var(--p84-steel) !important;
    font-family: var(--p84-font-mono);
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 1px solid var(--p84-line-2) !important;
    border-top: none !important;
}
.table tbody td { border-color: var(--p84-line) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #fbfcfd; }
.table-hover > tbody > tr:hover > * { background-color: var(--p84-accent-sf) !important; }
table.dataTable { border: none !important; }
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--p84-line-2) !important;
    border-radius: var(--p84-radius-sm) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: var(--p84-radius-sm) !important; font-size: .78rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: var(--p84-cian-sel) !important;
    color: #fff !important;
    border: 1px solid var(--p84-cian-sel-2) !important;
}
.dataTables_wrapper .dataTables_info { font-family: var(--p84-font-mono); font-size: .68rem; color: var(--p84-steel); }

/* — Modales — */
.modal-content {
    border-radius: 14px !important;
    border: var(--p84-border) !important;
    box-shadow: 0 20px 56px rgba(16,19,35,.18) !important;
    background: var(--p84-surface) !important;
}
/* Cabecera oscura, el mismo tono que la barra de navegación.
   Antes era blanca sobre cuerpo blanco y el título no se distinguía; peor
   aún, las vistas que intentaban arreglarlo con `bg-dark text-white` de
   Bootstrap perdían contra el `!important` de aquí y acababan con texto
   blanco sobre fondo blanco: el título desaparecía del todo. Se resuelve en
   un solo sitio para los modales de expediente, peticiones y publicaciones. */
.modal-header {
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
    background: var(--p84-mando) !important;
    border-radius: 14px 14px 0 0 !important;
    padding: .75rem 1.1rem !important;
}
.modal-header .modal-title { color: #ffffff; font-weight: 700; font-size: .95rem; }
/* La X viene negra: sobre el tono de mando hay que invertirla. */
.modal-header .btn-close {
    filter: invert(1) grayscale(1) brightness(1.9);
    opacity: .65;
}
.modal-header .btn-close:hover { opacity: 1; }
.modal-footer { border-top: 1px solid var(--p84-line) !important; }
.modal-backdrop.show { opacity: .4; background: #101323; }

/* — Badges — */
.badge { border-radius: 999px !important; font-weight: 600; }
.badge-positive { background-color: var(--p84-ok) !important; }
.badge-negative { background-color: var(--p84-alert) !important; }
.badge-neutral  { background-color: var(--p84-muted) !important; }

/* — Tabs nivel 2 (subrayado) — */
.nav-tabs { border-bottom: 1px solid var(--p84-line) !important; }
.nav-tabs .nav-link {
    border-radius: 0 !important;
    font-size: .8rem !important;
    font-weight: 500;
    color: var(--p84-steel) !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    transition: all var(--dm-transition);
}
.nav-tabs .nav-link:hover { color: var(--p84-ink) !important; }
.nav-tabs .nav-link.active {
    color: var(--p84-ink) !important;
    background: transparent !important;
    border-bottom: 2px solid var(--p84-accent) !important;
    font-weight: 600;
}

/* — Fichas de módulo (nivel 1): selector de instrumento —
   En claro: la tinta se reserva a la barra de navegación.
   Se distingue de la mesa de filtros por tamaño y peso, no por color: los
   módulos son la navegación de la pantalla, así que pesan más que un filtro. */
.dm-nav-pills {
    background: var(--p84-surface-2) !important;
    border: 1px solid var(--p84-line-2) !important;
    border-radius: 11px !important;
    padding: 5px !important;
    gap: 3px !important;
    box-shadow: inset 0 1px 3px rgba(16,19,35,.05);
}
.dm-nav-pills .nav-link {
    border-radius: 8px !important;
    border: none !important;
    font-family: var(--p84-font-display) !important;
    font-size: .86rem !important;
    font-weight: 600;
    letter-spacing: -.005em;
    color: var(--p84-steel) !important;
    background: transparent !important;
    padding: .58rem 1.15rem !important;
    transition: all var(--dm-transition);
}
.dm-nav-pills .nav-link:hover {
    color: var(--p84-ink) !important;
    background: rgba(16,19,35,.045) !important;
    box-shadow: none !important;
}
/* El activo se levanta del riel, con un filo de acento abajo que dice
   inequívocamente cuál módulo se está viendo */
.dm-nav-pills .nav-link.active,
.dm-nav-pills .nav-link[data-color].active {
    background: var(--p84-surface) !important;
    color: var(--p84-ink) !important;
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(16,19,35,.14),
                0 0 0 1px var(--p84-line-2),
                inset 0 -2px 0 var(--p84-accent) !important;
}
.dm-nav-pills .nav-link .p84-mod-num { color: var(--p84-muted) !important; }
.dm-nav-pills .nav-link.active .p84-mod-num { color: var(--p84-accent) !important; }

/* — Toolbars — */
.dm-toolbar {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem .9rem;
    background: var(--p84-surface-2) !important;
    border: 1px solid var(--p84-line) !important;
    border-radius: 9px !important;
    padding: .45rem .8rem;
    margin-bottom: .8rem;
}
.dm-toolbar label { font-size: .72rem !important; font-weight: 600; color: var(--p84-steel); margin: 0; }
.dm-toolbar .form-check { margin: 0; display: flex; align-items: center; gap: .4rem; }
.dm-toolbar .form-check-input { margin-top: 0; }
.dm-toolbar-sep { width: 1px; align-self: stretch; background: var(--p84-line-2); margin: 0 .1rem; }

/* — Viz boxes — */
.dm-viz-box {
    border: var(--p84-border) !important;
    border-radius: var(--p84-radius) !important;
    background: var(--p84-surface) !important;
}

/* — Spinner global —
   El posicionamiento vivía en el <style> del layout anterior; al reescribirlo
   el loader se quedaba en el flujo ocupando alto bajo la barra. */
.loading-spinner {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background-color: rgba(245,246,248,.92) !important;
}
.loading-spinner.hidden { display: none !important; }
.hidden { display: none !important; }
.spinner-border {
    border-color: var(--p84-accent) !important;
    border-right-color: transparent !important;
}
/* Velo de trabajo: centrado real en la ventana.
   Antes se inyectaba en el flujo del documento sin posicionamiento, así que
   el bloque "Cargando" terminaba hasta el fondo de la página. */
.global-spinner-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2050 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(245,246,248,.78) !important;
    backdrop-filter: blur(4px) !important;
    animation: p84-fade-in .16s ease-out;
}
.global-spinner-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .9rem;
    padding: 1.7rem 2.4rem;
    border-radius: 14px !important;
    border: var(--p84-border) !important;
    box-shadow: 0 18px 48px rgba(16,19,35,.16) !important;
    background: var(--p84-surface) !important;
    text-align: center;
}
.global-spinner-container .spinner-border {
    width: 2.6rem;
    height: 2.6rem;
    border-width: 3px;
}
.global-spinner-text h5 {
    color: var(--p84-ink) !important;
    font-weight: 700;
    font-size: .92rem;
    margin: 0 0 .2rem;
}
.global-spinner-text p {
    margin: 0;
    font-family: var(--p84-font-mono);
    font-size: .68rem;
    letter-spacing: .04em;
    color: var(--p84-muted);
}
@keyframes p84-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* Panel trabajando: atenúa el módulo sin bloquear la página */
.p84-panel-cargando { position: relative; }
.p84-panel-cargando::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(245,246,248,.55);
    backdrop-filter: blur(1px);
    border-radius: var(--p84-radius);
    z-index: 5;
    pointer-events: none;
}

/* — Accordion — */
.accordion-item { border: var(--p84-border) !important; border-radius: 9px !important; background: var(--p84-surface); }
.accordion-button {
    border-radius: 9px !important;
    font-size: .8rem !important;
    font-weight: 600;
    background: var(--p84-surface) !important;
    color: var(--p84-ink) !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    background: var(--p84-accent-sf) !important;
    color: var(--p84-accent) !important;
}
.accordion-button:focus { box-shadow: none !important; }

/* — Alertas / toasts — */
.alert { border-radius: var(--p84-radius) !important; border: var(--p84-border) !important; }
.toast { border-radius: var(--p84-radius) !important; border: var(--p84-border) !important; box-shadow: var(--p84-shadow) !important; }

/* — Dropdowns — */
.dropdown-menu {
    border-radius: 10px !important;
    border: var(--p84-border) !important;
    box-shadow: var(--p84-shadow) !important;
    font-size: .82rem;
    background: var(--p84-surface);
    padding: .3rem !important;
}
.dropdown-item { border-radius: 7px; padding: .45rem .7rem; color: var(--p84-steel); }
.dropdown-item:hover { background: var(--p84-surface-2); color: var(--p84-ink); }

/* — Choices.js — */
.choices__inner { border-radius: var(--p84-radius-sm) !important; border: 1px solid var(--p84-line-2) !important; background: var(--p84-surface) !important; font-size: .82rem; }
.choices__list--dropdown { border-radius: 9px !important; border: var(--p84-border) !important; box-shadow: var(--p84-shadow); }
.choices__list--multiple .choices__item {
    border-radius: 999px !important;
    background: var(--p84-cian-sel) !important;
    color: #fff !important;
    border: 1px solid var(--p84-cian-sel-2) !important;
    font-size: .72rem;
    font-weight: 600;
}
.choices__list--multiple .choices__item .choices__button {
    border-left-color: rgba(255,255,255,.35) !important;
    filter: none !important;
    opacity: .65;
}
.choices__list--multiple .choices__item .choices__button:hover { opacity: 1; }

/* — Progress — */
.progress, .hero-progress { border-radius: 999px !important; background: #eceef2 !important; }
.progress-bar, .hero-progress-bar { border-radius: 999px !important; }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--p84-line-2); border-radius: 999px; border: 2px solid var(--p84-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--p84-muted); }

/* ----------------------------------------------------------------------------
   5 · UTILIDADES PROPIAS
--------------------------------------------------------------------------- */

/* Bloque titular de sección: 01 / Nombre */
.p84-section {
    display: flex;
    align-items: baseline;
    gap: .55rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--p84-line);
    padding-bottom: .5rem;
}
.p84-section .p84-section-num {
    font-family: var(--p84-font-mono);
    font-size: .76rem;
    font-weight: 600;
    color: var(--p84-muted);
}
.p84-section .p84-section-name {
    font-family: var(--p84-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--p84-ink);
    margin: 0;
}
.p84-section .p84-section-hint {
    margin-left: auto;
    font-family: var(--p84-font-mono);
    font-size: .66rem;
    color: var(--p84-steel);
}

/* Estado vacío: en vez de una línea de texto perdida en el blanco */
.p84-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 180px;
    margin: .25rem 0;
    border: 1px dashed var(--p84-line-2);
    border-radius: var(--p84-radius);
    background: var(--p84-surface-2);
    color: var(--p84-muted);
    text-align: center;
    width: 100%;
}
.p84-empty i { font-size: 1.5rem; opacity: .55; }
.p84-empty .p84-empty-titulo {
    font-family: var(--p84-font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--p84-steel);
}
.p84-empty .p84-empty-detalle { font-size: .76rem; color: var(--p84-muted); margin: 0; }

/* ----------------------------------------------------------------------------
   REALCE DE INTERACCIÓN
   El dashboard tenía este gesto (levantarse + halo del acento) solo en sus
   accesos directos. Aquí se aplica a todo lo que responde al cursor, para que
   la sensación sea la misma en las nueve pantallas.
--------------------------------------------------------------------------- */
.p84-realce,
.p84-quick,
.dm-petition-item,
.p84-counter,
a.card,
.card[role="button"],
[data-p84-clic] {
    transition: transform .18s cubic-bezier(.4,0,.2,1),
                box-shadow .18s cubic-bezier(.4,0,.2,1),
                border-color .18s,
                background-color .18s;
}
.p84-realce:hover,
.p84-quick:hover,
.dm-petition-item:hover,
.p84-counter:hover,
a.card:hover,
.card[role="button"]:hover,
[data-p84-clic]:hover {
    transform: translateY(-1px);
    border-color: var(--p84-glow-line) !important;
    /* Opaco: si el tinte fuera translúcido se vería la retícula del fondo
       a través de la tarjeta. */
    background-color: var(--p84-glow-sf) !important;
    box-shadow: var(--p84-glow-drop) !important;
}

/* Botones sólidos: el halo va en el color del propio botón */
.btn-primary:hover, .btn-info:hover, .btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 3px rgba(0,229,255,.28), 0 4px 18px rgba(0,229,255,.35) !important;
}
.btn-danger:hover  { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(225,29,72,.32) !important; }
.btn-warning:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(217,119,6,.32) !important; }

/* Botones de contorno: se tiñen del acento en vez de solo agrisarse */
.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-outline-info:hover {
    border-color: var(--p84-glow-line) !important;
    background: var(--p84-glow-sf) !important;
    color: var(--p84-accent) !important;
    box-shadow: var(--p84-glow-drop) !important;
    transform: translateY(-1px);
}

/* Quien no deba levantarse (filas de tabla, celdas) queda exento */
.table tbody tr:hover, .ejec-table tbody tr:hover { transform: none !important; box-shadow: none !important; }

@media (prefers-reduced-motion: reduce) {
    .p84-realce, .p84-quick, .dm-petition-item, .p84-counter,
    a.card, .card[role="button"], [data-p84-clic], .btn { transition: none !important; }
    .p84-realce:hover, .p84-quick:hover, .dm-petition-item:hover, .p84-counter:hover,
    a.card:hover, .card[role="button"]:hover, [data-p84-clic]:hover, .btn:hover { transform: none !important; }
}

/* ----------------------------------------------------------------------------
   CABECERA DE PÁGINA
   El patrón "kicker + título + fecha" que estrenó el Observatorio, disponible
   para cualquier pantalla en vez de vivir dentro de dashboard.blade.php.
--------------------------------------------------------------------------- */
.p84-dash-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: var(--p84-border);
    padding-bottom: .9rem;
}
.p84-dash-kicker {
    font-family: var(--p84-font-mono);
    font-size: .64rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
    color: var(--p84-steel);
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.p84-dash-title {
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0;
    line-height: 1.1;
}
.p84-dash-date {
    font-family: var(--p84-font-mono);
    font-size: .7rem;
    letter-spacing: .03em;
    color: var(--p84-muted);
    margin: .35rem 0 0;
}

/* ----------------------------------------------------------------------------
   CONTADOR Y PANEL
   Nacieron en el Observatorio; el expediente y las listas los reutilizan.
--------------------------------------------------------------------------- */
.p84-counter {
    background: var(--p84-surface);
    border: 1px solid var(--p84-line);
    border-radius: var(--p84-radius);
    box-shadow: var(--p84-shadow-soft);
    padding: .85rem 1rem .75rem 1.25rem;
    position: relative;
    height: 100%;
    overflow: hidden;
}
.p84-counter .p84-counter-label {
    font-size: .7rem;
    font-weight: 600;
    color: var(--p84-steel);
}
.p84-counter .p84-counter-value {
    font-family: var(--p84-font-mono);
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--p84-ink);
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
}
/* Para valores que son texto ("hace 3 días"), no una cifra */
.p84-counter .p84-counter-value-sm { font-size: 1.2rem; line-height: 1.4; }
.p84-counter .p84-counter-unidad {
    font-size: .9rem;
    font-weight: 500;
    color: var(--p84-muted);
    margin-left: .15rem;
}
.p84-counter .p84-counter-sub,
.p84-counter .p84-counter-hint {
    font-family: var(--p84-font-mono);
    font-size: .62rem;
    color: var(--p84-muted);
    letter-spacing: .03em;
}
/* Franja del contador: se lee como un LED indicador, no como una barra de
   color. Un LED no es una superficie pintada: es una fuente de luz, y por
   eso lleva halo. Neutra por defecto —si las cuatro alumbran, ninguna
   señala nada— y encendida solo cuando la cifra pide atención. */
.p84-counter .p84-counter-strip {
    position: absolute;
    left: 0; top: 10px; bottom: 10px;
    width: 5px;
    border-radius: 0 5px 5px 0;
    background: var(--p84-line-2);
    transition: box-shadow .2s, background .2s;
}
/* En reposo el LED está APAGADO: solo el cuerpo en su color, plano, sin halo.
   Si las tarjetas alumbran todas a la vez el tablero se vuelve ruido y ninguna
   señala nada. */
.p84-counter .p84-counter-strip[style*="--led"] {
    background: var(--led);
    box-shadow: none;
}
/* Enciende al pasar el cursor: ahí sí, tubo de neón. El degradado con el
   filamento claro al centro es lo que lo hace leer como fuente de luz y no
   como un borde pintado. */
.p84-counter:hover .p84-counter-strip[style*="--led"] {
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--led) 78%, #000) 0%,
        var(--led) 30%,
        color-mix(in srgb, var(--led) 30%, #fff) 62%,
        var(--led) 100%);
    box-shadow:
        0 0 5px 1px var(--led),
        0 0 18px 0 var(--led),
        0 0 40px -4px var(--led);
}

/* Barra de clima: positivo / neutral / negativo en una sola línea */
.p84-barra-clima {
    display: flex;
    height: 5px;
    border-radius: 999px;
    overflow: hidden;
    background: var(--p84-surface-2);
    margin: .3rem 0 .35rem;
}
.p84-barra-clima i { display: block; height: 100%; }

.p84-cifras { margin-bottom: .85rem; }

/* Panel de gráfico del Observatorio */
.p84-panel {
    background: var(--p84-surface);
    border: 1px solid var(--p84-line);
    border-radius: var(--p84-radius);
    box-shadow: var(--p84-shadow-soft);
    height: 100%;
    position: relative;
    overflow: hidden;
    transition: box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.p84-panel:hover { box-shadow: var(--p84-shadow); }
.p84-panel .p84-panel-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--p84-line);
}
.p84-panel .p84-panel-head i { color: var(--p84-accent); font-size: 1.05rem; }
.p84-panel .p84-panel-title {
    font-size: .84rem;
    font-weight: 600;
    color: var(--p84-ink);
}
.p84-panel .p84-panel-meta {
    margin-left: auto;
    font-family: var(--p84-font-mono);
    font-size: .64rem;
    color: var(--p84-muted);
    display: flex;
    align-items: center;
    gap: .6rem;
}
.p84-panel .p84-panel-body { padding: 1rem; }

/* Acceso directo */
.p84-quick {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .85rem 1rem;
    border: 1px solid var(--p84-line);
    border-radius: 10px;
    background: var(--p84-surface);
    text-decoration: none !important;
    color: var(--p84-ink) !important;
    font-size: .82rem;
    font-weight: 600;
    height: 100%;
}
.p84-quick i { font-size: 1.15rem; color: var(--p84-accent); flex-shrink: 0; }
.p84-quick:hover { color: var(--p84-accent) !important; }

/* Drag handle */
.p84-drag-handle { cursor: grab; color: var(--p84-muted); transition: color var(--dm-transition); }
.p84-drag-handle:hover { color: var(--p84-accent); }
.p84-drag-handle:active { cursor: grabbing; }
.p84-drag-ghost { opacity: .4; outline: 2px dashed var(--p84-accent); outline-offset: 3px; border-radius: var(--p84-radius); }
.p84-drag-chosen { box-shadow: 0 10px 28px rgba(16,19,35,.18) !important; }

/* ----------------------------------------------------------------------------
   6 · CONTRA-OVERRIDES de parciales antiguos con mayor especificidad
--------------------------------------------------------------------------- */
.dm-accordion .accordion-item {
    border: var(--p84-border) !important;
    border-radius: 9px !important;
    background: var(--p84-surface) !important;
    margin-bottom: .45rem !important;
    overflow: hidden;
}
.dm-accordion .accordion-button {
    border-radius: 9px !important;
    background: var(--p84-surface) !important;
    color: var(--p84-ink) !important;
    font-size: .8rem !important;
    font-weight: 600 !important;
}
.dm-accordion .accordion-button:not(.collapsed) {
    background: var(--p84-accent-sf) !important;
    color: var(--p84-accent) !important;
}
.dm-accordion .accordion-body {
    border-radius: 0 0 9px 9px !important;
    background: var(--p84-surface) !important;
    border-top: 1px solid var(--p84-line);
}
.dm-petition-item {
    border-radius: 9px !important;
    background: var(--p84-surface-2) !important;
    border: 1px solid var(--p84-line) !important;
    transition: all var(--dm-transition) !important;
}
.dm-petition-item:hover {
    background: var(--p84-surface) !important;
    border-color: var(--p84-line-2) !important;
    box-shadow: var(--p84-shadow-sm) !important;
}
.dm-petition-icon { border-radius: 7px !important; }
.dm-petition-badge { border-radius: 999px !important; }