:root {
  --fondo: #f6f5f2; --tarjeta: #ffffff; --texto: #1d1d1b; --tenue: #6b6a66; --borde: #e2e0da;
  --acento: #1f5f4a; --rojo: #a3271f; --aviso: #8a5a00; --aviso-fondo: #fff4db; --ok: #1f6b3a;
}
@media (prefers-color-scheme: dark) {
  :root { --fondo: #161614; --tarjeta: #21211e; --texto: #ecebe6; --tenue: #a19f98; --borde: #34332f;
          --acento: #5fbf97; --rojo: #ff7a6e; --aviso: #ffcf70; --aviso-fondo: #3a2f12; --ok: #6fd18f; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.cabecera { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
            padding: 12px 16px; border-bottom: 1px solid var(--borde); background: var(--tarjeta); }
.marca { font-weight: 600; color: var(--texto); text-decoration: none; }
nav { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
a { color: var(--acento); }
main { max-width: 980px; margin: 0 auto; padding: 16px; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; overflow-x: auto; }
.estrecha { max-width: 420px; margin: 40px auto; }
h1 { font-size: 1.4rem; margin: 0 0 8px; } h2 { font-size: 1.15rem; margin: 0 0 8px; } h3 { font-size: 1rem; margin: 12px 0 4px; }
.tenue { color: var(--tenue); font-size: .92rem; }
.fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; align-items: flex-start; }
table { border-collapse: collapse; width: 100%; font-size: .93rem; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
label { display: block; margin: 10px 0; }
input[type=text], input:not([type]), input[type=password] { display: block; width: 100%; padding: 8px; margin-top: 4px;
  border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo); color: var(--texto); font: inherit; }
.casilla input { margin-right: 6px; }
button { font: inherit; padding: 8px 14px; border-radius: 6px; border: 1px solid var(--borde); background: var(--tarjeta); color: var(--texto); cursor: pointer; }
button.principal { background: var(--acento); border-color: var(--acento); color: #fff; }
button.rojo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
button.enlace { border: 0; background: none; color: var(--acento); padding: 0; text-decoration: underline; }
.enlinea { display: inline; }
.bloque { border-top: 1px solid var(--borde); padding-top: 8px; margin-top: 8px; }
.mensaje { background: var(--aviso-fondo); border: 1px solid var(--borde); padding: 10px 14px; border-radius: 8px; }
.alerta { background: var(--aviso-fondo); color: var(--aviso); padding: 8px 12px; border-radius: 6px; font-weight: 600; }
.error { color: var(--rojo); font-weight: 600; } .ok { color: var(--ok); font-weight: 600; }
.estado { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--borde); font-size: .85rem; }
.e-pendiente_aprobacion, .e-aviso { background: var(--aviso-fondo); color: var(--aviso); }
.e-bloqueado, .e-rechazado, .e-error, .e-aprobacion_invalidada, .e-aplicado_parcial { color: var(--rojo); }
.e-aplicado, .e-ok { color: var(--ok); }
.lista { padding-left: 18px; } .operaciones li { margin-bottom: 10px; }
.operaciones li.activar { border-left: 4px solid var(--aviso); padding-left: 8px; }
details.peligro summary { color: var(--rojo); cursor: pointer; font-weight: 600; }
.semaforo { margin: 6px 0 12px; }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.verde-p { background: var(--ok); } .ambar-p { background: var(--aviso); } .rojo-p { background: var(--rojo); }
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 8px 0 12px; }
.cifra { border: 1px solid var(--borde); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; }
.cifra strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.barra { height: 6px; background: var(--borde); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.relleno { height: 100%; background: var(--acento); } .relleno.alto { background: var(--rojo); }
.lista-avisos { list-style: none; padding: 0; margin: 0; }
.aviso { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; padding: 8px 10px; border-left: 4px solid var(--borde); margin-bottom: 6px; background: var(--fondo); border-radius: 4px; }
.aviso.n-urgente { border-left-color: var(--rojo); } .aviso.n-importante { border-left-color: var(--aviso); }
.aviso pre { white-space: pre-wrap; font: inherit; font-size: .9rem; margin: 6px 0 0; }
.tiempo { list-style: none; padding: 0; margin: 0; }
.tiempo li { padding: 5px 0 5px 10px; border-left: 3px solid var(--borde); margin-bottom: 2px; }
.tiempo li.n-urgente { border-left-color: var(--rojo); } .tiempo li.n-importante { border-left-color: var(--aviso); }
.tiempo li.o-externo { font-weight: 600; }
tr.n-urgente td:nth-child(2) { color: var(--rojo); font-weight: 600; }
.antes-despues tr.activar td { background: var(--aviso-fondo); }
.w-0 { width: 0%; }
.w-5 { width: 5%; }
.w-10 { width: 10%; }
.w-15 { width: 15%; }
.w-20 { width: 20%; }
.w-25 { width: 25%; }
.w-30 { width: 30%; }
.w-35 { width: 35%; }
.w-40 { width: 40%; }
.w-45 { width: 45%; }
.w-50 { width: 50%; }
.w-55 { width: 55%; }
.w-60 { width: 60%; }
.w-65 { width: 65%; }
.w-70 { width: 70%; }
.w-75 { width: 75%; }
.w-80 { width: 80%; }
.w-85 { width: 85%; }
.w-90 { width: 90%; }
.w-95 { width: 95%; }
.w-100 { width: 100%; }