:root {
    --fondo: #f6f7f9; --superficie: #fff; --texto: #1c2430; --suave: #5d6878; --borde: #dde2e8;
    --acento: #2f5bd3; --aviso: #b54708; --aviso-fondo: #fef3e2; --ok: #1f7a4d; --peligro: #b42318;
}
@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #12161c; --superficie: #1a2029; --texto: #e6e9ee; --suave: #9aa4b2; --borde: #2c3440;
        --acento: #7a9cff; --aviso: #f5a35c; --aviso-fondo: #3a2614; --ok: #5cc28f; --peligro: #f28b82;
    }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
header { display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
header form { margin: 0; }
.marca { font-weight: 600; color: var(--texto); text-decoration: none; }
main { max-width: 1200px; margin: 0 auto; padding: 20px 16px 48px; }
a { color: var(--acento); }
h1 { font-size: 1.5rem; margin: 0; }
h2 { font-size: 1.1rem; margin: 32px 0 12px; }
button, .boton {
    font: inherit; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--borde);
    background: var(--superficie); color: var(--texto); cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .boton:hover { border-color: var(--acento); }
button.peligro { color: var(--peligro); }
button.enlace { border: 0; background: none; color: var(--acento); padding: 0; }
input[type=search], input[name], input[type=password] {
    font: inherit; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
}
.login { max-width: 320px; margin: 60px auto; display: grid; gap: 12px; background: var(--superficie); padding: 24px; border: 1px solid var(--borde); border-radius: 10px; }
.login label { display: grid; gap: 4px; color: var(--suave); }
.error { color: var(--peligro); margin: 0; }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 20px; }
.cifras div { background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; padding: 14px 16px; }
.cifras b { display: block; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.cifras span { color: var(--suave); font-size: .9rem; }
.cifras .aviso { background: var(--aviso-fondo); border-color: var(--aviso); }
.cifras .aviso b { color: var(--aviso); }
.filtros { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-bottom: 12px; }
.filtros input[type=search] { flex: 1 1 240px; }
.tabla { overflow-x: auto; background: var(--superficie); border: 1px solid var(--borde); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--borde); white-space: nowrap; font-variant-numeric: tabular-nums; }
th { color: var(--suave); font-weight: 500; font-size: .85rem; }
tr:last-child td { border-bottom: 0; }
tr.off td { opacity: .55; }
td.acciones { display: flex; gap: 8px; align-items: center; }
td.acciones form { margin: 0; }
td.corto { max-width: 280px; overflow: hidden; text-overflow: ellipsis; }
.etiqueta { font-size: .75rem; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--borde); color: var(--suave); }
.etiqueta.aviso { color: var(--aviso); border-color: var(--aviso); }
.etiqueta.ok { color: var(--ok); border-color: var(--ok); }
p.aviso { background: var(--aviso-fondo); color: var(--aviso); padding: 10px 14px; border-radius: 8px; }
.titulo { display: flex; gap: 12px; align-items: center; }
.botones { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.botones form { margin: 0; }
.dato { color: var(--suave); }
dl.dato { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; }
dl.dato dd { margin: 0; color: var(--texto); }