:root {
  --fondo: #f3f5f8;
  --panel: #ffffff;
  --borde: #e2e7ee;
  --texto: #18212f;
  --suave: #5d6b7e;
  --tenue: #8a96a8;
  --acento: #1f5fbf;
  --ok: #138a55;
  --ok-fondo: #e3f5ec;
  --aviso: #b26a00;
  --aviso-fondo: #fff3dc;
  --alarma: #c62f2f;
  --alarma-fondo: #fde8e8;
  --apagado: #9aa5b5;
  --apagado-fondo: #eef1f5;
  --luz: #d9a400;
  --radio: 12px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  font-size: 15px;
  line-height: 1.45;
}

/* ---------- Encabezado ---------- */
.barra {
  background: #142033;
  color: #fff;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 60px;
  flex-wrap: wrap;
}
.barra .marca { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 17px; }
.barra .marca img { height: 32px; }
.barra .marca small { display: block; font-weight: 400; color: #a9b6c9; font-size: 12px; }
.barra nav { display: flex; gap: 4px; margin-left: 12px; }
.barra nav a {
  color: #c9d3e1; text-decoration: none; padding: 8px 14px; border-radius: 8px; font-weight: 500;
}
.barra nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.barra nav a.activo { background: rgba(255,255,255,.14); color: #fff; }
.barra .usuario { margin-left: auto; color: #a9b6c9; font-size: 13px; display: flex; gap: 14px; align-items: center; }
.barra .usuario a { color: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,.25); padding: 5px 12px; border-radius: 8px; }

main { max-width: 1240px; margin: 0 auto; padding: 20px 24px 48px; }

/* ---------- Conexión ---------- */
.conexion {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 10px; margin-bottom: 18px; font-weight: 500;
}
.conexion.ok { background: var(--ok-fondo); color: var(--ok); }
.conexion.mal { background: var(--alarma-fondo); color: var(--alarma); }
.conexion.cargando { background: var(--apagado-fondo); color: var(--suave); }
.conexion .detalle { color: var(--suave); font-weight: 400; margin-left: auto; font-size: 13px; }

/* ---------- Paneles ---------- */
.rejilla { display: grid; gap: 18px; grid-template-columns: repeat(12, 1fr); }
.panel {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 20px; min-width: 0;
}
.panel h2 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--suave);
  margin: 0 0 14px; font-weight: 600; display: flex; align-items: center; gap: 8px;
}
.panel h2 .der { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.c4 { grid-column: span 4; } .c5 { grid-column: span 5; } .c6 { grid-column: span 6; }
.c7 { grid-column: span 7; } .c8 { grid-column: span 8; } .c12 { grid-column: span 12; }

/* ---------- Estado principal ---------- */
.estado-grande { display: flex; align-items: center; gap: 16px; }
.estado-grande .punto { width: 18px; height: 18px; border-radius: 50%; background: var(--apagado); flex: none; }
.estado-grande .texto { font-size: 30px; font-weight: 700; line-height: 1.1; }
.estado-grande.e1 .punto, .estado-grande.e3 .punto { background: var(--aviso); animation: latido 1.2s infinite; }
.estado-grande.e2 .punto { background: var(--ok); box-shadow: 0 0 0 6px var(--ok-fondo); }
.estado-grande.e1 .texto, .estado-grande.e3 .texto { color: var(--aviso); }
.estado-grande.e2 .texto { color: var(--ok); }
.estado-grande.desconocido .texto { color: var(--tenue); }
@keyframes latido { 50% { opacity: .35; } }

.sub-estado { color: var(--suave); margin-top: 8px; min-height: 22px; }
.cronometro { font-variant-numeric: tabular-nums; font-size: 40px; font-weight: 700; margin-top: 14px; letter-spacing: .02em; }
.cronometro small { display: block; font-size: 13px; color: var(--suave); font-weight: 400; letter-spacing: 0; }

.fila-luz {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--borde);
}
.bombillo { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--apagado-fondo); color: var(--apagado); }
.bombillo.on { background: #fff5cc; color: var(--luz); box-shadow: 0 0 18px rgba(217,164,0,.45); }
.bombillo svg { width: 22px; height: 22px; }

/* ---------- Motores ---------- */
.motores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.motor {
  border: 1px solid var(--borde); border-radius: 10px; padding: 14px 12px; text-align: center;
  background: var(--apagado-fondo); color: var(--apagado); position: relative;
}
.motor .paso { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.motor .nombre { font-weight: 600; color: var(--texto); margin-top: 2px; }
.motor .icono { width: 46px; height: 46px; margin: 10px auto 6px; }
.motor .icono svg { width: 100%; height: 100%; }
.motor .ind { font-size: 13px; font-weight: 600; }
.motor.on { background: var(--ok-fondo); border-color: #bfe6d2; color: var(--ok); }
.motor.on .icono svg { animation: girar 1.4s linear infinite; }
.motor.falla { background: var(--alarma-fondo); border-color: #f3c0c0; color: var(--alarma); }
@keyframes girar { to { transform: rotate(360deg); } }
.flecha-flujo { display: flex; justify-content: space-between; margin-top: 12px; font-size: 12px; color: var(--tenue); }
.extra { display: flex; gap: 10px; align-items: center; margin-top: 14px; font-size: 14px; color: var(--suave); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; background: var(--apagado-fondo); color: var(--suave); }
.chip.on { background: var(--ok-fondo); color: var(--ok); }
.chip.mal { background: var(--alarma-fondo); color: var(--alarma); }
.chip.aviso { background: var(--aviso-fondo); color: var(--aviso); }

/* ---------- Alarmas ---------- */
.lista-alarmas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-alarmas li { background: var(--alarma-fondo); color: var(--alarma); border-radius: 8px; padding: 10px 12px; font-weight: 500; }
.lista-alarmas li small { display: block; color: var(--suave); font-weight: 400; }
.sin-alarmas { color: var(--ok); display: flex; gap: 8px; align-items: center; font-weight: 500; }

/* ---------- KPIs ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); }
.kpi .etq { font-size: 13px; color: var(--suave); }
.kpi .val { font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi .val small { font-size: 15px; font-weight: 500; color: var(--suave); margin-left: 3px; }
.kpi .nota { font-size: 12px; color: var(--tenue); margin-top: 2px; }

/* ---------- Línea de tiempo ---------- */
.linea { display: grid; grid-template-columns: 70px 1fr; gap: 8px 12px; align-items: center; }
.linea .etq { font-size: 13px; color: var(--suave); }
.pista { position: relative; height: 26px; background: var(--apagado-fondo); border-radius: 6px; overflow: hidden; }
.pista .seg { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 2px; }
.pista.pintura .seg { background: var(--acento); }
.pista.luces .seg { background: var(--luz); }
.pista .marca-alarma { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--alarma); }
.escala { position: relative; height: 18px; font-size: 11px; color: var(--tenue); }
.escala span { position: absolute; transform: translateX(-50%); }
.ahora { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--texto); opacity: .5; }

/* ---------- Tablas ---------- */
.tabla-env { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-weight: 600; color: var(--suave); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; }
td { padding: 9px 10px; border-bottom: 1px solid #eef1f5; font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; }
.vacio { color: var(--tenue); text-align: center; padding: 24px; }
.tipo-ev { font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: var(--apagado-fondo); color: var(--suave); text-transform: capitalize; }
.tipo-ev.alarma { background: var(--alarma-fondo); color: var(--alarma); }
.tipo-ev.pintura { background: #e4edfb; color: var(--acento); }
.tipo-ev.luces { background: #fff5cc; color: #8a6800; }
.tipo-ev.conexion { background: var(--aviso-fondo); color: var(--aviso); }
.tipo-ev.proceso { background: var(--ok-fondo); color: var(--ok); }

/* ---------- Controles ---------- */
.controles { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--suave); }
input[type=date], input[type=text], input[type=password] {
  font: inherit; padding: 8px 10px; border: 1px solid #cdd5e0; border-radius: 8px; background: #fff; color: var(--texto);
}
button, .boton {
  font: inherit; font-weight: 600; border: 1px solid #cdd5e0; background: #fff; color: var(--texto);
  padding: 8px 14px; border-radius: 8px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
}
button:hover, .boton:hover { background: #f4f6f9; }
button.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
button.primario:hover { background: #194f9f; }
.rapidos { display: flex; gap: 6px; flex-wrap: wrap; }
.rapidos button { font-weight: 500; padding: 8px 11px; }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; flex-wrap: wrap; }
.pestanas button { border: none; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--suave); padding: 10px 14px; }
.pestanas button.activo { color: var(--acento); border-bottom-color: var(--acento); }
.pestanas .der { margin-left: auto; padding-bottom: 6px; }

.encabezado-impresion { display: none; }

@media (max-width: 960px) {
  .c4, .c5, .c6, .c7, .c8 { grid-column: span 12; }
}
@media (max-width: 600px) {
  main { padding: 14px 16px 40px; }
  .barra { padding: 8px 16px; }
  .barra nav { margin-left: 0; }
  .barra .usuario { margin-left: 0; }
  .motores { grid-template-columns: repeat(2, 1fr); }
  .estado-grande .texto { font-size: 24px; }
  .cronometro { font-size: 32px; }
}

@media print {
  body { background: #fff; font-size: 12px; }
  .barra, .no-imprimir, .pestanas { display: none !important; }
  main { padding: 0; max-width: none; }
  .panel, .kpi { box-shadow: none; break-inside: avoid; }
  .encabezado-impresion { display: block; margin-bottom: 16px; }
  .encabezado-impresion h1 { font-size: 20px; margin: 0; }
  .encabezado-impresion p { margin: 2px 0; color: var(--suave); }
  .seccion-tabla { display: block !important; margin-top: 16px; break-before: auto; }
  .seccion-tabla h3.solo-impresion { display: block !important; }
  .seccion-tabla[data-sec=eventos] { display: none !important; }
  canvas { max-width: 100% !important; }
}
.solo-impresion { display: none; }