/* Panel de conciliación de pautas · estilo propio, sin librerías externas */

:root{
  --tinta:#1c2430; --suave:#5b6875; --linea:#dde3ea;
  --fondo:#f2f5f8; --papel:#fff; --panel:#f6f8fa;
  --acento:#2c4a6e; --acento-claro:#e8eff7;
  --buena:#1e7a45; --aceptable:#8a6d1a; --floja:#a8541b; --critica:#a32020;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* El atributo hidden de HTML lo pisa cualquier regla que defina display (como
   .capa-espera{display:flex}). Sin esto, la capa de espera y el campo del tipo
   de cambio se ven siempre. */
[hidden]{display:none !important}
body{
  font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--tinta); background:var(--fondo); line-height:1.55; font-size:15px;
}
.contenedor{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- cabecera ---------- */
.cabecera{background:var(--acento);color:#fff;padding:22px 0 20px}
.cabecera-fila{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap}
.cabecera h1{margin:0;font-size:24px;letter-spacing:-.2px}
.lema{margin:3px 0 0;opacity:.82;font-size:14px}
.firma{font-size:13px;opacity:.9;font-weight:600}

/* ---------- menú ---------- */
.menu{background:var(--papel);border-bottom:1px solid var(--linea);position:sticky;top:0;z-index:20}
.menu-fila{display:flex;gap:4px;overflow-x:auto}
.pestana{
  border:0;background:none;font:inherit;font-size:14px;font-weight:600;
  color:var(--suave);padding:14px 16px;cursor:pointer;white-space:nowrap;
  border-bottom:3px solid transparent;
}
.pestana:hover:not(:disabled){color:var(--tinta)}
.pestana.activa{color:var(--acento);border-bottom-color:var(--acento)}
.pestana:disabled{opacity:.38;cursor:not-allowed}

/* ---------- paneles ---------- */
.panel{display:none;padding:26px 0 60px}
.panel.activa{display:block}
h2{font-size:17px;margin:30px 0 12px}
.ayuda{color:var(--suave);font-size:13.5px;margin:4px 0 12px}

/* ---------- subida ---------- */
.rejilla-subida{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:760px){.rejilla-subida{grid-template-columns:1fr}}
.caja-subida{
  background:var(--papel);border:2px dashed var(--linea);border-radius:12px;
  padding:20px;transition:border-color .15s,background .15s;
}
.caja-subida.encima{border-color:var(--acento);background:var(--acento-claro)}
.caja-subida.modo-ejemplo{border-style:solid;border-color:#c9b06a;background:#fdf8e9}
.etiqueta-ejemplo{
  background:#fdf8e9;border:1px solid #e3d4a2;color:#6b5410;border-radius:9px;
  padding:11px 16px;margin-bottom:16px;font-size:13.5px;
}
.etiqueta-ejemplo .enlace{color:#6b5410;margin-left:6px}
.caja-subida h2{margin:0 0 4px;font-size:16px}
.boton-archivo{
  display:inline-block;background:var(--acento);color:#fff;font-weight:600;
  font-size:13.5px;padding:9px 16px;border-radius:7px;cursor:pointer;
}
.boton-archivo:hover{background:#223c5b}
.soltar{color:var(--suave);font-size:12.5px;margin:9px 0 0}
.lista{list-style:none;margin:14px 0 0;padding:0;max-height:220px;overflow:auto}
.lista li{
  display:flex;justify-content:space-between;gap:10px;font-size:13px;
  padding:6px 9px;border-radius:6px;background:var(--panel);margin-bottom:5px;
}
.lista li span:last-child{color:var(--suave);white-space:nowrap}
.lista .vacia{background:none;color:var(--suave);font-style:italic;justify-content:flex-start}

/* ---------- acciones ---------- */
.fila-acciones{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:26px 0 0}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:12px;font-weight:600;color:var(--suave);text-transform:uppercase;letter-spacing:.4px}
.campo-corto{max-width:140px}
select,input[type=number],input[type=text]{
  font:inherit;font-size:14px;padding:9px 11px;border:1px solid var(--linea);
  border-radius:7px;background:var(--papel);color:var(--tinta);
}
select:focus,input:focus{outline:2px solid var(--acento-claro);border-color:var(--acento)}
.boton{
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--linea);background:var(--papel);color:var(--tinta);
  font:inherit;font-size:14px;font-weight:600;padding:10px 20px;border-radius:7px;
  cursor:pointer;text-decoration:none;line-height:1.2;
}
.boton:hover{background:var(--panel)}
.boton.principal{background:var(--acento);color:#fff;border-color:var(--acento)}
.boton.principal:hover{background:#223c5b}
.boton:disabled{opacity:.45;cursor:not-allowed}
.enlace{border:0;background:none;color:var(--acento);font:inherit;font-weight:600;
  text-decoration:underline;cursor:pointer;padding:0}
.pie-panel{color:var(--suave);font-size:13.5px;margin-top:22px}

/* ---------- avisos ---------- */
.aviso{
  margin-top:20px;padding:13px 16px;border-radius:8px;font-size:14px;
  background:#fdecec;border:1px solid #f3c9c9;color:#8f1d1d;
}
.aviso.ok{background:#e7f6ec;border-color:#bfe4cd;color:#155e33}
.aviso.info{background:#eaf1f9;border-color:#c9dcf0;color:#22456b}

/* ---------- resultado ---------- */
.veredicto{
  background:var(--papel);border:2px solid var(--linea);border-radius:12px;
  padding:22px 24px;margin-bottom:20px;
}
.veredicto .cifra{font-size:42px;font-weight:700;line-height:1}
.veredicto .etiqueta{font-size:18px;font-weight:600;margin:5px 0 6px}
.veredicto .detalle{color:var(--suave);font-size:14px}
.buena .cifra,.buena .etiqueta{color:var(--buena)}
.aceptable .cifra,.aceptable .etiqueta{color:var(--aceptable)}
.floja .cifra,.floja .etiqueta{color:var(--floja)}
.critica .cifra,.critica .etiqueta{color:var(--critica)}

.rejilla-datos{display:flex;flex-wrap:wrap;gap:12px}
.dato{
  flex:1 1 190px;background:var(--papel);border:1px solid var(--linea);
  border-radius:9px;padding:14px 16px;
}
.dato .k{font-size:11.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.4px}
.dato .v{font-size:22px;font-weight:600;margin-top:3px;font-variant-numeric:tabular-nums}

/* ---------- tablas ---------- */
.tabla-scroll{overflow-x:auto;background:var(--papel);border:1px solid var(--linea);
  border-radius:9px;margin-top:12px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:9px 12px;border-bottom:1px solid var(--linea);text-align:left;vertical-align:top}
th{background:var(--panel);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.4px;color:var(--suave);position:sticky;top:0}
tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mono{font-family:ui-monospace,Consolas,"Courier New",monospace;font-size:12px;word-break:break-all}

/* ---------- informe ---------- */
#marco-informe{width:100%;height:76vh;border:1px solid var(--linea);
  border-radius:9px;background:var(--papel)}

/* ---------- chat ---------- */
.chat{background:var(--papel);border:1px solid var(--linea);border-radius:12px;
  padding:18px;display:flex;flex-direction:column;gap:12px}
.chat-mensajes{min-height:300px;max-height:56vh;overflow-y:auto;display:flex;
  flex-direction:column;gap:12px;padding-right:4px}
.msj{max-width:88%;padding:11px 15px;border-radius:11px;font-size:14px;white-space:pre-wrap}
.msj.yo{align-self:flex-end;background:var(--acento);color:#fff;border-bottom-right-radius:3px}
.msj.respuesta{align-self:flex-start;background:var(--panel);border:1px solid var(--linea);
  border-bottom-left-radius:3px;white-space:normal}
.msj.respuesta strong{font-weight:700}
.msj.respuesta ul{margin:7px 0 0;padding-left:19px}
.msj.respuesta li{margin:2px 0}
.msj .tabla-scroll{margin-top:11px;max-height:320px;overflow:auto}
.chat-sugerencias{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid var(--linea);background:var(--panel);border-radius:99px;
  padding:6px 13px;font-size:12.5px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--suave)}
.chip:hover{background:var(--acento-claro);color:var(--acento);border-color:var(--acento)}
.chat-entrada{display:flex;gap:9px}
.chat-entrada input{flex:1}
.chat-nota{margin:0}

/* ---------- espera ---------- */
.capa-espera{position:fixed;inset:0;background:rgba(20,28,38,.55);display:flex;
  align-items:center;justify-content:center;z-index:100}
.caja-espera{background:var(--papel);border-radius:12px;padding:28px 40px;
  text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.22)}
.girando{width:34px;height:34px;margin:0 auto 14px;border:3px solid var(--linea);
  border-top-color:var(--acento);border-radius:50%;animation:girar .8s linear infinite}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.girando{animation-duration:2.4s}}