/* Panel de contratos · Ingamar Services S.A.S
   ---------------------------------------------------------------------------
   Ingamar hace obra civil y metalmecanica. El lenguaje visual sale de tres
   sitios, todos reales:

     1. Su propio brochure de servicios, que es lo unico de marca que existe:
        negro, verde #95BE29, lima #D6DC46 y gris, titulares en geometrica
        pesada, y una LINEA DE PUNTOS que conecta cada lista en las nueve
        paginas. Ese punteado es el gesto que se repite aqui.
     2. El cajetin del plano de ingenieria —el recuadro rotulado que lleva todo
        plano firmado—: rotulos diminutos en versalitas muy espaciadas sobre el
        dato grande, filetes de 1 px, cero relleno. La ficha de un contrato de
        obra ES un cajetin.
     3. Procore Cost Management, el software de costos de obra: fondo claro,
        tablas densas, la cifra manda y el color se reserva para el estado.
   (Se miro tambien construcciongm.com; azul corporativo generico, no aporto.)

   Fondo claro y no oscuro por una razon que no es de gusto: el logo de Ingamar
   es una casa NEGRA con hojas verdes, y sobre fondo negro desaparece la casa y
   quedan las hojas flotando.

   La regla que hay que defender aqui: el verde de marca NO puede ser el verde
   de "todo bien" del semaforo, o el mismo color significa dos cosas. Se
   resuelve quitandole el verde al semaforo: lo que esta sano no lleva color
   —gris—, y solo el ambar y el rojo pintan. Asi el verde queda entero para la
   marca y para lo que esta vivo o al dia, y una alarma se ve de lejos.

   Tipografia: Barlow, que nacio de la senaletica de carreteras de California;
   es la voz de la infraestructura y aguanta tablas densas. Trae cifras
   tabulares, asi que la plata va en la tipografia de la interfaz. DM Mono
   queda para lo que es un codigo y no una cifra. */

:root{
  color-scheme: light;

  --fondo:#F6F6F3;          /* hueso: el papel del plano */
  --papel:#FFFFFF;          /* tarjetas */
  --hundido:#EFEFEA;        /* zonas hundidas: cabeceras de tabla, detalles */
  --superficie:#FFFFFF;
  --superficie-alta:#F1F1EC; /* hover */
  --linea:rgba(20,22,26,.10);
  --linea-fuerte:rgba(20,22,26,.24);

  --tinta:#14161A;          /* el negro del logo */
  --tinta-media:#5A6068;    /* 6.4:1 sobre papel */
  --tinta-tenue:#6C737C;    /* 4.8:1 — el minimo para texto chico */
  --gris-obra:#929495;      /* el gris del edificio del logo */

  /* La marca. --marca se usa para RELLENOS (con tinta encima da 8.3:1) y
     --marca-texto para TEXTO sobre claro; el verde del logo como texto da
     2.2:1 y seria ilegible. */
  --marca:#95BE29;
  --marca-viva:#A6D02F;
  --marca-texto:#5E7A15;
  --marca-velo:rgba(149,190,41,.15);
  --marca-honda:#5E7A15;
  --marca-borde:rgba(149,190,41,.55);
  --lima:#D6DC46;           /* el verde claro de las hojas pequenas */

  /* Semaforo sin verde, a proposito. */
  --sano:#5A6068;    --sano-velo:rgba(90,96,104,.09);
  --amarillo:#9A6206; --amarillo-velo:rgba(154,98,6,.11);
  --rojo:#B02A20;    --rojo-velo:rgba(176,42,32,.10);

  --r:12px;
  --sombra:0 1px 2px rgba(20,22,26,.06), 0 8px 24px rgba(20,22,26,.05);
  --sombra-alta:0 24px 70px rgba(20,22,26,.16);
  --ui:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{background:var(--fondo)}
body{
  margin:0;background:var(--fondo);color:var(--tinta);
  font-family:var(--ui);font-size:14px;line-height:1.55;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
input,select,textarea{font:inherit;color:inherit}
a{color:var(--marca-texto)}
h1,h2,h3{margin:0;line-height:1.22;letter-spacing:-.02em}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--marca);outline-offset:2px;border-radius:4px}
::selection{background:var(--marca);color:var(--tinta)}
*{scrollbar-color:rgba(20,22,26,.24) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(20,22,26,.18);border-radius:6px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(20,22,26,.32);background-clip:content-box}

/* Barlow trae cifras tabulares, así que la plata también va en la
   tipografía de la marca: los dígitos caen uno debajo del otro en la columna
   del libro sin tener que cambiar de familia. El mono queda reservado para lo
   que es un código y no una cifra —el número del contrato, la hora de un
   movimiento—, que es donde esa voz técnica sí significa algo. */
.cifra,.num,.libro__fila b,.kpi__val,.regla__pct,.reparto__val,.adjunto__peso,
.campo--plata input,.mini .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ═══════════════════════════════════════════════════════════════ entrada */
.entrada{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:22px;
  background:var(--fondo);overflow:hidden}
/* Verde apenas insinuado detrás de la caja: la marca respira sin gritar. */
.entrada::before{content:"";position:absolute;width:min(760px,140vw);aspect-ratio:1;
  border-radius:50%;background:radial-gradient(circle,rgba(149,190,41,.20),transparent 62%);
  filter:blur(18px);pointer-events:none}
.entrada__caja{position:relative;width:100%;max-width:352px;background:var(--superficie);
  border:1px solid var(--linea);border-radius:18px;box-shadow:var(--sombra-alta);
  padding:36px 30px 30px;display:grid;gap:14px;text-align:center}
.entrada__logo{width:124px;height:auto;margin:0 auto 2px}
.entrada__rotulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--marca-texto)}
.entrada__caja h1{font-size:19px;font-weight:600}
.entrada__caja p{margin:-6px 0 4px;color:var(--tinta-tenue);font-size:12.5px;line-height:1.5}
.entrada__caja input{padding:13px 15px;border:1px solid var(--linea-fuerte);border-radius:10px;
  background:var(--fondo);text-align:center;font-size:16px;letter-spacing:.28em;font-family:var(--mono)}
.entrada__caja input::placeholder{letter-spacing:.12em;color:var(--tinta-tenue)}
.entrada__caja input:focus{border-color:var(--marca);outline:none}
.entrada__error{color:var(--rojo);font-size:12.5px;min-height:17px}
.entrada__pie{font-size:11px;color:var(--tinta-tenue);letter-spacing:.02em}

/* ══════════════════════════════════════════════════════════════ cabecera */
.barra{position:sticky;top:0;z-index:30;background:rgba(246,246,243,.88);
  backdrop-filter:blur(14px) saturate(1.4);border-bottom:1px solid var(--linea)}
.barra__fila{max-width:1320px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:18px}
.barra__marca{display:flex;align-items:center;gap:11px;min-width:0;text-decoration:none}
.barra__marca img{height:32px;width:auto}
.barra__marca span{font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-tenue);padding-left:11px;border-left:1px solid var(--linea)}

/* Filete verde bajo el ítem activo. */
.barra__nav{display:flex;gap:4px;margin-left:6px}
.barra__nav a{position:relative;padding:8px 3px;margin:0 9px;font-size:13px;font-weight:500;
  color:var(--tinta-media);text-decoration:none;letter-spacing:.01em;white-space:nowrap}
.barra__nav a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--marca);transform:scaleX(0);transition:transform .18s ease;border-radius:2px}
.barra__nav a:hover{color:var(--tinta)}
.barra__nav a.activo{color:var(--tinta);font-weight:600}
.barra__nav a.activo::after{transform:scaleX(1)}
.barra__fin{margin-left:auto;display:flex;gap:9px;align-items:center}

main{max-width:1320px;margin:0 auto;padding:26px 22px 80px}

/* ════════════════════════════════════════════════════════════════ piezas */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 15px;
  border-radius:9px;font-size:12.5px;font-weight:600;min-height:36px;letter-spacing:.01em;
  border:1px solid var(--linea-fuerte);background:transparent;color:var(--tinta);
  transition:background .15s,border-color .15s,color .15s;white-space:nowrap}
.btn:hover{background:var(--superficie-alta);border-color:var(--linea-fuerte)}
/* Píldora verde con texto negro: el gesto con el que rotula su brochure, y
   el unico sitio donde el verde del logo va a pantalla completa. */
.btn--principal{background:var(--marca);border-color:var(--marca);color:var(--tinta);font-weight:700}
.btn--principal:hover{background:var(--marca-viva);border-color:var(--marca-viva);color:var(--tinta)}
/* Contorno verde para la acción secundaria: linea de 1 px, sin relleno. */
.btn--marca{border-color:var(--marca-borde);color:var(--marca-texto)}
.btn--marca:hover{background:var(--marca-velo);border-color:var(--marca-texto);color:var(--marca-texto)}
.btn--chico{min-height:30px;padding:4px 11px;font-size:12px;border-radius:8px}
.btn--peligro{color:var(--rojo);border-color:rgba(176,42,32,.34)}
.btn--peligro:hover{background:var(--rojo-velo);border-color:var(--rojo);color:var(--rojo)}
.btn--plano{border-color:transparent;color:var(--tinta-media)}
.btn--plano:hover{background:var(--superficie);color:var(--tinta);border-color:transparent}

.tarjeta{background:var(--superficie);border:1px solid var(--linea);border-radius:var(--r);
  box-shadow:var(--sombra)}

/* Título de sección con filete verde debajo y el punteado del brochure al lado. */
.seccion{margin-top:30px}
.seccion__tit{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.seccion__tit h2{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--tinta);white-space:nowrap;padding-bottom:7px;border-bottom:2px solid var(--marca)}
.seccion__tit::after{content:"";flex:1;min-width:20px;height:3px;order:1;
  background-image:radial-gradient(circle,var(--gris-obra) 1.1px,transparent 1.2px);
  background-size:7px 3px;background-repeat:repeat-x;opacity:.55}
.seccion__tit>.btn{order:2}
.seccion__tit--menor h2{font-size:10.5px;letter-spacing:.13em;color:var(--tinta-media);
  border-bottom-width:1.5px;padding-bottom:5px}

.vacio{padding:44px 22px;text-align:center;color:var(--tinta-tenue);font-size:13px;line-height:1.7}
.vacio strong{display:block;color:var(--tinta);font-size:15.5px;font-weight:600;margin-bottom:6px;letter-spacing:-.01em}

/* El folio: el número del contrato como sello de la carpeta. */
.folio{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.13em;color:var(--tinta);background:var(--marca);border-radius:5px;padding:3px 9px}
.folio--fantasma{background:transparent;color:var(--marca-texto);box-shadow:inset 0 0 0 1px var(--marca-borde)}

.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:20px;
  font-size:11px;font-weight:600;letter-spacing:.02em;background:rgba(20,22,26,.06);
  color:var(--tinta-media);white-space:nowrap}
.chip--vivo{background:var(--marca-velo);color:var(--marca-texto)}
.chip--amarillo{background:var(--amarillo-velo);color:var(--amarillo)}
.chip--rojo{background:var(--rojo-velo);color:var(--rojo)}
.chip--marca{background:var(--marca-velo);color:var(--marca-texto)}
.chip__punto{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ═══════════════════════════════════════════════════════ banda de cifras */
/* Seis columnas separadas por filetes de 1px, como la fila de tres columnas
   El truco: rejilla con gap de 1px sobre fondo de
   línea, y cada celda opaca encima. */
/* Seis columnas es la banda del tablero de contratos. La de gestiones lleva
   cuatro cifras: con seis quedaba una sola en la segunda fila, al lado de un
   hueco del ancho de dos columnas. */
.cinta--4{grid-template-columns:repeat(4,1fr) !important}
.cinta{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--linea);
  border:1px solid var(--linea);border-radius:var(--r);overflow:hidden}
.kpi{background:var(--superficie);padding:17px 18px 16px;min-width:0}
.kpi__rot{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinta-tenue);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi__val{margin-top:9px;font-size:23px;font-weight:600;letter-spacing:-.035em;line-height:1.05;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi__pie{margin-top:5px;font-size:11.5px;color:var(--tinta-tenue);line-height:1.4}
.kpi--marca .kpi__val{color:var(--marca-texto)}
.kpi--vivo .kpi__val{color:var(--marca-texto)}
.kpi--amarillo .kpi__val{color:var(--amarillo)}
.kpi--rojo .kpi__val{color:var(--rojo)}

/* ═════════════════════════════════════════════════════════════════ regla */
/* Cuánto del monto ya está comprometido, con la marca del umbral clavada
   donde el cliente la pidió. Es una regla de medición, no una barra de
   progreso: aquí llegar al final no es un logro. */
.regla{margin-top:2px}
.regla__cab{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:11px}
.regla__pct{font-size:27px;font-weight:700;letter-spacing:-.035em;line-height:1}
.regla__pct--sano{color:var(--sano)}
.regla__pct--alerta{color:var(--amarillo)}
.regla__pct--excedido{color:var(--rojo)}
.regla__texto{font-size:12px;color:var(--tinta-tenue);line-height:1.4}
.regla__pista{position:relative;height:13px;background:rgba(20,22,26,.07);border-radius:4px;
  box-shadow:inset 0 0 0 1px var(--linea)}
.regla__lleno{position:absolute;inset:0 auto 0 0;border-radius:4px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.regla__lleno--sano{background:linear-gradient(90deg,#9AA0A8,var(--sano))}
.regla__lleno--alerta{background:linear-gradient(90deg,#D69410,var(--amarillo))}
.regla__lleno--excedido{background:linear-gradient(90deg,#D14336,var(--rojo))}
.regla__pagado{position:absolute;top:0;bottom:0;left:0;border-radius:4px 0 0 4px;
  background:rgba(20,22,26,.30)}
.regla__marca{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--tinta);
  border-radius:2px;box-shadow:0 0 0 2px var(--fondo)}
.regla__marca::after{content:attr(data-rot);position:absolute;top:100%;left:50%;
  transform:translateX(-50%);margin-top:7px;font-family:var(--mono);font-size:9.5px;
  letter-spacing:.09em;color:var(--tinta-tenue);white-space:nowrap;text-transform:uppercase}
.regla__pie{display:flex;justify-content:space-between;gap:12px;margin-top:30px;
  font-size:11.5px;color:var(--tinta-tenue)}
.regla__pie b{color:var(--tinta-media);font-weight:600;font-variant-numeric:tabular-nums}
.regla--mini .regla__pista{height:6px;border-radius:3px}
.regla--mini .regla__marca{top:-2.5px;bottom:-2.5px;width:1.5px;box-shadow:0 0 0 1.5px var(--superficie)}
.regla--mini .regla__marca::after{display:none}

/* avisos */
.aviso{display:flex;gap:12px;align-items:flex-start;padding:13px 16px;border-radius:var(--r);
  border:1px solid;font-size:13px;line-height:1.55}
.aviso strong{display:block;font-weight:700;letter-spacing:-.01em}
.aviso__icono{font-size:15px;line-height:1.4;flex:none}
.aviso--amarillo{background:var(--amarillo-velo);border-color:rgba(154,98,6,.30);color:var(--amarillo)}
.aviso--rojo{background:var(--rojo-velo);border-color:rgba(176,42,32,.30);color:var(--rojo)}
.aviso--marca{background:var(--marca-velo);border-color:var(--marca-borde);color:var(--marca-texto)}
.aviso p{margin:3px 0 0;color:inherit;opacity:.82;font-size:12.5px}
/* En rejilla y no apiladas: tres franjas de ancho completo empujaban la tabla
   de contratos fuera de la primera pantalla. */
.alertas{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}

/* Ajustes: el formulario a la izquierda y lo accesorio al lado, para no dejar
   media pantalla vacía en un monitor de escritorio. */
.ajustes{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 320px;
  align-items:start;max-width:1020px}
.ajustes__lado{display:grid;gap:14px;align-content:start}
@media (max-width:860px){ .ajustes{grid-template-columns:minmax(0,1fr)} }

/* ═════════════════════════════════════════════════════════════════ tabla */
.envoltura{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:13px}
thead th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--tinta-tenue);padding:12px 14px;background:var(--hundido);
  border-bottom:1px solid var(--linea);white-space:nowrap}
td{padding:13px 14px;border-bottom:1px solid var(--linea);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr.clicable{cursor:pointer;transition:background .13s}
tbody tr.clicable:hover{background:var(--superficie-alta)}
tfoot td{background:var(--hundido);border-bottom:0;border-top:1px solid var(--linea-fuerte);
  font-weight:700;font-size:12.5px}
.num{text-align:right;white-space:nowrap;font-feature-settings:"tnum" 1}
th.num{text-align:right}
.menguado{color:var(--tinta-tenue)}
.sin-cortar{white-space:nowrap}
.apretado{font-size:11.5px;color:var(--tinta-tenue);margin-top:3px;line-height:1.45}
.acciones{display:flex;gap:5px;justify-content:flex-end}
.titulo-fila{font-weight:600;font-size:13.5px;letter-spacing:-.01em;margin-top:6px}

/* fila desplegable de un gasto */
.detalle{background:var(--hundido)}
.detalle>td{padding:0;border-bottom:1px solid var(--linea)}
.detalle__caja{padding:17px 16px 19px;display:grid;gap:20px;grid-template-columns:minmax(0,2fr) minmax(210px,.8fr)}
.mini{font-size:12px}
.mini thead th{padding:6px 10px;font-size:9.5px;background:transparent;border-bottom:1px solid var(--linea)}
.mini td{padding:8px 10px;border-bottom:1px solid rgba(20,22,26,.06)}
.mini td:first-child{white-space:nowrap}
.mini tfoot td{background:transparent;border-top:1px solid var(--linea)}

/* ═══════════════════════════════════════════════════════════════ filtros */
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.buscador{position:relative;flex:1;min-width:210px}
.buscador input{width:100%;padding:10px 13px 10px 36px;border:1px solid var(--linea);
  border-radius:9px;background:var(--superficie);font-size:13px}
.buscador input:focus{border-color:var(--marca-borde);outline:none}
.buscador::before{content:"";position:absolute;left:14px;top:50%;width:11px;height:11px;
  margin-top:-7px;border:1.6px solid var(--tinta-tenue);border-radius:50%;pointer-events:none}
.buscador::after{content:"";position:absolute;left:23px;top:50%;width:6px;height:1.6px;
  margin-top:2px;background:var(--tinta-tenue);transform:rotate(45deg);pointer-events:none}
.filtros select{padding:9px 12px;border:1px solid var(--linea);border-radius:9px;
  background:var(--superficie);font-size:13px}
.palanca{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border:1px solid var(--linea);
  border-radius:9px;background:var(--superficie);font-size:12.5px;font-weight:600;
  color:var(--tinta-media);cursor:pointer;user-select:none;transition:all .14s;
  white-space:nowrap;align-self:start}
.palanca:hover{border-color:var(--linea-fuerte);color:var(--tinta)}
.palanca input{margin:0;accent-color:var(--marca)}
.palanca.activa{border-color:var(--marca-borde);background:var(--marca-velo);color:var(--marca-texto)}

/* ══════════════════════════════════════════════════════════════════ ficha */
/* Tres piezas en una rejilla, no dos columnas anidadas: así en el celular el
   resumen de plata sube justo debajo del encabezado en vez de quedar de
   último, después de toda la lista de gastos. */
.ficha{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 336px;align-items:start}
.ficha>.cabeza{grid-column:1;grid-row:1}
.ficha__lado{grid-column:2;grid-row:1/span 2;min-width:0;display:grid;gap:14px;align-content:start}
.ficha__cuerpo{grid-column:1;grid-row:2;min-width:0}
.ficha__cuerpo>.seccion:first-child{margin-top:0}

.cabeza{padding:22px 24px}
.cabeza__alto{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.cabeza h1{font-size:23px;font-weight:700;margin:11px 0 7px;letter-spacing:-.025em}
.cabeza__meta{display:flex;gap:9px;flex-wrap:wrap;align-items:center;color:var(--tinta-tenue);font-size:12.5px}
.cabeza__fin{margin-left:auto;display:flex;gap:7px;flex-wrap:wrap}

.datos{display:grid;gap:0 18px;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));
  border-top:1px solid var(--linea);margin-top:20px;padding-top:4px}
.dato{padding:13px 0 3px;min-width:0}
.dato__rot{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--tinta-tenue)}
.dato__val{margin-top:5px;font-size:13.5px;font-weight:600;overflow-wrap:anywhere;letter-spacing:-.005em}
.dato__val a{color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--marca-borde)}
.dato__val a:hover{color:var(--marca-texto)}
.dato__val--largo{font-weight:400;font-size:13px;line-height:1.65;color:var(--tinta-media)}
/* Un correo es una sola palabra larga y en una columna estrecha se parte
   por la mitad de la extension: '...ejemplo.c' / 'om'. Se le deja la fila
   entera y se achica un punto. */
.dato:has(.dato__val--correo){grid-column:1/-1}
.dato__val--correo{font-size:12.5px}

/* el libro de cuentas */
.libro{padding:18px 20px 20px}
.libro__fila{display:flex;justify-content:space-between;gap:14px;padding:9px 0;
  border-bottom:1px solid rgba(20,22,26,.06)}
.libro__fila:last-of-type{border-bottom:0}
.libro__fila span{color:var(--tinta-media);font-size:12.5px}
.libro__fila b{font-weight:600;white-space:nowrap;font-size:13.5px}
.libro__fila--suma{border-top:1.5px solid var(--linea-fuerte);border-bottom:0;margin-top:7px;padding-top:12px}
.libro__fila--suma span{color:var(--tinta);font-weight:600;font-size:13px}
.libro__fila--suma b{font-size:16.5px;color:var(--tinta)}
.libro__nota{margin:11px 0 0;font-size:11.5px;color:var(--tinta-tenue);line-height:1.6}

/* ═════════════════════════════════════════════════════════════════ modal */
/* El modal tiene altura propia y el que se desplaza es su cuerpo, no la
   página. Antes el pie era `position:sticky` sobre un velo que scrolleaba: al
   bajar quedaba flotando con campos asomándose por debajo, y se veía roto.
   Así el pie está siempre abajo del modal y el encabezado siempre arriba. */
.velo{position:fixed;inset:0;z-index:50;background:rgba(5,6,7,.72);backdrop-filter:blur(4px);
  display:grid;place-items:center;padding:24px 16px;overflow:hidden}
.modal{width:100%;max-width:780px;max-height:100%;display:flex;flex-direction:column;overflow:hidden;
  background:var(--superficie);border:1px solid var(--linea);
  border-radius:16px;box-shadow:var(--sombra-alta);animation:sube .2s cubic-bezier(.2,.8,.3,1)}
.modal>form{display:flex;flex-direction:column;flex:1;min-height:0}
@keyframes sube{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .modal{animation:none}.regla__lleno{transition:none}.barra__nav a::after{transition:none}
}
.modal--angosto{max-width:480px}
.modal__cab{display:flex;align-items:center;gap:14px;padding:19px 22px;border-bottom:1px solid var(--linea);flex:none}
.modal__cab h2{font-size:17px;font-weight:700;letter-spacing:-.02em}
.modal__cab .btn{margin-left:auto}
.modal__cuerpo{padding:20px 22px;display:grid;gap:20px;align-content:start;
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}
.modal__pie{display:flex;gap:10px;justify-content:flex-end;padding:15px 22px;flex:none;
  border-top:1px solid var(--linea);background:var(--superficie);flex-wrap:wrap;
  box-shadow:0 -10px 22px -14px rgba(20,22,26,.22)}
.modal__pie .aviso{flex:1;min-width:210px;padding:8px 12px;font-size:12.5px}

.grupo{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.grupo--tit{grid-column:1/-1;font-size:10px;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--marca-texto);padding-top:2px}
.campo{display:grid;gap:6px;align-content:start}
.campo--ancho{grid-column:1/-1}
/* Ocupa dos columnas: evita que un campo largo (nombre, correo, actividad)
   quede solo en una fila con dos huecos al lado. */
.campo--doble{grid-column:span 2}
.campo>span,.campo>label{font-size:10.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-tenue)}
.campo input,.campo select,.campo textarea{padding:10px 12px;border:1px solid var(--linea);
  border-radius:9px;background:var(--fondo);width:100%;font-size:13.5px;transition:border-color .14s}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--marca);outline:none}
.campo>label{cursor:pointer}
.campo input::placeholder,.campo textarea::placeholder{color:#5B6068}
.campo textarea{min-height:82px;resize:vertical;line-height:1.6}
.campo input:disabled{background:var(--hundido);color:var(--tinta-tenue);border-style:dashed}
.campo>span.campo__pista{font-size:11.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--tinta-tenue);line-height:1.5}

/* El calendario nativo es negro sobre negro sin esto. */
.campo input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.5;cursor:pointer}
.campo input[type=date]:hover::-webkit-calendar-picker-indicator{opacity:.9}

/* ══════════════════════════════════════════════════════════════ archivos */
.soltar{border:1.5px dashed var(--linea-fuerte);border-radius:var(--r);padding:20px 16px;
  text-align:center;color:var(--tinta-tenue);font-size:12.5px;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;line-height:1.55}
.soltar:hover,.soltar.encima{border-color:var(--marca);background:var(--marca-velo);color:var(--marca-texto)}
.soltar b{display:block;color:var(--tinta-media);font-weight:600;font-size:13px;margin-bottom:3px}
.soltar:hover b,.soltar.encima b{color:var(--marca-texto)}
.adjuntos{display:grid;gap:8px;margin-top:12px}
.adjunto{display:flex;align-items:center;gap:11px;padding:9px 12px;border:1px solid var(--linea);
  border-radius:9px;background:var(--fondo);font-size:12.5px;min-width:0}
.adjunto__ext{font-family:var(--mono);font-size:9px;font-weight:500;letter-spacing:.06em;
  padding:4px 6px;border-radius:5px;background:var(--marca-velo);color:var(--marca-texto);
  flex:none;min-width:42px;text-align:center}
.adjunto a{color:var(--tinta);text-decoration:none;font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;min-width:0}
.adjunto a:hover{color:var(--marca-texto)}
.adjunto__peso{margin-left:auto;color:var(--tinta-tenue);font-size:11px;white-space:nowrap}

/* ════════════════════════════════════════════════════ buscador del CRM */
.buscacrm__caja{position:relative}
.buscacrm__caja input{padding:10px 12px;border:1px solid var(--linea);border-radius:9px;
  background:var(--fondo);width:100%;font-size:13.5px}
.buscacrm__caja input:focus{border-color:var(--marca);outline:none}
.buscacrm__lista{position:absolute;top:calc(100% + 5px);left:0;right:0;z-index:5;
  background:var(--superficie-alta);border:1px solid var(--linea-fuerte);border-radius:10px;
  box-shadow:var(--sombra-alta);max-height:264px;overflow-y:auto;padding:5px}
.buscacrm__fila{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:7px;
  transition:background .12s}
.buscacrm__fila:hover{background:var(--marca-velo)}
.buscacrm__nombre{display:block;font-size:13px;font-weight:600;color:var(--tinta);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buscacrm__meta{display:block;font-size:11.5px;color:var(--tinta-tenue);margin-top:1px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.buscacrm__nota{padding:11px 10px;font-size:12.5px;color:var(--tinta-tenue);line-height:1.5}
.buscacrm__pie{padding:8px 10px 4px;margin-top:4px;border-top:1px solid var(--linea);
  font-size:12px;color:var(--tinta-tenue);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.buscacrm__crear{display:inline-flex;align-items:center;padding:7px 12px;border-radius:8px;
  border:1px solid var(--marca-borde);color:var(--marca-texto);font-size:12.5px;font-weight:600;
  transition:background .13s}
.buscacrm__crear:hover{background:var(--marca-velo)}
.buscacrm__lista>.buscacrm__crear{margin:0 10px 10px}
.buscacrm__estado{display:flex;gap:9px;align-items:center;flex-wrap:wrap;min-height:26px}

/* ═════════════════════════════════════════════════════ hito de cobro */
/* Naranja de marca, no semáforo: cuánto ha pagado el cliente no es un riesgo
   sino un punto de control. El semáforo queda para lo que sí puede salir mal. */
.cobro{padding:12px 0 4px}
.cobro__cab{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px;
  font-size:11.5px;color:var(--tinta-tenue)}
.cobro__pct{font-size:15px;font-weight:700;color:var(--marca-texto);letter-spacing:-.02em}
.regla__lleno--cobro{background:linear-gradient(90deg,var(--marca-honda),var(--marca))}

/* ═══════════════════════════════════════════════════════════════ reparto */
.reparto{display:grid;gap:11px;padding:18px 20px}
.reparto__fila{display:grid;grid-template-columns:minmax(0,158px) 1fr auto;gap:12px;align-items:center;font-size:12.5px}
.reparto__fila>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tinta-media)}
.reparto__pista{height:7px;background:rgba(20,22,26,.07);border-radius:4px;overflow:hidden}
.reparto__lleno{display:block;height:100%;border-radius:4px;min-width:3px;
  background:linear-gradient(90deg,var(--marca-honda),var(--marca))}
.reparto__val{white-space:nowrap;font-weight:600;font-size:12.5px}

/* ══════════════════════════════════════════════════════════════ bitácora */
.bitacora{padding:6px 20px 18px;max-height:300px;overflow-y:auto}
.bitacora ul{margin:0;padding:0}
.bitacora li{display:flex;gap:14px;padding:9px 0;border-bottom:1px solid rgba(20,22,26,.06);
  font-size:12.5px;list-style:none;color:var(--tinta-media)}
.bitacora li:last-child{border-bottom:0}
.bitacora time{font-family:var(--mono);font-size:10.5px;color:var(--tinta-tenue);
  white-space:nowrap;padding-top:2px;flex:none}

/* ═════════════════════════════════════════════════════════════════ nota */
.nota{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:70;padding:12px 20px;
  border-radius:11px;background:var(--marca);color:var(--tinta);font-size:13px;font-weight:600;
  box-shadow:var(--sombra-alta);max-width:min(92vw,470px);text-align:center;
  animation:asoma .2s cubic-bezier(.2,.8,.3,1)}
.nota--mal{background:var(--rojo);color:#FFF}
@keyframes asoma{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}

.cargando{padding:80px 20px;text-align:center;color:var(--tinta-tenue);font-size:13px}

/* ═══════════════════════════════════════════════════════════════ pantallas */
@media (max-width:1180px){
  .cinta{grid-template-columns:repeat(3,1fr)}
  .cinta--4{grid-template-columns:repeat(2,1fr) !important}
}
@media (max-width:980px){
  .ficha{grid-template-columns:minmax(0,1fr)}
  .ficha>.cabeza,.ficha__lado,.ficha__cuerpo{grid-column:auto;grid-row:auto}
  .ficha__cuerpo>.seccion:first-child{margin-top:8px}
  .detalle__caja{grid-template-columns:minmax(0,1fr)}
}

/* Tablas que se vuelven tarjetas. A 375px una tabla de siete columnas con
   scroll horizontal es ilegible por mucho que "quepa": el celular es donde
   más se usa esto, así que ahí cada fila pasa a ser una ficha. */
@media (max-width:760px){
  .tabla-tarjetas thead{display:none}
  .tabla-tarjetas,.tabla-tarjetas tbody,.tabla-tarjetas tfoot,
  .tabla-tarjetas tr,.tabla-tarjetas td{display:block;width:100%}
  .tabla-tarjetas tr{border:1px solid var(--linea);border-radius:var(--r);
    background:var(--superficie);padding:14px 15px;margin:0 0 10px}
  .tabla-tarjetas tbody tr:last-child{margin-bottom:0}
  .tabla-tarjetas td{border:0;padding:5px 0;display:flex;flex-wrap:wrap;justify-content:space-between;
    align-items:baseline;gap:2px 14px;text-align:right}
  /* La segunda línea (“3 registros”, el chip de estado) se sale a su propio
     renglón; si no, queda al lado de la cifra como si fuera otra columna. */
  .tabla-tarjetas td>.apretado{width:100%;text-align:right;margin-top:0}
  .tabla-tarjetas td::before{content:attr(data-rot);color:var(--tinta-tenue);font-size:10px;
    font-weight:700;text-transform:uppercase;letter-spacing:.1em;text-align:left;flex:none;
    padding-top:2px}
  .tabla-tarjetas td[data-rot=""]::before,.tabla-tarjetas td:not([data-rot])::before{display:none}
  .tabla-tarjetas td.celda-cabeza{display:block;text-align:left;padding:0 0 12px;
    margin-bottom:10px;border-bottom:1px solid var(--linea)}
  .tabla-tarjetas td.celda-ancha{display:block;text-align:left;padding-top:10px}
  .tabla-tarjetas td.celda-ancha::before{display:block;margin-bottom:7px}
  /* En la cabecera de la ficha el subtítulo va pegado al nombre, a la
     izquierda: la regla de arriba lo mandaba a la derecha. */
  .tabla-tarjetas td.celda-cabeza>.apretado,
  .tabla-tarjetas td.celda-ancha>.apretado{text-align:left}
  .tabla-tarjetas .acciones{justify-content:flex-start;padding-top:4px}
  .tabla-tarjetas tfoot tr{background:var(--hundido);border-color:var(--linea-fuerte)}
  .tabla-tarjetas tfoot td{font-size:13px}
  .tabla-tarjetas tr.detalle{padding:0;background:var(--hundido);margin-top:-6px}
  .tabla-tarjetas tr.detalle>td{padding:0}
  .envoltura{overflow-x:visible}
}

@media (max-width:640px){
  main{padding:18px 14px 70px}
  .barra__fila{padding:10px 14px;gap:10px;flex-wrap:wrap}
  .barra__marca img{height:26px}
  .barra__nav{margin-left:0;order:3;width:100%;gap:0;border-top:1px solid var(--linea);padding-top:2px}
  .barra__nav a{flex:1;text-align:center;margin:0;padding:9px 3px}
  .barra__nav a::after{bottom:0}
  .cinta,.cinta--4{grid-template-columns:repeat(2,1fr)}
  .kpi{padding:14px 15px}
  .kpi__val{font-size:20px;margin-top:7px}
  .seccion{margin-top:24px}
  .seccion__tit>.btn{flex:1}
  .cabeza{padding:18px 17px}
  .cabeza h1{font-size:20px}
  .cabeza__fin{margin-left:0;width:100%}
  .cabeza__fin .btn{flex:1}
  .datos{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  .modal__cuerpo{padding:16px 16px;gap:16px}
  .campo--doble{grid-column:auto}
  .modal__cab,.modal__pie{padding:14px 16px}
  .reparto__fila{grid-template-columns:minmax(0,106px) 1fr auto;font-size:11.5px;gap:9px}
  .regla__pct{font-size:23px}
}

/* ══════════════════════════════════════════════════ gestión de asesores */
/* La pantalla que reemplaza al panel externo. Misma rejilla de dos columnas
   que el modal del contrato, para que los campos caigan donde la gente ya los
   espera; en el celular se apila sola, que es donde más se usa. */
.gestion{padding:22px;display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
.gestion .campo--doble{grid-column:1/-1}
.gestion__fila{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.gestion__fila>select,.gestion__fila>input{flex:1;min-width:190px}
.gestion__elegido{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:8px}
.gestion__pie{margin:0;font-size:11.5px;color:var(--tinta-tenue);line-height:1.5}
/* El select deshabilitado tiene que verse deshabilitado: si "venta cerrada"
   se apaga porque no contactó, y se ve igual, parece que la página falla. */
.gestion option:disabled{color:var(--tinta-tenue)}

@media (max-width:720px){
  .gestion{grid-template-columns:1fr;padding:18px}
  .gestion .campo--doble{grid-column:auto}
}