/* ══════════════════════════════════════════════════════════════════════════
   Core AI — Sistema de diseño del panel

   Mismos tokens y mismo lenguaje visual que Z-Grav: la referencia son las
   herramientas de Google (Search Console, Analytics, AI Studio), porque este
   panel va a vivir al lado de ellas en la misma pantalla. Gris casi neutro, un
   único azul de acento, tipografía sin gritar y el color reservado para lo que
   significa algo (bien, aviso, error).

   Regla que sostiene todo esto: **ningún color escrito a mano en el marcado**.
   Las páginas usan Tailwind sólo para maquetar (grid, flex, espaciado) y las
   clases de componente de aquí para todo lo que tenga color, borde o tamaño de
   texto. En cuanto alguien escribe un `bg-gray-900` en una plantilla, esa parte
   deja de cambiar con el tema y el modo claro se rompe sin que se note.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TIPOGRAFÍA (la misma que Z-Grav) ─────────────────────────────────────── */

@font-face {
    font-family: 'Google Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Google Sans'), url(https://fonts.gstatic.com/s/googlesans/v29/4UaGrENHsxJlGDuGo1OIlL3Owp4.woff2) format('woff2');
}

@font-face {
    font-family: 'Google Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: local('Google Sans Medium'), url(https://fonts.gstatic.com/s/googlesans/v29/4UabrENHsxJlGDuGo1OIlLU94YtzCwM.woff2) format('woff2');
}

/* ── TOKENS ───────────────────────────────────────────────────────────────── */

:root {
    /* Superficies. El fondo es un gris casi blanco y las tarjetas blancas: así
       una tarjeta se separa del fondo sin borde grueso ni sombra, que es lo que
       hace que una pantalla con veinte tarjetas no parezca un tablero. */
    --fondo:       #F8F9FA;
    --sup:         #FFFFFF;
    --sup-alt:     #F1F3F4;
    --linea:       #E1E3E1;
    --linea-sutil: #EDEFED;

    /* Texto: tres niveles y ni uno más. Con cinco grises dejan de significar
       jerarquía. */
    --txt-1: #1F1F1F;
    --txt-2: #444746;
    --txt-3: #5F6368;

    /* Acento único, para lo interactivo y para nada más. */
    --acento:     #0B57D0;
    --acento-sup: #D3E3FD;
    --acento-txt: #041E49;

    /* Semánticos: sólo para lo que significa algo. Los tonos de texto van
       oscurecidos respecto al color «de marca» porque se usan sobre su propio
       fondo suave, y ahí un verde vivo se queda en 4,1:1. */
    --ok:           #0A6B3D;
    --ok-sup:       #C4EED0;
    --aviso:        #7A5000;
    --aviso-sup:    #FDF0C8;
    --error:        #B3261E;
    --error-sup:    #F9DEDC;
    --error-fuerte: #C5221F;   /* sólido: contadores y botones con texto blanco */

    --sombra-1: 0 1px 2px rgba(60,64,67,.10), 0 1px 3px 1px rgba(60,64,67,.06);
    --sombra-2: 0 1px 3px rgba(60,64,67,.14), 0 4px 8px 3px rgba(60,64,67,.06);

    --fuente: 'Google Sans', Roboto, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
    --mono:   'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --radio-s: 8px;
    --radio-m: 12px;
    --radio-l: 16px;

    /* Espaciado. Está en tokens por lo mismo que el color: la densidad de la
       pantalla la decide esta hoja y no cada plantilla. Cuando el espacio se
       escribe suelto en el marcado —un `padding:24px` en una celda vacía, un
       `mb-6` porque ahí quedaba bien— la página deja de tener una densidad y
       pasa a tener tantas como manos la han tocado, y ya no hay dónde
       cambiarla.
       Aquí el aire de más no es elegancia: este panel se usa en un portátil
       donde cada pantalla tiene que caber en unos 720 px de alto, así que cada
       píxel de relleno que sobra es una fila de la tabla que hay que ir a
       buscar con el scroll. Sólo cuatro valores, por lo mismo que hay tres
       niveles de texto y no cinco: con ocho dejan de significar nada y cada
       cual coge el que le parece.
       Para apretar o soltar el panel entero se tocan estos cuatro números. */
    --esp-1: 4px;    /* entre cosas que son una sola: un icono y su cifra */
    --esp-2: 8px;    /* alto dentro de una caja, y separación entre dos cajas */
    --esp-3: 12px;   /* ancho dentro de una caja, y margen de la página */
    --esp-4: 16px;   /* lo único que de verdad tiene que respirar: un modal */

    --sidebar: 224px;
    --sidebar-collapsed: 62px;
}

html.dark {
    --fondo:       #131314;
    --sup:         #1E1F20;
    --sup-alt:     #282A2C;
    --linea:       #3C4043;
    --linea-sutil: #2D2F31;

    --txt-1: #E3E3E3;
    --txt-2: #C4C7C5;
    --txt-3: #9AA0A6;

    /* En oscuro el acento se aclara en vez de oscurecerse: un azul intenso
       sobre fondo negro vibra y cansa a los pocos minutos. */
    --acento:     #A8C7FA;
    --acento-sup: #0842A0;
    --acento-txt: #D3E3FD;

    --ok:           #6DD58C;
    --ok-sup:       #0A3D25;
    --aviso:        #F5C518;
    --aviso-sup:    #4A3A00;
    --error:        #F2B8B5;
    --error-sup:    #601410;
    --error-fuerte: #F2B8B5;

    --sombra-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px 1px rgba(0,0,0,.15);
    --sombra-2: 0 1px 3px rgba(0,0,0,.40), 0 4px 8px 3px rgba(0,0,0,.20);
}

/* ── RESET ────────────────────────────────────────────────────────────────── */

/* Lo mínimo que hacía el «preflight» de Tailwind y de lo que depende el resto de
   la hoja: caja con borde incluido, sin márgenes por defecto en títulos y
   párrafos, y botones e inputs sin el estilo del sistema operativo. Está aquí
   porque el CDN de Tailwind ya no se carga: era un script bloqueante de un
   tercero que retrasaba la primera pintura de cada página. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; tab-size: 4; }

h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; margin: 0; }

p, figure, blockquote, pre, dl, dd { margin: 0; }

img, svg, video, canvas { display: block; max-width: 100%; }

button {
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
}

input, select, textarea { margin: 0; color: inherit; }

table { border-collapse: collapse; }

/* ── BASE ─────────────────────────────────────────────────────────────────── */

/* El fondo va también en <html>, no sólo en `body`: el navegador tarda en
   pintar el body (espera a parsearlo, y eso espera al CDN de Tailwind) y hasta
   entonces pinta el lienzo blanco por defecto, que es el fogonazo que se ve al
   cambiar de página. `color-scheme` hace lo propio con las barras de scroll y
   los controles nativos. El arranque de esto vive incrustado en
   includes/head_theme.php, porque tiene que valer antes de esta hoja. */
:root    { color-scheme: light; }
html.dark { color-scheme: dark; }

html { background: var(--fondo); }

/* 14 px de cuerpo: es el tamaño con el que trabajan Search Console y Analytics,
   y este panel se lee durante horas seguidas. */
body, button, input, select, textarea, table {
    font-family: var(--fuente) !important;
    font-size: 14px;
    line-height: 20px;
    font-weight: 400;
}

body {
    background: var(--fondo) !important;
    color: var(--txt-1) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
}

code, pre, .mono { font-family: var(--mono) !important; }

a { color: inherit; text-decoration: none; }

.link {
    color: var(--acento);
    font-weight: 500;
}
.link:hover { text-decoration: underline; }

/* Escala tipográfica. Nada por debajo de 11 px: a 9 px el texto no se lee, se
   adivina. Y ningún peso por encima de 500 — cuando todo está en negrita, la
   negrita no destaca nada. */
.t-micro { font-size: 11px; line-height: 16px; }
.t-mini  { font-size: 12px; line-height: 16px; }
.t-xs    { font-size: 13px; line-height: 18px; }
.t-sm    { font-size: 14px; line-height: 20px; }
.t-md    { font-size: 16px; line-height: 24px; }
.t-lg    { font-size: 18px; line-height: 26px; }
.t-xl    { font-size: 22px; line-height: 28px; }
.t-2xl   { font-size: 28px; line-height: 36px; letter-spacing: -0.2px; }

.medium { font-weight: 500; }

.txt-1 { color: var(--txt-1); }
.txt-2 { color: var(--txt-2); }
.txt-3 { color: var(--txt-3); }
.txt-acento { color: var(--acento); }
.txt-ok     { color: var(--ok); }
.txt-aviso  { color: var(--aviso); }
.txt-error  { color: var(--error); }

/* Las etiquetas en mayúsculas necesitan aire entre letras o se leen como un
   bloque. Nunca en negrita: mayúscula y negrita a la vez es gritar dos veces. */
.etiqueta {
    font-size: 11px;
    line-height: 16px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--txt-3);
}

/* ── ESQUELETO ────────────────────────────────────────────────────────────── */

.app { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
    width: var(--sidebar);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--sup);
    border-right: 1px solid var(--linea);
    transition: transform .25s ease;
}

.sidebar-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px var(--esp-3);
}

.sidebar-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 var(--esp-2) var(--esp-2);
}

.sidebar-pie {
    padding: var(--esp-2);
    border-top: 1px solid var(--linea);
}

.overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0,0,0,.45);
    display: none;
}
.overlay.visible { display: block; }

.contenido {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    padding: var(--esp-2) var(--esp-3);
    background: var(--sup);
    border-bottom: 1px solid var(--linea);
}

.topbar-acciones { display: flex; align-items: center; gap: 8px; }

/* Breadcrumb y título de página en la barra superior */
.topbar-page-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--txt-1) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 500px !important;
    display: inline-block !important;
}

@media (max-width: 991px) {
    .topbar-page-title {
        max-width: 220px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 767px) {
    .topbar-page-title, .topbar-breadcrumb-sep {
        display: none !important;
    }
}

/* En móvil el ancho es para el título: el subtítulo es texto de apoyo y el
   botón de acción se queda sólo con el «+» (ver layout_header.php). */
@media (max-width: 767px) {
    .topbar     { padding: var(--esp-2); gap: var(--esp-2); }
    .topbar-sub { display: none; }
}

/* Ancho completo: se aprovecha todo el ancho disponible de la ventana en todas
   las pantallas. El relleno de abajo es mayor que el de arriba para que la última
   tarjeta respire respecto al borde inferior. */
.main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--esp-3) var(--esp-3) var(--esp-4);
}

.main-estrecho { max-width: none; }
.main-ancho { max-width: none; }

@media (max-width: 1023px) {
    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 50;
        transform: translateX(-100%);
        box-shadow: var(--sombra-2);
    }
    .sidebar.abierta { transform: translateX(0); }
}

.solo-desktop { display: none; }

@media (min-width: 1024px) {
    .solo-movil   { display: none !important; }
    .solo-desktop { display: inline-flex !important; }
}

/* ── SIDEBAR COLAPSADA (solo desktop ≥ 1024px) ───────────────────────────── */

.sidebar.colapsada { width: var(--sidebar-collapsed); }

.sidebar.colapsada .marca-nombre,
.sidebar.colapsada .marca-chip,
.sidebar.colapsada .nav-grupo,
.sidebar.colapsada .nav-item > *:not(.nav-icono),
.sidebar.colapsada .sidebar-pie .nav-item > *:not(.nav-icono) {
    opacity: 0;
    width: 0;
    overflow: hidden;
    white-space: nowrap;
    pointer-events: none;
}

.sidebar.colapsada .sidebar-cab { justify-content: center; padding: 14px 6px; }
.sidebar.colapsada .marca        { justify-content: center; gap: 0; }

.sidebar.colapsada .sidebar-nav { padding: 0 4px 8px; }
.sidebar.colapsada .nav-item    { justify-content: center; padding: 8px 0; position: relative; }
.sidebar.colapsada .nav-icono   { font-size: 18px; margin: 0; }

.sidebar.colapsada .sidebar-pie { padding: 8px 4px; }

/* Tooltip al pasar por encima del icono en estado colapsado */
.sidebar.colapsada .nav-item[data-label]:hover::after {
    content: attr(data-label);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--sup-alt);
    color: var(--txt-1);
    font-size: 12px;
    font-weight: 500;
    padding: 5px 10px;
    border-radius: var(--radio-s);
    white-space: nowrap;
    z-index: 2000;
    pointer-events: none;
    box-shadow: var(--sombra-2);
}

.sidebar.colapsada .nav-item:has(#badgeTareasPendientes:not(.hidden))::before,
.sidebar.colapsada .nav-item:has(#badgeMigrate:not(.hidden))::before {
    content: '';
    position: absolute;
    top: 6px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 9999px;
    background: var(--acento);
}
.sidebar.colapsada .nav-item:has(#badgeMigrate:not(.hidden))::before {
    background: var(--aviso);
}


/* Botón de colapso: gira 180° cuando está colapsada */
.btn-collapse { transition: transform .25s ease; }

/* ── MARCA ────────────────────────────────────────────────────────────────── */

.marca { display: flex; align-items: center; gap: 10px; min-width: 0; }

.marca-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border-radius: var(--radio-s);
}

.marca-logo img {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 7px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

html.dark .marca-logo img {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.marca-nombre {
    font-size: 14px;
    font-weight: 500;
    color: var(--txt-1);
    white-space: nowrap;
}

.marca-chip {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 9999px;
    background: var(--sup-alt);
    color: var(--txt-3);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

/* ── NAVEGACIÓN ───────────────────────────────────────────────────────────── */

.nav-grupo {
    padding: 10px var(--esp-3) var(--esp-1);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--txt-3);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    margin-bottom: 2px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--txt-2);
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s ease;
}

.nav-item:hover { background: var(--sup-alt); color: var(--txt-1); }

/* El activo es una píldora tonal, como en Gmail o Search Console: se ve al
   instante sin gradientes ni barras de neón. */
.nav-item-activo,
.nav-item-activo:hover {
    background: var(--acento-sup);
    color: var(--acento-txt);
}
html.dark .nav-item-activo,
html.dark .nav-item-activo:hover { color: var(--acento); }

.nav-icono { font-size: 15px; line-height: 1; }

.nav-contador {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 9999px;
    background: var(--sup-alt);
    color: var(--txt-2);
    font-size: 11px;
    font-weight: 500;
    transition: transform .2s ease, background-color .2s ease;
}
.nav-contador.hidden { display: none; }
.nav-contador-aviso {
    background: var(--aviso-sup);
    color: var(--aviso);
}
.nav-contador-acento {
    background: var(--acento-sup);
    color: var(--acento-txt);
}
html.dark .nav-contador-acento {
    background: var(--acento-sup);
    color: var(--acento);
}
.burbuja-animada {
    animation: pulsoBurbuja .6s ease;
}
@keyframes pulsoBurbuja {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ── CONTROLES ────────────────────────────────────────────────────────────── */

button, .app-btn {
    font-family: var(--fuente);
    cursor: pointer;
    transition: background-color .15s ease, opacity .15s ease;
}

button:disabled, .app-btn:disabled { cursor: not-allowed; opacity: .38; }

/* El foco visible es accesibilidad, no adorno: sin él, quien navega con teclado
   no sabe dónde está. */
button:focus-visible, a:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

.app-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 9999px;
    font-weight: 500;
    line-height: 1.2;
    min-height: 36px;
    padding: 8px 20px;
    font-size: 14px;
    white-space: nowrap;
}

.app-btn-sm { min-height: 32px; padding: 6px 14px; font-size: 13px; }
.app-btn-lg { min-height: 48px; padding: 12px 32px; font-size: 16px; }
.app-btn-bloque { display: flex; width: 100%; }

.app-btn-primary { background: var(--acento); color: #FFFFFF; }
html.dark .app-btn-primary { color: #062E6F; }
.app-btn-primary:hover:not(:disabled) { filter: brightness(1.08); }

.app-btn-soft { background: var(--acento-sup); color: var(--acento-txt); }
html.dark .app-btn-soft { color: var(--acento); }

.app-btn-ghost {
    background: transparent;
    color: var(--txt-1);
    border: 1px solid var(--linea);
}
.app-btn-ghost:hover:not(:disabled) { background: var(--sup-alt); }

.app-btn-danger { background: var(--error-fuerte); color: #FFFFFF; }
html.dark .app-btn-danger { color: #601410; }

.app-btn-plano {
    background: transparent;
    color: var(--txt-2);
    min-height: 32px;
    padding: 6px 10px;
    font-size: 13px;
}
.app-btn-plano:hover:not(:disabled) { background: var(--sup-alt); color: var(--txt-1); }

.app-btn-icono {
    width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 9999px;
    color: var(--txt-2);
    font-size: 16px;
}
.app-btn-icono:hover { background: var(--sup-alt); }

/* Acciones en línea dentro de una fila o tarjeta: texto, sin caja. */
.accion {
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--acento);
}
.accion:hover { text-decoration: underline; }
.accion-peligro { color: var(--error); }
.accion-aviso   { color: var(--aviso); }
.accion-ok      { color: var(--ok); }

/* ── FORMULARIOS ──────────────────────────────────────────────────────────── */

.campo { display: block; margin-bottom: var(--esp-2); }

.campo-label {
    display: block;
    margin-bottom: var(--esp-1);
    font-size: 13px;
    font-weight: 500;
    color: var(--txt-2);
}

.campo-ayuda {
    margin-top: var(--esp-1);
    font-size: 12px;
    color: var(--txt-3);
}

input, select, textarea {
    width: 100%;
    background: var(--sup);
    border: 1px solid var(--linea);
    color: var(--txt-1);
    border-radius: var(--radio-s);
    padding: 6px var(--esp-3);
    font-size: 14px;
}

input[type="checkbox"], input[type="radio"] {
    width: auto;
    accent-color: var(--acento);
}

input:focus, select:focus, textarea:focus {
    border-color: var(--acento);
    outline: 1px solid var(--acento);
}

input::placeholder, textarea::placeholder { color: var(--txt-3); }

textarea { resize: vertical; }

input.mono, textarea.mono { font-family: var(--mono) !important; }

input[type="date"], input[type="datetime-local"] { color-scheme: light; }
html.dark input[type="date"], html.dark input[type="datetime-local"] { color-scheme: dark; }

.codigo-input {
    text-align: center;
    font-family: var(--mono) !important;
    font-size: 18px;
    letter-spacing: 0.4em;
}

/* ── TARJETAS ─────────────────────────────────────────────────────────────── */

/* Las tarjetas se apoyan en el borde, no en la sombra: veinte sombras en una
   pantalla la vuelven turbia. */
.card {
    background: var(--sup);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    overflow: hidden;
}

.card-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--esp-3);
    flex-wrap: wrap;
    padding: var(--esp-2) var(--esp-3);
    border-bottom: 1px solid var(--linea);
}

.card-titulo {
    font-size: 14px;
    font-weight: 500;
    color: var(--txt-1);
}

.card-cuerpo { padding: var(--esp-2) var(--esp-3); }

.card-pie {
    padding: var(--esp-2) var(--esp-3);
    border-top: 1px solid var(--linea);
    background: var(--sup-alt);
    display: flex;
    flex-wrap: wrap;
    gap: var(--esp-3);
}

.card-acento { border-color: var(--acento); }

/* Métrica: cifra grande y etiqueta. La cifra es lo único que puede pesar. */
.stat {
    background: var(--sup);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    padding: 4px 8px;
}

.stat-valor {
    font-size: 22px;
    line-height: 28px;
    font-weight: 500;
    color: var(--txt-1);
    letter-spacing: -0.2px;
}

.stat-label {
    margin-top: 2px;
    font-size: 12px;
    color: var(--txt-3);
}

/* Mini-métrica para rejillas dentro de una tarjeta. */
.mini-stat {
    background: var(--sup-alt);
    border-radius: var(--radio-s);
    padding: var(--esp-1) var(--esp-2);
    text-align: center;
}
.mini-stat-valor { font-size: 14px; font-weight: 500; color: var(--txt-1); }
.mini-stat-label { font-size: 11px; color: var(--txt-3); }

/* ── CHIPS Y AVISOS ───────────────────────────────────────────────────────── */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px;
    border-radius: 9999px;
    background: var(--sup-alt);
    color: var(--txt-2);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.chip-acento { background: var(--acento-sup); color: var(--acento-txt); }
html.dark .chip-acento { color: var(--acento); }
.chip-ok     { background: var(--ok-sup);     color: var(--ok); }
.chip-aviso  { background: var(--aviso-sup);  color: var(--aviso); }
.chip-error  { background: var(--error-sup);  color: var(--error); }

/* Chip pulsable: los filtros de la cola y las pestañas de ajustes. Se usa tanto
   en <button> como en <a>, así que necesita display propio. */
.chip-btn {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--linea);
    background: transparent;
    color: var(--txt-2);
    padding: 5px 14px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 500;
}
.chip-btn:hover { background: var(--sup-alt); color: var(--txt-1); }
.chip-btn.activo {
    background: var(--acento-sup);
    border-color: transparent;
    color: var(--acento-txt);
}
html.dark .chip-btn.activo { color: var(--acento); }

.alerta {
    padding: var(--esp-2) var(--esp-3);
    border-radius: var(--radio-s);
    font-size: 13px;
    background: var(--sup-alt);
    color: var(--txt-2);
}
.alerta-ok    { background: var(--ok-sup);    color: var(--ok); }
.alerta-aviso { background: var(--aviso-sup); color: var(--aviso); }
.alerta-error { background: var(--error-sup); color: var(--error); }

/* Banda bajo la barra superior cuando la sesión viene de un enlace temporal.
   Va aquí y no arriba con .main porque tiene que ganarle a .alerta, que se
   define en este bloque: misma especificidad, decide el orden.
   Sin radio y de lado a lado, para que se lea como parte del marco de la
   ventana y no como una tarjeta más del contenido. */
.banda-acceso {
    border-radius: 0;
    padding: var(--esp-1) var(--esp-3);
    font-size: 12px;
    line-height: 16px;
    border-bottom: 1px solid var(--linea);
}

/* ── TABLAS ───────────────────────────────────────────────────────────────── */

.tabla { width: 100%; border-collapse: collapse; }

.tabla th {
    padding: var(--esp-1) var(--esp-3);
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--txt-3);
    border-bottom: 1px solid var(--linea);
    white-space: nowrap;
}

.tabla td {
    padding: 6px var(--esp-3);
    font-size: 13px;
    color: var(--txt-2);
    border-bottom: 1px solid var(--linea-sutil);
    vertical-align: middle;
}

.tabla tbody tr:last-child td { border-bottom: none; }
.tabla tbody tr:hover { background: var(--sup-alt); }
.tabla .centro { text-align: center; }
.tabla .derecha { text-align: right; }
.tabla-scroll { overflow-x: auto; }

/* Listados largos que no deben empujar la página hacia abajo: el log de
   consultas trae hasta 50 entradas y se lee de arriba abajo, no de una vez.
   La cabecera se queda fija para no perder de vista las columnas. */
.tabla-alta { max-height: 320px; overflow-y: auto; }
.tabla-alta thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--sup);
}

.fila-apagada { opacity: .45; }

/* La celda de «aquí no hay nada todavía». Existe como clase porque estaba
   escrita a mano —`style="padding:24px"`, y 32 en dos sitios— en las ocho
   tablas del panel: espaciado suelto en el marcado es la misma avería que un
   color suelto, deja de responder al tema y a la densidad y nadie sabe dónde
   ir a cambiarlo. */
.tabla-vacia {
    padding: var(--esp-4) var(--esp-3) !important;
    text-align: center;
    color: var(--txt-3);
}

/* ── BLOQUES DE CÓDIGO ────────────────────────────────────────────────────── */

.codigo {
    background: var(--sup-alt);
    border-radius: var(--radio-s);
    padding: var(--esp-2) var(--esp-3);
    font-family: var(--mono) !important;
    font-size: 12px;
    line-height: 18px;
    color: var(--txt-1);
    white-space: pre-wrap;
    overflow-x: auto;
    margin: 0;
}

code.inline {
    background: var(--sup-alt);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12px;
    color: var(--txt-1);
}

.codigo-comentario { color: var(--txt-3); }

.modal {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0;
}

.modal.in,
.modal.show {
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.modal.hidden { display: none !important; }

.modal-caja {
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--sup);
    border: 1px solid var(--linea);
    border-radius: var(--radio-l);
    box-shadow: var(--sombra-2);
    padding: var(--esp-4);
}

.modal-ancho { max-width: 720px; }
.modal-xl { max-width: 960px; }

.modal-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--esp-3);
}

.modal-titulo { font-size: 18px; font-weight: 500; color: var(--txt-1); }

.modal-cerrar {
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: var(--txt-3);
    padding: 0 4px;
}
.modal-cerrar:hover { color: var(--txt-1); }

/* ── MENÚ DE CUENTA ───────────────────────────────────────────────────────── */

.menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    width: 240px;
    z-index: 50;
    background: var(--sup);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    box-shadow: var(--sombra-2);
    overflow: hidden;
}
.menu.hidden { display: none; }

.menu-cab { padding: var(--esp-2) var(--esp-3); border-bottom: 1px solid var(--linea-sutil); }

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: var(--esp-2) var(--esp-3);
    border: none;
    background: none;
    color: var(--txt-2);
    font-size: 13px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
}
.menu-item:hover { background: var(--sup-alt); color: var(--txt-1); }
.menu-item-peligro { color: var(--error); }
/* Sin píldora tonal como en la barra lateral: aquí sólo hace falta que no
   parezca un enlace a otro sitio cuando ya estás en él. */
.menu-item-activo,
.menu-item-activo:hover { background: var(--sup-alt); color: var(--txt-1); }
.menu-sep { border-top: 1px solid var(--linea-sutil); }

.avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--acento);
    color: #FFFFFF;
    font-size: 12px;
    font-weight: 500;
}
html.dark .avatar { color: #062E6F; }

/* ── ESTADOS VACÍOS Y CARGA ───────────────────────────────────────────────── */

/* Un estado vacío no dice nada que merezca media pantalla: lo que hace falta es
   que se lea, no que se celebre. Antes eran 36 px arriba y abajo más un icono de
   32, o sea 130 px de alto para tres líneas cortas. */
.vacio {
    padding: var(--esp-4) var(--esp-3);
    text-align: center;
    color: var(--txt-3);
}
.vacio-icono { font-size: 24px; margin-bottom: var(--esp-1); }
.vacio-titulo { font-size: 14px; font-weight: 500; color: var(--txt-2); }
.vacio-texto { font-size: 13px; margin-top: 2px; }

/* ── CABECERA DE SECCIÓN ──────────────────────────────────────────────────── */

/* Esto separa secciones dentro de una página («Mis proyectos», «API Keys»); no
   repite el título de la página, que ya está en la barra superior. Antes cada
   página abría con una cabecera que decía exactamente lo mismo que la barra:
   entre título, subtítulo y margen se iban 90 px de alto en cada pantalla sin
   añadir un solo dato. Por eso es 16 px y no 22, y por eso no tiene subtítulo
   salvo que diga algo nuevo. */
.seccion-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--esp-2);
    margin-bottom: var(--esp-2);
}

.seccion-titulo {
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: var(--txt-1);
}

.seccion-sub {
    font-size: 12px;
    line-height: 16px;
    color: var(--txt-3);
    max-width: 70ch;
}

/* ── DESPLEGABLE ──────────────────────────────────────────────────────────── */

/* Para lo que se lee una vez y después estorba: la documentación de la API en
   Agentes ocupaba 354 px por encima de la lista de agentes, en cada visita.
   Se usa sobre `.card`: <details class="card desplegable"> */
.desplegable > summary {
    display: flex;
    align-items: center;
    gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-3);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--txt-1);
    list-style: none;
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::before { content: '▸'; color: var(--txt-3); }
.desplegable > summary:hover { background: var(--sup-alt); }
.desplegable[open] > summary::before { content: '▾'; }

/* La línea separadora va en el contenido y no en el summary: el contenido sólo
   existe cuando está abierto, así que no hace falta colgarla de `[open]`. */
.desplegable > summary + * { border-top: 1px solid var(--linea); }

/* ── DETALLES ─────────────────────────────────────────────────────────────── */

.custom-scrollbar::-webkit-scrollbar,
.sidebar-nav::-webkit-scrollbar,
.modal-caja::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scrollbar::-webkit-scrollbar-track,
.sidebar-nav::-webkit-scrollbar-track,
.modal-caja::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb,
.sidebar-nav::-webkit-scrollbar-thumb,
.modal-caja::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 4px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover,
.sidebar-nav::-webkit-scrollbar-thumb:hover,
.modal-caja::-webkit-scrollbar-thumb:hover { background: var(--txt-3); }

.separador { border: none; border-top: 1px solid var(--linea); margin: var(--esp-3) 0; }

/* Quien ha pedido menos movimiento lo ha pedido en serio: puede ser una
   cuestión de mareo, no de preferencia. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ── LIENZO DE PLANES ─────────────────────────────────────────────────────── */

/* El editor de planes de acción: tarjetas colocadas a mano y flechas entre
   ellas. Vale la pena tener un lienzo propio y no una lista porque lo que se
   está editando es precisamente el orden, y el orden se ve de un vistazo en un
   dibujo y no en una tabla con una columna «depende de».

   Alto atado al de la ventana: esta pantalla es de las que se usan a pantalla
   completa, y un lienzo que empuja la página hacia abajo obliga a hacer scroll
   para arrastrar un nodo hasta el borde. El que desborda es el lienzo, por
   dentro, no la página. */
/* Los 174 px que se restan son lo que hay por encima y por debajo, medido y no
   estimado: 55 de barra superior, 12 de relleno de `.main`, 55 de la barra de
   herramientas y 8 de hueco hacen 130 por arriba; por abajo, 8 de hueco, 16 de 
   la línea de pistas y 16 de relleno hacen 40. Sobran 4 a propósito. 
   El desplegable de ayuda ya no está aquí, así que recuperamos esos píxeles. */
.lienzo {
    position: relative;
    height: calc(100vh - 174px);
    min-height: 320px;
    overflow: hidden;
    background: var(--sup);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
}

/* El mundo es más grande que la ventana a propósito: así hay sitio donde
   soltar un nodo sin pelearse con el borde, y el scroll lo lleva el lienzo. */
.lienzo-mundo {
    position: relative;
    width: 100%;
    height: 100%;
    /* Sin esto, arrastrar en un móvil hace scroll de la página en vez de mover
       el nodo: el navegador se queda con el gesto antes de que llegue el JS. */
    touch-action: none;
    /* La rejilla de puntos da referencia al arrastrar: sin ella no se sabe si
       dos nodos están alineados.

       Va aquí y no en `.lienzo`, que es donde estaba. El fondo de un elemento
       con scroll no acompaña a su contenido —`background-attachment: scroll`
       significa justo eso—, así que la rejilla se quedaba quieta mientras los
       nodos pasaban por encima y no servía de referencia para nada en cuanto
       había que desplazarse. Puesta en el mundo es parte del dibujo y se mueve
       con él, con el scroll y con el arrastre del fondo. */
    background-image: radial-gradient(var(--linea) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Arrastrando el fondo. El cursor es lo único que distingue «estoy moviendo el
   papel» de «no ha pasado nada», porque el contenido se mueve solidario. */
.lienzo-paneando { cursor: grabbing; }

.lienzo-flechas { position: absolute; inset: 0; pointer-events: none; }

.flecha {
    stroke: var(--acento);
    stroke-width: 3;
    fill: none;
    pointer-events: none;
}
.flecha-punta { fill: var(--acento); }

/* Zona sensible al clic, ancha e invisible, por debajo de la línea que se ve. */
.flecha-toque {
    stroke: transparent;
    stroke-width: 14;
    fill: none;
    pointer-events: stroke;
    cursor: pointer;
}

/* Mientras se arrastra una conexión que aún no ha llegado a ningún sitio. */
.flecha-fantasma {
    stroke: var(--txt-3);
    stroke-width: 3;
    stroke-dasharray: 5 5;
    fill: none;
}

/* El nombre de la rama, en el punto medio de su flecha.

   Sólo aparece en las que salen de una condición: en una cadena normal la línea
   ya lo dice todo y una etiqueta encima sería ruido. Va en el color del aviso
   porque es lo mismo que marca la condición de la que sale, y sin capturar el
   ratón para no robarle el clic a la flecha que hay debajo, que es como se
   quita. */
.rama {
    position: absolute;
    transform: translate(-50%, -50%);
    padding: 1px var(--esp-1);
    border: 1px solid var(--aviso);
    border-radius: 9999px;
    background: var(--aviso-sup);
    color: var(--aviso);
    font-size: 10px;
    line-height: 14px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
}

.nodo {
    position: absolute;
    width: 256px;
    background: var(--sup);
    border: 2px solid var(--linea);
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1);
    cursor: grab;
}
.nodo:active { cursor: grabbing; }

/* El borde dice cómo va el paso en el último lanzamiento. Sólo el borde: un
   fondo de color por estado convierte el lienzo en un semáforo. */
.nodo-hecho     { border-color: var(--ok); }
.nodo-marcha    { border-color: var(--acento); }
.nodo-bloqueado { border-color: var(--error); }

/* Por dónde empieza y por dónde acaba el plan.

   El anillo va en la sombra y no en el borde, que es donde lo pone el panel del
   que viene esto. Son dos cosas distintas y las dos importan a la vez: el borde
   dice cómo va la tarea de ese paso hoy, y esto dice qué papel tiene en el
   dibujo. Peleando por el borde, la clase que se declarara después tapaba a la
   otra y un plan en marcha perdía una de las dos lecturas. */
.nodo-inicio { box-shadow: var(--sombra-1), 0 0 0 3px var(--ok-sup); }
.nodo-fin    { box-shadow: var(--sombra-1), 0 0 0 3px var(--error-sup); }

/* Los botones de marcar. Apagados mientras no se usan: son dos más en una
   cabecera que ya tiene dos, y a todo volumen convierten la tarjeta en una
   barra de herramientas. */
.nodo-marca {
    padding: 0 2px;
    border: 0;
    background: none;
    color: var(--txt-3);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    opacity: .4;
}
.nodo-marca:hover        { opacity: 1; }
.nodo-marca-inicio       { color: var(--ok);    opacity: 1; }
.nodo-marca-fin          { color: var(--error); opacity: 1; }

/* «Sigue por: otro plan». Una línea discreta, no un botón: avisa de que el
   flujo no acaba en este paso, y se edita en la ventana grande porque el
   desplegable de planes no cabe en 240 px. */
.nodo-salto {
    display: block;
    width: 100%;
    margin-top: var(--esp-1);
    padding: 2px var(--esp-1);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: var(--fondo);
    color: var(--txt-2);
    font-size: 11px;
    line-height: 15px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.nodo-salto:hover { color: var(--acento); border-color: var(--acento); }

.nodo-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 12px;
    background: var(--sup-alt);
    border-radius: 14px 14px 0 0;
    border-bottom: 1px solid var(--linea-sutil);
}

.nodo-orden {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.6px;
    color: var(--txt-3);
    white-space: nowrap;
}

.nodo-cuerpo { padding: 8px 10px 10px; }

/* Los campos del nodo son de escribir, no de rellenar un formulario: sin caja,
   para que el nodo se lea como una ficha y no como cuatro inputs apilados. */
.nodo-cuerpo input,
.nodo-cuerpo textarea {
    border: none;
    background: transparent;
    padding: 2px 0;
    border-radius: 0;
}
.nodo-cuerpo input:focus,
.nodo-cuerpo textarea:focus {
    outline: none;
    border-bottom: 1px solid var(--acento);
}
.nodo-titulo   { font-size: 13px; font-weight: 500; color: var(--txt-1); }
.nodo-detalle  { font-size: 12px; line-height: 16px; color: var(--txt-2); resize: none; }

/* Los dos controles del pie del nodo —tipo de paso y prioridad— son de ajuste
   fino, no de rellenar un formulario, así que van pequeños para no competir con
   el título. Va calificado con `.nodo-cuerpo` a propósito: la regla de arriba
   que les quita la caja también tiene un elemento en el selector, y sin el
   calificador gana ella y el relleno se queda en `2px 0`. Es exactamente por
   esto por lo que el tamaño estaba escrito a mano en el marcado. */
.nodo-cuerpo .nodo-control {
    padding: 2px var(--esp-1);
    font-size: 12px;
}
.nodo-cuerpo .nodo-control-num { width: 56px; }

/* Las asas de conexión. 18 px es el mínimo con el que se acierta al primer
   intento con el ratón — con 10 se falla y se acaba arrastrando el nodo. */
.nodo-asa {
    position: absolute;
    top: 18px;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    border: 1px solid var(--linea);
    background: var(--sup-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
    transition: transform 0.15s;
}
.nodo-asa::after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--txt-3);
    pointer-events: none;
}
.nodo-asa-in  { left: -12px; }
.nodo-asa-out { 
    right: -12px; 
    background: var(--acento-sup);
    border-color: var(--acento);
    cursor: crosshair; 
}
.nodo-asa-out::after { background: var(--acento); }
.nodo-asa:hover { transform: scale(1.25); }

/* Mientras se está tendiendo una flecha, las asas de entrada se agrandan: hay
   que ver dónde se puede soltar sin tener que adivinarlo. */
.lienzo-conectando .nodo-asa-in { transform: scale(1.3); border-color: var(--acento); }
.lienzo-conectando .nodo-asa-in::after { background: var(--acento); }

/* Una condición se distingue por el borde, como los estados, y no por el fondo:
   un nodo de otro color en medio del lienzo se lee como un aviso. */
.nodo-condicion { border-color: var(--aviso); border-style: dashed; }

/* Las salidas van en el cuerpo, cada una en su fila, con su asa en el borde
   derecho de esa misma fila. El asa y el nombre tienen que ser la misma cosa: si
   el conector estuviera arriba en una esquina no se sabría cuál se arrastra. */
.salidas { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }

.salida {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Dentro de la fila, y no del nodo: así el asa acompaña a su nombre aunque
   cambie el alto de lo de arriba. Lo que la coloca en el borde del nodo es el
   padding del cuerpo, que es el mismo a los dos lados. */
.salida .nodo-asa-out { top: 50%; right: -21px; transform: translateY(-50%); }
.salida .nodo-asa-out:hover { transform: translateY(-50%) scale(1.25); }

/* 12 px a pelo. Estas tres reglas pedían el tamaño con una variable que tenía
   el nombre de la clase de texto pequeña, y esa variable no existe: la escala
   tipográfica se aplica con clases, y sólo el espaciado y el color viajan en
   tokens. El resultado era que las tres se quedaban sin tamaño —una var()
   inválida hace que el navegador descarte la declaración entera— y heredaban
   los 14 del cuerpo. Lo comprueba ahora DisenoTest. */
.salida-nombre {
    flex: 1;
    min-width: 0;
    padding: 2px 6px;
    font-size: 12px;
    color: var(--txt-1);
    background: var(--sup-alt);
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
}
.salida-nombre:focus { outline: none; border-color: var(--acento); }

.salida-quitar {
    padding: 0 var(--esp-1);
    font-size: 12px;
    line-height: 1;
    color: var(--txt-3);
    background: none;
    border: 0;
    cursor: pointer;
}
.salida-quitar:hover { color: var(--error); }

.salida-mas {
    align-self: flex-start;
    padding: 2px 6px;
    font-size: 12px;
    color: var(--txt-2);
    background: none;
    border: 1px dashed var(--linea);
    border-radius: var(--radio-s);
    cursor: pointer;
}
.salida-mas:hover { color: var(--acento); border-color: var(--acento); }

.lienzo-vacio {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
    color: var(--txt-3);
}

/* En estrecho la barra de herramientas se parte en varias filas, así que el
   lienzo tiene que ceder más alto o la página empieza a hacer scroll. */
@media (max-width: 767px) {
    .lienzo { height: calc(100vh - 330px); min-height: 280px; }
}

/* ── ACTIVIDAD ────────────────────────────────────────────────────────────── */

/* Barra de avance de un plan. Va en tramos y no en un porcentaje porque los
   pasos de un plan no están sólo hechos o sin hacer: uno puede estar en marcha
   y otro bloqueado, y son las dos cosas que hay que ver. Un 60 % las esconde
   las dos. Lo que falta es el fondo de la barra: no hace falta un tramo. */
.avance {
    display: flex;
    height: 6px;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--sup-alt);
}

.avance-tramo { height: 100%; }
.avance-hecho     { background: var(--ok); }
.avance-marcha    { background: var(--acento); }
.avance-bloqueado { background: var(--error); }

/* El punto de «esto está pasando ahora». Late despacio: es un indicador de
   estado, no una alarma, y en pantalla puede haber varios a la vez. */
.punto-vivo {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--acento);
    animation: latido 2.4s ease-in-out infinite;
}

@keyframes latido {
    0%, 100% { opacity: 1; }
    50%      { opacity: .35; }
}

/* Hermano quieto de `.punto-vivo`, para lo que ya ha pasado: mismo tamaño y
   misma posición, sin latido. Estaba usado en Actividad pero no declarado aquí,
   así que la fila se lo rehacía entero en un atributo `style` —color, tamaño y
   redondeo—. Una clase que no existe no da error, se queda callada: por eso
   duró tanto. */
.punto-ok {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 9999px;
    background: var(--ok);
}

/* Los dos cuelgan de la primera línea del texto de su fila, que empieza más
   abajo que el borde de la tarjeta. */
.punto-vivo, .punto-ok { margin-top: 6px; }

/* Separador dentro de una tarjeta. El marcado de Actividad pedía
   `border-t pt-2 border-[var(--linea)]`, que es sintaxis de Tailwind con valor
   arbitrario: aquí no hay ninguna de las tres, así que la línea no se pintaba
   nunca y el resultado de la tarea salía pegado a lo de arriba. */
.linea-arriba {
    border-top: 1px solid var(--linea);
    padding-top: var(--esp-2);
}

/* La fila de una llamada MCP: hora, IA, herramienta y cómo salió. Tipografía
   de código en las dos del medio —son identificadores, no prosa— y tamaño
   pequeño porque de esto se leen veinte líneas de golpe. */
.log-hora { color: var(--txt-3); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── COMPACTAR MEMORIA ────────────────────────────────────────────────────── */

/* La lista de candidatos scrollea ella, no el modal entero. `.modal-caja` ya
   tiene `max-height: 90vh` y `overflow-y: auto`, pero eso se lleva el botón de
   aplicar fuera de la pantalla justo cuando hay mucho que compactar, que es
   cuando más falta hace.

   Los 160 px que se restan son lo que hay por encima y por debajo: 16 y 16 de
   relleno de la caja, 26 de la línea del título y 12 de su margen hacen 70 por
   arriba; por abajo, 8 de margen y 8 de relleno de la línea separadora, 32 del
   botón y 8 + 32 de la nota de dos líneas hacen 88. Redondeado a 160. */
.compacta-scroll {
    max-height: calc(90vh - 160px);
    overflow-y: auto;
}

/* El contenido va truncado en su celda: aquí se viene a decidir por la clave y
   el motivo, y el texto entero está en el `title` para quien lo necesite. */
.compacta-texto { max-width: 42ch; }

/* ── PANTALLAS SUELTAS (login, instalador) ────────────────────────────────── */

/* No llevan el esqueleto del panel: una caja centrada sobre el fondo. */
.pantalla-centrada {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--fondo);
}

.caja-auth {
    width: 100%;
    max-width: 380px;
}

.caja-auth-ancha { max-width: 620px; }

/* El logo grande y centrado de login e instalador. */
.marca-logo-grande {
    margin: 0 auto var(--esp-3);
    width: 44px;
    height: 44px;
    font-size: 22px;
}

/* Fondo blanco fijo bajo el QR de 2FA: la cámara necesita ese margen claro para
   leerlo y en modo oscuro no lo hay. Es la única excepción a «ningún color a
   mano», y justo por serlo vive aquí, en la hoja, y no suelta en un atributo de
   settings.php donde nadie la encontraría al revisar el tema. */
.qr-caja {
    background: #FFFFFF;
    padding: var(--esp-2);
    border-radius: var(--radio-s);
}

/* ── UTILIDADES DE MAQUETACIÓN ────────────────────────────────────────────── */

/* Las que usaban las plantillas de Tailwind, con el mismo nombre y los mismos
   valores (escala de 4 px, `md` a 768 px y `lg` a 1024 px). Son cuarenta reglas:
   traerlas aquí sale más barato que un generador de CSS en tiempo de ejecución
   servido desde otro dominio, que era lo que retrasaba la primera pintura. Si
   hace falta una utilidad nueva, se añade a esta sección. */

.block   { display: block; }
.inline  { display: inline; }
.flex    { display: flex; }
.grid    { display: grid; }
.relative{ position: relative; }
.h-full  { height: 100%; }

/* `hidden` sin !important a propósito: el patrón `hidden md:inline` (el nombre
   de la cuenta, que sólo aparece en pantalla ancha) necesita que la utilidad de
   `md` de más abajo pueda ganarle por orden. Contra los componentes que traen su
   propio `display` gana por especificidad — `.modal.hidden` y `.menu.hidden`
   están declaradas junto a ellos. */
.hidden { display: none; }

.flex-1    { flex: 1 1 0%; }
.flex-col  { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.justify-start { justify-content: flex-start; }
.justify-center{ justify-content: center; }
.justify-end   { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.min-w-0  { min-width: 0; }
.shrink-0 { flex-shrink: 0; }

.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.gap-1 { gap: 4px; }
.gap-2 { gap: 8px; }
.gap-3 { gap: 12px; }
.gap-4 { gap: 16px; }
.gap-6 { gap: 24px; }

.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.ml-3 { margin-left: 12px; }
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-6 { margin-bottom: 24px; }

.space-y-2 > * + * { margin-top: 8px; }
.space-y-3 > * + * { margin-top: 12px; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.select-all  { user-select: all; }
.pre-wrap    { white-space: pre-wrap; }
.break-all   { word-break: break-all; }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dos líneas y puntos suspensivos, para textos con saltos de línea que en una
   sola línea no se entienden (el prompt de una programación, por ejemplo). */
.truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: pre-line;
}

@media (min-width: 768px) {
    .md\:inline       { display: inline; }
    .md\:grid-cols-2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:grid-cols-5  { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .md\:grid-cols-6  { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .xl\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .xl\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MantisBT — Capa de Compatibilidad y Corrección de Modo Oscuro / Dropdowns
   ══════════════════════════════════════════════════════════════════════════ */

/* Reset de contenedor Ace Admin / MantisBT */
body, .skin-3, .login-layout,
.main-container, .main-content, .page-content {
    background: var(--fondo) !important;
    color: var(--txt-1) !important;
    border: none !important;
}

.page-content {
    padding: var(--esp-3) !important;
}

/* Tarjetas y Cajas (Widget Box de MantisBT) */
.widget-box {
    background: var(--sup) !important;
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-m) !important;
    box-shadow: none !important;
    margin-bottom: var(--esp-3) !important;
    overflow: hidden;
}

.widget-header {
    background: var(--sup) !important;
    border-bottom: 1px solid var(--linea) !important;
    color: var(--txt-1) !important;
    padding: var(--esp-2) var(--esp-3) !important;
    min-height: 40px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.widget-title, .widget-header h4, .widget-header h5 {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--txt-1) !important;
    margin: 0 !important;
}

.widget-body {
    background: var(--sup) !important;
    color: var(--txt-1) !important;
}

.widget-main {
    padding: var(--esp-3) !important;
}

.widget-toolbox {
    background: var(--sup-alt) !important;
    border-top: 1px solid var(--linea) !important;
    padding: var(--esp-2) var(--esp-3) !important;
}

/* Tablas MantisBT */
.table, table.table, table.table-bordered {
    background: var(--sup) !important;
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-m) !important;
    color: var(--txt-1) !important;
    margin-bottom: var(--esp-3) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    overflow: hidden;
    width: 100%;
}

.table > thead > tr > th,
.table > thead > tr > td,
.table > tbody > tr > th,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
td.category, th.category,
tr.row-category td,
th.category label, td.category label {
    background: var(--sup-alt) !important;
    color: var(--txt-2) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    border: none !important;
    border-bottom: 1px solid var(--linea) !important;
    padding: 8px var(--esp-2) !important;
}

.table > tbody > tr > td,
.table-bordered > tbody > tr > td,
tr.row-1 td, tr.row-2 td,
tr.spacer td {
    background: var(--sup) !important;
    color: var(--txt-1) !important;
    border: none !important;
    border-top: 1px solid var(--linea-sutil) !important;
    padding: 6px var(--esp-2) !important;
    font-size: 13px !important;
    vertical-align: middle !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
    background: var(--sup) !important;
}

.table-hover > tbody > tr:hover > td,
.table > tbody > tr:hover > td,
tr.row-1:hover td, tr.row-2:hover td {
    background: var(--sup-alt) !important;
}

/* Formularios e Inputs */
.form-control, input[type="text"], input[type="password"], input[type="email"], input[type="search"], select, textarea {
    background: var(--sup) !important;
    border: 1px solid var(--linea) !important;
    color: var(--txt-1) !important;
    border-radius: var(--radio-s) !important;
    padding: 6px var(--esp-3) !important;
    font-size: 13px !important;
    box-shadow: none !important;
    transition: border-color .15s ease, outline .15s ease;
}

.form-control:focus, input:focus, select:focus, textarea:focus {
    border-color: var(--acento) !important;
    outline: 1px solid var(--acento) !important;
    box-shadow: none !important;
}

/* Botones */
.btn, .btn-group > .btn {
    border-radius: 9999px !important;
    font-family: var(--fuente) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 6px 16px !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transition: background-color .15s ease, filter .15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.btn-primary, .btn-primary:focus,
.btn-primary.btn-white, .btn-primary.btn-white:focus,
.btn.btn-primary, .btn.btn-primary:focus,
.btn.btn-primary.btn-white, .btn.btn-primary.btn-white:focus {
    background: var(--primario, #0052cc) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--primario, #0052cc) !important;
    text-shadow: none !important;
}
html.dark .btn-primary, html.dark .btn-primary:focus,
html.dark .btn-primary.btn-white, html.dark .btn-primary.btn-white:focus {
    background: var(--primario, #388bfd) !important;
    color: #FFFFFF !important;
    border-color: var(--primario, #388bfd) !important;
}
.btn-primary:hover,
.btn-primary.btn-white:hover,
.btn.btn-primary:hover,
.btn.btn-primary.btn-white:hover {
    background: var(--primario-hover, #0043a8) !important;
    border-color: var(--primario-hover, #0043a8) !important;
    color: #FFFFFF !important;
    filter: none !important;
}

.btn-success, .btn-success:focus,
.btn-success.btn-white, .btn-success.btn-white:focus,
.btn.btn-success.btn-white {
    background: #057a55 !important;
    color: #FFFFFF !important;
    border: 1px solid #057a55 !important;
    text-shadow: none !important;
}
.btn-success:hover,
.btn-success.btn-white:hover {
    background: #046c4e !important;
    border-color: #046c4e !important;
    color: #FFFFFF !important;
    filter: none !important;
}

.btn-default, .btn-secondary,
.btn-white:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info) {
    background: var(--sup-alt, #f3f4f6) !important;
    color: var(--txt-1, #1f2937) !important;
    border: 1px solid var(--linea, #e5e7eb) !important;
    text-shadow: none !important;
}
.btn-default:hover, .btn-secondary:hover,
.btn-white:not(.btn-primary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):hover {
    background: var(--linea, #e5e7eb) !important;
    color: var(--txt-1, #111827) !important;
}

.btn-danger, .btn-danger:focus,
.btn-danger.btn-white, .btn-danger.btn-white:focus,
.btn.btn-danger.btn-white {
    background: var(--error-fuerte, #e02424) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--error-fuerte, #e02424) !important;
    text-shadow: none !important;
}
.btn-danger:hover,
.btn-danger.btn-white:hover {
    background: #bc1c1c !important;
    border-color: #bc1c1c !important;
    color: #FFFFFF !important;
    filter: none !important;
}
html.dark .btn-danger {
    color: #ffffff !important;
}

.btn-warning {
    background: var(--aviso-sup) !important;
    color: var(--aviso) !important;
    border-color: transparent !important;
}

.btn-xs { min-height: 24px !important; padding: 2px 10px !important; font-size: 11px !important; }
.btn-sm { min-height: 32px !important; padding: 5px 14px !important; font-size: 12px !important; }
.btn-lg { min-height: 44px !important; padding: 10px 24px !important; font-size: 15px !important; }

/* Chips, Etiquetas y Badges */
.badge, .label {
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    text-shadow: none !important;
}

.badge-primary, .label-primary, .label-info, .badge-info {
    background: var(--acento-sup) !important;
    color: var(--acento-txt) !important;
}
html.dark .badge-primary, html.dark .label-primary, html.dark .label-info {
    color: var(--acento) !important;
}

.badge-success, .label-success {
    background: var(--ok-sup) !important;
    color: var(--ok) !important;
}

.badge-warning, .label-warning {
    background: var(--aviso-sup) !important;
    color: var(--aviso) !important;
}

.badge-danger, .label-danger {
    background: var(--error-sup) !important;
    color: var(--error) !important;
}

.badge-default, .label-default, .badge-grey, .label-grey {
    background: var(--sup-alt) !important;
    color: var(--txt-2) !important;
}

/* Alertas */
.alert {
    border-radius: var(--radio-s) !important;
    padding: var(--esp-2) var(--esp-3) !important;
    font-size: 13px !important;
    border: none !important;
    margin-bottom: var(--esp-3) !important;
}
.alert-success { background: var(--ok-sup) !important; color: var(--ok) !important; }
.alert-warning { background: var(--aviso-sup) !important; color: var(--aviso) !important; }
.alert-danger  { background: var(--error-sup) !important; color: var(--error) !important; }
.alert-info    { background: var(--acento-sup) !important; color: var(--acento-txt) !important; }

/* Breadcrumbs y Jump to Bug */
.breadcrumbs, #breadcrumbs {
    background: var(--sup) !important;
    border-bottom: 1px solid var(--linea) !important;
    color: var(--txt-2) !important;
    padding: 6px var(--esp-3) !important;
    min-height: 38px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.breadcrumb > li, .breadcrumb > li > a {
    color: var(--txt-2) !important;
    font-size: 12px !important;
}
.breadcrumb > li > a:hover {
    color: var(--acento) !important;
}

/* Dropdowns / Menús flotantes */
.dropdown-menu {
    background: var(--sup) !important;
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-s) !important;
    box-shadow: var(--sombra-2) !important;
    padding: 4px 0 !important;
    display: none;
}

.open > .dropdown-menu,
.dropdown.open > .dropdown-menu,
.btn-group.open > .dropdown-menu {
    display: block !important;
}

.dropdown-menu > li > a {
    color: var(--txt-1) !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
    display: flex !important;
    align-items: center !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background: var(--sup-alt) !important;
    color: var(--txt-1) !important;
}

.dropdown-menu .divider {
    background: var(--linea) !important;
    margin: 4px 0 !important;
    height: 1px !important;
}

/* Paginación */
.pagination > li > a, .pagination > li > span {
    background: var(--sup) !important;
    border: 1px solid var(--linea) !important;
    color: var(--txt-1) !important;
    font-size: 12px !important;
    padding: 5px 12px !important;
    margin: 0 2px !important;
    border-radius: var(--radio-s) !important;
}

.pagination > .active > a, .pagination > .active > span {
    background: var(--acento-sup) !important;
    border-color: transparent !important;
    color: var(--acento-txt) !important;
}
html.dark .pagination > .active > a {
    color: var(--acento) !important;
}

/* Pie de página */
.footer, .footer .footer-inner .footer-content {
    background: var(--fondo) !important;
    border-top: 1px solid var(--linea) !important;
    color: var(--txt-3) !important;
    padding: var(--esp-3) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   MODO OSCURO COMPLETO (html.dark)
   ══════════════════════════════════════════════════════════════════════════ */

html.dark {
    color-scheme: dark;
}

html.dark body,
html.dark .skin-3,
html.dark .login-layout,
html.dark .app,
html.dark .contenido,
html.dark .main,
html.dark .main-container,
html.dark .main-content,
html.dark .page-content {
    background-color: var(--fondo) !important;
    color: var(--txt-1) !important;
}

html.dark a {
    color: var(--acento);
}

html.dark .sidebar,
html.dark #sidebar,
html.dark .topbar,
html.dark #navbar,
html.dark .navbar,
html.dark .navbar-default {
    background-color: var(--sup) !important;
    border-color: var(--linea) !important;
    color: var(--txt-1) !important;
}

/* Cajas, Tarjetas y Paneles */
html.dark .widget-box,
html.dark .widget-body,
html.dark .widget-main,
html.dark .card,
html.dark .well,
html.dark .panel,
html.dark .panel-default,
html.dark .panel-body,
html.dark .modal-content,
html.dark .popover {
    background-color: var(--sup) !important;
    border-color: var(--linea) !important;
    color: var(--txt-1) !important;
}

html.dark .widget-header,
html.dark .card-cab,
html.dark .panel-heading,
html.dark .modal-header {
    background-color: var(--sup) !important;
    border-bottom: 1px solid var(--linea) !important;
    color: var(--txt-1) !important;
}

html.dark .widget-toolbox,
html.dark .card-pie,
html.dark .panel-footer,
html.dark .modal-footer {
    background-color: var(--sup-alt) !important;
    border-top: 1px solid var(--linea) !important;
    color: var(--txt-2) !important;
}

/* Tablas en Modo Oscuro */
html.dark table,
html.dark .table,
html.dark .table-bordered,
html.dark .table-striped,
html.dark .table-hover,
html.dark #buglist,
html.dark #filter,
html.dark #filter-box {
    background-color: var(--sup) !important;
    border-color: var(--linea) !important;
    color: var(--txt-1) !important;
}

html.dark table th,
html.dark .table th,
html.dark .table > thead > tr > th,
html.dark td.category,
html.dark th.category,
html.dark tr.row-category td,
html.dark th.category label,
html.dark td.category label {
    background-color: var(--sup-alt) !important;
    color: var(--txt-2) !important;
    border-color: var(--linea) !important;
}

html.dark table td,
html.dark .table td,
html.dark .table > tbody > tr > td,
html.dark tr.row-1 td,
html.dark tr.row-2 td,
html.dark tr.spacer td {
    background-color: var(--sup) !important;
    color: var(--txt-1) !important;
    border-color: var(--linea-sutil) !important;
}

html.dark .table-hover > tbody > tr:hover > td,
html.dark .table > tbody > tr:hover > td,
html.dark tr.row-1:hover td,
html.dark tr.row-2:hover td {
    background-color: var(--sup-alt) !important;
}

/* Actividad y Timeline en Modo Oscuro (Corrección de hover blanco en Dashboard) */
html.dark .profile-activity,
.profile-activity {
    border-bottom: 1px dotted var(--linea) !important;
    border-left: 1px dotted transparent !important;
    border-right: 1px dotted transparent !important;
    background-color: transparent !important;
    color: var(--txt-1) !important;
    transition: background-color var(--t-rapida);
}

html.dark .profile-activity:first-child,
.profile-activity:first-child {
    border-top: 1px dotted transparent !important;
}

html.dark .profile-activity:hover,
html.dark .profile-activity:first-child:hover,
.profile-activity:hover,
.profile-activity:first-child:hover,
html.dark #timeline .profile-activity:hover,
#timeline .profile-activity:hover {
    background-color: var(--sup-alt) !important;
    border-left: 1px dotted var(--linea) !important;
    border-right: 1px dotted var(--linea) !important;
    border-top-color: var(--linea) !important;
    border-bottom-color: var(--linea) !important;
    color: var(--txt-1) !important;
}

html.dark .profile-activity .time,
.profile-activity .time {
    border-top-color: var(--linea) !important;
    color: var(--txt-3) !important;
}

html.dark .profile-activity a,
.profile-activity a {
    color: var(--acento) !important;
}

html.dark .profile-activity a:hover,
.profile-activity a:hover {
    color: var(--acento-hover) !important;
}

html.dark .profile-activity a.user,
.profile-activity a.user {
    color: var(--primario) !important;
    font-weight: 600;
}

/* Listas generales en hover en modo oscuro */
html.dark .item-list > li {
    background-color: var(--sup) !important;
    border-color: var(--linea) !important;
    color: var(--txt-1) !important;
}

html.dark .item-list > li:hover {
    background-color: var(--sup-alt) !important;
}

/* Formularios y Selectores en Modo Oscuro */
html.dark .form-control,
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="search"],
html.dark select,
html.dark textarea {
    background-color: var(--sup-alt) !important;
    border-color: var(--linea) !important;
    color: var(--txt-1) !important;
    color-scheme: dark;
}

html.dark select option {
    background-color: #1E1F20 !important;
    color: #E3E3E3 !important;
}

html.dark .form-control:focus,
html.dark input:focus,
html.dark select:focus,
html.dark textarea:focus {
    border-color: var(--acento) !important;
    outline: 1px solid var(--acento) !important;
}

/* Estados y Colores de Incidencias en Modo Oscuro (Armonizados) */
html.dark tr.status-10-color td, html.dark .status-10-bg, html.dark .status-new-bg {
    background-color: rgba(242, 184, 181, 0.12) !important;
    color: #F2B8B5 !important;
}
html.dark tr.status-20-color td, html.dark .status-20-bg, html.dark .status-feedback-bg {
    background-color: rgba(245, 197, 24, 0.12) !important;
    color: #F5C518 !important;
}
html.dark tr.status-30-color td, html.dark .status-30-bg, html.dark .status-acknowledged-bg {
    background-color: rgba(168, 199, 250, 0.12) !important;
    color: #A8C7FA !important;
}
html.dark tr.status-40-color td, html.dark .status-40-bg, html.dark .status-confirmed-bg {
    background-color: rgba(168, 199, 250, 0.16) !important;
    color: #A8C7FA !important;
}
html.dark tr.status-50-color td, html.dark .status-50-bg, html.dark .status-assigned-bg {
    background-color: rgba(168, 199, 250, 0.20) !important;
    color: #A8C7FA !important;
}
html.dark tr.status-80-color td, html.dark .status-80-bg, html.dark .status-resolved-bg {
    background-color: rgba(109, 213, 140, 0.12) !important;
    color: #6DD58C !important;
}
html.dark tr.status-90-color td, html.dark .status-90-bg, html.dark .status-closed-bg {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #9AA0A6 !important;
}

/* Notas / Comentarios en Incidencias */
html.dark tr.bugnote .bugnote-note,
html.dark .bugnote-public,
html.dark .bugnote-note {
    background-color: var(--sup) !important;
    color: var(--txt-1) !important;
    border-color: var(--linea) !important;
}

html.dark .bugnote-private {
    background-color: rgba(245, 197, 24, 0.08) !important;
    color: var(--txt-1) !important;
    border-color: var(--aviso) !important;
}

/* Perfil e Info */
html.dark .profile-user-info {
    border-color: var(--linea) !important;
}
html.dark .profile-info-name {
    background-color: var(--sup-alt) !important;
    color: var(--txt-2) !important;
    border-color: var(--linea) !important;
}
html.dark .profile-info-value {
    background-color: var(--sup) !important;
    color: var(--txt-1) !important;
    border-color: var(--linea) !important;
}
html.dark .infobox {
    background-color: var(--sup) !important;
    border-color: var(--linea) !important;
    color: var(--txt-1) !important;
}

/* Breadcrumbs y Footer */
html.dark .breadcrumbs,
html.dark #breadcrumbs {
    background-color: var(--sup) !important;
    border-color: var(--linea) !important;
    color: var(--txt-2) !important;
}

.footer,
.footer-inner,
.footer-content {
    background-color: transparent !important;
    border: none !important;
    padding: 0 !important;
}

.footer:empty,
.footer-content:empty {
    display: none !important;
}

/* Ocultar botón flotante molesto del pie */
.btn-scroll-up,
#btn-scroll-up {
    display: none !important;
}

html.dark .footer,
html.dark .footer-content {
    background-color: transparent !important;
    border: none !important;
    color: var(--txt-3) !important;
}

/* Dropdowns en Modo Oscuro */
html.dark .dropdown-menu {
    background-color: var(--sup) !important;
    border-color: var(--linea) !important;
}
html.dark .dropdown-menu > li > a {
    color: var(--txt-1) !important;
}
html.dark .dropdown-menu > li > a:hover {
    background-color: var(--sup-alt) !important;
    color: var(--txt-1) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Protección y Tipografía de Iconos FontAwesome / Ace
   ══════════════════════════════════════════════════════════════════════════ */
.fa, [class*="fa-"], [class^="fa-"], .ace-icon, i.fa, span.fa, i.ace-icon, span.ace-icon, .nav-icono > .fa {
    font-family: FontAwesome, 'FontAwesome' !important;
    font-style: normal !important;
    font-weight: normal !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block;
}

.nav-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    width: 20px;
    height: 20px;
    text-align: center;
    flex-shrink: 0;
    line-height: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pestañas de Navegación (.nav-tabs / .tab-content) estilo Core AI
   ══════════════════════════════════════════════════════════════════════════ */
.nav-tabs,
.nav.nav-tabs,
.nav-tabs.padding-18,
.nav-tabs.padding-12,
.nav-tabs.padding-16,
div.nav-tabs {
    border-bottom: 1px solid var(--linea) !important;
    background: transparent !important;
    margin-bottom: var(--esp-3) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    gap: 4px;
    display: flex !important;
    flex-wrap: wrap !important;
}

.nav-tabs > li,
.nav.nav-tabs > li,
.nav-tabs.padding-18 > li,
.nav-tabs.padding-12 > li,
.nav-tabs.padding-16 > li {
    margin-bottom: -1px !important;
    float: none !important;
    display: inline-block !important;
    background: transparent !important;
}

.nav-tabs > li > a,
.nav.nav-tabs > li > a,
.nav-tabs.padding-18 > li > a,
.nav-tabs.padding-12 > li > a,
.nav-tabs.padding-16 > li > a,
.nav-tabs > li > a:focus {
    background: var(--sup) !important;
    background-color: var(--sup) !important;
    color: var(--txt-2) !important;
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-s) var(--radio-s) 0 0 !important;
    margin-right: 2px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: all var(--t-rapida);
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
}

.nav-tabs > li > a:hover,
.nav.nav-tabs > li > a:hover {
    background: var(--sup-alt) !important;
    background-color: var(--sup-alt) !important;
    color: var(--txt-1) !important;
    border-color: var(--linea-fuerte) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus,
.nav.nav-tabs > li.active > a,
.nav.nav-tabs > li.active > a:hover,
.nav.nav-tabs > li.active > a:focus,
.nav-tabs.padding-18 > li.active > a,
.nav-tabs.padding-18 > li.active > a:hover,
.nav-tabs.padding-18 > li.active > a:focus {
    background: var(--sup-alt) !important;
    background-color: var(--sup-alt) !important;
    color: var(--primario) !important;
    border: 1px solid var(--linea) !important;
    border-bottom: 2px solid var(--primario) !important;
    border-top: 2px solid var(--primario) !important;
    font-weight: 600 !important;
    cursor: default;
    box-shadow: none !important;
}

/* Modo oscuro explícito para tabs */
html.dark .nav-tabs,
html.dark .nav.nav-tabs,
html.dark .nav-tabs.padding-18,
html.dark .nav-tabs.padding-12,
html.dark .nav-tabs.padding-16 {
    border-bottom-color: var(--linea) !important;
    background: transparent !important;
}

html.dark .nav-tabs > li,
html.dark .nav.nav-tabs > li,
html.dark .nav-tabs.padding-18 > li {
    background: transparent !important;
}

html.dark .nav-tabs > li > a,
html.dark .nav.nav-tabs > li > a,
html.dark .nav-tabs.padding-18 > li > a,
html.dark .nav-tabs.padding-12 > li > a,
html.dark .nav-tabs.padding-16 > li > a,
html.dark .nav-tabs > li > a:focus {
    background: var(--sup) !important;
    background-color: var(--sup) !important;
    color: var(--txt-2) !important;
    border-color: var(--linea) !important;
}

html.dark .nav-tabs > li > a:hover,
html.dark .nav.nav-tabs > li > a:hover {
    background: var(--sup-alt) !important;
    background-color: var(--sup-alt) !important;
    color: var(--txt-1) !important;
    border-color: var(--linea-fuerte) !important;
}

html.dark .nav-tabs > li.active > a,
html.dark .nav-tabs > li.active > a:hover,
html.dark .nav-tabs > li.active > a:focus,
html.dark .nav.nav-tabs > li.active > a,
html.dark .nav.nav-tabs > li.active > a:hover,
html.dark .nav.nav-tabs > li.active > a:focus,
html.dark .nav-tabs.padding-18 > li.active > a,
html.dark .nav-tabs.padding-18 > li.active > a:hover,
html.dark .nav-tabs.padding-18 > li.active > a:focus {
    background: var(--sup-alt) !important;
    background-color: var(--sup-alt) !important;
    color: var(--txt-1) !important;
    border-color: var(--linea) !important;
    border-bottom: 2px solid var(--primario) !important;
    border-top: 2px solid var(--primario) !important;
}

/* Contenido de pestañas */
.tab-content {
    background-color: var(--sup) !important;
    border: 1px solid var(--linea) !important;
    border-top: none !important;
    border-radius: 0 0 var(--radio-m) var(--radio-m) !important;
    padding: var(--esp-3) !important;
    color: var(--txt-1) !important;
}

html.dark .tab-content {
    background-color: var(--sup) !important;
    border-color: var(--linea) !important;
    color: var(--txt-1) !important;
}

/* Botones de submenú tipo pill */
.nav-pills > li > a,
.manage-menu .btn-group > .btn.btn-white.btn-primary {
    background-color: var(--sup-alt) !important;
    border: 1px solid var(--linea) !important;
    color: var(--txt-2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: var(--radio-s) !important;
    box-shadow: none !important;
}

.nav-pills > li > a:hover,
.manage-menu .btn-group > .btn.btn-white.btn-primary:hover {
    background-color: var(--linea) !important;
    color: var(--txt-1) !important;
}

.nav-pills > li.active > a,
.manage-menu .btn-group > .btn.btn-white.btn-primary.active {
    background-color: var(--primario-sutil) !important;
    border-color: var(--primario) !important;
    color: var(--primario) !important;
    font-weight: 600 !important;
}

/* Barra de acciones de incidencia (bug_view_action_buttons) */
tfoot td .btn-group,
.bug-action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
}
tfoot td .btn-group > .pull-left {
    float: none !important;
    padding-right: 0 !important;
    margin: 0 !important;
}
tfoot td .btn-group form {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
}
tfoot td .btn-group select {
    margin-left: 4px !important;
    border-radius: var(--radio-s) !important;
    border: 1px solid var(--linea) !important;
    background-color: var(--sup-alt) !important;
    color: var(--txt-1) !important;
    height: 32px !important;
    font-size: 12px !important;
    padding: 2px 8px !important;
}

/* ==========================================================================
   DISEÑO COMPACTO Y SIN SCROLL PARA REPORTAR INCIDENCIA (BUG REPORT)
   ========================================================================== */
.report-grid-layout {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 14px;
    align-items: stretch;
    margin-top: 6px;
}

@media (max-width: 991px) {
    .report-grid-layout {
        grid-template-columns: 1fr;
    }
}

.report-card {
    background: var(--sup);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    padding: 12px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--linea);
    padding-bottom: 8px;
    margin-bottom: 10px;
}

.report-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--txt-1);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.report-field {
    margin-bottom: 8px;
}

.report-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--txt-2);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 3px;
}

.report-label.required, .report-label .required {
    color: var(--error);
}

.report-input, .report-select, .report-textarea {
    width: 100%;
    padding: 5px 9px;
    font-size: 12.5px;
    border: 1px solid var(--linea);
    border-radius: var(--radio-s);
    background: var(--sup-alt);
    color: var(--txt-1);
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.report-input:focus, .report-select:focus, .report-textarea:focus {
    border-color: var(--primario);
    box-shadow: 0 0 0 2px var(--primario-sutil);
    outline: none;
}

.report-input-lg {
    font-size: 13.5px;
    font-weight: 500;
    padding: 7px 11px;
}

.report-textarea {
    resize: vertical;
    min-height: 60px;
    height: 68px;
    line-height: 1.35;
    font-family: inherit;
}

.report-textarea-sm {
    min-height: 42px;
    height: 46px;
}

.report-extra-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.report-side-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 10px;
}

.report-field-full {
    grid-column: 1 / -1;
}

.report-radios {
    display: flex;
    gap: 8px;
}

.radio-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: var(--sup-alt);
    border: 1px solid var(--linea);
    border-radius: 9999px;
    cursor: pointer;
    font-size: 12px;
    color: var(--txt-2);
    transition: all 0.15s ease;
    user-select: none;
}

.radio-chip input[type="radio"] {
    margin: 0;
    accent-color: var(--primario);
}

.radio-chip:hover {
    border-color: var(--primario);
    color: var(--txt-1);
}

.report-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sup);
    border: 1px solid var(--linea);
    border-radius: var(--radio-m);
    padding: 8px 16px;
    margin-top: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.report-stay-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: var(--txt-2);
    cursor: pointer;
    margin: 0;
}

.report-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-dropzone-wrap .dropzone,
.dropzone {
    min-height: 52px !important;
    padding: 8px 14px !important;
    border: 1.5px dashed var(--linea) !important;
    border-radius: var(--radio-s) !important;
    background: var(--sup-alt) !important;
}

.report-dropzone-wrap .dz-message,
.dropzone .dz-message {
    margin: 6px 0 !important;
    font-size: 12.5px !important;
    color: var(--txt-2) !important;
}

.dropzone .dz-message .ace-icon {
    font-size: 26px !important;
    margin-bottom: 4px;
}

/* Ocultar barra secundaria duplicada de breadcrumbs */
.breadcrumbs,
#breadcrumbs {
    display: none !important;
}

/* Botones de acción de incidencia en topbar */
.topbar-issue-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.topbar-issue-actions .app-btn-ghost {
    border-radius: 9999px !important;
    padding: 3px 10px !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    line-height: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: var(--sup) !important;
    border: 1px solid var(--linea) !important;
}

.topbar-issue-actions .app-btn-ghost:hover {
    background: var(--linea) !important;
}

/* Espaciado de la tabla de detalles de incidencias */
.view-issue-page table.table-bordered {
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-m) !important;
    margin-bottom: 0 !important;
}

.view-issue-page table.table-bordered > tbody > tr > th.category,
.view-issue-page table.table-bordered > thead > tr > th.category {
    padding: 6px 12px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    width: 14% !important;
    background: var(--sup-alt) !important;
    color: var(--txt-2) !important;
}

.view-issue-page table.table-bordered > tbody > tr > td {
    padding: 6px 14px !important;
    font-size: 13px !important;
    background: var(--sup) !important;
    color: var(--txt-1) !important;
    vertical-align: middle !important;
}

.view-issue-page .bug-description,
.view-issue-page .bug-steps-to-reproduce,
.view-issue-page .bug-additional-information {
    padding: 12px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.6 !important;
    color: var(--txt-1) !important;
}

.view-issue-page .top-buttons td,
.view-issue-page tr.top-buttons td {
    padding: 8px 12px !important;
    background: var(--sup-alt) !important;
}

.view-issue-page .btn-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

.view-issue-page .btn-group > .pull-left,
.view-issue-page .btn-group > .pull-right {
    padding: 0 !important;
    margin: 0 !important;
}

/* Pestañas de detalle de incidencia (Añadir nota / Historial) */
.issue-tabs-wrapper .nav-tabs {
    border-bottom: 1px solid var(--linea) !important;
    display: flex !important;
    gap: 6px !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
}

.issue-tabs-wrapper .nav-tabs > li {
    margin-bottom: -1px !important;
}

.issue-tabs-wrapper .nav-tabs > li > a {
    background: var(--sup) !important;
    border: 1px solid var(--linea) !important;
    border-bottom-color: transparent !important;
    border-radius: var(--radio-s) var(--radio-s) 0 0 !important;
    color: var(--txt-2) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-right: 0 !important;
    transition: all 0.2s ease !important;
}

.issue-tabs-wrapper .nav-tabs > li > a:hover {
    background: var(--sup-alt) !important;
    color: var(--txt-1) !important;
}

.issue-tabs-wrapper .nav-tabs > li.active > a,
.issue-tabs-wrapper .nav-tabs > li.active > a:hover,
.issue-tabs-wrapper .nav-tabs > li.active > a:focus {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.issue-tabs-wrapper .nav-tabs > li.active > a i,
.issue-tabs-wrapper .nav-tabs > li.active > a span {
    color: #ffffff !important;
}

.issue-tab-content {
    background: transparent !important;
    border: none !important;
    padding: 10px 0 0 0 !important;
}

.issue-tabs-wrapper .widget-box {
    margin: 0 !important;
}

/* Pestañas de detalle de incidencia (Detalles / Historial) unidas sin separación */
.issue-details-tabs.nav-tabs,
html.dark .issue-details-tabs.nav-tabs,
div.issue-details-tabs.nav-tabs {
    display: inline-flex !important;
    gap: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-bottom: none !important;
    background: transparent !important;
    border: none !important;
}

.issue-details-tabs.nav-tabs > li,
html.dark .issue-details-tabs.nav-tabs > li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: inline-block !important;
    background: transparent !important;
}

.issue-details-tabs.nav-tabs > li > a,
html.dark .issue-details-tabs.nav-tabs > li > a {
    margin: 0 !important;
    margin-right: 0 !important;
    border: 1px solid var(--linea) !important;
    border-radius: 0 !important;
    padding: 8px 18px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: var(--sup) !important;
    color: var(--txt-2) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

.issue-details-tabs.nav-tabs > li:first-child > a,
html.dark .issue-details-tabs.nav-tabs > li:first-child > a {
    border-top-left-radius: var(--radio-s) !important;
    border-bottom-left-radius: 0 !important;
}

.issue-details-tabs.nav-tabs > li:last-child > a,
html.dark .issue-details-tabs.nav-tabs > li:last-child > a {
    border-top-right-radius: var(--radio-s) !important;
    border-bottom-right-radius: 0 !important;
    margin-left: -1px !important;
}

.issue-details-tabs.nav-tabs > li > a:hover,
html.dark .issue-details-tabs.nav-tabs > li > a:hover {
    background: var(--sup-alt) !important;
    color: var(--txt-1) !important;
    border-color: var(--linea-fuerte) !important;
}

.issue-details-tabs.nav-tabs > li.active > a,
.issue-details-tabs.nav-tabs > li.active > a:hover,
.issue-details-tabs.nav-tabs > li.active > a:focus,
html.dark .issue-details-tabs.nav-tabs > li.active > a,
html.dark .issue-details-tabs.nav-tabs > li.active > a:hover,
html.dark .issue-details-tabs.nav-tabs > li.active > a:focus {
    background: var(--sup-alt) !important;
    background-color: var(--sup-alt) !important;
    color: var(--txt-1) !important;
    font-weight: 600 !important;
    border-color: var(--linea) !important;
}

/* Dejar solo 1 cuadro: se elimina el recuadro/borde/padding de tab-content */
.issue-details-col .issue-details-tab-content,
html.dark .issue-details-col .issue-details-tab-content,
.issue-details-tab-content {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.issue-details-col .issue-details-tab-content .tab-pane,
.issue-details-tab-content .tab-pane {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* 2-Column Split Layout for Issue View */
.issue-view-split-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

.issue-details-col {
    display: flex !important;
    flex-direction: column !important;
}

.issue-attachments-col {
    display: flex !important;
    flex-direction: column !important;
}

.issue-attachments-card {
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-m) !important;
    background: var(--sup) !important;
    box-shadow: var(--sombra-s) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.issue-attachments-card .widget-header {
    background: var(--sup-alt) !important;
    border-bottom: 1px solid var(--linea) !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

.issue-attachments-card .widget-header:before,
.issue-attachments-card .widget-header:after {
    display: none !important;
}

.issue-attachments-card .widget-header .widget-title {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--txt-1) !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

.issue-attachments-card .widget-header .badge {
    font-size: 10px !important;
    padding: 1px 6px !important;
    line-height: 14px !important;
    height: 16px !important;
    border-radius: 8px !important;
    margin: 0 !important;
}

.issue-attachments-card .widget-header .btn-upload-file {
    padding: 1px 8px !important;
    font-size: 11px !important;
    line-height: 18px !important;
    height: 22px !important;
    border-radius: var(--radio-s) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin: 0 !important;
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: #ffffff !important;
}

.issue-attachments-card .widget-header .btn-upload-file:hover {
    filter: brightness(1.1) !important;
}

.issue-attachments-card.dragover-highlight {
    border-color: var(--color-primario) !important;
    box-shadow: 0 0 0 2px rgba(56, 130, 246, 0.35) !important;
}

.issue-attachments-empty-dropzone:hover {
    border-color: var(--color-primario) !important;
    background: rgba(56, 130, 246, 0.06) !important;
}

.issue-attachments-add-more:hover {
    border-color: var(--color-primario) !important;
    color: var(--color-primario) !important;
}

.issue-attachments-card .widget-body {
    background: var(--sup) !important;
    flex: 1 !important;
}

.issue-attachments-card .well,
.issue-attachment-item {
    background: var(--sup-alt) !important;
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-s) !important;
    padding: 8px 10px !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    color: var(--txt-1) !important;
    font-size: 12.5px !important;
    word-break: break-all !important;
}

.issue-attachments-card .well a,
.issue-attachment-item a {
    color: var(--acento) !important;
    font-weight: 500 !important;
}

.issue-attachments-card .well img,
.issue-attachment-item img,
.issue-attachment-item .bug-attachment-preview-image img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: var(--radio-s) !important;
    margin-top: 6px !important;
    border: 1px solid var(--linea) !important;
    display: block !important;
}

.issue-attachment-item .bug-attachment-preview-image {
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
}

/* Modal de confirmación para eliminar adjunto (sin cambiar de pantalla) */
#delete-attachment-modal .modal-dialog {
    max-width: 440px !important;
    margin: 15vh auto !important;
}

#delete-attachment-modal .modal-content {
    background: var(--sup) !important;
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-m) !important;
    color: var(--txt-1) !important;
    box-shadow: var(--sombra-l) !important;
    overflow: hidden !important;
}

#delete-attachment-modal .modal-header {
    background: var(--sup-alt) !important;
    border-bottom: 1px solid var(--linea) !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#delete-attachment-modal .modal-body {
    padding: 20px 18px !important;
    font-size: 13.5px !important;
    color: var(--txt-2) !important;
    line-height: 1.5 !important;
}

#delete-attachment-modal .modal-footer {
    background: var(--sup-alt) !important;
    border-top: 1px solid var(--linea) !important;
    padding: 12px 18px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

/* Pantallas de confirmación fallback (helper_ensure_confirmed) */
html.dark .alert.alert-warning.center,
.alert.alert-warning.center {
    max-width: 560px !important;
    margin: 60px auto !important;
    background: var(--sup) !important;
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-m) !important;
    color: var(--txt-1) !important;
    box-shadow: var(--sombra-m) !important;
    padding: 28px !important;
    float: none !important;
}

/* Columna Tiempo Dedicado */
th.column-time-tracking,
td.column-time-tracking {
    text-align: center !important;
    white-space: nowrap !important;
    width: 95px !important;
}

td.column-time-tracking .badge {
    font-size: 11px !important;
    font-family: monospace !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: var(--radio-s) !important;
    background: var(--acento-sup) !important;
    color: var(--acento-txt) !important;
    border: 1px solid rgba(56, 130, 246, 0.25) !important;
}

html.dark td.column-time-tracking .badge {
    background: rgba(56, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(56, 130, 246, 0.3) !important;
}

/* Tabla de incidencias buglist */
#bug_action .widget-box {
    border: 1px solid var(--linea) !important;
    border-radius: var(--radio-m) !important;
    overflow: hidden !important;
    box-shadow: var(--sombra-s) !important;
    margin-top: 12px !important;
}

#bug_action .widget-box > .widget-main {
    border: none !important;
    border-radius: inherit !important;
    padding: 0 !important;
}

#bug_action #buglist thead tr.buglist-headers th {
    border-top: none !important;
}

/* Botón Compartir en la barra superior */
#btn-share-issue {
    border-color: var(--color-primario, #3882f6) !important;
    color: var(--color-primario, #3882f6) !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

#btn-share-issue:hover {
    background: var(--color-primario, #3882f6) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(56, 130, 246, 0.4) !important;
}

/* Columna de compartir en la tabla de incidencias */
th.column-share,
td.column-share {
    text-align: center !important;
    width: 38px !important;
    padding: 6px 4px !important;
}

.btn-open-share-modal {
    opacity: 0.75 !important;
    transition: all 0.2s ease !important;
}

.btn-open-share-modal:hover {
    opacity: 1 !important;
    transform: scale(1.15) !important;
    color: var(--color-primario, #3882f6) !important;
}