:root{
  --azul:#37517E; --azul-claro:#47B2E4; --verde:#61A754;
  --ama:#F59E0B; --rojo:#ED3C0D; --gris:#97a0af;
  --fondo:#f4f6f9; --panel:#fff; --borde:#e6eaf0; --texto:#2f3640;
}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--texto);
  font:14px/1.5 "Open Sans",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
a{color:var(--azul);text-decoration:none} a:hover{text-decoration:underline}
header{background:var(--azul);color:#fff;padding:14px 22px;display:flex;
  align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
header h1{margin:0;font-size:17px;font-weight:600;letter-spacing:.3px}
header h1 span{opacity:.65;font-weight:400}
header .der{font-size:13px;opacity:.9}
header .der a{color:#cfe3f5;margin-left:14px}
main{padding:22px;max-width:1500px;margin:0 auto}
.tarjetas{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:22px}
.kpi{background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:15px 17px}
.kpi .n{font-size:25px;font-weight:700;line-height:1.1}
.kpi .t{font-size:12px;color:var(--gris);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.panel{background:var(--panel);border:1px solid var(--borde);border-radius:10px;overflow:hidden;margin-bottom:20px}
.panel>h2{margin:0;padding:13px 18px;font-size:14px;font-weight:600;
  border-bottom:1px solid var(--borde);background:#fafbfc}
table{width:100%;border-collapse:collapse}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--borde);font-size:13px;white-space:nowrap}
th{background:#fafbfc;font-weight:600;font-size:11.5px;text-transform:uppercase;
  letter-spacing:.5px;color:var(--gris)}
tbody tr:hover{background:#fafcff}
tbody tr:last-child td{border-bottom:0}
td.num{text-align:right;font-variant-numeric:tabular-nums}
.eti{display:inline-block;padding:2px 9px;border-radius:50px;font-size:11.5px;font-weight:600}
.e-ok{background:#e6f4ea;color:#1e7a34} .e-avi{background:#fef3d7;color:#8a5a00}
.e-mal{background:#fdeae5;color:#a32a08} .e-gris{background:#eef0f3;color:#5b6472}
.avisos{background:#fef8e7;border:1px solid #f4d992;border-radius:10px;padding:13px 18px;margin-bottom:20px}
.avisos h3{margin:0 0 7px;font-size:13px;color:#8a5a00}
.avisos ul{margin:0;padding-left:19px;font-size:13px;color:#6b4a08}
.avisos li{margin:3px 0}
.ficha{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px}
.ficha dl{margin:0;padding:15px 18px}
.ficha dt{font-size:11.5px;color:var(--gris);text-transform:uppercase;letter-spacing:.4px;margin-top:11px}
.ficha dt:first-child{margin-top:0}
.ficha dd{margin:2px 0 0;font-size:13.5px;word-break:break-word}
.vacio{padding:24px 18px;color:var(--gris);text-align:center;font-size:13px}
/* login */
.login{max-width:370px;margin:9vh auto;background:var(--panel);border:1px solid var(--borde);
  border-radius:12px;overflow:hidden;box-shadow:0 8px 26px rgba(0,0,0,.07)}
.login .cab{background:var(--azul);color:#fff;padding:22px;text-align:center}
.login .cab h1{margin:0;font-size:18px}
.login form{padding:22px}
.login label{display:block;font-size:12px;color:var(--gris);text-transform:uppercase;
  letter-spacing:.5px;margin:13px 0 5px}
.login input{width:100%;padding:9px 11px;border:1px solid var(--borde);border-radius:7px;font-size:14px}
.login input:focus{outline:0;border-color:var(--azul-claro)}
.login button{width:100%;margin-top:19px;padding:10px;border:0;border-radius:50px;
  background:var(--azul);color:#fff;font-size:14px;font-weight:600;cursor:pointer}
.login button:hover{filter:brightness(1.12)}
.error{background:#fdeae5;color:#a32a08;padding:9px 12px;border-radius:7px;font-size:13px;margin-bottom:5px}
@media(max-width:640px){th,td{padding:7px 9px;font-size:12px}main{padding:14px}}
/* acciones */
.acciones{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.acciones select,.acciones input{padding:8px 10px;border:1px solid var(--borde);
  border-radius:7px;font-size:13.5px;font-family:inherit}
.acciones select:focus,.acciones input:focus{outline:0;border-color:var(--azul-claro)}
.acciones button{padding:8px 17px;border:0;border-radius:50px;background:var(--azul);
  color:#fff;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
.acciones button:hover{filter:brightness(1.12)}
.acciones button.sec{background:#eef1f5;color:var(--texto)}
.acciones button.sec:hover{background:#e3e8ee;filter:none}
.acciones form{margin:0}
.ok,.mal{padding:11px 16px;border-radius:9px;margin-bottom:18px;font-size:13.5px;
  white-space:pre-wrap;word-break:break-word;max-height:230px;overflow:auto}
.ok{background:#e6f4ea;color:#1e7a34;border:1px solid #b7e0c4}
.mal{background:#fdeae5;color:#a32a08;border:1px solid #f4bfae}