/* ============================================================
   CAUTIO · PANEL DEL DESPACHO
   Hoja propia, no la del sitio: la del sitio trae reglas globales de
   form y label pensadas para el formulario de la portada.
   Los tokens si son los mismos: MARCA.md manda.
   ============================================================ */

:root{
  /* Paleta Hueso */
  --fondo:#F6F5F1;
  --tinta:#272828;
  --medio:#808080;
  --apoyo:#757572;
  --piedra:#9B9B98;
  /* Paleta Blanca: placas y tarjetas */
  --placa:#FCFCFC;
  --placa-tinta:#1F262A;
  --placa-sec:#2D3237;
  --placa-apoyo:#7A7D80;
  --linea:rgba(39,40,40,.16);
  --linea-suave:rgba(39,40,40,.08);
}
body.oscuro{
  --fondo:#212225;
  --tinta:#F0F0F0;
  --medio:#CFCFCF;
  --apoyo:#8E9093;
  --piedra:#8E9093;
  --placa:#26272B;
  --placa-tinta:#F0F0F0;
  --placa-sec:#CFCFCF;
  --placa-apoyo:#8E9093;
  --linea:rgba(240,240,240,.18);
  --linea-suave:rgba(240,240,240,.08);
}

*{margin:0;padding:0;box-sizing:border-box}
/* el atributo hidden lo pisa cualquier display explicito (grid, flex) */
[hidden]{display:none !important}
body{
  font-family:'Jost',system-ui,sans-serif;font-weight:400;
  background:var(--fondo);color:var(--tinta);
  font-size:16px;line-height:1.6;
  transition:background .45s ease,color .45s ease;
  -webkit-font-smoothing:antialiased;
}
svg{display:block}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer}
/* Sin esto el navegador subraya los enlaces y los pinta de morado al
   visitarlos. El logo de la barra es un enlace. */
a{color:inherit;text-decoration:none}
::selection{background:var(--tinta);color:var(--fondo)}

/* letra chica del sistema: siempre versalitas con aire */
.eyebrow,.b-etiqueta,.b-cuenta,.b-titulo h2,.et,.estado{
  font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:400;
}

/* ============ BARRA SUPERIOR ============ */
.barra{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:34px;
  padding:0 34px;height:66px;
  background:var(--fondo);border-bottom:1px solid var(--linea-suave);
  transition:background .45s ease;
}
.b-marca{display:flex;align-items:center;gap:11px}
.mono{height:26px;width:auto;overflow:visible;stroke:var(--tinta);fill:none}
.b-word{font-size:14px;letter-spacing:.3em;text-transform:uppercase;font-weight:400}

/* --- contexto de cliente: el control mas importante de la barra --- */
.b-contexto{position:relative;display:flex;align-items:center;gap:14px;margin-left:8px}
.b-etiqueta{color:var(--apoyo)}
.b-cliente{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--linea);border-radius:2px;
  padding:8px 14px 7px;font-size:14px;letter-spacing:.02em;
  transition:border-color .25s;
}
.b-cliente:hover{border-color:var(--tinta)}
.b-flecha{
  width:6px;height:6px;border-right:1px solid var(--apoyo);border-bottom:1px solid var(--apoyo);
  transform:rotate(45deg) translate(-2px,-2px);
}
.b-lista{
  position:absolute;top:calc(100% + 8px);left:96px;min-width:290px;
  list-style:none;background:var(--placa);border:1px solid var(--linea);
  border-radius:2px;padding:6px 0;z-index:50;
}
.b-lista li{padding:0}
.b-lista button{
  display:flex;width:100%;align-items:baseline;gap:12px;
  padding:10px 18px;font-size:14.5px;text-align:left;color:var(--placa-sec);
}
.b-lista button:hover{background:var(--fondo)}
.b-lista button[aria-selected="true"]{color:var(--placa-tinta);font-weight:500}
.b-lista .et{color:var(--placa-apoyo);margin-left:auto}
.b-lista .sep{height:1px;background:var(--linea-suave);margin:6px 0}

.b-acciones{margin-left:auto;display:flex;align-items:center;gap:20px}
.b-usuario{font-size:14px;color:var(--apoyo)}
.b-tema{
  width:15px;height:15px;border-radius:50%;
  border:1px solid var(--tinta);
  background:linear-gradient(90deg,var(--tinta) 0 50%,transparent 50% 100%);
}

/* ============ CUERPO ============ */
main{padding:52px 34px 90px;max-width:1500px}
.apertura{margin-bottom:54px;max-width:820px}
.eyebrow{color:var(--apoyo);margin-bottom:20px}
h1{
  font-weight:300;font-size:clamp(24px,2.9vw,34px);line-height:1.3;
  letter-spacing:-.005em;
}

.tablero{display:grid;grid-template-columns:1.55fr 1fr;gap:56px;align-items:start}
.columna{display:flex;flex-direction:column;gap:52px}

.bloque{}
.b-titulo{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:14px;border-bottom:1px solid var(--linea);margin-bottom:6px;
}
.b-titulo h2{color:var(--tinta)}
.b-cuenta{color:var(--apoyo);margin-left:auto}

/* ============ CORRE PLAZO ============
   El numero de dias es el dato, asi que se lee primero. */
.fila{
  display:flex;align-items:center;gap:22px;width:100%;text-align:left;
  padding:18px 0;border-bottom:1px solid var(--linea-suave);
  transition:opacity .25s;
}
.fila:hover{opacity:.62}
.dias{
  flex-shrink:0;width:74px;display:flex;align-items:baseline;gap:5px;
}
.dias .n{font-size:27px;font-weight:300;line-height:1;letter-spacing:-.02em}
.dias .u{font-size:11px;color:var(--apoyo);letter-spacing:.1em}
.dias.vencido .n{font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.f-cuerpo{min-width:0;flex:1}
/* los renglones van uno debajo de otro: son spans dentro de un button,
   asi que hay que declararlo o se acomodan en linea */
.f-asunto,.c-nombre,.c-pie{display:block}
.f-asunto{font-size:15.5px;line-height:1.4;margin-bottom:4px}
.f-pie{font-size:12.5px;color:var(--apoyo);display:flex;gap:9px;flex-wrap:wrap}
.f-pie .div{color:var(--piedra)}
.punto{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.punto.ok{background:var(--tinta)}
.punto.medio{background:var(--apoyo)}
.punto.alerta{background:none;border:1.5px solid var(--tinta)}

/* ============ ESPERANDO AL CLIENTE ============ */
.lista-espera .fila{align-items:flex-start;cursor:default}
.lista-espera .fila:hover{opacity:1}
.enlace{text-align:left;font-size:15.5px;line-height:1.4;transition:opacity .25s}
.enlace:hover{opacity:.6}
.contador{
  flex-shrink:0;width:74px;font-size:20px;font-weight:300;line-height:1.15;
  letter-spacing:-.01em;
}
.contador small{font-size:11px;color:var(--apoyo);letter-spacing:.1em;display:block;margin-top:3px}
.pendientes{list-style:none;margin-top:9px;display:flex;flex-direction:column;gap:5px}
.pendientes li{
  font-size:13px;color:var(--apoyo);display:flex;gap:10px;align-items:baseline;
}
.casilla{
  width:10px;height:10px;border:1px solid var(--piedra);flex-shrink:0;
  position:relative;top:2px;
}
.pendientes li.hecho{color:var(--piedra);text-decoration:line-through}
.pendientes li.hecho .casilla{background:var(--piedra)}

/* ============ CARTERA ============ */
.lista-cartera .fila{gap:16px;align-items:center}
.c-nombre{font-size:15px;line-height:1.35}
.c-pie{font-size:12px;color:var(--apoyo);margin-top:3px}
.c-marca{
  display:inline-block;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--apoyo);border:1px solid var(--linea);border-radius:2px;
  padding:3px 7px 2px;margin-left:8px;white-space:nowrap;
  position:relative;top:-1px;
}
.estado{color:var(--apoyo);margin-left:auto;white-space:nowrap;text-align:right}
/* El truco de mostrar «Entrar» solo al pasar el cursor se quito:
   una puerta que no se ve no existe. Ahora va siempre visible. */
.nota{font-size:11.5px;color:var(--apoyo);margin-top:22px;line-height:1.5}
.vacio{font-size:14.5px;color:var(--apoyo);padding:24px 0}

/* ============ AVISO ============ */
.aviso{
  position:fixed;left:50%;bottom:30px;transform:translate(-50%,14px);
  background:var(--tinta);color:var(--fondo);
  font-size:12px;letter-spacing:.1em;padding:13px 22px;border-radius:2px;
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s;z-index:80;
}
.aviso.ver{opacity:1;transform:translate(-50%,0)}

@media(max-width:1080px){
  .tablero{grid-template-columns:1fr;gap:52px}
  .b-etiqueta{display:none}
  .b-lista{left:0}
}
@media(max-width:760px){
  .barra{padding:0 20px;gap:16px}
  .b-usuario{display:none}
  main{padding:38px 20px 70px}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
}

/* ============================================================
   VISTA DE CLIENTE
   ============================================================ */

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.miga{
  font-size:12px;letter-spacing:.05em;color:var(--apoyo);
  display:flex;gap:9px;margin-bottom:38px;
}
.miga a{color:var(--apoyo);text-decoration:none;border-bottom:1px solid transparent}
.miga a:hover{color:var(--tinta);border-bottom-color:var(--linea)}

.apertura .c-linea{font-size:14px;color:var(--apoyo);margin-top:14px}
.apertura.chica{margin-bottom:34px}
.apertura.chica .c-linea{max-width:640px;margin-top:10px}

.buscador{display:block;margin-top:30px;max-width:520px}
.buscador input{
  width:100%;font-family:inherit;font-size:15px;color:var(--tinta);
  background:var(--placa);border:1px solid var(--linea);border-radius:2px;
  padding:14px 18px;transition:border-color .25s;
}
.buscador input:focus{outline:none;border-color:var(--tinta)}
.buscador input::placeholder{color:var(--apoyo)}

/* --- cifras --- */
.cifras{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--linea-suave);border:1px solid var(--linea-suave);
  margin:0 0 56px;
}
.cifras .cifra{background:var(--fondo);padding:24px 26px;transition:background .45s ease}
.cifra .n{display:block;font-size:26px;font-weight:300;line-height:1.1;letter-spacing:-.02em}
.cifra .t{
  display:block;margin-top:9px;font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--apoyo);
}

/* --- rejilla de secciones --- */
.b-titulo.sub{margin-top:46px}
.rejilla{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-left:1px solid var(--linea-suave);
}
.rejilla.chica{grid-template-columns:repeat(4,1fr);margin-top:8px;
  border-top:1px solid var(--linea-suave)}
.tarjeta{
  position:relative;display:block;text-align:left;background:var(--fondo);
  padding:28px 26px 46px;min-height:172px;transition:background .3s;
  border-right:1px solid var(--linea-suave);
  border-bottom:1px solid var(--linea-suave);
}
.tarjeta:hover{background:var(--placa)}
.tarjeta.mini{min-height:0;padding:22px 24px}
.t-num{
  display:block;font-size:10.5px;letter-spacing:.28em;color:var(--apoyo);margin-bottom:16px;
}
.t-nombre{display:block;font-size:17px;font-weight:500;letter-spacing:.01em;margin-bottom:10px}
.t-desc{display:block;font-size:13.5px;line-height:1.55;color:var(--apoyo)}
.t-fl{position:absolute;right:26px;bottom:24px;font-size:15px;color:var(--apoyo)}
.tarjeta:hover .t-fl{color:var(--tinta)}

.volver{
  font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--apoyo);margin-bottom:30px;transition:color .25s;
}
.volver:hover{color:var(--tinta)}

/* --- expedientes --- */
.ficha{border-top:1px solid var(--linea);padding:30px 0 34px}
.ficha-cab{display:flex;gap:40px;align-items:flex-start;margin-bottom:24px}
.ficha-cab > div:first-child{flex:1;min-width:0}
.clave{font-size:10.5px;letter-spacing:.24em;color:var(--apoyo);display:block;margin-bottom:9px}
.ficha h3{font-size:19px;font-weight:400;line-height:1.3;margin-bottom:8px}
.avance{flex-shrink:0;width:132px;text-align:right}
.avance .n{font-size:31px;font-weight:300;line-height:1;letter-spacing:-.02em}
.avance .pc{font-size:16px}
.avance .t{display:block;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--apoyo);margin-top:7px}
.avance .barra{display:block;height:2px;background:var(--linea);margin-top:12px}
.avance .barra span{display:block;height:100%;background:var(--tinta)}
.medidas{list-style:none;border-top:1px solid var(--linea-suave)}
.medidas li{
  display:flex;align-items:center;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--linea-suave);font-size:14.5px;
}
.m-clave{font-size:11px;letter-spacing:.16em;color:var(--apoyo);width:34px;flex-shrink:0}
.m-nombre{flex:1;min-width:0}
.nota.alta{margin:0 0 26px;padding:14px 18px;border-left:1px solid var(--linea);
  background:var(--placa);font-size:13px;color:var(--apoyo)}
.nota.alta em{font-style:normal;color:var(--tinta)}

/* --- archivero --- */
.conexion{
  display:flex;align-items:flex-start;gap:18px;
  border:1px solid var(--linea);padding:22px 24px;margin-bottom:22px;background:var(--placa);
}
.conexion > div{flex:1;min-width:0}
.conexion .punto{margin-top:6px}
.c-titulo{display:block;font-size:15px;margin-bottom:6px}
.conexion p{font-size:13.5px;color:var(--apoyo);line-height:1.55}
.conexion strong{font-weight:400;color:var(--tinta)}
.vis{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--linea);border-radius:2px;padding:4px 9px 3px;color:var(--apoyo);
}
.vis.cliente{border-color:var(--tinta);color:var(--tinta)}

/* --- finance --- */
.fila.mov{gap:18px}
.m-fecha{width:58px;flex-shrink:0;font-size:12.5px;color:var(--apoyo);letter-spacing:.04em}
.monto{font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums}
.monto.gasto{color:var(--apoyo)}

.btn{
  display:inline-block;margin-top:8px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  padding:13px 24px 12px;border-radius:2px;border:1px solid var(--tinta);
  background:var(--tinta);color:var(--fondo);transition:opacity .3s;flex-shrink:0;
}
.btn:hover{opacity:.82}
.btn.sec{background:none;color:var(--tinta);margin-top:26px}
.btn.sec:hover{opacity:1;background:var(--placa)}

@media(max-width:1080px){
  .cifras{grid-template-columns:repeat(2,1fr)}
  .rejilla{grid-template-columns:repeat(2,1fr)}
  .rejilla.chica{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .cifras{grid-template-columns:1fr}
  .rejilla,.rejilla.chica{grid-template-columns:1fr}
  .ficha-cab{flex-direction:column;gap:20px}
  .avance{width:100%;text-align:left}
}

/* ============================================================
   HERRAMIENTAS: GRAFICA, CHECKLIST EDITABLE Y HOJA
   ============================================================ */

/* --- dona de avance ---
   Monocroma: se distingue por valor, no por matiz. Funciona impresa en
   blanco y negro y para quien no distingue colores. */
.dona{position:relative;width:140px;height:140px;flex-shrink:0}
.dona svg{width:140px;height:140px}
.dona circle{fill:none;stroke-width:11}
.dona .pista{stroke:var(--linea-suave)}
.dona .seg.val{stroke:var(--tinta)}
.dona .seg.par{stroke:var(--apoyo)}
.dona .seg.pen{stroke:var(--linea)}
.dona-centro{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;pointer-events:none;
}
.dona-centro .n{font-size:29px;font-weight:300;line-height:1;letter-spacing:-.02em}
.dona-centro .pc{font-size:15px}
.dona-centro .t{
  font-size:9px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--apoyo);margin-top:6px;
}
.leyenda{list-style:none;flex-shrink:0;width:150px;display:flex;flex-direction:column;gap:11px}
.leyenda li{display:flex;align-items:center;gap:11px;font-size:12.5px;color:var(--apoyo)}
.leyenda b{font-weight:400;color:var(--tinta);margin-left:auto;font-variant-numeric:tabular-nums}
.ll{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.ll.val{background:var(--tinta)}
.ll.par{background:var(--apoyo)}
.ll.pen{background:var(--linea)}
.ficha-id{flex:1;min-width:0}

/* --- medidas editables --- */
.medidas li{gap:13px}
.medidas li.no-cuenta .m-nombre{color:var(--apoyo)}
.ciclo{padding:4px;margin:-4px;line-height:0;flex-shrink:0}
.ciclo:hover .punto{transform:scale(1.25)}
.ciclo .punto{transition:transform .2s}
.m-nombre{outline:none;border-bottom:1px solid transparent;padding-bottom:1px}
.m-nombre:hover{border-bottom-color:var(--linea-suave)}
.m-nombre:focus{border-bottom-color:var(--tinta)}
.chip{
  flex-shrink:0;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--linea);border-radius:2px;padding:4px 9px 3px;
  color:var(--apoyo);transition:border-color .2s,color .2s;white-space:nowrap;
}
.chip.on{border-color:var(--tinta);color:var(--tinta)}
.chip:hover{border-color:var(--tinta)}
.quitar{
  flex-shrink:0;font-size:17px;line-height:1;color:var(--piedra);
  padding:2px 5px;transition:color .2s;
}
.quitar:hover{color:var(--tinta)}

.agregar{display:flex;gap:10px;align-items:center;margin-top:16px}
.agregar input{
  flex:1;font-family:inherit;font-size:14px;color:var(--tinta);background:none;
  border:none;border-bottom:1px solid var(--linea);padding:9px 2px;transition:border-color .25s;
}
.agregar input:focus{outline:none;border-bottom-color:var(--tinta)}
.agregar input::placeholder{color:var(--apoyo)}
.mas{
  width:30px;height:30px;flex-shrink:0;border:1px solid var(--linea);border-radius:2px;
  font-size:17px;line-height:1;color:var(--apoyo);transition:border-color .2s,color .2s;
}
.mas:hover{border-color:var(--tinta);color:var(--tinta)}

/* --- hoja de calculo --- */
.hoja-envoltura{overflow-x:auto;border:1px solid var(--linea-suave);margin-top:6px}
.hoja{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.hoja th{
  text-align:left;font-weight:400;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--apoyo);padding:13px 14px;
  border-bottom:1px solid var(--linea);white-space:nowrap;
}
.hoja td{border-bottom:1px solid var(--linea-suave);padding:0 6px}
.hoja tbody tr:hover{background:var(--placa)}
.hoja .num{text-align:right}
.hoja .mid{text-align:center;white-space:nowrap}
.hoja td.mid,.hoja td.num{padding:0 14px}
.hoja input,.hoja select{
  width:100%;font-family:inherit;font-size:14px;color:var(--tinta);
  background:none;border:1px solid transparent;border-radius:2px;
  padding:11px 8px;transition:border-color .2s,background .2s;
}
.hoja input:hover,.hoja select:hover{border-color:var(--linea-suave)}
.hoja input:focus,.hoja select:focus{outline:none;border-color:var(--tinta);background:var(--fondo)}
.hoja .c-monto{text-align:right;font-variant-numeric:tabular-nums}
.hoja .c-fecha{width:88px}
.hoja select{cursor:pointer}
.hoja tfoot td{
  padding:14px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--apoyo);border-bottom:none;border-top:1px solid var(--linea);
}
.hoja tfoot .total{
  font-size:16px;letter-spacing:0;text-transform:none;color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.vacio-celda{padding:26px 14px;color:var(--apoyo);font-size:14px}
.hoja-pie{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.hoja-pie .btn.sec{margin-top:18px}

@media(max-width:760px){
  .ficha-cab{align-items:flex-start}
  .leyenda{width:100%}
}

/* ============================================================
   PANEL · SEGUNDA VUELTA
   El problema no era falta de adorno: era que todo pesaba igual.
   Se arregla con escala y con superficie, no con color nuevo.
   ============================================================ */

/* --- puerta de entrada al cliente, junto al selector --- */
.b-abrir{
  display:inline-block;text-decoration:none;white-space:nowrap;
  font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  border:1px solid var(--tinta);border-radius:2px;
  padding:9px 15px 8px;color:var(--fondo);background:var(--tinta);
  transition:opacity .25s;
}
.b-abrir:hover{opacity:.82}

/* --- franja de cifras del panel --- */
.resumen{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--linea-suave);margin:0 0 54px;max-width:1180px;
}
.resumen .cifra{
  padding:22px 26px;border-right:1px solid var(--linea-suave);
}
.resumen .cifra:last-child{border-right:none}
.resumen .cifra .n{font-size:32px;font-weight:300;line-height:1;letter-spacing:-.03em}
.resumen .cifra.alerta .n{position:relative;padding-left:20px}
.resumen .cifra.alerta .n::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:11px;height:11px;border-radius:50%;border:1.5px solid var(--tinta);
}
.resumen .cifra .t{
  display:block;margin-top:10px;font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--apoyo);
}

/* --- los bloques pasan a ser superficies, no texto suelto --- */
main{max-width:1420px}
.tablero{gap:44px}
.bloque{
  background:var(--placa);border:1px solid var(--linea-suave);
  padding:26px 28px 22px;transition:background .45s ease;
}
.b-titulo{margin-bottom:2px}
.b-titulo h2{font-size:11px;letter-spacing:.3em}
.bloque .fila:last-child{border-bottom:none}

/* --- el dato principal crece: es lo que se lee primero --- */
.dias{width:82px}
.dias .n{font-size:33px}
.dias.vencido .n{font-size:14px}
.f-asunto{font-size:16px}
.contador{width:82px;font-size:23px}

/* --- cartera con avance y puerta visible --- */
.mini-dona{
  position:relative;width:30px;height:30px;flex-shrink:0;display:block;
}
.mini-dona svg{width:30px;height:30px}
.mini-dona circle{fill:none;stroke-width:2.5}
.mini-dona .pista{stroke:var(--linea-suave)}
.mini-dona .seg{stroke:var(--tinta)}
.mini-dona b{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9.5px;font-weight:400;color:var(--apoyo);
}
.mini-dona.vacia{border:1px dashed var(--linea);border-radius:50%}
.lista-cartera .c-nombre{font-size:16px}
.c-derecha{
  margin-left:auto;flex-shrink:0;display:flex;flex-direction:column;
  align-items:flex-end;gap:7px;
}
.c-derecha .estado{margin-left:0}
.c-derecha .estado.alerta{color:var(--tinta)}
.entrar{
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--apoyo);white-space:nowrap;transition:color .2s;
}
.lista-cartera .fila:hover .entrar{color:var(--tinta)}
.lista-cartera .fila:hover{opacity:1;background:var(--fondo)}
.lista-cartera .fila{padding-left:14px;padding-right:14px;margin:0 -14px;width:calc(100% + 28px)}

@media(max-width:1080px){
  .resumen{grid-template-columns:repeat(2,1fr)}
  .resumen .cifra:nth-child(2n){border-right:none}
  .resumen .cifra:nth-child(-n+2){border-bottom:1px solid var(--linea-suave)}
}
@media(max-width:760px){
  .resumen{grid-template-columns:1fr}
  .resumen .cifra{border-right:none;border-bottom:1px solid var(--linea-suave)}
  .b-abrir{display:none}
}

/* ============================================================
   HOJA DE CALCULO EN CAPA
   ============================================================ */
body.sin-scroll{overflow:hidden}
.capa{
  position:fixed;inset:0;z-index:90;background:var(--fondo);
  display:flex;align-items:stretch;justify-content:center;padding:26px;
}
.capa-caja{
  width:100%;max-width:1320px;display:flex;flex-direction:column;
  border:1px solid var(--linea);background:var(--placa);overflow:hidden;
}
.capa-cab{
  display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding:24px 26px 20px;border-bottom:1px solid var(--linea);
}
.capa-cab h2{font-size:20px;font-weight:400;letter-spacing:-.005em;margin-top:8px}
.capa-acciones{margin-left:auto;display:flex;gap:10px;align-items:center}
.capa-acciones .btn{margin-top:0}
.capa-acciones .btn.sec{margin-top:0}
.capa-ayuda{
  padding:13px 26px;font-size:12.5px;color:var(--apoyo);
  border-bottom:1px solid var(--linea-suave);
}
.capa-ayuda strong{font-weight:400;color:var(--tinta)}

.rejilla-envoltura{flex:1;overflow:auto;min-height:0}
.rejilla-hoja{border-collapse:collapse;width:100%;font-size:13.5px;table-layout:fixed}
/* Concepto se lleva el espacio sobrante: es la columna que se lee. */
.rejilla-hoja th:nth-child(3){width:auto}
.rejilla-hoja tr.hueca .ren{color:var(--piedra)}
.rejilla-hoja tr.hueca input::placeholder{color:transparent}
.rejilla-hoja th{
  position:sticky;top:0;z-index:2;background:var(--fondo);
  text-align:left;font-weight:400;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--apoyo);
  padding:9px 12px;border:1px solid var(--linea-suave);white-space:nowrap;
}
.rejilla-hoja th .letra{
  display:block;font-size:9px;letter-spacing:.2em;color:var(--piedra);margin-bottom:3px;
}
.rejilla-hoja td{border:1px solid var(--linea-suave);padding:0}
.rejilla-hoja .ren,.rejilla-hoja .esquina{
  width:38px;min-width:38px;text-align:center;background:var(--fondo);
  font-size:10.5px;color:var(--apoyo);padding:0 4px;
}
.rejilla-hoja input{
  width:100%;font-family:inherit;font-size:13.5px;color:var(--tinta);
  background:none;border:2px solid transparent;padding:8px 10px;
}
.rejilla-hoja input.num{text-align:right;font-variant-numeric:tabular-nums}
.rejilla-hoja input:focus{
  outline:none;border-color:var(--tinta);background:var(--fondo);position:relative;z-index:1;
}
.rejilla-hoja tbody tr:hover td{background:var(--fondo)}
.rejilla-hoja tfoot td{
  position:sticky;bottom:0;background:var(--fondo);
  padding:13px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--apoyo);
}
.rejilla-hoja tfoot .total{
  font-size:16px;letter-spacing:0;text-transform:none;color:var(--tinta);
  text-align:right;font-variant-numeric:tabular-nums;
}

@media(max-width:760px){
  .capa{padding:0}
  .capa-cab{padding:18px 16px 14px}
  .capa-acciones{width:100%;margin-left:0}
}

/* ============================================================
   PROPORCIONES DEL SITIO
   El tablero se sentia de otra casa. La causa no era el detalle:
   la portada CENTRA el contenido en 1280 con 6vw de aire, usa
   titulares de hasta 50px y apoya todo en el monograma grande.
   Aqui se recuperan esas mismas medidas.
   ============================================================ */

.barra{padding:0 4vw;height:74px}
main{max-width:1280px;margin:0 auto;padding:84px 6vw 110px}

/* --- apertura con el monograma, como el bloque de portada --- */
.apertura{max-width:900px;margin-bottom:78px}
.apertura.conmarca{
  display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:5vw;
  max-width:none;margin-bottom:88px;
}
.apertura.conmarca > div:first-child{min-width:0}
h1{
  font-weight:400;font-size:clamp(30px,4.4vw,50px);line-height:1.18;
  letter-spacing:.002em;
}
.eyebrow{font-size:11px;letter-spacing:.32em;margin-bottom:24px}
.monofig{display:flex;justify-content:center}
.mono-grande{
  width:min(26vw,300px);height:auto;overflow:visible;
  stroke:var(--tinta);fill:none;
}
.mono-grande .m-arco{stroke:var(--apoyo)}

/* --- franja de cifras: sin caja, solo filetes. Menos ruido, mas aire --- */
.resumen{
  border:none;border-top:1px solid var(--linea);border-bottom:1px solid var(--linea);
  max-width:none;margin-bottom:78px;
}
.resumen .cifra{padding:30px 34px 28px}
.resumen .cifra:first-child{padding-left:0}
.resumen .cifra .n{font-size:40px}
.resumen .cifra .t{margin-top:14px;font-size:10px;letter-spacing:.28em}

/* --- bloques con el aire de una seccion del sitio --- */
.tablero{gap:64px}
.columna{gap:70px}
.bloque{
  background:none;border:none;border-top:1px solid var(--linea);padding:0;
}
.b-titulo{
  border-bottom:none;padding:22px 0 6px;margin-bottom:0;
}
.b-titulo h2{font-size:11px;letter-spacing:.32em}

/* --- las filas respiran y el texto sube de tamaño --- */
.fila{padding:22px 0;gap:24px}
.f-asunto{font-size:16.5px;line-height:1.45;margin-bottom:5px}
.f-pie{font-size:13px}
.lista-cartera .c-nombre{font-size:16.5px}
.c-pie{font-size:12.5px;margin-top:4px}
.dias .n{font-size:36px}
.contador{font-size:25px}
.pendientes li{font-size:13.5px}
.lista-cartera .fila{padding-left:0;padding-right:0;margin:0;width:100%}
.lista-cartera .fila:hover{background:none;opacity:.62}
.nota{margin-top:28px}

/* --- vista de cliente con la misma vara --- */
.miga{margin-bottom:44px;font-size:12.5px}
.apertura.chica{display:block;margin-bottom:46px}
.buscador{margin-top:34px;max-width:560px}
.buscador input{font-size:16px;padding:16px 20px}
.cifras{margin-bottom:78px}
.cifra .n{font-size:30px}
.rejilla .tarjeta{padding:32px 30px 52px;min-height:196px}
.t-nombre{font-size:18px}
.t-desc{font-size:14px;line-height:1.6}
.ficha h3{font-size:21px}
.ficha{padding:36px 0 40px}

@media(max-width:1080px){
  .apertura.conmarca{grid-template-columns:1fr;gap:38px}
  .monofig{justify-content:flex-start}
  .mono-grande{width:190px}
  .resumen .cifra:first-child{padding-left:34px}
}
@media(max-width:760px){
  main{padding:56px 6vw 80px}
  .barra{padding:0 6vw;height:66px}
  .resumen .cifra{padding:22px 0}
  .resumen .cifra:first-child{padding-left:0}
}

/* ============================================================
   PANTALLA DE ACCESO
   ============================================================ */
.pantalla-acceso{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px 6vw}
.acceso{width:100%;max-width:420px;text-align:center}
.a-marca{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:44px}
.mono-acceso{width:74px;height:auto;overflow:visible;stroke:var(--tinta);fill:none}
.mono-acceso .m-arco{stroke:var(--apoyo)}
.a-word{font-size:14px;letter-spacing:.42em;text-transform:uppercase;padding-left:.42em}
.acceso h1{font-size:26px;font-weight:400;line-height:1.25;margin-bottom:12px}
.a-sub{font-size:14.5px;color:var(--apoyo);line-height:1.6;margin-bottom:38px}

.campo{display:block;text-align:left;margin-bottom:26px}
.campo span{
  display:block;font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--apoyo);margin-bottom:12px;
}
.campo input{
  width:100%;font-family:inherit;font-size:16px;color:var(--tinta);
  background:none;border:none;border-bottom:1px solid var(--linea);
  padding:10px 2px;transition:border-color .25s;
}
.campo input:focus{outline:none;border-bottom-color:var(--tinta)}
.campo input::placeholder{color:var(--piedra)}

.btn.ancho{display:block;width:100%;margin-top:34px;padding:16px 24px 15px}
.btn:disabled{opacity:.5;cursor:default}

.a-mensaje{
  font-size:13.5px;line-height:1.55;text-align:left;
  padding:13px 16px;border-left:1px solid var(--linea);background:var(--placa);
  color:var(--apoyo);margin-top:8px;
}
.a-mensaje.malo{border-left-color:var(--tinta);color:var(--tinta)}
.a-mensaje.bueno{border-left-color:var(--tinta)}

.a-cambio{
  margin-top:32px;font-size:13.5px;color:var(--apoyo);
  display:flex;flex-direction:column;gap:8px;align-items:center;
}
.enlace-sub{
  font-size:13.5px;color:var(--tinta);border-bottom:1px solid var(--linea);
  padding-bottom:1px;transition:border-color .25s;
}
.enlace-sub:hover{border-bottom-color:var(--tinta)}
.a-nota{
  margin-top:30px;padding-top:24px;border-top:1px solid var(--linea-suave);
  font-size:12.5px;color:var(--apoyo);line-height:1.6;text-align:left;
}
.a-pie{margin-top:44px;font-size:11.5px;color:var(--piedra)}

/* Nada se ensena hasta saber quien esta dentro: evita el parpadeo de
   ver el tablero un instante antes de que la sesion lo rechace. */
body.cargando main,
body.cargando .barra{visibility:hidden}
.b-salir{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--apoyo);
  transition:color .2s;
}
.b-salir:hover{color:var(--tinta)}

/* ============================================================
   PANTALLA DE CARGA
   El monograma separandose y juntandose: es la animacion de la marca,
   no un girito generico. Sin colores nuevos y sin biblioteca.
   ============================================================ */
.capa-carga{
  position:fixed;inset:0;z-index:120;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;
  background:var(--fondo);transition:opacity .45s ease,visibility .45s ease;
}
.capa-carga.fuera{opacity:0;visibility:hidden}
.mono-carga{
  width:66px;height:auto;overflow:visible;fill:none;stroke:var(--tinta);
  --sep:0;
}
.mono-carga .m-arco{stroke:var(--apoyo);transform:translate(calc(var(--sep) * 1px), calc(var(--sep) * -1px))}
.mono-carga .m-d1  {transform:translate(calc(var(--sep) * -0.22px), calc(var(--sep) * 0.22px))}
.mono-carga .m-d2  {transform:translate(calc(var(--sep) * -0.85px), calc(var(--sep) * 0.85px))}
.mono-carga{animation:respira 1.9s ease-in-out infinite}
@keyframes respira{
  0%,100%{--sep:0}
  50%    {--sep:11}
}
@property --sep{syntax:'<number>';inherits:true;initial-value:0}
.carga-texto{
  font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--apoyo);
}

/* Estado de carga dentro de una seccion, sin tapar la pantalla entera */
.cargando-bloque{
  display:flex;align-items:center;gap:14px;padding:46px 0;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--apoyo);
}
.cargando-bloque::before{
  content:'';width:9px;height:9px;border-radius:50%;background:var(--apoyo);
  animation:latido 1.2s ease-in-out infinite;
}
@keyframes latido{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion: reduce){
  .mono-carga,.cargando-bloque::before{animation:none}
}

/* --- enrutador de fe publica --- */
.fila.ruta{align-items:flex-start}
.fila.ruta.ojo{background:var(--placa);padding-left:14px;padding-right:14px;margin:0 -14px;width:calc(100% + 28px)}
.fila.ruta .f-pie{display:block;line-height:1.55}

/* ============================================================
   CUARTA PALETA: SEÑALES
   Decision del 17 de agosto de 2026. Se abre una excepcion acotada al
   sistema cerrado de tres paletas, y va con reglas para que siga
   viendose Cautio y no un tablero cualquiera:

   1. El color SOLO comunica estado. Nunca decora, nunca da jerarquia.
   2. Siempre acompanado de una senal que no es color (la forma del
      punto, la palabra, el signo), para que funcione impreso en blanco
      y negro y para quien no distingue colores.
   3. Nunca como relleno de areas grandes. Solo texto, filetes y puntos.
   4. Una sola senal por region de pantalla.

   Los tonos son apagados y terrosos a proposito: conviven con el hueso
   sin gritar. Todos verificados arriba de 4.5 de contraste, que es el
   minimo legible, en sus dos modos.
   ============================================================ */
:root{
  --senal-alerta:#8C3A2B;   /* oxido    · vencido, sin respaldo, error   */
  --senal-atencion:#7F5C13; /* ambar    · por vencer, parcial, revisar   */
  --senal-bien:#4A6B4F;     /* oliva    · al corriente, validado, cobrado*/
}
body.oscuro{
  --senal-alerta:#D98A78;
  --senal-atencion:#D9A94A;
  --senal-bien:#8FB894;
}

/* --- semaforo: el punto conserva su forma Y gana color --- */
.punto.ok{background:var(--senal-bien)}
.punto.medio{background:var(--senal-atencion)}
.punto.alerta{background:none;border:1.5px solid var(--senal-alerta)}
.ll.val{background:var(--senal-bien)}
.ll.par{background:var(--senal-atencion)}
.ll.pen{background:var(--linea)}

/* --- la dona de avance --- */
.dona .seg.val{stroke:var(--senal-bien)}
.dona .seg.par{stroke:var(--senal-atencion)}
.mini-dona .seg{stroke:var(--senal-bien)}

/* --- estados con palabra, no solo con color --- */
.estado.alerta,.c-derecha .estado.alerta{color:var(--senal-alerta)}
.estado.medio{color:var(--senal-atencion)}
.estado.ok{color:var(--senal-bien)}
.resumen .cifra.alerta .n{color:var(--senal-alerta)}
.resumen .cifra.alerta .n::before{border-color:var(--senal-alerta)}
.cifra.alerta .n{color:var(--senal-alerta)}

/* --- dinero: el signo ya distingue, el color solo refuerza --- */
.monto.ingreso{color:var(--senal-bien)}
.monto.gasto{color:var(--senal-alerta)}
.hoja tfoot .total.negativo{color:var(--senal-alerta)}

/* --- respaldo documental: es un hecho, no una opinion --- */
.vis.cliente{border-color:var(--senal-bien);color:var(--senal-bien)}
.chip.on{border-color:var(--senal-bien);color:var(--senal-bien)}
.chip.falta{border-color:var(--senal-alerta);color:var(--senal-alerta)}

/* --- avisos que de verdad urgen --- */
.nota.alta.urge{border-left-color:var(--senal-alerta)}
.nota.alta.urge em{color:var(--senal-alerta)}

/* --- selector de periodo --- */
.periodos{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:30px}
.periodos .chip{font-size:10px;padding:7px 13px 6px;cursor:pointer}
.periodos-rango{
  margin-left:auto;font-size:11.5px;color:var(--apoyo);letter-spacing:.04em;
}

/* --- puente al EBITDA: se lee como un estado de resultados --- */
.puente{border-top:1px solid var(--linea);margin-bottom:30px;max-width:520px}
.p-linea{
  display:flex;align-items:baseline;gap:20px;padding:11px 0;
  border-bottom:1px solid var(--linea-suave);font-size:14.5px;
}
.p-linea b{margin-left:auto;font-weight:400;font-variant-numeric:tabular-nums}
.p-linea.total{
  border-bottom:1px solid var(--linea);border-top:1px solid var(--linea);
  font-size:16px;
}
.p-linea.total b{font-weight:500}
.p-linea.tenue{color:var(--apoyo);border-bottom:none}