/* Monitoreo de cabinas de pintura – E&S Capital S.A.S.
   Un solo diseño para todos los clientes (ROMARCO, NISSAN…). */
:root {
  --fondo: #f4f6fa;
  --panel: #ffffff;
  --borde: #e3e8ef;
  --linea: #eef1f5;
  --texto: #142033;
  --suave: #56637a;
  --tenue: #626e81;          /* ≥ 4.5:1 sobre blanco (antes #8a96a8, 3:1) */
  --marca: #c8102e;          /* rojo E&S */
  --acento: #1e3a8a;         /* azul de botones y pintura */
  --acento-claro: #e7edfb;
  --ok: #0e6e43;
  --ok-fondo: #e2f4ea;
  --aviso: #8f4f00;
  --aviso-fondo: #fff1d6;
  --alarma: #c62f2f;
  --alarma-fondo: #fde8e8;
  --apagado: #98a3b3;
  --apagado-fondo: #eef1f5;
  --luz: #d49b00;
  --luz-fondo: #fff4cc;
  --calor: #d9480f;          /* iconos y gráficas */
  --calor-texto: #a8380a;    /* texto sobre fondo naranja claro */
  --calor-fondo: #ffe8dc;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 6px rgba(16, 24, 40, .06);
}

* { 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;
}
a { color: var(--acento); }

/* ---------- Encabezado ---------- */
.barra {
  background: var(--panel);
  border-bottom: 1px solid var(--borde);
  border-top: 4px solid var(--marca);
}
.barra-fila {
  max-width: 1240px; margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.marca { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texto); }
.marca img { height: 42px; width: auto; }
.marca .titulo { border-left: 1px solid var(--borde); padding-left: 14px; }
.marca .titulo strong { display: block; font-size: 17px; line-height: 1.2; }
.marca .titulo small { display: block; color: var(--suave); font-size: 13px; }
.barra nav { display: flex; gap: 4px; }
.barra nav a {
  color: var(--suave); text-decoration: none; padding: 9px 14px; border-radius: 10px; font-weight: 600;
}
.barra nav a:hover { background: var(--apagado-fondo); color: var(--texto); }
.barra nav a.activo { background: var(--acento-claro); color: var(--acento); }
.barra .usuario { margin-left: auto; color: var(--suave); font-size: 13px; display: flex; gap: 12px; align-items: center; }
.barra .usuario a {
  color: var(--texto); text-decoration: none; border: 1px solid var(--borde); padding: 6px 14px;
  border-radius: 10px; font-weight: 600;
}
.barra .usuario a:hover { background: var(--apagado-fondo); }

/* Franja de contexto: cliente, sede y cabina */
.contexto { background: #fafbfd; border-top: 1px solid var(--linea); }
.contexto .barra-fila { padding: 8px 24px; gap: 10px 26px; }
.contexto .dato { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--suave); }
.contexto .dato strong { color: var(--texto); }
.contexto select { padding: 6px 10px; min-width: 150px; font-weight: 600; }

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

/* ---------- Aviso principal de estado ---------- */
.aviso-estado {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra); padding: 20px 24px; margin-bottom: 18px;
}
.aviso-estado .icono-estado {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: var(--apagado-fondo); color: var(--apagado);
}
.aviso-estado .icono-estado svg { width: 30px; height: 30px; }
.aviso-estado .texto { font-size: 30px; font-weight: 700; line-height: 1.1; }
.aviso-estado .sub { color: var(--suave); margin-top: 4px; }
.aviso-estado .crono { text-align: right; font-variant-numeric: tabular-nums; }
.aviso-estado .crono .valor { font-size: 34px; font-weight: 700; letter-spacing: .02em; }
.aviso-estado .crono small { display: block; color: var(--suave); font-size: 13px; }
.aviso-estado .conexion {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px;
}
.conexion.ok { background: var(--ok-fondo); color: var(--ok); }
.conexion.mal { background: var(--alarma-fondo); color: var(--alarma); }
.conexion.espera { background: var(--apagado-fondo); color: var(--suave); }

.aviso-estado.pintura { background: var(--acento-claro); border-color: #c9d6f5; }
.aviso-estado.pintura .icono-estado { background: #fff; color: var(--acento); }
.aviso-estado.pintura .texto { color: var(--acento); }
.aviso-estado.secado { background: var(--calor-fondo); border-color: #f7c9b3; }
.aviso-estado.secado .icono-estado { background: #fff; color: var(--calor); }
.aviso-estado.secado .texto { color: var(--calor-texto); }
.aviso-estado.arranque, .aviso-estado.deteniendo { background: var(--aviso-fondo); border-color: #f1d49a; }
.aviso-estado.arranque .icono-estado, .aviso-estado.deteniendo .icono-estado { background: #fff; color: var(--aviso); animation: latido 1.2s infinite; }
.aviso-estado.arranque .texto, .aviso-estado.deteniendo .texto { color: var(--aviso); }
.aviso-estado.luces { background: var(--luz-fondo); border-color: #f0dc8f; }
.aviso-estado.luces .icono-estado { background: #fff; color: var(--luz); }
.aviso-estado.alarma { background: var(--alarma-fondo); border-color: #f3c0c0; }
.aviso-estado.alarma .icono-estado { background: #fff; color: var(--alarma); }
.aviso-estado.alarma .texto { color: var(--alarma); }
.aviso-estado.sin-datos { background: var(--apagado-fondo); }
.aviso-estado.sin-datos .icono-estado { background: #fff; }
.aviso-estado.sin-datos .texto { color: var(--suave); }
.aviso-estado .conexion { background: #fff; }
@keyframes latido { 50% { opacity: .45; } }

/* ---------- 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: 15px; color: var(--texto); margin: 0 0 14px; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.panel h2 .der { margin-left: auto; font-weight: 400; font-size: 13px; color: var(--suave); }
.panel .ayuda { color: var(--tenue); font-size: 13px; margin: 12px 0 0; }
.c3 { grid-column: span 3; } .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; } .c9 { grid-column: span 9; } .c12 { grid-column: span 12; }

/* ---------- Equipos (luces, pintura, secado, aire…) ---------- */
.equipos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.equipos.dos { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 480px) { .equipos.dos { grid-template-columns: 1fr; } }
.equipo {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--apagado-fondo);
}
.equipo .ic { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--apagado); flex: none; }
.equipo .ic svg { width: 22px; height: 22px; }
.equipo .nombre { font-weight: 600; }
.equipo .est { font-size: 13px; color: var(--suave); }
.equipo.on { background: #fff; border-color: #cfd8e3; }
.equipo.on.luz .ic { background: var(--luz-fondo); color: var(--luz); }
.equipo.on.pintura .ic, .equipo.on.aire .ic { background: var(--acento-claro); color: var(--acento); }
.equipo.on.calor .ic { background: var(--calor-fondo); color: var(--calor); }
.equipo.on .est { color: var(--ok); font-weight: 600; }

/* ---------- Motores (ROMARCO) ---------- */
.motores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.motor {
  border: 1px solid var(--borde); border-radius: 12px; padding: 14px 12px; text-align: center;
  background: var(--apagado-fondo); color: var(--apagado);
}
.motor .paso { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--tenue); }
.motor .nombre { font-weight: 600; color: var(--texto); margin-top: 2px; }
.motor .icono { width: 44px; height: 44px; 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); } }

/* ---------- Medición (temperatura) ---------- */
.medicion-actual { display: flex; align-items: baseline; gap: 6px; }
.medicion-actual .valor { font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.medicion-actual .unidad { font-size: 20px; color: var(--suave); font-weight: 600; }
.medicion-rango { display: flex; gap: 18px; color: var(--suave); font-size: 13px; margin: 8px 0 12px; }
.medicion-rango strong { color: var(--texto); }

.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: 10px; padding: 10px 12px; font-weight: 600; }
.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: 600; }

/* ---------- Indicadores (KPIs) ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 18px; box-shadow: var(--sombra); }
.panel .kpi { box-shadow: none; }
.kpi .etq { font-size: 13px; color: var(--suave); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.kpi.con-color .etq::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--kpi-color); flex: none; }
.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: 13px; color: var(--tenue); margin-top: 2px; }

/* ---------- Línea de tiempo ---------- */
.linea { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; align-items: center; }
.linea .etq { font-size: 13px; color: var(--suave); }
.pista { position: relative; height: 24px; background: var(--apagado-fondo); border-radius: 6px; overflow: hidden; }
.pista .seg { position: absolute; top: 0; bottom: 0; border-radius: 3px; min-width: 2px; }
.pista .marca-alarma { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--alarma); }
.escala { position: relative; height: 18px; font-size: 12px; 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 var(--linea); font-variant-numeric: tabular-nums; }
tr:last-child td { border-bottom: none; }
tr.total td { font-weight: 700; border-top: 2px solid var(--borde); }
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); white-space: nowrap; }
.tipo-ev.alarma { background: var(--alarma-fondo); color: var(--alarma); }
.tipo-ev.pintura { background: var(--acento-claro); color: var(--acento); }
.tipo-ev.secado { background: var(--calor-fondo); color: var(--calor-texto); }
.tipo-ev.luces, .tipo-ev.luces_superiores, .tipo-ev.luces_laterales { background: var(--luz-fondo); color: #876400; }
.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); font-weight: 600; }
input[type=date], input[type=text], input[type=password], select {
  font: inherit; padding: 8px 10px; border: 1px solid #cdd5e0; border-radius: 10px; 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: 10px; 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: #172e6e; }
.rapidos { display: flex; gap: 6px; flex-wrap: wrap; }
.rapidos button { font-weight: 500; padding: 8px 11px; }
.rapidos button.activo { background: var(--acento-claro); border-color: #c5d3f3; color: var(--acento); }
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.pestanas button { border: none; border-radius: 0; background: none; color: var(--suave); padding: 10px 14px; }
.pestanas button.activo { color: var(--acento); box-shadow: inset 0 -3px 0 var(--acento); }
.pestanas .der { margin-left: auto; padding-bottom: 6px; }
.pestanas .der button { border: 1px solid #cdd5e0; border-radius: 10px; color: var(--texto); padding: 7px 12px; }

.encabezado-impresion { display: none; }
.solo-impresion { display: none; }

@media (max-width: 960px) {
  .c3, .c4, .c5, .c6, .c7, .c8, .c9 { grid-column: span 12; }
}
@media (max-width: 640px) {
  main { padding: 14px 16px 40px; }
  .barra-fila, .contexto .barra-fila { padding-left: 16px; padding-right: 16px; }
  .barra-fila { gap: 8px 12px; }
  .marca { flex: 1 1 100%; }
  .marca img { height: 34px; }
  .marca .titulo strong { font-size: 15px; }
  .barra nav a { padding: 7px 12px; }
  .barra .usuario { margin-left: auto; }
  #usuario-nombre { display: none; }
  .contexto .barra-fila { gap: 6px 12px; }
  .contexto .dato { flex: 1 1 100%; justify-content: space-between; }
  .contexto select { flex: 1; max-width: 60%; }
  .aviso-estado { grid-template-columns: auto 1fr; padding: 16px; }
  .aviso-estado .crono { grid-column: 1 / -1; text-align: left; }
  .aviso-estado .texto { font-size: 24px; }
  .aviso-estado .icono-estado { width: 48px; height: 48px; }
  .motores { grid-template-columns: repeat(2, 1fr); }
  .linea { grid-template-columns: 84px 1fr; }
}

/* Contenido del informe (casillas) */
.contenido-informe { margin-top: 14px; border-top: 1px solid var(--borde); padding-top: 10px; }
.contenido-informe summary { cursor: pointer; font-weight: 600; }
.contenido-informe summary .ayuda { font-weight: 400; }
.items-informe { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; margin: 8px 0; }
.item-informe { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.item-informe input { width: 18px; height: 18px; }
.items-acciones { display: flex; gap: 8px; flex-wrap: wrap; }
.excluido { display: none !important; }

@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: flex; align-items: center; gap: 16px; margin-bottom: 16px; border-bottom: 3px solid var(--marca); padding-bottom: 10px; }
  .encabezado-impresion img { height: 48px; }
  .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.excluido, .excluido { display: none !important; }
  canvas { max-width: 100% !important; }
}