/*
  tipografia.css — Sistema de COLORES del tenant (primario/secundario + semánticos)
  Cargado desde link_styles.html después de app.css (que define tamaños y layout base).
  Esta capa SOLO pisa colores — nunca font-size, gap, ni layout estructural.
*/

/* ════════════════════════════════════════════════════════
   VARIABLES DE COLOR — personalizables por tenant/usuario
   ════════════════════════════════════════════════════════

   ⚠ OJO CON EL NOMBRE. Los dos grupos NO se llaman igual y es fácil equivocarse:

     · personalizables  → SIN prefijo:  --primario   --secundario   (+ sus -r/-g/-b)
     · semánticos fijos → CON prefijo:  --color-ok   --color-warn   --color-danger   --color-user

   `--color-primario` y `--color-secundario` NO EXISTEN. Escribirlos no da error: la propiedad
   simplemente no aplica y el elemento se queda con lo que tenga heredado —el mismo silencio de
   `--text-xxs`—. Pasó el 2026-09-03 en los chips de /gestion/consultas/: la regla era letra muerta
   y el celeste quedaba fijo, sin seguir el color elegido por el usuario.

   Para un fondo translúcido del color del tema va la forma r/g/b, que es la que `base.html`
   reescribe con la preferencia de cada usuario:

       background: rgba(var(--primario-r), var(--primario-g), var(--primario-b), .09);

   Y para un `<a>` que hace de chip o de tarjeta hay que fijar `color`: sin eso Bootstrap le pone
   su #007bff, que no es ninguno de los dos colores del sistema.

   ── LA PALETA VISTE; EL SEMÁFORO INFORMA ─────────────────────────────
   Los dos grupos no se llaman distinto por capricho: hacen cosas distintas y por eso uno se
   personaliza y el otro NO (decisión de Carlos, 2026-09-08).

     · La PALETA —primario/secundario— es la ropa de la herramienta: identidad, navegación,
       botones, encabezados, lo que la pantalla ES y a dónde lleva. La elige cada usuario y
       todo eso se tiñe con ella.

     · El SEMÁFORO —ok/warn/danger— dice el ESTADO de algo del mundo real: una cuota vencida,
       un presupuesto aprobado, un trámite pendiente. Verde, naranja y rojo significan lo mismo
       en cualquier tema y no se tocan. Un usuario que elija violeta no puede terminar con la
       deuda en violeta: perdería la única señal que le importa leer de un vistazo.

   De ahí sale que un CHIP DE ESTADO pueda ir en relleno sólido y esté bien: no está "sin
   adaptar al tema", está deliberadamente afuera. El semáforo de los presupuestos —Aprobado /
   En revisión / En curso— y los importes de DEUDA en rojo son eso. Lo que sí se corrige es
   usar un color de estado para decir una ACCIÓN: un botón dice qué hace y va con la paleta;
   el chip de al lado dice cómo está y va con el semáforo. Ver la sección del botón grande.
   ════════════════════════════════════════════════════════ */

:root {
  /* ── Color primario (logo, íconos, botones principales) ─────────────── */
  --primario:   #3b92bd;
  --primario-r: 59;
  --primario-g: 146;
  --primario-b: 189;

  /* ── Color secundario (breadcrumb, botones secundarios) ──────────────── */
  --secundario:   #03c6bf;
  --secundario-r: 3;
  --secundario-g: 198;
  --secundario-b: 191;

  /* ── Colores semánticos fijos (no personalizables) ───────────────────── */
  --color-ok:     #166534;   /* verde — pagado, aprobado, activo */
  --color-warn:   #e67e22;   /* naranja — advertencia, parcial, vencido */
  --color-danger: #dc3545;   /* rojo — error, impago, eliminar */
  --color-user:   #7c3aed;   /* púrpura — usuario registrado */

  /* ── Escala de grises para texto ─────────────────────────────────────── */
  --color-muted:    #9ca3af;
  --color-subtle:   #6b7280;
  --color-body:     #374151;
  --color-strong:   #111827;

  /* ── Variables de fondo (personalizables via slider claridad) ─────────── */
  --fondo-pagina:  #f8f8f8;  /* fondo de .page-body-wrapper */
  --fondo-card:    #ffffff;  /* fondo de .card y .sidebar */
  --fondo-input:   #f8f9fc;  /* fondo de inputs dentro de cards */
  --borde-card:    #e4e4f4;  /* borde de .card */
  /* El borde de la card es casi invisible a propósito: separa la card del fondo. Para separar
     ITEMS DENTRO de una card hace falta algo que se vea —una lista de puntos con líneas de
     #e4e4f4 se lee como un bloque continuo— sin llegar al peso de un borde de tabla. */
  --linea-separadora: #c9cbdb;  /* separador entre ítems de una lista dentro de card */
  --texto-base:    #001737;  /* color de texto principal */
}

/* ════════════════════════════════════════════════════════
   OVERRIDES DEL TEMA (sobreescriben light-style.css)
   ════════════════════════════════════════════════════════ */

/* ── Fondo de página, cards, sidebar ────────────────── */
html,
body                { background: var(--fondo-pagina) !important; }
.page-body-wrapper  { background: var(--fondo-pagina) !important; }
.footer             { background: var(--fondo-pagina) !important; }
.card              { background-color: var(--fondo-card) !important;
                     border: 1px solid rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
.sidebar           { background: var(--fondo-card) !important;
                     border: 1px solid rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }

/* ── Texto global → se adapta al fondo vía --texto-base ─────────────
   Esto hace que tablas, sidebar, labels hereden el color correcto.
   ────────────────────────────────────────────────────────────────── */
body { color: var(--texto-base) !important; }

/* ── Navbar: nombre de usuario + ícono perfil ──────────── */
.navbar .nav-profile-name {
  color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
}
.navbar .nav-item.nav-profile .nav-link img {
  filter: none;
}

/* ── Navbar: caja abierta → acento; cerrada → gris ─────── */
.navbar .icon-verde {
  color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
}

/* ── Navbar derecha: íconos adaptativos al acento ──────── */
.navbar .navbar-nav-right .nav-link i,
.navbar .navbar-nav-right .btn-theme-toggle i {
  color:     rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
  font-size: var(--icon-md) !important;
}

/* ── Navbar: línea inferior + logo area ───────────────── */
.navbar {
  border-bottom: 4px solid rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
}
.navbar .navbar-brand-wrapper {
  background: color-mix(in srgb, var(--primario) 75%, #000 25%) !important;
}

/* ── btn-primary → usa el acento en lugar del azul Bootstrap ── */
.btn-primary {
  background-color: color-mix(in srgb, var(--primario) 80%, #fff 20%) !important;
  border-color:     color-mix(in srgb, var(--primario) 80%, #fff 20%) !important;
  color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--primario) !important;
  border-color:     var(--primario) !important;
}

/* ── Barra breadcrumb → secundario sólido, íconos blancos ────────────── */
.navbar-breadcrumb {
  background: var(--secundario) !important;
  border-bottom: none !important;
}
.navbar-breadcrumb .navbar-links-wrapper .nav-link {
  border-right-color: rgba(255,255,255,0.20) !important;
  display: flex !important;
  align-items: center !important;
}

/* ── El corte entre el BUSCADOR y el selector de propiedad ────────────────────────────────
   Esta franja mide exactamente lo que el sidebar (`width: calc(236px + 0.5rem)`), así que su
   borde derecho cae justo donde arriba termina el logo y la barra se vuelve blanca: es el mismo
   corte, una fila más abajo. Antes lo marcaba una línea de 1px que no se veía; ahora son 3px de
   alto completo, así que las dos secciones se leen como dos zonas y no como una sola corrida. */
.navbar-breadcrumb .navbar-links-wrapper {
  border-right: 3px solid rgba(255,255,255,0.38) !important;
  align-self: stretch;                    /* alto completo de la barra, no el del contenido */
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
/* La CAJA de búsqueda, con la forma que le daba el tema.
   Las reglas de light-style.css cuelgan de `.navbar-menu-wrapper` —donde vivía el buscador— y
   esta franja es `.navbar-links-wrapper`, así que ninguna le alcanzaba y la caja quedaba con el
   `form-control` pelado de Bootstrap. Son las MISMAS medidas del tema (líneas 25215-25243),
   reproducidas para la ubicación nueva; el ancho se adapta a la franja en vez del 13.375rem fijo,
   que acá se pasaba de largo. */
.navbar-breadcrumb .navbar-links-wrapper .navbar-nav          { flex-direction: row; width: 100%; }
.navbar-breadcrumb .navbar-links-wrapper .nav-item.nav-search { margin-left: 0; width: 100%; list-style: none; }
.navbar-breadcrumb .navbar-links-wrapper .nav-item.nav-search .input-group {
  background: #fff;
  border-radius: 2px;
}
.navbar-breadcrumb .navbar-links-wrapper .nav-item.nav-search .input-group .form-control {
  margin-left: .5rem;
  height: 2.312rem;
  padding: 0 .4rem;
  min-width: 0;                            /* deja que el flex lo achique en vez de desbordar */
  border: 0;
  background: transparent;
}
.navbar-breadcrumb .navbar-links-wrapper .nav-item.nav-search .input-group .input-group-text {
  background: transparent;
  border: 0;
  color: #001737;
  padding: 0 .4rem;
  height: auto;
}
.navbar-breadcrumb .navbar-links-wrapper .nav-link a {
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}
.navbar-breadcrumb .busqueda-candado .nav-item,
.navbar-breadcrumb .busqueda-candado > ul,
.navbar-breadcrumb .busqueda-candado .d-flex {
  align-items: center !important;
}
.navbar-breadcrumb .btn-sticky-toggle i {
  margin-top: 0 !important;
}
/* íconos y texto sobre fondo sólido → blancos */
.navbar-breadcrumb .nav-link a i,
.navbar-breadcrumb .nav-link a .material-symbols-outlined,
.navbar-breadcrumb .material-symbols-outlined,
.navbar-breadcrumb h5,
.navbar-breadcrumb .bc-grupo-btn {
  color: rgba(255,255,255,0.90) !important;
}
/* select e inputs: texto oscuro para que sea legible sobre fondo blanco */
.navbar-breadcrumb .form-control {
  color: #001737 !important;
}
/* botón Seleccionar: primario sólido */
.navbar-breadcrumb .btn-primary {
  background-color: var(--primario) !important;
  border-color: var(--primario) !important;
}
/* ícono activo: resalte blanco semitransparente */
.navbar-breadcrumb .nav-link a.icono-activo {
  background: rgba(255,255,255,0.25) !important;
  border-radius: 8px !important;
  outline: none !important;
  padding: 4px !important;
}
.navbar-breadcrumb .nav-link a.icono-activo i,
.navbar-breadcrumb .nav-link a.icono-activo .material-symbols-outlined {
  color: #fff !important;
}

/* ── Barra breadcrumb: permitir crecimiento libre de los grupos ── */
.navbar-breadcrumb .navbar-menu-wrapper { justify-content: flex-start !important; overflow: visible !important; }
.navbar-breadcrumb .busqueda-candado    { margin-left: auto; }

/* ── Grupos colapsables (Gestión / Comunidad / Operaciones) ── */
.bc-grupos { gap: 0; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.bc-grupos::-webkit-scrollbar { display: none; }
.bc-grupo  { display: flex; align-items: stretch; flex-shrink: 0; }

.bc-grupo-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: none;
  border-right: 1px solid rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.25);
  padding: 0 12px;
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1);
  white-space: nowrap;
  transition: background 0.15s;
}
.bc-grupo-btn:hover,
.bc-grupo.open .bc-grupo-btn {
  background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.08);
}
.bc-grupo-btn > i:first-child { font-size: var(--icon-sm); }
.bc-grupo-btn .bc-arrow       { font-size: 14px; transition: transform 0.2s; }
.bc-grupo.open .bc-grupo-btn .bc-arrow { transform: rotate(90deg); }

/* Íconos inline — empujan los demás chips al expandir */
.bc-grupo-items { display: none !important; }
.bc-grupo.open .bc-grupo-items { display: flex !important; }

/* Nav-links dentro de los grupos — mismo estilo que los de la barra izquierda */
.bc-grupo-items .nav-link {
  display: flex !important;
  align-items: center !important;
  border-right: 1px solid rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.25) !important;
  flex-shrink: 0;
}
.bc-grupo-items .nav-link a {
  margin-top: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* ── Sidebar: sub-menú (ítems sin ícono) → acento + bullet acento ──── */
.sidebar .nav.sub-menu .nav-item .nav-link {
  color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
  font-size: var(--text-sm) !important;
}
.sidebar .nav.sub-menu .nav-item .nav-link .menu-title {
  font-size: var(--text-sm) !important;
}
.sidebar .nav.sub-menu .nav-item::before {
  background: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 0.7) !important;
}
.sidebar .nav.sub-menu .nav-item:has(.menu-icon)::before {
  display: none !important;
  content: none !important;
}

/* ── Acordeón refinado (solo sidebar admin): guía de indentación vertical ──
   La línea guía reemplaza a los bullets de cada sub-ítem. Su color usa
   --pkg-color cuando "Menú multicolor" está ON (heredado del <li> de la
   sección); si no, cae a un primario tenue → idéntico a hoy.
   ──────────────────────────────────────────────────────────────────────── */
.sidebar-refinado .nav.sub-menu {
  margin-left: 15px;
  padding-left: 0;
  border-left: 2px solid var(--pkg-color, var(--secundario)) !important;
}
.sidebar-refinado .nav.sub-menu .nav-item::before {
  display: none !important;
  content: none !important;
}

/* ── Sidebar: todos los ítems → acento + tamaño escalable ── */
.sidebar .nav .nav-item .nav-link .menu-title,
.sidebar .nav .nav-item .nav-link .menu-arrow {
  color:     rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
  font-size: var(--text-md) !important;
}
.sidebar .nav .nav-item .nav-link i.menu-icon {
  color:     rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
  font-size: var(--icon-lg) !important;
}
/* Ítem activo Bootstrap (.active) */
.sidebar .nav .nav-item.active > .nav-link {
  background: rgba(var(--secundario-r), var(--secundario-g), var(--secundario-b), 0.14) !important;
}
.sidebar .nav .nav-item.active > .nav-link .menu-title,
.sidebar .nav .nav-item.active > .nav-link i.menu-icon,
.sidebar .nav .nav-item.active > .nav-link .menu-arrow {
  color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
  font-weight: 700 !important;
}
/* Ítem activo detectado por JS (URL match) */
.sidebar .sidebar-link-activo {
  background: rgba(var(--secundario-r), var(--secundario-g), var(--secundario-b), 0.14) !important;
  box-shadow: inset 3px 0 0 rgba(var(--secundario-r), var(--secundario-g), var(--secundario-b), 1) !important;
  border-radius: 0 6px 6px 0 !important;
}
.sidebar .sidebar-link-activo .menu-title,
.sidebar .sidebar-link-activo i.menu-icon {
  font-weight: 700 !important;
}
/* Sección padre del ítem activo */
.sidebar .sidebar-seccion-activa > .menu-title,
.sidebar .sidebar-seccion-activa > i.menu-icon {
  font-weight: 700 !important;
  opacity: 1 !important;
}

/* ── Encabezado de vista: el H4 tiene UN tamaño (S13) ─────────────────────────────
   El protocolo dice `font-size:var(--text-h3)` para el título de toda vista, pero eso vivía
   sólo en el HTML de cada template: 125 de ellos no lo declaraban y caían al tamaño por
   defecto del navegador, así que el mismo título se veía distinto según la pantalla —
   `/finanzas/ingresos/` bien y `/finanzas/egresos/crear/` mucho más grande.

   Va acá y no en 125 archivos porque es UNA regla del protocolo, no 125 decisiones. Sin
   `!important` a propósito: los templates que ya declaran su tamaño inline lo conservan
   (el inline gana), así que esto sólo alcanza a los que no decían nada. */
.page-header h4,
.page-header-title h4                             { font-size: var(--text-h3); }

/* ── S13b · Las ACCIONES del encabezado van a la DERECHA ────────────────────────────────
   `page-header-actions` está escrito en **98 plantillas** y no tenía una sola regla de CSS en
   todo el proyecto: el botón principal de cada pantalla —«Nuevo contrato», «Nueva propiedad»—
   caía debajo del breadcrumb, pegado a la izquierda, como si fuera parte de la ubicación.
   Medido el 2026-09-21 rehaciendo el listado de contratos.

   Va con `:has(> .page-header-actions)` para tocar SÓLO los encabezados que declaran acciones:
   un `display:flex` suelto sobre `.page-header` cambiaría también los que no las tienen. Y con
   `flex-wrap`, porque en pantalla angosta el botón tiene que poder bajar. */
.page-header:has(> .page-header-actions) {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.page-header > .page-header-actions {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}

/* ── Sidebar: colores por paquete via CSS custom property --pkg-color ── */
/* Cada <li> recibe style="--pkg-color:#hex" server-side cuando heredar_paquete=ON.
   Especificidad (0,6,1) > regla base (0,5,0) — gana con !important. */
body.heredar-paquete .sidebar .nav .nav-item .nav-link .menu-title,
body.heredar-paquete .sidebar .nav .nav-item .nav-link .menu-icon,
body.heredar-paquete .sidebar .nav .nav-item .nav-link .menu-arrow {
  color: var(--pkg-color, var(--primario)) !important;
}
body.heredar-paquete .sidebar .nav.sub-menu .nav-item .nav-link {
  color: var(--pkg-color, var(--primario)) !important;
}
body.heredar-paquete .sidebar .nav.sub-menu .nav-item::before {
  background: var(--pkg-color, rgba(var(--primario-r),var(--primario-g),var(--primario-b),.7)) !important;
}
/* Menú multicolor: el ítem activo del sidebar admin toma el color del dominio
   (barra lateral + tinte). El --pkg-color lo hereda del <li> de la sección. */
body.heredar-paquete .sidebar-refinado .sidebar-link-activo {
  background:  color-mix(in srgb, var(--pkg-color, var(--secundario)) 14%, transparent) !important;
  box-shadow:  inset 3px 0 0 var(--pkg-color, var(--secundario)) !important;
}

/* ── Tablas → texto y bordes adaptativos ─────────────── */
.table          { color: var(--texto-base)   !important; }
.table td,
.table th       { border-color: var(--borde-card) !important;
                  color: var(--texto-base) !important; }
.table thead th { color: var(--color-subtle) !important;
                  border-color: var(--borde-card) !important; }
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 0.04) !important;
}

/* ── accent-color global → checkboxes y radios nativos ─────────────── */
input[type="checkbox"],
input[type="radio"] {
  accent-color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1);
}

/* ── optgroup.bold-option → acento en lugar de bordo hardcodeado (app.css) ── */
optgroup.bold-option {
  color:            color-mix(in srgb, var(--primario) 75%, #000 25%) !important;
  background-color: #ffffff !important;
  font-weight:      700 !important;
  font-style:       normal !important;
}

/* ── Toggle switch custom (light-style.css) → usa el acento ─────────── */
.toggle-switch input:checked + .toggle-slider,
.toggle-switch.toggle-switch-primary input:checked + .toggle-slider,
.toggle-switch.toggle-switch-info    input:checked + .toggle-slider,
.toggle-switch.toggle-switch-success input:checked + .toggle-slider,
.toggle-switch.toggle-switch-warning input:checked + .toggle-slider,
.toggle-switch.toggle-switch-danger  input:checked + .toggle-slider {
  background-color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
}

/* ── Inputs y selects → fondo y texto adaptativos ───── */
.form-control {
  background-color: var(--fondo-input) !important;
  color:            var(--texto-base)  !important;
  border-color:     var(--borde-card)  !important;
}
.form-control:disabled,
.form-control[readonly] {
  background-color: color-mix(in srgb, var(--fondo-input) 80%, #888 20%) !important;
}
select.form-control option {
  background-color: #ffffff !important;
  color:            rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1);
}
select.form-control optgroup {
  background-color: #ffffff !important;
  color:            color-mix(in srgb, var(--primario) 75%, #000 25%);
  font-weight:      700;
}
select.form-control optgroup option {
  background-color: #ffffff !important;
  color:       rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1);
  font-weight: 400;
  padding-left: 8px;
}


/* ── EL DESPLEGABLE DEL SELECT, CON EL COLOR DE LA CASA ────────────────────────────────────
   La lista que se abre al desplegar un `<select>` la dibuja el NAVEGADOR, no la página: la
   franja del elemento sobre el que está el mouse sale del azul del sistema y no del tema. Se
   comprobó: con `option:checked { background: … !important }` el popup nativo sigue pintando
   azul. Lo mismo `accent-color`, `linear-gradient` y `box-shadow` — ninguno lo toca.

   `appearance: base-select` es la forma nueva y estándar de tomar el control: convierte el
   desplegable en DOM de verdad, con `::picker(select)`, y ahí sí `option:hover` y
   `option:checked` valen.

   Va dentro de `@supports` a propósito. Donde el navegador lo entiende —Chrome y Edge nuevos—
   el desplegable toma el secundario; donde no —Firefox, Safari, Chrome viejo— NO PASA NADA y
   queda el select nativo de siempre. Ninguna pantalla depende de esto para funcionar.

   Se acota a `select.form-control` y `select.form-select`, que es como está marcado el 99% de
   los selects del proyecto: `appearance` cambia el dibujo del control, y no conviene aplicarlo
   a ciegas sobre un `<select>` suelto que nadie estilizó. */
@supports (appearance: base-select) {

  select.form-control, select.form-select, .pf-inp select,
  select.form-control::picker(select), select.form-select::picker(select),
  .pf-inp select::picker(select) {
    appearance: base-select;
  }

  /* El control CERRADO tiene que seguir viéndose igual que antes: `base-select` lo devuelve en
     crudo, así que hay que repetir lo que el navegador ponía solo. */
  /* El de la ficha S12 va SIN borde ni fondo propios: se los pone `.pf-inp`, que es la caja
     que lo envuelve. Repetirlos acá dibujaría un recuadro dentro de otro. */
  .pf-inp select { border: 0; background: transparent; padding: 0; }
  select.form-control, select.form-select {
    border: 1px solid var(--borde-card);
    border-radius: 4px;
    padding: .375rem .75rem;
    background-color: var(--fondo-input);
    color: var(--texto-base);
    text-align: start;
    /* El texto a la izquierda y la flecha pegada a la derecha, en UNA línea. Sin esto, en el
       selector de propiedad de la barra —que tiene `w-100` y alto fijo— la flecha se iba abajo
       del texto: `base-select` devuelve el control en crudo y el acomodo interno es cosa nuestra. */
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  select.form-control::select-arrow, select.form-select::select-arrow,
  .pf-inp select::select-arrow { flex-shrink: 0; }
  /* Un nombre largo se corta con puntos suspensivos en vez de empujar la flecha fuera. */
  select.form-control > button, select.form-select > button,
  select.form-control::before, select.form-select::before {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  select.form-control-sm { padding: .25rem .5rem; }
  select.form-control:focus-visible, select.form-select:focus-visible,
  .pf-inp select:focus-visible {
    outline: 2px solid rgba(var(--primario-r), var(--primario-g), var(--primario-b), .45);
    outline-offset: 1px;
  }

  /* La lista */
  select.form-control::picker(select), select.form-select::picker(select),
  .pf-inp select::picker(select) {
    border: 1px solid var(--borde-card);
    border-radius: 8px;
    background: var(--fondo-card, #fff);
    padding: 4px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .14);
  }
  select.form-control option, select.form-select option, .pf-inp select option {
    padding: 6px 10px;
    border-radius: 5px;
    background: transparent !important;   /* gana sobre el `#ffffff !important` de más arriba */
    color: var(--texto-base);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* ── EL ÍCONO DE CADA FILA ────────────────────────────────────────────────────────────
     Lo pone el CSS a partir de `data-icono`, y NO un `<i>` dentro del `<option>`: un `<option>`
     nativo sólo admite texto, así que una etiqueta adentro se vería como texto crudo
     ("apartment Complejo Medanos") en cualquier navegador sin `base-select`. Naciendo del CSS,
     el que no lo soporta no dibuja nada.

     `margin-left:auto` lo manda al borde derecho, así que los íconos quedan en columna aunque los
     nombres midan distinto. */
  select.form-control option[data-icono]::after,
  select.form-select  option[data-icono]::after,
  .pf-inp select option[data-icono]::after {
    content: attr(data-icono);
    font-family: 'Material Symbols Outlined';
    font-size: var(--icon-sm);
    font-weight: normal;
    line-height: 1;
    margin-left: auto;
    opacity: .75;
    /* Las ligaduras son lo que convierte la palabra "apartment" en el dibujo. Sin esto se lee
       la palabra. */
    font-variant-ligatures: common-ligatures;
    -webkit-font-feature-settings: 'liga';
            font-feature-settings: 'liga';
  }

  /* LO QUE SE PIDIÓ: la franja que recorre el mouse, en el color secundario. */
  select.form-control option:hover,  select.form-select option:hover, .pf-inp select option:hover,
  select.form-control option:focus,  select.form-select option:focus, .pf-inp select option:focus {
    background: var(--secundario) !important;
    color: #fff !important;
  }
  /* Y el que está elegido, en el mismo color pero apagado: tiene que distinguirse del que estás
     recorriendo, si no al abrir la lista no se sabe cuál es el actual. */
  select.form-control option:checked, select.form-select option:checked,
  .pf-inp select option:checked {
    background: color-mix(in srgb, var(--secundario) 15%, var(--fondo-card, #fff)) !important;
    color: var(--secundario) !important;
    font-weight: 600;
  }
  select.form-control optgroup, select.form-select optgroup, .pf-inp select optgroup {
    background: transparent !important;
    color: var(--color-subtle);
  }
}

/* ── Banners de estado: fondo siempre rgba (nunca sólido) ─
   Corrige el banner "Aplicado" que puede tener border sólido.
   ────────────────────────────────────────────────────────── */
.bg-ok, .bg-warn, .bg-danger, .bg-primary, .bg-secundario, .bg-user, .bg-muted {
  border-radius: 4px !important;
}

/* ════════════════════════════════════════════════════════
   SISTEMA DE COLORES SEMÁNTICOS
   Aplicar como clase CSS en lugar de style inline.
   ════════════════════════════════════════════════════════ */

/* ── Textos e íconos ──────────────────────────────────────────────────────
   !important necesario: .card .card-description define color:#76838f
   con especificidad 0,2,0 que gana sobre clases simples 0,1,0.
   ────────────────────────────────────────────────────────────────────── */
.c-ok      { color: var(--color-ok)     !important; }   /* pagado, aprobado, descuento */
.c-warn    { color: var(--color-warn)   !important; }   /* mora, parcial, vencido, atención */
.c-danger  { color: var(--color-danger) !important; }   /* impago, alerta, mora alta */
.c-primary { color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important; }
.c-entidad { color: rgba(var(--secundario-r), var(--secundario-g), var(--secundario-b), 1) !important; }   /* nombre de propiedad, unidad o usuario */

/* ── S: CHIPS DE FILTRO ───────────────────────────────────────────────────────────────────
   El selector de filtro que encabeza los listados: "Abiertos · En mora · Vencen en 30 días…".

   Cada pantalla se venía escribiendo el suyo —`cv-lente` en conversaciones, `rc-chip` en
   reclamos, `ob-chip` en obras, `cmp-chip` en compromisos— y todos quedaban distintos: unos
   pill y otros cuadrados, unos con el activo en relleno sólido y otros en fondo suave. Esto es
   el acuerdo, y sale del de conversaciones, que era el mejor resuelto.

   Dos reglas que parecen detalle y no lo son:

   · Un chip apagado es un `<a>`, y sin `color` propio Bootstrap se lo pinta de #007bff — un
     azul que no es ninguno de los dos colores del sistema y que ignora el tema del usuario.
     Apagado va en el gris de metadatos.
   · Los colores salen de `--primario` / `--secundario` y sus componentes r/g/b, que es lo que
     `base.html` reescribe con la preferencia de cada usuario. Escribirlos a mano congela el
     tema.

   Uso:
     <div class="chip-filtros">
       <a href="?"          class="chip-filtro on">…      <b>9</b></a>
       <a href="?foco=mora" class="chip-filtro on-danger">… <b>5</b></a>
       <span class="chip-filtro-sep"></span>
     </div>                                                                                   */
/* El margen de abajo va EN LA CLASE y no en cada pantalla: los chips siempre tienen algo
   debajo —una tabla, una lista— y sin él la cabecera de la tabla se pega a la botonera y se
   lee como una fila más de filtros. Cada pantalla lo traía por su cuenta (12px en una, 14px en
   otra) y al unificar los chips las tres se quedaron sin él, que es cómo se detectó. */
.chip-filtros      { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
                     margin-bottom:16px; }
.chip-filtro       { display:inline-flex; align-items:center; gap:5px; padding:5px 13px;
                     border-radius:999px; border:1px solid var(--borde-card,#e4e4f4);
                     font-size:var(--text-xs); color:var(--color-subtle);
                     text-decoration:none; white-space:nowrap; background:#fff; }
.chip-filtro:hover,
.chip-filtro:focus { text-decoration:none; color:var(--primario); border-color:var(--primario); }
.chip-filtro .material-symbols-outlined { font-size:var(--icon-xs); }
/* El conteo hereda el color del chip: en un chip encendido, un `b` gris lo parte en dos. */
.chip-filtro b     { color:inherit; font-weight:700; }

/* ENCENDIDO — cada eje toma SU color, el mismo que su indicador en la tira de arriba. */
.chip-filtro.on         { border-color:var(--primario); font-weight:600; color:var(--primario);
                          background:rgba(var(--primario-r),var(--primario-g),var(--primario-b),.09); }
.chip-filtro.on-entidad { border-color:var(--secundario); font-weight:600; color:var(--secundario);
                          background:rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),.10); }
.chip-filtro.on-entidad:hover { border-color:var(--secundario); color:var(--secundario); }
.chip-filtro.on-warn    { border-color:var(--color-warn); font-weight:600; color:var(--color-warn) !important;
                          background:rgba(230,126,34,.10); }
.chip-filtro.on-warn:hover { border-color:var(--color-warn); }
.chip-filtro.on-danger  { border-color:var(--color-danger); font-weight:600; color:var(--color-danger) !important;
                          background:rgba(220,53,69,.08); }
.chip-filtro.on-danger:hover { border-color:var(--color-danger); }
.chip-filtro.on-ok      { border-color:var(--color-ok); font-weight:600; color:var(--color-ok) !important;
                          background:rgba(22,101,52,.08); }
.chip-filtro.on-ok:hover { border-color:var(--color-ok); }

/* El separador entre grupos de chips: dos ejes distintos no se leen como una sola botonera. */
.chip-filtro-sep   { width:1px; height:22px; background:var(--borde-card,#e4e4f4); margin:0 4px; }

/* La ETIQUETA que nombra un eje — "Forma", "Situación", "Período", "Filtro". Va delante de sus
   chips y dice de qué se está filtrando; con dos ejes en pantalla es lo único que impide leerlos
   como una sola botonera de siete botones.

   Estaba escrita a mano en cada pantalla: el mismo `font-size + uppercase + letter-spacing + gris`
   repetido en el `style=` de un span, con tres valores distintos de `letter-spacing` y en un caso
   el gris hardcodeado en #8a92a0 en vez del token. En propiedades, además, con `var(--text-xxs)`
   —un token que NO EXISTE— así que ahí se dibujaba a 16px, el tamaño del cuerpo. */
.filtro-eje        { font-size:var(--text-2xs); font-weight:700; text-transform:uppercase;
                     letter-spacing:.05em; color:var(--color-subtle); margin-right:2px; }


/* ── S: EL FILTRO EN FORMULARIO ───────────────────────────────────────────────────────────
   La OTRA forma del filtro, y la que los chips no pueden dar.

   Un `chip-filtro` sirve cuando el eje tiene pocas opciones fijas y un número que vale la
   pena mostrar: "Cocheras 42", "Sin retirar 9". No sirve cuando hay un RANGO DE FECHAS, un
   texto libre, o una lista con una opción por unidad del edificio — ahí no hay chips que
   alcancen y va un formulario. Las dos formas son del protocolo; lo que no puede pasar es
   que cada pantalla invente la suya.

   Y eso es lo que había. Al escribir esto, la etiqueta de un filtro estaba escrita a mano
   160 veces, siempre igual y siempre distinta: 150 en `--text-xs` —que es el tamaño del
   CUERPO, así que la etiqueta pesaba lo mismo que el dato—, 9 en `--text-sm` y una en
   `--text-xxs`, un token que NO EXISTE y que ahí se dibujaba a 16px. Los controles, 392 en
   `-sm` y 757 en tamaño normal, sin criterio: la misma pantalla mezclaba los dos.

   LA ETIQUETA USA `filtro-eje`, la misma que nombra un eje de chips. Es lo que hace que un
   filtro de combos y uno de chips se lean como la misma pieza y no como dos inventos: en
   las dos, arriba está el nombre del eje en 2xs mayúscula y abajo con qué se filtra.

   El botón va con la paleta como cualquier otro: filtrar es Secundaria (`btn-outline-primary`),
   nunca el gris Neutral —que es "Cancelar"— ni el sólido Principal, que es de la acción a la
   que vino la pantalla. */
.filtro-form              { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 12px;
                            margin-bottom:16px; }
/* Cada campo con su etiqueta arriba. Crece con el espacio y no baja de 150px, que es donde
   un `<select>` deja de mostrar su opción más larga. */
.filtro-form .ff-campo    { display:flex; flex-direction:column; min-width:0; flex:1 1 150px; }
/* Fechas y códigos: piden menos ancho que un nombre y quedan enormes con el mismo reparto.
   El piso son 159px, que es lo que MIDE un `input[type=date]` con su selector en este tema:
   por debajo el navegador recorta el "dd/mm/aaaa" y el iconito se le monta encima. */
.filtro-form .ff-campo.ff-corto { flex:0 1 160px; }
.filtro-form .filtro-eje  { display:block; margin:0 0 4px; }
/* El bloque de acciones no crece: el formulario reparte el ancho entre los campos. */
.filtro-form .ff-acciones { display:flex; align-items:flex-end; gap:8px; flex:0 0 auto; }
/* En teléfono cada campo toma su renglón: dos combos a media pantalla no muestran nada. */
@media (max-width: 575.98px){
  .filtro-form .ff-campo, .filtro-form .ff-campo.ff-corto { flex:1 1 100%; }
  .filtro-form .ff-acciones{ width:100%; }
  .filtro-form .ff-acciones .btn{ width:100%; }
}


/* ── S: CHECKBOX ALINEADO ─────────────────────────────────────────────────────────────────
   El `.form-check` de Bootstrap saca el input del flujo (`position:absolute`) y lo mete dentro
   del padding del contenedor con `margin-left:-1.25rem`. Pero `light-style.css:21232` le pone
   `padding-left:0` al `.form-check`: sin ese padding el input queda 20px A LA IZQUIERDA del
   borde — medido, 4px afuera de un modal.

   Tres pantallas lo venían parcheando por separado y cada una con medidas distintas (egresos con
   `padding-left:1rem`, reclamos y obras con flex). Esto es el arreglo compartido, y es aditivo:
   NO toca `.form-check` ni `.form-check-input`, que las usan ~25 plantillas y moverlas correría
   todos los checkbox del sistema.

   Uso:  <div class="form-check check-alineado"> … </div>                                      */
.check-alineado                          { display:flex; align-items:flex-start; gap:9px; padding-left:0; }
.check-alineado .form-check-input        { position:static; margin:3px 0 0 0; flex-shrink:0; }
.check-alineado .form-check-label        { margin-left:0; min-height:0; }
.c-user    { color: var(--color-user)   !important; }   /* ícono usuario registrado */
.c-muted   { color: var(--color-muted)  !important; }   /* texto muy secundario, metadatos */
.c-subtle  { color: var(--color-subtle) !important; }   /* labels, encabezados de tabla */
.c-strong  { color: var(--color-strong) !important; }   /* valores importantes, títulos */

/* ── Fondos de mensajes/banners — siempre claros ────────────────────────
   color-mix(color, #fff) produce un pastel claro en TODO contexto
   (modo claro y oscuro) para que los mensajes de estado sean siempre
   visibles y legibles. Los chips usan .chip-* con su propio rgba.
   ────────────────────────────────────────────────────────────────────── */
.bg-ok      { background: color-mix(in srgb, #166534 12%, #fff 88%) !important; }   /* verde pastel */
.bg-warn    { background: color-mix(in srgb, #e67e22 12%, #fff 88%) !important; }   /* naranja pastel */
.bg-danger  { background: color-mix(in srgb, #dc3545 12%, #fff 88%) !important; }   /* rojo pastel */
.bg-primary { background: color-mix(in srgb, var(--primario) 12%, #fff 88%) !important; }  /* acento pastel */
/* El secundario ya era un color de primera clase (`c-entidad`, `chip-secundario`) pero no tenía su
   pastel de fondo, así que un indicador del eje "entidad" no podía pintarse como los demás. */
.bg-secundario { background: color-mix(in srgb, var(--secundario) 12%, #fff 88%) !important; }
.bg-user    { background: color-mix(in srgb, #7c3aed 10%, #fff 90%) !important; }   /* púrpura pastel */
.bg-muted   { background: color-mix(in srgb, #6c757d  8%, #fff 92%) !important; }   /* gris muy suave */

/* ── Chips: fondo rgba + texto + borde ───────────────────────────────────
   Ej: <span class="chip-ok">Pagada</span>
   ────────────────────────────────────────────────────────────────────── */
.chip-ok      { background:rgba(22,101,52,0.08);   color:var(--color-ok)     !important; border:1px solid rgba(22,101,52,0.25);   border-radius:4px; padding:2px 8px; display:inline-block; }
.chip-warn    { background:rgba(230,126,34,0.10);  color:var(--color-warn)   !important; border:1px solid rgba(230,126,34,0.30);  border-radius:4px; padding:2px 8px; display:inline-block; }
.chip-danger  { background:rgba(220,53,69,0.08);   color:var(--color-danger) !important; border:1px solid rgba(220,53,69,0.25);   border-radius:4px; padding:2px 8px; display:inline-block; }
.chip-primary { background:rgba(var(--primario-r), var(--primario-g), var(--primario-b), 0.10);
                color:rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
                border:1px solid rgba(var(--primario-r), var(--primario-g), var(--primario-b), 0.30);
                border-radius:4px; padding:2px 8px; display:inline-block; }
.chip-secundario { background:rgba(var(--secundario-r), var(--secundario-g), var(--secundario-b), 0.10);
                   color:rgba(var(--secundario-r), var(--secundario-g), var(--secundario-b), 1) !important;
                   border:1px solid rgba(var(--secundario-r), var(--secundario-g), var(--secundario-b), 0.30);
                   border-radius:4px; padding:2px 8px; display:inline-block; }
.chip-muted   { background:rgba(108,117,125,0.06); color:var(--color-subtle) !important; border:1px solid rgba(108,117,125,0.20); border-radius:4px; padding:2px 8px; display:inline-block; }

/* ── Badge secundario (ej: "En curso" en presupuesto) ── */
.badge-secundario { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important;
                    color: #fff !important; }
.chip-user    { background:rgba(124,58,237,0.08);  color:var(--color-user)   !important; border:1px solid rgba(124,58,237,0.25);  border-radius:4px; padding:2px 8px; display:inline-block; }

/* ── Banner de estado — variantes de color ────────────────────────────────
   Layout base en app.css (.banner-estado). Aquí solo los colores por tipo.
   ────────────────────────────────────────────────────────────────────── */
.banner-estado.warn    { background:rgba(230,126,34,0.08);  border-color:rgba(230,126,34,0.30);  border-left-color: var(--color-warn); }
.banner-estado.ok      { background:rgba(22,101,52,0.08);   border-color:rgba(22,101,52,0.30);   border-left-color: var(--color-ok); }
.banner-estado.primary { background:rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.08); border-color:rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.30); border-left-color:rgba(var(--primario-r),var(--primario-g),var(--primario-b),1); }
.banner-estado.danger  { background:rgba(220,53,69,0.08);   border-color:rgba(220,53,69,0.25);   border-left-color: var(--color-danger); }
.banner-estado.muted   { background:rgba(108,117,125,0.06); border-color:rgba(108,117,125,0.20); border-left-color: var(--color-muted); }

/* ── Cuadritos de unidades (grilla de estado de pago) ────────────────────
   Usar en: grilla de unidades en presupuesto_ver
   ────────────────────────────────────────────────────────────────────── */
.unit-ok     { background:rgba(56,189,248,0.35);  border:1px solid #38bdf8; color:#075985; }
.unit-warn   { background:rgba(251,191,36,0.35);  border:1px solid #fbbf24; color:#78350f; }
.unit-danger { background:rgba(248,113,113,0.25); border:1px solid #f87171; color:#9f1239; }

/* ════════════════════════════════════════════════════════
   DARK THEME — Dark Charcoal
   Se activa con data-theme="dark" en <html>.
   Overrides COMPLETOS del dark-navy de app.css (cargado antes).
   Misma especificidad [data-theme="dark"] → last-rule-wins.
   ════════════════════════════════════════════════════════ */

/* ── Variables: tokens base → charcoal neutro ── */
[data-theme="dark"] {
  --fondo-pagina: #1e1e1e;
  --fondo-card:   #252526;
  --fondo-input:  #2a2b30;
  --borde-card:   #3e3e42;
  --linea-separadora: #4d4d55;
  --texto-base:   #cccccc;

  --color-muted:  #858585;
  --color-subtle: #999999;
  --color-body:   #cccccc;
  --color-strong: #e0e0e0;

  /* Semánticos más claros para fondos oscuros */
  --color-ok:     #4ade80;
  --color-warn:   #fb923c;
  --color-danger: #f87171;
  --color-user:   #a78bfa;
}

/* ════════════════════════════════════════════════
   Override completo del dark-navy de app.css
   Orden: app.css (navy) → tipografia.css (charcoal)
   Same [data-theme="dark"] specificity → last wins
   ════════════════════════════════════════════════ */

/* Body / scroller → charcoal neutro */
[data-theme="dark"] body,
[data-theme="dark"] .container-scroller          { background-color: #1e1e1e !important; color: #cccccc !important; }

/* Wrappers principales */
[data-theme="dark"] .main-panel,
[data-theme="dark"] .content-wrapper,
[data-theme="dark"] .page-body-wrapper           { background: #1e1e1e !important; }

/* ── Navbar ────────────────────────────────────── */
[data-theme="dark"] .navbar                      { background: #2d2d35 !important; border-bottom: 4px solid rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .navbar .navbar-brand-wrapper { background: color-mix(in srgb,var(--primario) 75%,#000 25%) !important; border-bottom: none !important; }
[data-theme="dark"] .navbar .navbar-menu-wrapper  { background: #2d2d35 !important; border-color: #3e3e42 !important; }

/* Texto/links navbar → acento */
[data-theme="dark"] .navbar .nav-link,
[data-theme="dark"] .navbar h6,
[data-theme="dark"] .navbar .date,
[data-theme="dark"] .navbar .nav-profile-name    { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }

/* Iconos navbar derecha y toggle → acento */
[data-theme="dark"] .navbar .navbar-nav-right .nav-link i,
[data-theme="dark"] .navbar .navbar-nav-right .nav-link .material-symbols-outlined,
[data-theme="dark"] .navbar .navbar-nav-right .btn-theme-toggle i,
[data-theme="dark"] .navbar .navbar-nav-right .btn-theme-toggle .material-symbols-outlined,
[data-theme="dark"] .btn-theme-toggle            { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .btn-theme-toggle:hover      { color: #fff !important; }

/* ── Sidebar ───────────────────────────────────── */
[data-theme="dark"] .sidebar                     { background: #252526 !important; border: 1px solid #3e3e42 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important; -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important; -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important; }

/* Todos los nav-link del sidebar → acento */
[data-theme="dark"] .sidebar .nav .nav-item .nav-link                        { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .sidebar .nav .nav-item .nav-link .menu-icon,
[data-theme="dark"] .sidebar .nav .nav-item .nav-link i                      { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; font-size: var(--icon-lg) !important; }
[data-theme="dark"] .sidebar .nav .nav-item .nav-link .menu-title,
[data-theme="dark"] .sidebar .nav .nav-item .nav-link .menu-arrow            { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; font-size: var(--text-md) !important; }
[data-theme="dark"] .sidebar .nav .nav-item .nav-link:hover .menu-title,
[data-theme="dark"] .sidebar .nav .nav-item.active > .nav-link .menu-title   { color: #fff !important; }
[data-theme="dark"] .sidebar .nav .nav-item .nav-link:hover                  { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.10) !important; }
[data-theme="dark"] .sidebar .nav .nav-item.active > .nav-link               { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.16) !important; box-shadow: inset 3px 0 0 rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important; }

/* Sub-menu */
[data-theme="dark"] .sidebar .nav .sub-menu .nav-item .nav-link              { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.85) !important; font-size: var(--text-sm) !important; }
[data-theme="dark"] .sidebar .nav .sub-menu .nav-item .nav-link .menu-title  { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.85) !important; font-size: var(--text-sm) !important; }
[data-theme="dark"] .sidebar .nav.sub-menu .nav-item::before                  { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.7) !important; }

/* Activo detectado por JS */
[data-theme="dark"] .sidebar .sidebar-link-activo { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.16) !important; box-shadow: inset 3px 0 0 rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important; border-radius: 0 6px 6px 0 !important; }
[data-theme="dark"] .sidebar .sidebar-link-activo .menu-title,
[data-theme="dark"] .sidebar .sidebar-link-activo i.menu-icon                 { font-weight: 700 !important; }

/* ── Breadcrumb dark → secundario ─── */
[data-theme="dark"] .navbar-breadcrumb           { background: #2d2d35 !important; border-bottom: 1px solid rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.20) !important; }
[data-theme="dark"] .navbar-breadcrumb .nav-link a,
[data-theme="dark"] .navbar-breadcrumb .nav-link i,
[data-theme="dark"] .navbar-breadcrumb .material-symbols-outlined             { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .navbar-breadcrumb .nav-link a.icono-activo               { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .navbar-breadcrumb .nav-link a.icono-activo i             { color: #fff !important; }
[data-theme="dark"] .navbar-breadcrumb .nav-link a:hover i,
[data-theme="dark"] .navbar-breadcrumb .nav-link a:hover .material-symbols-outlined { color: #fff !important; }
[data-theme="dark"] .navbar-breadcrumb h5,
[data-theme="dark"] .navbar-breadcrumb .form-control                           { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .bc-grupo-btn                                              { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; border-right-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.20) !important; }
[data-theme="dark"] .bc-grupo-btn:hover,
[data-theme="dark"] .bc-grupo.open .bc-grupo-btn                               { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.12) !important; }
[data-theme="dark"] .navbar-breadcrumb .navbar-links-wrapper .nav-link        { border-right-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.20) !important; }

/* ── Cards ────────────────────────────────────── */
[data-theme="dark"] .card                         { background: #252526 !important; border-color: #3e3e42 !important; box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important; -webkit-box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important; -moz-box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important; }
[data-theme="dark"] .card .card-title,
[data-theme="dark"] .card-header                  { color: #e0e0e0 !important; background-color: #252526 !important; border-bottom-color: #3e3e42 !important; }
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-footer                  { color: #cccccc !important; }
[data-theme="dark"] .card-description             { color: #999999 !important; }
[data-theme="dark"] .c-entidad                    { color: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important; }
[data-theme="dark"] .page-header                  { border-color: #3e3e42 !important; }

/* ── Tablas ───────────────────────────────────── */
[data-theme="dark"] .table                        { color: #cccccc !important; }
[data-theme="dark"] .table td,
[data-theme="dark"] .table th                     { border-color: #3e3e42 !important; }
[data-theme="dark"] .table thead th               { background-color: #2d2d35 !important; color: #999999 !important; border-color: #3e3e42 !important; }
[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) { background-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.04) !important; }
[data-theme="dark"] .table-hover tbody tr:hover   { background-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.08) !important; }
[data-theme="dark"] .fijar-primera-linea > thead th:first-child,
[data-theme="dark"] .fijar-primera-linea > tbody td:first-child { background-color: #252526 !important; }

/* ── Formularios ──────────────────────────────── */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select                  { background-color: var(--fondo-input) !important; color: #cccccc !important; border-color: #3e3e42 !important; }
[data-theme="dark"] .form-control:focus           { background-color: var(--fondo-input) !important; color: #cccccc !important; border-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.7) !important; box-shadow: 0 0 0 0.2rem rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.20) !important; }
[data-theme="dark"] .form-control:disabled,
[data-theme="dark"] .form-control[readonly]       { background-color: color-mix(in srgb, var(--fondo-input) 80%, #888 20%) !important; }
[data-theme="dark"] label,
[data-theme="dark"] .form-label                   { color: #cccccc !important; }
[data-theme="dark"] .input-group-text             { background: #2d2d35 !important; border-color: #3e3e42 !important; color: #cccccc !important; }

/* ── Textos generales ─────────────────────────── */
[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,
[data-theme="dark"] h4,[data-theme="dark"] h5,[data-theme="dark"] h6 { color: #e0e0e0 !important; }
[data-theme="dark"] p,
[data-theme="dark"] span                          { color: #cccccc !important; }
[data-theme="dark"] small                         { color: #858585 !important; }
[data-theme="dark"] hr                            { border-color: #3e3e42 !important; }
[data-theme="dark"] .text-muted                   { color: #858585 !important; }
[data-theme="dark"] .text-dark                    { color: #cccccc !important; }

/* ── Dropdowns ────────────────────────────────── */
[data-theme="dark"] .dropdown-menu               { background: #2d2d35 !important; border-color: #3e3e42 !important; box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; }
[data-theme="dark"] .dropdown-item               { color: #cccccc !important; }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus         { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.12) !important; color: #e0e0e0 !important; }
[data-theme="dark"] .dropdown-divider            { border-color: #3e3e42 !important; }
[data-theme="dark"] .dropdown-header             { color: #858585 !important; }

/* ── Modales ──────────────────────────────────── */
[data-theme="dark"] .modal-content              { background: #252526 !important; border-color: #3e3e42 !important; color: #cccccc !important; }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer               { border-color: #3e3e42 !important; }
[data-theme="dark"] .modal-title                { color: #e0e0e0 !important; }
[data-theme="dark"] .close                      { color: #cccccc !important; text-shadow: none !important; }
[data-theme="dark"] .close:hover                { color: #fff !important; }

/* ── Nav tabs ─────────────────────────────────── */
[data-theme="dark"] .nav-tabs                   { border-color: #3e3e42 !important; }
[data-theme="dark"] .nav-tabs .nav-link         { color: #999999 !important; }
[data-theme="dark"] .nav-tabs .nav-link:hover   { border-color: #3e3e42 #3e3e42 transparent !important; color: #cccccc !important; }
[data-theme="dark"] .nav-tabs .nav-link.active  { background: #252526 !important; border-color: #3e3e42 #3e3e42 #252526 !important; color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .tab-content                { background: #252526 !important; }

/* ── List groups ──────────────────────────────── */
[data-theme="dark"] .list-group-item            { background: #252526 !important; border-color: #3e3e42 !important; color: #cccccc !important; }
[data-theme="dark"] .list-group-item:hover      { background: #2d2d35 !important; }

/* ── Paginación ───────────────────────────────── */
[data-theme="dark"] .page-link                         { background: #252526 !important; border-color: #3e3e42 !important; color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .page-item.active .page-link       { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; border-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; color: #fff !important; }
[data-theme="dark"] .page-item.disabled .page-link     { background: #1e1e1e !important; color: #858585 !important; }

/* ── Botones ──────────────────────────────────── */
[data-theme="dark"] .btn-secondary                     { background: #3e3e42 !important; border-color: #3e3e42 !important; color: #cccccc !important; }
[data-theme="dark"] .btn-light                         { background: #2d2d35 !important; border-color: #3e3e42 !important; color: #cccccc !important; }
[data-theme="dark"] .btn-secundario                    { color: #fff !important; }
[data-theme="dark"] .btn-outline-secondary             { color: #cccccc !important; border-color: #3e3e42 !important; }
[data-theme="dark"] .btn-outline-secondary:hover       { background: #3e3e42 !important; color: #e0e0e0 !important; }

/* ── Alertas Django → override del navy de app.css ─── */
[data-theme="dark"] .alert-success  { background-color: rgba(74,222,128,0.12)  !important; border-color: rgba(74,222,128,0.30)  !important; color: #4ade80 !important; }
[data-theme="dark"] .alert-danger   { background-color: rgba(248,113,113,0.12) !important; border-color: rgba(248,113,113,0.30) !important; color: #f87171 !important; }
[data-theme="dark"] .alert-warning  { background-color: rgba(251,146,60,0.12)  !important; border-color: rgba(251,146,60,0.30)  !important; color: #fb923c !important; }
[data-theme="dark"] .alert-info     { background-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.12) !important; border-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.30) !important; color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }

/* ── Badges ───────────────────────────────────── */
[data-theme="dark"] .badge-light    { background: #3e3e42 !important; color: #cccccc !important; }

/* ── Footer ───────────────────────────────────── */
[data-theme="dark"] .footer         { background: #252526 !important; border-top: 1px solid #3e3e42 !important; }

/* ── Sombras/glows navbar → tenue acento ── */
[data-theme="dark"] .navbar .nav-item,
[data-theme="dark"] .navbar .nav-link,
[data-theme="dark"] .navbar .btn-theme-toggle,
[data-theme="dark"] .navbar .nav-item .nav-link,
[data-theme="dark"] .navbar-menu-wrapper .nav-item,
[data-theme="dark"] .navbar-menu-wrapper .nav-link { box-shadow: 0 0 5px rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.15) !important; border-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.18) !important; }

/* ── Sidebar: sin sombra ni borde — solo color de fondo ── */
[data-theme="dark"] .sidebar .nav .nav-item,
[data-theme="dark"] .sidebar .nav .nav-item .nav-link { box-shadow: none !important; border: none !important; outline: none !important; }

/* ── bg-* → rgba sobre fondo oscuro ──────────── */
[data-theme="dark"] .bg-ok          { background: rgba(74,222,128,0.12)  !important; }
[data-theme="dark"] .bg-warn        { background: rgba(251,146,60,0.12)  !important; }
[data-theme="dark"] .bg-danger      { background: rgba(248,113,113,0.12) !important; }
[data-theme="dark"] .bg-primary     { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.12) !important; }
[data-theme="dark"] .bg-secundario  { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.12) !important; }
[data-theme="dark"] .bg-user        { background: rgba(167,139,250,0.12) !important; }
[data-theme="dark"] .bg-muted       { background: rgba(108,117,125,0.10) !important; }
[data-theme="dark"] .bg-gray        { background: #2d2d35 !important; }
[data-theme="dark"] .bg-info-light  { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.08) !important; }

/* ── Utilidades semánticas ────────────────────── */
[data-theme="dark"] .c-strong  { color: #e0e0e0 !important; }
[data-theme="dark"] .c-muted   { color: #858585 !important; }
[data-theme="dark"] .c-subtle  { color: #999999 !important; }

/* ── Cuadritos de unidad ──────────────────────── */
[data-theme="dark"] .unit-ok     { background:rgba(56,189,248,0.15);  border-color:#38bdf8; color:#7dd3fc !important; }
[data-theme="dark"] .unit-warn   { background:rgba(251,191,36,0.15);  border-color:#fbbf24; color:#fde68a !important; }
[data-theme="dark"] .unit-danger { background:rgba(248,113,113,0.12); border-color:#f87171; color:#fca5a5 !important; }

/* ── Barra vertical presupuesto ───────────────── */
[data-theme="dark"] .barra-vertical  { background-color: #2d2d35 !important; border-color: #3e3e42 !important; }
[data-theme="dark"] .barra-llenada   { background-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.6) !important; }
[data-theme="dark"] .link-button     { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }

/* ── Native select options ────────────────────── */
[data-theme="dark"] select.form-control option,
[data-theme="dark"] select.form-control optgroup,
[data-theme="dark"] select.form-control optgroup option,
[data-theme="dark"] optgroup.bold-option               { background-color: #2d2d35 !important; }

/* ── Select2 ──────────────────────────────────── */
[data-theme="dark"] .select2-container--default .select2-selection--single             { background: #252526 !important; border-color: #3e3e42 !important; }
[data-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .select2-dropdown                                                    { background: #2d2d35 !important; border-color: #3e3e42 !important; }
[data-theme="dark"] .select2-results__option                                             { background: #2d2d35 !important; color: #cccccc !important; }
[data-theme="dark"] .select2-results__option--highlighted[aria-selected]                { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.18) !important; color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .select2-results__group                                              { background: #252526 !important; color: #999999 !important; }
[data-theme="dark"] .select2-search--dropdown .select2-search__field                    { background: #252526 !important; color: #cccccc !important; border-color: #3e3e42 !important; }

/* ── Daterangepicker ──────────────────────────── */
[data-theme="dark"] .daterangepicker                   { background-color: #252526 !important; border-color: #3e3e42 !important; color: #cccccc !important; }
[data-theme="dark"] .daterangepicker .calendar-table   { background-color: #252526 !important; border-color: #3e3e42 !important; }
[data-theme="dark"] .daterangepicker td.available      { color: #cccccc !important; }
[data-theme="dark"] .daterangepicker td.available:hover { background-color: #2d2d35 !important; }
[data-theme="dark"] .daterangepicker td.active,
[data-theme="dark"] .daterangepicker td.active:hover   { background-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }

/* ── Scrollbar ────────────────────────────────── */
[data-theme="dark"] ::-webkit-scrollbar             { width: 6px; height: 6px; }
[data-theme="dark"] ::-webkit-scrollbar-track       { background: #1e1e1e; }
[data-theme="dark"] ::-webkit-scrollbar-thumb       { background: #3e3e42; border-radius: 3px; }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.5); }

/* ── btn-outline-primary → usa --primario del tenant ── */
.btn-outline-primary                { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; border-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; background: transparent !important; }
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active         { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; color: #fff !important; }

/* ═══════════════════════════════════════════════════════════════════════════════════════
   EL BOTÓN GRANDE — el que lleva TEXTO
   ═══════════════════════════════════════════════════════════════════════════════════════

   No confundir con `.btn-fila` (S18), que es el cuadradito de la columna de acciones. Éste es
   el que va en la barra de una card, en una botonera o al pie de un formulario.

   ── ANATOMÍA ─────────────────────────────────────────────────────────────────────────────
   SIEMPRE ícono + texto. Sólo ícono se reserva a `.btn-fila`; sólo texto no se usa — el ícono
   es lo que se encuentra al barrer la pantalla, y el texto lo que saca la duda. Medido en el
   sitio al escribir esto: 963 botones con ícono y texto contra 629 con texto solo.

   ── LOS CINCO NIVELES, por INTENCIÓN y no por color ───────────────────────────────────────
   | Nivel        | Clase                      | Cuándo                          | Cuántos     |
   | Principal    | btn btn-primary            | lo que la pantalla o la card    | UNO por     |
   |              |                            | vino a hacer: crear, guardar,   | bloque      |
   |              |                            | aprobar, aplicar                |             |
   | Secundaria   | btn btn-outline-primary    | ir a, ver, filtrar, editar      | los que sean|
   | Entidad      | btn btn-secundario         | la acción principal del eje     | UNO por     |
   |              | btn btn-outline-secundario | PERSONA/entidad, o la principal | bloque      |
   |              |                            | de una card que no cambia estado|             |
   | Neutral      | btn btn-outline-secondary  | Cancelar, Volver, Restablecer   | los que sean|
   | Destructiva  | btn btn-outline-danger     | borrar, anular                  |             |
   | Gatillo de   | btn btn-outline-warn       | la acción que existe SÓLO       | va pegado   |
   | estado       | btn btn-outline-danger     | porque algo está en ese estado  | a su chip   |

   El GATILLO DE ESTADO es la única excepción a "un botón va con la paleta": pagar una deuda,
   atender un pendiente. No es una acción de la pantalla que casualmente aplica a algo vencido —
   es la salida del estado, y vive al lado del chip que lo declara. Pintarlo de primario lo
   separa de lo que lo motiva; pintarlo del color del estado los lee como una sola cosa: "esto
   se debe" y, al lado, "pagalo".
   La prueba para saber si algo es un gatillo: ¿desaparece cuando el estado cambia? Si el botón
   sigue estando igual, NO es un gatillo y va con la paleta.

   ── LA TRAMPA, que costó cara ────────────────────────────────────────────────────────────
   `btn-outline-secundario` (CASTELLANO) es el secundario del tema.
   `btn-outline-secondary`  (INGLÉS)     es el GRIS de Bootstrap, y no cambia con el tema.
   Se diferencian en una letra. Al escribir esto había 4 usos del primero y 391 del segundo:
   prácticamente todo el sitio pedía gris creyendo que pedía turquesa. El gris NO está mal —es
   el nivel Neutral, y "Cancelar" va ahí— pero hay que escribirlo a propósito.

   ── PROHIBIDOS ───────────────────────────────────────────────────────────────────────────
   `btn-info`, `btn-success` y `btn-secondary` sólidos, `btn-light`, `btn-dark`, y `btn` sin
   variante. Son colores fijos de Bootstrap que ignoran el tema del usuario.

   Y `btn-success` / `btn-warning` NO se usan para decir un ESTADO: un botón dice QUÉ HACE, un
   chip dice CÓMO ESTÁ. Mezclarlos es lo que produjo el "Aplicar" en celeste `btn-info`, un
   color que no es ninguno de los dos del sistema. El estado va en un `.chip-*`.

   `btn-iconos` no es un color: es sólo `padding:.5rem 1.5rem` (light-style.css). Es un TAMAÑO.
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── btn-secundario → el espejo SÓLIDO de btn-primary, que faltaba ──
   Sin él, lo que quería destacar sin ser la acción principal no tenía dónde ir, y terminaba en
   `btn-info` o `btn-success` — colores que el tema no toca. */
.btn-secundario {
  background-color: color-mix(in srgb, var(--secundario) 80%, #fff 20%) !important;
  border-color:     color-mix(in srgb, var(--secundario) 80%, #fff 20%) !important;
  color: #fff !important;
}
.btn-secundario:hover,
.btn-secundario:focus {
  background-color: var(--secundario) !important;
  border-color:     var(--secundario) !important;
  color: #fff !important;
}

/* ── btn-outline-warn → el GATILLO DE ESTADO ──
   Se llama `warn` y no `warning` a propósito: usa `--color-warn` (#e67e22), el naranja del
   SEMÁFORO del sistema, y no el #ffc107 de Bootstrap, que es otro color y no está atado a nada
   nuestro. Mismo criterio que `chip-warn`. */
.btn-outline-warn        { color: var(--color-warn) !important; border-color: var(--color-warn) !important;
                           background: transparent !important; }
.btn-outline-warn:hover,
.btn-outline-warn:focus,
.btn-outline-warn:active { background: var(--color-warn) !important; color: #fff !important;
                           border-color: var(--color-warn) !important; }

/* ── btn-outline-secundario → usa --secundario del tenant (espejo de la primaria; NO es el gris de Bootstrap) ── */
.btn-outline-secundario                { color: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important; border-color: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important; background: transparent !important; }
.btn-outline-secundario:hover,
.btn-outline-secundario:focus,
.btn-outline-secundario:active         { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important; color: #fff !important; }

/* ── Cuota button — colores dinámicos por --primario / --secundario ── */
.btn-cuota-mes:hover  { border-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.05) !important; }
.btn-cuota-actual     { border-color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; box-shadow: 0 0 0 2px rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.2) !important; }
.btn-cuota-actual .bc-title { color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }

/* Ingreso → primario */
.bc-pago              { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.10) !important; color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
.bc-pago .bc-pct      { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; color: #fff !important; }

/* Egreso → secundario */
.bc-gasto             { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.10) !important; color: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important; }
.bc-gasto .bc-pct     { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important; color: #fff !important; }

/* Barra vertical */
.bc-fill-ingreso { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.45) !important; }
.bc-fill-gasto   { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.55) !important; }

/* Dark — las barras de fondo ya responden solas; solo ajustar contrastes de text */
[data-theme="dark"] .bc-pago  { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),0.15) !important; color: rgba(var(--primario-r),var(--primario-g),var(--primario-b),1) !important; }
[data-theme="dark"] .bc-gasto { background: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),0.15) !important; color: rgba(var(--secundario-r),var(--secundario-g),var(--secundario-b),1) !important; }

/* ════════════════════════════════════════════════════════
   SIDEBAR ADMIN REFINADO — escala compacta (alinear a la maqueta 02)
   Al final del archivo para ganar por orden sobre las reglas base
   del sidebar (tanto claro como [data-theme="dark"]).
   ════════════════════════════════════════════════════════ */
/* Cabeceras de sección + ítems sueltos: ícono más grande (24px) */
.sidebar-refinado .nav .nav-item .nav-link i.menu-icon,
[data-theme="dark"] .sidebar-refinado .nav .nav-item .nav-link i.menu-icon {
  font-size: var(--icon-lg) !important;
}
/* Cabeceras de sección + ítems sueltos: texto más grande (15px) */
.sidebar-refinado .nav .nav-item .nav-link .menu-title,
[data-theme="dark"] .sidebar-refinado .nav .nav-item .nav-link .menu-title {
  font-size: var(--text-md) !important;
}
/* Sub-ítems: texto más grande (15px), ícono pegado a la izquierda; el indentado
   lo da este padding para que el fondo/borde del activo arranque en la guía */
.sidebar-refinado .nav.sub-menu .nav-item .nav-link,
[data-theme="dark"] .sidebar-refinado .nav.sub-menu .nav-item .nav-link {
  font-size: var(--text-md) !important;
  padding: 0.44rem 0.7rem 0.44rem 0.5rem !important;
}
/* Cabeceras de sección + ítems sueltos: menos padding vertical (0.87rem → 0.5rem) */
.sidebar-refinado .nav:not(.sub-menu) > .nav-item > .nav-link {
  padding: 0.5rem 0.875rem 0.5rem 0.6rem !important;
}
/* Sub-ítems: ícono más grande (24px) con aire respecto al texto */
.sidebar-refinado .nav.sub-menu .nav-item .nav-link i,
[data-theme="dark"] .sidebar-refinado .nav.sub-menu .nav-item .nav-link i {
  font-size: var(--icon-lg) !important;
  margin-right: 9px !important;
}
/* Íconos del menú en negrita — eje 'wght' del variable font Material Symbols */
.sidebar-refinado .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24 !important;
}
/* Separación entre sub-ítems */
.sidebar-refinado .nav.sub-menu .nav-item + .nav-item { margin-top: 2px; }
/* Separador de nivel superior: 4px arriba / 2px abajo + línea color primario */
.sidebar-refinado .separador {
  margin: 4px 0 2px;
  border-bottom-color: var(--primario);
}
/* Efecto ACTIVO del sub-ítem: barra gruesa (4px) pegada a la guía vertical,
   fondo que arranca en la guía (por el padding-left:0 del sub-menú) y texto en negrita */
.sidebar-refinado .nav.sub-menu .sidebar-link-activo {
  box-shadow: inset 4px 0 0 var(--secundario) !important;
  border-radius: 0 6px 6px 0 !important;
  font-weight: 700 !important;
}
body.heredar-paquete .sidebar-refinado .nav.sub-menu .sidebar-link-activo {
  box-shadow: inset 4px 0 0 var(--pkg-color, var(--secundario)) !important;
}
/* Ítems sueltos de primer nivel: MISMO peso que el resto del menú.
   Antes iban en 700 "para destacarlos", cuando los sueltos eran dos (Principal y Cerrar sesión).
   Al pasar Ingresos, Egresos, Presupuestos y Catálogos a ítems directos quedaron SEIS, o sea la
   mitad del menú en negrita permanente — y ahí el peso deja de destacar nada. Peor: 700 es
   exactamente el peso que usa `.sidebar-link-activo`, así que seis ítems se veían "seleccionados"
   sin estarlo y el resaltado del activo dejaba de significar dónde estás parado.
   El peso queda RESERVADO al ítem activo. Lo que distingue a un ítem suelto es no tener flecha
   de acordeón, que ya se ve. */
.sidebar-refinado .nav:not(.sub-menu) > .nav-item > .nav-link:not([data-toggle]) .menu-title {
  font-weight: 400;
}
.sidebar-refinado .nav:not(.sub-menu) > .nav-item > .nav-link:not([data-toggle]) i.menu-icon {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
/* …salvo cuando ESE ítem suelto es el activo: ahí sí, negrita, como cualquier otro activo. */
.sidebar-refinado .nav:not(.sub-menu) > .nav-item > .nav-link.sidebar-link-activo .menu-title {
  font-weight: 700 !important;
}
.sidebar-refinado .nav:not(.sub-menu) > .nav-item > .nav-link.sidebar-link-activo i.menu-icon {
  font-variation-settings: 'FILL' 0, 'wght' 700, 'GRAD' 0, 'opsz' 24 !important;
}
/* Correr todo el menú admin unos px a la izquierda (1.3rem → 0.9rem) */
.sidebar-refinado .nav:not(.sub-menu) {
  margin-left: 0.9rem !important;
}

/* ── ⭐ vista preferida de la propiedad (HUB vs Resumen del período) ──────────────────────────
   La encendida es la puerta a la que se entra al seleccionar una propiedad.

   El `margin-left:auto` va en el ENVOLTORIO y no en la estrella: apagada, la estrella es un <button>
   dentro de un <form>, así que el hijo del flex es el form y un margen en el botón no empuja nada —
   quedaba pegada al título. Con el envoltorio, el hijo del flex es siempre el mismo y las dos
   posiciones coinciden.

   El relleno (`FILL 1`) necesita que la fuente se pida con sus ejes — ver link_styles.html. Por si
   no cargara, el estado se distingue ADEMÁS por color y por el fondo ámbar. */
.estrella-wrap { margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; }
.estrella-wrap form { display:inline-flex; margin:0; }
.estrella-vista { background:none; border:none; padding:3px; line-height:1; cursor:pointer;
                  display:inline-flex; align-items:center; border-radius:6px; }
.estrella-vista i { font-size:var(--icon-md); color:#c3cad3; transition:color .12s, transform .12s;
                    font-variation-settings:'FILL' 0; }
.estrella-vista:hover { background:rgba(240,173,78,.10); }
.estrella-vista:hover i { color:#f0ad4e; transform:scale(1.12); }
.estrella-vista.activa { cursor:default; background:rgba(240,173,78,.14); }
.estrella-vista.activa i { color:#e69500; font-variation-settings:'FILL' 1; }
.estrella-vista.activa:hover { background:rgba(240,173,78,.14); }
.estrella-vista.activa:hover i { transform:none; }


/* ════════════════════════════════════════════════════════
   ACORDEÓN (.accordion-solid-header) — cabecera abierta
   ════════════════════════════════════════════════════════
   light-style.css pinta la cabecera abierta con `background:#3b92bd` HARDCODEADO (línea ~19848).
   Da la casualidad de que ese hex es el primario por defecto, así que en el tenant demo no se nota;
   pero un tenant con otro acento veía su manual en el azul de otro. Acá pasa a la variable, que es
   lo que el resto del protocolo ya hace.

   `.acordeon-secundario` es la variante para FAQ: mismo componente, color secundario. La distinción
   no es decorativa — el manual lo escribe el proveedor y las preguntas las puede escribir también
   la administración, así que son dos voces y conviene que se lean distinto.
   ════════════════════════════════════════════════════════ */

.accordion.accordion-solid-header .card .card-header a[aria-expanded="true"] {
  background: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1) !important;
}

.accordion.acordeon-secundario .card .card-header a[aria-expanded="true"] {
  background: rgba(var(--secundario-r), var(--secundario-g), var(--secundario-b), 1) !important;
}

/* Un chip dentro de la cabecera ABIERTA queda sobre fondo sólido: con su color de siempre se vuelve
   ilegible (texto del acento sobre el acento). Pasa a blanco translúcido mientras está abierta. */
.accordion .card-header a[aria-expanded="true"] .chip-primary,
.accordion .card-header a[aria-expanded="true"] .chip-secundario,
.accordion .card-header a[aria-expanded="true"] .chip-muted {
  background: rgba(255,255,255,0.18) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,0.45) !important;
}


/* ════════════════════════════════════════════════════════
   S12 — FICHA EDITABLE + DECORADOR DE EDICIÓN (dirty state)

   El patrón de las pantallas que GUARDAN datos. Nació en la ficha del propietario y Carlos lo
   pidió como estándar: "es como me gusta el JS de detectar un cambio y decorar la CARD y el
   componente".

   Qué resuelve: un formulario largo no dice si lo tocaste ni dónde. Al escribir, el campo se
   marca, la card se enmarca y el botón Guardar se enciende con la cuenta de cambios. El usuario
   ve QUÉ cambió y que le falta guardar, sin leer todo de nuevo.

   El amarillo es el mismo de "pendiente" en el resto del sitio (chip-warn, pago pendiente): no es
   un color nuevo, es el estado "esto todavía no está firme".

   Markup mínimo:
     <form class="ficha-editable"> … <div class="pf-inp"><i>…</i>{{ campo }}</div> …
       <button type="submit">Guardar <span class="guardar-chip">0 cambios</span></button>
     </form>
   y el JS compartido: {% include 'principal/layout/partials/ficha_editable.html' %}
   ════════════════════════════════════════════════════════ */

.pf-sec { margin-bottom: 16px; }
.pf-sec:last-child { margin-bottom: 0; }
.pf-sec-h {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), 1);
  padding-bottom: 7px; margin-bottom: 13px;
  border-bottom: 1px solid rgba(var(--primario-r), var(--primario-g), var(--primario-b), .22);
}
.pf-sec-h i { font-size: var(--icon-sm); }

/* La grilla se acomoda sola: en una card angosta caen dos columnas, en una ancha cuatro. */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px 16px; }
.pf-f { display: flex; flex-direction: column; gap: 4px; }
.pf-lbl { font-size: var(--text-xs); color: var(--color-subtle); font-weight: 600; }

/* El input no lleva borde propio: el borde es del CONTENEDOR, que además tiene el ícono. Así el
   foco y el estado "modificado" se pintan una sola vez y no pelean con el theme de Bootstrap. */
.pf-inp {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde-card, #e0e3e8); border-radius: 7px; padding: 0 10px;
  background: var(--fondo-card, #fff);
}
.pf-inp:focus-within { border-color: rgba(var(--primario-r), var(--primario-g), var(--primario-b), .6); }
.pf-inp i { font-size: var(--icon-sm); color: var(--color-muted); flex-shrink: 0; }
.pf-inp input, .pf-inp select, .pf-inp textarea {
  border: none; outline: none; width: 100%; min-width: 0; padding: 8px 0;
  font-size: var(--text-sm); background: transparent; font-family: inherit;
  color: var(--texto-base);
}
.pf-err { font-size: var(--text-xs); color: var(--color-danger); }
.pf-ayuda { font-size: var(--text-2xs); color: var(--color-muted); }

/* ── El decorador: campo, card y botón ── */
.pf-inp.field-dirty { border-color: #ffc107 !important; background: rgba(255,193,7,.06); }
.card.card-dirty { border-color: #ffc107 !important; box-shadow: 0 0 0 1px #ffc107; }

@keyframes pulse-guardar { 0%,100% { box-shadow: 0 0 0 0 rgba(255,193,7,.5); }
                           60%     { box-shadow: 0 0 0 6px rgba(255,193,7,0); } }
.btn-guardar-dirty {
  background: #fff3cd !important; border-color: #ffc107 !important; color: #856404 !important;
  animation: pulse-guardar 1.8s infinite;
}
/* El chip con la cuenta sólo existe cuando hay algo que guardar: un "0 cambios" permanente sería
   ruido, y peor, se leería como que el botón no hace nada. */
.guardar-chip {
  background: rgba(255,193,7,.3); color: #856404; border-radius: 10px;
  font-size: var(--text-xs); font-weight: 700; padding: 1px 8px; margin-left: 7px;
  display: none; align-items: center;
}
.btn-guardar-dirty .guardar-chip { display: inline-flex; }

/* En oscuro el amarillo plano encandila y el texto marrón no se lee. */
[data-theme="dark"] .pf-inp.field-dirty { background: rgba(255,193,7,.10); }
[data-theme="dark"] .btn-guardar-dirty {
  background: rgba(255,193,7,.18) !important; color: #ffd75e !important;
}
[data-theme="dark"] .guardar-chip { background: rgba(255,193,7,.25); color: #ffd75e; }


/* ═══════════════════════════════════════════════════════════════════════════════════════
   S18 — TIRA DE INDICADORES · LISTADO (TABLA o REJILLA) · BOTÓN DE FILA
   ═══════════════════════════════════════════════════════════════════════════════════════

   ── QUÉ FORMA USA CADA LISTADO ───────────────────────────────────────────────────────────
   Hay DOS, y el criterio está escrito acá para que no sea una decisión de cada pantalla:

     `.tabla-datos`  (<table>)  — EL DEFAULT. Un registro = una fila, columnas de ancho
                                  parecido, sin modos de presentación. El navegador mide y
                                  ajusta las columnas al contenido, y el lector de pantalla
                                  entiende filas y columnas sin que haya que decírselo.

     `.lista-datos`  (grid)     — SÓLO si se cumple alguna de estas tres:
                                    · un registro ocupa VARIAS filas (asiento por partida
                                      doble, un movimiento con sus contrapartes);
                                    · la vista ofrece MODOS de presentación que cambian las
                                      columnas ("doble entrada" / "compacta");
                                    · tiene que REAPILARSE de verdad en pantalla angosta,
                                      no sólo desplazarse en horizontal.
                                  Fuera de esos tres casos, una rejilla es una tabla con los
                                  anchos escritos a mano y sin semántica: se paga el costo sin
                                  cobrar el beneficio. Se midió: de las tres rejillas que
                                  existían, sólo el detalle de caja tenía un `@media`.

   Las dos comparten TODO lo demás —cabecera, bordes, tinte de hover, `.btn-fila`, los chips,
   los tokens—, así que qué forma usa cada pantalla el usuario no lo ve. Esa es la idea: la
   deriva entre vistas no la causa elegir tabla o rejilla, la causa tener cinco versiones
   improvisadas de las dos.

   Las piezas que arma cualquier pantalla de LISTADO. Estaban copiadas en el <style> de
   cada vista con un prefijo propio (`com-` en comisión, `usr-` en usuarios, `rp-` en respaldos):
   el mismo componente escrito tres veces, con tres valores distintos de `flex-basis` y dos de
   ellos usando `var(--text-xxs)`, un token que NO EXISTE (el real es `--text-2xs`).

   Convive con `.kpi-block` (app.css), que es otra cosa: un dato suelto DENTRO de una card, con
   ícono redondo. Esto es la tira de cajas que va ARRIBA de la pantalla.

   ── Uso ──────────────────────────────────────────────────────────────────────────────────
   <div class="indicadores">
     <div class="indicador">
       <div class="indicador-ic bg-ok"><span class="material-symbols-outlined c-ok">check</span></div>
       <div>
         <div class="indicador-lbl c-subtle">Etiqueta</div>
         <div class="indicador-val c-ok">42</div>          <!-- .chico para fechas o texto -->
       </div>
     </div>
   </div>

   <div class="table-responsive table-scroll-wrapper" style="border:1px solid var(--borde-card);border-radius:8px">
     <table class="tabla-datos">
       <thead><tr class="cabecera"><th>…</th></tr></thead>
       <tbody><tr>…<td><div class="acciones-fila">
         <a class="btn-fila c-primary"><i class="material-symbols-outlined">visibility</i></a>
       </div></td></tr></tbody>
     </table>
   </div>

   ── La REJILLA ───────────────────────────────────────────────────────────────────────────
   La pantalla declara UNA cosa: la plantilla de columnas, en `--cols`. Todo lo demás lo pone
   el componente. Los `role=` NO son opcionales: son lo único que le devuelve a un lector de
   pantalla la noción de fila y columna que un `<table>` le da gratis, y las rejillas que había
   en el proyecto no traían ninguno.

   <div class="lista-datos" role="table" style="--cols:76px 1fr 130px 120px 36px">
     <div class="ld-head" role="row">
       <div role="columnheader">Hora</div>…<div role="columnheader" class="ld-num">Importe</div>
     </div>
     <div class="ld-fila" role="row">
       <div role="cell">…</div>…
       <div role="cell"><div class="acciones-fila">
         <a class="btn-fila c-primary"><i class="material-symbols-outlined">visibility</i></a>
       </div></div>
     </div>
     <div class="ld-fila ld-sigue" role="row">…</div>   <!-- 2ª línea del MISMO registro -->
   </div>
   ═══════════════════════════════════════════════════════════════════════════════════════ */

/* ── Tira de indicadores ─────────────────────────────────────────── */
.indicadores      { display:flex; flex-wrap:wrap; gap:10px; }
.indicador        { flex:1 1 170px; display:flex; align-items:center; gap:10px;
                    border:1px solid rgba(0,0,0,.07); border-radius:10px; padding:10px 12px; }
.indicador-ic     { width:34px; height:34px; border-radius:9px; flex-shrink:0;
                    display:flex; align-items:center; justify-content:center; }
.indicador-ic .material-symbols-outlined { font-size: var(--icon-sm); }
.indicador-lbl    { font-size: var(--text-2xs); font-weight:600; }
.indicador-val    { font-size: var(--text-h3); font-weight:700; line-height:1.15; }
/* Para lo que no es un número: una fecha, un nombre, "Ninguno". El tamaño de titular deja
   ilegible cualquier cosa que no sean dos o tres dígitos. */
.indicador-val.chico { font-size: var(--text-md); }

/* ── Tabla de datos ──────────────────────────────────────────────── */
.tabla-datos      { width:100%; border-collapse:collapse; font-size: var(--text-xs); }
.tabla-datos th   { font-size: var(--text-2xs); color: var(--color-subtle); font-weight:600;
                    text-transform:uppercase; letter-spacing:.03em; padding:8px 9px;
                    border-bottom:2px solid var(--borde-card,#e4e4f4); text-align:left;
                    white-space:nowrap; }
.tabla-datos td   { padding:9px; border-bottom:1px solid #f0f2f5; vertical-align:middle; }
.tabla-datos tbody tr:hover { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),.03); }
.tabla-datos thead tr.cabecera { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),.06); }
/* La fila propia del que consulta, o la que la pantalla quiere destacar. */
.tabla-datos tbody tr.fila-propia { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),.05); }

/* ── Listado en REJILLA ──────────────────────────────────────────── */
/* Misma cara que `.tabla-datos`: cabecera en 2xs mayúscula, el mismo borde de 2px debajo, el
   mismo tinte de la fila al pasar el mouse. Lo que cambia es de qué es capaz, no cómo se ve. */
.lista-datos      { --cols: 1fr; font-size: var(--text-xs); }
.lista-datos .ld-head,
.lista-datos .ld-fila { display:grid; grid-template-columns: var(--cols); gap:12px;
                        padding:9px; align-items:baseline; }
.lista-datos .ld-head { font-size: var(--text-2xs); color: var(--color-subtle); font-weight:600;
                        text-transform:uppercase; letter-spacing:.03em; white-space:nowrap;
                        border-bottom:2px solid var(--borde-card,#e4e4f4);
                        background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),.06); }
/* La separación va con `border-top` y no con `border-bottom`. Parece lo mismo y no lo es: con
   `border-bottom`, un registro de DOS filas se dibuja con una línea en el medio —la de la primera
   fila— y se lee como dos registros, que es justo lo que la rejilla vino a resolver. Con
   `border-top`, la continuación la saca y las dos quedan pegadas. Se vio aplicándolo al libro
   diario de la caja, no en la vitrina. */
.lista-datos .ld-fila { border-top:1px solid #f0f2f5; }
.lista-datos .ld-fila:first-of-type { border-top:0; }
.lista-datos .ld-head + .ld-fila { border-top:0; }
.lista-datos .ld-fila:hover { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),.03); }
/* La fila propia del que consulta, o la que la pantalla quiere destacar — igual que en la tabla. */
.lista-datos .ld-fila.fila-propia { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),.05); }

/* UN REGISTRO EN VARIAS FILAS — la razón principal para elegir rejilla. La continuación no
   lleva separador ni respiro arriba, así que las dos líneas se leen como un solo bloque y no
   como dos registros. Es lo que en una tabla obligaría a `rowspan` de cantidad variable. */
.lista-datos .ld-fila.ld-sigue { border-top:0; padding-top:0; }
.lista-datos .ld-fila.ld-sigue:hover { background:transparent; }

/* Números a la derecha: una columna de importes que no está alineada no se puede comparar. */
.lista-datos .ld-num { text-align:right; }

/* EL REAPILADO, que es lo que una tabla no puede hacer. Va en la CLASE y no en cada pantalla:
   las rejillas que había tenían las columnas escritas a mano y ni un solo `@media`, así que en
   pantalla angosta se desplazaban en horizontal igual que una tabla — el costo sin el beneficio. */
@media (max-width: 900px) {
  .lista-datos .ld-head { display:none; }
  .lista-datos .ld-fila { grid-template-columns: 1fr; gap:4px; padding:11px 9px; }
  .lista-datos .ld-fila.ld-sigue { padding-top:0; }
  /* Apiladas, las celdas vacías dejarían renglones en blanco: en la fila de continuación casi
     todas lo están. En columnas no molestan porque no ocupan alto propio. */
  .lista-datos .ld-fila > :empty { display:none; }
  .lista-datos .ld-num { text-align:left; }
  .lista-datos .acciones-fila { justify-content:flex-start; margin-top:6px; }
}

/* ── Botón de acción de fila ─────────────────────────────────────── */
/* El ícono va en --icon-md (20px). --icon-xs es el escalón más chico de la escala y en una fila
   queda diminuto: un ícono SIN override en este sitio dibuja a 24px, así que 16 se lee como un
   error. Y el botón tiene estado en REPOSO, no sólo en hover: un glifo suelto sobre el fondo de
   la fila no se lee como algo apretable.
   El tinte sale de `currentColor`, o sea del color de la acción — ver y consultar en primario,
   editar en secundario (c-entidad), eliminar en peligro. Así no hay que declarar una paleta por
   botón, y se respeta la regla de que una acción inline nunca va en gris. */
.acciones-fila    { display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.btn-fila         { width:34px; height:34px; border-radius:8px; flex-shrink:0;
                    display:inline-flex; align-items:center; justify-content:center;
                    cursor:pointer; padding:0;
                    background: color-mix(in srgb, currentColor 8%, transparent);
                    border:1px solid color-mix(in srgb, currentColor 28%, transparent);
                    transition: background .12s, border-color .12s; }
.btn-fila .material-symbols-outlined { font-size: var(--icon-md); }
.btn-fila:hover   { background: color-mix(in srgb, currentColor 18%, transparent);
                    border-color: color-mix(in srgb, currentColor 55%, transparent); }
.btn-fila[disabled],
.btn-fila.inactivo { opacity:.28; cursor:not-allowed; }
.btn-fila[disabled]:hover { background: color-mix(in srgb, currentColor 8%, transparent);
                            border-color: color-mix(in srgb, currentColor 28%, transparent); }

/* ── Tema oscuro ─────────────────────────────────────────────────── */
[data-theme="dark"] .indicador            { border-color:#3e3e42; }
[data-theme="dark"] .tabla-datos th       { border-bottom-color:#3e3e42; }
[data-theme="dark"] .tabla-datos td       { border-bottom-color:#2d2d35; }
[data-theme="dark"] .tabla-datos tbody tr:hover { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),.08); }
[data-theme="dark"] .lista-datos .ld-head { border-bottom-color:#3e3e42; }
[data-theme="dark"] .lista-datos .ld-fila { border-top-color:#2d2d35; }
[data-theme="dark"] .lista-datos .ld-fila:hover { background: rgba(var(--primario-r),var(--primario-g),var(--primario-b),.08); }


/* ═══════════════════════════════════════════════════════════════════════════════════════
   S19 — HILO DE CONVERSACIÓN
   ═══════════════════════════════════════════════════════════════════════════════════════

   Nació en `/oficina/consultas/` (commit 3132832) y lo usa cualquier pantalla donde dos partes
   se escriben: consultas, tickets de soporte, reclamos.

   Lo que hace que esto se lea como una CONVERSACIÓN y no como un tablón de posteos son tres
   cosas, y ninguna es decorativa:
     · los mensajes de un lado y los del otro se separan por alineación,
     · la burbuja tiene una esquina apuntando a su lado, que es lo que ata cada mensaje a quien
       lo escribió,
     · la firma va AFUERA y chica: en una conversación el texto es lo que importa y el metadato
       se consulta, no se lee.

   `.propio` es "de mi lado". En una consulta eso es quien escribe; en un ticket es el lado del
   tenant frente al proveedor — la pantalla decide qué es "mi lado", el hilo sólo lo dibuja.

   ── Uso ──────────────────────────────────────────────────────────────────────────────────
   <div class="hilo">
     <div class="hilo-msg propio">
       <div class="hilo-burbuja">…texto…</div>
       <div class="hilo-firma c-muted">Vos · 02/09/2026 21:30</div>
     </div>
   </div>
   ═══════════════════════════════════════════════════════════════════════════════════════ */

.hilo             { display:flex; flex-direction:column; gap:14px; }
.hilo-msg         { max-width:78%; }
.hilo-msg.propio  { align-self:flex-end; }
.hilo-burbuja     { padding:10px 14px; border-radius:14px; white-space:pre-wrap;
                    font-size: var(--text-sm); line-height:1.6; }
.hilo-msg:not(.propio) .hilo-burbuja {
                    background: var(--fondo-input);
                    border:1px solid var(--borde-card);
                    border-bottom-left-radius:4px; }
.hilo-msg.propio .hilo-burbuja {
                    background: rgba(var(--primario-r), var(--primario-g), var(--primario-b), .09);
                    border:1px solid rgba(var(--primario-r), var(--primario-g), var(--primario-b), .28);
                    border-bottom-right-radius:4px; }
.hilo-firma       { font-size: var(--text-2xs); margin:3px 4px 0; }
.hilo-msg.propio .hilo-firma { text-align:right; }

/* El primer mensaje —el que abrió la conversación— se distingue: es el planteo, no una
   respuesta más, y es a lo que vuelve el que retoma el hilo después de una semana. */
.hilo-msg.apertura .hilo-burbuja {
                    border-left:3px solid rgba(var(--secundario-r), var(--secundario-g), var(--secundario-b), .55); }

/* Adjuntos colgados de un mensaje. */
.hilo-adjuntos    { display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.hilo-adjunto     { display:inline-flex; align-items:center; gap:4px; padding:3px 9px;
                    border-radius:14px; font-size: var(--text-2xs); text-decoration:none;
                    border:1px solid color-mix(in srgb, currentColor 28%, transparent);
                    background: color-mix(in srgb, currentColor 8%, transparent); }
.hilo-adjunto:hover { text-decoration:none;
                    background: color-mix(in srgb, currentColor 18%, transparent); }
.hilo-adjunto .material-symbols-outlined { font-size: var(--icon-xs); }

[data-theme="dark"] .hilo-msg:not(.propio) .hilo-burbuja { background:#2d2d35; border-color:#3e3e42; }


/* ── S: FONDOS DE LAS PANTALLAS DE ENTRADA ────────────────────────────────────────────────
   `light-style.css` (del theme) le pone a la mitad izquierda del login y del registro un
   `background: url("/static/images/auth/login-bg.jpg")` — y esas dos imágenes NO EXISTEN en el
   repo. O sea que la regla no dibuja nada y lo único que hace es un 404 en la primera pantalla
   que ve cualquiera.

   Se apaga acá en vez de editar `light-style.css`, que es vendorizado: si mañana se actualiza el
   theme, este override sigue valiendo. El día que haya una imagen de verdad, se reemplaza esto
   por su `url(...)`.                                                                        */
.auth .login-half-bg,
.auth .register-half-bg { background-image: none !important; }