/* =====================================================================
   SIG · temas "pizarra" oscuro y claro
   El tema activo lo fija data-theme="oscuro|claro" en <html> (script del
   <head> de base.html + botón en app.js). Cada tema define solo la paleta;
   el resto de la hoja usa esas variables, y abajo se redefinen las de
   Bootstrap 5.3 para que tablas, formularios, menús y avisos la hereden.
   ===================================================================== */

/* ---- Paleta oscura (también es la de respaldo si no hay data-theme) ---- */
:root,
:root[data-theme="oscuro"] {
  /* Superficies (de más hundida a más elevada) */
  --fondo: #121A24;
  --superficie: #1A2431;
  --elevada: #233042;
  --linea: #30405A;
  --linea-fuerte: #42557A;

  /* Texto */
  --texto: #E4E9F0;
  --texto-2: #93A1B5;
  --texto-3: #6E7C91;       /* marcadores de posición */
  --enfasis: #fff;   --enfasis-rgb: 255, 255, 255;
  --sobre-acento: #0E1620;  /* texto sobre botones rellenos de color */

  /* Marca (linaje del azul institucional #1f4e78, aclarado para fondo oscuro) = acento */
  --sig: #79AEE0;
  --sig-rgb: 121, 174, 224;
  --sig-hover: #97C2EA;      --sig-hover-rgb: 151, 194, 234;
  --sig-activo: #5F98CF;

  /* Estados: separados del color de marca */
  --verde: #4FC28B;   --verde-rgb: 79, 194, 139;   --verde-hover: #6CD3A1;  --verde-activo: #3DAA77;
  --ambar: #E9B54C;   --ambar-rgb: 233, 181, 76;
  --rojo: #EF7168;    --rojo-rgb: 239, 113, 104;   --rojo-hover: #F48D86;   --rojo-activo: #DB5A51;
  --info: #68C3D8;    --info-rgb: 104, 195, 216;
  --neutro-rgb: 147, 161, 181;
  --fondo-rgb: 18, 26, 36;
  --texto-rgb: 228, 233, 240;

  /* Texto de avisos "subtle" */
  --enfasis-primario: #A9CBEE;
  --enfasis-exito: #8DDDB5;
  --enfasis-alerta: #F2CF85;
  --enfasis-peligro: #F6A39D;
  --enfasis-info: #9AD8E6;

  /* Sombras y colores de cada sistema (se aclaran para fondo oscuro) */
  --sombra-menu: 0 .75rem 2rem rgba(0, 0, 0, .45);
  --sombra-aviso: 0 .5rem 1.5rem rgba(0, 0, 0, .4);
  --sistema-pct: 50%;
  --sistema-fondo-pct: 30%;

  color-scheme: dark;
}

/* ---- Paleta clara: misma familia, azul institucional sin aclarar ---- */
:root[data-theme="claro"] {
  --fondo: #F3F5F8;
  --superficie: #FFFFFF;
  --elevada: #E9EDF2;
  --linea: #D6DDE6;
  --linea-fuerte: #B3BFCE;

  --texto: #17212E;
  --texto-2: #586679;
  --texto-3: #8793A4;
  --enfasis: #000;   --enfasis-rgb: 0, 0, 0;
  --sobre-acento: #FFFFFF;

  --sig: #1F4E78;
  --sig-rgb: 31, 78, 120;
  --sig-hover: #183F62;      --sig-hover-rgb: 24, 63, 98;
  --sig-activo: #13324E;

  --verde: #1D8553;   --verde-rgb: 29, 133, 83;    --verde-hover: #176D44;  --verde-activo: #125736;
  --ambar: #A3670A;   --ambar-rgb: 163, 103, 10;
  --rojo: #C2382E;    --rojo-rgb: 194, 56, 46;     --rojo-hover: #A42F26;   --rojo-activo: #87261F;
  --info: #1A7B92;    --info-rgb: 26, 123, 146;
  --neutro-rgb: 88, 102, 121;
  --fondo-rgb: 243, 245, 248;
  --texto-rgb: 23, 33, 46;

  --enfasis-primario: #163A5A;
  --enfasis-exito: #135C38;
  --enfasis-alerta: #6E4605;
  --enfasis-peligro: #8C271F;
  --enfasis-info: #115565;

  --sombra-menu: 0 .5rem 1.5rem rgba(23, 33, 46, .14);
  --sombra-aviso: 0 .5rem 1.5rem rgba(23, 33, 46, .16);
  --sistema-pct: 100%;
  --sistema-fondo-pct: 14%;

  color-scheme: light;
}

/* ---- Tokens comunes y puente hacia Bootstrap ---- */
:root,
:root[data-bs-theme] {
  /* Tipografía */
  --fuente: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", system-ui, sans-serif;

  --ancho-lateral: 16rem;

  /* ---- Bootstrap ---- */
  --bs-body-font-family: var(--fuente);
  --bs-body-font-size: .9375rem;
  --bs-body-line-height: 1.55;
  --bs-body-bg: var(--fondo);
  --bs-body-bg-rgb: var(--fondo-rgb);
  --bs-body-color: var(--texto);
  --bs-body-color-rgb: var(--texto-rgb);
  --bs-emphasis-color: var(--enfasis);
  --bs-emphasis-color-rgb: var(--enfasis-rgb);
  --bs-heading-color: var(--texto);
  --bs-secondary-color: var(--texto-2);
  --bs-secondary-color-rgb: var(--neutro-rgb);
  --bs-secondary-bg: var(--elevada);
  --bs-tertiary-bg: var(--superficie);
  --bs-tertiary-color: var(--texto-2);
  --bs-border-color: var(--linea);
  --bs-border-color-translucent: rgba(var(--neutro-rgb), .18);
  --bs-border-radius: .375rem;
  --bs-border-radius-sm: .3rem;
  --bs-border-radius-lg: .625rem;
  --bs-link-color: var(--sig);
  --bs-link-color-rgb: var(--sig-rgb);
  --bs-link-hover-color: var(--sig-hover);
  --bs-link-hover-color-rgb: var(--sig-hover-rgb);
  --bs-focus-ring-color: rgba(var(--sig-rgb), .45);

  --bs-primary: var(--sig);         --bs-primary-rgb: var(--sig-rgb);
  --bs-secondary: var(--texto-2);   --bs-secondary-rgb: var(--neutro-rgb);
  --bs-success: var(--verde);       --bs-success-rgb: var(--verde-rgb);
  --bs-warning: var(--ambar);       --bs-warning-rgb: var(--ambar-rgb);
  --bs-danger: var(--rojo);         --bs-danger-rgb: var(--rojo-rgb);
  --bs-info: var(--info);           --bs-info-rgb: var(--info-rgb);

  /* Avisos y fondos "subtle" */
  --bs-primary-text-emphasis: var(--enfasis-primario); --bs-primary-bg-subtle: rgba(var(--sig-rgb), .12);   --bs-primary-border-subtle: rgba(var(--sig-rgb), .35);
  --bs-secondary-text-emphasis: var(--texto);          --bs-secondary-bg-subtle: rgba(var(--neutro-rgb), .10); --bs-secondary-border-subtle: rgba(var(--neutro-rgb), .30);
  --bs-success-text-emphasis: var(--enfasis-exito);    --bs-success-bg-subtle: rgba(var(--verde-rgb), .12); --bs-success-border-subtle: rgba(var(--verde-rgb), .35);
  --bs-warning-text-emphasis: var(--enfasis-alerta);   --bs-warning-bg-subtle: rgba(var(--ambar-rgb), .12); --bs-warning-border-subtle: rgba(var(--ambar-rgb), .35);
  --bs-danger-text-emphasis: var(--enfasis-peligro);   --bs-danger-bg-subtle: rgba(var(--rojo-rgb), .12);   --bs-danger-border-subtle: rgba(var(--rojo-rgb), .35);
  --bs-info-text-emphasis: var(--enfasis-info);        --bs-info-bg-subtle: rgba(var(--info-rgb), .12);     --bs-info-border-subtle: rgba(var(--info-rgb), .35);
}

body { background: var(--fondo); font-feature-settings: "kern"; -webkit-font-smoothing: antialiased; }

/* ---------------------------------------------------------------- botón de tema */
/* Luna en tema claro (pasar a oscuro), sol en tema oscuro (pasar a claro). Solo CSS: sin parpadeo del icono. */
:root[data-theme="claro"] .btn-tema .bi-sun,
:root:not([data-theme="claro"]) .btn-tema .bi-moon-stars { display: none; }
.cabecera-acciones { display: flex; align-items: center; gap: .25rem; }
.barra-movil .cabecera-acciones { margin-left: auto; }
.barra-movil-contexto + .cabecera-acciones { margin-left: 0; }
.tema-flotante { position: fixed; top: .75rem; right: .75rem; z-index: 1030; }
.btn-tema { font-size: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  body, .lateral, .barra-movil, .card { transition: background-color .2s, border-color .2s, color .2s; }
}

::selection { background: rgba(var(--sig-rgb), .35); }

/* ---------------------------------------------------------------- tipografía */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--fuente-cond); font-weight: 600; letter-spacing: -.005em;
}
h1.h4, .h4 { font-size: 1.625rem; line-height: 1.2; }
h6, .h6 { font-size: .95rem; }
.small, small { font-size: .84em; }
.codigo { font-family: var(--fuente-cond); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--sig); }
a.codigo:hover { color: var(--sig-hover); }

/* ---------------------------------------------------------------- utilidades de marca */
.bg-sig { background-color: var(--sig) !important; }
.text-sig { color: var(--sig) !important; }
.text-muted { color: var(--texto-2) !important; }

/* ---------------------------------------------------------------- estructura: barra lateral */
.marca {
  display: inline-flex; align-items: center; gap: .5rem; color: var(--texto); text-decoration: none;
  font-family: var(--fuente-cond); font-weight: 600; font-size: 1.25rem; letter-spacing: .02em;
}
.marca .bi { color: var(--sig); }
.marca:hover { color: var(--enfasis); }

.lateral {
  --bs-offcanvas-width: var(--ancho-lateral);
  --bs-offcanvas-bg: var(--superficie);
  --bs-offcanvas-border-color: var(--linea);
  display: flex; flex-direction: column; gap: .25rem;
  padding: 1rem .75rem;
}
@media (min-width: 1200px) {
  .lateral.offcanvas-xl {
    position: fixed; inset: 0 auto 0 0; width: var(--ancho-lateral); z-index: 1030;
    background-color: var(--superficie) !important; border-right: 1px solid var(--linea);
  }
  .con-lateral .principal { margin-left: var(--ancho-lateral); }
}

.lateral-cabecera { display: flex; align-items: center; justify-content: space-between; padding: .25rem .5rem 1rem; }

.lateral-boton {
  display: flex; align-items: center; gap: .6rem; width: 100%;
  padding: .55rem .65rem; border: 1px solid var(--linea); border-radius: var(--bs-border-radius);
  background: var(--fondo); color: var(--texto); text-align: left; font-weight: 500;
}
.lateral-boton:hover, .lateral-boton[aria-expanded="true"] { border-color: var(--linea-fuerte); background: var(--elevada); }
.lateral-boton:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
.lateral-boton .bi { color: var(--texto-2); }
.lateral-boton::after { margin-left: auto; color: var(--texto-2); }
.lateral-boton .recorte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.25; }
.lateral-boton small { display: block; color: var(--texto-2); font-weight: 400; font-size: .78rem; }
.lateral-bloque .dropdown-menu { width: 100%; }

.lateral-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: .75rem -.25rem 0; padding: 0 .25rem; }
.lateral-nav .nav-link {
  display: flex; align-items: center; gap: .65rem; margin: 1px 0;
  padding: .45rem .65rem; border-radius: var(--bs-border-radius);
  color: var(--texto-2); font-weight: 500;
}
.lateral-nav .nav-link .bi { width: 1.1rem; text-align: center; font-size: 1rem; }
.lateral-nav .nav-link:hover { color: var(--texto); background: rgba(var(--neutro-rgb), .08); }
.lateral-nav .nav-link.active { color: var(--texto); background: var(--elevada); box-shadow: inset 2px 0 0 var(--sig); }
.lateral-nav .nav-link.active .bi { color: var(--sig); }
.lateral-nav .nav-link:focus-visible { outline: 2px solid var(--sig); outline-offset: -2px; box-shadow: none; }

/* El nombre del sistema activo encabeza el grupo de enlaces que dependen de él. */
.grupo-titulo {
  margin: 1.1rem .65rem .4rem; padding-top: 1rem; border-top: 1px solid var(--linea);
  font-family: var(--fuente-cond); font-weight: 600; font-size: .9rem; color: var(--texto); line-height: 1.3;
}
.lateral-usuario { margin-top: auto; padding-top: .75rem; }

.barra-movil {
  position: sticky; top: 0; z-index: 1020;
  display: flex; align-items: center; gap: .5rem; padding: .5rem 1rem;
  background: var(--superficie); border-bottom: 1px solid var(--linea);
}
.barra-movil-contexto { margin-left: auto; color: var(--texto-2); font-size: .84rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-icono { --bs-btn-padding-x: .5rem; --bs-btn-padding-y: .2rem; --bs-btn-color: var(--texto); --bs-btn-hover-color: var(--texto); --bs-btn-hover-bg: var(--elevada); font-size: 1.35rem; line-height: 1; }

.contenido { max-width: 1320px; margin: 0 auto; padding: 2rem 2.25rem 3rem; }
@media (max-width: 767.98px) { .contenido { padding: 1.25rem 1rem 2.5rem; } }

/* ---------------------------------------------------------------- tarjetas */
.card {
  --bs-card-bg: var(--superficie);
  --bs-card-border-color: var(--linea);
  --bs-card-border-radius: .625rem;
  --bs-card-inner-border-radius: calc(.625rem - 1px);
  --bs-card-cap-bg: transparent;
  --bs-card-cap-padding-y: .75rem;
  --bs-card-color: var(--texto);
}
.card-header { font-weight: 600; border-bottom-color: var(--linea); }
.card-footer { border-top-color: var(--linea); }

/* ---------------------------------------------------------------- botones */
.btn { --bs-btn-font-weight: 500; }
.btn-sig, .btn-primary {
  --bs-btn-color: var(--sobre-acento); --bs-btn-bg: var(--sig); --bs-btn-border-color: var(--sig);
  --bs-btn-hover-color: var(--sobre-acento); --bs-btn-hover-bg: var(--sig-hover); --bs-btn-hover-border-color: var(--sig-hover);
  --bs-btn-active-color: var(--sobre-acento); --bs-btn-active-bg: var(--sig-activo); --bs-btn-active-border-color: var(--sig-activo);
  --bs-btn-disabled-color: var(--sobre-acento); --bs-btn-disabled-bg: var(--sig); --bs-btn-disabled-border-color: var(--sig);
  --bs-btn-focus-shadow-rgb: var(--sig-rgb);
}
.btn-success {
  --bs-btn-color: var(--sobre-acento); --bs-btn-bg: var(--verde); --bs-btn-border-color: var(--verde);
  --bs-btn-hover-color: var(--sobre-acento); --bs-btn-hover-bg: var(--verde-hover); --bs-btn-hover-border-color: var(--verde-hover);
  --bs-btn-active-color: var(--sobre-acento); --bs-btn-active-bg: var(--verde-activo); --bs-btn-active-border-color: var(--verde-activo);
  --bs-btn-disabled-color: var(--sobre-acento); --bs-btn-disabled-bg: var(--verde); --bs-btn-disabled-border-color: var(--verde);
  --bs-btn-focus-shadow-rgb: var(--verde-rgb);
}
.btn-danger {
  --bs-btn-color: var(--sobre-acento); --bs-btn-bg: var(--rojo); --bs-btn-border-color: var(--rojo);
  --bs-btn-hover-color: var(--sobre-acento); --bs-btn-hover-bg: var(--rojo-hover); --bs-btn-hover-border-color: var(--rojo-hover);
  --bs-btn-active-color: var(--sobre-acento); --bs-btn-active-bg: var(--rojo-activo); --bs-btn-active-border-color: var(--rojo-activo);
  --bs-btn-focus-shadow-rgb: var(--rojo-rgb);
}

/* Contorno: borde neutro y el color solo en el texto; el tono aparece al interactuar. */
.btn-outline-primary   { --tono: var(--sig);   --tono-rgb: var(--sig-rgb); }
.btn-outline-secondary { --tono: var(--texto); --tono-rgb: var(--neutro-rgb); }
.btn-outline-success   { --tono: var(--verde); --tono-rgb: var(--verde-rgb); }
.btn-outline-warning   { --tono: var(--ambar); --tono-rgb: var(--ambar-rgb); }
.btn-outline-danger    { --tono: var(--rojo);  --tono-rgb: var(--rojo-rgb); }
.btn-outline-primary, .btn-outline-secondary, .btn-outline-success, .btn-outline-warning, .btn-outline-danger {
  --bs-btn-color: var(--tono); --bs-btn-border-color: var(--linea-fuerte); --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--tono); --bs-btn-hover-bg: rgba(var(--tono-rgb), .12); --bs-btn-hover-border-color: var(--tono);
  --bs-btn-active-color: var(--tono); --bs-btn-active-bg: rgba(var(--tono-rgb), .2); --bs-btn-active-border-color: var(--tono);
  --bs-btn-disabled-color: var(--tono); --bs-btn-disabled-border-color: var(--linea);
  --bs-btn-focus-shadow-rgb: var(--tono-rgb);
}
.btn-link { --bs-btn-color: var(--sig); --bs-btn-hover-color: var(--sig-hover); --bs-btn-active-color: var(--sig-hover); --bs-btn-font-weight: 500; text-decoration: none; }
.btn-link.text-danger { color: var(--rojo) !important; }
.btn:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; box-shadow: none; }

/* ---------------------------------------------------------------- formularios */
.form-control, .form-select { background-color: var(--fondo); border-color: var(--linea-fuerte); color: var(--texto); }
.form-control::placeholder { color: var(--texto-3); }
.form-control:focus, .form-select:focus {
  background-color: var(--fondo); border-color: var(--sig); color: var(--texto);
  box-shadow: 0 0 0 .2rem rgba(var(--sig-rgb), .25);
}
.form-control:disabled, .form-select:disabled { background-color: var(--superficie); color: var(--texto-2); }
.form-label { font-weight: 500; color: var(--texto); }
.form-text { color: var(--texto-2); }
.form-check-input { background-color: var(--fondo); border-color: var(--linea-fuerte); }
.form-check-input:focus { border-color: var(--sig); box-shadow: 0 0 0 .2rem rgba(var(--sig-rgb), .25); }
.form-check-input:checked { background-color: var(--sig); border-color: var(--sig); }
.form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230E1620' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%230E1620'/%3e%3c/svg%3e");
}
/* En tema claro el relleno es azul oscuro: marca blanca (url() no admite variables). */
:root[data-theme="claro"] .form-check-input:checked[type="checkbox"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
:root[data-theme="claro"] .form-check-input:checked[type="radio"] {
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.is-invalid, .was-validated :invalid { border-color: var(--rojo) !important; }
.invalid-feedback { color: var(--rojo); }

/* ---------------------------------------------------------------- tablas */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--texto);
  --bs-table-border-color: var(--linea);
  --bs-table-hover-bg: rgba(var(--sig-rgb), .06);
  --bs-table-hover-color: var(--texto);
  --bs-table-striped-bg: rgba(var(--neutro-rgb), .04);
}
.table > thead > tr > th {
  --bs-table-bg: var(--elevada);
  color: var(--texto-2); font-weight: 500; font-size: .84rem; white-space: nowrap;
  border-bottom-color: var(--linea-fuerte);
}
.table td { font-variant-numeric: tabular-nums; }
.card > .table-responsive:last-child > .table > tbody > tr:last-child > *,
.card > .table-responsive:last-child > .table > tbody:last-child > tr:last-child > * { border-bottom: 0; }

/* ---------------------------------------------------------------- insignias de estado */
/* Fondo del color al 16 % y texto en el color pleno: legibles sobre pizarra. */
.badge { --bs-badge-font-weight: 500; --bs-badge-padding-x: .55em; --bs-badge-padding-y: .32em; --bs-badge-border-radius: .3rem; letter-spacing: .01em; }
.text-bg-primary   { color: var(--sig) !important;   background-color: rgba(var(--sig-rgb), .16) !important; }
.text-bg-secondary { color: var(--texto-2) !important; background-color: rgba(var(--neutro-rgb), .14) !important; }
.text-bg-success   { color: var(--verde) !important; background-color: rgba(var(--verde-rgb), .16) !important; }
.text-bg-warning   { color: var(--ambar) !important; background-color: rgba(var(--ambar-rgb), .16) !important; }
.text-bg-danger    { color: var(--rojo) !important;  background-color: rgba(var(--rojo-rgb), .16) !important; }
.text-bg-info      { color: var(--info) !important;  background-color: rgba(var(--info-rgb), .16) !important; }
/* "light" (Aplica, datos de empresa) y "dark" (No aplica) vienen de core/templatetags/ui.py */
.text-bg-light     { color: var(--texto) !important; background-color: var(--elevada) !important; }
.text-bg-dark      { color: var(--texto-2) !important; background-color: transparent !important; box-shadow: inset 0 0 0 1px var(--linea-fuerte); }
.badge.border      { border-color: var(--linea-fuerte) !important; }

/* ---------------------------------------------------------------- menús, listas, avisos */
.dropdown-menu {
  --bs-dropdown-bg: var(--elevada);
  --bs-dropdown-border-color: var(--linea-fuerte);
  --bs-dropdown-color: var(--texto);
  --bs-dropdown-link-color: var(--texto);
  --bs-dropdown-link-hover-color: var(--enfasis);
  --bs-dropdown-link-hover-bg: rgba(var(--neutro-rgb), .12);
  --bs-dropdown-link-active-color: var(--sobre-acento);
  --bs-dropdown-link-active-bg: var(--sig);
  --bs-dropdown-divider-bg: var(--linea);
  --bs-dropdown-header-color: var(--texto-2);
  --bs-dropdown-box-shadow: var(--sombra-menu);
  box-shadow: var(--bs-dropdown-box-shadow);
}
.dropdown-item .bi { width: 1.1rem; margin-right: .35rem; color: var(--texto-2); }
.dropdown-item:hover .bi { color: inherit; }

.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--texto);
  --bs-list-group-border-color: var(--linea);
  --bs-list-group-action-color: var(--texto);
  --bs-list-group-action-hover-color: var(--texto);
  --bs-list-group-action-hover-bg: rgba(var(--sig-rgb), .06);
  --bs-list-group-action-active-bg: rgba(var(--sig-rgb), .1);
}
.alert { --bs-alert-border-radius: .5rem; }
.alert-secondary { --bs-alert-color: var(--texto); }
#avisos .alert { background-color: var(--elevada); box-shadow: var(--sombra-aviso) !important; }

.progress { --bs-progress-bg: var(--elevada); --bs-progress-height: .5rem; --bs-progress-border-radius: 999px; --bs-progress-bar-bg: var(--sig); }

hr { border-color: var(--linea); opacity: 1; }
details > summary { cursor: pointer; }
details > summary:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; border-radius: 2px; }

/* ---------------------------------------------------------------- tablero: indicadores */
.kpi .valor {
  font-family: var(--fuente-cond); font-size: 2.25rem; font-weight: 600; line-height: 1;
  font-variant-numeric: tabular-nums; margin-top: .35rem;
}
.kpi .etiqueta { font-size: .84rem; color: var(--texto-2); }

/* Calificación ubicada sobre las tres franjas de valoración (Crítico <60, Moderado 60–85, Aceptable >85). */
.calificacion .valor { font-size: 3rem; }
.escala { position: relative; height: .625rem; margin-top: 1.25rem; }
.escala-franjas { display: flex; gap: 2px; height: 100%; }
.escala-franjas span { border-radius: 2px; opacity: .25; }
.f-critico   { flex: 60; background: var(--rojo); }
.f-moderado  { flex: 25; background: var(--ambar); }
.f-aceptable { flex: 15; background: var(--verde); }
.nivel-critico .f-critico,
.nivel-moderado .f-moderado,
.nivel-aceptable .f-aceptable { opacity: 1; }
.escala-marca {
  position: absolute; top: -.35rem; bottom: -.35rem; width: 3px; margin-left: -1.5px;
  background: var(--texto); border-radius: 2px; box-shadow: 0 0 0 2px var(--superficie);
  animation: marca-entra 1s cubic-bezier(.2, .7, .2, 1) .15s both;
}
@keyframes marca-entra { from { left: 0; } }
.escala-umbrales { position: relative; height: 1.1rem; margin-top: .4rem; font-size: .75rem; color: var(--texto-2); font-variant-numeric: tabular-nums; }
.escala-umbrales span { position: absolute; transform: translateX(-50%); }
.escala-umbrales span:first-child { transform: none; }
.escala-umbrales span:last-child { transform: translateX(-100%); }

/* ---------------------------------------------------------------- gestión documental */
.ciclo-titulo {
  display: flex; align-items: baseline; gap: .75rem; margin-top: 1.5rem;
  font-family: var(--fuente-cond); font-size: 1.05rem; font-weight: 600; color: var(--texto);
}
.ciclo-titulo::after { content: ""; flex: 1; border-top: 1px solid var(--linea); transform: translateY(-.3em); }
.carpeta > summary { list-style: none; }
.carpeta > summary::-webkit-details-marker { display: none; }
.carpeta > summary .bi-chevron-right { transition: transform .15s; display: inline-block; color: var(--texto-2); }
.carpeta[open] > summary .bi-chevron-right { transform: rotate(90deg); }
.carpeta[open] > summary { border-bottom: 1px solid var(--linea); }
.carpeta:not([open]) > summary { border-bottom: 0; }

.item-fila { border-left: 2px solid transparent; }
.item-fila:hover { border-left-color: var(--sig); }
.item-fila.fuera-perfil { opacity: .55; }
.item-fila .codigo { min-width: 3.5rem; }

.timeline { border-left: 1px solid var(--linea-fuerte); padding-left: 1rem; }
.timeline > div { position: relative; padding-bottom: .9rem; }
.timeline > div::before {
  content: ""; position: absolute; left: calc(-1rem - 4.5px); top: .45rem;
  width: 8px; height: 8px; border-radius: 50%; background: var(--sig); box-shadow: 0 0 0 3px var(--superficie);
}

/* Pasos del estado documental */
.flujo { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; list-style: none; padding: 0; margin: 0; }
.flujo li { display: flex; align-items: center; gap: .5rem; color: var(--texto-2); }
.flujo .n {
  display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--elevada); border: 1px solid var(--linea-fuerte);
  font-family: var(--fuente-cond); font-size: .8rem; font-weight: 600;
}
.flujo li.actual { color: var(--texto); font-weight: 600; }
.flujo li.actual .n { background: var(--sig); border-color: var(--sig); color: var(--sobre-acento); }
.flujo li.hecho .n { background: rgba(var(--verde-rgb), .16); border-color: transparent; color: var(--verde); }

/* Carga de archivos */
.dropzone {
  position: relative; text-align: center; padding: 1.5rem 1rem; background: var(--fondo);
  border: 1.5px dashed var(--linea-fuerte); border-radius: .5rem; transition: background .15s, border-color .15s;
}
.dropzone:hover, .dropzone.activa, .dropzone:focus-within { background: rgba(var(--sig-rgb), .06); border-color: var(--sig); }
.dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }

.estado-plan { min-width: 7rem; }
.vista-previa iframe { height: 70vh; background: var(--elevada); border-color: var(--linea) !important; }

/* ---------------------------------------------------------------- selector de sistemas */
/* Los colores de cada sistema llegan desde gestion/views.py; en tema oscuro se aclaran (--sistema-pct). */
.tarjeta-sistema {
  --tono: color-mix(in oklab, var(--color-sistema) var(--sistema-pct), #fff);
  border-top: 3px solid var(--tono); transition: background-color .15s, border-color .15s;
}
.tarjeta-sistema:hover, .tarjeta-sistema:focus-visible { background-color: var(--elevada); border-color: var(--tono); }
.tarjeta-sistema:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }
.icono-sistema {
  width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; font-size: 1.35rem;
  color: var(--tono); background: color-mix(in oklab, var(--color-sistema) var(--sistema-fondo-pct), var(--superficie));
}
.barra-sistema { background: var(--tono); }
.pie-sistema { color: var(--tono); }

/* Selector de empresa */
.tarjeta-empresa:hover { background-color: var(--elevada); }
.tarjeta-empresa:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; }

/* ---------------------------------------------------------------- acceso y errores */
.acceso { min-height: calc(100vh - 5rem); display: grid; place-items: center; }
.acceso-caja { width: 100%; max-width: 400px; }
.acceso-marca { font-family: var(--fuente-cond); font-weight: 600; font-size: 2.75rem; line-height: 1; color: var(--texto); letter-spacing: .02em; }
.acceso-marca .bi { color: var(--sig); font-size: .8em; margin-right: .35rem; }
.normas { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; list-style: none; }
.normas li { padding: .15rem .5rem; border: 1px solid var(--linea); border-radius: .3rem; font-size: .75rem; color: var(--texto-2); }
.icono-grande { font-size: 3rem; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .escala-marca { animation: none; }
  .carpeta > summary .bi-chevron-right, .tarjeta-sistema, .dropzone { transition: none; }
}