/* Panel de contratos · C48 Marketing Social
   ---------------------------------------------------------------------------
   La identidad la pone el cliente y aquí se respeta tal cual: negro, naranja
   #FA781E y Montserrat, que es lo que usan en c48marketingsocial.com y en su
   portafolio. De ahí se toman prestados tres gestos suyos:

     1. El subrayado naranja bajo cada título de sección (su portafolio abre
        cada capítulo así).
     2. La píldora naranja con texto negro, que ellos usan para rotular. Aquí
        rotula el número del contrato: es el sello de la carpeta.
     3. La banda de columnas separadas por filetes finos de su página de inicio,
        que aquí sostiene las seis cifras del resumen.

   Una regla que el negro obliga a defender: el naranja de marca NO puede
   significar alarma, porque significa C48. El semáforo usa amarillo, verde y
   rojo, escogidos para no confundirse con él ni siquiera de reojo. */

:root{
  color-scheme: dark;

  --negro:#0B0C0D;          /* fondo de página */
  --carbon:#141518;         /* zonas hundidas: cabeceras de tabla, detalles */
  --superficie:#1C1D20;     /* tarjetas. Es el gris de su web */
  --superficie-alta:#25262B;/* hover */
  --linea:rgba(255,255,255,.085);
  --linea-fuerte:rgba(255,255,255,.19);

  --tinta:#F2F3F4;
  --tinta-media:#A9ADB4;
  --tinta-tenue:#71767E;

  --naranja:#FA781E;        /* el naranja de la marca */
  --naranja-vivo:#FF8F42;
  --naranja-velo:rgba(250,120,30,.13);
  --naranja-hondo:#C25A12;
  --naranja-borde:rgba(250,120,30,.42);

  --verde:#3DD68C;   --verde-velo:rgba(61,214,140,.12);
  --amarillo:#FFC53D; --amarillo-velo:rgba(255,197,61,.13);
  --rojo:#FF6B6B;    --rojo-velo:rgba(255,107,107,.13);

  --r:12px;
  --sombra:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.28);
  --sombra-alta:0 24px 70px rgba(0,0,0,.65);
  --ui:"Montserrat",-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(--negro)}
body{
  margin:0;background:var(--negro);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(--naranja)}
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(--naranja);outline-offset:2px;border-radius:4px}
::selection{background:var(--naranja);color:#000}
*{scrollbar-color:rgba(255,255,255,.22) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:6px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.3);background-clip:content-box}

/* Montserrat sí 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(--negro);overflow:hidden}
/* Resplandor naranja apenas insinuado: 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(250,120,30,.16),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(--naranja)}
.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(--negro);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(--naranja);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(11,12,13,.82);
  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:30px;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)}

/* El subrayado naranja del ítem activo es de su propia página. */
.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(--naranja);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:rgba(255,255,255,.3)}
/* Píldora naranja con texto negro: el gesto de rotulación de su portafolio. */
.btn--principal{background:var(--naranja);border-color:var(--naranja);color:#0B0C0D;font-weight:700}
.btn--principal:hover{background:var(--naranja-vivo);border-color:var(--naranja-vivo);color:#0B0C0D}
/* Contorno naranja: el botón "Hablemos" de su página de inicio. */
.btn--marca{border-color:var(--naranja-borde);color:var(--naranja)}
.btn--marca:hover{background:var(--naranja-velo);border-color:var(--naranja);color:var(--naranja-vivo)}
.btn--chico{min-height:30px;padding:4px 11px;font-size:12px;border-radius:8px}
.btn--peligro{color:var(--rojo);border-color:rgba(255,107,107,.32)}
.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 su filete naranja debajo. */
.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(--naranja)}
.seccion__tit::after{content:"";flex:1;min-width:20px;height:1px;background:var(--linea);order:1}
.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:#0B0C0D;background:var(--naranja);border-radius:5px;padding:3px 9px}
.folio--fantasma{background:transparent;color:var(--naranja);box-shadow:inset 0 0 0 1px var(--naranja-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(255,255,255,.07);
  color:var(--tinta-media);white-space:nowrap}
.chip--verde{background:var(--verde-velo);color:var(--verde)}
.chip--amarillo{background:var(--amarillo-velo);color:var(--amarillo)}
.chip--rojo{background:var(--rojo-velo);color:var(--rojo)}
.chip--marca{background:var(--naranja-velo);color:var(--naranja)}
.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
   de su página de inicio. El truco: rejilla con gap de 1px sobre fondo de
   línea, y cada celda opaca encima. */
.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--naranja .kpi__val{color:var(--naranja)}
.kpi--verde .kpi__val{color:var(--verde)}
.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(--verde)}
.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(255,255,255,.06);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,#2FB876,var(--verde))}
.regla__lleno--alerta{background:linear-gradient(90deg,#E0A21F,var(--amarillo))}
.regla__lleno--excedido{background:linear-gradient(90deg,#E04C4C,var(--rojo))}
.regla__pagado{position:absolute;top:0;bottom:0;left:0;border-radius:4px 0 0 4px;
  background:rgba(0,0,0,.34)}
.regla__marca{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--tinta);
  border-radius:2px;box-shadow:0 0 0 2px var(--negro)}
.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(255,197,61,.3);color:var(--amarillo)}
.aviso--rojo{background:var(--rojo-velo);border-color:rgba(255,107,107,.3);color:var(--rojo)}
.aviso--marca{background:var(--naranja-velo);border-color:var(--naranja-borde);color:var(--naranja)}
.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(--carbon);
  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(--carbon);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(--carbon)}
.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(255,255,255,.05)}
.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(--naranja-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}
.palanca:hover{border-color:var(--linea-fuerte);color:var(--tinta)}
.palanca input{margin:0;accent-color:var(--naranja)}
.palanca.activa{border-color:var(--naranja-borde);background:var(--naranja-velo);color:var(--naranja)}

/* ══════════════════════════════════════════════════════════════════ 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(--naranja-borde)}
.dato__val a:hover{color:var(--naranja)}
.dato__val--largo{font-weight:400;font-size:13px;line-height:1.65;color:var(--tinta-media)}

/* 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(255,255,255,.05)}
.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 */
.velo{position:fixed;inset:0;z-index:50;background:rgba(5,6,7,.72);backdrop-filter:blur(4px);
  display:grid;place-items:start center;padding:26px 16px;overflow-y:auto}
.modal{width:100%;max-width:780px;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)}
@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)}
.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}
.modal__pie{display:flex;gap:10px;justify-content:flex-end;padding:15px 22px;
  border-top:1px solid var(--linea);position:sticky;bottom:0;background:var(--superficie);
  border-radius:0 0 16px 16px;flex-wrap:wrap}
.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(--naranja);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{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(--negro);width:100%;font-size:13.5px;transition:border-color .14s}
.campo input:focus,.campo select:focus,.campo textarea:focus{border-color:var(--naranja);outline:none}
.campo input::placeholder,.campo textarea::placeholder{color:#5B6068}
.campo textarea{min-height:82px;resize:vertical;line-height:1.6}
.campo input:disabled{background:var(--carbon);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(--naranja);background:var(--naranja-velo);color:var(--naranja)}
.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(--naranja)}
.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(--negro);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(--naranja-velo);color:var(--naranja);
  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(--naranja)}
.adjunto__peso{margin-left:auto;color:var(--tinta-tenue);font-size:11px;white-space:nowrap}

/* ═══════════════════════════════════════════════════════════════ 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(255,255,255,.06);border-radius:4px;overflow:hidden}
.reparto__lleno{display:block;height:100%;border-radius:4px;min-width:3px;
  background:linear-gradient(90deg,var(--naranja-hondo),var(--naranja))}
.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(255,255,255,.05);
  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(--naranja);color:#0B0C0D;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:#2A0808}
@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)}
}
@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(--carbon);border-color:var(--linea-fuerte)}
  .tabla-tarjetas tfoot td{font-size:13px}
  .tabla-tarjetas tr.detalle{padding:0;background:var(--carbon);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{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}
}