/* ==========================================================================
   SupervisIA · sistema de diseño "neón tecnológico"
   Oscuro por defecto: fondo profundo con cuadrícula, paneles de vidrio y acentos
   neón (cian, violeta, magenta). El tema claro conserva los mismos acentos.
   ========================================================================== */
:root,
[data-bs-theme="dark"] {
  --fondo: #05070f;
  --fondo-2: #0a0e1c;
  --superficie: rgba(16, 22, 42, .72);
  --superficie-solida: #0e1428;
  --superficie-2: rgba(255, 255, 255, .035);
  --borde: rgba(120, 160, 255, .14);
  --borde-fuerte: rgba(120, 160, 255, .26);
  --tinta: #e8edff;
  --tinta-suave: #9aa6c7;
  --tinta-tenue: #6a76a0;
  --cian: #22e6ff;
  --violeta: #8b5cff;
  --magenta: #ff3df2;
  --primario: #22e6ff;
  --primario-hover: #6ff0ff;
  --primario-suave: rgba(34, 230, 255, .1);
  --sobre-primario: #031018;
  --exito: #2dffa8;      --exito-suave: rgba(45, 255, 168, .1);
  --alerta: #ffc53d;     --alerta-suave: rgba(255, 197, 61, .1);
  --peligro: #ff4d7d;    --peligro-suave: rgba(255, 77, 125, .12);
  --info: #6aa8ff;       --info-suave: rgba(106, 168, 255, .12);
  --brillo: 0 0 0 1px rgba(34, 230, 255, .35), 0 0 18px rgba(34, 230, 255, .35), 0 0 42px rgba(139, 92, 255, .18);
  --brillo-suave: 0 0 24px rgba(34, 230, 255, .12);
  --sombra-1: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 10px 30px -18px rgba(0, 0, 0, .9);
  --sombra-2: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 20px 50px -20px rgba(0, 0, 0, .95);
  --codigo: rgba(0, 0, 0, .35);
  --degradado: linear-gradient(120deg, var(--cian), var(--violeta) 55%, var(--magenta));
  --cuadricula: rgba(90, 130, 255, .07);

  --bs-body-bg: var(--fondo);
  --bs-body-color: var(--tinta);
  --bs-secondary-color: var(--tinta-suave);
  --bs-border-color: var(--borde);
  --bs-tertiary-bg: var(--superficie-2);
  --bs-emphasis-color: #fff;
  --bs-primary: var(--primario);
  --bs-primary-rgb: 34, 230, 255;
  --bs-link-color: var(--primario);
  --bs-link-color-rgb: 34, 230, 255;
  --bs-link-hover-color: var(--primario-hover);
  --bs-link-hover-color-rgb: 111, 240, 255;
  --bs-focus-ring-color: rgba(34, 230, 255, .3);
  --bs-dropdown-bg: var(--superficie-solida);
  color-scheme: dark;
}

[data-bs-theme="light"] {
  --fondo: #eef2fb;
  --fondo-2: #e6ebf8;
  --superficie: rgba(255, 255, 255, .82);
  --superficie-solida: #ffffff;
  --superficie-2: rgba(30, 50, 120, .04);
  --borde: rgba(40, 70, 160, .13);
  --borde-fuerte: rgba(40, 70, 160, .24);
  --tinta: #0d1430;
  --tinta-suave: #4b5880;
  --tinta-tenue: #7883a6;
  --cian: #009fc2;
  --violeta: #6a3df5;
  --magenta: #d61fc7;
  --primario: #5b3df5;
  --primario-hover: #4a2ee0;
  --primario-suave: rgba(91, 61, 245, .09);
  --sobre-primario: #ffffff;
  --exito: #0a9b63;      --exito-suave: rgba(10, 155, 99, .1);
  --alerta: #b37400;     --alerta-suave: rgba(179, 116, 0, .1);
  --peligro: #d81b54;    --peligro-suave: rgba(216, 27, 84, .09);
  --info: #1f6fd8;       --info-suave: rgba(31, 111, 216, .1);
  --brillo: 0 0 0 1px rgba(91, 61, 245, .35), 0 8px 24px -8px rgba(91, 61, 245, .55);
  --brillo-suave: 0 10px 30px -18px rgba(91, 61, 245, .35);
  --sombra-1: 0 1px 2px rgba(20, 30, 80, .05), 0 8px 24px -16px rgba(20, 30, 80, .18);
  --sombra-2: 0 2px 4px rgba(20, 30, 80, .06), 0 18px 40px -18px rgba(20, 30, 80, .3);
  --codigo: rgba(30, 50, 120, .05);
  --degradado: linear-gradient(120deg, var(--cian), var(--violeta) 55%, var(--magenta));
  --cuadricula: rgba(60, 90, 200, .07);

  --bs-body-bg: var(--fondo);
  --bs-body-color: var(--tinta);
  --bs-secondary-color: var(--tinta-suave);
  --bs-border-color: var(--borde);
  --bs-tertiary-bg: var(--superficie-2);
  --bs-primary: var(--primario);
  --bs-primary-rgb: 91, 61, 245;
  --bs-link-color: var(--primario);
  --bs-link-color-rgb: 91, 61, 245;
  --bs-link-hover-color: var(--primario-hover);
  --bs-link-hover-color-rgb: 74, 46, 224;
  --bs-focus-ring-color: rgba(91, 61, 245, .25);
  --bs-dropdown-bg: #fff;
  color-scheme: light;
}

/* --- Base ---------------------------------------------------------------- */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: .925rem;
  color: var(--tinta);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  background:
    radial-gradient(1100px 600px at 85% -10%, color-mix(in srgb, var(--violeta) 18%, transparent), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, color-mix(in srgb, var(--cian) 12%, transparent), transparent 60%),
    linear-gradient(var(--cuadricula) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--cuadricula) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--fondo);
  background-attachment: fixed;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .titulo-pagina, .marca {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif; letter-spacing: -.015em; font-weight: 600;
}
.mono, .num, code, pre { font-family: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace; }
.min-w-0 { min-width: 0; }
.text-secondary, .text-body-secondary { color: var(--tinta-suave) !important; }
.texto-degradado { background: var(--degradado); -webkit-background-clip: text; background-clip: text; color: transparent; }
::selection { background: color-mix(in srgb, var(--primario) 35%, transparent); color: var(--tinta); }
code { color: var(--cian); font-size: .85em; }
a { text-underline-offset: 3px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--borde-fuerte); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* --- Menú lateral ---------------------------------------------------------- */
:root { --ancho-menu: 252px; }
.menu {
  --bs-offcanvas-width: var(--ancho-menu);
  --bs-offcanvas-bg: #060914;
  background: linear-gradient(180deg, rgba(10, 14, 32, .96), rgba(5, 7, 16, .98));
  border-right: 1px solid rgba(120, 160, 255, .12);
  color: #c4cdea;
  display: flex;
  flex-direction: column;
}
.menu::before {
  content: ""; position: absolute; top: 0; bottom: 0; right: -1px; width: 1px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(34, 230, 255, .6), rgba(139, 92, 255, .5), transparent);
}
@media (min-width: 992px) {
  .menu { position: fixed; inset: 0 auto 0 0; width: var(--ancho-menu); z-index: 1030; }
  .con-menu .principal { margin-left: var(--ancho-menu); }
}
.menu-marca { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.15rem 1rem; }
.marca { display: flex; align-items: center; gap: .65rem; color: #fff; font-weight: 700; font-size: 1.12rem; text-decoration: none; }
.marca:hover { color: #fff; }
.marca .ia { background: linear-gradient(120deg, #22e6ff, #ff3df2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.marca-logo {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: #0b1026; color: #22e6ff; font-size: 1.05rem;
  box-shadow: 0 0 0 1px rgba(34, 230, 255, .5), 0 0 16px rgba(34, 230, 255, .45), inset 0 0 12px rgba(139, 92, 255, .35);
}
.menu-nav { flex: 1; overflow-y: auto; padding: .25rem .75rem; display: flex; flex-direction: column; gap: 3px; }
.menu-seccion { font-family: "JetBrains Mono", monospace; font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: #5d6a94; padding: 1.1rem .7rem .4rem; }
.menu-item {
  position: relative; display: flex; align-items: center; gap: .75rem; padding: .58rem .7rem; border-radius: 10px;
  color: #aab5d6; text-decoration: none; font-weight: 500; transition: background .2s, color .2s, box-shadow .2s;
}
.menu-item i { font-size: 1.05rem; opacity: .8; transition: color .2s, text-shadow .2s; }
.menu-item:hover { background: rgba(120, 160, 255, .07); color: #fff; }
.menu-item:hover i { color: #22e6ff; opacity: 1; }
.menu-item.activo {
  color: #fff;
  background: linear-gradient(90deg, rgba(34, 230, 255, .16), rgba(139, 92, 255, .08) 70%, transparent);
  box-shadow: inset 0 0 0 1px rgba(34, 230, 255, .22);
}
.menu-item.activo::before {
  content: ""; position: absolute; left: -.75rem; top: 20%; bottom: 20%; width: 3px; border-radius: 0 3px 3px 0;
  background: #22e6ff; box-shadow: 0 0 12px #22e6ff, 0 0 24px rgba(34, 230, 255, .6);
}
.menu-item.activo i { color: #22e6ff; opacity: 1; text-shadow: 0 0 10px rgba(34, 230, 255, .8); }
.menu-pie { padding: .8rem; border-top: 1px solid rgba(120, 160, 255, .1); display: flex; flex-direction: column; gap: .5rem; }
.ia-estado {
  display: flex; align-items: center; gap: .65rem; padding: .55rem .7rem; border-radius: 10px;
  background: rgba(120, 160, 255, .05); border: 1px solid rgba(120, 160, 255, .1);
  color: #dbe2f7; text-decoration: none; font-size: .8rem; line-height: 1.25;
}
.ia-estado:hover { border-color: rgba(34, 230, 255, .35); color: #fff; }
.ia-estado small, .usuario small { display: block; color: #7380a8; font-size: .7rem; font-family: "JetBrains Mono", monospace; }
.ia-estado .punto { width: 8px; height: 8px; border-radius: 50%; background: #2dffa8; box-shadow: 0 0 10px #2dffa8; flex: none; animation: latido 2.4s ease-in-out infinite; }
.ia-estado.sin-key .punto { background: #ff4d7d; box-shadow: 0 0 10px #ff4d7d; }
@keyframes latido { 50% { opacity: .45; } }
.usuario {
  display: flex; align-items: center; gap: .65rem; width: 100%; padding: .45rem .5rem; border: 0; border-radius: 10px;
  background: transparent; color: #e8edff; font-size: .85rem; line-height: 1.25;
}
.usuario:hover { background: rgba(120, 160, 255, .07); }
.avatar {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none;
  background: linear-gradient(135deg, rgba(34, 230, 255, .25), rgba(255, 61, 242, .25));
  border: 1px solid rgba(34, 230, 255, .35); color: #fff; font-weight: 600; font-size: .78rem;
}
.dropdown-menu {
  --bs-dropdown-border-color: var(--borde-fuerte); --bs-dropdown-link-color: var(--tinta);
  --bs-dropdown-link-hover-bg: var(--primario-suave); --bs-dropdown-link-hover-color: var(--tinta);
  --bs-dropdown-border-radius: 12px; backdrop-filter: blur(14px); box-shadow: var(--sombra-2);
}
.selector-tema .btn.active { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); box-shadow: var(--brillo-suave); }

/* --- Barra superior y contenido ------------------------------------------- */
.barra-superior {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: 1rem; padding: 1rem 2rem;
  background: color-mix(in srgb, var(--fondo) 70%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--borde);
}
.barra-superior::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cian) 55%, transparent), color-mix(in srgb, var(--magenta) 40%, transparent), transparent);
  opacity: .6;
}
.titulo-pagina { font-size: 1.4rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.migas { font-family: "JetBrains Mono", monospace; font-size: .72rem; color: var(--tinta-tenue); margin-bottom: .15rem; letter-spacing: .02em; }
.migas a { color: var(--tinta-suave); text-decoration: none; }
.migas a:hover { color: var(--primario); }
.acciones { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }
.contenido { padding: 1.6rem 2rem 4rem; max-width: 1580px; }
.btn-icono { border: 1px solid var(--borde-fuerte); background: var(--superficie); color: var(--tinta); width: 40px; height: 40px; display: grid; place-items: center; font-size: 1.2rem; border-radius: 10px; }
@media (max-width: 767.98px) {
  .barra-superior { padding: .8rem 1rem; flex-wrap: wrap; }
  .contenido { padding: 1rem 1rem 3rem; }
  .acciones { width: 100%; justify-content: flex-start; }
}

/* --- Avisos ------------------------------------------------------------------ */
.avisos { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.aviso { display: flex; align-items: flex-start; gap: .65rem; margin: 0; }
.aviso > .bi { font-size: 1.05rem; margin-top: .05rem; }
.alert { border-radius: 12px; border-width: 1px; backdrop-filter: blur(8px); --bs-alert-color: var(--tinta); }
.alert-success { --bs-alert-bg: var(--exito-suave); --bs-alert-border-color: color-mix(in srgb, var(--exito) 35%, transparent); }
.alert-success > .bi { color: var(--exito); }
.alert-danger { --bs-alert-bg: var(--peligro-suave); --bs-alert-border-color: color-mix(in srgb, var(--peligro) 35%, transparent); }
.alert-danger > .bi { color: var(--peligro); }
.alert-warning { --bs-alert-bg: var(--alerta-suave); --bs-alert-border-color: color-mix(in srgb, var(--alerta) 35%, transparent); }
.alert-warning > .bi { color: var(--alerta); }
.alert-info { --bs-alert-bg: var(--info-suave); --bs-alert-border-color: color-mix(in srgb, var(--info) 35%, transparent); }
.alert-info > .bi { color: var(--info); }
.btn-close { filter: var(--bs-btn-close-white-filter, none); }
[data-bs-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* --- Tarjetas (paneles de vidrio) ------------------------------------------ */
.tarjeta {
  position: relative; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
  box-shadow: var(--sombra-1); backdrop-filter: blur(14px);
}
.tarjeta-neon::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, color-mix(in srgb, var(--cian) 70%, transparent), transparent 40%, transparent 60%, color-mix(in srgb, var(--magenta) 60%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.tarjeta-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--borde); }
.tarjeta-cabeza h2, .tarjeta-cabeza h3 { font-size: 1rem; margin: 0; }
.tarjeta-cabeza .bi { color: var(--primario); margin-right: .4rem; }
.tarjeta-cuerpo { padding: 1.25rem; }
.vacio { padding: 3.5rem 1.5rem; text-align: center; color: var(--tinta-suave); }
.vacio .vacio-icono {
  display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; margin-bottom: 1rem;
  background: var(--primario-suave); color: var(--primario); font-size: 1.8rem; box-shadow: var(--brillo);
}
.vacio h2 { font-size: 1.15rem; color: var(--tinta); }

/* --- Métricas ---------------------------------------------------------------- */
.metrica {
  position: relative; overflow: hidden; display: flex; gap: .95rem; align-items: flex-start; height: 100%;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px;
  padding: 1.05rem 1.15rem; box-shadow: var(--sombra-1); backdrop-filter: blur(14px);
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.metrica::after {
  content: ""; position: absolute; left: 1.15rem; right: 1.15rem; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento-metrica, var(--cian)), transparent); opacity: .7;
}
.metrica:hover { border-color: color-mix(in srgb, var(--acento-metrica, var(--cian)) 45%, transparent); box-shadow: 0 0 28px -6px color-mix(in srgb, var(--acento-metrica, var(--cian)) 35%, transparent); transform: translateY(-1px); }
.metrica-icono {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; flex: none; font-size: 1.15rem;
  color: var(--acento-metrica, var(--cian)); background: color-mix(in srgb, var(--acento-metrica, var(--cian)) 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acento-metrica, var(--cian)) 35%, transparent), 0 0 18px -4px color-mix(in srgb, var(--acento-metrica, var(--cian)) 55%, transparent);
}
.metrica-icono i { filter: drop-shadow(0 0 6px color-mix(in srgb, var(--acento-metrica, var(--cian)) 70%, transparent)); }
.tono-violeta { --acento-metrica: var(--violeta); }
.tono-magenta { --acento-metrica: var(--magenta); }
.tono-exito { --acento-metrica: var(--exito); }
.tono-alerta { --acento-metrica: var(--alerta); }
.tono-peligro { --acento-metrica: var(--peligro); }
.tono-info { --acento-metrica: var(--info); }
.metrica .etiqueta { font-size: .74rem; color: var(--tinta-suave); font-weight: 500; text-transform: uppercase; letter-spacing: .06em; }
.metrica .valor {
  font-family: "Space Grotesk", "Inter", sans-serif; font-variant-numeric: tabular-nums;
  font-size: clamp(1.1rem, 1.35vw, 1.4rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: .1rem;
}
.metrica .nota { font-size: .75rem; color: var(--tinta-tenue); margin-top: .15rem; }

/* --- Pastillas de estado ------------------------------------------------------ */
.pill {
  display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent; letter-spacing: .02em;
}
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.pill-exito { background: var(--exito-suave); color: var(--exito); border-color: color-mix(in srgb, var(--exito) 30%, transparent); }
.pill-gris { background: var(--superficie-2); color: var(--tinta-suave); border-color: var(--borde); }
.pill-gris::before { box-shadow: none; }
.pill-peligro { background: var(--peligro-suave); color: var(--peligro); border-color: color-mix(in srgb, var(--peligro) 30%, transparent); }
.pill-alerta { background: var(--alerta-suave); color: var(--alerta); border-color: color-mix(in srgb, var(--alerta) 30%, transparent); }
.pill-primario { background: var(--primario-suave); color: var(--primario); border-color: color-mix(in srgb, var(--primario) 30%, transparent); }

/* --- Botones y formularios ----------------------------------------------------- */
.btn { --bs-btn-font-weight: 500; --bs-btn-font-size: .875rem; --bs-btn-padding-y: .45rem; --bs-btn-border-radius: 10px; --bs-btn-padding-x: .95rem; transition: box-shadow .2s, background .2s, border-color .2s, color .2s, transform .1s; }
.btn:active { transform: translateY(1px); }
.btn-sm { --bs-btn-border-radius: 8px; --bs-btn-font-size: .8rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .65rem; }
.btn-primary {
  --bs-btn-color: var(--sobre-primario); --bs-btn-bg: var(--primario); --bs-btn-border-color: var(--primario);
  --bs-btn-hover-color: var(--sobre-primario); --bs-btn-hover-bg: var(--primario-hover); --bs-btn-hover-border-color: var(--primario-hover);
  --bs-btn-active-color: var(--sobre-primario); --bs-btn-active-bg: var(--primario-hover); --bs-btn-active-border-color: var(--primario-hover);
  --bs-btn-disabled-color: var(--sobre-primario); --bs-btn-disabled-bg: var(--primario); --bs-btn-disabled-border-color: var(--primario);
  font-weight: 600; box-shadow: var(--brillo-suave);
}
.btn-primary:hover, .btn-primary:focus-visible { box-shadow: var(--brillo); }
.btn-neon {
  color: #fff; border: 0; font-weight: 600; background: linear-gradient(120deg, #00b8d9, #7c4dff 55%, #e01fd2);
  box-shadow: 0 0 22px -4px rgba(124, 77, 255, .7);
}
.btn-neon:hover, .btn-neon:focus-visible { color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .25), 0 0 30px -2px rgba(34, 230, 255, .6), 0 0 40px -6px rgba(255, 61, 242, .6); }
.btn-outline-primary {
  --bs-btn-color: var(--primario); --bs-btn-border-color: color-mix(in srgb, var(--primario) 45%, transparent);
  --bs-btn-hover-bg: var(--primario-suave); --bs-btn-hover-color: var(--primario); --bs-btn-hover-border-color: var(--primario);
  --bs-btn-active-bg: var(--primario-suave); --bs-btn-active-color: var(--primario); --bs-btn-active-border-color: var(--primario);
  --bs-btn-disabled-color: var(--tinta-tenue); --bs-btn-disabled-border-color: var(--borde);
}
.btn-outline-primary:hover { box-shadow: var(--brillo-suave); }
.btn-outline-secondary, .btn-suave {
  --bs-btn-color: var(--tinta); --bs-btn-bg: var(--superficie-2); --bs-btn-border-color: var(--borde-fuerte);
  --bs-btn-hover-bg: var(--primario-suave); --bs-btn-hover-color: var(--tinta); --bs-btn-hover-border-color: color-mix(in srgb, var(--primario) 45%, transparent);
  --bs-btn-active-bg: var(--primario-suave); --bs-btn-active-color: var(--tinta); --bs-btn-active-border-color: var(--primario);
}
.btn-outline-danger { --bs-btn-color: var(--peligro); --bs-btn-border-color: color-mix(in srgb, var(--peligro) 45%, transparent); --bs-btn-hover-bg: var(--peligro-suave); --bs-btn-hover-color: var(--peligro); --bs-btn-hover-border-color: var(--peligro); }
.btn-link { --bs-btn-color: var(--primario); }
.form-control, .form-select {
  font-size: .9rem; border-radius: 10px; border-color: var(--borde-fuerte); background-color: color-mix(in srgb, var(--superficie-solida) 70%, transparent); color: var(--tinta);
}
.form-control::placeholder { color: var(--tinta-tenue); }
.form-control:focus, .form-select:focus {
  border-color: var(--primario); background-color: var(--superficie-solida); color: var(--tinta);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color), 0 0 18px -4px color-mix(in srgb, var(--primario) 60%, transparent);
}
.form-control:disabled { background-color: var(--superficie-2); }
.form-control-sm, .form-select-sm { border-radius: 8px; font-size: .82rem; }
.form-label { font-weight: 500; font-size: .82rem; margin-bottom: .35rem; color: var(--tinta-suave); }
.form-text { color: var(--tinta-tenue); }
.form-check-input { background-color: var(--superficie-solida); border-color: var(--borde-fuerte); }
.form-check-input:checked { background-color: var(--primario); border-color: var(--primario); box-shadow: var(--brillo-suave); }
[data-bs-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.8) sepia(1) hue-rotate(150deg) saturate(4); }
.buscador { position: relative; }
.buscador > .bi { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--tinta-tenue); pointer-events: none; }
.buscador .form-control { padding-left: 2.3rem; }
.filtro { width: 300px; max-width: 100%; }
.filtro-corto { width: 200px; max-width: 100%; }
.motivos { min-width: 240px; max-width: 320px; }

/* --- Tablas ------------------------------------------------------------------- */
.table { --bs-table-bg: transparent; --bs-table-color: var(--tinta); --bs-table-border-color: var(--borde); --bs-table-hover-bg: var(--primario-suave); --bs-table-hover-color: var(--tinta); margin-bottom: 0; }
.table > thead > tr > th {
  font-family: "JetBrains Mono", monospace; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 500;
  color: var(--tinta-tenue); background: var(--superficie-2); border-bottom-color: var(--borde-fuerte); white-space: nowrap;
  padding-top: .75rem; padding-bottom: .75rem;
}
.table > :not(caption) > * > * { padding-left: .9rem; padding-right: .9rem; }
.tarjeta > .table-responsive > .table > thead > tr > th:first-child { border-top-left-radius: 16px; }
.tarjeta > .table-responsive > .table > thead > tr > th:last-child { border-top-right-radius: 16px; }
.tarjeta > .table-responsive > .table > tbody > tr:last-child > * { border-bottom: 0; }
.fila-enlace { cursor: pointer; transition: box-shadow .2s; }
.fila-enlace:hover { box-shadow: inset 3px 0 0 var(--primario); }
.num { font-variant-numeric: tabular-nums; font-size: .86rem; }
.convenio-celda { font-weight: 600; }
.convenio-celda small { display: block; font-weight: 400; color: var(--tinta-tenue); font-size: .76rem; }
.id-informe { font-family: "JetBrains Mono", monospace; color: var(--tinta-tenue); font-size: .8rem; }

/* --- Paginación ------------------------------------------------------------- */
.pagination { --bs-pagination-bg: var(--superficie); --bs-pagination-border-color: var(--borde); --bs-pagination-color: var(--tinta); --bs-pagination-hover-bg: var(--primario-suave); --bs-pagination-hover-color: var(--primario); --bs-pagination-disabled-bg: var(--superficie); --bs-pagination-disabled-color: var(--tinta-suave); --bs-pagination-border-radius: 10px; }

/* --- Informe: pasos ------------------------------------------------------------- */
.pasos { display: inline-flex; padding: 4px; gap: 4px; background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 12px; }
.paso { display: flex; align-items: center; gap: .5rem; padding: .42rem .85rem; border-radius: 9px; color: var(--tinta-suave); text-decoration: none; font-weight: 500; font-size: .85rem; white-space: nowrap; transition: background .2s, color .2s; }
.paso .num-paso { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 6px; font-family: "JetBrains Mono", monospace; font-size: .7rem; font-weight: 700; background: var(--borde); color: var(--tinta-suave); }
.paso:hover { color: var(--tinta); }
.paso.activo { background: var(--primario-suave); color: var(--tinta); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primario) 40%, transparent); }
.paso.activo .num-paso { background: var(--primario); color: var(--sobre-primario); box-shadow: 0 0 12px color-mix(in srgb, var(--primario) 70%, transparent); }
.paso.deshabilitado { opacity: .45; pointer-events: none; }
.meta-informe { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; color: var(--tinta-suave); font-size: .82rem; }
.meta-informe i { color: var(--primario); opacity: .8; }

/* --- Revisión: pestañas y tablas editables ------------------------------------ */
.pestanas { border-bottom: 1px solid var(--borde); flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; gap: .25rem; padding: 0 .5rem; scrollbar-width: thin; }
.pestanas .nav-link {
  white-space: nowrap; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--tinta-suave);
  padding: .85rem .9rem; font-weight: 500; background: none; margin-bottom: -1px; transition: color .2s, border-color .2s;
}
.pestanas .nav-link:hover { color: var(--tinta); border-bottom-color: var(--borde-fuerte); }
.pestanas .nav-link.active { color: var(--primario); border-bottom-color: var(--primario); background: none; text-shadow: 0 0 14px color-mix(in srgb, var(--primario) 55%, transparent); box-shadow: 0 8px 14px -12px var(--primario); }
.pestanas .nav-link .bi { margin-right: .35rem; }
.pestana-cuerpo { padding: 1.35rem; }
.fuente { font-size: .72rem; color: var(--tinta-tenue); }
.tabla-editable > thead > tr > th { font-family: "Inter", sans-serif; text-transform: none; letter-spacing: 0; font-size: .76rem; }
.tabla-editable td { min-width: 90px; vertical-align: top; }
.tabla-editable .celda-largo { min-width: 260px; }
.tabla-editable .celda-dinero, .tabla-editable .celda-fecha { min-width: 150px; }
.tabla-editable .celda-pct, .tabla-editable .celda-entero { min-width: 90px; max-width: 120px; }
.tabla-editable .celda-fuente { min-width: 140px; max-width: 220px; }
.tabla-editable .celda-quitar { min-width: 0; width: 1%; }
.tabla-editable .form-control, .tabla-editable .form-select { background-color: transparent; border-color: transparent; }
.tabla-editable .celda-dinero .form-control, .tabla-editable .celda-pct .form-control { font-family: "JetBrains Mono", monospace; font-size: .82rem; }
.tabla-editable .form-control:hover, .tabla-editable .form-select:hover { border-color: var(--borde-fuerte); }
.tabla-editable .form-control:focus, .tabla-editable .form-select:focus { background-color: var(--superficie-solida); border-color: var(--primario); }
.tabla-editable .form-control.is-invalid { border-color: var(--peligro); box-shadow: 0 0 12px -4px var(--peligro); }
.quitar-fila { color: var(--tinta-tenue) !important; }
.quitar-fila:hover { color: var(--peligro) !important; }
.agregar-fila { margin-top: .7rem; }
.celda-fuente { max-width: 240px; }
pre.json, pre.sql, pre.texto-generado {
  background: var(--codigo); color: var(--tinta); border: 1px solid var(--borde); border-radius: 12px; padding: .9rem 1rem;
  font-size: .76rem; white-space: pre-wrap; word-break: break-word; max-height: 480px; overflow: auto; margin: .6rem 0 0;
}
pre.json { color: color-mix(in srgb, var(--cian) 70%, var(--tinta)); }
details > summary { cursor: pointer; font-weight: 500; }
details > summary::marker { color: var(--primario); }
details.plegable { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: .85rem 1.05rem; backdrop-filter: blur(14px); }
details.plegable[open] { border-color: var(--borde-fuerte); }
details.plegable + details.plegable { margin-top: .55rem; }

.validacion { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; border-radius: 12px; font-size: .88rem; border: 1px solid transparent; }
.validacion + .validacion { margin-top: .45rem; }
.validacion i { margin-top: .1rem; }
.validacion.error { background: var(--peligro-suave); border-color: color-mix(in srgb, var(--peligro) 25%, transparent); }
.validacion.error i { color: var(--peligro); filter: drop-shadow(0 0 6px var(--peligro)); }
.validacion.advertencia { background: var(--alerta-suave); border-color: color-mix(in srgb, var(--alerta) 25%, transparent); }
.validacion.advertencia i { color: var(--alerta); }
.validacion.ok { background: var(--exito-suave); border-color: color-mix(in srgb, var(--exito) 25%, transparent); }
.validacion.ok i { color: var(--exito); filter: drop-shadow(0 0 6px var(--exito)); }

/* Barra fija de acciones al pie de la revisión */
.barra-acciones {
  position: sticky; bottom: 1rem; z-index: 1010; margin-top: 1.5rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: .8rem 1rem;
  background: color-mix(in srgb, var(--superficie-solida) 85%, transparent); backdrop-filter: blur(16px);
  border: 1px solid var(--borde-fuerte); border-radius: 16px; box-shadow: var(--sombra-2), var(--brillo-suave);
}

/* --- Documentos --------------------------------------------------------------- */
.zona-carga {
  position: relative; display: block; cursor: pointer;
  border: 1.5px dashed color-mix(in srgb, var(--primario) 40%, transparent); border-radius: 14px; padding: 1.75rem 1rem; text-align: center;
  background: var(--primario-suave); transition: border-color .2s, box-shadow .2s;
}
.zona-carga:hover, .zona-carga.arrastrando { border-color: var(--primario); box-shadow: var(--brillo); }
.zona-carga .bi { font-size: 2rem; color: var(--primario); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--primario) 70%, transparent)); }
.zona-carga input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .65rem; border-radius: 9px; background: var(--superficie-2); border: 1px solid var(--borde); font-size: .8rem; margin: 0 .3rem .4rem 0; }
.chip.error { border-color: color-mix(in srgb, var(--peligro) 40%, transparent); color: var(--peligro); }
.orden-lectura { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.orden-lectura .bi-chevron-right { color: var(--tinta-tenue); font-size: .75rem; }
.archivo { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.archivo .bi { font-size: 1.2rem; color: var(--magenta); flex: none; }
.lista-archivos { list-style: none; padding: 0; margin: 0; columns: 2 320px; }
.lista-archivos li { break-inside: avoid; padding: .35rem 0; font-size: .85rem; }

/* --- Progreso -------------------------------------------------------------------- */
.progress { --bs-progress-bg: var(--superficie-2); --bs-progress-height: .55rem; --bs-progress-border-radius: 999px; overflow: visible; }
.progress-bar { background: var(--degradado); border-radius: 999px; box-shadow: 0 0 14px color-mix(in srgb, var(--cian) 70%, transparent); }

/* --- Gráficas ------------------------------------------------------------------- */
.grafica { width: 100%; min-height: 120px; }
.grafica svg { max-width: 100%; }

/* --- Semáforo ------------------------------------------------------------------- */
.semaforo { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .8rem; white-space: nowrap; }
.semaforo .luz { width: 9px; height: 9px; border-radius: 50%; }
.nivel-critico .luz { background: #ff4d7d; box-shadow: 0 0 10px #ff4d7d, 0 0 2px #fff inset; }
.nivel-riesgo .luz { background: #ff8a3d; box-shadow: 0 0 10px #ff8a3d; }
.nivel-atencion .luz { background: #ffc53d; box-shadow: 0 0 10px #ffc53d; }
.nivel-al_dia .luz { background: #2dffa8; box-shadow: 0 0 10px #2dffa8; }
.barra-pct { display: flex; align-items: center; gap: .55rem; min-width: 118px; }
.barra-pct .pista { flex: 1; height: 5px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.barra-pct .relleno { height: 100%; border-radius: 999px; background: var(--degradado); box-shadow: 0 0 10px color-mix(in srgb, var(--cian) 60%, transparent); }
.barra-pct span { font-family: "JetBrains Mono", monospace; font-size: .74rem; min-width: 38px; text-align: right; color: var(--tinta-suave); }

/* --- Asistente ------------------------------------------------------------------ */
.chat { max-width: 900px; margin: 0 auto; }
.mensaje { display: flex; gap: .8rem; margin-bottom: 1.15rem; }
.mensaje .avatar-chat { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; font-size: .95rem; }
.mensaje-usuario { flex-direction: row-reverse; }
.mensaje-usuario .avatar-chat { background: var(--superficie-2); color: var(--tinta-suave); border: 1px solid var(--borde-fuerte); }
.mensaje-asistente .avatar-chat { background: #0b1026; color: #22e6ff; box-shadow: 0 0 0 1px rgba(34, 230, 255, .45), 0 0 16px rgba(34, 230, 255, .35); }
.burbuja { padding: .8rem 1.05rem; border-radius: 16px; max-width: min(740px, 100%); overflow-x: auto; }
.mensaje-usuario .burbuja { background: linear-gradient(135deg, color-mix(in srgb, var(--violeta) 85%, #000), color-mix(in srgb, var(--magenta) 70%, #000)); color: #fff; border-top-right-radius: 4px; box-shadow: 0 0 24px -8px color-mix(in srgb, var(--magenta) 70%, transparent); }
.mensaje-asistente .burbuja { background: var(--superficie); border: 1px solid var(--borde); border-top-left-radius: 4px; box-shadow: var(--sombra-1); backdrop-filter: blur(14px); }
.markdown table { font-size: .84rem; margin: .5rem 0; border-collapse: collapse; }
.markdown th, .markdown td { border: 1px solid var(--borde-fuerte); padding: .35rem .6rem; }
.markdown th { background: var(--superficie-2); color: var(--tinta-suave); font-weight: 600; }
.markdown p:last-child, .markdown ul:last-child, .markdown ol:last-child { margin-bottom: 0; }
.sugerencias { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .7rem; }
.sugerencia {
  text-align: left; padding: .9rem 1rem; border-radius: 14px; border: 1px solid var(--borde); background: var(--superficie);
  color: var(--tinta); font-size: .86rem; transition: border-color .2s, box-shadow .2s, transform .2s; backdrop-filter: blur(14px);
}
.sugerencia:hover { border-color: color-mix(in srgb, var(--primario) 55%, transparent); box-shadow: var(--brillo-suave); transform: translateY(-2px); }
.sugerencia .bi { color: var(--primario); margin-right: .4rem; }
.compositor {
  position: sticky; bottom: 1rem; background: color-mix(in srgb, var(--superficie-solida) 88%, transparent); backdrop-filter: blur(16px);
  border: 1px solid var(--borde-fuerte); border-radius: 18px; padding: .55rem .55rem .55rem 1.05rem; display: flex; gap: .5rem; align-items: flex-end;
  box-shadow: var(--sombra-2); transition: border-color .2s, box-shadow .2s;
}
.compositor:focus-within { border-color: var(--primario); box-shadow: var(--sombra-2), var(--brillo); }
.compositor textarea { border: 0; resize: none; box-shadow: none !important; padding: .5rem 0; background: transparent !important; }
.compositor .btn { border-radius: 12px; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; flex: none; }

/* --- Ingreso ---------------------------------------------------------------------- */
.ingreso-pantalla { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.ingreso-arte {
  position: relative; overflow: hidden; color: #fff; padding: 3rem 3.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  background:
    radial-gradient(700px 420px at 15% 10%, rgba(139, 92, 255, .45), transparent 60%),
    radial-gradient(600px 500px at 95% 95%, rgba(255, 61, 242, .3), transparent 60%),
    radial-gradient(500px 400px at 70% 30%, rgba(34, 230, 255, .22), transparent 60%),
    #040611;
  border-right: 1px solid rgba(120, 160, 255, .15);
}
.ingreso-arte::before {
  content: ""; position: absolute; inset: -40% -10% auto; height: 140%; pointer-events: none; opacity: .5;
  background-image: linear-gradient(rgba(34, 230, 255, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(34, 230, 255, .14) 1px, transparent 1px);
  background-size: 48px 48px; transform: perspective(600px) rotateX(58deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 10%, transparent 75%); top: auto; bottom: -10%;
}
.ingreso-arte > * { position: relative; z-index: 1; }
.ingreso-arte h2 { font-size: 2.5rem; line-height: 1.1; max-width: 560px; letter-spacing: -.03em; font-weight: 700; }
.ingreso-arte p { color: #aeb9d8; max-width: 480px; }
.ingreso-arte .rasgo { display: flex; gap: .8rem; align-items: center; color: #d6dcf0; font-size: .92rem; margin-top: .85rem; }
.ingreso-arte .rasgo i {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: none; color: #22e6ff;
  background: rgba(34, 230, 255, .08); box-shadow: inset 0 0 0 1px rgba(34, 230, 255, .35), 0 0 16px -4px rgba(34, 230, 255, .6);
}
.ingreso-arte .chip-estado { display: inline-flex; align-items: center; gap: .5rem; font-family: "JetBrains Mono", monospace; font-size: .72rem; color: #9fb0d8; padding: .3rem .7rem; border: 1px solid rgba(120, 160, 255, .2); border-radius: 999px; background: rgba(255, 255, 255, .03); }
.ingreso-arte .chip-estado .punto { width: 7px; height: 7px; border-radius: 50%; background: #2dffa8; box-shadow: 0 0 10px #2dffa8; animation: latido 2.4s ease-in-out infinite; }
.ingreso-formulario { display: grid; place-items: center; padding: 2rem; }
.ingreso-caja { width: 100%; max-width: 400px; padding: 2.2rem; }
.ingreso-caja .form-control { padding: .7rem .9rem; }
@media (max-width: 991.98px) {
  .ingreso-pantalla { grid-template-columns: 1fr; }
  .ingreso-arte { display: none; }
}
.angosto { max-width: 700px; }

/* --- Movimiento reducido ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}