@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital@0;1&family=Roboto:wght@300;400;500;700&display=swap');

:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --line:#e3e3e0;
  --line-soft:#f0f0ee;
  --text:#1c1c1a;
  --muted:#6f6f6a;
  --faint:#9a9a94;
  --verde:#1b7f4b;
  --verde-bg:#eaf5ee;
  --amarillo:#9a6a00;
  --amarillo-bg:#fdf4e0;
  --rojo:#b3261e;
  --rojo-bg:#fcecea;
  --gris:#6f6f6a;
  --gris-bg:#f5f5f3;
  --r:4px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font-family:'Roboto',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-weight:400;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1180px;margin:0 auto;padding:0 20px 80px}

/* ---------- regresar ---------- */
.volver{
  display:inline-flex;align-items:center;gap:7px;
  margin:18px 0 0;padding:7px 13px 7px 10px;
  border:1px solid var(--line);border-radius:var(--r);
  background:#fff;color:var(--text);
  font-size:13px;letter-spacing:.01em;text-decoration:none;cursor:pointer;
  font-family:'Roboto',sans-serif;
}
.volver:hover{background:var(--line-soft)}
.volver span.flecha{font-size:15px;line-height:1}

/* ---------- encabezado ---------- */
.head{padding:22px 0 18px;border-bottom:1px solid var(--line);margin-bottom:26px}
h1{
  font-family:'Baskervville',Georgia,serif;
  font-weight:400;font-variant:small-caps;letter-spacing:.055em;
  font-size:34px;line-height:1.1;margin:0 0 6px;
}
.bajada{color:var(--muted);font-size:14px;max-width:72ch;margin:0}
.sello{
  display:inline-block;margin-top:10px;padding:4px 9px;
  border:1px solid var(--line);border-radius:var(--r);
  font-size:11.5px;color:var(--muted);letter-spacing:.03em;text-transform:uppercase;
}

/* ---------- controles ---------- */
.controles{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;margin:0 0 22px}
.campo{display:flex;flex-direction:column;gap:4px}
.campo label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.campo select,.campo input{
  font-family:'Roboto',sans-serif;font-size:14px;color:var(--text);
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:7px 10px;min-width:180px;
}
.campo select:focus,.campo input:focus{outline:2px solid #c9c9c3;outline-offset:-1px}

/* ---------- secciones ---------- */
h2{
  font-family:'Baskervville',Georgia,serif;font-weight:400;
  font-variant:small-caps;letter-spacing:.05em;
  font-size:23px;margin:34px 0 4px;
}
h3{font-family:'Roboto',sans-serif;font-weight:500;font-size:15px;margin:22px 0 6px}
.nota{color:var(--muted);font-size:13.5px;margin:0 0 14px;max-width:80ch}

/* ---------- tablas ---------- */
table{width:100%;border-collapse:collapse;font-size:13.5px;font-variant-numeric:tabular-nums}
thead th{
  text-align:right;font-weight:500;font-size:11px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--faint);
  padding:0 10px 7px;border-bottom:1px solid var(--line);white-space:nowrap;
}
thead th:first-child{text-align:left}
tbody td{padding:8px 10px;border-bottom:1px solid var(--line-soft);text-align:right;white-space:nowrap}
tbody td:first-child{text-align:left;white-space:normal}
tbody tr.subtotal{font-weight:500;background:#fafaf8}
tbody tr.subtotal td{border-bottom:1px solid var(--line)}
.num-neg{color:var(--rojo)}

/* ---------- semáforo ---------- */
.luz{
  display:inline-flex;align-items:center;gap:6px;
  padding:2px 8px;border-radius:999px;font-size:11.5px;
  letter-spacing:.04em;text-transform:uppercase;font-weight:500;white-space:nowrap;
}
.luz::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor}
.luz.verde{color:var(--verde);background:var(--verde-bg)}
.luz.amarillo{color:var(--amarillo);background:var(--amarillo-bg)}
.luz.rojo{color:var(--rojo);background:var(--rojo-bg)}
.luz.gris{color:var(--gris);background:var(--gris-bg)}

tr.fila-rojo td:first-child{box-shadow:inset 3px 0 0 var(--rojo)}
tr.fila-amarillo td:first-child{box-shadow:inset 3px 0 0 var(--amarillo)}
tr.fila-verde td:first-child{box-shadow:inset 3px 0 0 var(--verde)}

/* ---------- tarjetas ---------- */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:14px;margin:18px 0 10px}
.tarjeta{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff}
.tarjeta .et{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:5px}
.tarjeta .val{font-size:25px;font-weight:300;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tarjeta .sub{font-size:12.5px;color:var(--muted);margin-top:3px}

/* ---------- bloques de análisis ---------- */
.bloque{border:1px solid var(--line);border-radius:var(--r);padding:0;margin:0 0 16px;overflow:hidden}
.bloque .cab{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line-soft);background:#fafaf8}
.bloque .cab .tit{font-weight:500;font-size:14.5px;flex:1}
.bloque .cuerpo{padding:14px 16px}
.bloque.rojo{border-left:3px solid var(--rojo)}
.bloque.amarillo{border-left:3px solid var(--amarillo)}
.bloque.verde{border-left:3px solid var(--verde)}
.bloque.gris{border-left:3px solid var(--line)}
.bloque p{margin:0 0 10px;font-size:14px;max-width:88ch}
.bloque p:last-child{margin-bottom:0}
.comollega{background:var(--gris-bg);border-radius:var(--r);padding:10px 13px;margin:10px 0 0;font-size:13.5px}
.comollega .et{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--muted);white-space:normal}
ul.acciones{margin:8px 0 0;padding-left:19px;font-size:14px}
ul.acciones li{margin-bottom:6px}

/* ---------- glosario ---------- */
dl.glosario{display:grid;grid-template-columns:minmax(170px,230px) 1fr;gap:0;margin:10px 0 0;font-size:13.5px}
dl.glosario dt{font-weight:500;padding:8px 14px 8px 0;border-top:1px solid var(--line-soft)}
dl.glosario dd{margin:0;padding:8px 0;border-top:1px solid var(--line-soft);color:var(--muted)}

/* ---------- avisos ---------- */
.aviso{border:1px solid var(--line);border-left:3px solid var(--amarillo);border-radius:var(--r);
  padding:12px 15px;margin:0 0 16px;font-size:13.5px;background:#fffdf7}
.aviso.alto{border-left-color:var(--rojo);background:#fffaf9}
.aviso .et{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-bottom:4px}

/* ---------- botones ---------- */
.btn{
  font-family:'Roboto',sans-serif;font-size:13px;
  border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--text);
  padding:7px 13px;cursor:pointer;
}
.btn:hover{background:var(--line-soft)}
.btn.principal{background:var(--text);color:#fff;border-color:var(--text)}
.btn.principal:hover{opacity:.87}
.acciones-fila{display:flex;gap:7px;justify-content:flex-end}

.cargando{color:var(--faint);font-size:13.5px;padding:24px 0}
.vacio{color:var(--faint);font-size:13.5px;padding:18px 0}

@media (max-width:640px){
  .wrap{padding:0 16px 60px}
  h1{font-size:27px}
  dl.glosario{grid-template-columns:1fr}
  dl.glosario dd{padding-top:0;border-top:0}
  .tabla-scroll{overflow-x:auto}
}
.tabla-scroll{overflow-x:auto}