/* Monitor de infraestructura — New Age. Sobrio, claro, sin nada superpuesto. */
:root{
  --azul:#16324a; --azul2:#1e3a5f; --dorado:#c9a227; --fondo:#f4f6f8;
  --tarjeta:#ffffff; --borde:#dde3e8; --texto:#1c2733; --suave:#5b6b7a;
  --verde:#1e8e4f; --amarillo:#b97f0a; --rojo:#bc3327; --gris:#7a8794;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;background:var(--fondo);color:var(--texto);line-height:1.45}
.cabecera{background:var(--azul);color:#fff;padding:14px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.marca{display:flex;flex-direction:column;margin-right:auto}
.marca-nombre{font-weight:700;letter-spacing:2px;font-size:17px;color:#fff;margin:0}
.login .marca-nombre{color:#16324a}
.marca-nombre::after{content:"";display:block;width:44px;height:3px;background:var(--dorado);margin-top:3px}
.marca-sub{font-size:12.5px;color:#c8d4e0;margin-top:4px}
.cabecera nav{display:flex;flex-wrap:wrap;gap:6px}
.cabecera nav a{color:#dfe8f0;text-decoration:none;font-size:13.5px;padding:6px 10px;border-radius:6px}
.cabecera nav a:hover{background:rgba(255,255,255,.12)}
.cabecera nav a.activa{background:var(--dorado);color:#14232f;font-weight:600}
main{max-width:1080px;margin:0 auto;padding:22px 18px 10px}
section{background:var(--tarjeta);border:1px solid var(--borde);border-radius:10px;padding:20px 22px;margin-bottom:20px}
h2{margin:0 0 10px;font-size:20px;color:var(--azul);border-bottom:2px solid var(--dorado);padding-bottom:7px}
h3{margin:20px 0 8px;font-size:15.5px;color:var(--azul2)}
.nota{color:var(--suave);font-size:13.5px}
.franja-preview{background:#fdf3d8;border-bottom:2px solid var(--dorado);color:#5c4a07;padding:10px 22px;font-size:13.5px;text-align:center}
.franja-viejo{background:#fbe3e0;border-bottom:2px solid var(--rojo);color:#7c1f16;padding:10px 22px;font-size:13.5px;text-align:center}
.aviso-baseline{background:#eef3f8;border:1px solid var(--borde);border-left:4px solid var(--azul2);padding:9px 12px;border-radius:6px;font-size:13.5px}
.grid-semaforos{display:flex;flex-wrap:wrap;gap:12px}
.semaforo{flex:1 1 300px;display:flex;gap:12px;align-items:flex-start;background:#fbfcfd;border:1px solid var(--borde);border-radius:8px;padding:14px 16px}
.semaforo h3{margin:0 0 4px;font-size:15px}
.semaforo p{margin:0;font-size:13px;color:var(--suave)}
.dot{flex:0 0 auto;width:16px;height:16px;border-radius:50%;margin-top:3px}
.dot-verde{background:var(--verde)} .dot-amarillo{background:#e0a50c} .dot-rojo{background:var(--rojo)} .dot-gris{background:var(--gris)}
.badge{display:inline-block;padding:1px 8px;border-radius:20px;font-size:12px;font-weight:600;color:#fff;white-space:nowrap}
.badge-verde{background:var(--verde)} .badge-amarillo{background:#e0a50c;color:#3d2f02} .badge-rojo{background:var(--rojo)} .badge-gris{background:var(--gris)}
table{width:100%;border-collapse:collapse;font-size:13.5px;margin:6px 0 4px}
th{text-align:left;color:var(--azul);border-bottom:2px solid var(--borde);padding:6px 8px;font-size:12.5px;text-transform:uppercase;letter-spacing:.4px}
td{border-bottom:1px solid var(--borde);padding:6px 8px;vertical-align:top}
.url{font-size:12.5px;color:var(--suave);word-break:break-all}
.ms{color:var(--suave);font-size:12px}
.fila-nota td{color:var(--suave);font-size:12.5px;background:#fbfcfd;border-bottom:1px solid var(--borde)}
.grid-metricas{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0}
.metrica{flex:1 1 240px;border:1px solid var(--borde);border-radius:8px;padding:14px 16px;background:#fbfcfd;display:flex;flex-direction:column;gap:7px}
.metrica-t{font-size:12.5px;color:var(--suave);text-transform:uppercase;letter-spacing:.5px}
.metrica strong{font-size:23px;color:var(--azul)}
.metrica-s{font-size:12.5px;color:var(--suave)}
.bar{background:#e8edf1;border-radius:6px;height:9px;overflow:hidden}
.bar-fill{height:100%}
.bar-verde{background:var(--verde)} .bar-amarillo{background:#e0a50c} .bar-rojo{background:var(--rojo)} .bar-gris{background:var(--gris)}
.grafica{margin:14px 0}
.grafica svg{width:100%;height:90px;background:#fbfcfd;border:1px solid var(--borde);border-radius:8px}
footer{max-width:1080px;margin:0 auto;padding:6px 18px 26px;color:var(--suave);font-size:12.5px}
.login-wrap{max-width:400px;margin:9vh auto;padding:0 16px}
.login{background:#fff;border:1px solid var(--borde);border-radius:10px;padding:26px}
.login h1{font-size:19px;color:var(--azul);margin:0 0 6px}
.login p{color:var(--suave);font-size:13.5px}
.login label{display:block;font-size:13px;margin:14px 0 5px;color:var(--azul2);font-weight:600}
.login input{width:100%;padding:10px;border:1px solid var(--borde);border-radius:7px;font-size:15px}
.login button{width:100%;margin-top:16px;background:var(--azul);color:#fff;border:0;border-radius:7px;padding:11px;font-size:15px;font-weight:600;cursor:pointer}
.login button:hover{background:var(--azul2)}
.error{background:#fbe3e0;color:#7c1f16;border-radius:7px;padding:9px 12px;font-size:13.5px;margin-top:12px}
@media (max-width:640px){
  .cabecera{padding:12px 14px}
  main{padding:14px 10px}
  section{padding:16px 14px}
  table{font-size:12.5px}
  .metrica strong{font-size:20px}
}