:root { --fondo:#f4f5f7; --tarjeta:#fff; --texto:#1f2430; --suave:#667085; --borde:#d9dde3;
        --acento:#2f5bea; --ok:#1a7f4b; --mal:#b42318; --aviso:#9a6700; }
* { box-sizing: border-box; }
body { margin:0; font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--fondo); color:var(--texto); }
a { color:var(--acento); }
header.barra { background:#1f2430; color:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:4px 18px; padding:10px 16px; }
header.barra strong { margin-right:8px; }
header.barra a { color:#cfd6e4; text-decoration:none; padding:4px 0; }
header.barra a.activo { color:#fff; border-bottom:2px solid #fff; }
header.barra form { margin-left:auto; }
main { max-width:1100px; margin:20px auto; padding:0 16px; }
h1 { font-size:22px; margin:0 0 14px; }
h2 { font-size:17px; margin:22px 0 8px; }
.tarjeta { background:var(--tarjeta); border:1px solid var(--borde); border-radius:8px; padding:14px 16px; margin-bottom:16px; }
.cifras { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:16px; }
.cifra { background:var(--tarjeta); border:1px solid var(--borde); border-radius:8px; padding:12px 14px; }
.cifra b { display:block; font-size:26px; }
.cifra span { color:var(--suave); font-size:13px; }
table { width:100%; border-collapse:collapse; background:var(--tarjeta); }
th, td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--borde); vertical-align:top; }
th { font-size:13px; color:var(--suave); font-weight:600; }
.tabla { overflow-x:auto; border:1px solid var(--borde); border-radius:8px; margin-bottom:16px; }
label { display:block; font-size:13px; color:var(--suave); margin:10px 0 3px; }
input[type=text], input[type=password], input[type=date], input[type=number], select, textarea {
    width:100%; max-width:420px; padding:8px 10px; border:1px solid var(--borde); border-radius:6px; font:inherit; background:#fff; color:inherit; }
textarea { max-width:620px; min-height:70px; }
.fila { display:flex; flex-wrap:wrap; gap:6px 16px; align-items:flex-end; }
.check { display:flex; align-items:center; gap:8px; margin:4px 0; color:var(--texto); font-size:14px; }
.check input { width:auto; }
button, .boton { display:inline-block; padding:8px 14px; border:1px solid var(--acento); background:var(--acento); color:#fff;
    border-radius:6px; font:inherit; cursor:pointer; text-decoration:none; }
button.sec, .boton.sec { background:#fff; color:var(--acento); }
button.peligro { background:var(--mal); border-color:var(--mal); }
button.suave { background:#fff; color:var(--texto); border-color:var(--borde); }
.aviso { padding:10px 14px; border-radius:6px; margin-bottom:14px; border:1px solid; }
.aviso.ok { background:#e8f6ee; border-color:#a6dcbd; color:var(--ok); }
.aviso.error { background:#fdecea; border-color:#f3b8b2; color:var(--mal); }
.aviso.info { background:#fff6e0; border-color:#ecd48c; color:var(--aviso); }
.etiqueta { display:inline-block; padding:1px 8px; border-radius:10px; font-size:12px; border:1px solid var(--borde); }
.etiqueta.ok { color:var(--ok); border-color:#a6dcbd; background:#e8f6ee; }
.etiqueta.mal { color:var(--mal); border-color:#f3b8b2; background:#fdecea; }
.etiqueta.aviso { color:var(--aviso); border-color:#ecd48c; background:#fff6e0; }
.suave { color:var(--suave); font-size:13px; }
.clave { font:15px/1.6 ui-monospace,Menlo,Consolas,monospace; background:#f0f2f5; padding:8px 10px; border-radius:6px; word-break:break-all; }
.centrado { max-width:420px; margin:70px auto; }
@media (max-width:600px) { th, td { padding:6px; font-size:14px; } }