/* =====================================================================
   Dashboard Logistico — complemento de AdminLTE 3 (Bootstrap 4).

   AdminLTE ya resuelve el armazon: barra superior, menu lateral
   responsive, tarjetas, tablas y grilla. Aqui va solo lo que AdminLTE no
   trae: las tarjetas de indicador, el semaforo, las barras de avance y
   los graficos SVG del tablero.
   ===================================================================== */

:root {
  --azul:        #2563eb;
  --tinta:       #0f172a;
  --texto:       #334155;
  --suave:       #64748b;
  --tenue:       #94a3b8;
  --linea:       #e2e8f0;
  --linea-fina:  #f1f5f9;
  --panel:       #ffffff;

  --verde:  #16a34a;  --verde-bg:  #dcfce7;
  --ambar:  #d97706;  --ambar-bg:  #fef3c7;
  --rojo:   #dc2626;  --rojo-bg:   #fee2e2;
  --morado: #7c3aed;  --morado-bg: #ede9fe;

  --radio: 10px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 3px 10px rgba(15, 23, 42, .05);
}

body { font-size: 14px; }

.content-wrapper { background: #f4f6f9; }

/* El menu lateral no debe scrollear con la pagina en escritorio. */
.main-sidebar .brand-link { display: flex; align-items: center; }

/* ---------------------------------------------------------------------
   Secciones del tablero
   --------------------------------------------------------------------- */
.seccion-titulo {
  font-size: 13.5px; color: var(--azul); font-weight: 700;
  margin: 22px 0 12px; display: flex; align-items: center; gap: 9px;
  text-transform: uppercase; letter-spacing: .4px;
}
.seccion-titulo:first-child { margin-top: 0; }
.seccion-titulo .num {
  width: 20px; height: 20px; border-radius: 6px; background: var(--azul);
  color: #fff; display: grid; place-items: center; font-size: 11px; flex: 0 0 20px;
}
.seccion-titulo .nota { text-transform: none; letter-spacing: 0; }

/* Panel: equivalente ligero a .card, sin el peso visual de AdminLTE. */
.panel {
  background: var(--panel);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 15px 16px;
  margin-bottom: 0;
}
.panel h3 {
  font-size: 13px; color: var(--azul); margin: 0 0 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap;
}
/* El titulo va envuelto en un span. Sin eso, un icono suelto dentro del
   h3 cuenta como un elemento flex mas y "space-between" lo separa del
   texto, mandando el titulo al extremo derecho del panel. */
.panel h3 > span:first-child { display: flex; align-items: center; gap: 7px; }
.panel h3 .nota { color: var(--tenue); font-weight: 500; font-size: 11.5px; }

/* Grilla propia: mas compacta que la de Bootstrap para filas de KPIs. */
.grid { display: grid; gap: 12px; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---------------------------------------------------------------------
   Tarjetas de indicador
   --------------------------------------------------------------------- */
.kpi {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 13px 14px; display: flex; flex-direction: column; gap: 8px;
}
.kpi-top { display: flex; align-items: center; gap: 10px; }
.kpi-ico {
  width: 34px; height: 34px; flex: 0 0 34px; border-radius: 10px;
  display: grid; place-items: center; font-size: 15px;
}
.kpi-rot { font-size: 11.5px; color: var(--suave); font-weight: 600; line-height: 1.25; }
.kpi-val { font-size: 20px; font-weight: 700; color: var(--tinta); letter-spacing: -.5px; }
.kpi-val.chico { font-size: 17px; }
.kpi-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; font-size: 11.5px; color: var(--tenue);
  border-top: 1px solid var(--linea-fina); padding-top: 7px; margin-top: auto;
}
.delta { font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.delta.sube { color: var(--verde); }
.delta.baja { color: var(--rojo); }
.delta.igual { color: var(--tenue); }

/* Tarjeta de alerta compacta */
.alerta {
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra);
  padding: 12px 13px; text-align: center; display: block;
  color: inherit; text-decoration: none;
}
a.alerta:hover { text-decoration: none; border-color: var(--azul); }
.alerta .rot { font-size: 11px; color: var(--suave); font-weight: 600; line-height: 1.3; min-height: 29px; }
.alerta .val { font-size: 23px; font-weight: 700; margin: 5px 0 2px; letter-spacing: -.5px; }
.alerta .uni { font-size: 11px; color: var(--tenue); }
.alerta.roja .val  { color: var(--rojo); }
.alerta.ambar .val { color: var(--ambar); }
.alerta.azul .val  { color: var(--azul); }
.alerta.verde .val { color: var(--verde); }

/* Semaforo */
.semaforo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.sem { border-radius: 9px; padding: 11px 7px; text-align: center; border: 1px solid; display: block; }
a.sem:hover { text-decoration: none; filter: brightness(.97); }
.sem .rot { font-size: 11.5px; font-weight: 700; }
.sem .cara { font-size: 21px; margin: 4px 0 3px; }
.sem .val { font-size: 15px; font-weight: 700; color: var(--tinta); }
.sem .pc { font-size: 12px; font-weight: 600; }
.sem.v { background: var(--verde-bg); border-color: #bbf7d0; }
.sem.v .rot, .sem.v .pc { color: var(--verde); }
.sem.a { background: var(--ambar-bg); border-color: #fde68a; }
.sem.a .rot, .sem.a .pc { color: var(--ambar); }
.sem.r { background: var(--rojo-bg); border-color: #fecaca; }
.sem.r .rot, .sem.r .pc { color: var(--rojo); }

/* ---------------------------------------------------------------------
   Rankings, listas y leyendas
   --------------------------------------------------------------------- */
.ranking { display: flex; flex-direction: column; gap: 8px; }
/* El nombre puede encogerse hasta desaparecer (ya trunca con puntos
   suspensivos) y la barra hasta cero. Con un ancho fijo de 125px, en un
   panel angosto la suma nombre + monto superaba el contenedor y el monto
   se salia de la pagina. */
.rank-fila { display: grid; grid-template-columns: minmax(0, 125px) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.rank-nom { font-size: 12px; color: var(--texto); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-pista { background: var(--linea-fina); border-radius: 5px; height: 9px; overflow: hidden; }
.rank-barra { height: 100%; border-radius: 5px; transition: width .3s; }
.rank-val { font-size: 12px; font-weight: 600; color: var(--tinta); white-space: nowrap; }

.lista-simple { display: flex; flex-direction: column; }
.lista-simple .li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--linea-fina); font-size: 12.5px;
}
.lista-simple .li:last-child { border-bottom: 0; }
.lista-simple .li b { color: var(--tinta); font-weight: 600; }

.leyenda { display: flex; flex-direction: column; gap: 6px; }
.leyenda .item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.leyenda .punto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.leyenda .nom { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leyenda .val { font-weight: 600; color: var(--tinta); white-space: nowrap; }

.donut-caja { display: grid; grid-template-columns: 145px 1fr; gap: 14px; align-items: center; }

/* ---------------------------------------------------------------------
   Tablas
   --------------------------------------------------------------------- */
.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--panel); margin: 0; }
table.tabla th {
  text-align: left; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--suave); font-weight: 700;
  padding: 9px 10px; border-bottom: 2px solid var(--linea);
  background: #fbfcfe; white-space: nowrap; position: sticky; top: 0; z-index: 2;
}
table.tabla td { padding: 7px 10px; border-bottom: 1px solid var(--linea-fina); vertical-align: middle; }
table.tabla tbody tr:hover { background: #f8fafc; }
table.tabla td.num, table.tabla th.num { text-align: right; white-space: nowrap; }
table.tabla td.centro, table.tabla th.centro { text-align: center; }
table.tabla .po { font-weight: 600; color: var(--tinta); }
table.tabla .tenue { color: var(--tenue); }

.chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
}
.linea-badge {
  display: inline-block; margin-left: 5px; padding: 0 5px;
  border-radius: 4px; background: var(--morado-bg); color: var(--morado);
  font-size: 9.5px; font-weight: 700; vertical-align: middle;
}

.avance {
  position: relative; background: var(--linea-fina); border-radius: 5px;
  height: 16px; min-width: 72px; overflow: hidden;
}
.avance-bar { position: absolute; inset: 0 auto 0 0; border-radius: 5px; }
.avance-txt {
  position: relative; z-index: 1; display: block; text-align: center;
  font-size: 10.5px; font-weight: 700; color: var(--tinta); line-height: 16px;
}

/* Campos que se editan sin salir de la tabla */
.edit-linea { font-size: 12px !important; padding: 3px 6px !important; height: auto !important; }
.guardado-ok { animation: destello .9s ease; }
@keyframes destello {
  0%   { background: var(--verde-bg); }
  100% { background: transparent; }
}

/* ---------------------------------------------------------------------
   Filtros
   --------------------------------------------------------------------- */
.filtros {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: flex-end;
  background: var(--panel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 12px 14px; margin-bottom: 13px;
}
.filtros label { margin: 0 0 3px; font-size: 10.5px; color: var(--suave); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.filtros .form-control, .filtros select { min-width: 130px; font-size: 13px; }
.filtros .crece { flex: 1; min-width: 170px; }

.vacio { text-align: center; padding: 34px 18px; color: var(--tenue); }
.vacio .ico { font-size: 32px; opacity: .5; }

/* Ficha de pedido */
.ficha-grid { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: start; }
.bloque-campos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.bloque-campos.dos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.campo-ro {
  background: var(--linea-fina); border: 1px solid var(--linea);
  border-radius: 6px; padding: 7px 10px; font-size: 13px; color: var(--suave);
}

.historial { display: flex; flex-direction: column; max-height: 540px; overflow-y: auto; }
.hist-item { padding: 8px 0; border-bottom: 1px solid var(--linea-fina); font-size: 12px; }
.hist-item:last-child { border-bottom: 0; }
.hist-campo { font-weight: 700; color: var(--tinta); }
.hist-val .de { color: var(--tenue); text-decoration: line-through; }
.hist-val .a  { color: var(--verde); font-weight: 600; }
.hist-meta { color: var(--tenue); font-size: 11px; margin-top: 2px; }
.hist-origen {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px;
  padding: 1px 5px; border-radius: 4px; font-weight: 700;
}
.hist-origen.MANUAL      { background: #dbeafe; color: #1e40af; }
.hist-origen.IMPORTACION { background: var(--morado-bg); color: var(--morado); }
.hist-origen.SISTEMA     { background: var(--linea-fina); color: var(--suave); }

.paginado { display: flex; gap: 5px; align-items: center; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.paginado a, .paginado span {
  padding: 5px 10px; border-radius: 6px; border: 1px solid var(--linea);
  background: #fff; font-size: 12.5px; color: var(--texto); text-decoration: none;
}
.paginado .actual { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 700; }
.paginado .puntos { border: 0; background: transparent; color: var(--tenue); }

/* ---------------------------------------------------------------------
   Pantallas sin menu (login, instalador, recuperar clave)
   --------------------------------------------------------------------- */
.pantalla-simple {
  display: grid; place-items: center; min-height: 100vh; padding: 20px;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}
.caja-login, .caja-instalador {
  background: #fff; border-radius: 14px; padding: 28px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .3); width: 100%;
}
.caja-login { max-width: 380px; }
.caja-instalador { max-width: 560px; }
.caja-login h1, .caja-instalador h1 { font-size: 19px; margin-bottom: 4px; color: var(--tinta); }
.caja-login .sub, .caja-instalador .sub { color: var(--suave); font-size: 13px; margin: 0 0 18px; }
.caja-instalador h2 { font-size: 14px; margin: 18px 0 8px; color: var(--azul); }
.caja-instalador .ayuda { font-size: 12px; color: var(--suave); margin: -2px 0 12px; }
.login-marca { text-align: center; margin-bottom: 20px; }
.login-marca .logo-ico {
  width: 52px; height: 52px; border-radius: 14px; margin: 0 auto 10px;
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  display: grid; place-items: center; font-size: 24px; color: #fff;
}
.detalle-avisos { font-size: 12px; margin-bottom: 12px; }
.detalle-avisos summary { cursor: pointer; color: var(--ambar); font-weight: 600; }
.detalle-avisos ul { margin: 8px 0 0; padding-left: 18px; color: var(--suave); }

/* ---------------------------------------------------------------------
   Responsive: telefono y tablet
   --------------------------------------------------------------------- */
@media (max-width: 1400px) {
  .g-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1200px) {
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ficha-grid { grid-template-columns: 1fr; }
  .bloque-campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .g-6, .g-4, .g-3, .g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .donut-caja { grid-template-columns: 1fr; justify-items: center; }
  .rank-fila { grid-template-columns: 100px 1fr auto; }
  /* En telefono la tabla se desliza en su propia caja: el cuerpo de la
     pagina nunca debe moverse en horizontal. */
  .tabla-caja { margin: 0 -16px; padding: 0 16px; }
}
@media (max-width: 576px) {
  .g-6, .g-4, .g-3, .g-2 { grid-template-columns: 1fr; }
  .semaforo { grid-template-columns: 1fr; }
  .bloque-campos, .bloque-campos.dos { grid-template-columns: 1fr; }
  .kpi-val { font-size: 18px; }
  .seccion-titulo { font-size: 12.5px; }
  .filtros { padding: 10px; }
  .filtros .form-control, .filtros select { min-width: 100%; }
  .filtros > div { width: 100%; }
}

@media print {
  .main-sidebar, .main-header, .main-footer, .filtros, .btn { display: none !important; }
  .content-wrapper { margin-left: 0 !important; background: #fff; }
  .panel, .kpi, .alerta { break-inside: avoid; box-shadow: none; }
}

/* ---------------------------------------------------------------------
   Compatibilidad con las clases propias de las pantallas.

   Las paginas se escribieron antes de adoptar AdminLTE y usan .btn-primario,
   .aviso y campos sin .form-control. Se mapean aqui sobre el aspecto de
   Bootstrap en vez de reescribir el marcado de diez pantallas: el
   resultado visual es el mismo y el diff queda acotado a este archivo.
   --------------------------------------------------------------------- */
.btn { border-radius: 7px; font-weight: 600; font-size: 13px; }
.btn-primario { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn-primario:hover, .btn-primario:focus { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.btn-peligro { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.btn-peligro:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.btn-mini { padding: 3px 9px; font-size: 11.5px; border-radius: 6px; }
.btn-bloque { display: block; width: 100%; margin-top: 8px; }

/* Campos sueltos que no llevan .form-control */
.caja-login input, .caja-instalador input, .caja-instalador select,
.filtros input, .filtros select,
.bloque-campos input, .bloque-campos select, .bloque-campos textarea,
table.tabla input, table.tabla select {
  display: block; width: 100%; padding: 7px 10px;
  border: 1px solid var(--linea); border-radius: 7px;
  font: inherit; font-size: 13px; color: var(--tinta); background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.caja-login label, .caja-instalador label, .bloque-campos label {
  display: block; margin-bottom: 11px; font-size: 12.5px;
  color: var(--texto); font-weight: 500;
}
.bloque-campos label { margin-bottom: 0; }
.caja-login input:focus, .caja-instalador input:focus, .caja-instalador select:focus,
.filtros input:focus, .filtros select:focus,
.bloque-campos input:focus, .bloque-campos select:focus, .bloque-campos textarea:focus,
table.tabla input:focus, table.tabla select:focus {
  outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
.bloque-campos textarea { min-height: 72px; resize: vertical; }
table.tabla input, table.tabla select { display: inline-block; width: auto; }

/* Avisos propios. El bloque .aviso.alerta va despues de .alerta (la
   tarjeta de indicador) para que gane la especificidad correcta. */
.aviso {
  padding: 10px 13px; border-radius: 8px; margin-bottom: 10px;
  font-size: 13px; border: 1px solid; text-align: left;
}
.aviso.ok     { background: var(--verde-bg); border-color: #bbf7d0; color: #14532d; }
.aviso.error  { background: var(--rojo-bg);  border-color: #fecaca; color: #7f1d1d; }
.aviso.info   { background: #dbeafe;         border-color: #bfdbfe; color: #1e3a8a; }
.aviso.alerta { background: var(--ambar-bg); border-color: #fde68a; color: #78350f; }
.aviso.alerta .val, .aviso.alerta .rot, .aviso.alerta .uni { all: unset; }

.tag { font-size: 10px; background: var(--linea-fina); color: var(--suave);
       padding: 1px 6px; border-radius: 5px; font-weight: 600; }
.opcional { font-size: 11px; color: var(--tenue); font-weight: 400; }

/* ---------------------------------------------------------------------
   Avisos flotantes.

   Se apilan abajo a la derecha y se desvanecen solos. Van sobre el
   contenido y no ocupan lugar en el flujo, asi que no empujan la pagina
   ni la hacen saltar cuando aparecen o se van.
   --------------------------------------------------------------------- */
#avisos {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 9px;
  /* El contenedor no debe tapar clics en lo que hay debajo; cada aviso
     si los recibe. */
  pointer-events: none;
}

.aviso-flotante {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 250px;
  max-width: 380px;
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid;
  box-shadow: 0 8px 26px rgba(15, 23, 42, .16);
  font-size: 13px;
  line-height: 1.4;
  background: #fff;

  /* Estado inicial: fuera de vista a la derecha. */
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .22s ease, transform .22s ease;
}
.aviso-flotante.visible { opacity: 1; transform: translateX(0); }

.aviso-flotante .aviso-ico   { font-size: 15px; margin-top: 1px; flex: 0 0 auto; }
.aviso-flotante .aviso-texto { flex: 1; word-break: break-word; }
.aviso-flotante .aviso-cerrar {
  border: 0; background: none; cursor: pointer; padding: 0 2px;
  font-size: 18px; line-height: 1; opacity: .45; color: inherit; flex: 0 0 auto;
}
.aviso-flotante .aviso-cerrar:hover { opacity: 1; }

.aviso-flotante.ok     { background: var(--verde-bg); border-color: #bbf7d0; color: #14532d; }
.aviso-flotante.ok     .aviso-ico { color: var(--verde); }
.aviso-flotante.error  { background: var(--rojo-bg);  border-color: #fecaca; color: #7f1d1d; }
.aviso-flotante.error  .aviso-ico { color: var(--rojo); }
.aviso-flotante.alerta { background: var(--ambar-bg); border-color: #fde68a; color: #78350f; }
.aviso-flotante.alerta .aviso-ico { color: var(--ambar); }
.aviso-flotante.info   { background: #dbeafe; border-color: #bfdbfe; color: #1e3a8a; }
.aviso-flotante.info   .aviso-ico { color: var(--azul); }

/* En telefono ocupan el ancho disponible: 380px no entran en 375. */
@media (max-width: 560px) {
  #avisos { right: 10px; left: 10px; bottom: 10px; align-items: stretch; }
  .aviso-flotante { max-width: none; min-width: 0; }
}

/* Si el usuario pidio menos animacion, aparecen sin desplazamiento. */
@media (prefers-reduced-motion: reduce) {
  .aviso-flotante { transition: opacity .01s; transform: none; }
  .aviso-flotante.visible { transform: none; }
}

/* Subniveles del menu: un poco mas chicos que el grupo que los contiene. */
.nav-sidebar .nav-treeview .nav-link { font-size: 12.5px; padding-left: 24px; }
.nav-sidebar .nav-treeview .nav-icon { opacity: .75; }

/* ---------------------------------------------------------------------
   Responsive: reglas que aplican a TODA pantalla, nueva o vieja.
   --------------------------------------------------------------------- */

/* En CSS Grid una columna "1fr" equivale a minmax(auto, 1fr), y ese
   "auto" la estira hasta caber su contenido. Con una tabla ancha dentro,
   la columna crece, empuja la pagina y aparece scroll horizontal en todo
   el documento en vez de dentro del contenedor de la tabla.
   Poner min-width 0 en los hijos deja que la columna se encoja y que el
   scroll quede donde corresponde. */
.grid > *,
.ficha-grid > *,
.bloque-campos > *,
.donut-caja > * { min-width: 0; }

/* El contenedor de tabla es quien scrollea, no la pagina. */
.tabla-caja { max-width: 100%; }

@media (max-width: 768px) {
  /* Varias pantallas fijan sus columnas con style="" en el HTML, que gana
     por especificidad sobre cualquier media query. En telefono no hay
     lugar para dos columnas en ningun caso, asi que se fuerza una sola.
     Es el unico lugar del sistema donde se usa !important, y es por eso. */
  .grid,
  .ficha-grid,
  .bloque-campos,
  .donut-caja { grid-template-columns: minmax(0, 1fr) !important; }

  .donut-caja { justify-items: center; }
}

/* ------------------------------------------------------------------
   Migas de pan
   Van arriba del titulo, chiquitas y en gris: orientan sin competir
   con el nombre de la pantalla. En telefono se parten en varias
   lineas en vez de empujar el ancho de la pagina.
   ------------------------------------------------------------------ */
.migas {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
}
/* En la barra superior la ruta no puede envolver ni empujar el ancho:
   si no cabe, se recorta el ultimo escalon con puntos suspensivos. */
.migas span,
.migas a {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.migas .sep { flex: 0 0 auto; }
.migas a {
  color: var(--azul);
  text-decoration: none;
}
.migas a:hover { text-decoration: underline; }
.migas span { color: #94a3b8; }
.migas .sep {
  color: #cbd5e1;
  font-size: 9px;
}

/* ------------------------------------------------------------------
   Listas desplegables con buscador

   El <select> original sigue en el formulario pero no se ve: se oculta
   con position/opacity y no con display:none, para que el navegador
   pueda enfocarlo si un campo obligatorio queda vacio y muestre su
   mensaje donde corresponde.
   ------------------------------------------------------------------ */
.combo {
  position: relative;
  min-width: 0;
}
.combo-oculto {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.combo-boton {
  width: 100%;
  min-width: 0;
  text-align: left;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 8px 28px 8px 11px;
  font-size: 13px;
  color: var(--texto);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
}
.combo-boton::after {
  content: '';
  position: absolute;
  right: 11px;
  top: 50%;
  margin-top: -2px;
  border: 4px solid transparent;
  border-top-color: var(--tenue);
}
.combo-boton:hover  { border-color: #cbd5e1; }
.combo-boton:focus  { outline: 0; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.combo-vacio        { color: var(--tenue); }
.combo.abierto .combo-boton { border-color: var(--azul); }

.combo-panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
  padding: 7px;
}
.combo-busca {
  width: 100%;
  margin: 0 0 6px;
  font-size: 13px;
}
.combo-lista {
  max-height: 260px;
  overflow-y: auto;
}
.combo-op {
  padding: 7px 9px;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--texto);
}
.combo-op:hover,
.combo-op.marcada { background: var(--linea-fina); }
.combo-op.es-actual {
  background: #eff6ff;
  color: var(--azul);
  font-weight: 600;
}
.combo-nada {
  padding: 10px 9px;
  font-size: 12px;
  color: var(--tenue);
}

/* Abierto, el panel cuelga del body con coordenadas de pantalla: dentro
   de una celda quedaba recortado por el scroll horizontal de la tabla.
   El z-index va por encima de la barra lateral de AdminLTE. */
.combo-panel.combo-flota {
  position: fixed;
  z-index: 1080;
  right: auto;
  min-width: 230px;
}

/* En telefono el panel ocupa el ancho util y la lista se acorta, para
   que el boton de guardar no quede debajo del teclado. */
@media (max-width: 640px) {
  .combo-lista { max-height: 200px; }
}
.combo-boton[disabled] {
  background: #f8fafc;
  color: var(--tenue);
  cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Formula del CEI

   Se muestra la division con sus dos numeros porque un porcentaje
   suelto no se puede discutir: quien lo lee necesita ver contra que
   se midio.
   ------------------------------------------------------------------ */
.formula-cei {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: var(--tinta);
  border-radius: 10px;
  padding: 11px 14px;
  color: #e2e8f0;
  min-width: 0;
}
.formula-cei .fraccion { text-align: center; }
.formula-cei .arriba,
.formula-cei .abajo {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  padding: 2px 0;
}
.formula-cei .arriba { border-bottom: 1px solid #475569; }
.formula-cei .arriba span,
.formula-cei .abajo span {
  font-size: 10.5px;
  font-weight: 400;
  color: #94a3b8;
}
.formula-cei .por {
  font-size: 12px;
  color: #94a3b8;
  white-space: nowrap;
}
.formula-cei .igual {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.5px;
}

/* Grupos plegables en las tablas de detalle. */
.fila-grupo { cursor: pointer; background: #f8fafc; }
.fila-grupo:hover { background: var(--linea-fina); }
.fila-grupo.abierta .fa-chevron-right { transform: rotate(90deg); }
.fila-grupo .fa-chevron-right { transition: transform .15s; }

/* Observaciones de un pago: se respetan los saltos de linea que escribio
   el usuario, y se corta la palabra larga (una referencia bancaria sin
   espacios) para que no estire la columna. */
.obs-pago {
  font-size: 11px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 260px;
  margin-top: 2px;
}

/* Condicion de pago en la pantalla de registrar el pago: es el contexto
   que decide si lo que se esta cargando es anticipo o abono. */
.cond-pago {
  background: #f8fafc;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--azul);
  border-radius: 8px;
  padding: 9px 12px;
}
.cond-pago .rot {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--tenue);
  font-weight: 600;
}
.cond-pago .nom {
  font-size: 13px;
  font-weight: 600;
  color: var(--tinta);
  margin-top: 1px;
}
.cond-pago .det {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--suave);
}

/* Opcion que el flujo de etapas no permite desde la etapa actual. Se
   muestra, para que se vea que existe, pero apagada: elegirla la
   rechaza el servidor. */
.combo-op.vedada {
  color: #b6c0cd;
}
.combo-op.vedada::after {
  content: '\f023';           /* candado */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 9px;
  float: right;
  margin-top: 2px;
  opacity: .6;
}

/* ------------------------------------------------------------------
   Modal para pedir el documento de una etapa
   ------------------------------------------------------------------ */
.modal-fondo {
  position: fixed;
  inset: 0;
  z-index: 1090;
  background: rgba(15, 23, 42, .55);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 14px;
  overflow-y: auto;
}
.modal-caja {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, .3);
  width: 100%;
  max-width: 460px;
  padding: 18px 20px 16px;
}
.modal-caja h3 {
  margin: 0 0 4px;
  font-size: 15px;
  color: var(--tinta);
}
.modal-caja .ayuda {
  font-size: 12.5px;
  color: var(--suave);
  margin: 0 0 12px;
}
.modal-caja .zona-soltar {
  border: 2px dashed var(--linea);
  border-radius: 10px;
  padding: 18px 12px;
  text-align: center;
  cursor: pointer;
  background: #fbfcfe;
  transition: all .15s;
}
.modal-caja .zona-soltar.activa,
.modal-caja .zona-soltar:focus {
  border-color: var(--azul);
  background: #eff6ff;
  outline: 0;
}
.modal-caja .zona-soltar i { font-size: 24px; color: var(--tenue); }
.modal-caja .zona-soltar div { font-size: 12.5px; margin-top: 6px; color: var(--suave); }
.modal-caja .zona-soltar span { font-size: 11.5px; }

.modal-caja .previa:not(:empty) { margin-top: 10px; }
.modal-caja .archivo {
  border: 1px solid #bbf7d0;
  background: #f0fdf4;
  border-radius: 8px;
  overflow: hidden;
}
.modal-caja .archivo .cab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font-size: 12px;
  background: #dcfce7;
}
.modal-caja .archivo .cab i { color: var(--verde); }
.modal-caja .archivo .cab span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-caja .archivo img,
.modal-caja .archivo embed {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: contain;
  background: #fff;
}
.modal-caja .archivo embed { height: 220px; }

.modal-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}

/* ------------------------------------------------------------------
   Bitacora al lado del formulario de area

   Se lee de arriba hacia abajo mientras se trabaja, asi que va con
   scroll propio y pegada: al llenar campos largos la lista no se pierde
   de vista.
   ------------------------------------------------------------------ */
.bitacora-area {
  max-height: 620px;
  overflow-y: auto;
  padding: 10px 14px 14px;
}
.bit-item {
  border-left: 2px solid var(--linea);
  padding: 0 0 12px 11px;
  position: relative;
}
.bit-item::before {
  content: '';
  position: absolute;
  left: -5px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--azul);
  border: 2px solid #fff;
}
.bit-item:last-child { padding-bottom: 0; }

.bit-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--tinta);
}
.bit-origen {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: var(--tenue);
  border: 1px solid var(--linea);
  border-radius: 4px;
  padding: 0 4px;
}
.bit-val {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  margin-top: 3px;
}
.bit-val .antes {
  color: var(--tenue);
  text-decoration: line-through;
  overflow-wrap: anywhere;
}
.bit-val .fa-arrow-right { font-size: 8px; color: #cbd5e1; }
.bit-val .ahora {
  color: var(--verde);
  font-weight: 600;
  overflow-wrap: anywhere;
}
.bit-quien {
  font-size: 10.5px;
  color: var(--tenue);
  margin-top: 3px;
}

/* En pantalla angosta la bitacora va debajo del formulario, no al lado. */
@media (max-width: 900px) {
  .bitacora-area { max-height: 320px; }
}