/* El caparazón de un Studio. Sobrio a propósito: la identidad la pone el color
   del cliente (una variable) y su logo, no un rediseño. */
:root{
  --tinta:#111418; --tinta2:#3d444d; --tinta3:#6b7280; --borde:#e4e7ec;
  --fondo:#f7f8fa; --panel:#fff; --marca:#111418; --peligro:#c0392b;
  --radio:10px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
code,pre{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}
a{color:inherit}

.app{display:flex;min-height:100vh}
.sidebar{width:232px;flex:0 0 232px;background:var(--panel);border-right:1px solid var(--borde);
  display:flex;flex-direction:column;padding:18px 14px}
.brand{display:flex;gap:10px;align-items:center;margin-bottom:22px}
.brand-dot{width:26px;height:26px;border-radius:7px;flex:0 0 26px}
.brand-name{font-weight:600;font-size:15px;line-height:1.2}
/* ⛔ 21-sep: `.sub` era MAYÚSCULA espaciada y en línea: «NGVCS35300501», «200109BURBUJAS».
   Ahora es el renglón de apoyo debajo de un dato; solo la marca va en mayúsculas. */
.sub{display:block;color:var(--tinta3);font-size:12px;line-height:1.4;margin-top:1px}
.brand .sub{font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin:0}
.nav-section{display:flex;flex-direction:column;gap:2px;flex:1}
.nav-item{padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--tinta2);font-size:14px}
.nav-item:hover{background:var(--fondo)}
.nav-item.active{background:var(--tinta);color:#fff}
.sidebar-foot{border-top:1px solid var(--borde);padding-top:12px;display:flex;
  align-items:center;justify-content:space-between;gap:8px}
.user{display:flex;gap:8px;align-items:center;min-width:0}
.avatar{width:30px;height:30px;border-radius:50%;background:var(--tinta);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:600;flex:0 0 30px}
.user-name{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.user-role{display:block;font-size:11px;color:var(--tinta3)}

.main{flex:1;min-width:0;padding:22px 26px 40px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.topbar > div:first-child{flex:1 1 420px;min-width:0}
.topbar h1{font-size:21px;margin:0;font-weight:600;letter-spacing:-.01em}
.topbar-right{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

.panel{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:18px 20px;margin-bottom:16px}
.panel h2{font-size:15px;margin:0 0 8px;font-weight:600}
.panel.destacado{border-color:var(--tinta);border-width:2px}
.muted{color:var(--tinta3);font-size:13px;margin:4px 0}
.acciones{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}

.btn{display:inline-block;background:var(--tinta);color:#fff;border:1px solid var(--tinta);
  padding:8px 14px;border-radius:8px;font-size:13px;cursor:pointer;text-decoration:none}
.btn.ghost{background:transparent;color:var(--tinta)}
.link{background:none;border:0;color:var(--tinta2);cursor:pointer;font-size:13px;
  padding:0;text-decoration:underline}
.link.danger{color:var(--peligro)}

.fila{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;min-width:0}
label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--tinta3)}
label.check{flex-direction:row;align-items:center;gap:6px}
input,select{border:1px solid var(--borde);border-radius:8px;padding:7px 9px;
  font-size:14px;color:var(--tinta);background:#fff}

table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:500;color:var(--tinta3);font-size:12px;
  padding:6px 8px;border-bottom:1px solid var(--borde)}
td{padding:9px 8px;border-bottom:1px solid var(--borde)}
td.num{text-align:right;font-variant-numeric:tabular-nums}
tr.apagada{opacity:.5}
.tag{font-size:11px;border:1px solid var(--borde);border-radius:20px;padding:1px 7px;color:var(--tinta3)}

.token,.conf{background:#0f1115;color:#e8eaed;padding:12px 14px;border-radius:8px;
  overflow-x:auto;white-space:pre-wrap;word-break:break-all}

.sidebar-burger,.sidebar-scrim{display:none}
@media(max-width:900px){
  .sidebar{position:fixed;inset:0 auto 0 0;z-index:40;transform:translateX(-100%);transition:transform .18s}
  .app.nav-open .sidebar{transform:none}
  .app.nav-open .sidebar-scrim{display:block;position:fixed;inset:0;background:#0006;z-index:30}
  .sidebar-burger{display:block;position:fixed;top:12px;left:12px;z-index:50;
    background:var(--panel);border:1px solid var(--borde);border-radius:8px;
    width:36px;height:36px;font-size:16px;cursor:pointer}
  .main{padding-top:60px}
}

/* Acceso */
.login{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:var(--panel);border:1px solid var(--borde);border-radius:var(--radio);
  padding:30px 28px;width:100%;max-width:340px;display:flex;flex-direction:column;gap:14px}
.login-card h1{margin:0;font-size:22px;letter-spacing:-.02em}
.login-card .btn{margin-top:6px;text-align:center}
.error{color:var(--peligro);font-size:13px;margin:0}

/* --- Causación -----------------------------------------------------------
   Lo propio del oficio de Ruby Rose. Va al final y solo agrega: la plantilla
   de arriba no se toca, así el día que mejore se puede traer el cambio. */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--borde);border:1px solid var(--borde);
  border-radius:var(--radio);overflow:hidden;margin-bottom:16px}
.cifra{background:var(--panel);padding:14px 16px}
.cifra b{display:block;font-size:26px;line-height:1.1}
.cifra span{display:block;font-size:12px;color:var(--tinta3);margin-top:3px}

.dos-columnas{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
/* ⛔ `1fr` a secas NO es lo mismo que `minmax(0,1fr)`: el mínimo de una
   pista de grid es `auto`, así que la columna se estira hasta el ancho
   mínimo de su contenido y la PÁGINA se desborda en celular. */
@media(max-width:1000px){.dos-columnas{grid-template-columns:minmax(0,1fr)}}

/* El estado y la confianza se leen de un vistazo o no sirven de nada. */
.pill{display:inline-block;font-size:11px;padding:2px 9px;border-radius:20px;
  border:1px solid var(--borde);white-space:nowrap}
.e-espera{background:#fff5e5;border-color:#f0c274;color:#8a5600}
.e-bien{background:#eaf7f0;border-color:#8fd0ae;color:#1d6b46}
.e-apagado{color:var(--tinta3)}
.c-alta{background:#eaf7f0;border-color:#8fd0ae;color:#1d6b46}
.c-media{background:#fff5e5;border-color:#f0c274;color:#8a5600}
.c-baja,.c-ninguna{background:#fdecea;border-color:#e8a49c;color:#a33027}

/* Un aviso es una frase que alguien tiene que leer, no un adorno. */
.aviso{border:1px solid var(--borde);border-left-width:3px;border-radius:8px;
  padding:11px 14px;margin:12px 0;font-size:13.5px;background:var(--panel)}
.aviso.alerta{border-left-color:var(--peligro)}
.aviso.ojo{border-left-color:#d58500}
.aviso p{margin:4px 0 0}
.porque{background:#f4f6f8;border-radius:8px;padding:11px 14px;margin:6px 0 14px;font-size:14px}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}
.muted-inline{color:var(--tinta3);font-size:12px;margin-left:6px}
.peligro-txt{color:var(--peligro)}
.btn.peligro{background:var(--peligro);border-color:var(--peligro)}
label.ancho{width:100%;margin-top:10px}
label.ancho input{width:100%}
tr.total td{border-top:1px solid var(--tinta3);border-bottom:0}
table.ficha th{width:38%;font-weight:400}
td.corta,.corta{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
h3{font-size:14px;margin:18px 0 6px}
/* Las tablas no se pueden apretar más sin volverse ilegibles: en pantalla
   angosta se deslizan dentro de su caja y la página NO se mueve. */
.deslizable{overflow-x:auto;-webkit-overflow-scrolling:touch}
.deslizable table{min-width:520px}

/* Una fecha partida en dos renglones y un «Revisar →» en dos se leen mal y
   hacen la tabla más alta de lo necesario. */
td .nowrap,td.nowrap,a.nowrap{white-space:nowrap}
/* En celular las dos columnas de la ficha se apilan; las tablas anchas se
   deslizan dentro de su caja y la página NO se mueve. */
@media(max-width:640px){
  .cifra b{font-size:22px}
  .fila{gap:8px}
  .fila label{flex:1 1 140px}
  /* ⛔ Solo los lados y el pie: `padding` completo pisa el `padding-top:60px`
     de la plantilla, que es el hueco del botón de menú, y el botón se
     come el primer enlace de la pantalla. */
  .main{padding-left:14px;padding-right:14px;padding-bottom:40px}
}
@media(max-width:640px){
  .fila input,.fila select{width:100%;max-width:100%}
  label.ancho input{width:100%}
  .porque,.aviso{overflow-wrap:anywhere}
}

/* Las líneas de una propuesta: el 30,7% de las facturas se causa en varias. */
.lineas-propuestas{margin:6px 0 10px;padding-left:18px}
.lineas-propuestas li{margin:3px 0;line-height:1.5}
/* El acierto medido. Va discreto: acompaña al «por qué», no compite con él. */
.medido{margin:6px 0 0;font-size:12px;color:#5b6472;
        border-left:2px solid #d7dce3;padding-left:9px}

/* --- Cerebro y «Pruebas de causaciones» (21-sep-2026) ------------------- */
/* Las validaciones son una lista de chequeo: se leen de arriba abajo y el color
   dice si se puede seguir. Alto = no se causa. */
.chequeo{list-style:none;margin:6px 0 0;padding:0}
.chequeo li{border:1px solid var(--borde);border-left-width:4px;border-radius:8px;
  padding:9px 12px;margin:7px 0;font-size:13.5px;background:var(--panel)}
.chequeo li.ok{border-left-color:#2e9e6a}
.chequeo li.ojo{border-left-color:#d58500}
.chequeo li.alto{border-left-color:var(--peligro);background:#fdf3f2}
.chequeo li b{display:block}
.chequeo li span{color:var(--tinta3);font-size:12.5px}
.aviso.bien{border-left-color:#2e9e6a}
/* Tabla editable: los campos ocupan su celda, sin desbordar. */
.editable input,.editable select{width:100%;min-width:0;box-sizing:border-box;padding:6px 7px;font-size:13px}
.editable td{padding:5px 4px;vertical-align:top}
.editable td.valor input{text-align:right}
.editable .sub{text-transform:none;letter-spacing:0;font-size:11px;margin-top:2px;display:block}
.subir{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.subir input[type=file]{padding:10px;border-style:dashed;background:#fbfbfc}
/* El chat: la pregunta a la derecha, el cerebro a la izquierda. */
.chat{display:flex;flex-direction:column;gap:10px;margin:8px 0 16px}
.msg{max-width:80%;padding:10px 13px;border-radius:12px;font-size:14px;line-height:1.5;white-space:pre-wrap}
.msg.persona{align-self:flex-end;background:var(--tinta);color:#fff}
.msg.cerebro{align-self:flex-start;background:var(--panel);border:1px solid var(--borde)}
.msg details{margin-top:6px;font-size:12px;color:var(--tinta3)}
.chat-form{display:flex;gap:8px}
.chat-form input{flex:1}
.grid-num td.num,.num{text-align:right;font-variant-numeric:tabular-nums}
.lista-sug{font-size:12px;color:var(--tinta3)}
@media(max-width:640px){.msg{max-width:95%}}

/* El historial va en la columna angosta: letra más chica y sin cortar palabras a la mitad. */
table.historia td,table.historia th{font-size:12px;padding:6px 5px}
table.historia .sub{display:block}


/* =========================================================================
   Revisión de experiencia (21-sep). Lo escribe una persona de contabilidad:
   estados en palabras, un mensaje principal por pantalla, nada que se desborde.
   ========================================================================= */

/* Estados: un color por significado, en todas las pantallas. */
.s-revisar{background:#fff5e5;border-color:#f0c274;color:#8a5600}
.s-alerta{background:#fdecea;border-color:#e8a49c;color:#a33027}
.s-bien{background:#eaf7f0;border-color:#8fd0ae;color:#1d6b46}
.s-camino{background:#eaf1fd;border-color:#9dbbec;color:#1f4f99}
.s-apagado{background:#f2f3f5;border-color:#dcdfe4;color:#5b6472}
.pill.grande{font-size:13px;padding:4px 12px}
.pill.chico{font-size:10.5px;padding:1px 7px}
a.pill{text-decoration:none}

.volver{display:inline-block;margin-bottom:4px;text-decoration:none}
.volver:hover{text-decoration:underline}
.btn.chico{padding:5px 12px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.vacio{color:var(--tinta3);text-align:center;padding:26px 8px !important}
.ayuda{font-size:12.5px;color:var(--tinta3);margin:6px 0}
.panel.discreto{background:transparent;border-style:dashed}
.panel-cab{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.panel-cab h2{margin:0}
details > summary{cursor:pointer}

/* Filas que se abren con un clic */
tr.clic{cursor:pointer}
tr.clic:hover td{background:#fafbfc}
td.accion{text-align:right;white-space:nowrap}
b.nombre{font-weight:600}

/* Pestañas de la bandeja */
.pestanas{display:flex;gap:4px;border-bottom:1px solid var(--borde);margin:-4px 0 12px;overflow-x:auto}
.pestanas a{padding:8px 12px;text-decoration:none;color:var(--tinta3);font-size:14px;white-space:nowrap;
  border-bottom:2px solid transparent;margin-bottom:-1px}
.pestanas a.activa{color:var(--tinta);border-bottom-color:var(--tinta);font-weight:600}
.pestanas .cuenta{display:inline-block;min-width:20px;padding:0 6px;border-radius:10px;background:#eef0f3;
  font-size:12px;text-align:center;margin-left:4px;color:var(--tinta2);font-weight:500}
.buscar-tabla{width:100%;max-width:420px;margin:0 0 10px}

/* Cifras que se pueden tocar */
a.cifra{text-decoration:none;color:inherit;transition:background .12s}
a.cifra:hover{background:#fafbfc}
.cifra .pill{display:inline-block;margin-top:6px;white-space:normal}
.pestanas-cifras .cifra.activa{box-shadow:inset 0 -3px 0 var(--tinta)}
.tarjetas-hoy .cifra b{font-size:30px}

/* Subir una factura */
.subir-zona.ocupado{opacity:.7;pointer-events:none}
.soltar{display:flex;gap:12px;align-items:stretch;flex-wrap:wrap}
.soltar-caja{flex:1 1 320px;display:flex;flex-direction:row;align-items:center;gap:14px;cursor:pointer;
  border:1.5px dashed #c5cbd3;border-radius:10px;padding:16px 18px;background:#fbfbfc;color:var(--tinta2);
  font-size:14px;transition:border-color .12s,background .12s}
.soltar-caja:hover,.soltar-caja.encima{border-color:var(--tinta);background:#f4f6f8}
.soltar-caja.lleno{border-style:solid;border-color:#2e9e6a;background:#f3fbf7}
.soltar-caja input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.soltar-caja{position:relative}
.soltar-icono{color:var(--tinta3);flex:0 0 auto;display:flex}
.soltar-texto b{display:block;color:var(--tinta);font-size:15px;word-break:break-all}
.soltar-texto span{display:block;font-size:12.5px;color:var(--tinta3)}
.soltar .btn{align-self:center}
label.archivo input[type=file]{padding:8px;border-style:dashed;background:#fbfbfc}

/* El mensaje principal de una factura */
.estado-grande{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  border:1px solid;border-left-width:5px;border-radius:10px;padding:14px 18px;margin:0 0 16px;font-size:14.5px}
.estado-grande p{margin:4px 0 0;font-size:13.5px;opacity:.9}
.estado-grande ul{margin:6px 0 0;padding-left:18px}
.estado-grande > div{flex:1 1 360px;min-width:0}
.estado-grande form{flex:0 0 auto}

/* Verificaciones */
.chequeo{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px}
.chequeo li{display:flex;gap:10px;align-items:flex-start;margin:0}
.chequeo .marca{flex:0 0 22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;background:#2e9e6a;margin-top:1px}
.chequeo li.ojo .marca{background:#d58500}
.chequeo li.alto .marca{background:var(--peligro)}
.chequeo li > span:last-child{min-width:0}
.chequeo li b{font-weight:600}
.chequeo li span span{display:block}

/* La propuesta */
.bajo-tabla{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:8px 0 2px}
.cuadre{font-size:13px;padding:4px 10px;border-radius:8px}
.cuadre.ok{background:#eaf7f0;color:#1d6b46}
.cuadre.mal{background:#fdecea;color:#a33027}
.icono{background:none;border:1px solid transparent;border-radius:6px;color:var(--tinta3);cursor:pointer;
  width:30px;height:30px;font-size:14px}
.icono:hover{border-color:var(--borde);color:var(--peligro);background:#fdf3f2}
td.quitar{width:34px;text-align:center}
.editable .sub{font-size:11.5px}
details.agregar[open]{flex-basis:100%}
details.agregar .fila{margin-top:8px}
table.totales{max-width:440px;margin-top:14px}
table.totales th .sub{font-weight:400}

/* La barra de decisión: siempre a la vista mientras se revisa la propuesta. */
.barra-decision{position:sticky;bottom:0;z-index:5;margin:18px -20px -18px;padding:12px 20px;
  background:#fff;border-top:1px solid var(--borde);border-radius:0 0 var(--radio) var(--radio);
  display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;
  box-shadow:0 -6px 16px -12px #0003}
.barra-info{display:flex;flex-direction:column;gap:2px;font-size:14px;min-width:0}
.barra-freno{font-size:12.5px;color:var(--peligro)}
.barra-ok{font-size:12.5px;color:#1d6b46}
/* Todos los frenos, completos: el 29-sep solo se veía el primero, en minúsculas y cortado. */
.barra-frenos{flex-basis:100%;order:3;margin:0;padding:0 0 0 18px;font-size:12.5px;color:var(--peligro);
  max-height:30vh;overflow:auto}
.barra-frenos li{margin:2px 0}
.barra-cambios{font-size:12.5px;color:#8a5600}
.barra-botones{display:flex;gap:8px;flex-wrap:wrap}
.opciones-prueba{flex-basis:100%;font-size:12.5px;color:var(--tinta3)}
.opciones-prueba label.check{margin-top:6px;font-size:12.5px;align-items:flex-start}
.opciones-prueba input{margin-top:3px}

/* La factura y su historia */
.cufe{font-size:11.5px;color:var(--tinta3);margin:10px 0 0;overflow-wrap:anywhere}
.patron{border:1px solid var(--borde);border-radius:8px;padding:10px 12px;margin:8px 0}
.patron.actual{border-color:#8fd0ae;background:#fbfefc}
.patron-cab{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline}
.patron-cab .sub{display:inline;margin:0}
.patron-lineas{list-style:none;padding:0;margin:6px 0}
.patron-lineas li{margin:4px 0;font-size:13.5px}
.patron details{font-size:12.5px;color:var(--tinta3)}
.patron table.historia{margin-top:6px}
.cambios{list-style:none;padding:0;margin:0}
.cambios li{padding:7px 0;border-bottom:1px solid var(--borde);font-size:13.5px}

/* El cerebro */
.frescura{list-style:none;padding:0;margin:4px 0}
.frescura li{padding:8px 0;border-bottom:1px solid var(--borde)}
.frescura li b{display:block;font-weight:600;font-size:14px}
.frescura li span{font-size:13px;color:var(--tinta3)}
table.cargas{margin-top:10px}
table.cargas td{font-size:13px}
table.cargas .corta{max-width:220px}

/* Proveedores */
.buscador{flex-wrap:nowrap}
.buscador input{min-width:240px}
.rejilla-proveedores{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-top:8px}
.rejilla-proveedores a{display:block;text-decoration:none;border:1px solid var(--borde);border-radius:8px;padding:10px 12px}
.rejilla-proveedores a:hover{border-color:var(--tinta3);background:#fafbfc}
.rejilla-proveedores b{display:block;font-size:13.5px;font-weight:600}
.rejilla-proveedores span{font-size:12px;color:var(--tinta3)}

/* Preguntar */
.msg.cerebro{white-space:normal}
.msg.cerebro p{margin:0 0 8px}
.msg.cerebro p:last-child{margin-bottom:0}
.msg.cerebro ul,.msg.cerebro ol{margin:4px 0 8px;padding-left:20px}
.msg.cerebro table.md{font-size:13px;margin:6px 0 10px;min-width:0}
.msg.cerebro table.md th,.msg.cerebro table.md td{padding:5px 8px}
.msg.persona{white-space:pre-wrap}
.consultas pre{background:#f4f6f8;padding:8px 10px;border-radius:6px;white-space:pre-wrap;font-size:11.5px;margin:6px 0 2px}
.sugerencias{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.chip{border:1px solid var(--borde);background:var(--panel);border-radius:18px;padding:6px 12px;font-size:13px;
  cursor:pointer;color:var(--tinta2);text-align:left}
.chip:hover{border-color:var(--tinta3);color:var(--tinta)}
.chat-vacio{color:var(--tinta3)}

/* Menú */
.nav-grupo{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--tinta3);margin:16px 10px 4px}
.ambiente{font-size:11.5px;color:#8a5600;background:#fff5e5;border:1px solid #f0c274;border-radius:6px;
  padding:3px 8px;margin:-8px 0 14px;text-align:center}

/* Entrar */
.login-marca{display:flex;gap:12px;align-items:center}
.login-marca .brand-dot{width:34px;height:34px;flex:0 0 34px;border-radius:9px}
.login-marca p{margin:0}
.clave{display:flex;gap:8px;align-items:center}
.clave input{flex:1;min-width:0}
.login .pie{font-size:12px;text-align:center}

/* En celular las tablas de listas se vuelven tarjetas: nada se desliza ni se corta. */
@media(max-width:640px){
  .deslizable table.tarjetas{min-width:0}
  table.tarjetas thead{display:none}
  table.tarjetas,table.tarjetas tbody,table.tarjetas tr,table.tarjetas td{display:block;width:100%}
  table.tarjetas tr{border:1px solid var(--borde);border-radius:10px;padding:10px 12px;margin-bottom:10px;background:var(--panel)}
  table.tarjetas td{border:0;padding:3px 0;text-align:left}
  table.tarjetas td.num{text-align:left}
  table.tarjetas td[data-titulo]::before{content:attr(data-titulo);display:block;font-size:11px;color:var(--tinta3);
    text-transform:uppercase;letter-spacing:.05em}
  table.tarjetas td.accion,table.tarjetas td.quitar{text-align:right;width:100%}
  table.tarjetas td.vacio::before{content:none}
  .topbar h1{font-size:19px}
  .topbar-right{width:100%}
  .buscador{width:100%}
  .buscador input{min-width:0;flex:1}
  .barra-botones{width:100%}
  .barra-botones .btn{flex:1;text-align:center}
  .chequeo{grid-template-columns:minmax(0,1fr)}
  .soltar .btn{width:100%}
}

/* Ajustes tras la primera ronda de capturas (21-sep) */
.soltar-caja.chica{flex:1 1 240px;padding:9px 12px}
.soltar-caja.chica .soltar-texto b{font-size:13.5px}
table.compacta td,table.compacta th{padding:7px 5px;font-size:13.5px}
@media(max-width:640px){
  .opciones-prueba{display:none}
  .barra-decision{padding:10px 14px;gap:8px}
  .barra-info{flex-direction:row;flex-wrap:wrap;gap:2px 10px;font-size:13.5px}
  .barra-botones .btn{padding:9px 10px;font-size:13.5px}
}
.boton-enter{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================================
   Configuración y administración (21-sep). Sus plantillas venían de otro Studio y
   pedían variables y fuentes que aquí no existen: salían con serifa y sin forma.
   ========================================================================= */
:root{--border:var(--borde);--muted:var(--tinta3);--text:var(--tinta);--subtle:var(--tinta3);
  --magenta:#8a3d5f;--magenta-light:#f6edf1;--magenta-dark:#6d2f4b}
.main [style*="font-family:Montserrat"],.main [style*="font-family:Roboto"]{font-family:inherit !important}
.content{min-width:0}
.hero{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hero h1{font-size:21px;margin:0;font-weight:600;letter-spacing:-.01em}
.greeting{color:var(--tinta3);font-size:13.5px;margin-top:4px}
.topbar-left:empty{display:none}

.pill.rol{background:color-mix(in srgb,var(--c) 10%,#fff);border-color:color-mix(in srgb,var(--c) 35%,#fff);color:var(--c)}
.clave-nueva code{font-size:18px;font-weight:700;letter-spacing:.04em;background:#fff;border:1px solid #8fd0ae;
  border-radius:8px;padding:6px 14px;color:var(--tinta)}
.clave-caja{display:flex;gap:10px;align-items:center;margin-top:10px;flex-wrap:wrap}

.formulario{display:flex;flex-direction:column;gap:16px;max-width:560px}
.formulario label{font-size:13px;color:var(--tinta2);font-weight:500}
.formulario input[type=text],.formulario input[type=email],.formulario input:not([type]){width:100%;font-size:14px;padding:9px 11px}
.formulario .ayuda{font-weight:400;margin:2px 0 0}
fieldset{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
legend{font-size:13px;color:var(--tinta2);font-weight:500;margin-bottom:6px;padding:0}
.opcion{flex-direction:row !important;align-items:flex-start;gap:10px;border:1px solid var(--borde);border-radius:8px;
  padding:10px 12px;cursor:pointer;font-weight:400 !important}
.opcion:has(input:checked){border-color:var(--tinta);background:#fafbfc}
.opcion input{margin-top:3px}
.opcion b{color:var(--tinta);font-size:14px}

.rejilla-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.rol-tarjeta{border-top:4px solid var(--c)}
.rol-tarjeta h2{color:var(--c)}
.permisos{list-style:none;padding:0;margin:10px 0 0}
.permisos li{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--borde);font-size:14px}
.permisos li:last-child{border-bottom:0}
.permisos .marca{flex:0 0 20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:700;
  background:#2e9e6a;color:#fff;margin-top:1px}
.permisos li.no{color:var(--tinta3)}
.permisos li.no .marca{background:#eef0f3;color:var(--tinta3)}
.permisos li.no b{font-weight:400}
/* ¿El robot del PC está mirando la cola? (cerebro/robot.py) */
.robot-latido{margin:8px 0 0;font-size:13px;color:var(--muted,#555);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.robot-latido .pill{flex:none}

/* Fecha contable y vencimiento (30-sep): dos campos lado a lado, con la regla debajo. */
.fechas-causacion{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 20px;margin:4px 0 12px}
.fechas-causacion label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.fechas-causacion .muted{font-size:12px;line-height:1.4}
.lista-simple{margin:6px 0 0;padding-left:18px;font-size:14px}
.lista-simple li{margin:4px 0}
.acciones-mes{display:flex;gap:6px;flex-wrap:wrap}
.filtro-de{font-size:13px;margin:8px 0 4px;color:var(--tinta3)}
.filtro-de a{color:inherit;text-decoration:none}
.filtro-de a.activa{color:var(--tinta);font-weight:600;text-decoration:underline}
.jev-opinion{font-size:13px;margin:6px 0 10px;line-height:1.5}
.jev-opinion .pill{margin-right:6px}
.jev-opinion .muted{display:block;font-size:12px}

/* 30-sep, reunión del sprint 7: encabezado en SIESA, arreglos de un clic y el asiento. */
.encabezado-siesa{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px 20px;margin:4px 0 12px}
.dato-fijo{display:flex;flex-direction:column;gap:3px;font-size:13px;background:#f7f8fa;border:1px solid var(--borde);
  border-radius:8px;padding:9px 12px}
.dato-fijo b{font-size:14.5px}
.dato-fijo .muted{font-size:12px;line-height:1.4}
.etq{font-size:12px;color:var(--tinta3);text-transform:uppercase;letter-spacing:.03em}
.etq-sub{font-size:11.5px;color:var(--tinta3);font-weight:400}
.nota-siesa textarea{width:100%;font:inherit;padding:9px 11px;border:1px solid var(--borde);border-radius:8px;resize:vertical;
  text-transform:uppercase}
.nota-siesa .muted{font-size:12px;display:block;margin-top:3px}
.obligatorio{font-size:10.5px;color:#a33027;background:#fdecea;border-radius:10px;padding:1px 7px;margin-left:4px;font-weight:500}
.arreglos{flex-basis:100%;order:4;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px}
.arreglos .btn{white-space:normal;text-align:left}
.patron-usar{margin:6px 0 2px}
details.asiento{margin:14px 0 6px;border:1px solid var(--borde);border-radius:8px;padding:10px 12px;background:#fcfcfd}
details.asiento > summary{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.asiento-tabla{margin-top:8px}
.asiento-tabla td{font-size:13px;vertical-align:top}
.asiento-tabla tr.total td{border-top:2px solid var(--borde)}
.por-traer{font-size:11.5px;color:#8a5600;background:#fff5e5;border-radius:10px;padding:1px 7px;white-space:nowrap}
.corregida{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;font-size:13px;margin:4px 0 8px}
.corregida form{margin:0}
/* El recorrido de una factura aprobada (30-sep). */
.recorrido{list-style:none;margin:10px 0 4px;padding:0 0 0 4px;font-size:13.5px}
.recorrido li{position:relative;padding:3px 0 7px 22px;color:var(--tinta3)}
.recorrido li::before{content:"";position:absolute;left:3px;top:8px;width:10px;height:10px;border-radius:50%;
  border:2px solid #b9c3d3;background:#fff}
.recorrido li:not(:last-child)::after{content:"";position:absolute;left:8px;top:21px;bottom:-4px;width:2px;background:#dfe5ee}
.recorrido li.hecho{color:var(--tinta2)}
.recorrido li.hecho::before{background:#2e9e6a;border-color:#2e9e6a}
.recorrido li.ahora{color:var(--tinta)}
.recorrido li.ahora::before{background:#3b73c8;border-color:#3b73c8;box-shadow:0 0 0 4px #3b73c833;animation:latir 1.6s infinite}
@keyframes latir{50%{box-shadow:0 0 0 7px #3b73c811}}
@media (prefers-reduced-motion:reduce){.recorrido li.ahora::before{animation:none}}
.motores{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:8px}
.motor{border:1px solid var(--borde);border-radius:8px;padding:10px 12px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:baseline;font-size:13.5px}
.motor.vivo{border-color:#8fd0ae;background:#fbfefc}
.motor .sub{flex-basis:100%;font-size:12px;color:var(--tinta3)}
/* Proveedor nuevo (30-sep) */
.papeles{list-style:none;padding:0;margin:8px 0 14px;display:grid;gap:10px}
.papeles li{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--borde);border-radius:8px;padding:10px 12px}
.papeles li.ok{border-color:#8fd0ae;background:#fbfefc}
.papeles .marca{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;
  background:#eef0f3;color:var(--tinta2)}
.papeles li.ok .marca{background:#2e9e6a;color:#fff}
.papeles li > div{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.papeles input[type=file]{font-size:13px;max-width:100%}
.ficha-tercero{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px 16px}
.ficha-tercero label{display:flex;flex-direction:column;gap:4px;font-size:13px}
.ficha-tercero .ancho{grid-column:1/-1}
.etq-campo{display:flex;flex-wrap:wrap;gap:4px 6px;align-items:center}
.etq-campo .pill,.etq-campo .obligatorio{flex:none;margin:0}
.papeles{grid-template-columns:minmax(0,1fr)}.papeles li{min-width:0}

/* 1-oct: la pantalla de SIESA que sube el robot, dentro de la ficha */
.foto-siesa{margin:12px 0 0;max-width:720px}
.foto-siesa img{display:block;width:100%;height:auto;border:1px solid var(--borde);border-radius:8px;background:#fff}
.foto-siesa figcaption{font-size:12.5px;color:var(--tinta3);margin-top:6px;line-height:1.45}

/* 1-oct: prueba de salida a producción */
.cifra-texto{font-size:20px}
.salida{border:1px solid;border-left-width:5px;border-radius:10px;padding:12px 16px;margin:14px 0 0;font-size:14px}
.salida p{margin:4px 0 0;font-size:13px;opacity:.92;line-height:1.5}
.indice-reqs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.indice-reqs .pill{font-size:12px;padding:3px 10px}
.requisito{scroll-margin-top:16px}
.req-cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.req-cab > div{flex:1 1 320px;min-width:0}
.req-cab h2{margin:2px 0 4px}
.cita{margin:0;font-size:13px;color:var(--tinta3);font-style:italic;line-height:1.45}
.pasos-prueba{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.paso-prueba{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start;
  border-top:1px solid var(--borde);padding-top:10px}
.paso-texto p{margin:0 0 4px;font-size:13.5px;line-height:1.5}
.paso-foto img{display:block;width:100%;height:auto;border:1px solid var(--borde);border-radius:6px;background:#fff}
@media (max-width:760px){.paso-prueba{grid-template-columns:minmax(0,1fr)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.asiento-siesa{margin-top:12px;background:var(--panel);color:var(--tinta)}
/* Buzones (2-oct-2026) */
form.en-linea{display:inline-flex;gap:6px;flex-wrap:wrap;margin:0}
#tabla-buzon b.corta{display:block;max-width:420px}
@media (max-width:720px){#tabla-buzon b.corta{max-width:100%;white-space:normal}}
/* Ficha del tercero para SIESA (2-oct-2026) */
dl.ficha-siesa{display:grid;grid-template-columns:auto 1fr;gap:6px 12px;margin:0}
dl.ficha-siesa dt{font-weight:600}dl.ficha-siesa dd{margin:0;overflow-wrap:anywhere}
@media (max-width:720px){dl.ficha-siesa{grid-template-columns:1fr}}

/* --- Márgenes y aire (2-oct-2026, revisión de la vista) ------------------------------------- */
/* Inicio: tarjetas sueltas con aire, de 4 en 4; sin el bloque gris que dejaba la última sola. */
.tarjetas-hoy{background:none;border:0;border-radius:0;overflow:visible;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-bottom:12px}
.tarjetas-hoy .cifra{border:1px solid var(--borde);border-radius:var(--radio);padding:16px 18px;
  display:flex;flex-direction:column;gap:6px}
/* La etiqueta de la tarjeta: un punto de color y el texto, en vez de una píldora que se partía en 3 líneas. */
.tarjetas-hoy .cifra .pill{background:none;border:0;padding:0 0 0 14px;margin:0;position:relative;
  font-size:13px;font-weight:500;line-height:1.35;white-space:normal;border-radius:0}
.tarjetas-hoy .cifra .pill::before{content:"";position:absolute;left:0;top:.42em;width:8px;height:8px;
  border-radius:50%;background:currentColor}
.tarjetas-hoy .cifra span:not(.pill){margin-top:0}
@media (max-width:720px){.tarjetas-hoy{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .tarjetas-hoy .cifra{padding:14px}}
.tarjetas-hoy + .robot-latido{margin:0 0 16px}
/* Ficha: la barra fija solo con lo que decide; las opciones de pruebas van debajo, fuera de ella. */
details.opciones-prueba{margin:14px 0 0;font-size:13px}
/* Columna angosta: las tablas compactas no se salen de la tarjeta. */
.dos-columnas > div:last-child table.compacta td,.dos-columnas > div:last-child table.compacta th{padding:7px 4px;font-size:13px}
.dos-columnas > div:last-child table.compacta td.num{white-space:nowrap}
.tarjetas-hoy .cifra .pill{color:var(--tinta2,#333)}
.tarjetas-hoy .cifra .pill.s-alerta::before{background:#d0473b}
.tarjetas-hoy .cifra .pill.s-revisar::before{background:#e0a030}
.tarjetas-hoy .cifra .pill.s-bien::before{background:#2f9e6a}
.tarjetas-hoy .cifra .pill.s-camino::before{background:#3b72d1}