:root{
  --verde:#14562F; --verde-2:#1E7A44; --verde-pale:#EAF1EA; --oro:#96762F;
  --crema:#FBF8F2; --tinta:#1B1B19; --gris:#6E6E64; --linea:#DED8C9;
  --rojo:#8C2F2F; --rojo-pale:#FBEEEE; --ambar:#8A6A12; --ambar-pale:#FFF3D6;
  --azul:#2A5580; --azul-pale:#E9F0F7;
  --sombra:0 1px 2px rgba(20,86,47,.06), 0 6px 18px rgba(20,86,47,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--crema);color:var(--tinta);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:Georgia,serif;margin:0;line-height:1.2}
button{font:inherit;cursor:pointer}
a{color:var(--verde-2)}

/* login */
#login{min-height:100%;display:flex;align-items:center;justify-content:center;padding:24px}
#login .caja{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:32px;
  width:100%;max-width:390px;box-shadow:var(--sombra);text-align:center}
#login img{width:64px;height:63px;margin-bottom:14px}
#login h1{font-size:21px;color:var(--verde)}
#login p{color:var(--gris);font-size:13.5px;margin:6px 0 22px}

/* estructura */
#app{display:none;min-height:100%;grid-template-columns:224px 1fr}
aside{background:var(--verde);color:#CFE3D3;padding:18px 12px;display:flex;flex-direction:column;gap:3px}
aside .marca{display:flex;gap:10px;align-items:center;padding:4px 8px 16px;border-bottom:1px solid rgba(255,255,255,.14);margin-bottom:12px}
aside .marca img{width:34px;height:33px}
aside .marca div{font-family:Georgia,serif;color:#fff;font-size:13.5px;line-height:1.2}
aside .marca small{display:block;font-size:9.5px;letter-spacing:1.8px;color:#9DC3A6;text-transform:uppercase;margin-top:3px}
aside button{background:none;border:0;color:#CFE3D3;text-align:left;padding:9px 12px;border-radius:9px;
  font-size:14px;display:flex;align-items:center;gap:9px;width:100%}
aside button:hover{background:rgba(255,255,255,.09);color:#fff}
aside button.on{background:#fff;color:var(--verde);font-weight:600}
aside .pill{margin-left:auto;background:var(--oro);color:#fff;border-radius:999px;
  font-size:11px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}
aside button.on .pill{background:var(--verde);color:#fff}
aside .pie{margin-top:auto;padding:12px 10px 0;border-top:1px solid rgba(255,255,255,.14);font-size:12px}

main{padding:24px 26px 60px;overflow:auto}
.cabecera{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.cabecera h2{font-size:23px;color:var(--verde)}
.cabecera .sub{color:var(--gris);font-size:14px;margin:3px 0 0}
.cabecera .der{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.banda{background:var(--ambar);color:#fff;font-size:12.5px;padding:7px 26px;display:none}
.banda.on{display:block}

/* piezas */
.btn{border:0;background:var(--verde);color:#fff;padding:9px 16px;border-radius:9px;font-size:14px;font-weight:600}
.btn:hover{background:var(--verde-2)}
.btn.sec{background:#fff;color:var(--verde);border:1.5px solid var(--linea)}
.btn.sec:hover{border-color:var(--verde)}
.btn.mal{background:var(--rojo)}
.btn.chico{padding:5px 11px;font-size:12.5px}
.btn[disabled]{opacity:.45;cursor:not-allowed}

input,select,textarea{padding:9px 11px;border:1.5px solid var(--linea);border-radius:9px;font:inherit;
  font-size:14px;background:#fff;width:100%}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--verde-2);box-shadow:0 0 0 3px rgba(30,122,68,.12)}
textarea{min-height:74px;resize:vertical}
label{display:block;font-size:12.5px;font-weight:600;color:var(--gris);margin-bottom:4px}
.campo{margin-bottom:12px}

.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.k{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:15px;box-shadow:var(--sombra)}
.k .n{font-family:Georgia,serif;font-size:27px;color:var(--verde);line-height:1}
.k .r{font-size:11.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.5px;margin-top:5px}
.k.alerta .n{color:var(--ambar)}

.caja{background:#fff;border:1px solid var(--linea);border-radius:12px;box-shadow:var(--sombra);
  padding:18px;margin-bottom:16px}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;letter-spacing:.7px;text-transform:uppercase;color:var(--gris);
  padding:8px 10px;border-bottom:2px solid var(--linea);white-space:nowrap}
td{padding:9px 10px;border-bottom:1px solid var(--linea);vertical-align:middle}
tbody tr:hover{background:var(--crema)}
tr.click{cursor:pointer}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px}

.et{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:600;white-space:nowrap}
.et.verde{background:var(--verde-pale);color:#12522C}
.et.azul{background:var(--azul-pale);color:var(--azul)}
.et.ambar{background:var(--ambar-pale);color:var(--ambar)}
.et.rojo{background:var(--rojo-pale);color:var(--rojo)}
.et.gris{background:#EEEBE3;color:var(--gris)}

.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
.filtros input,.filtros select{width:auto;min-width:150px}

/* panel lateral de la solicitud */
#lateral{position:fixed;inset:0;background:rgba(20,25,20,.42);display:none;z-index:80}
#lateral.on{display:block}
#lateral .hoja{position:absolute;right:0;top:0;bottom:0;width:min(660px,100%);background:var(--crema);
  overflow:auto;padding:22px 24px 60px;box-shadow:-8px 0 30px rgba(0,0,0,.18)}
#lateral h3{font-size:20px;color:var(--verde)}
.bandera{border-radius:9px;padding:9px 12px;font-size:13.5px;margin-bottom:7px;border:1px solid}
.bandera.grave{background:var(--rojo-pale);border-color:#E2C3C3;color:var(--rojo)}
.bandera.aviso{background:var(--ambar-pale);border-color:#EBDCA8;color:var(--ambar)}
.datos{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 16px;font-size:13.5px}
.datos div span{display:block;font-size:11px;color:var(--gris);text-transform:uppercase;letter-spacing:.5px}
.docs{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.docs a{display:block;border:1.5px solid var(--linea);border-radius:9px;padding:8px 12px;
  background:#fff;text-decoration:none;font-size:13px;color:var(--tinta)}
.docs a small{display:block;color:var(--gris);font-size:11px}

.msg{border-radius:9px;padding:10px 13px;font-size:13.5px;margin:10px 0;border:1px solid}
.msg.ok{background:var(--verde-pale);border-color:#BFD8C4;color:#12522C}
.msg.mal{background:var(--rojo-pale);border-color:#E2C3C3;color:var(--rojo)}
.msg.info{background:var(--azul-pale);border-color:#C6D6E6;color:var(--azul)}
.vacio{color:var(--gris);font-size:14px;padding:26px 0;text-align:center}
@media(max-width:820px){#app{grid-template-columns:1fr}aside{flex-direction:row;overflow:auto}aside .marca,aside .pie{display:none}}