:root{
  --tinta:#16181c; --suave:#5d646e; --tenue:#878e99;
  --papel:#ffffff; --fondo:#f4f5f7; --hueco:#eceef1;
  --linea:#e0e3e8; --linea2:#c9ced7;
  --ambar:#b5730d; --ambar2:#8a5709; --ambar-suave:#fdf5e7;
  --ok:#1f6f4a; --ok-suave:#eaf5ef;
  --aviso:#a35a06; --aviso-suave:#fdf3e6;
  --riesgo:#a52620; --riesgo-suave:#fbecea;
  --info:#2a5578; --info-suave:#ecf2f8;
  --r:8px; --sombra:0 1px 2px rgba(20,22,26,.05),0 4px 16px rgba(20,22,26,.05);
}
@media (prefers-color-scheme:dark){:root{
  --tinta:#e6e8ec; --suave:#98a0ac; --tenue:#727a86;
  --papel:#1e2126; --fondo:#16181c; --hueco:#25292f;
  --linea:#2e333a; --linea2:#414852;
  --ambar:#e0a33f; --ambar2:#f0bb63; --ambar-suave:#2a2318;
  --ok:#5fbf8f; --ok-suave:#16251e;
  --aviso:#e0a458; --aviso-suave:#2a2318;
  --riesgo:#e8827a; --riesgo-suave:#2b1b19;
  --info:#7fb0d8; --info-suave:#161f28;
  --sombra:0 1px 2px rgba(0,0,0,.35);
}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
body{background:var(--fondo);color:var(--tinta);
  font:14px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--ambar);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--ambar);outline-offset:2px}

/* ---------------------------------------------------------------- cabecera */
header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;
  padding:0 16px;height:52px;background:var(--papel);border-bottom:1px solid var(--linea)}
.marca{display:flex;align-items:center;gap:8px;flex:none;color:var(--ambar)}
.marca b{letter-spacing:.15em;font-size:12.5px;color:var(--tinta);font-weight:700}
.marca small{display:block;font-size:9.5px;letter-spacing:.06em;color:var(--tenue);
  text-transform:uppercase;line-height:1}
#nav{display:flex;gap:1px;flex:1 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}
#nav::-webkit-scrollbar{display:none}
#nav button{background:none;border:0;padding:6px 9px;border-radius:6px;color:var(--suave);
  font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap;flex:0 0 auto}
#nav button:hover{background:var(--hueco);color:var(--tinta)}
#nav button.on{background:var(--tinta);color:var(--papel)}
.der{display:flex;align-items:center;gap:7px;flex:0 0 auto}
#sel-proyecto{max-width:210px;font-size:12.5px}
@media (max-width:900px){#sel-proyecto{max-width:120px}.marca small{display:none}}

/* -------------------------------------------------------------- controles */
select,input,textarea{font:inherit;font-size:13px;color:var(--tinta);background:var(--papel);
  border:1px solid var(--linea2);border-radius:6px;padding:6px 8px;max-width:100%}
textarea{width:100%;min-height:62px;resize:vertical;line-height:1.5}
input[type=checkbox]{width:15px;height:15px;accent-color:var(--ambar)}
input:disabled,select:disabled{background:var(--hueco);color:var(--tenue)}
.btn{background:var(--tinta);color:var(--papel);border:0;border-radius:6px;padding:7px 12px;
  font:inherit;font-size:12.5px;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--ambar)}
.btn.ghost{background:none;color:var(--suave);border:1px solid var(--linea2)}
.btn.ghost:hover{background:var(--hueco);color:var(--tinta)}
.btn.chico{padding:3px 8px;font-size:11.5px}
.btn.acento{background:var(--ambar);color:#fff}
.btn.acento:hover{background:var(--ambar2)}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ------------------------------------------------------------------ layout */
main{padding:20px 16px 90px;max-width:1280px;margin:0 auto}
h1{font-size:22px;margin:0 0 3px;letter-spacing:-.3px}
h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--ambar);
  margin:26px 0 10px;font-weight:650}
h3{font-size:14.5px;margin:16px 0 7px}
.sub{color:var(--suave);font-size:13px;margin:0 0 16px}
.tarjeta{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:16px;margin-bottom:12px;box-shadow:var(--sombra)}
.tarjeta.plana{box-shadow:none}
.rejilla{display:grid;gap:12px}
.r2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.fila{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.fila.fin{justify-content:flex-end}
.esp{flex:1}

/* ------------------------------------------------------------------ campos */
.campo{margin-bottom:11px}
.campo label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--suave);margin-bottom:3px;font-weight:600}
.campo input,.campo select,.campo textarea{width:100%}
.campo .ayuda{font-size:11.5px;color:var(--tenue);margin-top:3px;line-height:1.4}

/* ------------------------------------------------------------------ tablas */
.tabla-envuelta{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-size:10px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--suave);border-bottom:1px solid var(--linea2);padding:7px 8px;font-weight:650;
  white-space:nowrap}
td{padding:6px 8px;border-bottom:1px solid var(--linea);vertical-align:top}
tr:hover td{background:var(--hueco)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.mini{font-size:11.5px;color:var(--tenue)}

/* ------------------------------------------------------------- indicadores */
.dato{background:var(--papel);border:1px solid var(--linea);border-radius:var(--r);
  padding:12px 14px}
.dato .k{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--suave);
  font-weight:650;margin-bottom:4px}
.dato .v{font-size:20px;font-weight:600;letter-spacing:-.4px;
  font-variant-numeric:tabular-nums}
.dato .v.nc{font-size:12.5px;font-weight:400;color:var(--aviso);line-height:1.4}
.dato .n{font-size:11px;color:var(--tenue);margin-top:5px;line-height:1.4}
.dato.mal .v{color:var(--riesgo)}
.dato.bien .v{color:var(--ok)}

/* ---------------------------------------------------------------- etiquetas */
.et{display:inline-flex;align-items:center;gap:4px;font-size:11px;padding:2px 7px;
  border-radius:20px;border:1px solid;font-weight:600;white-space:nowrap;line-height:1.5}
.et.ok{color:var(--ok);border-color:var(--ok);background:var(--ok-suave)}
.et.aviso{color:var(--aviso);border-color:var(--aviso);background:var(--aviso-suave)}
.et.mal{color:var(--riesgo);border-color:var(--riesgo);background:var(--riesgo-suave)}
.et.info{color:var(--info);border-color:var(--info);background:var(--info-suave)}
.et.gris{color:var(--suave);border-color:var(--linea2);background:var(--hueco)}
.et.demo{color:#fff;background:var(--ambar);border-color:var(--ambar)}

.nota{border-left:3px solid var(--ambar);background:var(--ambar-suave);padding:9px 12px;
  border-radius:0 6px 6px 0;font-size:12.5px;color:var(--tinta);margin:10px 0;line-height:1.5}
.nota.mal{border-color:var(--riesgo);background:var(--riesgo-suave)}
.nota.ok{border-color:var(--ok);background:var(--ok-suave)}
.nota.info{border-color:var(--info);background:var(--info-suave)}
.nota b{font-weight:650}

.vacio{text-align:center;padding:34px 18px;color:var(--tenue);font-size:13px}
.vacio b{display:block;color:var(--suave);font-size:14px;margin-bottom:5px}

.barra{height:6px;background:var(--hueco);border-radius:4px;overflow:hidden;margin-top:6px}
.barra i{display:block;height:100%;background:var(--ambar)}
.barra i.ok{background:var(--ok)}

ul.lista{margin:6px 0;padding-left:18px}
ul.lista li{margin:3px 0}

/* ------------------------------------------------------------------ modal */
.modal{position:fixed;inset:0;background:rgba(10,12,15,.55);z-index:90;display:flex;
  align-items:flex-start;justify-content:center;padding:26px 14px;overflow-y:auto}
.modal-caja{background:var(--papel);border-radius:10px;width:100%;max-width:760px;
  box-shadow:0 20px 60px rgba(0,0,0,.3);padding:18px}
.modal-cab{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.modal-cab h3{margin:0;flex:1;font-size:16px}
.x{background:none;border:0;font-size:19px;color:var(--tenue);cursor:pointer;padding:2px 6px}
.x:hover{color:var(--tinta)}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:99;
  background:var(--tinta);color:var(--papel);padding:9px 16px;border-radius:7px;
  font-size:13px;box-shadow:0 6px 22px rgba(0,0,0,.28);max-width:90vw}
.toast.mal{background:var(--riesgo)}

.cargando{color:var(--tenue);padding:24px;text-align:center;font-size:13px}
pre.json{background:var(--hueco);border:1px solid var(--linea);border-radius:6px;padding:11px;
  overflow-x:auto;font-size:11.5px;line-height:1.45;max-height:340px}
code{background:var(--hueco);padding:1px 4px;border-radius:3px;font-size:12px}
.md h4{margin:14px 0 6px;font-size:13.5px}
.md p{margin:7px 0}
.md ul{margin:6px 0;padding-left:19px}
.md table{margin:9px 0}
.md blockquote{margin:9px 0;padding:8px 12px;background:var(--ambar-suave);
  border-left:3px solid var(--ambar);border-radius:0 6px 6px 0;font-size:12.5px}