:root {
  --bg: #0a0e17;
  --bg-panel: #111827;
  --bg-panel-2: #0f1623;
  --border: #1f2b3e;
  --text: #e6edf6;
  --text-dim: #8595ab;
  --accent: #00e5ff;
  --accent-2: #3b82f6;
  --green: #22e39a;
  --amber: #ffb020;
  --red: #ff4d6d;
  --grey: #64748b;
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
  --radius: 14px;
  --glow: #12233b;
  --topbar-bg: rgba(10, 14, 23, 0.7);
  --mode: #c084fc;   /* púrpura: modo del control (AUTO/MANUAL/BLOQUEADO) */
  --opmode: #b6ff3a; /* verde fosforescente: modo de operación (MPE/PSH/ISLA…) */
  --led-rojo:  #ff2d2d;  /* interruptor CERRADO: energizado */
  --led-verde: #16e05f;  /* interruptor ABIERTO: seguro */
  --led-amar:  #ffd60a;  /* interruptor DISPARADO */
  --io-on:   #2bff88;    /* verde neón: entrada/salida ACTIVADA */
  --io-glow: rgba(43, 255, 136, .55);
  /* Bandas del medidor de regulación. Van aparte de --green/--amber/--red
     porque aquí se buscan colores de tablero: amarillo amarillo (no naranja)
     y rojo Ferrari. Cada banda tiene dos tonos: el del ARCO, que puede ser
     bien encendido porque es una franja gruesa, y el del NÚMERO y la aguja,
     que tiene que leerse. En modo noche son el mismo. */
  --g-verde: #16e05f;  --g-verde-t: #16e05f;
  --g-amar:  #ffe81a;  --g-amar-t:  #ffe81a;
  --g-rojo:  #ff2800;  --g-rojo-t:  #ff3d1a;
}

/* ---------- Tema claro (modo día) ---------- */
html[data-theme="light"] {
  --bg: #eef2f7;
  --bg-panel: #ffffff;
  --bg-panel-2: #f4f7fb;
  --border: #d5deea;
  --text: #16202e;
  --text-dim: #5a6a7e;
  --accent: #0091b0;
  --accent-2: #2563eb;
  --green: #0f9d64;
  --amber: #c77700;
  --red: #d92546;
  --grey: #64748b;
  --shadow: 0 8px 24px rgba(20, 40, 70, 0.10);
  --glow: #dbe7f5;
  --topbar-bg: rgba(255, 255, 255, 0.75);
  --mode: #8b3fd4;   /* púrpura más oscuro para el modo día */
  --opmode: #4d7c00; /* el mismo verde, oscurecido: un neón sobre blanco no se lee */
  --led-rojo:  #e01414;  /* los mismos, un punto más oscuros para el modo día */
  --led-verde: #05a344;
  --led-amar:  #e0a400;
  --io-on:   #07b555;    /* el neón, bajado de tono: sobre blanco no se lee */
  --io-glow: rgba(7, 181, 85, .35);
  /* El arco mantiene el color encendido también de día; el número y la aguja
     se oscurecen lo justo para que se lean sobre blanco. El amarillo se
     oscurece SIN irse al naranja: se le baja el brillo, no el tono. */
  --g-verde: #12a868;  --g-verde-t: #0f8f58;
  --g-amar:  #f2c500;  --g-amar-t:  #a08600;
  --g-rojo:  #ff2800;  --g-rojo-t:  #d81c00;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo hidden tiene que ganar SIEMPRE: varios contenedores traen
   display:grid o display:flex en su clase, y eso pisaba el display:none del
   navegador — quedaban visibles aunque el código los diera por ocultos. */
[hidden] { display: none !important; }

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: radial-gradient(1200px 600px at 80% -10%, var(--glow) 0%, var(--bg) 55%);
  color: var(--text);
  min-height: 100vh;
}

a { color: var(--accent); text-decoration: none; }

/* ---------- Login ---------- */
.login-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 32px;
  box-shadow: var(--shadow);
}
.brand {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand small { display: block; font-size: 12px; color: var(--text-dim); letter-spacing: 3px; font-weight: 500; }
.login-card h2 { font-size: 15px; font-weight: 500; color: var(--text-dim); margin: 20px 0 18px; }
label { display: block; font-size: 12px; color: var(--text-dim); margin: 14px 0 6px; }
input, select {
  width: 100%;
  padding: 11px 13px;
  background: var(--bg-panel-2);
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-size: 14px;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }
.btn {
  width: 100%;
  margin-top: 22px;
  padding: 12px;
  border: none;
  border-radius: 9px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  color: #04121e;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: transform .06s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.error { color: var(--red); font-size: 13px; margin-top: 14px; min-height: 18px; }
.hint { margin-top: 18px; font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.6; }
.forgot-row { text-align: center; margin-top: 14px; font-size: 13px; }
.forgot-row a { cursor: pointer; }
.forgot-row a:hover { text-decoration: underline; }

/* ---------- Dashboard ---------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--topbar-bg);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar .brand { font-size: 20px; }
.topbar-right { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--text-dim); }
.live-dot { display: inline-flex; align-items: center; gap: 7px; }
.live-dot i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
.link-btn { background: none; border: 1px solid var(--border); color: var(--text-dim); padding: 7px 12px; border-radius: 8px; cursor: pointer; font-size: 12px; }
.link-btn:hover { color: var(--text); border-color: var(--accent); }
.theme-btn { font-size: 12px; white-space: nowrap; }

.container { padding: 24px 28px; max-width: 1280px; margin: 0 auto; }

/* Conteos de equipos: compactos, porque los protagonistas ahora son los medidores */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-bottom: 22px; }
.kpi {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
}
.kpi .num { font-size: 22px; font-weight: 800; }
.kpi .lbl { font-size: 10px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .8px; margin-top: 2px; }
.kpi.online .num { color: var(--green); }
.kpi.standby .num { color: var(--amber); }
.kpi.fault .num { color: var(--red); }
.kpi.offline .num { color: var(--grey); }

.section-title { font-size: 13px; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); margin: 8px 0 14px; }

/* Un equipo por FILA: el nombre a la izquierda y sus mediciones a lo ancho */
.cards { display: flex; flex-direction: column; gap: 14px; }
.dev-row { display: grid; grid-template-columns: 210px 1fr auto; gap: 18px;
  align-items: start; padding: 16px 18px; position: relative; }
.dev-side { display: flex; gap: 11px; align-items: flex-start;
  border-left: 3px solid var(--border); padding-left: 12px; }
.dev-ico svg { width: 30px; height: 30px; }
.dev-id { min-width: 0; }
.dev-id h3 { font-size: 16px; font-weight: 700; }
.dev-id .meta { margin: 2px 0 7px; }
/* Dentro de la fila, los recuadros de mediciones se reparten a lo ancho */
.dev-body { min-width: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr));
  gap: 4px 24px; align-items: start; }
.dev-body .rsection { margin-top: 0; }
.dev-body .readings { grid-template-columns: 1fr; gap: 7px; }
.dev-body .reading .rv { font-size: 16px; }
.dev-row .card-more { position: absolute; top: 16px; right: 18px; margin: 0; }
@media (max-width: 860px) {
  .dev-row { grid-template-columns: 1fr; }
  .dev-row .card-more { position: static; margin-top: 10px; }
}
.card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}
.card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.card-head h3 { font-size: 16px; font-weight: 700; }
.card .meta { font-size: 12px; color: var(--text-dim); margin-bottom: 16px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  padding: 5px 10px; border-radius: 20px;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.badge.online { color: var(--green); background: rgba(34, 227, 154, .12); }
.badge.standby { color: var(--amber); background: rgba(255, 176, 32, .12); }
.badge.fault { color: var(--red); background: rgba(255, 77, 109, .12); }
.badge.offline, .badge.unknown { color: var(--grey); background: rgba(100, 116, 139, .12); }

.readings { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }
.rsection { margin-top: 14px; }
.rsection:first-child { margin-top: 0; }
.rsection-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--accent); opacity: .8; margin-bottom: 8px; padding-bottom: 5px;
  border-bottom: 1px solid var(--border); }
.reading .rv { font-size: 19px; font-weight: 700; }
.reading .rv span { font-size: 12px; color: var(--text-dim); font-weight: 500; margin-left: 3px; }
.reading .rl { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: .5px; }

.chart-controls { display: flex; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.chart-controls select { width: auto; min-width: 200px; }
.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 18px; }
.chart-card { padding: 16px 18px; }
.chart-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.mini-chart { width: 100%; height: 260px; }

/* Vista de Gráficas: configuradas + osciloscopio */
.graf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); gap: 18px; margin-bottom: 8px; }
.graf-card { padding: 14px 16px; }
.graf-card-title { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.graf-card-chart { width: 100%; height: 240px; }
.osc-card { padding: 16px 18px; }
.osc-traces { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.osc-trace { display: flex; align-items: center; gap: 8px; }
.osc-trace-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.osc-trace .osc-dev { width: auto; min-width: 200px; flex: 0 1 auto; }
.osc-trace .osc-var { width: auto; min-width: 200px; flex: 1 1 auto; max-width: 340px; }
.osc-trace .osc-del { padding: 6px 10px; }
.osc-chart { width: 100%; height: 340px; }

/* ===================== Planes (pricing) ===================== */
.login-plans { width: 100%; max-width: 960px; margin: 26px auto 0; }
.plans-title { text-align: center; font-size: 14px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--text-dim); margin-bottom: 16px; }
.plans-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; align-items: start; }
.plan-card { position: relative; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px 20px; box-shadow: var(--shadow); }
.plan-card.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow); }
.plan-card.current { border-color: var(--green); }
.plan-badge { position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: #04121e;
  font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 12px; border-radius: 20px; white-space: nowrap; }
.plan-badge.current-badge { background: var(--green); }
.plan-name { font-size: 22px; font-weight: 800; }
.plan-tagline { font-size: 13px; color: var(--accent); margin-bottom: 14px; }
.plan-features { list-style: none; padding: 0; margin: 0; }
.plan-features li { font-size: 13.5px; line-height: 1.5; padding: 6px 0 6px 22px; position: relative;
  border-top: 1px solid var(--border); color: var(--text); }
.plan-features li:first-child { border-top: none; }
.plan-features li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 800; }
.plans-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 22px; flex-wrap: wrap; }
/* Etiqueta de plan en administración */
.plan-tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px;
  background: var(--bg-panel-2); border: 1px solid var(--border); }
.plan-tag.plan-avanzado { color: var(--accent); border-color: var(--accent); }
.plan-tag.plan-empresa { color: var(--green); border-color: var(--green); }
.ctl-label { color: var(--text-dim); font-size: 13px; align-self: center; }
.ev-export { width: auto; margin: 0; padding: 9px 16px; }
.ev-export2 { align-self: center; }
/* Dentro de la barra de filtros nada ocupa el ancho completo. Antes solo
   estaba contemplado el campo de fecha, así que al meter un campo de MES se
   estiraba a todo lo ancho y empujaba el resto a otra línea. El botón tenía
   el mismo problema: salía como una franja de lado a lado. */
.chart-controls input { width: auto; }
.chart-controls .btn { width: auto; margin-top: 0; padding: 9px 16px;
  align-self: center; }
.hint-inline { color: var(--text-dim); font-size: 12px; margin-bottom: 14px; }

/* Grilla configurable (GridStack) */
.grid-stack { background: transparent; }
.grid-stack-item-content { display: flex; flex-direction: column; overflow: hidden;
  padding: 12px 14px; inset: 0; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex: 0 0 auto; }
.chart-range { width: auto; padding: 3px 7px; font-size: 11px; flex: 0 0 auto;
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; }
.grid-stack-item-content .chart-title { cursor: move; user-select: none; flex: 1 1 auto; }
.grid-stack-item-content .chart-title::before { content: "⠿ "; color: var(--text-dim); font-size: 12px; }
.grid-stack-item-content .mini-chart { flex: 1 1 auto; height: auto; min-height: 0; width: 100%; }

/* Controles por serie dentro de cada gráfica (mostrar/ocultar + color) */
.chart-series-ctl { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 2px 0 6px; flex: 0 0 auto; }
.ser-ctl { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-dim); cursor: pointer; }
.ser-ctl input { width: auto; margin: 0; }
.ser-ctl input[type="checkbox"] { cursor: pointer; }
.ser-ctl input[type="color"] { width: 22px; height: 16px; padding: 0; border: 1px solid var(--border);
  border-radius: 4px; background: none; cursor: pointer; }
.grid-stack-item > .ui-resizable-se { /* asa de tamaño visible */
  width: 16px; height: 16px; right: 4px; bottom: 4px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  opacity: .5; border-bottom-right-radius: 4px; }
.grid-stack-placeholder > .placeholder-content {
  background: rgba(0, 229, 255, 0.08); border: 1px dashed var(--accent); border-radius: 14px; }

/* Encabezados de la vista de gráficas (empresa/sede y por equipo) */
.graf-site-header { font-size: 12px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--text-dim); margin: 26px 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.graf-site-header:first-child { margin-top: 0; }
.dev-graphs { margin-top: 18px; background: var(--bg-panel-2); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px 20px 20px; }
.dev-graphs-title { display: flex; align-items: center; gap: 9px; font-size: 17px; font-weight: 700;
  color: var(--text); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.dev-graphs-title small { font-size: 12px; font-weight: 500; color: var(--text-dim); margin-left: 2px; }
/* Dentro de cada bloque: 4 columnas fijas (bajan a 2 en pantallas angostas) */
.dev-graphs .chart-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dev-graphs .mini-chart { height: 230px; }
@media (max-width: 1280px) { .dev-graphs .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .dev-graphs .chart-grid { grid-template-columns: 1fr; } }
.tdot { width: 10px; height: 10px; border-radius: 50%; background: var(--grey); flex-shrink: 0; }
.tdot.t-grid { background: var(--accent); }
.tdot.t-generator { background: var(--green); }
.tdot.t-pv { background: var(--amber); }
.tdot.t-bess { background: var(--accent-2); }
.tdot.t-bus_tie { background: var(--red); }
.tdot.t-power_quality { background: #a78bfa; }
.tdot.t-meter { background: var(--text-dim); }

.grid-status { display: flex; gap: 14px; margin-top: 4px; }
.grid-pill { flex: 1; text-align: center; padding: 14px; border-radius: 10px; background: var(--bg-panel-2); border: 1px solid var(--border); }
.grid-pill .v { font-size: 15px; font-weight: 700; margin-top: 4px; }
.grid-pill.ok .v { color: var(--green); }
.grid-pill.bad .v { color: var(--red); }

.empty { color: var(--text-dim); text-align: center; padding: 40px; }

/* ---------- Diagrama unifilar ---------- */
.sld-wrap { margin-bottom: 24px; }
.sld-site { background: radial-gradient(120% 120% at 50% 0%, var(--glow) 0%, var(--bg-panel) 60%);
  border: 1px solid var(--border); border-radius: 16px; padding: 14px 8px 10px; margin-bottom: 16px; box-shadow: var(--shadow); }
.sld-site-title { display: flex; align-items: center; gap: 10px;
  font-size: 11px; text-transform: uppercase; letter-spacing: 2px;
  color: var(--text-dim); padding: 4px 12px 8px; }
.sld-site-title > span { min-width: 0; }
.sld-zoom { margin-left: auto; flex: none; background: var(--bg-panel-2);
  border: 1px solid var(--border); color: var(--text-dim); border-radius: 7px;
  padding: 5px 10px; font-size: 10.5px; letter-spacing: .5px; cursor: pointer;
  white-space: nowrap; text-transform: none; }
.sld-zoom:hover { border-color: var(--accent); color: var(--accent); }

.sld-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  /* Que el arrastre del unifilar no se lo robe la página de atrás */
  overscroll-behavior-x: contain; padding-bottom: 4px; }
/* Barra de desplazamiento visible: si no se ve, nadie adivina que el
   diagrama sigue hacia la derecha. */
.sld-scroll::-webkit-scrollbar { height: 9px; }
.sld-scroll::-webkit-scrollbar-track { background: var(--bg-panel-2); border-radius: 5px; }
.sld-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
.sld-scroll::-webkit-scrollbar-thumb:hover { background: var(--accent); }
.sld-scroll { scrollbar-width: thin; scrollbar-color: var(--border) var(--bg-panel-2); }
/* Ajustado al ancho: se anula el ancho mínimo y el SVG se encoge solo con su
   viewBox. Queda pequeño, pero completo y sin tener que arrastrar. */
.sld-scroll.fit { overflow-x: hidden; }
.sld-scroll.fit .sld-svg { min-width: 0 !important; width: 100%; height: auto; }
/* El min-width real lo pone el JS según el ancho del dibujo: nunca se comprime */
.sld-svg { width: 100%; height: auto; display: block; }

/* La barra toma el color de la energía que la alimenta (lo pone el JS) */
.sld-bus { stroke-width: 3.4; stroke-linecap: round; opacity: .55; }
.sld-bus-flow { stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: 5 11;
  animation: sldflow 1.1s linear infinite; opacity: .95; }
.sld-bus-label { font-size: 10px; font-weight: 700; letter-spacing: 2.4px; opacity: .9; }
/* Líneas finas y suaves; el color lo pone el estado del equipo */
.sld-line { stroke-width: 1.3; opacity: .45; fill: none; stroke-linecap: round; }
/* Sobre fondo blanco las líneas finas se pierden: un poco más de cuerpo */
html[data-theme="light"] .sld-line { opacity: .62; stroke-width: 1.4; }
.sld-flow { stroke-width: 1.3; stroke-dasharray: 4 9; opacity: .95; fill: none; stroke-linecap: round;
  animation: sldflow 1.1s linear infinite; }
@keyframes sldflow { to { stroke-dashoffset: -26; } }
.sld-sw { stroke-width: 2.4; stroke-linecap: round; }
.sld-node { cursor: pointer; }
.sld-halo { opacity: 0; transition: opacity .15s ease; }
.sld-node:hover .sld-halo { opacity: .16; }
.sld-icon { opacity: .95; }
.sld-name { text-anchor: middle; fill: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .3px; }
.sld-state { text-anchor: middle; font-size: 9px; font-weight: 700; letter-spacing: 1.3px; }
/* Etiqueta libre del cliente: "Generador de frío", "CAT 3512"… */
.sld-label { text-anchor: middle; fill: var(--text-dim); font-size: 9.5px;
  font-weight: 500; font-style: italic; }
/* Modo del control (AUTO / MANUAL / BLOQUEADO / PRUEBA) — púrpura, para que no
   se confunda con los colores de estado del equipo */
.sld-mode rect { fill: color-mix(in srgb, var(--mode) 18%, transparent);
  stroke: var(--mode); stroke-width: 1; }
.sld-mode text { text-anchor: middle; fill: var(--mode); font-size: 8.5px;
  font-weight: 800; letter-spacing: .9px; }
/* Modo de OPERACIÓN (ISLA/AMF/PSH/FP/MPE/LTO): mismo lado, tono más suave para
   que se distinga de un vistazo del modo del control */
.sld-opmode rect { fill: color-mix(in srgb, var(--opmode) 16%, transparent);
  stroke: var(--opmode); stroke-width: 1; }
.sld-opmode text { text-anchor: middle; fill: var(--opmode); font-size: 8.5px;
  font-weight: 800; letter-spacing: .9px; }
/* Tomas (PT/CT) y burbujas de potencia colgando de la fuente */
.sld-tap { stroke-width: .9; opacity: .55; fill: none; }
.sld-bub { fill: var(--bg-panel-2); stroke-width: .9; }
.sld-bub-v { text-anchor: middle; fill: var(--text); font-size: 10px; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.sld-bub-u { text-anchor: middle; fill: var(--text-dim); font-size: 7.5px; font-weight: 600; }

/* ---------- Unifilar de comunicaciones ---------- */
.comms-bus { stroke-width: 4; stroke-linecap: round; }
.comms-bus.eth { stroke: var(--accent); filter: drop-shadow(0 0 5px var(--accent)); }
.comms-bus.can { stroke: #a78bfa; filter: drop-shadow(0 0 5px #a78bfa); }
.comms-bus.bad { stroke: var(--red); filter: drop-shadow(0 0 6px var(--red)); animation: commblink .7s steps(1) infinite; }
.comms-buslabel { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; }
.comms-buslabel.eth { fill: var(--accent); }
.comms-buslabel.can { fill: #a78bfa; }
.comms-buslabel.bad { fill: var(--red); animation: commblink .7s steps(1) infinite; }
.comms-link { stroke: var(--text-dim); stroke-width: 2; opacity: .3; }
.comms-flow { stroke-width: 2.5; stroke-dasharray: 5 9; animation: sldflow .9s linear infinite; }
.comms-flow.eth { stroke: var(--accent); }
.comms-flow.can { stroke: #a78bfa; }
.comms-hl { stroke: var(--red); stroke-width: 3; animation: commblink .7s steps(1) infinite; }
.comms-node { fill: var(--bg-panel-2); stroke: var(--accent); stroke-width: 2; }
.comms-node.bad { stroke: var(--red); animation: commblink .7s steps(1) infinite; }
.comms-screen { fill: rgba(0,229,255,.14); stroke: var(--border); stroke-width: 1; }
.comms-node-txt { text-anchor: middle; fill: var(--text); font-size: 10px; font-weight: 800; }
.comms-led-lbl { fill: var(--text-dim); font-size: 8px; font-weight: 600; }
.comms-name { text-anchor: middle; fill: var(--text); font-size: 12px; font-weight: 600; }
.comms-name.bad { fill: var(--red); }
@keyframes commblink { 50% { opacity: .28; } }

/* ---------- Paneles de alarmas ---------- */
.alarm-wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.alarm-wrap .graf-site-header { grid-column: 1 / -1; }
.alarm-panel { padding: 0; overflow: hidden; }
.alarm-head { display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--border); }
.alarm-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; }
.alarm-count { background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
  min-width: 20px; height: 20px; border-radius: 10px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 6px; }
.alarm-reset { color: var(--accent); }
.alarm-reset:disabled { opacity: .35; cursor: default; }
.alarm-body { padding: 8px 16px 14px; }
.alarm-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.alarm-item:last-child { border-bottom: none; }
.alarm-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; }
.alarm-ai { background: rgba(0,229,255,.1); border: 1px solid var(--border); color: var(--accent);
  border-radius: 7px; padding: 4px 10px; font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.alarm-ai:hover { border-color: var(--accent); }
.alarm-ai:disabled { opacity: .5; cursor: default; }
.alarm-ai-panel { margin-top: 10px; }
.ai-loading { color: var(--accent); font-size: 13px; padding: 8px 0; }
.ai-err { color: var(--red); font-size: 13px; }
.ai-box { background: var(--bg-panel-2); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 8px; padding: 12px 14px; }
.ai-sig { font-size: 13px; color: var(--text); line-height: 1.5; margin-bottom: 10px; }
.ai-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--accent); margin: 8px 0 4px; }
.ai-box ul { margin: 0 0 6px; padding-left: 18px; }
.ai-box li { font-size: 13px; color: var(--text); line-height: 1.6; }
.ai-src { font-size: 10px; color: var(--text-dim); margin-top: 8px; text-align: right; }
.alarm-sev { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 5px; white-space: nowrap; }
.sev-critical .alarm-sev { background: rgba(255,77,109,.16); color: var(--red); }
.sev-warning .alarm-sev { background: rgba(255,176,32,.16); color: var(--amber); }
.sev-info .alarm-sev { background: rgba(0,229,255,.14); color: var(--accent); }
.alarm-msg { font-size: 13px; color: var(--text); }
.alarm-time { font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.alarm-none { color: var(--green); font-size: 13px; padding: 10px 0 4px; }

/* ---------- Admin ---------- */
.tabs { display: flex; gap: 8px; margin-bottom: 20px; border-bottom: 1px solid var(--border); }
.tab { background: none; border: none; color: var(--text-dim); padding: 12px 18px; cursor: pointer;
  font-size: 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

.panel-grid { display: grid; grid-template-columns: 340px 1fr; gap: 20px; align-items: start; }
@media (max-width: 820px) { .panel-grid { grid-template-columns: 1fr; } }
.form-card h3, .list-card h3 { font-size: 15px; margin-bottom: 14px; }
.form-card .btn { margin-top: 20px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text);
  text-transform: none; letter-spacing: 0; margin: 8px 0; cursor: pointer; }
.check input { width: auto; }
.checklist { max-height: 180px; overflow-y: auto; border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 12px; background: var(--bg-panel-2); }
.dim { color: var(--text-dim); font-size: 12px; }

.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th { text-align: left; color: var(--text-dim); font-weight: 500; text-transform: uppercase;
  font-size: 11px; letter-spacing: .5px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.tbl td { padding: 10px; border-bottom: 1px solid var(--border); }
.tbl tr:last-child td { border-bottom: none; }

.pill { border: none; border-radius: 20px; padding: 4px 14px; font-size: 12px; font-weight: 700;
  cursor: pointer; }
.pill.on { background: rgba(34,227,154,.15); color: var(--green); }
.pill.off { background: rgba(100,116,139,.15); color: var(--grey); }
.actions { display: flex; gap: 6px; }
.edit, .del { background: none; border: 1px solid var(--border); border-radius: 6px;
  cursor: pointer; padding: 2px 9px; font-size: 13px; }
.edit { color: var(--accent); }
.edit:hover { border-color: var(--accent); }
.del { color: var(--red); }
.del:hover { border-color: var(--red); }

.msg { min-height: 18px; font-size: 13px; margin-top: 10px; }
.msg.ok { color: var(--green); }
.msg.err { color: var(--red); }

/* ---------- Layout con menú lateral ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: 234px; flex-shrink: 0; background: var(--bg-panel);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; transition: width .2s ease;
}
.layout.collapsed .sidebar { width: 68px; }

.sidebar-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px; height: 62px; border-bottom: 1px solid var(--border);
}
.brand-mini { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; letter-spacing: .5px; }
.brand-mini b { background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.layout.collapsed .brand-mini span { display: none; }
.collapse-btn { background: none; border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; cursor: pointer; padding: 5px; display: flex; flex-shrink: 0; }
.collapse-btn:hover { color: var(--text); border-color: var(--accent); }
.layout.collapsed .collapse-btn svg { transform: rotate(180deg); }

.nav { padding: 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.nav-item { position: relative; display: flex; align-items: center; gap: 13px; padding: 11px 12px;
  border-radius: 10px;
  color: var(--text-dim); cursor: pointer; white-space: nowrap; overflow: hidden; font-size: 14px; }

/* Semáforo del menú de Alarmas: verde = ninguna activa, rojo = hay al menos
   una sin resetear, en cualquier equipo de cualquier sede. Late cuando está
   en rojo, porque un punto quieto en un menú lateral no lo ve nadie. */
.nav-dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--green); box-shadow: 0 0 7px rgba(34,227,154,.75); }
.nav-dot.on { background: var(--red); box-shadow: 0 0 9px rgba(255,77,109,.9);
  animation: navDotLate 1.5s ease-in-out infinite; }
@keyframes navDotLate { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
/* Con la barra plegada el texto se oculta, pero el semáforo NO: si hay que
   pasar por ahí para verlo, deja de servir. Se va a la esquina del icono. */
.layout.collapsed .nav-item span.nav-dot { display: block; position: absolute;
  top: 7px; right: 7px; margin: 0; }
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { background: var(--bg-panel-2); color: var(--text); }
.nav-item.active { background: rgba(0,229,255,.1); color: var(--accent); font-weight: 600; }
.layout.collapsed .nav-item { justify-content: center; }
.layout.collapsed .nav-item span { display: none; }
.nav-caret { margin-left: auto; flex-shrink: 0; transition: transform .15s ease; opacity: .7; }
.layout.collapsed .nav-caret { display: none; }

/* Submenú de equipos bajo Dashboard */
.nav-sub { display: none; flex-direction: column; gap: 2px; margin: 2px 0 6px; }
.nav-sub.open { display: flex; }
.layout.collapsed .nav-sub { display: none !important; }
.nav-sub-item { display: flex; align-items: center; gap: 8px; padding: 7px 12px 7px 42px;
  border-radius: 8px; color: var(--text-dim); cursor: pointer; font-size: 13px;
  white-space: nowrap; overflow: hidden; }
.nav-sub-item:hover { background: var(--bg-panel-2); color: var(--text); }
.nav-sub-item.active { color: var(--accent); background: rgba(0,229,255,.08); font-weight: 600; }
.nav-sub-item .tdot { width: 8px; height: 8px; flex-shrink: 0; }

/* Íconos representativos por tipo de equipo (submenús) */
.ticon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--grey); }
.ticon svg { width: 17px; height: 17px; display: block; }
.nav-sub-item .ticon svg { width: 16px; height: 16px; }
.ticon.t-grid { color: var(--accent); }
.ticon.t-generator { color: var(--green); }
.ticon.t-pv { color: var(--amber); }
.ticon.t-bess { color: var(--accent-2); }
.ticon.t-bus_tie { color: var(--red); }
.ticon.t-wind { color: var(--accent); }
.ticon.t-load { color: var(--text-dim); }
.ticon.t-power_quality { color: #a78bfa; }
.ticon.t-meter { color: var(--text-dim); }
.nav-sub-item.active .ticon { color: inherit; }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.main .topbar { position: sticky; top: 0; }
.view-title { font-size: 20px; font-weight: 700; }
/* --- Logo del cliente en el menú lateral --- */
.cli-logo { display: flex; align-items: center; justify-content: center;
  padding: 16px 12px; border-bottom: 1px solid var(--border); }
.cli-logo img { max-width: 100%; max-height: 104px; width: auto; height: auto;
  object-fit: contain; display: block; }
/* Con el menú colapsado se reduce, para que no rompa la franja angosta */
.layout.collapsed .cli-logo { padding: 10px 5px; }
.layout.collapsed .cli-logo img { max-height: 34px; }

/* --- Cargador de logo en Administración --- */
.logo-box { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.logo-prev { flex: 0 0 auto; width: 190px; height: 66px; display: grid; place-items: center;
  background: var(--bg-panel-2); border: 1px dashed var(--border); border-radius: 10px;
  overflow: hidden; }
.logo-prev img { max-width: 178px; max-height: 56px; object-fit: contain; }
.logo-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.logo-acts .link-btn { padding: 3px 0; font-size: 12.5px; }

/* --- Selector de empresa con buscador --- */
.tsel { position: relative; margin-left: 16px; }
.tsel-btn { display: flex; align-items: center; gap: 8px; padding: 7px 12px;
  font: inherit; font-size: 14px; font-weight: 600; background: var(--bg-panel-2);
  border: 1px solid var(--accent); border-radius: 8px; color: var(--text);
  cursor: pointer; max-width: 300px; }
.tsel-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsel-btn:hover { filter: brightness(1.08); }
.tsel-caret { flex-shrink: 0; opacity: .6; margin-left: auto; }
.tsel-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  width: 320px; max-width: 78vw; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  padding: 10px; }
.tsel-q { width: 100%; padding: 9px 12px; font-size: 13.5px; }
.tsel-list { max-height: 300px; overflow-y: auto; margin-top: 8px;
  display: flex; flex-direction: column; gap: 1px; }
.tsel-item { display: block; width: 100%; text-align: left; padding: 8px 11px;
  font: inherit; font-size: 13.5px; background: none; border: none; color: var(--text);
  border-radius: 8px; cursor: pointer; }
.tsel-item:hover { background: var(--bg-panel-2); }
.tsel-item.sel { background: var(--bg-panel-2); color: var(--accent); font-weight: 700; }
.tsel-none { padding: 14px 11px; font-size: 12.5px; color: var(--text-dim); text-align: center; }

/* --- Históricos --- */
.hist-wrap { padding: 0; overflow: hidden; }
.hist-scroll { overflow: auto; max-height: 66vh; }
.hist-tbl { font-size: 12px; white-space: nowrap; border-collapse: collapse; width: 100%; }
.hist-tbl th, .hist-tbl td { padding: 6px 12px; border-bottom: 1px solid var(--border); text-align: right; }
.hist-tbl th:first-child, .hist-tbl td:first-child,
.hist-tbl th:nth-child(2), .hist-tbl td:nth-child(2) { text-align: left; }
.hist-tbl th { position: sticky; top: 0; background: var(--bg-panel-2); font-size: 10px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--text-dim); z-index: 1; }
.hist-tbl th small { text-transform: none; letter-spacing: 0; }
.hist-tbl tr:hover td { background: var(--bg-panel-2); }
.hist-tbl td { font-variant-numeric: tabular-nums; }
.hist-time { color: var(--text-dim); }
.hist-ev { color: var(--text-dim); }
.hist-alarm { color: var(--red); font-weight: 600; }
.hist-msg { min-height: 18px; font-size: 12px; margin: 6px 0; }
.hist-msg.ok { color: var(--green); }
.hist-msg.bad { color: var(--red); }

/* --- Geoposicionamiento --- */
.geo-map { height: 340px; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; z-index: 0; }
.geo-layout { display: grid; grid-template-columns: 300px 1fr; gap: 16px; height: calc(100vh - 130px); }
.geo-side { overflow-y: auto; padding: 14px; }
.geo-side-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--accent); margin-bottom: 8px; }
.geo-emp { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin: 12px 0 4px; }
.geo-site { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 13px; }
.geo-site:hover { background: var(--bg-panel-2); }
.geo-site small { margin-left: auto; color: var(--text-dim); font-size: 11px; }
.geo-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.geo-dot.ok { background: var(--green); }
.geo-dot.bad { background: var(--red); animation: geopulse 1.1s infinite; }
.geo-map-full { height: 100%; border-radius: 12px; border: 1px solid var(--border); overflow: hidden; z-index: 0; }
.site-pin { width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.35); }
.site-pin.ok { background: #22e39a; }
.site-pin.bad { background: #ff4d6d; animation: geopulse 1.1s infinite; }

/* El punto del mapa es el CONTROL instalado en esa sede, en miniatura. Se ve
   que ahí hay un equipo nuestro, no una chincheta cualquiera. */
.site-pin-wrap { background: none; border: 0; }
.site-pin-agc { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .55)); line-height: 0; }
.site-pin-agc svg { display: block; }
.site-pin-agc.ok { filter: drop-shadow(0 0 5px rgba(22, 224, 95, .55))
                           drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.site-pin-agc.bad { animation: geopulse 1.1s infinite;
  filter: drop-shadow(0 0 6px rgba(255, 45, 45, .6))
          drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }

/* Botón para volver a encuadrar el mapa en las sedes */
.geo-recentrar a { font-size: 17px; line-height: 26px; width: 26px; height: 26px;
  text-align: center; display: block; text-decoration: none; }
@keyframes geopulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 0 0 rgba(255,77,109,.6); }
  50% { box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 0 12px rgba(255,77,109,0); }
}
.leaflet-popup-content { font-size: 12px; line-height: 1.5; }

/* --- Reportes: selección de fuentes --- */
.rp-sources { padding: 16px 18px; }
.rp-src-head { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; font-weight: 600; border-bottom: 1px solid var(--border); padding-bottom: 10px; }
.rp-src-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px 20px; }
.rp-src { display: flex; align-items: center; gap: 8px; padding: 5px 4px; font-size: 14px; cursor: pointer; }
.rp-src .ticon svg { width: 17px; height: 17px; }
.rp-src .dim { margin-left: auto; font-size: 11px; }

/* Reporte visualizado en pantalla */
.rp-result { margin-top: 18px; }
.rp-doc { padding: 22px 26px; }
.rp-doc-head { border-bottom: 2px solid var(--accent); padding-bottom: 12px; margin-bottom: 8px; }
.rp-doc-head h3 { margin: 0 0 4px; font-size: 19px; }
.rp-meta { font-size: 12px; color: var(--text-dim); }
.rp-sec { margin-top: 18px; }
.rp-sec h4 { margin: 0 0 6px; font-size: 14px; color: var(--accent);
  text-transform: uppercase; letter-spacing: .6px; }
.rp-sec p { margin: 0 0 6px; line-height: 1.55; font-size: 14px; color: var(--text); }
.rp-sec ul { margin: 4px 0 0; padding-left: 20px; }
.rp-sec li { margin: 4px 0; line-height: 1.5; font-size: 14px; }
.rp-subtitle { font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.rp-table-wrap { overflow-x: auto; }
.rp-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rp-table th { text-align: left; padding: 9px 12px; background: var(--bg-panel-2);
  color: var(--text-dim); font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rp-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
.rp-table tbody tr:hover { background: var(--bg-panel-2); }
.rp-empty { text-align: center; color: var(--text-dim); padding: 18px; }
.rp-chart { width: 100%; height: 340px; margin-top: 14px; }

/* Configuración: alarmas y umbrales */
.cfg-subtabs { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.cfg-subtab { background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text);
  padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.cfg-subtab.active { border-color: var(--accent); color: var(--accent); }
.cfg-subtab.soon { opacity: .5; cursor: default; }
.chk-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--accent); margin: 8px 0 3px; }
.chk-group-label:first-child { margin-top: 0; }
.cfg-subtab.soon:hover { border-color: var(--border); }
.cfg-soon { font-size: 12px; color: var(--text-dim); }
/* Selector de empresa (desplegable con buscador) */
.cfg-tenant-picker .cfg-tenant-search { margin-bottom: 8px; }
.cfg-tenant-picker .cfg-tenant-select { font-weight: 600; }
/* Grupos de reglas por equipo */
.rule-group { margin-bottom: 18px; }
.rule-group-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700;
  color: var(--text); padding: 6px 0 10px; border-bottom: 1px solid var(--border); margin-bottom: 10px; }
.rule-group-count { font-size: 11px; font-weight: 800; background: var(--bg-panel-2); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 20px; padding: 1px 9px; }

/* ===================== Admin jerárquico ===================== */
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); margin-bottom: 18px; }
.crumbs a { cursor: pointer; color: var(--accent); }
.crumbs a:hover { text-decoration: underline; }
.crumb-sep { color: var(--text-dim); }
.drill-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.drill-head h2 { font-size: 22px; }
.drill-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.drill-actions { display: flex; gap: 8px; }
.btn-inline { width: auto; margin: 0; padding: 9px 16px; }
.link-btn.danger:hover { color: var(--red); border-color: var(--red); }
.drill-section { margin-top: 26px; }
.drill-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.drill-section-head h3 { font-size: 15px; }

/* Tarjetas de empresa / sede */
.empresa-cards, .sede-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.empresa-card, .sede-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px; cursor: pointer; transition: border-color .15s, transform .06s; box-shadow: var(--shadow); }
.empresa-card:hover, .sede-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.ec-name, .sc-name { font-size: 17px; font-weight: 800; }
.ec-slug { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sc-sub { font-size: 12px; color: var(--text-dim); margin: 4px 0 10px; }
.ec-counts { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; font-size: 13px; color: var(--text); }
.sc-counts { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; margin-top: 8px; }
.ec-go { font-size: 12px; color: var(--accent); font-weight: 600; }

/* KPIs del detalle */
.kpis-admin { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.kpi-a { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.kpi-a .num { font-size: 28px; font-weight: 800; color: var(--accent); }
.kpi-a .lbl { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

/* Tarjetas de dispositivo */
.device-cards { display: flex; flex-direction: column; gap: 10px; }
.device-card { display: flex; align-items: center; gap: 14px; background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 16px; }
.dc-icon { font-size: 22px; }
.dc-info { flex: 1; min-width: 0; }
.dc-name { font-weight: 700; }
.dc-sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.dc-actions { display: flex; gap: 6px; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: flex-start;
  justify-content: center; padding: 40px 16px; z-index: 100; overflow-y: auto; }
.modal-overlay[hidden] { display: none; }
.modal-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px; width: 100%;
  max-width: 460px; box-shadow: var(--shadow); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px;
  border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 16px; }
.modal-close { background: none; border: none; color: var(--text-dim); font-size: 18px; cursor: pointer; }
.modal-close:hover { color: var(--text); }
.modal-body { padding: 18px 20px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.modal-body .checklist { max-height: 160px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; padding: 8px; }

/* Asistente (wizard) */
.wiz-steps { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.wiz-step { font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 20px; background: var(--bg-panel-2);
  color: var(--text-dim); border: 1px solid var(--border); }
.wiz-step.active { background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: #04121e; border-color: transparent; }
.wiz-step.done { color: var(--green); border-color: var(--green); }
.wiz-added { margin-bottom: 12px; }
.wiz-added-item { font-size: 13px; color: var(--green); padding: 3px 0; }
.cfg-filters { display: flex; gap: 18px; padding: 16px 18px; margin-bottom: 16px; flex-wrap: wrap; }
.cfg-filters > div { flex: 1; min-width: 200px; }
.cfg-filters label { margin-top: 0; }
.test-mail-row { display: flex; gap: 8px; }
.test-mail-row input { flex: 1; }
.test-mail-row .btn { width: auto; margin: 0; white-space: nowrap; padding: 11px 14px; }
.rule-row { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin-bottom: 10px;
  background: var(--bg-panel-2); }
.rule-row.off { opacity: .6; }
.rule-main { font-size: 14px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rule-sev { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px;
  padding: 3px 8px; border-radius: 20px; }
.rule-sev.sev-critical { background: rgba(255,77,109,.16); color: var(--red); }
.rule-sev.sev-warning { background: rgba(255,176,32,.16); color: var(--amber); }
.rule-sev.sev-info { background: rgba(0,229,255,.14); color: var(--accent); }
.rule-msg-txt { font-size: 12.5px; color: var(--text-dim); margin-top: 5px; font-style: italic; }
.rule-notify { font-size: 12px; color: var(--accent); margin-top: 5px; }
.notify-box { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; margin: 14px 0 4px;
  background: var(--bg-panel-2); }
.notify-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); margin-bottom: 8px; }
.notify-box .check { margin: 6px 0; }
.notify-box .check.dim { opacity: .55; }
.soon-tag { font-size: 10px; background: var(--border); color: var(--text-dim); padding: 1px 6px;
  border-radius: 10px; margin-left: 4px; }
.notify-hint { font-size: 11.5px; color: var(--text-dim); margin-top: 8px; line-height: 1.5; }
.rule-actions { display: flex; gap: 8px; margin-top: 10px; }
.rule-actions .del:hover { color: var(--red); border-color: var(--red); }
/* El formulario de reglas queda fijo mientras se recorre la lista */
#cfg-alarmas .form-card { position: sticky; top: 16px; }
@media (max-width: 820px) { #cfg-alarmas .form-card { position: static; } }
.form-card.flash { animation: cardflash 1.1s ease; }
@keyframes cardflash {
  0% { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
  100% { box-shadow: 0 0 0 0 transparent, var(--shadow); }
}
.content { padding: 24px 28px; width: 100%; }

/* Dashboard en dos columnas: contenido + panel derecho */
.dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; }
.dash-main { min-width: 0; }
@media (max-width: 1100px) { .dash-layout { grid-template-columns: 1fr; } }

.dash-aside { position: sticky; top: 86px; }
.dash-aside-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--text-dim); margin-bottom: 12px; }
.gc-card { background: radial-gradient(120% 120% at 50% 0%, var(--glow) 0%, var(--bg-panel) 65%);
  border: 1px solid var(--border); border-radius: 16px; padding: 18px; box-shadow: var(--shadow); margin-bottom: 16px; }
.gc-dev { font-size: 16px; font-weight: 800; margin-bottom: 14px; }
.gc-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-dim); margin: 12px 0 8px; }
.gc-label .dim { text-transform: none; letter-spacing: 0; }
.gc-current { font-size: 15px; font-weight: 700; color: var(--accent);
  background: rgba(0,229,255,.08); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; }
.gc-btns { display: flex; flex-direction: column; gap: 6px; }
.gc-toggle { display: flex; gap: 8px; }
.gc-toggle .gc-opt { flex: 1; text-align: center; }
.gc-opt { background: var(--bg-panel-2); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: 8px; padding: 9px 12px; font-size: 13px; font-weight: 600; cursor: pointer; text-align: left; }
.gc-opt:hover { color: var(--text); border-color: var(--accent); }
.gc-opt.on { background: linear-gradient(90deg, var(--accent-2), var(--accent)); color: #04121e; border-color: transparent; }
.gc-ro { font-size: 11px; color: var(--text-dim); margin-top: 12px; text-align: center; }
.gc-sp-box { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }
.gc-sp { margin-bottom: 10px; }
.gc-sp-l { font-size: 12px; color: var(--text); margin-bottom: 5px; }
.gc-sp-l .dim { color: var(--text-dim); font-size: 11px; }
.gc-sp-in { display: flex; align-items: center; gap: 6px; }
.gc-sp-in input { flex: 1; padding: 7px 9px; font-size: 14px; font-weight: 600;
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 7px; color: var(--text); }
.gc-sp-in input:focus { outline: none; border-color: var(--accent); }
.gc-sp-u { font-size: 12px; color: var(--text-dim); }
.gc-sp-save { border: none; border-radius: 7px; background: var(--accent-2); color: #04121e;
  font-weight: 700; font-size: 12px; padding: 7px 10px; cursor: pointer; white-space: nowrap; }
.gc-sp-save:hover { filter: brightness(1.1); }
.gc-sp-save:disabled { opacity: .7; cursor: default; }
.gc-sp-val { font-size: 15px; font-weight: 700; color: var(--accent); }
.gc-nosp { font-size: 12px; color: var(--text-dim); }

/* Placeholders "en construcción" */
.placeholder { text-align: center; padding: 72px 20px; color: var(--text-dim); }
.ph-icon { font-size: 46px; margin-bottom: 14px; }
.placeholder h2 { color: var(--text); margin-bottom: 8px; font-size: 20px; }
.placeholder p { max-width: 440px; margin: 0 auto 18px; line-height: 1.6; }
.badge-soon { display: inline-block; padding: 6px 14px; border-radius: 20px;
  background: rgba(255,176,32,.12); color: var(--amber); font-size: 12px; font-weight: 700; }

@media (max-width: 720px) {
  .sidebar { width: 68px; }
  .brand-mini span, .nav-item span { display: none; }
  .nav-item { justify-content: center; }
}

/* ---------- Tarjeta clickeable + detalle de equipo ---------- */
.card.clickable { cursor: pointer; transition: border-color .15s ease, transform .05s ease; }
.card.clickable:hover { border-color: var(--accent); }
.card.clickable:active { transform: translateY(1px); }
.card-more { margin-top: 14px; font-size: 12px; color: var(--accent); opacity: .85; }

.detail-header { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; flex-wrap: wrap; margin-bottom: 20px; }
.detail-header h2 { font-size: 20px; }
.detail-conn { display: flex; gap: 24px; font-size: 14px; }
.detail-conn .dim { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 2px; }

/* --- Detalle de equipo: ficha técnica compacta tipo "scan" --- */
.detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; align-items: start; }
.detail-col { min-width: 0; }
@media (max-width: 900px) { .detail-cols { grid-template-columns: 1fr; } }
.detail-group { margin: 0 0 16px; background: var(--bg-panel);
  border: 1px solid var(--border); border-radius: 12px; padding: 12px 18px 14px; }
.detail-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--accent); margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
.detail-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 32px; }
/* Grupos en dos columnas explícitas (izquierda / derecha) */
.detail-grid.dual { grid-template-columns: 1fr 1fr; align-items: start; }
.dcol { display: flex; flex-direction: column; min-width: 0; }
.detail-item { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-bottom: 1px dashed var(--border); min-height: 29px; }
.di-label { font-size: 12px; color: var(--text-dim); letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0; }
.di-value { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
  white-space: nowrap; text-align: right; }
.di-value span { font-size: 11px; color: var(--text-dim); font-weight: 500; margin-left: 2px; }
.di-lock { font-size: 10px; opacity: .7; }
.detail-item.editable { border-bottom-color: rgba(0,229,255,.35); }
.di-edit { display: flex; gap: 6px; align-items: center; }
.di-edit input { width: 92px; padding: 4px 8px; font-size: 13px; font-weight: 600; text-align: right;
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.di-edit input:focus { outline: none; border-color: var(--accent); }
.di-save { border: none; border-radius: 6px; background: var(--accent-2); color: #04121e;
  font-weight: 700; font-size: 11px; padding: 4px 10px; cursor: pointer; }
.di-save:hover { filter: brightness(1.1); }
.group-note { float: right; font-size: 10px; letter-spacing: .5px; color: var(--text-dim);
  text-transform: none; font-weight: 500; }

/* --- Parámetros del controlador (AGC-150) filtrados por pestaña --- */
.cp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cp-cat { padding: 7px 12px; font-size: 14px; font-weight: 600; background: var(--bg-panel-2);
  border: 1px solid var(--border); border-radius: 8px; color: var(--text); min-width: 220px; }
.cp-cat:focus { outline: none; border-color: var(--accent); }
.cp-count { font-size: 12px; color: var(--text-dim); margin-left: auto; }
.cp-msg { min-height: 18px; font-size: 12px; margin-bottom: 6px; }
.cp-msg.ok { color: var(--green); }
.cp-msg.bad { color: var(--red); }
.cp-list { max-height: 600px; overflow-y: auto; }
.cp-row { border-bottom: 1px dashed var(--border); padding: 8px 6px; }
.cp-row:hover { background: var(--bg-panel-2); }
.cp-rowtop { display: flex; align-items: center; gap: 12px; }
.cp-ch { font-variant-numeric: tabular-nums; color: var(--text-dim); font-size: 12px; min-width: 42px; }
.cp-name { font-weight: 600; font-size: 13px; flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-enable { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim);
  white-space: nowrap; cursor: pointer; }
.cp-enable input { accent-color: var(--accent); width: 15px; height: 15px; cursor: pointer; }
.cp-fields { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 6px 0 0 54px; }
.cp-field { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.cp-flabel { color: var(--text-dim); }
.cp-field input { width: 92px; padding: 3px 7px; font-size: 13px; font-weight: 600; text-align: right;
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.cp-field input:focus, .cp-field select:focus { outline: none; border-color: var(--accent); }
.cp-field select { padding: 3px 7px; font-size: 13px; font-weight: 600;
  background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 6px; color: var(--text); }
.cp-inh .cp-inhval { font-size: 12px; color: var(--amber); background: rgba(255,176,32,.1);
  border: 1px solid rgba(255,176,32,.3); border-radius: 6px; padding: 2px 8px; }
.cp-field .cp-val { font-variant-numeric: tabular-nums; }
.cp-unit { font-size: 11px; color: var(--text-dim); }
.cp-save { border: none; border-radius: 6px; background: var(--accent-2); color: #04121e;
  font-weight: 700; font-size: 11px; padding: 5px 12px; cursor: pointer; }
.cp-save:hover { filter: brightness(1.1); }
.cp-send { border: 1px solid var(--accent); border-radius: 6px; background: transparent; color: var(--accent);
  font-weight: 700; font-size: 11px; padding: 5px 12px; cursor: pointer; white-space: nowrap; }
.cp-send:hover { background: rgba(0,229,255,.12); }
.cp-mb { font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; opacity: .8; }
@media (max-width: 760px) { .cp-fields { margin-left: 0; } }

/* --- Simulado / Real (badges en admin) + dato no leído (⚠) --- */
.sim-badge { font-size: 10px; font-weight: 700; color: #b8860b; background: rgba(255,176,32,.14);
  border: 1px solid rgba(255,176,32,.4); border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.real-badge { font-size: 10px; font-weight: 700; color: #10b981; background: rgba(16,185,129,.12);
  border: 1px solid rgba(16,185,129,.4); border-radius: 999px; padding: 1px 8px; margin-left: 6px; white-space: nowrap; }
.stale-dot { font-size: 10px; line-height: 1; vertical-align: super; opacity: .9; cursor: help;
  filter: saturate(1.4); }
.detail-item.stale .di-value, .reading.stale .rv { color: #d9a017; }

/* --- Selección de variables del mapa Modbus (config) --- */
.var-catalog { max-height: 470px; overflow-y: auto; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; }
.var-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.var-row:last-child { border-bottom: 0; }
.var-row:hover { background: rgba(0,229,255,.06); }
.var-row.on { background: rgba(16,185,129,.10); }
.var-row input { grid-row: span 2; }
.var-name { font-size: 13px; color: var(--text); }
.var-meta { grid-column: 2; font-size: 10px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.sel-row { display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 2px; border-bottom: 1px solid var(--border); font-size: 13px; }
.sel-row:last-child { border-bottom: 0; }
#var-selected { max-height: 470px; overflow-y: auto; }

/* --- Botón ⭐ "Resumen" en la selección de variables Modbus --- */
.sel-row { display: flex; align-items: center; gap: 8px; }
.sel-row > span { flex: 1; }
.star-btn { background: transparent; border: none; cursor: pointer; font-size: 15px; line-height: 1;
  padding: 2px 4px; opacity: .55; filter: grayscale(1); transition: opacity .15s, filter .15s; }
.star-btn:hover { opacity: 1; }
.star-btn.on { opacity: 1; filter: none; }

/* --- Editor de diagrama (unifilar por sede) --- */
.sld-brk-label { font-size: 10px; font-weight: 700; text-anchor: start; letter-spacing: .3px; }
.diag-preview { min-height: 180px; overflow-x: auto; }
.diag-col-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px;
  background: var(--bg-panel-2); }
.diag-col-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.diag-src { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 6px; }
.diag-src:first-of-type { border-top: none; padding-top: 0; margin-top: 0; }

/* ============ Cartera de empresas (tarjetas) ============ */
.pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 16px; margin-top: 16px; }
.pf-card { background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; cursor: pointer;
  transition: transform .1s ease, border-color .15s ease; }
.pf-card:hover { transform: translateY(-2px); border-color: var(--accent); }
.pf-head { display: flex; align-items: center; gap: 9px; }
.pf-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.pf-name { font-weight: 700; font-size: 15px; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-alarm { font-size: 10px; font-weight: 700; color: var(--red);
  border: 1px solid var(--red); border-radius: 6px; padding: 2px 6px; white-space: nowrap; }
.pf-kw { font-size: 27px; font-weight: 800; margin: 10px 0 2px;
  font-variant-numeric: tabular-nums; }
.pf-kw i { font-style: normal; font-size: 13px; font-weight: 600;
  color: var(--text-dim); margin-left: 5px; }
.pf-stats { display: flex; gap: 14px; font-size: 12px; color: var(--text-dim); }
.pf-stats b { color: var(--text); }
.pf-bar { display: flex; gap: 2px; height: 6px; margin: 12px 0 7px; }
.pf-bar i { border-radius: 3px; min-width: 4px; }
.pf-legend { display: flex; justify-content: space-between; gap: 10px;
  font-size: 10.5px; font-weight: 600; }

/* ============ Ventana emergente de una fuente del unifilar ============ */
.modal-back { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4, 9, 17, .62); backdrop-filter: blur(3px); padding: 20px;
  animation: dmFade .14s ease; }
@keyframes dmFade { from { opacity: 0; } }
.modal-box { width: 100%; max-width: 620px; max-height: 84vh; display: flex; flex-direction: column;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); overflow: hidden;
  animation: dmUp .16s cubic-bezier(.2, .8, .3, 1); }
@keyframes dmUp { from { transform: translateY(10px); opacity: .6; } }
.modal-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-bottom: 1px solid var(--border); background: var(--bg-panel-2); }
.modal-icon .ticon svg { width: 26px; height: 26px; }
.modal-titles { min-width: 0; flex: 1; }
.modal-titles h3 { font-size: 17px; font-weight: 700; }
.modal-sub { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.modal-state { font-size: 10px; font-weight: 800; letter-spacing: 1.3px; white-space: nowrap; }
.modal-x { background: none; border: none; color: var(--text-dim); font-size: 17px;
  cursor: pointer; padding: 4px 6px; border-radius: 7px; line-height: 1; }
.modal-x:hover { color: var(--text); background: var(--bg-panel); }
/* Dos columnas SOLO en el detalle del equipo del dashboard (#dmBody), que
   muestra grupos de mediciones. La hoja de estilos es la misma para las dos
   páginas, y cuando esta regla iba suelta como .modal-body también le caía al
   formulario de administración: ahí el contenido es una secuencia de etiqueta
   + campo, y la rejilla los repartía en celdas distintas — "Correo" quedaba
   arriba a la derecha y su casilla abajo a la izquierda. */
#dmBody { overflow-y: auto; padding: 14px 16px; display: grid;
  grid-template-columns: 1fr 1fr; gap: 12px 20px; align-content: start; }
@media (max-width: 560px) { #dmBody { grid-template-columns: 1fr; } }
.dm-group { break-inside: avoid; }
/* Los títulos de grupo van en el color de acento, como en las tarjetas: así el
   ojo encuentra el bloque que busca sin tener que leerlo todo. */
.dm-gtitle { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent); padding-bottom: 5px; margin-bottom: 5px;
  border-bottom: 1px solid var(--accent); border-bottom-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.dm-row { display: flex; align-items: baseline; gap: 10px; padding: 3.5px 0; font-size: 13px; }
.dm-l { color: var(--text-dim); flex: 1; min-width: 0; }
.dm-v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dm-v i { font-style: normal; font-weight: 500; color: var(--text-dim); font-size: 11px; }
.dm-row.stale .dm-v { color: var(--text-dim); }
.modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; border-top: 1px solid var(--border); background: var(--bg-panel-2);
  font-size: 11.5px; }

/* ============ Medidores (gauges) sobre el unifilar — Fase B ============ */
/* SEIS por renglón, fijo. Antes era auto-fit y el navegador metía los que le
   cupieran: con doce medidores eso partía los renglones donde caía, y estos
   dos están pensados como dos ideas distintas —arriba el estado de la planta,
   abajo de dónde viene la energía—. En pantallas chicas se baja a tres y a
   dos, que respeta el orden aunque parta los grupos. */
.gauge-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px; margin-bottom: 20px; }
@media (max-width: 1180px) { .gauge-row { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .gauge-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gauge-row.hidden { display: none; }
.gcard { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 8px 12px; box-shadow: var(--shadow); text-align: center; }
.gcard h4 { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 2px; }
.gcard svg { display: block; margin: 0 auto; width: 100%; max-width: 156px; height: auto; }
.g-track { fill: none; stroke: var(--bg-panel-2); stroke-width: 9; stroke-linecap: round; }
.g-val { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke .2s ease; }
.g-num { text-anchor: middle; fill: var(--text); font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums; }
.g-unit { text-anchor: middle; fill: var(--text-dim); font-size: 11px; font-weight: 600; }
/* Escala del medidor: marquitas y números, como un instrumento analógico */
.g-tick { stroke: var(--text-dim); stroke-width: 1.2; opacity: .5; stroke-linecap: round; }
.g-tk { text-anchor: middle; fill: var(--text-dim); font-size: 7.5px; font-weight: 600;
  opacity: .8; font-variant-numeric: tabular-nums; }
/* En modo día la pista se ve muy clara sobre el panel blanco: se oscurece un poco */
html[data-theme="light"] .g-track { stroke: #e2e8f0; }

/* ============ Avisos del sistema (bitácora viva) — Fase C ============ */
.sec-note { font-size: 11px; color: var(--text-dim); font-weight: 500;
  letter-spacing: 0; text-transform: none; margin-left: 8px; }
.event-feed { max-height: 230px; overflow-y: auto; padding: 4px 0; margin-bottom: 24px; }
.ev-row { display: flex; align-items: center; gap: 10px; padding: 7px 16px; font-size: 13px;
  border-bottom: 1px solid var(--border); }
.ev-row:last-child { border-bottom: none; }
.ev-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ev-t { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 64px; }
.ev-d { font-weight: 700; min-width: 96px; }
.ev-m { color: var(--text-dim); flex: 1; }
.ev-s { color: var(--text-dim); font-size: 11px; opacity: .75; }

/* ============ Contadores de energía del control ============ */
.ec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px; margin-bottom: 24px; }
.ec-card { background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; }
.ec-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.ec-ico svg { width: 22px; height: 22px; display: block; }
.ec-name { font-weight: 700; font-size: 14.5px; }
.ec-site { margin-left: auto; font-size: 10.5px; color: var(--text-dim); }
.ec-body.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ec-bt { font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
  color: var(--accent); padding-bottom: 5px; margin-bottom: 5px;
  border-bottom: 1px solid var(--border); }
.ec-block.ec-in .ec-bt { color: var(--amber); }
.ec-rows { display: flex; flex-direction: column; gap: 4px; }
.ec-r { display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  font-size: 12px; color: var(--text-dim); }
.ec-r.ec-tot { border-top: 1px dashed var(--border); padding-top: 5px; margin-top: 2px; }
.ec-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ec-v b { font-size: 14px; font-weight: 700; color: var(--text); }
.ec-v i { font-style: normal; font-size: 10px; color: var(--text-dim); margin-left: 3px; }
.ec-r.ec-tot .ec-v b { font-size: 15px; }

/* ============ Mantenimiento por horas de operación ============ */
.mt-run { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.mt-run b { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mt-run i { font-style: normal; font-size: 11px; color: var(--text-dim); }
.mt-bar { height: 7px; border-radius: 4px; background: var(--bg-panel-2);
  border: 1px solid var(--border); overflow: hidden; }
.mt-bar span { display: block; height: 100%; border-radius: 4px; transition: width .4s ease; }
.mt-state { font-size: 11.5px; font-weight: 700; margin: 7px 0 11px; }
.mt-state .dim { font-weight: 500; }
.mt-cfg { display: flex; flex-direction: column; gap: 6px; padding-top: 10px;
  border-top: 1px dashed var(--border); }
.mt-f { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--text-dim); }
.mt-f label { margin: 0; font-size: 11.5px; white-space: nowrap; }
.mt-f input { width: 72px; padding: 5px 7px; font-size: 12.5px; margin-left: auto; }
.mt-f span { white-space: nowrap; min-width: 92px; }
.mt-acts { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 9px; }
.mt-acts .link-btn { padding: 3px 0; font-size: 12px; }
.mt-msg { font-size: 11.5px; min-height: 15px; margin-top: 3px; }
.mt-msg.ok { color: var(--green); }
.mt-msg.bad { color: var(--red); }
.mt-last { font-size: 10.5px; color: var(--text-dim); opacity: .85; margin-top: 2px; }

/* ============ Entradas y salidas digitales (I/O) ============ */
#ioList { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 16px; }
.io-card { background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px 17px; }
.io-head { display: flex; align-items: center; gap: 10px; padding-bottom: 11px;
  margin-bottom: 12px; border-bottom: 1px solid var(--border); }
.io-ico svg { width: 24px; height: 24px; display: block; }
.io-id { display: flex; flex-direction: column; line-height: 1.25; }
.io-name { font-weight: 800; font-size: 15px; }
.io-alias { font-size: 11px; color: var(--accent); font-weight: 600; }
.io-site { margin-left: auto; font-size: 10.5px; color: var(--text-dim); text-align: right; }
.io-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.io-col-tit { font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: var(--accent); padding-bottom: 6px;
  margin-bottom: 7px; border-bottom: 1px solid var(--border); }
.io-col:last-child .io-col-tit { color: var(--amber); }

.io-pt { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.io-txt { flex: 1; min-width: 0; }
.io-sub { display: flex; align-items: baseline; gap: 6px; font-size: 10px;
  color: var(--text-dim); margin-top: 1px; }
.io-num { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 34px; }
.io-fab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.io-label { width: 100%; padding: 4px 8px; font-size: 12.5px; font-weight: 600;
  background: var(--bg-panel-2); border: 1px solid transparent; border-radius: 7px; }
.io-label:hover { border-color: var(--border); }
.io-label:focus { border-color: var(--accent); background: var(--bg-panel); }
.io-label::placeholder { font-weight: 400; color: var(--text-dim); opacity: .7; }

/* El bombillo. Apagado es un punto hundido y sin brillo; encendido, verde neón
   con halo, que es lo que hace que se note de un vistazo cuál está activo. */
.io-lamp { flex: none; width: 13px; height: 13px; border-radius: 50%;
  background: var(--bg-panel-2); border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); transition: all .18s ease; }
.io-lamp.on { background: var(--io-on); border-color: var(--io-on);
  box-shadow: 0 0 6px var(--io-glow), 0 0 13px var(--io-glow); }
.io-lamp.io-na { display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 800; color: var(--text-dim); box-shadow: none; }
.io-pt.is-on .io-fab, .io-pt.is-on .io-num { color: var(--io-on); }

.io-msg { font-size: 11.5px; min-height: 15px; margin-top: 9px; }
.io-msg.ok { color: var(--green); }
.io-msg.bad { color: var(--red); }

@media (max-width: 760px) { .io-cols { grid-template-columns: 1fr; } }

/* ============ Info de la ECU del motor ============ */
#ecuList { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr));
  gap: 16px; align-items: start; }
.ecu-card { padding: 14px 16px; }
.ecu-card .io-col-tit { display: flex; align-items: baseline; gap: 8px;
  margin-top: 12px; }
.ecu-card .io-col-tit .dim, .ecu-card .io-col-tit .ecu-hot {
  text-transform: none; letter-spacing: 0; font-size: 10px; font-weight: 600; }
.ecu-hot { color: var(--red); font-weight: 800; }
.ecu-sec { margin-top: 4px; }

/* Las medidas van en dos columnas: son muchas y cada una es corta */
.ecu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: 2px 16px; padding: 2px 0 8px; }
.ecu-m { display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.ecu-m-txt { min-width: 0; }
.ecu-m-es { font-size: 12px; font-weight: 600; line-height: 1.25; }
.ecu-m-sub { font-size: 9px; color: var(--text-dim); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Señal que la ECU declara como NO reportada: se ve, pero apagada */
.ecu-m.no-reporta { opacity: .45; }
.ecu-v { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ecu-v b { font-size: 14px; font-weight: 800; }
.ecu-v i { font-style: normal; font-size: 9.5px; color: var(--text-dim); margin-left: 3px; }
.ecu-v.na { color: var(--text-dim); font-size: 13px; }
.ecu-marca { font-weight: 700; color: var(--accent-2); }

/* ============ Medidores: un recuadro por fuente ============ */
#mdFuentes { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
  gap: 16px; align-items: start; }
.md-card { padding: 14px 16px; }
.md-tot { margin-left: auto; text-align: right; line-height: 1.25; }
.md-tot b { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.md-tot i { font-style: normal; font-size: 10px; color: var(--text-dim); margin-left: 4px; }
.md-tot span { display: block; font-size: 10px; color: var(--text-dim); }
.md-tot span.falta { color: var(--amber); font-weight: 700; }

.md-tbl { width: 100%; border-collapse: collapse; }
.md-tbl th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--text-dim); text-align: right; padding: 6px 4px;
  border-bottom: 1px solid var(--border); font-weight: 800; }
.md-tbl th:first-child, .md-tbl th:nth-child(2) { text-align: left; }
.md-tbl td { padding: 2px 4px; font-size: 11.5px; }
.md-tbl td.num { text-align: right; font-variant-numeric: tabular-nums; }
.md-tbl td.dim { color: var(--text-dim); font-size: 10.5px; }
.md-tbl td.md-day { width: 26px; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--text-dim); }
/* La barra hace que el mes se lea de un vistazo: dónde hubo picos y dónde no */
.md-tbl td.md-bar { width: 34%; padding-right: 10px; }
.md-tbl td.md-bar span { display: block; height: 7px; border-radius: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2)); min-width: 0; }
.md-tbl tr.sin td { color: var(--text-dim); opacity: .6; }
.md-tbl tr.sin i { font-style: italic; font-size: 10px; }
.md-tbl tr:hover td { background: var(--bg-panel-2); }

/* Análisis del mes, encima de los recuadros */
.md-analisis { padding: 16px 18px; margin-bottom: 18px; }
.md-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px; padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border); }
.md-kpis > div { display: flex; flex-direction: column; }
.md-kpis b { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
.md-kpis i { font-style: normal; font-size: 10.5px; color: var(--text-dim); }
.md-an-cols { display: grid; grid-template-columns: 430px 1fr; gap: 22px;
  align-items: center; }
.md-graf { height: 230px; min-width: 0; }
/* La marca de color de cada fuente. Solo vive en medidores: en el resto de la
   plataforma el color sigue siendo por TIPO de equipo. */
.md-chip { flex: none; width: 11px; height: 11px; border-radius: 3px; }
.md-nota { font-size: 10.5px; line-height: 1.5; color: var(--text-dim);
  margin-top: 6px; padding-right: 8px; }
.md-obs { margin: 0; padding-left: 18px; }
.md-obs li { font-size: 12.5px; line-height: 1.6; color: var(--text); margin-bottom: 5px; }
@media (max-width: 1000px) { .md-an-cols { grid-template-columns: 1fr; } }

/* ============ Envíos programados de reportes ============ */
.tbl .row-off { opacity: .55; }
.sched-mail { font-size: 11px; max-width: 220px; word-break: break-word; }
.tbl .actions button { margin-left: 4px; }
.tbl .sc-test { background: var(--bg-panel-2); border: 1px solid var(--border);
  color: var(--text); border-radius: 6px; padding: 3px 8px; font-size: 11px;
  cursor: pointer; white-space: nowrap; }
.tbl .sc-test:hover { border-color: var(--accent); color: var(--accent); }
.tbl .sc-test:disabled { opacity: .5; cursor: default; }

/* Ventana para programar un envío */
.sc-modal { position: fixed; inset: 0; z-index: 60; background: rgba(0, 0, 0, .55);
  display: flex; align-items: flex-start; justify-content: center; padding: 40px 16px;
  overflow: auto; }
.sc-modal[hidden] { display: none !important; }
.sc-box { background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); width: 100%;
  max-width: 470px; padding: 18px 20px 20px; }
.sc-head { display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px; }
.sc-head h3 { font-size: 15px; }
.sc-x { background: none; border: 0; color: var(--text-dim); font-size: 16px; cursor: pointer; }
.sc-box label { display: block; font-size: 11.5px; color: var(--text-dim);
  margin: 10px 0 4px; }
.sc-box label.check { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--text); margin: 0; }
.sc-box select, .sc-box input[type="text"], .sc-box input:not([type]) {
  width: 100%; padding: 7px 9px; font-size: 13px; }
.sc-fmt { display: flex; gap: 18px; padding: 4px 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 16px; }

/* ============ Panel de protecciones (alarmas y eventos) ============ */
#protAlarmas, #protEventos { display: grid;
  grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 16px; }
.prot-card { padding: 14px 16px; }
.prot-tot { margin-left: auto; font-size: 10.5px; font-weight: 700;
  color: var(--text-dim); white-space: nowrap; }
.prot-tot.hot { color: var(--red); }

.prot-grp { border-top: 1px dashed var(--border); }
.prot-grp:first-of-type { border-top: 0; }
.prot-grp > summary { cursor: pointer; list-style: none; display: flex;
  align-items: center; gap: 8px; padding: 8px 0; font-size: 11px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; color: var(--accent); }
.prot-grp > summary::-webkit-details-marker { display: none; }
.prot-grp > summary::before { content: "▸"; font-size: 10px; color: var(--text-dim);
  transition: transform .15s ease; }
.prot-grp[open] > summary::before { transform: rotate(90deg); }
.prot-cnt { margin-left: auto; font-size: 10px; font-weight: 700;
  text-transform: none; letter-spacing: 0; color: var(--text-dim); }
.prot-cnt.hot { color: var(--red); }
.prot-list { padding: 2px 0 8px 4px; }

.prot-row { display: flex; align-items: flex-start; gap: 9px; padding: 4px 0; }
.prot-txt { min-width: 0; }
.prot-es { font-size: 12.5px; font-weight: 600; line-height: 1.3; }
.prot-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 9.5px; color: var(--text-dim); margin-top: 1px; }
.prot-code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-weight: 700; }
.prot-ansi { font-weight: 800; color: var(--accent-2);
  border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; }
.prot-fc { opacity: .75; }
.prot-row.is-on .prot-es { color: var(--red); font-weight: 800; }

/* El LED de una protección es ROJO cuando está actuando: aquí encendido es
   una mala noticia, al revés que en las entradas y salidas, donde el verde
   solo dice que la señal está presente. */
.prot-lamp { flex: none; width: 11px; height: 11px; margin-top: 3px; border-radius: 50%;
  background: var(--bg-panel-2); border: 1px solid var(--border);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); transition: all .18s ease; }
.prot-lamp.on { background: var(--g-rojo); border-color: var(--g-rojo);
  box-shadow: 0 0 6px rgba(255, 40, 0, .6), 0 0 13px rgba(255, 40, 0, .45); }
.prot-row .io-lamp { margin-top: 3px; }

/* ---- Analógicas: aquí no hay bombillo, hay número ---- */
#aioList { display: grid; grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
  gap: 16px; }
.aio-pt { padding: 7px 0; }
.aio-pt + .aio-pt { border-top: 1px dashed var(--border); }
.aio-top { display: flex; gap: 6px; }
.aio-top .aio-name { flex: 1; min-width: 0; }
.aio-top .aio-unit { width: 72px; flex: none; text-align: center; }
.aio-bot { display: flex; align-items: baseline; gap: 10px; margin-top: 4px; }
.aio-v { font-variant-numeric: tabular-nums; white-space: nowrap; }
.aio-v b { font-size: 19px; font-weight: 800; }
.aio-v i { font-style: normal; font-size: 10.5px; color: var(--text-dim); margin-left: 3px; }
.aio-v.na { font-size: 15px; font-weight: 700; color: var(--text-dim); }
.aio-bot .io-sub { margin: 0; flex-wrap: wrap; }

/* Cada generador ocupa una columna con DOS tarjetas apiladas: arriba las
   entradas, y justo debajo sus salidas de regulación. */
.aio-gen { display: flex; flex-direction: column; gap: 14px; }
.aio-card .io-col-tit { margin-bottom: 4px; }

/* ---- Medidor de las salidas de regulación ---- */
.aio-reg-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; }
.aio-reg-row + .aio-reg-row { border-top: 1px dashed var(--border); }
.aio-reg-txt { flex: 1; min-width: 0; }
.aio-reg-txt .io-sub { flex-wrap: wrap; margin-top: 3px; }
.aio-gauge-wrap { flex: none; }
.aio-gauge { display: block; overflow: visible; }
.aio-reg-pct { font-size: 20px; font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.aio-gauge .g-val { font-size: 21px; font-weight: 800; text-anchor: middle;
  font-variant-numeric: tabular-nums; }
.aio-gauge .g-pc { font-size: 12px; font-weight: 700; }
.aio-gauge .g-na { font-size: 12px; font-weight: 600; text-anchor: middle;
  fill: var(--text-dim); }
.aio-gauge .g-end { font-size: 9.5px; font-weight: 700; fill: var(--text-dim); opacity: .8; }
.aio-gauge polygon, .aio-gauge circle { transition: none; }

@media (max-width: 620px) {
  .aio-reg-row { flex-direction: column; align-items: flex-start; }
}

/* ============ Impacto y ahorro + lista de equipos — Fases D y E ============ */
.aside-card { background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 14px; margin-bottom: 16px; }
.aside-title { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px;
  color: var(--text-dim); font-weight: 700; margin-bottom: 12px; }
.aside-title .dim { text-transform: none; letter-spacing: 0; font-weight: 500; opacity: .8; }
/* Franja de impacto y ahorro: ocupa el ancho, debajo de los conteos */
.impact-band { background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-bottom: 22px; }
.impact-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 12px; }
.impact-head .dim { text-transform: none; letter-spacing: 0; font-weight: 500; }
.imp-total { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 500;
  font-size: 11.5px; }
.imp-total b { color: var(--text); }
.imp-presets { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.imp-presets .link-btn { padding: 2px 0; font-size: 12px; }
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); gap: 11px; }
/* Sin lecturas todavía: se ven los ceros pero apagados, para que se note que
   la franja está esperando datos y no que el ahorro sea cero de verdad. */
.impact-grid.vacio { opacity: .5; }
/* Ilustración a la izquierda, número y texto a la derecha */
.imp { background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: 11px;
  padding: 10px 13px; display: flex; align-items: center; gap: 12px; }
.imp-ico { flex-shrink: 0; display: block; }
.imp-ico svg { width: 42px; height: 42px; display: block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .28)); }
.imp-txt { min-width: 0; }
.imp .v { font-size: 20px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.imp .l { font-size: 9px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase;
  color: var(--text-dim); margin-top: 3px; line-height: 1.35; }

.eqlist { display: flex; flex-direction: column; gap: 2px; }
.eqrow { display: flex; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px;
  cursor: pointer; transition: background .12s ease; }
.eqrow:hover { background: var(--bg-panel-2); }
.eq-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.eq-body { display: flex; flex-direction: column; min-width: 0; }
.eq-n { font-weight: 600; font-size: 13px; }
.eq-st { font-size: 10px; font-weight: 700; letter-spacing: .7px; }
.eq-p { margin-left: auto; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  white-space: nowrap; }

/* --- Crear tag manual (Variables Modbus) --- */
.var-toolbar { display: flex; align-items: center; gap: 14px; margin: 8px 0; flex-wrap: wrap; }
.var-toolbar .check { margin: 0; font-size: 12px; }
.var-del { padding: 2px 8px !important; font-size: 12px; margin-left: auto; }

/* --- Semáforo del interruptor: cerrado / abierto / disparado --- */
/* Diminuto a propósito: es información de apoyo, no debe competir con el
   unifilar. Apagado = gris tenue; encendido, el JS le pone su color. */
.sld-led circle { fill: none; stroke: var(--text-dim); stroke-width: 1; opacity: .45; }
.sld-led text { font-size: 8px; font-weight: 700; letter-spacing: .3px;
  fill: var(--text-dim); opacity: .45; }
.sld-led.on circle { opacity: 1; filter: drop-shadow(0 0 2.5px currentColor); }
.sld-led.on text { opacity: 1; }


/* ============ Franja del entorno de PRUEBAS ============ */
/* Solo aparece cuando el servidor reporta entorno=test. En producción no
   existe, así que no hay forma de verla donde no debe estar. */
body.es-test::before {
  content: "⚠ ENTORNO DE PRUEBAS · los datos no son reales y no se envía ningún correo";
  position: fixed; inset: 0 0 auto 0; z-index: 9999;
  background: repeating-linear-gradient(45deg, #b45309 0 14px, #92400e 14px 28px);
  color: #fff; font-size: 11.5px; font-weight: 800; letter-spacing: 1px;
  text-align: center; padding: 5px 12px; pointer-events: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}
body.es-test { padding-top: 26px; }
body.es-test .topbar { top: 26px; }

/* ============ Administrador de usuarios (todas las empresas) ============ */
.pill.warn { background: rgba(255,184,0,.16); color: var(--amber); }

.us-grid { display: flex; flex-direction: column; gap: 10px; }
.us-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 13px 16px; box-shadow: var(--shadow); }
.us-main { flex: 1 1 320px; min-width: 0; }
.us-id { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 15px; }
.us-mail { font-size: 13px; color: var(--text-dim); margin-top: 2px; }
.us-meta { font-size: 12px; color: var(--text-dim); margin-top: 3px; }
/* La línea de accesos es la que se mira de verdad en esta pantalla: a qué
   empresas llega el usuario. Va separada y con aire para que salte a la vista. */
.us-acc { margin-top: 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 12px; }
.us-all { color: var(--accent); font-weight: 600; }
.us-acts { display: flex; gap: 7px; flex-wrap: wrap; }

/* Sedes agrupadas por empresa en el selector de accesos. Con varias empresas,
   una lista plana de sedes no se puede leer ni marcar sin equivocarse. */
.us-grp { margin-bottom: 10px; }
.us-grp-t { font-size: 10px; font-weight: 800; letter-spacing: 1.1px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
.us-grp-all { background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--text-dim); font-size: 10px; letter-spacing: 0; text-transform: none;
  padding: 1px 7px; cursor: pointer; }
.us-grp-all:hover { color: var(--text); border-color: var(--accent); }
.us-find { margin-bottom: 7px; }
/* Cuántas van marcadas. Con el buscador puesto, parte de lo marcado queda
   escondido: sin este contador uno no sabe si ya marcó lo que iba a marcar. */
.us-sel { font-size: 11.5px; color: var(--text-dim); margin-top: 6px; }

/* ===== El pedacito de unifilar dentro del detalle del equipo ===== */
.dm-sld-card { margin-bottom: 18px; padding: 12px 14px 4px; }
.dm-sld-t { font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 2px; }
/* Más grande que en el dashboard —que es justo el motivo de que exista— pero
   con tope: estirado a 2000 px de ancho el dibujo se vuelve un cartel. */
.dm-sld { display: block; width: 100%; max-width: 420px; margin: 0 auto; height: auto; }

/* Subtítulo de cada fila de "Impacto y ahorro". Sin él, dos rejillas iguales
   una encima de otra no dicen cuál es el día y cuál el acumulado. */
.imp-sub { font-size: 10.5px; font-weight: 800; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--text-dim); margin: 2px 0 7px; }
.imp-sub.acum { margin-top: 14px; color: var(--accent); }
.imp-sub .dim { font-weight: 600; letter-spacing: 0; text-transform: none; }

/* ============ Unifilar ampliado ============
   Tapa TODO menos la barra lateral. Dejar el menú a la vista es a propósito:
   el cliente no pierde de dónde viene y puede salir sin cerrar nada. Por eso
   no se usa pantalla completa del navegador, que se lleva también el menú. */
.sld-big { position: fixed; inset: 0 0 0 234px; z-index: 60;
  background: var(--bg); display: flex; flex-direction: column;
  padding: 14px 18px 18px; }
.layout.collapsed ~ .sld-big, body.nav-collapsed .sld-big { left: 68px; }
.sld-big[hidden] { display: none; }
.sld-big-head { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px; font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; text-transform: uppercase; color: var(--text-dim); }
.sld-big-body { flex: 1; min-height: 0; display: flex;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px; }
/* El SVG trae un min-width EN LÍNEA con su ancho natural, y un estilo en línea
   le gana a la hoja de estilos: sin el !important el diagrama conservaba su
   tamaño original y se salía por la derecha en pantallas grandes —el solar
   quedaba cortado— mientras sobraba todo el alto. Con el viewBox y
   preserveAspectRatio="meet", poner ancho y alto al 100 % lo hace caber
   ENTERO, ocupando lo máximo que permita la forma del diagrama. */
.sld-big-body svg.sld-svg { min-width: 0 !important; width: 100%; height: 100%;
  display: block; }
/* Con la ventana abierta, el fondo no se desplaza: si no, al cerrarla uno
   aparecía en otro punto de la página sin saber por qué. */
body.sld-grande-abierto { overflow: hidden; }
@media (max-width: 760px) { .sld-big { inset: 0; } }