:root{--tinta:#15211c;--papel:#f6f7f5;--linea:#d9ded8;--jade:#1f6f5c;
      --alerta:#a3321f;--aviso:#8a6410;--suave:#6b7a72;--azul:#1d4e89;}
*{box-sizing:border-box}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
     color:var(--tinta);background:var(--papel)}
header.barra{position:sticky;top:0;z-index:5;background:var(--jade);color:#fff;
     padding:.6rem 1rem;display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}
header.barra a{color:#fff;text-decoration:none;font-weight:600}
header.barra a.act{text-decoration:underline}
header.barra .yo{margin-left:auto;font-size:.85rem;opacity:.9}
main{padding:1rem;max-width:1100px;margin:0 auto}
h1{font-size:1.3rem;margin:.2rem 0 1rem}
h2{font-size:1rem;margin:1.4rem 0 .5rem;text-transform:uppercase;
   letter-spacing:.06em;color:var(--suave)}
.tablero{display:grid;gap:1rem;grid-template-columns:1fr}
@media(min-width:820px){.tablero{grid-template-columns:repeat(3,1fr)}}
.col h2{position:sticky;top:3rem;background:var(--papel);padding:.3rem 0;margin-top:0}
.tarjeta{background:#fff;border:1px solid var(--linea);border-left:4px solid var(--jade);
   border-radius:6px;padding:.7rem .8rem;margin-bottom:.7rem}
.tarjeta.vencido{border-left-color:var(--alerta)}
.tarjeta.sinfecha{border-left-color:var(--aviso)}
.tarjeta a{color:var(--tinta);font-weight:600;text-decoration:none}
.meta{font-size:.82rem;color:var(--suave)}
.chip{display:inline-block;font-size:.72rem;border:1px solid var(--linea);
   border-radius:999px;padding:.05rem .5rem;margin:.15rem .2rem 0 0;background:#fff}
.chip.obra{border-color:var(--jade);color:var(--jade)}
.chip.stock{border-color:var(--suave);color:var(--suave)}
.rojo{color:var(--alerta);font-weight:600}
.ambar{color:var(--aviso);font-weight:600}
form.filtros{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
input,select,textarea,button{font:inherit;padding:.5rem;border:1px solid var(--linea);
   border-radius:5px;background:#fff;color:inherit;min-width:0}
button{background:var(--jade);color:#fff;border-color:var(--jade);cursor:pointer;
   font-weight:600;min-height:44px;padding:.5rem 1rem}
button.sec{background:#fff;color:var(--tinta);border-color:var(--linea)}
button.peligro{background:var(--alerta);border-color:var(--alerta)}
table{width:100%;border-collapse:collapse;background:#fff;font-size:.9rem}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--linea);
   vertical-align:top}
th{font-size:.75rem;text-transform:uppercase;color:var(--suave)}
ol.hilo{list-style:none;padding:0;margin:0}
ol.hilo li{border-left:2px solid var(--linea);padding:.3rem 0 .3rem .8rem;
   font-size:.88rem}
ol.hilo li b{font-family:ui-monospace,monospace;font-size:.78rem;color:var(--jade)}
.caja{background:#fff;border:1px solid var(--linea);border-radius:6px;
   padding:.8rem;margin-bottom:.8rem}
.aviso{background:#fdf3e3;border:1px solid #e6cf9d;border-radius:6px;padding:.6rem .8rem;
   margin-bottom:.8rem}
.error{background:#fbe9e6;border:1px solid #e3b3a9;border-radius:6px;padding:.6rem .8rem;
   margin-bottom:.8rem;color:var(--alerta);font-weight:600}
.acciones{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.6rem}
.vacio{color:var(--suave);font-style:italic;padding:.5rem 0}
label{display:block;font-size:.8rem;color:var(--suave);margin:.6rem 0 .2rem}
.pila input,.pila select,.pila textarea{width:100%}
/* Los CUATRO estados visibles del ORACLE, y sus cuatro colores. No es sistema
   de diseno: es que «azul, naranja, verde, rojo» es literalmente el requisito. */
.est{font-weight:600;border-width:2px}
.est.azul{border-color:var(--azul);color:var(--azul)}
.est.naranja{border-color:var(--aviso);color:var(--aviso)}
.est.verde{border-color:var(--jade);color:var(--jade)}
.est.rojo{border-color:var(--alerta);color:var(--alerta)}
/* Migas del formulario guiado: en que paso de los seis va. */
ol.pasos{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:0 0 1rem;
   font-size:.78rem;color:var(--suave)}
ol.pasos li{border:1px solid var(--linea);border-radius:999px;padding:.1rem .6rem;background:#fff}
ol.pasos li.aqui{border-color:var(--jade);color:var(--jade);font-weight:600}