/* ===== Raphael OS — estilos del shell unificado =====
   Paleta institucional (la de produccion). Con marca blanca, base.html y
   las pantallas de ingreso pisan --ant-dark y --ant-accent desde `marca`
   (_marca_colores.html, despues de esta hoja):
     Azul marino:  #011e39
     Acento:       #e85215 (naranja automotriz)
     Hover acento: #c44010
*/
:root {
  --ant-dark:   #011e39;
  --ant-dark-2: #062a4d;
  --ant-accent: #e85215;
  --ant-hover:  #c44010;
  /* El marino cuando se usa como TEXTO. Es el mismo color, pero con
     nombre propio porque en modo oscuro tiene que ser el contrario:
     habia titulos escritos a mano con #011e39 que en oscuro quedaban
     azul marino sobre fondo azul marino, ilegibles. */
  --ant-tinta:  #011e39;
  --sidebar-width: 240px;

  /* --- Superficies claras (2026-10-27) --------------------------------------
     Propuesta del disenador grafico: barra superior blanca, fondo gris plano,
     tarjetas blancas con un borde de 1 px y sombra minima. Se fue el "cielo"
     de colores y el vidrio: sobre un fondo plano el vidrio no aporta nada.
     Los tokens del vidrio de abajo SIGUEN EXISTIENDO pero ahora valen una
     superficie solida, asi cada pantalla que los usaba cambia sola. */
  --ant-bg:      #f2f5f9;   /* el piso de la pagina */
  --ant-surface: #ffffff;   /* tarjetas, barra superior, lateral */
  --ant-line:    #dfe6ee;   /* el borde de 1 px de toda superficie */
  --ant-muted:   #566a80;   /* texto de apoyo: 5,4:1 sobre blanco */
  --ant-icono:   #1b5b95;   /* iconos y enlaces: el azul de la escala */

  /* --- Materiales (2026-08-24) ------------------------------------------
     Elevacion, radios y vidrio, en un solo lugar. Antes cada plantilla
     inventaba su sombra y su redondeo, asi que la misma tarjeta se veia
     distinta segun el modulo. */

  /* Sombras de DOS capas y con tinte marino, no negro puro: el negro sobre
     un fondo azulado se ve gris sucio. La capa corta da el borde, la larga
     da la distancia. */
  --ant-s1: 0 1px 2px rgba(1,30,57,.06), 0 1px 3px rgba(1,30,57,.05);
  --ant-s2: 0 2px 6px rgba(1,30,57,.07), 0 10px 28px rgba(1,30,57,.11);
  --ant-s3: 0 4px 12px rgba(1,30,57,.08), 0 18px 40px rgba(1,30,57,.12);

  /* Una escala de tres radios, no un valor por componente. */
  --ant-r-s: 10px;
  --ant-r-m: 14px;
  --ant-r-l: 20px;

  /* Vidrio: desde el 2026-10-27 son superficies solidas (ver arriba). */
  --ant-difuminado: none;
  --ant-vidrio:       var(--ant-surface);
  --ant-vidrio-linea: var(--ant-line);
  --ant-vidrio-barra: var(--ant-surface);
  --ant-tarjeta:      var(--ant-surface);

  /* --- Escala completa (20-10-2026) ---------------------------------------
     Valores que la plataforma ya usaba a mano en varios lugares, ahora con
     nombre: el detector de diseno los marcaba como sueltos y la mitad eran
     el mismo color escrito dos o tres veces. Mismos valores de antes; lo
     unico que cambio fue juntar los tamanos casi iguales (.62 a .74rem) en
     dos pasos, y el velo y la sombra del menu del celular, que eran negro
     puro y pasan a marino (la regla de las sombras de arriba). */
  --ant-r-hilo: 2px;      /* barritas de los graficos chicos */
  --ant-r-xs:   6px;      /* casillas y el anillo de foco */

  --ant-t-nano:         .65rem;  /* rotulos de ejes y distintivos minimos */
  --ant-t-micro:        .72rem;  /* notas bajo una cifra, menus laterales */
  --ant-t-cabecera:     1.2rem;  /* titulo de pantalla en el celular */
  --ant-t-cifra-2:      1.45rem; /* cifra secundaria de Mi avance */
  --ant-t-icono:        1.6rem;  /* glifo del icono de modulo */
  --ant-t-cifra-movil:  1.7rem;  /* cifra principal de Mi avance en el celular */
  --ant-t-grande:       2rem;    /* Ver en grande: titulos y cifras */
  --ant-t-grande-cifra: 2.6rem;

  /* La barra lateral: desde el 2026-10-27 es clara como la barra superior. */
  --ant-lat-texto:   var(--ant-tinta);
  --ant-lat-enlace:  var(--ant-tinta);
  --ant-lat-seccion: var(--ant-muted);
  --ant-lat-apagado: #7d8fa3;
  --ant-lat-nota:    var(--ant-muted);
  --ant-tenue:       #6a8aaa;   /* texto de apoyo azulado, sobre marino o claro */
  --ant-marca-os:    #5b7590;   /* el OS de Raphael OS en la barra superior */

  /* Ambar de hay algo esperando (bandejas con pendientes) */
  --ant-ambar-borde:   rgba(150,102,0,.42);
  --ant-ambar-borde-2: rgba(150,102,0,.60);
  --ant-ambar-tinta-2: #573c00;

  /* Aviso de un proceso largo (la caja de progreso) */
  --ant-aviso-tinta: #7a3b00;
  --ant-aviso-fondo: #fff3cd;
  --ant-aviso-borde: #ffc107;

  --ant-barra:  #2f5f8f;   /* relleno de las barritas de la ficha del cliente */
  --ant-fijado: #1f4e79;   /* el alfiler de un modulo fijado */
  --ant-velo:   rgba(1,30,57,.45);                 /* detras del menu abierto */
  --ant-sombra-cajon: 0 0 30px rgba(1,30,57,.40);  /* el menu del celular */
}

/* En oscuro el vidrio no puede ser blanco translucido: seria una mancha
   clara sobre fondo oscuro. Se invierte a marino translucido. */
[data-bs-theme="dark"] {
  --ant-tinta:        #dbe7f3;
  --ant-bg:           #0a1626;
  --ant-surface:      #10233a;
  --ant-line:         #1f3550;
  --ant-muted:        #93a6bc;
  --ant-icono:        #4d9bd8;
  --ant-lat-apagado:  #6f86a0;
  --bs-body-bg:       var(--ant-bg);
  --ant-s1: 0 1px 2px rgba(0,0,0,.35);
  --ant-s2: 0 2px 6px rgba(0,0,0,.35), 0 8px 20px rgba(0,0,0,.30);
  --ant-s3: 0 4px 12px rgba(0,0,0,.40), 0 18px 40px rgba(0,0,0,.45);
  --ant-activo-oscuro:   #2a5d9f;   /* boton marcado */
  --ant-fuerte-oscuro:   #12395f;   /* la accion principal (btn-nav-fuerte) */
  --ant-fuerte-oscuro-2: #17466f;
  --ant-ambar-claro:     #ffd979;
  --ant-ambar-claro-2:   #ffe4a3;
  --ant-celeste-oscuro:  #4d9bd8;
  --ant-celeste-lavado:  rgba(77,155,216,.16);
  --ant-barra:           #7fb0dd;
  --ant-aviso-tinta:     #ffda6a;
  --ant-aviso-fondo:     #332701;
  --ant-aviso-borde:     #997404;
}

/* --- El piso (2026-10-27) ----------------------------------------------------
   Gris plano y nada detras. Hasta esta fecha habia un "cielo" de manchas de
   color fijo detras de todo, que existia solo para que el vidrio tuviera algo
   que difuminar. Sin vidrio, el cielo era ruido: el disenador lo saco y el
   contraste de las tarjetas blancas sobre el gris hace el trabajo. */
.app-body { background: var(--ant-bg); color: var(--ant-tinta); font-size: .92rem; min-height: 100vh; }
::selection { background: color-mix(in srgb, var(--ant-icono) 22%, transparent); }

/* Topbar clara: superficie blanca, un borde de 1 px abajo y nada de sombra.
   El texto va en tinta (marino), que en oscuro se invierte solo. */
.app-topbar {
  background: var(--ant-surface);
  min-height: 56px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 1030;
  border-bottom: 1px solid var(--ant-line);
  color: var(--ant-tinta);
}

/* Utilidad reusable para cabeceras pegajosas dentro de un modulo. Era vidrio;
   ahora es la misma superficie que una tarjeta (el nombre se conserva porque
   la usan varias plantillas). */
.vidrio {
  background: var(--ant-surface);
  border: 1px solid var(--ant-line);
  border-radius: var(--ant-r-m);
  box-shadow: var(--ant-s1);
}
.app-topbar .brand-text { font-weight: 600; letter-spacing: 0; color: var(--ant-muted); font-size: .9rem; }
/* Nombre del sistema al centro de la barra (2026-10-03), solo desde 1200px.
   La barra pasa a tres columnas: los dos costados miden lo mismo, asi que el
   nombre queda centrado en la pantalla, y como es una columna propia NO puede
   montarse sobre el logo ni sobre los botones (con un posicionamiento
   absoluto se tapaban entre 992 y 1250px). Lo que no cabe a la izquierda se
   corta con puntos suspensivos; los botones de la derecha no se achican. */
.topbar-sistema {
  align-items: baseline; gap: .35rem; pointer-events: none; user-select: none;
  white-space: nowrap; color: var(--ant-tinta);
}
.topbar-sistema-nombre { font-weight: 700; font-size: .85rem; letter-spacing: .28em; text-transform: uppercase; }
.topbar-sistema-os { font-weight: 400; font-size: .85rem; letter-spacing: .28em; color: var(--ant-muted); }
@media (min-width: 1200px) {
  .app-topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    column-gap: 1.25rem;
  }
  .app-topbar > .d-flex:first-child { min-width: 0; }
  .app-topbar > .d-flex:last-child { justify-self: end; }
  .app-topbar .navbar-brand { min-width: 0; flex-shrink: 1; }
  .app-topbar .brand-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .app-topbar .chip-modulo { flex-shrink: 1; min-width: 0; max-width: none; }
}
.topbar-logo { height: 26px; width: auto; max-width: 150px; object-fit: contain; }
/* El logo de la empresa es BLANCO (se hizo para la barra marina). Sobre la
   barra clara se lleva a marino con un filtro; en oscuro queda blanco. */
.app-topbar .topbar-logo { filter: brightness(0) saturate(100%) invert(8%) sepia(48%) saturate(3600%) hue-rotate(195deg) brightness(92%); }
[data-bs-theme="dark"] .app-topbar .topbar-logo { filter: none; }
.app-topbar .brand-fallback { font-weight: 800; letter-spacing: .04em; color: var(--ant-tinta); }
/* Botones de la barra: fantasma. Sin borde ni fondo hasta que se pasa el
   mouse; el icono va en tinta. El naranjo ya no aparece aqui. */
.btn-topbar {
  background: transparent; color: var(--ant-tinta); border: 1px solid transparent;
  border-radius: var(--ant-r-s); font-weight: 500; min-height: 38px;
  display: inline-flex; align-items: center; gap: .35rem;
}
.btn-topbar:hover, .btn-topbar:focus-visible, .btn-topbar.show {
  background: color-mix(in srgb, var(--ant-icono) 10%, transparent);
  color: var(--ant-tinta); border-color: transparent;
}
.btn-topbar .bi { font-size: 1.05rem; }
.app-topbar #notifBadge { background: var(--ant-accent) !important; font-size: .62rem; }

/* Chip "volver al modulo": dice en que modulo estas y te devuelve a su
   portada sin pasar por el Portal. Se separa de la marca con un divisor sutil
   para que se lea como el nivel siguiente de la jerarquia. */
.chip-modulo {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .25rem .6rem; border-radius: 999px;
  font-size: .82rem; font-weight: 600; line-height: 1.4;
  white-space: nowrap; text-decoration: none;
  max-width: 42vw; overflow: hidden; text-overflow: ellipsis;
}
/* Divisor con la marca: un borde, no un pseudo-elemento posicionado. */
.app-topbar .chip-modulo {
  margin-left: .5rem; padding-left: .85rem;
  border-left: 1px solid var(--ant-line);
  border-radius: 0 999px 999px 0;
}
.chip-modulo .bi-chevron-left { font-size: var(--ant-t-micro); opacity: .75; }
/* Variante no clicable: ya estas en la portada del modulo. */
.chip-modulo-estatico {
  background: transparent; color: var(--ant-muted);
  border: 1px solid transparent;
}
@media (max-width: 575.98px) {
  /* En telefono el chip queda solo con los iconos: el nombre del modulo ya
     esta en el titulo de la pagina y el ancho es escaso. */
  /* Solo iconos: se agranda el area tocable a 44px, que es lo minimo comodo
     para el pulgar de quien anda en terreno con el telefono. */
  .app-topbar .chip-modulo {
    padding: .25rem .6rem; max-width: none;
    min-height: 44px; min-width: 44px; justify-content: center;
  }
  /* Los menus "Modulos" y de usuario van con dropdown-menu-end: en un
     telefono angosto ese anclaje empuja el menu mas alla del borde
     izquierdo de la pantalla y queda cortado. Se fija como una hoja
     pegada a los bordes en vez de colgar del boton. */
  .app-topbar .dropdown-menu.show {
    position: fixed !important;
    top: 64px !important;
    left: .5rem !important;
    right: .5rem !important;
    bottom: auto !important;
    transform: none !important;
    width: auto;
    max-width: none;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }
}

/* Layout con sidebar (modulo de pagos) */
.mod-wrap { display: flex; min-height: calc(100vh - 56px); }
/* Lateral claro (2026-10-27): la misma superficie de la barra superior, con
   un borde de 1 px a la derecha. El elegido se marca con un lavado azul y
   peso, no con naranjo: el naranjo es de la accion, no de la navegacion. */
#sidebar {
  width: var(--sidebar-width); background: var(--ant-surface); color: var(--ant-tinta);
  border-right: 1px solid var(--ant-line);
  display: flex; flex-direction: column; flex-shrink: 0;
  padding: 0 .5rem;
}
#sidebar .brand { padding: 1rem .8rem .8rem; font-weight: 700; color: var(--ant-tinta);
  border-bottom: 1px solid var(--ant-line); margin-bottom: .35rem; }
#sidebar .brand small { display:block; font-weight:400; font-size:var(--ant-t-micro); color:var(--ant-muted); margin-top:2px; }
#sidebar .nav-link {
  color: var(--ant-tinta); padding: .45rem .8rem; display: flex; align-items: center;
  gap: .6rem; border-radius: var(--ant-r-xs); min-height: 38px;
  transition: background-color .15s, color .15s;
}
#sidebar .nav-link i { color: var(--ant-icono); }
#sidebar .nav-link:hover { background: color-mix(in srgb, var(--ant-icono) 8%, transparent); color: var(--ant-tinta); }
#sidebar .nav-link.active { background: color-mix(in srgb, var(--ant-icono) 14%, transparent);
  color: var(--ant-tinta); font-weight: 600; }
#sidebar .nav-section { font-size:var(--ant-t-nano); font-weight:700; text-transform:uppercase; letter-spacing:.08em;
  padding: 1rem .8rem .3rem; color:var(--ant-muted); }
.mod-main { flex: 1; padding: 1.6rem 2rem; min-width: 0; }

.page-title { font-size: 1.35rem; font-weight: 600; color: var(--ant-tinta); }
/* Tarjeta (2026-10-27): blanca y SOLIDA, borde de 1 px y la sombra minima.
   Sobre el piso gris plano el borde es lo que la separa; la sombra grande de
   antes la hacia flotar sin motivo. */
.card {
  background-color: var(--ant-surface);
  border: 1px solid var(--ant-line);
  box-shadow: var(--ant-s1);
  border-radius: var(--ant-r-m);
  color: var(--ant-tinta);
}
.card > .card-header, .card > .card-footer {
  background: transparent; border-color: var(--ant-line);
}
.card > .card-header { font-weight: 600; }

/* OJO, y esto lo aprendi rompiendolo: `border-warning` y compania de Bootstrap
   pintan los CUATRO lados. En una tarjeta con `border-start` los otros tres
   lados vuelven al neutro. */
.card.border-start {
  border-top-color: var(--ant-line) !important;
  border-right-color: var(--ant-line) !important;
  border-bottom-color: var(--ant-line) !important;
}
.badge-status { font-size:.75rem; padding:.35em .75em; }
.table th { font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; color:var(--bs-gray-600); }
/* Tarjeta de indicador. El acento de la izquierda paso de 4px a 2px: con 4px
   la barra de color pesaba mas que el propio numero y, en pantallas con varias
   tarjetas seguidas (Cuentas por Pagar, Fiscalizacion, Creditos), las barras
   competian entre si y cansaban la vista. A 2px sigue distinguiendo la tarjeta
   y marcando el color de estado, pero manda la cifra.
   Se conserva 'border-left' como mecanismo a proposito: hay 26 plantillas que
   sobrescriben 'border-left-color' para dar el color del estado. */
.stat-card { border-left: 2px solid var(--ant-accent); }

.btn-primary { background-color: var(--ant-accent) !important; border-color: var(--ant-accent) !important; color:#fff !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--ant-hover) !important; border-color: var(--ant-hover) !important; }
.btn-outline-primary { color: var(--ant-accent) !important; border-color: var(--ant-accent) !important; }
.btn-outline-primary:hover { background-color: var(--ant-accent) !important; color:#fff !important; }
/* Un grupo de opciones (btn-check) con el borde naranjo dejaba la opcion
   ELEGIDA en azul de Bootstrap con letras naranjas: ilegible. Elegida = marino
   con letra blanca; el naranjo queda para la accion. */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.active {
  background-color: var(--ant-dark) !important; border-color: var(--ant-dark) !important; color:#fff !important;
}
[data-bs-theme=dark] .btn-check:checked + .btn-outline-primary,
[data-bs-theme=dark] .btn-check:active + .btn-outline-primary,
[data-bs-theme=dark] .btn-outline-primary.active {
  background-color: var(--ant-activo-oscuro) !important; border-color: var(--ant-activo-oscuro) !important;
}
.btn-check:focus-visible + .btn { outline: 3px solid var(--ant-accent); outline-offset: 2px; }
a { color: var(--ant-dark-2); }

/* Portal launcher */
/* La portada es la superficie de vidrio grande de la primera pantalla. Al
   dejarla translucida, el cielo se ve A TRAVES de ella: es donde el efecto se
   nota de verdad, mucho mas que en la barra de arriba, que es delgada. */
/* 2026-10-02 (Marketing): el saludo tenia mas protagonismo que los modulos.
   Ahora es ~40 % menos alto y SOLIDO: sin vidrio ni texto a media opacidad,
   para que se lea parejo sobre cualquier fondo. */
.portal-hero {
  background: transparent; color: var(--ant-tinta);
  padding: .25rem 0 .5rem;
}
.portal-hero .portal-saludo { font-size: 1.3rem; font-weight: 700; margin: 0 0 .1rem; color: var(--ant-tinta); }
.portal-hero p { font-size: .92rem; color: var(--ant-muted); }
.module-card { transition: transform .15s, box-shadow .15s; cursor: pointer; height: 100%; }
.module-card:hover { transform: translateY(-1px); box-shadow: var(--ant-s2); }

/* --- Portal: buscador, tarjetas chicas y menu "···" (2026-10-02) ---------- */
.portal-barra { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
  justify-content: space-between; }
.portal-buscar { position: relative; flex: 1 1 14rem; max-width: 26rem; }
.portal-buscar > .bi { position: absolute; left: .85rem; top: 50%;
  transform: translateY(-50%); color: var(--ant-c-neutro); pointer-events: none; }
.portal-buscar .form-control { padding-left: 2.4rem; min-height: 44px;
  border-radius: var(--ant-r-s); }
.portal-personalizar { min-height: 44px; }

/* Rejilla: 3 por fila en el telefono, 4 en tableta, 5 como maximo en el
   escritorio. Es flex (no grid) para que la ultima fila incompleta quede
   CENTRADA. */
.portal-grid { --cols: 3; --gap: .6rem; display: flex; flex-wrap: wrap;
  justify-content: center; gap: var(--gap); }
.portal-grid > .modulo-item {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  max-width: calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width: 0;
}
@media (min-width: 768px)  { .portal-grid { --cols: 4; --gap: 1rem; } }
@media (min-width: 1200px) { .portal-grid { --cols: 5; } }
/* Bootstrap pone d-flex con !important; el filtro del buscador usa hidden. */
.modulo-item[hidden], .portal-acciones-menu[hidden], .portal-btn[hidden] { display: none !important; }
.modulo-ghost { opacity: .45; }

.portal-card { position: relative; height: 100%; padding: 2.85rem .4rem .85rem;
  border-radius: var(--ant-r-m); }
/* Tarjeta de modulo (2026-10-27, propuesta del disenador): asentada sobre el
   gris, sin sombra; al pasar el mouse sube a blanco con sombra y un borde
   azulado. El icono va SIN cuadro de fondo: el icono es el color. */
.portal-card.card { background: var(--ant-bg); box-shadow: none;
  transition: background-color .18s, box-shadow .18s, border-color .18s, transform .18s; }
.portal-card.card:hover, .portal-card.card:focus-within {
  background: var(--ant-surface); box-shadow: var(--ant-s2);
  border-color: color-mix(in srgb, var(--ant-icono) 40%, var(--ant-line)); }
.portal-card .module-icon, .portal-fila .module-icon-sm {
  background: none !important; box-shadow: none; color: var(--ant-icono);
}
.portal-fila .module-icon-sm { font-size: 1.35rem; }
#gridModulos.list-group > .list-group-item { background: var(--ant-surface); border-color: var(--ant-line); }

/* Indicadores del portal: un filo de color de 3 px y la cifra; en cero, la
   cifra se apaga para que destaque lo que tiene algo. */
.portal-kpi { padding: .7rem .85rem; border-left-width: 3px !important; }
.portal-kpi-t { font-size: .78rem; color: var(--ant-muted); line-height: 1.3; text-wrap: balance; }
.portal-kpi-valor { font-size: 1.5rem; font-weight: 700; line-height: 1.15; color: var(--ant-tinta);
  font-variant-numeric: tabular-nums; margin-top: .15rem; }
.portal-kpi.cero .portal-kpi-valor { color: var(--ant-muted); font-weight: 600; }
a:hover > .portal-kpi { box-shadow: var(--ant-s2); }
.portal-enlace { display: flex; flex-direction: column; align-items: center;
  gap: .5rem; text-align: center; color: var(--ant-tinta); }
.portal-card .module-icon { width: 46px; height: 46px; font-size: 2rem; }
.portal-nombre { font-weight: 600; font-size: .82rem; line-height: 1.2;
  color: var(--ant-tinta); overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 768px) {
  .portal-card { padding: 3rem .75rem 1.1rem; }
  .portal-card .module-icon { width: 54px; height: 54px; font-size: 2.5rem; }
  .portal-nombre { font-size: .95rem; }
}

/* La pastilla del nivel: arriba a la izquierda, solo el nombre del nivel. */
.portal-nivel { font-size: var(--ant-t-nano); font-weight: 600; line-height: 1;
  padding: .3rem .45rem; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: var(--bs-tertiary-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); }
.portal-card .portal-nivel { position: absolute; top: .75rem; left: .45rem;
  max-width: calc(100% - 3rem); z-index: 2; font-size: var(--ant-t-nano); padding: .25rem .4rem; }
@media (min-width: 768px) {
  .portal-card .portal-nivel { left: .6rem; font-size: var(--ant-t-nano); padding: .3rem .45rem; }
}
.portal-marca-fijado { display: none; margin-right: .25rem; color: var(--ant-dark-2); }
.esta-fijado .portal-marca-fijado { display: inline; }
[data-bs-theme="dark"] .portal-marca-fijado { color: var(--ant-tinta); }

/* Los controles: arriba a la derecha, por encima del enlace estirado, asi
   tocarlos no abre el modulo. Botones de 44 px (dedo). */
.portal-acciones { position: absolute; top: 0; right: 0; z-index: 3; }
.portal-btn { width: 44px; height: 44px; display: inline-flex; align-items: center;
  justify-content: center; border: 0; background: transparent; padding: 0;
  border-radius: var(--ant-r-s); color: var(--ant-tinta); font-size: 1.1rem; }
.portal-btn:hover { background: var(--bs-secondary-bg); }
.portal-btn:focus-visible { outline: 2px solid var(--ant-dark-2); outline-offset: -2px; }
[data-bs-theme="dark"] .portal-btn:focus-visible { outline-color: var(--ant-tinta); }
.portal-mover { cursor: grab; touch-action: none; }
.portal-mover:active { cursor: grabbing; }
.portal-fijar[aria-pressed="true"] { color: var(--ant-dark-2); }
[data-bs-theme="dark"] .portal-fijar[aria-pressed="true"] { color: var(--ant-tinta); }
/* Abierto, el menu tapa la tarjeta entera: en el telefono la tarjeta mide
   ~105 px y cuatro botones de 44 px no caben en una fila (quedan 2 x 2). */
.modulo-item.acciones-abiertas .portal-card .portal-acciones { inset: 0; }
.portal-acciones-menu { display: flex; flex-wrap: wrap; align-content: center;
  justify-content: center; height: 100%; padding: .25rem;
  background: var(--bs-body-bg); border-radius: var(--ant-r-m);
  box-shadow: var(--ant-s2); }
/* Vista compacta: el menu es una franja a la derecha de la fila. */
.portal-fila { position: relative; padding-right: 3.25rem; min-height: 56px; }
.portal-fila .portal-acciones { top: 50%; transform: translateY(-50%); right: .25rem; }
.portal-fila.acciones-abiertas .portal-acciones-menu { flex-wrap: nowrap; }

/* --- Iconos de modulo -----------------------------------------------------
   El color lo pone MODULE_META como background-color; aca va encima una capa
   de brillo. Asi cada icono tiene volumen sin necesidad de guardar dos
   colores por modulo, y todos comparten el mismo material.

   OJO: la plantilla tiene que usar `background-color:` y NO el atajo
   `background:`, porque el atajo en linea borra esta background-image. */
.module-icon, .module-icon-sm {
  color: #fff;
  background-image:
    linear-gradient(150deg, rgba(255,255,255,.22), rgba(255,255,255,0) 55%),
    linear-gradient(150deg, rgba(255,255,255,0) 45%, rgba(0,0,0,.16));
  box-shadow: var(--ant-s1), inset 0 1px 0 rgba(255,255,255,.22);
}
.module-icon { width:54px; height:54px; border-radius:var(--ant-r-s); display:flex;
  align-items:center; justify-content:center; font-size:var(--ant-t-icono); }
/* El de la vista compacta, para que compartan el material. */
.module-icon-sm { width:2.25rem; height:2.25rem; border-radius:.6rem;
  display:flex; align-items:center; justify-content:center; flex-shrink:0; }

/* Login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background: linear-gradient(135deg,#011e39,#062a4d); padding:1rem; }
.login-card { max-width: 400px; width:100%; }
/* Nombre del sistema en las pantallas de ingreso: el mismo trazo que en la
   barra superior (mayusculas espaciadas, la ultima palabra liviana). */
.marca-sistema { color: var(--ant-tinta); letter-spacing: .14em; text-transform: uppercase;
  font-size: .78rem; line-height: 1.2; }
.marca-sistema-nombre { font-weight: 700; }
.marca-sistema-os { font-weight: 300; color: var(--ant-marca-os); }
.marca-sistema-grande { font-size: 1.5rem; }

@media (max-width: 768px) {
  /* La barra del modulo pasa a ser un cajon deslizable (off-canvas) */
  #sidebar {
    position: fixed; top: 56px; left: 0; bottom: 0; z-index: 1045;
    width: 260px; max-width: 84vw; overflow-y: auto;
    transform: translateX(-100%); transition: transform .25s ease;
  }
  #sidebar.open { transform: translateX(0); box-shadow: var(--ant-sombra-cajon); }
  .sidebar-backdrop {
    position: fixed; inset: 56px 0 0 0; background: var(--ant-velo);
    opacity: 0; visibility: hidden; transition: opacity .2s; z-index: 1044;
  }
  .sidebar-backdrop.show { opacity: 1; visibility: visible; }
  .mod-main { padding: 1rem; }
}

/* ============================================================= */
/*  UX GLOBAL: accesibilidad, movil, cargas y rendimiento visual  */
/*  (2026-07-23) aplica a TODOS los modulos via base.html         */
/* ============================================================= */

/* Respeta a quien prefiere menos animacion (accesibilidad/rendimiento) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Foco visible SOLO con teclado (no molesta al usar mouse) */
:focus-visible { outline: 3px solid rgba(232,82,21,.55); outline-offset: 2px; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
a:focus-visible, .dropdown-item:focus-visible, .list-group-item:focus-visible {
  outline: 3px solid rgba(232,82,21,.55); outline-offset: 2px; border-radius: var(--ant-r-xs);
}

/* Enlace "saltar al contenido" para teclado y lectores de pantalla */
.skip-link { position: absolute; left: -999px; top: 0; z-index: 2000;
  background: var(--ant-accent); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* Botones: radios consistentes y micro-feedback tactil */
.btn { border-radius: 8px; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .55; }

/* Barra de carga superior (se muestra al navegar o enviar formularios) */
/* Avanza con transform (scaleX) y no con 'width': animar el ancho obliga al
   navegador a recalcular la posicion de TODA la pagina en cada cuadro, y esta
   barra corre justo mientras la pagina se esta cargando, que es el peor
   momento para darle trabajo extra. */
#appLoader { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 2000;
  background: linear-gradient(90deg, var(--ant-accent), #ffa06b);
  box-shadow: 0 0 8px rgba(232,82,21,.6); opacity: 0;
  transform: scaleX(0); transform-origin: left center;
  transition: transform .25s ease, opacity .3s ease; pointer-events: none; }
#appLoader.run { opacity: 1; }

/* Overlay de carga para acciones largas (opcional, via JS mostrarCarga()) */
.cargando-overlay { position: fixed; inset: 0; z-index: 1990;
  background: rgba(255,255,255,.55); display: flex; align-items: center; justify-content: center; }
.cargando-overlay .spinner-border { width: 2.4rem; height: 2.4rem; color: var(--ant-accent); }

/* Contraste AA en texto secundario. Es el mismo gris que el catalogo llama
   "sin novedad" (--ant-c-neutro), definido una sola vez al final de la hoja. */
.text-muted { color: var(--ant-c-neutro) !important; }

/* Campanitas de "te dieron acceso" (categoria `acceso`, SG-04): el icono de
   la puerta va en el marino de la familia de gestion, no en un color de alerta:
   no exige nada de la persona, solo le cuenta. */
.text-acceso { color: #2a6ba8 !important; }

/* Tablas mas legibles y comodas */
.table td, .table th { vertical-align: middle; }
.table > tbody > tr:hover { background: rgba(232,82,21,.05); }

/* Tarjetas: elevacion al pasar el mouse SOLO en escritorio */
@media (hover: hover) and (pointer: fine) {
  .card.lift:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(1,30,57,.15);
    transition: transform .15s, box-shadow .15s; }
}

/* Objetivos tactiles comodos (min 44px) en telefonos/tablets */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; }
  .form-control, .form-select { min-height: 44px; }
  .nav-link, .dropdown-item { min-height: 44px; display: flex; align-items: center; }
  .table td, .table th { padding-top: .6rem; padding-bottom: .6rem; }
}

/* Ajustes finos para pantallas chicas */
@media (max-width: 576px) {
  /* inputs a 16px evitan el zoom automatico de iOS al enfocar */
  .form-control, .form-select { font-size: 16px; }
  .app-body { font-size: .95rem; }
  .page-title { font-size: var(--ant-t-cabecera); }
  .card { border-radius: var(--ant-r-s); }
  .container, .container-fluid { padding-left: .85rem; padding-right: .85rem; }
  .table-responsive { -webkit-overflow-scrolling: touch; }
  /* botones en grupos: que no se aprieten */
  .d-flex.gap-2.flex-wrap .btn { margin-bottom: .15rem; }
  .modal-dialog { margin: .5rem; }
}

/* Zona segura en telefonos con notch */
@supports (padding: max(0px)) {
  .app-topbar { padding-left: max(.75rem, env(safe-area-inset-left));
    padding-right: max(.75rem, env(safe-area-inset-right)); }
}

/* Tablero de embarques (Importaciones): arrastrar tarjetas entre etapas.
   Antes estos estados venian de clases de Tailwind escritas en el JavaScript. */
.zona-suelta { min-height: 120px; }
.zona-suelta.zona-activa { background: #eef4fb; border-radius: 8px; }
.tarjeta { cursor: grab; }
.tarjeta.arrastrando { opacity: .5; }
.border-dashed { border-style: dashed !important; }

/* Linea de tiempo del embarque (Importaciones) */
.etapa-punto {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bs-gray-400); background: var(--bs-body-bg); color: var(--bs-gray-500);
  font-weight: 600; flex-shrink: 0;
}
.etapa-punto.etapa-lista { border-color: var(--ant-dark); background: var(--ant-dark); color: #fff; }
.etapa-punto.etapa-actual { box-shadow: 0 0 0 4px rgba(1,30,57,.12); }
.etapa-linea { flex: 1; height: 2px; background: var(--bs-border-color); margin-top: 19px; }
.etapa-linea.etapa-linea-lista { background: var(--ant-dark); }

/* Historial de hitos: lista con linea vertical y punto por hito */
.linea-hitos { list-style: none; padding-left: 1.25rem; border-left: 1px solid var(--bs-border-color); margin-left: .25rem; }
.linea-hitos li { position: relative; margin-bottom: 1.1rem; }
.linea-hitos li::before {
  content: ""; position: absolute; left: -1.6rem; top: .35rem;
  width: 11px; height: 11px; border-radius: 50%; background: var(--bs-gray-400);
}
.linea-hitos li.hito-listo::before { background: var(--ant-dark); }

/* Estados vacios y flash mas amables */
.alert { border: none; border-radius: 10px; box-shadow: 0 1px 6px rgba(1,30,57,.06); }

/* Las pildoras `bg-light text-dark` en modo oscuro son un rectangulo blanco
   sobre fondo oscuro. Se bajan a una superficie del tema. */
[data-bs-theme="dark"] .badge.bg-light {
  background-color: rgba(255,255,255,.10) !important;
  color: #cbd9e8 !important;
  border-color: rgba(255,255,255,.14) !important;
}

/* --- Barra de acciones de un modulo (2026-08-29) --------------------------
   El problema que resuelve: la portada del Talonario tenia ONCE botones en
   SEIS colores distintos (naranjo, verde solido, verde contorno, amarillo,
   gris, oscuro). Ninguno decia "yo importo mas": la barra entera gritaba
   igual y no se leia como un conjunto. Peor: el naranjo -que en esta casa
   esta RESERVADO para lo que exige una accion de la persona- estaba gastado
   en "Configuracion", compitiendo con el boton grande de registrar ingreso.

   Las reglas, en orden:
     1. La navegacion es CALLADA y toda igual. Once destinos no son once
        jerarquias.
     2. El color se GANA: solo lo lleva la bandeja que tiene algo pendiente
        AHORA. En cero vuelve a ser gris como el resto.
     3. Los grupos se separan con AIRE, no con color ni con cajas: apretado
        dentro del grupo (.35rem), generoso entre grupos (1.25rem). Es la
        proporcion la que agrupa.
     4. El naranjo no aparece aqui. Es del boton de accion, y de nadie mas. */
.barra-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem 1.25rem;          /* fila / columna: ver regla 3 */
}
.barra-acciones .grupo-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.btn-nav {
  background: var(--ant-surface);
  border: 1px solid var(--ant-line);
  color: var(--ant-tinta);
  border-radius: var(--ant-r-s);
  font-weight: 500;
}
.btn-nav:hover, .btn-nav:focus-visible {
  background: var(--ant-surface);
  border-color: color-mix(in srgb, var(--ant-icono) 45%, var(--ant-line));
  color: var(--ant-tinta);
  box-shadow: var(--ant-s1);
}

/* La bandeja que SI tiene algo esperando. Ambar apagado, no el amarillo
   plano de Bootstrap: tiene que destacar entre grises sin gritar. */
.btn-nav.tiene-pendientes {
  background: rgba(240,173,20,.18);
  border-color: var(--ant-ambar-borde);
  color: #6b4a00;
  font-weight: 600;
}
.btn-nav.tiene-pendientes:hover, .btn-nav.tiene-pendientes:focus-visible {
  background: rgba(240,173,20,.30);
  border-color: var(--ant-ambar-borde-2);
  color: var(--ant-ambar-tinta-2);
}

/* La accion principal del administrativo (cargar al ERP). Va en MARINO y no
   en naranjo: el naranjo ya lo tiene el boton de registrar un ingreso, y dos
   naranjos en la misma pantalla es no tener ninguno. */
.btn-nav-fuerte {
  background: var(--ant-dark);
  border: 1px solid var(--ant-dark);
  color: #fff;
  border-radius: var(--ant-r-s);
  font-weight: 600;
  box-shadow: var(--ant-s1);
}
.btn-nav-fuerte:hover, .btn-nav-fuerte:focus-visible {
  background: var(--ant-dark-2);
  border-color: var(--ant-dark-2);
  color: #fff;
  box-shadow: var(--ant-s2);
}

[data-bs-theme="dark"] .btn-nav.tiene-pendientes {
  background: rgba(240,173,20,.16);
  border-color: rgba(240,173,20,.40);
  color: var(--ant-ambar-claro);
}
[data-bs-theme="dark"] .btn-nav.tiene-pendientes:hover,
[data-bs-theme="dark"] .btn-nav.tiene-pendientes:focus-visible {
  background: rgba(240,173,20,.26);
  color: var(--ant-ambar-claro-2);
}
[data-bs-theme="dark"] .btn-nav-fuerte {
  background: var(--ant-fuerte-oscuro);
  border-color: var(--ant-fuerte-oscuro);
}
[data-bs-theme="dark"] .btn-nav-fuerte:hover,
[data-bs-theme="dark"] .btn-nav-fuerte:focus-visible {
  background: var(--ant-fuerte-oscuro-2);
  border-color: var(--ant-fuerte-oscuro-2);
}

/* En el telefono los grupos se DISUELVEN a proposito.
   Medido a 375px: con los grupos separados la barra ocupa 7 filas y empuja el
   boton de "Registrar nuevo ingreso" bajo el pliegue, que es lo unico que el
   vendedor viene a hacer. Ahi todo se apila en una columna, asi que el aire
   horizontal entre grupos no separa nada y solo cuesta altura: el grupo lo
   expresa el ORDEN. `display: contents` deja los botones como hijos directos
   de la barra, que asi los empaqueta al maximo. */
@media (max-width: 575.98px) {
  .barra-acciones { gap: .4rem .4rem; }
  .barra-acciones .grupo-acciones { display: contents; }
}

/* ---------------------------------------------------------------------------
   Selector de gerentes (Solicitudes de Pago): casillas, no <select multiple>.

   Un <select multiple> necesita Ctrl o Cmd para marcar mas de uno, y en un
   telefono no existe ninguna de las dos: cada toque BORRA el anterior sin
   avisar. La funcion "varios gerentes, el primero que responde resuelve"
   quedaba disponible solo desde el PC.

   Cada casilla es una fila entera y tocable (44px de alto, que es el minimo
   comodo para un pulgar). Se marca con el selector hermano `:checked + .sg-cara`
   -no con `:has()`- para que funcione tambien en los Android viejos que hay en
   terreno.
   --------------------------------------------------------------------------- */
.sel-gerentes {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}
@media (min-width: 576px) {
  .sel-gerentes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sel-gerentes .sg-item { display: block; margin: 0; cursor: pointer; }

/* La casilla real se esconde SIN sacarla del foco del teclado: `display:none`
   la dejaria fuera del tabulador y de los lectores de pantalla. */
.sel-gerentes .sg-check {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sel-gerentes .sg-cara {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .55rem .75rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--ant-r-s);
  background: var(--bs-body-bg);
  transition: background-color .15s ease, border-color .15s ease;
}

.sel-gerentes .sg-caja {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border: 2px solid var(--bs-border-color);
  border-radius: var(--ant-r-xs);
  color: #fff;
  background: transparent;
}
.sel-gerentes .sg-caja .bi { font-size: .8rem; opacity: 0; }

.sel-gerentes .sg-nombre {
  font-weight: 500;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.sel-gerentes .sg-check:checked + .sg-cara {
  border-color: var(--ant-dark);
  background: rgba(1, 30, 57, .06);
}
.sel-gerentes .sg-check:checked + .sg-cara .sg-caja {
  background: var(--ant-dark);
  border-color: var(--ant-dark);
}
.sel-gerentes .sg-check:checked + .sg-cara .sg-caja .bi { opacity: 1; }

/* El foco se ve donde esta el dibujo, no en la casilla escondida. */
.sel-gerentes .sg-check:focus-visible + .sg-cara {
  outline: 2px solid var(--ant-accent);
  outline-offset: 2px;
}

[data-bs-theme="dark"] .sel-gerentes .sg-check:checked + .sg-cara {
  border-color: var(--ant-celeste-oscuro);
  background: var(--ant-celeste-lavado);
}
[data-bs-theme="dark"] .sel-gerentes .sg-check:checked + .sg-cara .sg-caja {
  background: #2a6ea8;
  border-color: #2a6ea8;
}

/* ============================================================= */
/*  Panel de Ventas: barra lateral pegajosa y tablas (PV-08/14)  */
/*  (2026-09-16) solo dentro de .ventas-lateral: el #sidebar de  */
/*  los otros modulos no cambia.                                 */
/* ============================================================= */

/* En escritorio la barra queda pegada bajo la barra superior (56 px) y
   desplaza lo suyo por dentro; en el celular manda el off-canvas de arriba. */
@media (min-width: 769px) {
  .ventas-lateral #sidebar {
    position: sticky; top: 56px; align-self: flex-start;
    max-height: calc(100vh - 56px); overflow-y: auto;
    scrollbar-width: thin;
  }
}
.ventas-lateral .mod-main { padding: .9rem 1.2rem; }
.ventas-lateral .ventas-vista-nota { font-size: var(--ant-t-micro); color: var(--ant-tenue); padding: 0 1.3rem .2rem; }
.ventas-lateral #sidebar .nav-link { padding: .38rem .8rem; font-size: .9rem; }
.ventas-lateral #sidebar .nav-link.apagado { color: var(--ant-lat-apagado); }
.ventas-lateral #sidebar .nav-link.apagado:hover { color: var(--ant-tinta); }
.ventas-lateral #sidebar details > summary { cursor: pointer; list-style: none; }
.ventas-lateral #sidebar details > summary::-webkit-details-marker { display: none; }
.ventas-lateral #sidebar details > summary::after { content: '\25BE'; float: right; margin-right: 1.3rem; }
.ventas-lateral #sidebar details[open] > summary::after { content: '\25B4'; }

/* Los siete numeros en una fila (PV-05): en pantallas anchas siete columnas. */
@media (min-width: 1200px) {
  .row-cols-xl-7 > * { flex: 0 0 auto; width: 14.2857%; }
}
.ventas-kpis .card .fs-5 { line-height: 1.15; }
/* (19-10-2026) Una cifra no se parte en dos lineas («$1.465.035.37» / «4»): en
   la fila de siete la letra se ajusta al ancho de la tarjeta. Y la linea de
   abajo deja de cortarse con «…»: escondia justo la proyeccion, lo que ya
   resta en notas de credito o la utilidad. Ahora baja a una segunda linea. */
.ventas-kpis .card .fs-5 { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (min-width: 1200px) {
  .ventas-kpis.row-cols-xl-7 .card .fs-5 { font-size: clamp(1rem, 1.28vw, var(--ant-t-cabecera)) !important; }
}
.ventas-kpis .card .text-truncate { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; }

/* «Ver en grande» (22-09-2026): la clase
   `ventas-grande` en <html> sobre las MISMAS pantallas del Panel, para
   proyectar en una reunion. Sin la barra lateral ni la superior, letra y
   cifras mas grandes, tablas con mas aire. Nunca una segunda plantilla: lo
   que cambia en una pantalla cambia tambien aqui. */
.ventas-grande .app-topbar,
.ventas-grande .ventas-lateral #sidebar { display: none !important; }
.ventas-grande .ventas-lateral .mod-main { padding: 1rem 2rem; max-width: none; }
.ventas-grande #ventas-contenido { font-size: var(--ant-t-cabecera); }
.ventas-grande #ventas-contenido .small,
.ventas-grande #ventas-contenido small { font-size: .95rem; }
.ventas-grande #ventas-contenido .page-title { font-size: var(--ant-t-grande); }
.ventas-grande .ventas-kpis .card .fs-5 { font-size: var(--ant-t-grande) !important; }
.ventas-grande .ventas-kpis .card .fs-4 { font-size: var(--ant-t-grande-cifra) !important; }
.ventas-grande #ventas-contenido .table-sm > :not(caption) > * > * { padding: .45rem .6rem; }
.ventas-grande #ventas-contenido .form-select-sm,
.ventas-grande #ventas-contenido .form-control-sm,
.ventas-grande #ventas-contenido .btn-sm { font-size: 1rem; }
.ventas-grande .tabla-fija { max-height: none !important; }
.ventas-cabecera .page-title { font-size: var(--ant-t-cabecera); }
.ventas-detalle > summary { cursor: pointer; color: var(--ant-tinta); padding: .2rem 0; }
/* Marcas y familias (19-10-2026): las cifras de cada fila del arbol eran UNA
   linea sin cortes; con meta y unidades no cabia al lado del nombre, caia
   entera a la linea de abajo y en el celular salia de la pantalla. Ahora cada
   cifra es un bloque que no se parte y el grupo baja de a una cifra. */
.ventas-nodo > summary { list-style-position: outside; }
.ventas-nodo-cifras { display: flex; flex-wrap: wrap; justify-content: flex-end; column-gap: .3rem;
  margin-left: auto; text-align: right; font-variant-numeric: tabular-nums; }
.ventas-nodo-cifras > span { white-space: nowrap; }

/* Las fichas de los filtros activos, con su x para quitarlas de a una. */
.ventas-fichas .ficha-filtro { font-weight: 500; font-size: .78rem; }
.ventas-fichas .ficha-filtro a { color: inherit; text-decoration: none; margin-left: .35rem; font-weight: 700; }
.ventas-fichas .ficha-filtro a:hover { opacity: .7; }

/* Tablas de Ventas: encabezado y primera columna fijos, sin el difuminado
   del vidrio (una lista de 500 filas en un telefono tiene que desplazarse
   suave). */
.tabla-fija { overflow: auto; position: relative; }
.tabla-fija table thead th { position: sticky; top: 0; z-index: 2; background: var(--bs-tertiary-bg, #f8f9fa); }
.tabla-fija table td:first-child, .tabla-fija table th:first-child {
  position: sticky; left: 0; z-index: 1; background: var(--bs-body-bg, #fff);
}
.tabla-fija table thead th:first-child { z-index: 3; background: var(--bs-tertiary-bg, #f8f9fa); }
.tabla-fija table tbody tr:hover td:first-child { background: var(--bs-tertiary-bg, #f1f3f5); }
th.th-ordenable { cursor: pointer; user-select: none; white-space: nowrap; }
th.th-ordenable .tabla-flecha { font-size: .7em; margin-left: .2rem; }
th[aria-sort] { text-decoration: underline dotted; }
th[data-orden] a { color: inherit; }
tr.fila-total td { font-weight: 700; border-top: 2px solid var(--ant-dark); }

/* El cumplimiento: color E icono (para quien no distingue colores).
   Umbrales 0,85 / 1,0 como en los correos. Los colores ya no estan aqui:
   desde GN-02 salen de los tokens del catalogo (al final de esta hoja), que
   es donde vive el verde / ambar / rojo de toda la plataforma. */

/* Mi avance (PV-19): la pantalla de la persona (vendedor, asesor, operario).
   Desde el 21-09-2026 es un TABLERO: en el computador usa todo el ancho
   (tope 1600 px) en una cuadricula de doce columnas (la de Bootstrap: cuatro
   tarjetas grandes arriba, 8+4, 4+4+4, el dia a dia a todo el ancho, 6+6);
   en el telefono es una sola columna a ancho completo con las cuatro cifras
   de arriba en dos por fila. Numeros que se leen de un vistazo; el semaforo
   va en el borde izquierdo Y en el texto (no solo color). */
.mi-avance { max-width: 1600px; margin: 0 auto; }
.mi-avance .ma-fila { margin-bottom: .75rem; }
.mi-avance .ma-tarjeta .card-body { padding: .8rem .95rem; }
.mi-avance .ma-rotulo { font-size: .78rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
.mi-avance .num { font-size: 2.4rem; font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }
.mi-avance .num-2 { font-size: var(--ant-t-cifra-2); font-weight: 700; line-height: 1.15; }
/* Una cifra no se parte en dos lineas (20-10-2026: en el celular la meta
   salia «$102.964.69» y «1» abajo). */
.mi-avance .num, .mi-avance .num-2 { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mi-avance .ma-texto-grande { font-size: 1.05rem; font-weight: 600; line-height: 1.25; }
.mi-avance .origen { font-size: var(--ant-t-micro); color: var(--ant-tenue); margin-top: .2rem; }
/* El semaforo: el GROSOR va aqui; el color lo pone el catalogo al final de la
   hoja, para que el rojo del semaforo sea el mismo rojo de todo lo demas. */
.mi-avance .semaforo-rojo,
.mi-avance .semaforo-ambar,
.mi-avance .semaforo-verde,
.mi-avance .semaforo-gris { border-left: .4rem solid transparent; }
.mi-avance .lista-dias { max-height: 22rem; overflow: auto; }
.mi-avance .lista-dias .fila-dia { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; border-bottom: 1px dashed rgba(1,30,57,.12); font-size: .9rem; }
.mi-avance .lista-dias .fila-dia:last-child { border-bottom: 0; }
/* Los graficos: alto FIJO (Chart.js con maintainAspectRatio:false); el ancho
   lo da la tarjeta. */
.mi-avance .ma-grafico { height: 240px; position: relative; }
.mi-avance .ma-grafico-ancho { height: 260px; }
/* La cabecera: titulo a la izquierda, pestanas del rol y mes a la derecha. */
.mi-avance .ma-cabecera { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: .6rem; }
.mi-avance .ma-herramientas { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; }
.mi-avance .ma-mes { display: flex; align-items: center; }
.mi-avance .ma-mes .form-select { width: auto; }
.mi-avance .ma-pestanas { display: flex; gap: .3rem; flex-wrap: wrap; }
.mi-avance .ma-pestana { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: var(--ant-r-s); border: 1px solid rgba(1,30,57,.15); color: var(--ant-tinta); text-decoration: none; font-size: .9rem; }
.mi-avance .ma-pestana.active { background: var(--ant-dark); color: #fff; border-color: var(--ant-dark); }
.mi-avance .ma-pestana-cifra { font-size: .75rem; opacity: .8; }
/* La barra de avance: lo vendido sobre la meta, con la marca de «a esta
   altura deberias ir aqui». */
.mi-avance .ma-barra { position: relative; height: 1.6rem; background: rgba(1,30,57,.08); border-radius: var(--ant-r-s); margin: 1.1rem 0 1.2rem; }
/* El ancho lo pone el servidor: una transicion de `width` nunca corria. El
   relleno entra de izquierda a derecha al cargar, con `transform`, que no
   mueve el resto de la pagina (20-10-2026). */
.mi-avance .ma-barra-lleno { height: 100%; border-radius: var(--ant-r-s); transform-origin: left center;
  animation: ma-llenar .6s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes ma-llenar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .mi-avance .ma-barra-lleno { animation: none; } }
/* El relleno de la barra: el color lo pone el catalogo (final de la hoja). */
.mi-avance .ma-barra-hoy { position: absolute; top: -.3rem; bottom: -.3rem; width: 3px; margin-left: -1.5px; background: var(--ant-tinta); }
.mi-avance .ma-barra-hoy::after { content: 'hoy'; position: absolute; top: -1rem; left: -0.6rem; font-size: var(--ant-t-nano); color: var(--ant-tinta); }
.mi-avance .ma-barra-marcas { position: absolute; left: 0; right: 0; top: 100%; display: flex; justify-content: space-between; font-size: var(--ant-t-nano); color: var(--ant-tenue); margin-top: .15rem; }
[data-bs-theme="dark"] .mi-avance .ma-barra { background: rgba(255,255,255,.12); }
[data-bs-theme="dark"] .mi-avance .ma-pestana { border-color: rgba(255,255,255,.25); color: #e6edf5; }
[data-bs-theme="dark"] .mi-avance .ma-barra-hoy { background: #e6edf5; }
[data-bs-theme="dark"] .mi-avance .ma-barra-hoy::after { color: #e6edf5; }
/* En pantallas medianas (tablet) las cuatro cifras siguen en 2x2 y el resto
   en una columna: lo hace la cuadricula de Bootstrap (col-6 / col-lg-*). */
/* EL TELEFONO (< 768 px): una sola columna a ANCHO COMPLETO con 12 px de
   margen, las cuatro cifras en dos por fila, el selector de mes pegado
   arriba, los graficos a 220 px y las listas plegadas. */
@media (max-width: 767.98px) {
  .ventas-lateral .mod-main.mod-main-tablero { padding: .5rem 12px .9rem; }
  .mi-avance .ma-fila { margin-bottom: .5rem; }
  .mi-avance .ma-tarjeta .card-body { padding: .65rem .7rem; }
  /* En dos columnas de un telefono de 390 px la tarjeta deja ~150 px: la
     cifra se achica con el ancho de la pantalla antes de cortarse. */
  .mi-avance .num { font-size: min(var(--ant-t-cifra-movil), 5.4vw); }
  .mi-avance .num-2 { font-size: var(--ant-t-cabecera); }
  .mi-avance .ma-texto-grande { font-size: .92rem; }
  .mi-avance .ma-grafico, .mi-avance .ma-grafico-ancho { height: 220px; }
  .mi-avance .ma-cabecera { display: block; }
  .mi-avance .ma-herramientas {
    position: sticky; top: 56px; z-index: 5;
    background: var(--bs-body-bg, #fff); margin: .4rem -12px 0; padding: .4rem 12px;
    border-bottom: 1px solid rgba(1,30,57,.1);
  }
  .mi-avance .ma-mes { margin-left: auto; }
  .mi-avance .ma-pestanas { width: 100%; }
  .mi-avance .ma-pestana { flex: 1 1 auto; justify-content: center; font-size: .82rem; padding: .3rem .4rem; }
  .mi-avance .ma-pestana-cifra { display: none; }
  .mi-avance .lista-dias .fila-dia { font-size: .82rem; }
}
.ventas-lateral .ventas-alcance-nota { font-size: var(--ant-t-micro); color: var(--ant-lat-nota); margin-top: .2rem; }

/* EL RIEL (21-09-2026): la barra lateral de quien solo ve su propio avance
   (alcance «sus codigos», clase `ventas-riel` en el <body>).
   En el computador es una tira de 64 px con el icono y el nombre chico
   debajo; el boton de arriba la despliega al ancho normal
   (`ventas-riel-abierto`, ventas_nav.js lo recuerda). En el celular no
   aplica: manda el cajon deslizable de arriba. Solo dentro de .ventas-riel:
   la barra de gerencia no cambia. */
@media (min-width: 769px) {
  .ventas-riel #sidebar.riel { width: 64px; padding-top: .25rem; }
  .ventas-riel #sidebar.riel .brand { padding: .55rem .2rem .6rem; text-align: center; font-size: var(--ant-t-cabecera); }
  .ventas-riel #sidebar.riel .brand .nav-texto { display: none; }
  .ventas-riel #sidebar.riel .nav-link {
    flex-direction: column; gap: .2rem; padding: .55rem .15rem; font-size: var(--ant-t-micro);
    line-height: 1.1; text-align: center;
  }
  .ventas-riel #sidebar.riel .nav-link i { font-size: 1.3rem; }
  .ventas-riel #sidebar.riel .nav-link .nav-texto { display: block; white-space: normal; }
  .ventas-riel .riel-boton {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 2rem; border: 0; background: transparent; border-radius: var(--ant-r-xs);
    color: var(--ant-muted); cursor: pointer;
  }
  .ventas-riel .riel-boton:hover { background: color-mix(in srgb, var(--ant-icono) 10%, transparent); color: var(--ant-tinta); }
  /* Desplegada: el ancho de siempre, con el nombre al lado del icono. */
  .ventas-riel.ventas-riel-abierto #sidebar.riel { width: var(--sidebar-width); }
  .ventas-riel.ventas-riel-abierto #sidebar.riel .brand { text-align: left; padding: .8rem 1.3rem; font-size: 1rem; }
  .ventas-riel.ventas-riel-abierto #sidebar.riel .brand .nav-texto { display: inline; }
  .ventas-riel.ventas-riel-abierto #sidebar.riel .nav-link { flex-direction: row; gap: .6rem; padding: .45rem 1.3rem; font-size: .9rem; text-align: left; }
  .ventas-riel.ventas-riel-abierto #sidebar.riel .nav-link i { font-size: 1rem; }
  .ventas-riel.ventas-riel-abierto .riel-boton i { transform: rotate(180deg); }
}
@media (max-width: 768px) {
  .riel-boton { display: none; }
}
[data-bs-theme="dark"] .tabla-fija table td:first-child,
[data-bs-theme="dark"] .tabla-fija table th:first-child { background: var(--bs-body-bg); }

/* Ficha del cliente (GN-01): pestanas como la Cartola del SGE. En el celular
   las pestanas se apilan; las tablas van chicas porque son muchas cifras. */
.ficha-cliente .ficha-tabla-chica { font-size: .78rem; }
.ficha-cliente .ficha-tabla-chica td, .ficha-cliente .ficha-tabla-chica th { padding: .15rem .35rem; }
.ficha-cliente .ficha-pestanas .nav-link { padding: .35rem .7rem; font-size: .9rem; }
.ficha-cliente .ficha-barras { display: flex; align-items: flex-end; gap: 2px; height: 44px; }
.ficha-cliente .ficha-barra { flex: 1 1 0; height: 100%; display: flex; align-items: flex-end; background: rgba(1,30,57,.06); border-radius: var(--ant-r-hilo); min-width: 3px; }
.ficha-cliente .ficha-barra-relleno { width: 100%; background: var(--ant-barra); border-radius: var(--ant-r-hilo) var(--ant-r-hilo) 0 0; min-height: 0; }
/* Un mes en negativo (pesaron mas las notas de credito que las ventas): el
   mismo rojo que la nota de credito, no un rojo suelto de Bootstrap. */
.ficha-cliente .ficha-barra-resta { background: var(--ant-c-alarma) !important; }
.ficha-cliente .ficha-matriz td:first-child { max-width: 18rem; }
[data-bs-theme="dark"] .ficha-cliente .ficha-barra { background: rgba(255,255,255,.08); }
/* En oscuro, --ant-barra cambia sola (bloque oscuro del principio). */

/* =========================================================================
   COLORIMETRIA (GN-02, 22-09-2026): un color por SIGNIFICADO.

   El catalogo vive en app/utils/colores.py y es el unico que reparte colores;
   aqui estan los tokens y una clase por entrada. Tres reglas:

     1. El color va por significado, no por pantalla. "Vencido" es el mismo
        rojo en la ficha, en Cobranza y en el CRM.
     2. El color NUNCA va solo: el distintivo lleva el nombre al lado. Por eso
        `.ant-distintivo` es una pildora CON TEXTO, no un cuadrito de color.
     3. El modo oscuro se resuelve EN EL TOKEN, una vez, y no clase por clase:
        asi no hay dos sitios donde cambiar el mismo color.

   El naranjo de la marca (--ant-accent) NO aparece aqui: sigue reservado para
   lo que exige una accion de la persona (botones), como manda
   tests/test_identidad_visual.py.

   Cada color se midio contra el fondo de una tarjeta con la razon de WCAG y
   llega a 4,5:1 como texto normal (el ambar bajo de #a66a00 a #8a5800 por eso).
   ========================================================================= */
:root {
  /* Estado / alarma: la escala que ya usaba el cumplimiento de metas. */
  --ant-c-bueno:    #18794f;
  --ant-c-atencion: #8a5800;
  --ant-c-alarma:   #b02a37;
  --ant-c-neutro:   #5b6b7d;

  /* Los cinco tramos vencidos: mientras mas vencido, mas intenso. */
  --ant-c-venc-1: #9c5a4c;
  --ant-c-venc-2: #a8453f;
  /* El tramo del medio ES el rojo de alarma: se APUNTA al token, no se
     copia el valor, o el dia que cambie el rojo quedarian dos. */
  --ant-c-venc-3: var(--ant-c-alarma);
  --ant-c-venc-4: #a11220;
  --ant-c-venc-5: #8b0f1a;
  /* Por vencer: ambar si es pronto; de ahi en adelante, el gris neutro. */
  --ant-c-porven-1: #8a6300;
  --ant-c-porven-2: #7d6531;

  /* Tipos de documento. Estables en toda la plataforma. */
  --ant-c-doc-37:     #0c3a66;  /* Factura: el marino de la casa */
  --ant-c-doc-be:     #0e6b70;  /* Boleta */
  --ant-c-doc-55:     #6d3f9e;  /* Nota de venta: pedido, no venta */
  --ant-c-doc-96:     #1d6b2f;  /* Ingreso digital */
  --ant-c-doc-cheque: #7a5230;  /* Cheque */
  /* La nota de credito (N3) usa el rojo de alarma y los ingresos (85) el
     verde de bueno: son el mismo significado, no un color nuevo. */

  /* El ciclo del cliente (CRM). */
  --ant-c-nuevo:      #15607f;
  --ant-c-recuperado: #2a6ba8;
  --ant-c-perdido:    #4a5560;

  /* El negocio y la calificacion: escala fria, sin rojo. */
  --ant-c-distribucion: #134a7d;
  --ant-c-servicio:     #0d6a6a;
  --ant-c-ambos:        #5a4a9c;
  --ant-c-cal-a: #0c3a66;
  --ant-c-cal-b: #2a6ba8;
  --ant-c-cal-d: #4a5560;
}

/* En oscuro NO se aclara el fondo: se aclara el color. Los mismos
   significados, medidos contra la tarjeta oscura. */
[data-bs-theme="dark"] {
  --ant-c-bueno:    #7fd4a4;
  --ant-c-atencion: #f5c76a;
  --ant-c-alarma:   #f1959e;
  --ant-c-neutro:   #9fb6cd;

  --ant-c-venc-1: #e3a99b;
  --ant-c-venc-2: #f0a093;
  --ant-c-venc-3: var(--ant-c-alarma);
  --ant-c-venc-4: #ff8d95;
  --ant-c-venc-5: #ff7b86;
  --ant-c-porven-1: #f5c76a;
  --ant-c-porven-2: #d8bd8c;

  --ant-c-doc-37:     #8fc2ef;
  --ant-c-doc-be:     #6fd0d6;
  --ant-c-doc-55:     #c4a2f0;
  --ant-c-doc-96:     #86d98a;
  --ant-c-doc-cheque: #dbab7f;

  --ant-c-nuevo:      #7fc4e8;
  --ant-c-recuperado: #8fc2ef;
  --ant-c-perdido:    #b3bfcc;

  --ant-c-distribucion: #8fc2ef;
  --ant-c-servicio:     #6fd0d6;
  --ant-c-ambos:        #b6aaf0;
  --ant-c-cal-a: #8fc2ef;
  --ant-c-cal-b: #a8cdf0;
  --ant-c-cal-d: #b3bfcc;
}

/* La pildora con el nombre adentro. El fondo NO es un color mas: es el propio
   color del texto al 12 %, pintado por encima con un pseudo-elemento. Asi
   cada distintivo se tine solo, con un token y no con tres, y en modo oscuro
   cambia con el token. (Poner el color sobre si mismo no cambia el texto:
   solo tine el hueco que queda alrededor.) */
/* El marco de una tarjeta que lleva el significado del catalogo (Mi cartera
   de Cobranza): el borde sale del MISMO token que la cifra de adentro, para
   que no convivan el rojo de Bootstrap y el del catalogo en la misma tarjeta. */
.ant-borde-alarma   { border-color: var(--ant-c-alarma) !important; }
.ant-borde-atencion { border-color: var(--ant-c-atencion) !important; }
.ant-borde-bueno    { border-color: var(--ant-c-bueno) !important; }

.ant-distintivo {
  position: relative;
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .04rem .42rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-weight: 600; font-size: .78rem; line-height: 1.35;
  white-space: nowrap;
}
.ant-distintivo::before {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: currentColor; opacity: .12;
  pointer-events: none;
}
.ant-distintivo .bi { font-size: .82em; }
/* En una tabla apretada (la ficha usa .ficha-tabla-chica) la pildora pierde
   el relleno para no estirar la fila. */
.ficha-tabla-chica .ant-distintivo { font-size: var(--ant-t-micro); padding: 0 .35rem; }

/* El punto de alarma de la cabecera. Va SIEMPRE dentro de un distintivo, o
   sea con su nombre al lado: un punto suelto no le dice nada a nadie. */
.ant-punto { font-size: .6em; vertical-align: .1em; }

/* --- Una clase por entrada del catalogo -------------------------------- */
/* POR QUE CADA CLASE VA ESCRITA DOS VECES.
   Dentro de una tabla, Bootstrap le escribe el color a CADA celda con la
   regla `.table > :not(caption) > * > *`, que pesa mas que una clase suelta
   (el `:not(caption)` suma un elemento). Con la clase escrita una sola vez,
   un `<td class="ant-estado-alarma">` salia NEGRO en claro y BLANCO en
   oscuro: la deuda vencida se veia igual que la que todavia no vence, que es
   justo lo que se pidio distinguir, y los diez tramos salian todos del mismo
   color. Escribir la clase dos veces la hace pesar mas que la regla de
   Bootstrap sin usar `!important` y sin que la clase tenga que saber si esta
   o no dentro de una tabla. Es la misma razon por la que las utilidades de
   Bootstrap (`text-danger`) llevan `!important`.

   Y OJO AL PONERLA: la clase va en el `<td>`, NUNCA en el `<tr>`. Un color
   puesto en la fila solo se HEREDA, y la herencia siempre pierde contra el
   color que Bootstrap le escribe a la celda; la fila quedaria pintada en el
   HTML y negra en pantalla. Lo cuida
   tests/test_colores.py::test_ninguna_clase_del_catalogo_viaja_en_el_tr. */
.ant-estado-bueno.ant-estado-bueno       { color: var(--ant-c-bueno); font-weight: 600; }
.ant-estado-atencion.ant-estado-atencion { color: var(--ant-c-atencion); font-weight: 600; }
.ant-estado-alarma.ant-estado-alarma     { color: var(--ant-c-alarma); font-weight: 600; }
.ant-estado-neutro.ant-estado-neutro     { color: var(--ant-c-neutro); }

.ant-tramo-venc-5.ant-tramo-venc-5 { color: var(--ant-c-venc-5); font-weight: 700; }
.ant-tramo-venc-4.ant-tramo-venc-4 { color: var(--ant-c-venc-4); font-weight: 700; }
.ant-tramo-venc-3.ant-tramo-venc-3 { color: var(--ant-c-venc-3); font-weight: 600; }
.ant-tramo-venc-2.ant-tramo-venc-2 { color: var(--ant-c-venc-2); font-weight: 600; }
.ant-tramo-venc-1.ant-tramo-venc-1 { color: var(--ant-c-venc-1); font-weight: 600; }
.ant-tramo-porven-1.ant-tramo-porven-1 { color: var(--ant-c-porven-1); }
.ant-tramo-porven-2.ant-tramo-porven-2 { color: var(--ant-c-porven-2); }
.ant-tramo-porven-3.ant-tramo-porven-3 { color: var(--ant-c-neutro); }
.ant-tramo-porven-4.ant-tramo-porven-4 { color: var(--ant-c-neutro); }
.ant-tramo-porven-5.ant-tramo-porven-5 { color: var(--ant-c-neutro); }

.ant-documento-37.ant-documento-37         { color: var(--ant-c-doc-37); }
.ant-documento-be.ant-documento-be         { color: var(--ant-c-doc-be); }
.ant-documento-n3.ant-documento-n3         { color: var(--ant-c-alarma); }
.ant-documento-55.ant-documento-55         { color: var(--ant-c-doc-55); }
.ant-documento-85.ant-documento-85         { color: var(--ant-c-bueno); }
.ant-documento-96.ant-documento-96         { color: var(--ant-c-doc-96); }
.ant-documento-87.ant-documento-87         { color: var(--ant-c-neutro); }
.ant-documento-cheque.ant-documento-cheque { color: var(--ant-c-doc-cheque); }

.ant-cliente-nuevo.ant-cliente-nuevo           { color: var(--ant-c-nuevo); }
.ant-cliente-recuperado.ant-cliente-recuperado { color: var(--ant-c-recuperado); }
.ant-cliente-activo.ant-cliente-activo         { color: var(--ant-c-bueno); }
.ant-cliente-en-riesgo.ant-cliente-en-riesgo   { color: var(--ant-c-atencion); }
.ant-cliente-dormido.ant-cliente-dormido       { color: var(--ant-c-neutro); }
.ant-cliente-perdido.ant-cliente-perdido       { color: var(--ant-c-perdido); }

.ant-cartera-en-cartera.ant-cartera-en-cartera { color: var(--ant-c-neutro); }
.ant-cartera-pagado.ant-cartera-pagado         { color: var(--ant-c-bueno); }
.ant-cartera-gestion.ant-cartera-gestion       { color: var(--ant-c-atencion); }
.ant-cartera-protestado.ant-cartera-protestado { color: var(--ant-c-alarma); }

.ant-negocio-distribucion.ant-negocio-distribucion { color: var(--ant-c-distribucion); }
.ant-negocio-servicio.ant-negocio-servicio         { color: var(--ant-c-servicio); }
.ant-negocio-ambos.ant-negocio-ambos               { color: var(--ant-c-ambos); }
.ant-negocio-sin-dato.ant-negocio-sin-dato         { color: var(--ant-c-neutro); }

.ant-calificacion-a.ant-calificacion-a { color: var(--ant-c-cal-a); }
.ant-calificacion-b.ant-calificacion-b { color: var(--ant-c-cal-b); }
.ant-calificacion-c.ant-calificacion-c { color: var(--ant-c-neutro); }
.ant-calificacion-d.ant-calificacion-d { color: var(--ant-c-cal-d); }

/* La celda de un tramo marcada con un filo a la izquierda, nunca con el fondo
   completo (una tabla de cifras pintada entera no se lee). Va en la MISMA
   celda que lleva el color, porque el filo se pinta con `currentColor`. */
.ant-fila { border-left: 3px solid currentColor; }

/* --- Lo que ya existia, ahora leyendo el catalogo ---------------------- */
/* El cumplimiento de metas (Panel de Ventas) y el semaforo de Mi avance
   fueron el molde de todo esto; ahora salen del mismo lugar en vez de tener
   su propia copia del verde, el ambar y el rojo. */
.cumpl-bajo  { color: var(--ant-c-alarma); font-weight: 600; }
.cumpl-en    { color: var(--ant-c-atencion); font-weight: 600; }
.cumpl-sobre { color: var(--ant-c-bueno); font-weight: 600; }
.mi-avance .semaforo-rojo  { border-left-color: var(--ant-c-alarma); }
.mi-avance .semaforo-ambar { border-left-color: var(--ant-c-atencion); }
.mi-avance .semaforo-verde { border-left-color: var(--ant-c-bueno); }
.mi-avance .semaforo-gris  { border-left-color: var(--ant-c-neutro); }
.mi-avance .ma-barra-rojo  { background: var(--ant-c-alarma); }
.mi-avance .ma-barra-ambar { background: var(--ant-c-atencion); }
.mi-avance .ma-barra-verde { background: var(--ant-c-bueno); }
.mi-avance .ma-barra-gris  { background: var(--ant-c-neutro); }

/* La leyenda (la pestana "Colores" y /ayuda/colores). */
.ant-leyenda .ant-leyenda-fila { display: flex; gap: .6rem; align-items: baseline;
  padding: .3rem 0; border-bottom: 1px dashed rgba(1,30,57,.12); }
.ant-leyenda .ant-leyenda-fila:last-child { border-bottom: 0; }
.ant-leyenda .ant-leyenda-que { flex: 1 1 auto; min-width: 0; }
.ant-leyenda .ant-leyenda-muestra { flex: 0 0 auto; min-width: 11rem; }
[data-bs-theme="dark"] .ant-leyenda .ant-leyenda-fila { border-bottom-color: rgba(255,255,255,.12); }
@media (max-width: 575.98px) {
  .ant-leyenda .ant-leyenda-fila { display: block; }
  .ant-leyenda .ant-leyenda-muestra { margin-bottom: .15rem; }
}

/* Panel de Ventas (2026-10-02): el punto de color de cada marca en la tabla
   de al lado de la torta, que hace de leyenda. Lo pinta ventas_graficos.js. */
.marca-color { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%;
  margin-right: .35rem; vertical-align: middle; background: var(--bs-secondary-bg); }
/* «Por marca» ancha (22-10-2026): la torta a la izquierda con un ancho fijo
   (con % se achicaba al agregar columnas) y arriba en el celular. Las cifras
   con numeros de ancho fijo, para que las columnas se lean de arriba abajo. */
.marca-torta { height: 200px; width: 200px; flex: none; }
.marca-tabla td, .marca-tabla th { font-variant-numeric: tabular-nums; }
.marca-tabla th { white-space: nowrap; }
@media (max-width: 767.98px) { .marca-torta { width: 100%; height: 220px; } }

/* ===== Menu «Modulos» de la barra (2026-10-02) =====
   Buscador arriba, la lista se desplaza DENTRO del menu (antes se salia de la
   pantalla y los ultimos modulos no se veian) y un alfiler para fijar. */
.mod-menu { width: min(22rem, calc(100vw - 1.5rem)); overflow: hidden; }
.mod-menu-busca { position: relative; padding: .55rem .6rem; border-bottom: 1px solid var(--bs-border-color); }
.mod-menu-busca > i { position: absolute; left: 1.2rem; top: 50%; transform: translateY(-50%); color: var(--bs-secondary-color); }
.mod-menu-busca input { padding-left: 2rem; min-height: 38px; }
.mod-menu-lista { max-height: min(62vh, 30rem); overflow-y: auto; overscroll-behavior: contain; padding: .3rem 0; }
.mod-menu-titulo { padding: .45rem 1rem .15rem; font-size: var(--ant-t-micro); font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--bs-secondary-color); }
.mod-menu-item { display: flex; align-items: center; }
.mod-menu-item .dropdown-item { flex: 1 1 auto; min-width: 0; white-space: normal; padding-top: .45rem; padding-bottom: .45rem; }
.mod-menu-pin { flex: none; display: grid; place-items: center; width: 40px; height: 40px; margin-right: .3rem; border: 0;
  border-radius: 10px; background: transparent; color: var(--bs-secondary-color); opacity: .55; }
.mod-menu-item:hover .mod-menu-pin, .mod-menu-pin:focus-visible { opacity: 1; }
.mod-menu-pin:hover { background: var(--bs-tertiary-bg); color: var(--ant-fijado); }
.mod-menu-item.fijado .mod-menu-pin { opacity: 1; color: var(--ant-fijado); }
.mod-menu-vacio { padding: .6rem 1rem; color: var(--bs-secondary-color); font-size: .9rem; }
.mod-menu-pie { display: block; padding: .55rem 1rem; border-top: 1px solid var(--bs-border-color); font-size: .85rem;
  font-weight: 600; text-decoration: none; }
@media (hover: none) { .mod-menu-pin { opacity: 1; } }


/* Barra de avance de las acciones que tardan (static/js/progreso.js). */
.prog-caja { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
  width: min(440px, calc(100vw - 2rem)); z-index: 2000; padding: .9rem 1rem;
  background: var(--bs-body-bg); color: var(--bs-body-color);
  border: 1px solid var(--bs-border-color); border-radius: var(--ant-r-m); }
.prog-caja.prog-en-linea { position: static; transform: none; width: auto; margin: .5rem 0 0; }
.prog-caja .prog-aviso { font-weight: 700; font-size: .95rem; color: var(--ant-aviso-tinta);
  background: var(--ant-aviso-fondo); border: 1px solid var(--ant-aviso-borde); border-radius: var(--ant-r-s);
  padding: .4rem .6rem; }
/* En oscuro, los tres --ant-aviso-* cambian solos (bloque oscuro del principio). */

/* Blancos tactiles: en pantallas tactiles los enlaces chicos (ordenar por
   columna, "ver mas", todas/ninguna) se alargan hasta ser comodos de tocar,
   sin cambiar como se ven. */
@media (pointer: coarse) {
  thead th a,
  a.small,
  .small > a,
  .form-text a {
    display: inline-block;
    padding-block: .55rem;
    min-height: 44px;
    line-height: 1.4;
    box-sizing: border-box;
  }
}

/* ------------------------------------------------------------------ */
/* Esqueleto de carga (2026-10-21, pedido del usuario): mientras llega la
   pantalla nueva (otro periodo, otro filtro, otra pantalla), los textos y
   cifras del contenedor marcado con [data-esqueleto] se vuelven barras que se
   rellenan de izquierda a derecha, para que se note que algo esta pasando y
   el sistema no esta congelado. Lo pone el JS (`esqueleto-cargando`) solo si
   la carga pasa de un cuarto de segundo, y lo quita al llegar la pantalla.
   Las barras llevan el texto transparente (conservan el ancho de lo que
   habia: la pantalla no salta) y van solo en las hojas del texto, no en lo
   que esta dentro de otra hoja (si no se pintaria dos veces). */
[data-esqueleto].esqueleto-cargando { cursor: progress; }
[data-esqueleto].esqueleto-cargando :is(h1,h2,h3,h4,h5,h6,p,td,th,li,dt,dd,.badge,
  .fs-1,.fs-2,.fs-3,.fs-4,.fs-5,.display-5,.display-6,.fw-bold,.fw-semibold,strong,small,.small,label):not(
  :is(h1,h2,h3,h4,h5,h6,p,td,th,li,dt,dd,.badge,.fs-1,.fs-2,.fs-3,.fs-4,.fs-5,
      .display-5,.display-6,.fw-bold,.fw-semibold,strong,small,.small,label) *) {
  color: transparent !important;
  border-radius: 6px;
  background-color: var(--esq-fondo);
  background-image: linear-gradient(90deg, var(--esq-lleno), var(--esq-lleno));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: esqueleto-rellenar 1.4s ease-in-out infinite;
}
[data-esqueleto].esqueleto-cargando :is(h1,h2,h3,h4,h5,h6,p,td,th,li,dt,dd,.badge,
  .fs-1,.fs-2,.fs-3,.fs-4,.fs-5,.display-5,.display-6,.fw-bold,.fw-semibold,strong,small,.small,label) * {
  visibility: hidden;               /* iconos y enlaces dentro de la barra */
}
/* Una barra del largo del texto, no de toda la tarjeta. */
[data-esqueleto].esqueleto-cargando :is(h1,h2,h3,h4,h5,h6,p,dt,dd,label,
  .fs-1,.fs-2,.fs-3,.fs-4,.fs-5,.display-5,.display-6) { width: fit-content; max-width: 100%; }
/* En una tabla la barra va dentro del relleno de la celda: quedan separadas,
   no una grilla gris. */
[data-esqueleto].esqueleto-cargando :is(td,th) { background-clip: content-box; border-radius: 10px; }
/* Un leve desfase entre filas: se lee como una ola, no como un parpadeo. */
[data-esqueleto].esqueleto-cargando tr:nth-child(2n) > *,
[data-esqueleto].esqueleto-cargando .col:nth-child(2n) *,
[data-esqueleto].esqueleto-cargando [class*="col-"]:nth-child(2n) * { animation-delay: .18s; }
[data-esqueleto].esqueleto-cargando tr:nth-child(3n) > *,
[data-esqueleto].esqueleto-cargando .col:nth-child(3n) *,
[data-esqueleto].esqueleto-cargando [class*="col-"]:nth-child(3n) * { animation-delay: .36s; }
/* Graficos y fotos: se apagan, no se rellenan. */
[data-esqueleto].esqueleto-cargando :is(canvas, svg, img) { opacity: .18; transition: opacity .2s ease; }
:root { --esq-fondo: rgba(1,30,57,.07); --esq-lleno: rgba(1,30,57,.16); }
[data-bs-theme="dark"] { --esq-fondo: rgba(255,255,255,.06); --esq-lleno: rgba(255,255,255,.16); }
@keyframes esqueleto-rellenar {
  0%   { background-size: 0% 100%;   background-position: left center; }
  70%  { background-size: 100% 100%; background-position: left center; }
  100% { background-size: 100% 100%; background-position: left center; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
  [data-esqueleto].esqueleto-cargando * { animation: none !important; background-size: 100% 100% !important; }
}

/* ===================================================================== */
/*  Importaciones · rediseno etapa 1 (2026-10-22)                         */
/*  Barra de 4 entradas + lanzador Ctrl+K. Dentro del modulo el naranjo   */
/*  queda SOLO para lo que pide una accion (botones de guardar/ejecutar): */
/*  selecciones, avances, iconos y tarjetas de cifra pasan al marino/azul.*/
/* ===================================================================== */
:root { --imp-azul: #1b5b95; --imp-azul-suave: #e3edf7; --imp-sel: var(--ant-dark); }
[data-bs-theme="dark"] { --imp-azul: #6ea8dc; --imp-azul-suave: rgba(110,168,220,.16); --imp-sel: #2f5f8f; }

.imp-barra { display: flex; align-items: center; gap: 8px; padding: 6px;
  background: var(--ant-tarjeta); border: 1px solid var(--bs-border-color); border-radius: var(--ant-r-m); box-shadow: var(--ant-s1); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .imp-barra { -webkit-backdrop-filter: var(--ant-difuminado); backdrop-filter: var(--ant-difuminado); }
}
.imp-barra-tabs { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; overflow-x: auto; min-width: 0; flex: 1 1 auto; scrollbar-width: thin; }
.imp-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; border: 0; background: transparent;
  color: var(--bs-body-color); font-weight: 600; font-size: .92rem; white-space: nowrap; text-decoration: none; line-height: 1.2; }
.imp-tab:hover { background: var(--imp-azul-suave); color: var(--bs-body-color); }
.imp-tab:focus-visible { outline: 2px solid var(--imp-azul); outline-offset: 1px; }
.imp-tab.activa { background: var(--imp-sel); color: #fff; }
.imp-tab.activa:hover { color: #fff; }
.imp-tab .bi { font-size: 1rem; }
.imp-mas .dropdown-header { font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.imp-mas .dropdown-item.active, .imp-mas .dropdown-item:active { background: var(--imp-sel); color: #fff; }
.imp-buscar { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 6px 8px 6px 12px; min-width: 0;
  border: 1px solid var(--bs-border-color); border-radius: 9px; background: var(--bs-body-bg); color: var(--bs-secondary-color); font-size: .88rem; }
.imp-buscar:hover { border-color: var(--imp-azul); color: var(--bs-body-color); }
.imp-buscar:focus-visible { outline: 2px solid var(--imp-azul); outline-offset: 1px; }
.imp-buscar kbd, .imp-lanzador kbd { font-family: ui-monospace, Consolas, monospace; font-size: .7rem; padding: 1px 6px; border-radius: 5px;
  background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); border-bottom-width: 2px; box-shadow: none; }
@media (max-width: 991.98px) { .imp-buscar-txt { display: none; } }
@media (max-width: 575.98px) { .imp-tab span { display: none; } .imp-tab.activa span { display: inline; } .imp-buscar kbd { display: none; } }

/* lanzador */
.imp-lanzador .modal-dialog { max-width: 620px; margin-top: 10vh; }
.imp-lanzador .modal-content { border-radius: var(--ant-r-m); overflow: hidden; box-shadow: var(--ant-s3); }
.imp-lanzador-busca { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--bs-border-color); }
.imp-lanzador-busca .form-control { border: 0; box-shadow: none; font-size: 1.05rem; padding: 4px 0; background: transparent; }
.imp-lanzador-busca .form-control:focus { border: 0; box-shadow: none; outline: none; } /* es el unico campo de la ventana: el foco se ve por el cursor */
.imp-lanzador-lista { list-style: none; margin: 0; padding: 0; }
.imp-lanzador-grupo { padding: 8px 10px 4px; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bs-secondary-color); }
.imp-lanzador-op { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 9px; color: var(--bs-body-color); text-decoration: none; }
.imp-lanzador-op .bi { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: var(--imp-azul-suave); color: var(--imp-azul); flex: 0 0 auto; }
.imp-lanzador-txt { display: grid; min-width: 0; }
.imp-lanzador-txt b { font-weight: 600; }
.imp-lanzador-txt small { color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
li.sel > .imp-lanzador-op { background: var(--imp-azul-suave); }
.imp-lanzador-pie { display: flex; flex-wrap: wrap; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--bs-border-color); }

/* selecciones (filtros, vistas): marino, no naranjo */
.btn-imp-sel { background: var(--imp-sel); border: 1px solid var(--imp-sel); color: #fff; }
.btn-imp-sel:hover, .btn-imp-sel:focus { background: var(--imp-sel); color: #fff; filter: brightness(1.15); }
.btn-imp-op { background: transparent; border: 1px solid var(--bs-border-color); color: var(--bs-body-color); }
.btn-imp-op:hover { background: var(--imp-azul-suave); color: var(--bs-body-color); }
/* dentro del modulo: lo que no es accion deja el naranjo */
.imp-barra-env ~ * .stat-card, .imp-barra-env ~ .stat-card { border-left-color: var(--imp-azul); }
.imp-barra-env ~ * .text-primary { color: var(--imp-azul) !important; }
.imp-barra-env ~ * .bg-primary { background-color: var(--imp-azul) !important; }

/* portada: cifras con minigrafico */
.imp-kpi { display: grid; gap: 6px; height: 100%; padding: 16px 18px; border: 1px solid var(--bs-border-color); border-radius: var(--ant-r-m);
  background: var(--ant-tarjeta); box-shadow: var(--ant-s1); }
.imp-kpi .imp-kpi-rot { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-secondary-color); }
.imp-kpi .imp-kpi-v { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.imp-kpi .imp-kpi-s { font-size: .82rem; color: var(--bs-secondary-color); }
.imp-kpi svg { width: 100%; height: auto; max-height: 72px; display: block; overflow: visible; }
.imp-kpi svg text { fill: var(--bs-secondary-color); font-size: 9px; }
.imp-kpi .imp-spark-area { fill: var(--imp-azul-suave); }
.imp-kpi .imp-spark-linea { fill: none; stroke: var(--imp-azul); stroke-width: 2; }
.imp-kpi .imp-spark-punto { fill: var(--imp-azul); }
.imp-kpi .imp-barra-pago { fill: var(--imp-azul); opacity: .35; }
.imp-kpi .imp-barra-pago.vencida { fill: var(--bs-danger); opacity: .85; }
.imp-kpi .imp-barra-pago.pronto { fill: var(--imp-azul); opacity: .9; }
.imp-kpi.accion { border-color: var(--ant-accent); box-shadow: inset 3px 0 0 var(--ant-accent), var(--ant-s1); }
.imp-kpi.accion .imp-kpi-v { color: var(--ant-accent); }
.imp-kpi.tranquilo .imp-kpi-v { color: var(--bs-success); }
.imp-kpi ul { margin: 0; padding-left: 18px; font-size: .84rem; display: grid; gap: 2px; }

/* Importaciones · rediseno etapa 2 (2026-10-22): carriles, calendario,     */
/* ruta dibujada y linea de tiempo plan contra real.                       */
:root { --imp-aviso: var(--ant-c-atencion); --imp-aviso-suave: #fbefd2; --imp-mal: var(--ant-c-alarma); --imp-mal-suave: #f8dfe2; --imp-ok: var(--ant-c-bueno); --imp-ok-suave: #dff1e8; }
[data-bs-theme="dark"] { --imp-aviso: #e2b04a; --imp-aviso-suave: rgba(226,176,74,.16); --imp-mal: #ff7b86; --imp-mal-suave: rgba(255,123,134,.14); --imp-ok: #4cc38a; --imp-ok-suave: rgba(76,195,138,.14); }

.imp-carriles { display: grid; gap: 8px; }
.imp-carril { display: grid; grid-template-columns: minmax(150px, 210px) 1fr minmax(110px, auto); gap: 16px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--bs-border-color); border-radius: var(--ant-r-s); background: var(--ant-tarjeta); min-width: 0; }
.imp-carril-q { display: grid; min-width: 0; }
.imp-carril-q span { font-size: .78rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-tramos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; min-width: 0; }
.imp-tramo { display: grid; gap: 5px; min-width: 0; }
.imp-tramo-barra { height: 8px; border-radius: 999px; background: var(--bs-border-color); overflow: hidden; }
.imp-tramo-barra span { display: block; height: 100%; border-radius: 999px; background: var(--imp-azul); }
.imp-tramo.alerta .imp-tramo-barra span { background: var(--imp-aviso); }
.imp-tramo small { font-size: .7rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.imp-tramo.ahora small, .imp-tramo.alerta small { color: var(--bs-body-color); font-weight: 700; }
.imp-tramo.alerta small { color: var(--imp-aviso); }
.imp-carril-llega { display: grid; justify-items: end; gap: 3px; text-align: right; }
.imp-carril-llega b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.imp-carril-nota { font-size: .72rem; color: var(--bs-secondary-color); }
.imp-pill { display: inline-flex; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.imp-pill.info { background: var(--imp-azul-suave); color: var(--imp-azul); }
.imp-pill.aviso { background: var(--imp-aviso-suave); color: var(--imp-aviso); }
.imp-pill.mal { background: var(--imp-mal-suave); color: var(--imp-mal); }
.imp-pill.ok { background: var(--imp-ok-suave); color: var(--imp-ok); }
.imp-pill.neutro { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
@media (max-width: 767.98px) {
  .imp-carril { grid-template-columns: 1fr; gap: 10px; }
  .imp-carril-llega { justify-items: start; text-align: left; grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; }
}

.imp-cal-env { overflow-x: auto; }
.imp-cal { display: grid; gap: 4px; min-width: 760px; font-size: .76rem; }
.imp-cal-h { text-align: center; font-weight: 600; color: var(--bs-secondary-color); padding: 2px 0; border-radius: 6px; }
.imp-cal-h.actual { background: var(--imp-azul-suave); color: var(--imp-azul); }
.imp-cal-r { align-self: center; font-weight: 700; color: var(--bs-secondary-color); }
.imp-cal-c { min-height: 38px; border-radius: 8px; background: var(--bs-tertiary-bg); padding: 4px; display: grid; gap: 3px; align-content: start; min-width: 0; }
.imp-ev { display: block; border-radius: 6px; padding: 2px 6px; white-space: normal; overflow-wrap: anywhere; line-height: 1.25; text-decoration: none; font-weight: 500; }
.imp-ev.llega { background: var(--imp-azul-suave); color: var(--imp-azul); }
.imp-ev.llega.atrasada { background: var(--imp-mal-suave); color: var(--imp-mal); }
.imp-ev.paga { background: var(--bs-body-bg); color: var(--bs-body-color); border: 1px solid var(--bs-border-color); }
.imp-ev.paga.vencida { background: var(--imp-mal-suave); color: var(--imp-mal); border-color: transparent; }
.imp-ev:hover { filter: brightness(.95); }

.imp-ruta { background: var(--ant-dark); border-radius: var(--ant-r-s); padding: 6px 10px 2px; }
.imp-ruta svg { width: 100%; height: auto; display: block; max-height: 150px; margin: 0 auto; }
.imp-ruta-mar { fill: none; stroke: #5b9bd8; stroke-width: 3; }
.imp-ruta-tierra { fill: none; stroke: #5b9bd8; stroke-width: 3; stroke-dasharray: 7 7; opacity: .7; }
.imp-ruta-punto { fill: none; stroke: #fff; stroke-width: 2; }
.imp-ruta-punto.hecho { fill: #fff; }
.imp-ruta-txt text { fill: #fff; font-size: 13px; }
.imp-ruta-txt text.tenue { fill: #9fb6cd; font-size: 11px; }
.imp-ruta-aqui .halo { fill: rgba(232,82,21,.25); }
.imp-ruta-aqui .nucleo { fill: var(--ant-accent); }

.imp-lt { list-style: none; margin: 0; padding: 0; display: grid; }
.imp-lt li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: start; position: relative; padding-bottom: 14px; }
.imp-lt li::before { content: ""; position: absolute; left: 11px; top: 22px; bottom: 0; width: 2px; background: var(--bs-border-color); }
.imp-lt li:last-child::before { display: none; }
.imp-lt-punto { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bs-border-color); background: var(--bs-body-bg);
  display: grid; place-items: center; font-size: .75rem; font-weight: 800; position: relative; z-index: 1; }
.imp-lt li.hecho .imp-lt-punto { background: var(--imp-azul); border-color: var(--imp-azul); color: #fff; }
.imp-lt li.ahora .imp-lt-punto { border-color: var(--imp-azul); box-shadow: 0 0 0 4px var(--imp-azul-suave); }
.imp-lt li.atrasado .imp-lt-punto { border-color: var(--imp-aviso); color: var(--imp-aviso); box-shadow: 0 0 0 4px var(--imp-aviso-suave); }
.imp-lt-txt { display: grid; min-width: 0; }
.imp-lt-txt small { color: var(--bs-secondary-color); }
.imp-lt li.pendiente .imp-lt-txt b { color: var(--bs-secondary-color); font-weight: 600; }
.imp-lt-fechas { display: grid; justify-items: end; font-size: .78rem; font-variant-numeric: tabular-nums; }
.imp-lt-fechas .plan { color: var(--bs-secondary-color); }
.imp-lt-fechas .real { font-weight: 700; }
.imp-lt-fechas em { font-style: normal; font-weight: 700; }
.imp-lt-fechas .tarde, .imp-lt-fechas em.tarde { color: var(--imp-aviso); font-weight: 700; }
.imp-lt-fechas em.antes { color: var(--imp-ok); }
.imp-lt-fechas .ahora { color: var(--imp-azul); font-weight: 700; }

.imp-tarjetas-viaje { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.imp-tv { border: 1px solid var(--bs-border-color); border-radius: var(--ant-r-s); background: var(--ant-tarjeta); padding: 14px; display: grid; gap: 10px; min-width: 0; }
.imp-tv-cab { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.imp-tv-cab div { display: grid; min-width: 0; }
.imp-tv-cab small { color: var(--bs-secondary-color); }
.imp-tv-datos { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .8rem; color: var(--bs-secondary-color); }
.imp-tv-datos b { color: var(--bs-body-color); font-weight: 600; }
.imp-tv .imp-tramos { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- Importaciones, rediseno etapa 3: graficos (2026-10-23) ---------- */
.imp-tip { position: fixed; z-index: 1080; max-width: 320px; pointer-events: none; background: var(--ant-dark, #011e39); color: #fff; font-size: .8rem; line-height: 1.35; padding: 6px 10px; border-radius: var(--ant-r-s, 8px); box-shadow: var(--ant-s2); }
[data-tip]:focus-visible { outline: 2px solid var(--imp-azul); outline-offset: 2px; }

/* barras por mes */
.imp-gb { display: grid; grid-template-columns: 52px 1fr; gap: 6px; height: 210px; }
.imp-gb-eje { display: flex; flex-direction: column; justify-content: space-between; font-size: .7rem; color: var(--bs-secondary-color); text-align: right; padding-bottom: 18px; font-variant-numeric: tabular-nums; }
.imp-gb-area { position: relative; display: flex; align-items: stretch; gap: 3px; min-width: 0; }
.imp-gb-grid { position: absolute; inset: 0 0 18px 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.imp-gb-grid i { display: block; border-top: 1px solid var(--bs-border-color-translucent); }
.imp-gb-col { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 18px; }
.imp-gb-barra { display: block; background: var(--imp-azul); border-radius: 4px 4px 0 0; min-height: 1px; }
.imp-gb-col.actual .imp-gb-barra { background: repeating-linear-gradient(135deg, var(--imp-azul) 0 4px, var(--imp-azul-suave) 4px 7px); }
.imp-gb-col:hover .imp-gb-barra, .imp-gb-col:focus .imp-gb-barra { filter: brightness(1.18); }
.imp-gb-col small { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font-size: .66rem; color: var(--bs-secondary-color); white-space: nowrap; visibility: hidden; }
.imp-gb-col small.visible { visibility: visible; }

/* barras por proveedor */
.imp-gh { display: grid; gap: 8px; }
.imp-gh-fila { display: grid; grid-template-columns: minmax(90px, 130px) 1fr auto 62px; gap: 10px; align-items: center; font-size: .86rem; }
.imp-gh-nom { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-gh-pista { height: 14px; background: var(--bs-tertiary-bg); border-radius: 4px; overflow: hidden; }
.imp-gh-barra { display: block; height: 100%; background: var(--imp-azul); border-radius: 0 4px 4px 0; }
.imp-gh-val { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.imp-gh-pct { font-variant-numeric: tabular-nums; color: var(--bs-secondary-color); text-align: right; font-size: .8rem; }

/* cuadros del historico */
.imp-cu { display: grid; gap: 10px; }
.imp-cu-fila { display: grid; grid-template-columns: minmax(110px, 150px) 1fr; gap: 12px; align-items: start; }
.imp-cu-nom { font-weight: 600; font-size: .88rem; line-height: 1.2; }
.imp-cu-nom small { display: block; font-weight: 400; color: var(--bs-secondary-color); font-size: .74rem; }
.imp-cu-cuadros { display: flex; flex-wrap: wrap; gap: 3px; }
.imp-cu-c { display: inline-block; width: 16px; height: 16px; border-radius: 3px; background: var(--bs-secondary-bg); border: 1px solid var(--bs-border-color); }
a.imp-cu-c:hover, a.imp-cu-c:focus-visible { transform: scale(1.25); outline: 2px solid var(--imp-azul); outline-offset: 1px; }
.imp-cu-c.cuadra { background: var(--imp-ok); border-color: var(--imp-ok); }
.imp-cu-c.menor { background: var(--imp-aviso); border-color: var(--imp-aviso); }
.imp-cu-c.diferencia { background: var(--imp-mal); border-color: var(--imp-mal); }
.imp-cu-c.sin_pago { background: repeating-linear-gradient(135deg, var(--bs-secondary-bg) 0 3px, var(--bs-border-color) 3px 5px); }
.imp-cu-leyenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .78rem; margin-top: 4px; }
.imp-cu-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.imp-cu-leyenda .imp-cu-c { width: 12px; height: 12px; }
@media (max-width: 575.98px) { .imp-cu-fila { grid-template-columns: 1fr; gap: 4px; } .imp-cu-c { width: 18px; height: 18px; } }

/* cascada del costo */
.imp-wf { display: grid; gap: 6px; }
.imp-wf-fila { display: grid; grid-template-columns: minmax(150px, 230px) 1fr minmax(110px, auto); gap: 12px; align-items: center; font-size: .88rem; }
.imp-wf-nom em { font-style: normal; font-size: .72rem; font-weight: 600; color: var(--imp-aviso); background: var(--imp-aviso-suave); border-radius: 999px; padding: 0 7px; margin-left: 4px; }
.imp-wf-pista { height: 18px; position: relative; }
.imp-wf-barra { display: block; height: 100%; border-radius: 4px; background: var(--imp-azul); }
.imp-wf-fila.estimado .imp-wf-barra { background: repeating-linear-gradient(135deg, var(--imp-azul) 0 1.5px, var(--imp-azul-suave) 1.5px 7px); border: 1px dashed var(--imp-azul); }
.imp-wf-fila.total { border-top: 1px solid var(--bs-border-color); padding-top: 8px; margin-top: 2px; font-weight: 700; }
.imp-wf-fila.total .imp-wf-barra { background: repeating-linear-gradient(135deg, var(--imp-azul) 0 1.5px, var(--imp-azul-suave) 1.5px 7px); border: 1px dashed var(--imp-azul); overflow: hidden; display: flex; }
.imp-wf-fila.total .imp-wf-barra .real { display: block; height: 100%; background: var(--ant-dark, #011e39); }
[data-bs-theme="dark"] .imp-wf-fila.total .imp-wf-barra .real { background: var(--imp-azul); }
.imp-wf-val { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.imp-wf-leyenda { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .78rem; color: var(--bs-secondary-color); margin-top: 6px; }
.imp-wf-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.imp-wf-m { display: inline-block; width: 14px; height: 10px; border-radius: 2px; background: var(--imp-azul); }
.imp-wf-m.estimado { background: repeating-linear-gradient(135deg, var(--imp-azul) 0 1.5px, var(--imp-azul-suave) 1.5px 5px); border: 1px dashed var(--imp-azul); }
@media (max-width: 767.98px) {
  .imp-wf-fila { grid-template-columns: 1fr auto; grid-template-areas: "nom val" "pista pista"; gap: 2px 10px; }
  .imp-wf-nom { grid-area: nom; } .imp-wf-val { grid-area: val; } .imp-wf-pista { grid-area: pista; height: 12px; }
  .imp-gh-fila { grid-template-columns: 1fr auto 52px; grid-template-areas: "nom val pct" "pista pista pista"; gap: 2px 8px; }
  .imp-gh-nom { grid-area: nom; } .imp-gh-val { grid-area: val; } .imp-gh-pct { grid-area: pct; } .imp-gh-pista { grid-area: pista; height: 10px; }
  .imp-gb { height: 170px; grid-template-columns: 40px 1fr; } .imp-gb-area { gap: 1px; }
}


/* ============================================================= */
/*  Estetica clara (2026-10-27): controles comunes                */
/*  Formularios, menus, pestanas y tablas con las superficies    */
/*  del disenador. Va al final para ganarle a Bootstrap.          */
/* ============================================================= */
a { color: var(--ant-icono); }
a:hover { color: color-mix(in srgb, var(--ant-icono) 80%, var(--ant-tinta)); }
.app-body .text-muted, .app-body .form-text { color: var(--ant-muted) !important; }
.page-title { text-wrap: balance; }
.app-body .table { --bs-table-bg: transparent; --bs-table-border-color: var(--ant-line); color: var(--ant-tinta); }
.app-body .table > thead th {
  font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ant-muted); border-bottom-color: var(--ant-line);
}
.app-body .table-hover > tbody > tr:hover > * { --bs-table-hover-bg: color-mix(in srgb, var(--ant-icono) 5%, transparent); }

.app-body .form-control, .app-body .form-select {
  border-color: var(--ant-line); background-color: var(--ant-surface); color: var(--ant-tinta);
}
.app-body .form-control:focus, .app-body .form-select:focus {
  border-color: var(--ant-icono);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ant-icono) 22%, transparent);
}
.app-body .input-group-text { background: var(--ant-bg); border-color: var(--ant-line); color: var(--ant-muted); }

.app-body .dropdown-menu {
  --bs-dropdown-bg: var(--ant-surface); --bs-dropdown-border-color: var(--ant-line);
  --bs-dropdown-link-color: var(--ant-tinta);
  --bs-dropdown-link-hover-bg: color-mix(in srgb, var(--ant-icono) 10%, transparent);
  --bs-dropdown-link-hover-color: var(--ant-tinta);
  --bs-dropdown-link-active-bg: color-mix(in srgb, var(--ant-icono) 16%, transparent);
  --bs-dropdown-link-active-color: var(--ant-tinta);
  --bs-dropdown-border-radius: var(--ant-r-m);
  box-shadow: var(--ant-s2); padding: .35rem 0;
}
.app-body .dropdown-item { border-radius: var(--ant-r-xs); margin-inline: .25rem; width: auto; min-height: 36px;
  display: flex; align-items: center; }
.app-body .dropdown-item > .bi { color: var(--ant-icono); }

/* Pestanas: subrayado y nada de cajas. El activo lleva el naranjo fino,
   que aqui SI marca donde esta la persona (la propuesta lo hace igual). */
.app-body .nav-tabs { --bs-nav-tabs-border-color: var(--ant-line); gap: 2px; }
.app-body .nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--ant-muted); font-weight: 500; background: transparent; border-radius: 0;
}
.app-body .nav-tabs .nav-link:hover { color: var(--ant-tinta); border-bottom-color: var(--ant-line); }
.app-body .nav-tabs .nav-link.active, .app-body .nav-tabs .nav-item.show .nav-link {
  color: var(--ant-tinta); background: transparent; border-bottom-color: var(--ant-accent); font-weight: 600;
}
.app-body .nav-pills .nav-link { border-radius: 999px; color: var(--ant-tinta); }
.app-body .nav-pills .nav-link.active { background: var(--ant-tinta); color: var(--ant-surface); }

.app-body .modal-content { background: var(--ant-surface); border: 1px solid var(--ant-line);
  border-radius: var(--ant-r-m); box-shadow: var(--ant-s3); }
.app-body .modal-header, .app-body .modal-footer { border-color: var(--ant-line); }
.app-body .list-group { --bs-list-group-bg: var(--ant-surface); --bs-list-group-border-color: var(--ant-line); }
.app-body .btn-outline-secondary { --bs-btn-border-color: var(--ant-line); --bs-btn-color: var(--ant-tinta);
  --bs-btn-hover-bg: color-mix(in srgb, var(--ant-icono) 10%, transparent); --bs-btn-hover-color: var(--ant-tinta);
  --bs-btn-hover-border-color: var(--ant-line); }
.app-body .btn-light { --bs-btn-bg: var(--ant-surface); --bs-btn-border-color: var(--ant-line); --bs-btn-color: var(--ant-tinta); }
.app-body .alert { box-shadow: none; border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.app-body hr { border-color: var(--ant-line); opacity: 1; }

/* Telefono: la barra clara cabe en UNA fila. Los botones quedan solo con su
   icono (el texto ya lo dice el title) y el logo se achica un poco. */
@media (max-width: 575.98px) {
  .app-topbar { flex-wrap: nowrap; padding-inline: .5rem !important; }
  .app-topbar .topbar-logo { max-width: 112px; height: 22px; }
  .app-topbar .btn-topbar { padding: .25rem .45rem; }
  .app-topbar .btn-topbar > span:not(.badge) { display: none; }
  .app-topbar .gap-2 { gap: .15rem !important; }
}

/* ============================================================= */
/*  Portal por grupos (2026-10-28, propuesta del disenador)       */
/*  Grupos de modulos en un mosaico de 9 unidades (6 en tableta,  */
/*  1 en el telefono). El reparto lo calcula portal/index.html:   */
/*  pone --s9/--s6 (ancho) y --o9/--o6/--o0 (orden) en cada pieza. */
/* ============================================================= */
.pg-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: .25rem 0 .5rem; }
.pg-chip {
  border: 1px solid var(--ant-line); background: var(--ant-surface); color: var(--ant-tinta);
  border-radius: 999px; min-height: 36px; padding: 0 .85rem; font-weight: 500;
  transition: background-color .15s, color .15s, border-color .15s;
}
.pg-chip:hover { border-color: color-mix(in srgb, var(--ant-icono) 45%, var(--ant-line)); }
.pg-chip[aria-pressed="true"] { background: var(--ant-tinta); color: var(--ant-surface); border-color: var(--ant-tinta); }

/* El mosaico de grupos (2026-10-30): el portal mide la pagina en columnas
   de tarjeta y encaja cada grupo como una pieza (Finanzas, 8 modulos: 4 x 2).
   Las columnas y la posicion de cada grupo las pone el JavaScript del portal
   (clase .armado); sin el, los grupos van uno bajo otro. */
.pg-grupos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: stretch; }
.pg-grupos > .pg-grupo, .pg-cluster { min-width: 0; }
/* Dentro del grupo, de a dos en vertical y hacia la derecha (barra de
   chocolate). Con un numero impar, el ultimo ocupa su columna entera. */
.pg-grupos.armado .pg-grupo { display: flex; flex-direction: column; }
.pg-grupos.armado .pg-tiles { flex: 1; grid-template-columns: none;
  grid-template-rows: repeat(var(--filas, 2), minmax(104px, 1fr));
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.pg-grupos.armado .pg-mod.pg-ancho { grid-row: span 2; }
.pg-cluster { display: grid; grid-template-columns: repeat(var(--k, 3), minmax(0, 1fr)); gap: 12px; }
.pg-cluster > .pg-grupo { min-width: 0; }
.pg-grupo {
  background: var(--ant-surface); border: 1px solid var(--ant-line);
  border-radius: var(--ant-r-m); box-shadow: var(--ant-s1); padding: 12px;
}
.pg-grupo-h {
  display: flex; align-items: center; gap: .5rem; margin: 0 0 10px;
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ant-muted);
}
.pg-grupo-h .bi { color: var(--ant-icono); font-size: 1rem; }
.pg-grupo-h .pg-n { margin-left: auto; font-weight: 500; letter-spacing: 0; text-transform: none; font-size: .72rem; }
.pg-grupo.chico .pg-grupo-h { flex-wrap: wrap; gap: .1rem .4rem; letter-spacing: .03em;
  font-size: .68rem; line-height: 1.25; align-items: flex-start; }

.pg-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; }
/* Un grupo chico en un bloque angosto queda en una columna sola; en uno
   ancho sus tarjetas se ponen lado a lado (el auto-fill de arriba). */

/* La tarjeta del modulo: asentada sobre el piso gris; al pasar el mouse
   sube a blanco con sombra. El icono va sin cuadro: el icono es el color. */
.pg-mod {
  position: relative; border: 1px solid var(--ant-line); border-radius: var(--ant-r-m);
  background: var(--ant-bg); min-height: 104px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 14px 6px 10px; text-align: center;
  transition: box-shadow .18s, border-color .18s, background-color .18s, transform .18s;
}
.pg-mod:hover, .pg-mod:focus-within {
  background: var(--ant-surface); box-shadow: var(--ant-s2);
  border-color: color-mix(in srgb, var(--ant-icono) 40%, var(--ant-line));
}
.pg-mod:hover { transform: translateY(-1px); }
.pg-icono { font-size: 2.5rem; line-height: 1; color: var(--ant-icono); }
.pg-nombre {
  font-weight: 600; font-size: .8rem; line-height: 1.22; color: var(--ant-tinta);
  text-decoration: none; text-wrap: balance; overflow-wrap: anywhere;
}
.pg-nombre:hover { color: var(--ant-tinta); }
/* Toda la tarjeta abre el modulo; los controles van por encima. */
.pg-nombre::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.pg-nivel { position: absolute; top: 9px; left: 9px; font-size: .72rem; color: var(--ant-muted); }
.pg-nivel.pg-fijo { color: var(--ant-accent); }
.pg-mod .portal-acciones { z-index: 3; }
.pg-mod .portal-mas { opacity: 0; transition: opacity .15s; color: var(--ant-muted); }
.pg-mod:hover .portal-mas, .pg-mod:focus-within .portal-mas { opacity: 1; }
@media (hover: none) { .pg-mod .portal-mas { opacity: 1; } }
.modulo-item.pg-mod.acciones-abiertas .portal-acciones { inset: 0; }
.modulo-item.pg-mod.acciones-abiertas .portal-acciones-menu { background: var(--ant-surface); }

/* Lista compacta: una fila por modulo, dentro de su grupo. */
/* Lista compacta: los grupos en columnas de diario, sin huecos. */
.pg-grupos.compacta { display: block; columns: 3 300px; column-gap: 12px; }
.pg-grupos.compacta > .pg-grupo { break-inside: avoid; margin: 0 0 12px; }
.pg-grupos.compacta .pg-tiles { grid-template-columns: 1fr; gap: 2px; }
.pg-grupos.compacta .pg-mod {
  flex-direction: row; justify-content: flex-start; min-height: 48px;
  padding: 4px 48px 4px 12px; gap: 12px; text-align: left;
  border-color: transparent; background: transparent;
}
.pg-grupos.compacta .pg-mod:hover { background: var(--ant-bg); border-color: var(--ant-line);
  transform: none; box-shadow: none; }
.pg-grupos.compacta .pg-icono { font-size: 1.5rem; width: 1.75rem; text-align: center; }
.pg-grupos.compacta .pg-nivel { position: static; order: 3; margin-left: auto; }
.pg-grupos.compacta .portal-mas { opacity: 1; }

@media (max-width: 759.98px) {
  .pg-grupos, .pg-grupos.compacta { grid-template-columns: 1fr; columns: auto; }
  .pg-grupos > .pg-grupo, .pg-cluster { grid-column: auto; }
  .pg-cluster { grid-template-columns: 1fr; }
  .pg-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pg-grupos.compacta .pg-tiles { grid-template-columns: 1fr; }
  .pg-grupo.chico .pg-grupo-h { font-size: .75rem; letter-spacing: .06em; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-mod, .pg-chip { transition: none; }
  .pg-mod:hover { transform: none; }
}
.portal-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }
@media (max-width: 575.98px) { .portal-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Mover un grupo: dos flechas en la esquina del encabezado, que aparecen al
   pasar el mouse o con el teclado (siempre visibles en pantallas tactiles). */
.pg-grupo { position: relative; }
.pg-mover { position: absolute; top: 6px; right: 6px; display: flex; gap: 2px;
  opacity: 0; transition: opacity .15s; background: var(--ant-surface); border-radius: var(--ant-r-xs); }
.pg-grupo:hover .pg-mover, .pg-mover:focus-within { opacity: 1; }
@media (hover: none) { .pg-mover { opacity: 1; } }
.pg-mover-btn { border: 0; background: transparent; color: var(--ant-muted); min-width: 32px; min-height: 32px;
  border-radius: var(--ant-r-xs); display: inline-flex; align-items: center; justify-content: center; }
.pg-mover-btn.grupo-handle { cursor: grab; }
.pg-mover-btn.grupo-handle:active { cursor: grabbing; }
.pg-mover-btn:hover, .pg-mover-btn:focus-visible { background: color-mix(in srgb, var(--ant-icono) 12%, transparent); color: var(--ant-tinta); }
@media (pointer: coarse) { .pg-mover-btn { min-width: 40px; min-height: 40px; } }
.pg-grupo .pg-grupo-h { padding-right: 70px; }

/* ============================================================= */
/*  Panel de Ventas con la estetica del disenador (2026-10-28)    */
/*  La maqueta «panel-ventas.html»: el lateral es una tarjeta     */
/*  flotante con grupos que se pliegan, migas arriba, filtros en  */
/*  un recuadro y tarjetas de indicador con un filo de color.     */
/*  Solo dentro de .ventas-lateral: los demas modulos no cambian. */
/* ============================================================= */
.ventas-kpis {
  --kc-azul: #2b6cb0; --kc-neutro: #6b7280; --kc-info: #0b7285; --kc-warn: #b7791f;
}
[data-bs-theme="dark"] .ventas-kpis {
  --kc-azul: #6aa8ee; --kc-neutro: #9aa8b8; --kc-info: #4fc3d9; --kc-warn: #e0b04a;
}

@media (min-width: 769px) {
  .ventas-lateral { gap: 16px; padding: 16px 0 0 16px; }
  .ventas-lateral #sidebar {
    top: 72px; max-height: calc(100vh - 88px);
    border: 1px solid var(--ant-line); border-radius: var(--ant-r-m);
    box-shadow: var(--ant-s1); padding: 4px 8px 8px;
  }
  .ventas-lateral #sidebar:not(.riel) { width: 236px; }
  .ventas-lateral .mod-main { padding: 0 16px 24px 0; }
  .ventas-grande .ventas-lateral { padding: 0; }
}

/* Dentro del lateral: titulos de grupo en versalitas chicas, que se tocan
   para plegar; los enlaces mas compactos, como en la maqueta. */
.ventas-lateral #sidebar .brand { padding: .7rem .5rem .65rem; font-size: .95rem; }
.ventas-lateral #sidebar .nav-link { padding: 0 .5rem; min-height: 36px; font-size: .875rem; }
.ventas-lateral #sidebar .nav-section { padding: .85rem .5rem .25rem; font-size: var(--ant-t-micro); letter-spacing: .06em; }
.ventas-lateral #sidebar details { border-bottom: 1px solid var(--ant-line); padding: 2px 0 4px; }
.ventas-lateral #sidebar details:last-of-type { border-bottom: 0; }
.ventas-lateral #sidebar details > summary.nav-section {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 36px; padding: 0 .5rem; margin: 2px 0; border-radius: var(--ant-r-xs);
}
.ventas-lateral #sidebar details > summary.nav-section:hover { background: color-mix(in srgb, var(--ant-icono) 8%, transparent); color: var(--ant-tinta); }
.ventas-lateral #sidebar details > summary::after {
  content: "\F282"; font-family: bootstrap-icons; float: none; margin: 0;
  font-size: .75rem; transition: transform .2s;
}
.ventas-lateral #sidebar details[open] > summary::after { content: "\F282"; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .ventas-lateral #sidebar details > summary::after { transition: none; } }

/* Migas: donde esta la persona. */
.ventas-migas { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  font-size: 13px; color: var(--ant-muted); padding-top: .35rem; }
.ventas-migas a { color: var(--ant-muted); text-decoration: none; }
.ventas-migas a:hover { color: var(--ant-icono); text-decoration: underline; }
.ventas-migas i { font-size: .65rem; }
.ventas-migas strong { color: var(--ant-tinta); font-weight: 600; }

/* El titulo de cada pantalla, sin el icono de adelante: la maqueta lo deja
   limpio y el icono ya esta en el lateral, junto al nombre. */
#ventas-contenido h1.page-title { font-size: 1.3rem; font-weight: 700; }
#ventas-contenido h1.page-title > i.bi:first-child { display: none; }

/* Filtros dentro de un recuadro, con el rotulo chico arriba de cada uno. */
.ventas-filtros {
  background: var(--ant-surface); border: 1px solid var(--ant-line);
  border-radius: var(--ant-r-m); box-shadow: var(--ant-s1);
  padding: 8px 10px; gap: 8px 10px !important;
}
.ventas-filtros .form-label { font-size: 12px; color: var(--ant-muted); margin-bottom: 2px !important; }
.ventas-filtros .form-select, .ventas-filtros .form-control { background-color: var(--ant-bg); min-height: 34px; }
.ventas-filtros .form-select:focus, .ventas-filtros .form-control:focus { background-color: var(--ant-surface); }

/* Tarjetas de indicador: un filo de color a la izquierda, rotulo chico y la
   cifra fuerte (en la maqueta, `.kpi`). El color dice que tarjeta es, no si
   esta bien o mal: eso lo dicen la flecha y el texto del cumplimiento. */
.ventas-kpis > .col > .card { border-left: 3px solid var(--c, var(--ant-icono)); padding: 10px 12px !important; }
.ventas-kpis > .col:nth-child(1) { --c: var(--kc-azul); }
.ventas-kpis > .col:nth-child(2) { --c: var(--kc-neutro); }
.ventas-kpis > .col:nth-child(3) { --c: var(--ant-icono); }
.ventas-kpis > .col:nth-child(4) { --c: var(--kc-info); }
.ventas-kpis > .col:nth-child(5) { --c: var(--kc-warn); }
.ventas-kpis > .col:nth-child(6) { --c: var(--kc-azul); }
.ventas-kpis > .col:nth-child(7) { --c: var(--kc-info); }
.ventas-kpis .card > .small:first-child { font-size: 12px; color: var(--ant-muted) !important; }
.ventas-kpis .card .fs-5 { font-weight: 700; }
a.card:hover { box-shadow: var(--ant-s2); }

/* Cabeceras de los recuadros: titulo fuerte de 13 px con su icono azul y la
   aclaracion en gris, separadas del cuerpo por una linea (`.panel-cab`). */
#ventas-contenido .card > .card-header {
  padding: .6rem .85rem !important; font-size: 13px; font-weight: 700;
  border-bottom: 1px solid var(--ant-line);
}
#ventas-contenido .card > .card-header > .bi:first-child { color: var(--ant-icono); }
#ventas-contenido .card > .card-header .text-body-secondary { font-weight: 400; }
/* Las pantallas que ya traen su propia ruta (Cuadratura: «Panel de Ventas /
   Cuadratura», un informe: «Informes diarios / TodoFiltro») la conservan, con
   el mismo aspecto; la de arriba se esconde para no decir lo mismo dos veces. */
.mod-main:has(#ventas-contenido .breadcrumb) .ventas-migas { display: none; }
#ventas-contenido .breadcrumb { --bs-breadcrumb-divider: "›"; font-size: 13px; }
#ventas-contenido .breadcrumb-item a { color: var(--ant-muted); text-decoration: none; }
#ventas-contenido .breadcrumb-item a:hover { color: var(--ant-icono); text-decoration: underline; }
#ventas-contenido .breadcrumb-item.active { color: var(--ant-tinta); font-weight: 600; }