/* ═══════════════════════════════════════════════════════════════════
   SOCC Capital · Sistema de diseño "Fintech índigo" (Opción C)
   ───────────────────────────────────────────────────────────────────
   Un solo acento (esmeralda) + semánticos de estado, sobre azul
   profundo (dark, el modo principal) o superficies claras (light).
   El shell (topbar + sidebar) es índigo SIEMPRE: ancla de marca;
   el área de contenido es la que conmuta claro/oscuro.

   El modo oscuro se activa con class="theme-oscuro" + data-bs-theme
   ="dark" en <html> (lo aplica el servidor según la preferencia).
   ═══════════════════════════════════════════════════════════════════ */

/* ── Tokens · modo claro (default) ───────────────────────────────── */
:root{
  /* El desplegable de un <select>, los date pickers y las barras de scroll los
     dibuja el NAVEGADOR, no esta hoja de estilos: por más que le pongamos
     fondo y color al <select>, el panel que se abre usa la paleta del sistema.
     `color-scheme` es lo único que se la cambia. Sin esta línea, en modo
     oscuro las opciones salían ilegibles —el motivo por el que "no se ven
     todas las opciones" al desplegar—. */
  color-scheme: light;
  /* Marca */
  --brand-navy:        #0e1428;   /* shell: sidebar + topbar        */
  --brand-navy-soft:   #182444;   /* hover/activo dentro del shell  */
  --brand-navy-border: #1c2949;

  --accent:            #149e73;   /* esmeralda (texto/links, AA en claro) */
  --accent-fill:       #37d39b;   /* esmeralda (rellenos/acentos)   */
  --accent-soft:       rgba(20,158,115,.10);

  /* Superficies de contenido */
  --bg-body:           #f4f6fb;
  --bg-card:           #ffffff;
  --bg-inset:          #eef1f8;   /* thead, zonas hundidas          */
  --border:            #dfe5f1;
  --border-soft:       #e9edf6;

  /* Texto */
  --text-main:         #1a2337;
  --text-muted:        #5a6b8c;
  --text-on-navy:      #e8edf8;
  --text-on-navy-dim:  #93a3c4;
  --text-on-accent:    #ffffff;

  /* Semánticos (estado, siempre con etiqueta, nunca solo color) */
  --ok:                #148f68;
  --warning:           #a3720f;
  --danger:            #cf4437;
  --info:              #2f6fd6;
  --neutral:           #64748f;
  --ok-soft:           rgba(20,143,104,.10);
  --warning-soft:      rgba(163,114,15,.12);
  --danger-soft:       rgba(207,68,55,.10);
  --info-soft:         rgba(47,111,214,.10);
  --neutral-soft:      rgba(100,116,143,.12);

  /* Forma */
  --radius:            14px;
  --radius-sm:         10px;
  --shadow-card:       0 1px 2px rgba(16,24,48,.06), 0 4px 16px rgba(16,24,48,.06);

  /* Compat con templates existentes */
  --color-primario:    var(--accent);
  --color-secundario:  var(--neutral);
  --text-on-primary:   var(--text-on-accent);
  --color-primario-dark:  color-mix(in srgb, var(--accent) 80%, black);
  --color-secundario-dark:color-mix(in srgb, var(--neutral) 70%, black);

  /* Bootstrap hooks */
  --bs-primary:        var(--accent);
  --bs-secondary:      var(--neutral);
  --bs-body-bg:        var(--bg-body);
  --bs-body-color:     var(--text-main);
  --bs-border-color:   var(--border);
  --bs-border-radius:  var(--radius-sm);
  --bs-link-color:     var(--accent);
  --bs-link-hover-color: color-mix(in srgb, var(--accent) 80%, black);
}

/* ── Tokens · modo oscuro ────────────────────────────────────────── */
html.theme-oscuro{
  color-scheme: dark;
  --accent:            #37d39b;
  --accent-fill:       #37d39b;
  --accent-soft:       rgba(55,211,155,.12);
  --text-on-accent:    #0b1020;

  --bg-body:           #0b1020;
  --bg-card:           #121a33;
  --bg-inset:          #0e1428;
  --border:            #1c2949;
  --border-soft:       #182444;

  --text-main:         #e8edf8;
  --text-muted:        #93a3c4;

  --ok:                #37d39b;
  --warning:           #ecb64f;
  --danger:            #f0776b;
  --info:              #6ea8fe;
  --neutral:           #7c88a1;
  --ok-soft:           rgba(55,211,155,.12);
  --warning-soft:      rgba(236,182,79,.14);
  --danger-soft:       rgba(240,119,107,.12);
  --info-soft:         rgba(110,168,254,.12);
  --neutral-soft:      rgba(124,136,161,.14);

  --shadow-card:       0 8px 24px rgba(4,8,20,.35);
}

/* ═══════════════════════════════════════════════════════════════════
   1. Base
   ═══════════════════════════════════════════════════════════════════ */
body{
  font-family: 'Figtree','Segoe UI',system-ui,sans-serif;
  background: var(--bg-body);
  color: var(--text-main);
  margin: 0;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6,.navbar-brand,.display-font{
  font-family: 'Space Grotesk','Figtree','Segoe UI',sans-serif;
}
a{ color: var(--accent); }
a:hover{ color: color-mix(in srgb, var(--accent) 80%, var(--text-main)); }
.text-muted{ color: var(--text-muted) !important; }
summary, details > summary{ color: var(--text-main); }
hr{ border-color: var(--border); opacity: 1; }
.num, .tabular{ font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════
   2. Shell: topbar + sidebar (índigo en ambos modos)
   ═══════════════════════════════════════════════════════════════════ */
.top-navbar{
  background: var(--brand-navy);
  border-bottom: 1px solid var(--brand-navy-border);
  box-shadow: none;
}
.top-navbar .navbar-brand{
  color: var(--text-on-navy) !important;
  font-weight: 600;
  letter-spacing: .01em;
}
#sidebarToggleBtn{ color: var(--text-on-navy-dim); }
#sidebarToggleBtn:hover{ color: var(--text-on-navy); }

.sidebar{
  background: var(--brand-navy);
  border-right: 1px solid var(--brand-navy-border);
}
.sidebar .nav-link,
.sidebar .nav-link i{
  color: var(--text-on-navy-dim) !important;
}
.sidebar .nav-link{
  border-radius: var(--radius-sm);
  margin: 2px 8px;
  padding: 9px 14px;
  font-size: .875rem;
  transition: background .15s, color .15s;
}
.sidebar .nav-link:hover{
  background: var(--brand-navy-soft) !important;
  color: var(--text-on-navy) !important;
}
.sidebar .nav-link:hover i{ color: var(--text-on-navy) !important; }
.sidebar .nav-link.active{
  background: var(--brand-navy-soft) !important;
  color: var(--accent-fill) !important;
  font-weight: 600;
}
.sidebar .nav-link.active i{ color: var(--accent-fill) !important; }
.sidebar .submenu{ border-left: 1px solid var(--brand-navy-border); margin-left: 22px; }

/* En el teléfono la letra del menú quedaba chica de leer. Se sube el tamaño y
   se baja el relleno vertical en la misma proporción, así el alto de cada
   entrada —y por lo tanto el del menú entero— no cambia. */
@media (max-width: 768px){
  .sidebar .nav-link{ font-size: .95rem; padding: 8px 14px; }
  .sidebar .submenu .nav-link{ font-size: .92rem; padding: 7px 14px; }
}
/* Cualquier texto/enlace suelto dentro del sidebar hereda la paleta del shell */
.sidebar, .sidebar a{ color: var(--text-on-navy-dim); }
.sidebar a:hover{ color: var(--text-on-navy); }
/* Algunos ítems del menú llegan envueltos en <ul>/<li> (Manual Interno,
   Configuración): que no muestren viñetas ni sangría de lista y que el
   enlace se vea como cualquier otro del sidebar. */
.sidebar ul{ list-style: none; margin: 0; padding-left: 0; }
.sidebar li > a:not(.nav-link){
  display: block;
  border-radius: var(--radius-sm);
  margin: 2px 8px;
  padding: 9px 14px;
  font-size: .875rem;
  text-decoration: none;
}
.sidebar li > a:not(.nav-link):hover{ background: var(--brand-navy-soft); }

/* Usuario / dropdown del topbar */
.top-navbar #userMenu,
.top-navbar #menuNovedades{ color: var(--text-on-navy) !important; }
.top-navbar .form-check-input{ cursor: pointer; }
.top-navbar .theme-icon{ color: var(--text-on-navy-dim); display: inline-flex; }

/* El isotipo tiene aire propio dentro de su viewBox, así que a 42 px se veía
   bastante más chico de lo que medía la caja. */
.logo-circle{
  display: inline-flex; align-items: center; justify-content: center;
  height: 50px; width: 50px;
  background: transparent; margin-right: .55rem; overflow: hidden;
}
.logo-circle img{ height: 100%; width: 100%; object-fit: contain; }
.top-navbar .brand-name{ font-size: 1.05rem; letter-spacing: .04em; }
@media (max-width: 576px){
  .logo-circle{ height: 44px; width: 44px; margin-right: .45rem; }
  .top-navbar .brand-name{ font-size: .98rem; }
}

/* Logo cargado por la empresa (horizontal, ya incluye el nombre): altura
   completa y ancho automático — nunca comprimido en una caja cuadrada. */
.logo-wrap{
  display: inline-flex; align-items: center;
  height: var(--topbar-h, 64px); overflow: hidden;  /* nunca desborda el header */
}
.logo-wrap img{ height: 44px; max-height: 44px; width: auto; max-width: 240px; object-fit: contain; }
@media (max-width: 576px){
  .logo-wrap img{ height: 38px; max-height: 38px; max-width: 180px; }
}

/* ═══════════════════════════════════════════════════════════════════
   3. Contenido
   ═══════════════════════════════════════════════════════════════════ */
.main-content{ background: var(--bg-body); }

.card{
  background: var(--bg-card);
  color: var(--text-main);
}
.card{
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.card .card-header{
  background: transparent;
  border-bottom: 1px solid var(--border);
  font-family: 'Space Grotesk','Figtree',sans-serif;
  font-weight: 600;
}
.card .card-footer{ background: transparent; border-top: 1px solid var(--border); }

/* Dashboards heredados: neutralizar la galería de colores de bordes */
.card[class*="border-"]{ border-color: var(--border) !important; }
.metric-card{ background: var(--bg-card); border: 1px solid var(--border);
              border-radius: var(--radius); box-shadow: var(--shadow-card); }

/* ── Tablas ──────────────────────────────────────────────────────── */
.table{
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-main);
  --bs-table-border-color: var(--border-soft);
  --bs-table-striped-bg: color-mix(in srgb, var(--text-main) 3%, transparent);
  --bs-table-hover-bg: color-mix(in srgb, var(--accent) 6%, transparent);
  --bs-table-hover-color: var(--text-main);
  color: var(--text-main);
}
.table thead th{
  background: var(--bg-inset) !important;
  color: var(--text-muted) !important;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
}
.table td, .table th{ border-color: var(--border-soft); }
.table td{ font-size: .875rem; }

/* ── Formularios ─────────────────────────────────────────────────── */
.form-control, .form-select{
  background: var(--bg-card);
  color: var(--text-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus{
  background: var(--bg-card);
  color: var(--text-main);
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem var(--accent-soft);
}
/* Las opciones se pintan aparte: hay navegadores que, si el <select> trae
   fondo propio, dejan el panel con el fondo del sistema y el texto del select
   —blanco sobre blanco—. Con esto se leen en los dos temas. */
.form-select option, .form-select optgroup, select option, select optgroup{
  background-color: var(--bg-card);
  color: var(--text-main);
}
.form-control::placeholder{ color: var(--text-muted); opacity: .8; }
.form-label{ color: var(--text-muted); font-size: .8rem; font-weight: 600; }
.form-check-input:checked{ background-color: var(--accent-fill); border-color: var(--accent-fill); }
.input-group-text{ background: var(--bg-inset); color: var(--text-muted); border-color: var(--border); }

/* ── Botones ─────────────────────────────────────────────────────── */
.btn{ border-radius: var(--radius-sm); font-weight: 600; }
.btn-primary, .bg-primary{
  --bs-btn-bg: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-color: var(--text-on-accent);
  --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 85%, black);
  --bs-btn-hover-color: var(--text-on-accent);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent) 75%, black);
  --bs-btn-active-color: var(--text-on-accent);
  --bs-btn-disabled-bg: var(--accent);
  --bs-btn-disabled-color: var(--text-on-accent);
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-outline-primary{
  --bs-btn-color: var(--accent);
  --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent);
  --bs-btn-hover-border-color: var(--accent);
  --bs-btn-hover-color: var(--text-on-accent);
}
.btn-secondary{
  --bs-btn-bg: var(--neutral);
  --bs-btn-border-color: var(--neutral);
  --bs-btn-hover-bg: color-mix(in srgb, var(--neutral) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--neutral) 85%, black);
}
.btn-success{ --bs-btn-bg: var(--ok); --bs-btn-border-color: var(--ok);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ok) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--ok) 85%, black); }
.btn-danger{ --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 85%, black);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--danger) 85%, black); }
/* Info y warning son acciones secundarias (ver, editar, filtrar): van
   tintadas, no en relleno pleno — el relleno sólido queda reservado a la
   acción principal (accent), a confirmar (success) y a destruir (danger).
   Así los templates viejos que usan btn-info/btn-warning se ven al día
   sin tocarlos uno por uno. */
.btn-warning{
  --bs-btn-bg: var(--warning-soft); --bs-btn-border-color: transparent;
  --bs-btn-color: var(--warning);
  --bs-btn-hover-bg: color-mix(in srgb, var(--warning) 22%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--warning) 35%, transparent);
  --bs-btn-hover-color: var(--warning);
  --bs-btn-active-bg: color-mix(in srgb, var(--warning) 30%, transparent);
  --bs-btn-active-border-color: var(--warning);
  --bs-btn-active-color: var(--warning);
}
.btn-info{
  --bs-btn-bg: var(--info-soft); --bs-btn-border-color: transparent;
  --bs-btn-color: var(--info);
  --bs-btn-hover-bg: color-mix(in srgb, var(--info) 22%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--info) 35%, transparent);
  --bs-btn-hover-color: var(--info);
  --bs-btn-active-bg: color-mix(in srgb, var(--info) 30%, transparent);
  --bs-btn-active-border-color: var(--info);
  --bs-btn-active-color: var(--info);
}
.btn-outline-warning{
  --bs-btn-color: var(--warning); --bs-btn-border-color: var(--warning);
  --bs-btn-hover-bg: var(--warning-soft); --bs-btn-hover-color: var(--warning);
  --bs-btn-hover-border-color: var(--warning);
}
.btn-outline-info{
  --bs-btn-color: var(--info); --bs-btn-border-color: var(--info);
  --bs-btn-hover-bg: var(--info-soft); --bs-btn-hover-color: var(--info);
  --bs-btn-hover-border-color: var(--info);
}

/* En un listado, la acción destructiva no debe ser lo más llamativo de cada
   fila: tienta al clic y compite con la acción principal. Dentro de las
   acciones de fila va tintada; el rojo pleno queda para la pantalla de
   confirmación, donde el usuario ya decidió borrar. */
.action-buttons .btn-danger{
  --bs-btn-bg: var(--danger-soft); --bs-btn-border-color: transparent;
  --bs-btn-color: var(--danger);
  --bs-btn-hover-bg: color-mix(in srgb, var(--danger) 22%, transparent);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--danger) 35%, transparent);
  --bs-btn-hover-color: var(--danger);
  --bs-btn-active-bg: color-mix(in srgb, var(--danger) 30%, transparent);
  --bs-btn-active-border-color: var(--danger);
  --bs-btn-active-color: var(--danger);
}

/* Acciones de fila: en línea, con aire, sin estirarse ni apilarse feo. */
.action-buttons{
  display: inline-flex;
  flex-wrap: nowrap;      /* la columna se ensancha; no se apilan */
  gap: .375rem;
  justify-content: center;
}
.action-buttons .btn{ white-space: nowrap; }
td:has(> .action-buttons), th.acciones{ white-space: nowrap; width: 1%; }
td .btn-sm, .action-buttons .btn-sm{ --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; }
.btn-dark{ --bs-btn-bg: var(--brand-navy); --bs-btn-border-color: var(--brand-navy-border);
  --bs-btn-hover-bg: var(--brand-navy-soft); --bs-btn-hover-border-color: var(--brand-navy-border); }
.btn-outline-secondary{
  --bs-btn-color: var(--text-muted); --bs-btn-border-color: var(--border);
  --bs-btn-hover-bg: var(--neutral-soft); --bs-btn-hover-color: var(--text-main);
  --bs-btn-hover-border-color: var(--border);
}
.btn-outline-light{
  --bs-btn-color: var(--text-on-navy);
  --bs-btn-border-color: var(--brand-navy-border);
  --bs-btn-hover-bg: var(--brand-navy-soft);
  --bs-btn-hover-color: var(--text-on-navy);
  --bs-btn-hover-border-color: var(--brand-navy-border);
}

/* ── Badges de estado (pill + texto, coherentes con la Opción C) ── */
.badge{ border-radius: 999px; font-weight: 600; letter-spacing: .01em; }
.badge.bg-success{ background: var(--ok-soft) !important;      color: var(--ok) !important; }
.badge.bg-danger{  background: var(--danger-soft) !important;  color: var(--danger) !important; }
.badge.bg-warning{ background: var(--warning-soft) !important; color: var(--warning) !important; }
.badge.bg-info{    background: var(--info-soft) !important;    color: var(--info) !important; }
.badge.bg-primary{ background: var(--accent-soft) !important;  color: var(--accent) !important; }
.badge.bg-secondary{ background: var(--neutral-soft) !important; color: var(--neutral) !important; }
.badge.bg-dark{    background: var(--neutral-soft) !important; color: var(--text-main) !important; }
.badge.bg-light{   background: var(--neutral-soft) !important; color: var(--text-muted) !important; }

/* Estados legacy (clases .estado-*) */
.estado-vigente   { color: var(--ok); }
.estado-moroso    { color: var(--danger); }
.estado-aprobado  { color: var(--info); }
.estado-cancelado { color: var(--neutral); }

/* ── Badges de estado por nombre (legacy) ─────────────────────────────
   Los templates viejos definían estas clases con colores Bootstrap 4
   sólidos, hardcodeados en un <style> inline por página: se veían
   saturados y no seguían el modo oscuro. Se centralizan acá con el
   mismo lenguaje de píldora tintada que el resto del sistema. */
.badge-estado,
.firmado-badge, .borrador-badge, .observado-badge, .aprobado-badge,
.rechazado-badge, .carga-lista-badge, .corregido-badge, .moroso-badge,
.vigente-badge, .cancelado-badge{
  display: inline-block;
  padding: .3em .7em;
  font-size: .75rem;
  font-weight: 600;
  border-radius: 999px;
  line-height: 1.4;
}
.badge-VIGENTE, .vigente-badge,
.badge-APROBADO, .aprobado-badge{ background: var(--ok-soft);      color: var(--ok); }
.badge-CARGA_LISTA, .carga-lista-badge,
.firmado-badge{                   background: var(--info-soft);    color: var(--info); }
.badge-CORREGIDO, .corregido-badge,
.badge-OBSERVADO, .observado-badge{ background: var(--warning-soft); color: var(--warning); }
.badge-MOROSO, .moroso-badge,
.badge-RECHAZADO, .rechazado-badge{ background: var(--danger-soft);  color: var(--danger); }
.borrador-badge, .cancelado-badge{ background: var(--neutral-soft); color: var(--neutral); }

/* ── Alerts ──────────────────────────────────────────────────────── */
.alert{ border-radius: var(--radius-sm); border: 1px solid transparent; }
.alert-success{ background: var(--ok-soft);      color: var(--ok);      border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.alert-danger{  background: var(--danger-soft);  color: var(--danger);  border-color: color-mix(in srgb, var(--danger) 25%, transparent); }
.alert-warning{ background: var(--warning-soft); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 25%, transparent); }
.alert-info{    background: var(--info-soft);    color: var(--info);    border-color: color-mix(in srgb, var(--info) 25%, transparent); }
.alert-secondary, .alert-light{
  background: var(--bg-inset); color: var(--text-main); border-color: var(--border);
}
.alert-light .text-secondary{ color: var(--text-muted) !important; }

/* ── Dropdowns / modales / paginación / tabs ─────────────────────── */
/* Un desplegable dentro de una tabla con scroll queda recortado por el propio
   contenedor: .table-responsive necesita overflow para poder desplazarse, y ese
   overflow corta el menú. Mientras hay un menú abierto se libera el recorte, que
   es el único momento en que estorba. Afecta a las cinco pantallas que tienen
   menú de acciones por fila. */
.table-responsive:has(.dropdown-menu.show){ overflow: visible; }

.dropdown-menu{
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
}
.dropdown-menu .dropdown-item{ color: var(--text-main) !important; }
.dropdown-menu .dropdown-item i{ color: var(--text-muted) !important; }
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus{
  background: var(--accent-soft) !important;
  color: var(--text-main) !important;
}
.dropdown-menu .dropdown-item.text-danger,
.dropdown-menu .dropdown-item.text-danger i{ color: var(--danger) !important; }
.dropdown-header{ color: var(--text-muted); }
.dropdown-divider{ border-color: var(--border); }

.modal-content{
  background: var(--bg-card); color: var(--text-main);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.modal-header, .modal-footer{ border-color: var(--border); }
.modal-header{ background: transparent; }

.pagination{ --bs-pagination-border-radius: var(--radius-sm); }
.pagination .page-link{
  background: var(--bg-card); color: var(--text-main); border-color: var(--border);
}
.pagination .page-link:hover{ background: var(--accent-soft); color: var(--accent); }
.pagination .page-item.active .page-link{
  background: var(--accent); border-color: var(--accent); color: var(--text-on-accent);
}
.pagination .page-item.disabled .page-link{
  background: var(--bg-inset); color: var(--text-muted); border-color: var(--border);
}

.nav-tabs{ border-color: var(--border); }
.nav-tabs .nav-link{ color: var(--text-muted); }
.nav-tabs .nav-link.active{
  background: var(--bg-card); color: var(--accent);
  border-color: var(--border) var(--border) var(--bg-card);
}

.list-group-item{
  background: var(--bg-card); color: var(--text-main); border-color: var(--border-soft);
}

.accordion-item{ background: var(--bg-card); border-color: var(--border); }
.accordion-button{ background: var(--bg-card); color: var(--text-main); }
.accordion-button:not(.collapsed){ background: var(--accent-soft); color: var(--accent); }

/* Colores de texto utilitarios re-mapeados al sistema */
.text-primary{ color: var(--accent) !important; }
.text-success{ color: var(--ok) !important; }
.text-danger{  color: var(--danger) !important; }
.text-warning{ color: var(--warning) !important; }
.text-info{    color: var(--info) !important; }
.text-secondary{ color: var(--text-muted) !important; }

/* Nav pills (tabs de dashboards) */
.nav-pills .nav-link{ color: var(--text-muted); border-radius: var(--radius-sm); }
.nav-pills .nav-link.active{
  background: var(--accent) !important;
  color: var(--text-on-accent) !important;
}

/* Fondos utilitarios de Bootstrap re-mapeados */
.bg-light{ background-color: var(--bg-inset) !important; color: var(--text-main); }
.bg-white{ background-color: var(--bg-card) !important; color: var(--text-main); }
.text-dark{ color: var(--text-main) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end{ border-color: var(--border) !important; }

/* Campos "virtuales" de formsets */
.virtual-field input, .virtual-field select, .virtual-field textarea{
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .375rem .75rem; font-size: 1rem; line-height: 1.5;
  color: var(--text-main); background: var(--bg-card);
}

/* ── Íconos SOCC (SVG inline, reemplazan FontAwesome) ────────────── */
.socc-icon{
  width: 1em; height: 1em;
  vertical-align: -0.125em;
  display: inline-block;
  flex-shrink: 0;
}
.socc-icon.fa-lg{ width: 1.25em; height: 1.25em; vertical-align: -0.2em; }
.socc-icon.fa-2x{ width: 2em; height: 2em; vertical-align: -0.3em; }
.socc-icon.fa-3x{ width: 3em; height: 3em; vertical-align: -0.4em; }
.socc-icon.fa-4x{ width: 4em; height: 4em; }
.socc-icon.fa-spin{ animation: socc-spin 1s linear infinite; }
@keyframes socc-spin{ to{ transform: rotate(360deg); } }
/* Los <i class="fa..."> aún no convertidos no muestran texto fantasma */
i[class*="fa-"]:not(.socc-icon){ font-style: normal; }

/* Alineación uniforme de íconos junto a texto en todos los apartados:
   títulos, headers de card, botones, links de nav y celdas. */
h1 .socc-icon, h2 .socc-icon, h3 .socc-icon,
h4 .socc-icon, h5 .socc-icon, h6 .socc-icon,
.card-header .socc-icon, .card-title .socc-icon{
  vertical-align: -0.13em;
  margin-right: .45rem;
}
.btn .socc-icon,
.dropdown-item .socc-icon,
.nav-link .socc-icon,
.alert .socc-icon{
  vertical-align: -0.15em;
}
/* El caret de los submenús queda alineado a la derecha, centrado */
.sidebar .nav-link .float-end.socc-icon{ margin-top: .3em; }

/* Separadores entre apartados: una sola línea sutil en todo el sistema */
hr, .custom-separator{
  height: 1px; border: none;
  background: var(--border);
  opacity: 1;
}

/* ── Scrollbars discretos (WebKit) ───────────────────────────────── */
::-webkit-scrollbar{ width: 10px; height: 10px; }
::-webkit-scrollbar-thumb{ background: var(--neutral-soft); border-radius: 999px; }
::-webkit-scrollbar-track{ background: transparent; }

/* ═══════════════════════════════════════════════════════════════════
   9. Responsive · el sistema en el celular
   ───────────────────────────────────────────────────────────────────
   Contrato para los templates (usar estas clases, no CSS por página):

     <div class="table-responsive">
       <table class="table tabla-cards">
         <thead><tr><th>Cliente</th><th>Monto</th><th>Acciones</th></tr></thead>
         <tbody><tr>
           <td data-label="Cliente">Juan Pérez</td>
           <td data-label="Monto" class="num">$ 12.345,67</td>
           <td><div class="action-buttons">…</div></td>   ← sin data-label:
         </tr></tbody>                                       fila completa,
       </table>                                              centrada
     </div>

   · .tabla-cards      ≤640px cada <tr> es una tarjeta etiqueta/valor.
                       >640px no cambia absolutamente nada (tabla normal).
   · .table-responsive scroll horizontal con pista visual de que hay más.
   · form.row / .filtros-barra  barra de filtros que se apila en móvil.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 9.1 Scroll horizontal con pista de "hay más contenido" ───────────
   Las sombras de los bordes se revelan solas: la capa que las tapa está
   anclada al contenido (background-attachment: local) y viaja con él, así
   que sólo se ve sombra del lado donde queda contenido oculto. Sin JS. */
.table-responsive{
  position: relative;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
  background:
    /* tapas (viajan con el contenido) */
    linear-gradient(to right, var(--bg-card), transparent) 0 0,
    linear-gradient(to left,  var(--bg-card), transparent) 100% 0,
    /* sombras (fijas a los bordes del contenedor) */
    linear-gradient(to right, color-mix(in srgb, var(--text-main) 20%, transparent), transparent) 0 0,
    linear-gradient(to left,  color-mix(in srgb, var(--text-main) 20%, transparent), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 18px 100%, 18px 100%, 18px 100%, 18px 100%;
  background-attachment: local, local, scroll, scroll;
}
/* Si adentro hay una tabla en modo tarjeta no hay nada que desplazar:
   se apaga el scroll y la pista para que no recorte las sombras. */
.table-responsive:has(> .tabla-cards){ background: none; }

/* Contenedores anidados (varias páginas meten un .container dentro del
   .container de base.html): el padding no se duplica. */
.container .container,
.container .container-fluid,
.container-fluid .container{ padding-left: 0; padding-right: 0; max-width: none; }

/* ── 9.1b Ficha: etiqueta → valor ─────────────────────────────────────
   El detalle de un registro, una fila por dato. La etiqueta va en
   <th scope="row">, apagada; el valor puede partirse (CUIT, CAE, CBU). En
   celular sigue siendo de dos columnas: no hace falta volverla tarjeta. */
.tabla-ficha > tbody > tr > th[scope="row"]{
  color: var(--text-muted);
  font-weight: 600;
  font-size: .8rem;
  width: 40%;
  white-space: normal;
  vertical-align: top;
}
.tabla-ficha > tbody > tr > td{ overflow-wrap: anywhere; }
.table-responsive:has(> .tabla-ficha){ background: none; overflow-x: visible; }

/* ═══════════════════════════════════════════════════════════════════
   9.2 Móvil (≤640px)
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px){

  /* ── Tabla → tarjetas ─────────────────────────────────────────── */
  .table-responsive:has(> .tabla-cards){ overflow-x: visible; }

  .tabla-cards,
  .tabla-cards > tbody,
  .tabla-cards > tfoot{ display: block; width: 100%; }
  .tabla-cards > thead{ display: none; }        /* las etiquetas van por celda */

  .tabla-cards > tbody > tr,
  .tabla-cards > tfoot > tr{
    display: block;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-card);
    padding: .15rem .9rem;
    margin-bottom: .7rem;
  }
  .tabla-cards > tbody > tr:last-child{ margin-bottom: 0; }

  /* Bootstrap pinta zebra/hover con un box-shadow interior: en modo
     tarjeta lo apagamos (cada fila ya es su propia superficie). */
  .tabla-cards > tbody > tr > *,
  .tabla-cards > tfoot > tr > *{
    box-shadow: none !important;
    background-color: transparent !important;
  }

  .tabla-cards > tbody > tr > td,
  .tabla-cards > tfoot > tr > td,
  .tabla-cards > tfoot > tr > th{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .9rem;
    width: auto !important;          /* anula el width:1% de la col. acciones */
    padding: .5rem 0;
    border: 0;
    border-bottom: 1px solid var(--border-soft);
    text-align: right;
    white-space: normal !important;
    overflow-wrap: anywhere;
    font-size: .875rem;
    line-height: 1.45;
  }
  .tabla-cards > tbody > tr > td:last-child,
  .tabla-cards > tfoot > tr > td:last-child{ border-bottom: 0; }
  /* Un dato vacío no gasta una línea de la tarjeta con su etiqueta sola.
     En el pie pasa siempre: los totales van con `colspan` y las celdas de
     relleno quedaban como renglones en blanco adentro de la tarjeta. */
  .tabla-cards > tbody > tr > td[data-label]:empty,
  .tabla-cards > tfoot > tr > td:empty{ display: none; }

  .tabla-cards > tbody > tr > td::before,
  .tabla-cards > tfoot > tr > td::before,
  .tabla-cards > tfoot > tr > th::before{
    content: attr(data-label);
    flex: 0 1 auto;
    max-width: 42%;
    text-align: left;
    color: var(--text-muted);
    font-weight: 600;
    font-size: .7rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.5;
    /* la etiqueta corta por espacios, nunca dentro de una palabra
       (el valor sí puede partirse: CUIT, emails, CBU…) */
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  /* Celdas sin etiqueta (acciones, colspan de "no hay registros"):
     ocupan la tarjeta entera y centran su contenido. */
  .tabla-cards > tbody > tr > td:not([data-label]),
  .tabla-cards > tbody > tr > td[data-label=""],
  .tabla-cards > tbody > tr > td[colspan],
  .tabla-cards > tfoot > tr > td:not([data-label]){
    display: block;
    text-align: center;
    padding: .6rem 0 .5rem;
  }
  .tabla-cards > tbody > tr > td:not([data-label])::before,
  .tabla-cards > tbody > tr > td[data-label=""]::before,
  .tabla-cards > tbody > tr > td[colspan]::before,
  .tabla-cards > tfoot > tr > td:not([data-label])::before{ content: none; }

  /* Una fila-tarjeta que sólo dice "no hay registros" no necesita
     parecer una tarjeta. */
  .tabla-cards > tbody > tr:only-child:has(> td[colspan]:only-child){
    background: transparent;
    border-style: dashed;
    box-shadow: none;
    color: var(--text-muted);
  }

  /* Una tarjeta dentro de otra tarjeta necesita contraste propio. */
  .card .tabla-cards > tbody > tr,
  .card .tabla-cards > tfoot > tr{ background: var(--bg-inset); box-shadow: none; }

  /* Los botones de la fila, cómodos y tocables dentro de la tarjeta. */
  .tabla-cards .action-buttons,
  .tabla-cards .btn-group{ flex-wrap: wrap; justify-content: center; row-gap: .4rem; }
  .tabla-cards td .btn{
    min-height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
  }

  /* ── Acciones y grupos de botones en general ──────────────────── */
  .action-buttons{ flex-wrap: wrap; row-gap: .4rem; max-width: 100%; }
  .btn-group{ flex-wrap: wrap; row-gap: .4rem; max-width: 100%; }
  /* Algún template fija .btn-group .btn{min-width:120px}: en 390px eso
     desborda. Acá manda el contenido. */
  .btn-group > .btn{ min-width: 0 !important; }
  .btn{ max-width: 100%; }

  /* ── Barras de filtros: apiladas, cómodas, tocables ───────────── */
  form.row > [class*="col"],
  .filtros-barra > [class*="col"]{
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
  }
  /* Una columna que sólo trae un botón no se apila sola: comparte la
     fila con las otras (Filtrar + Limpiar quedan lado a lado, con aire). */
  form.row > [class*="col"]:has(> .btn:only-child),
  .filtros-barra > [class*="col"]:has(> .btn:only-child){
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
  form.row > [class*="col"]:has(> .btn:only-child) > .btn,
  .filtros-barra > [class*="col"]:has(> .btn:only-child) > .btn{ width: 100%; }
  /* Columnas vacías (el "Limpiar" condicional) no dejan un hueco. */
  form.row > [class*="col"]:not(:has(*)),
  .filtros-barra > [class*="col"]:not(:has(*)){ display: none; }

  /* Target táctil: 40px de alto en todo control de un formulario. */
  form .form-control,
  form .form-select,
  form .btn,
  .filtros-barra .form-control,
  .filtros-barra .form-select,
  .filtros-barra .btn{ min-height: 40px; }
  form .btn,
  .filtros-barra .btn{ display: inline-flex; align-items: center; justify-content: center; gap: .35rem; }
  form .form-control-sm,
  form .form-select-sm{ font-size: .9rem; padding: .45rem .7rem; }

  /* Campo + botón largo: en 390px no entran en la misma línea. */
  .input-group:has(> .btn){ flex-direction: column; align-items: stretch; row-gap: .5rem; }
  .input-group:has(> .btn) > *{ width: 100%; border-radius: var(--radius-sm) !important; }

  /* ── Tipografía y densidad ────────────────────────────────────── */
  h1, .h1{ font-size: 1.5rem; }
  h2, .h2{ font-size: 1.3rem; }
  h3, .h3{ font-size: 1.15rem; }
  h4, .h4{ font-size: 1.05rem; }
  h5, .h5, h6, .h6{ font-size: .98rem; }
  .display-1, .display-2, .display-3,
  .display-4, .display-5, .display-6{ font-size: 1.65rem; }
  .lead{ font-size: 1rem; }

  .card > .card-body{ padding: 1rem; }
  .card > .card-header, .card > .card-footer{ padding: .8rem 1rem; }
  .alert{ padding: .8rem .9rem; font-size: .9rem; }
  .metric-card .display-6, .metric-card h2{ font-size: 1.4rem; }
  .pagination{ flex-wrap: wrap; row-gap: .35rem; }
  .nav-tabs, .nav-pills{ flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar, .nav-pills::-webkit-scrollbar{ display: none; }
  .nav-tabs .nav-link, .nav-pills .nav-link{ white-space: nowrap; }

  /* Los títulos de página respiran menos arriba: la pantalla es corta. */
  .main-content > .container > h1:first-child,
  .main-content > .container > h2:first-child{ margin-top: 0; }
}

/* Pantallas muy angostas (≤380px): un punto más de compresión. */
@media (max-width: 380px){
  .tabla-cards > tbody > tr,
  .tabla-cards > tfoot > tr{ padding: .15rem .7rem; }
  .tabla-cards > tbody > tr > td::before{ max-width: 42%; font-size: .68rem; }
}

/* ── Selector de archivo ──────────────────────────────────────────────
   El control nativo no se deja tematizar de forma confiable —en el teléfono
   queda un recuadro gris con el nombre cortado, ilegible en oscuro—, así que
   `selector-archivo.js` esconde el input y pone un botón al lado del nombre.
   El input sigue siendo el input: el formulario y la validación no cambian.  */
.selector-archivo {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.selector-archivo-boton { margin: 0; cursor: pointer; }
.selector-archivo-nombre {
  min-width: 0;
  flex: 1 1 10ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .95rem;
}
/* El input real: invisible pero enfocable, para que el teclado lo alcance y
   el navegador muestre ahí los mensajes de validación. */
.selector-archivo-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.selector-archivo-input:focus-visible + .selector-archivo-boton,
.selector-archivo:focus-within .selector-archivo-boton {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* ── Novedades (campanita del encabezado y marcas del menú) ─────────── */
.novedad-punto {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-left: .35rem;
  border-radius: 50%;
  background: var(--bs-danger, #dc3545);
  vertical-align: middle;
}
/* La campanita deja lugar a su número: sin este margen el número queda
   montado sobre el ícono del usuario que tiene al lado. */
.top-navbar #menuNovedades {
  margin-right: .9rem;
}
.top-navbar .badge.novedades-cuenta {
  font-size: .6rem;
  padding: .25em .42em;
  /* Arriba a la derecha de la campanita, sin tapar el dibujo. */
  top: .15rem !important;
  left: auto !important;
  right: -.55rem;
  transform: none !important;
  /* Sobre la barra oscura: rojo lleno, no el rojo pálido de los badges. */
  background: #dc3545 !important;
  color: #fff !important;
}
.novedades-menu {
  min-width: 17rem;
  max-width: min(22rem, 92vw);
}
.novedades-menu .dropdown-item {
  white-space: normal;
}