/* Sata Solar - pantalla junto al sistema solar (1920x1080, sin desplazamiento).
   Colores: tema oscuro del dashboard "Lectura Inversor" (flujo) y acentos del
   dashboard "modbusserver" (rack). */

:root {
  /* Lectura Inversor - tema oscuro */
  --paper:      #0E1116;
  --surface:    #161A21;
  --surface-2:  #1D222B;
  --ink:        #EAECF0;
  --ink-2:      #A8B0BC;
  --ink-3:      #7A828F;
  --rule:       #2A303A;
  --rule-2:     #3A424E;
  --ok:         #58C08E;
  --warn:       #E0A94A;
  --bad:        #FF6F62;
  --series-1:   #3987e5;   /* consumo */
  --series-2:   #d95926;   /* FV string 1 */
  --series-3:   #199e70;   /* FV string 2 / batería */
  --chart-grid: #262C36;
  --mppt1:      #ff7a2f;   /* MPPT 1 — naranja */
  --mppt2:      #ffd23f;   /* MPPT 2 — amarillo dorado */

  /* modbusserver - rack */
  --border-color: rgba(255, 255, 255, 0.07);
  --text-main: #f3f4f6;
  --text-muted: #9ca3af;
  --accent-cyan: #06b6d4;
  --accent-cyan-glow: rgba(6, 182, 212, 0.35);
  --accent-green: #10b981;
  --accent-green-glow: rgba(16, 185, 129, 0.35);
  --accent-amber: #f59e0b;
  --accent-amber-glow: rgba(245, 158, 11, 0.35);
  --accent-red: #ef4444;
  --accent-red-glow: rgba(239, 68, 68, 0.35);
  --font-mono: 'Share Tech Mono', 'IBM Plex Mono', monospace;
}

* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  overflow: hidden;
  cursor: default;
  user-select: none;
}
.hidden { display: none !important; }
.pista { color: var(--ink-3); font-size: 0.8rem; }

/* ------------------------------------------------------------- cabecera */
.cabecera {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 0 24px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.marca { font: 600 1.05rem "IBM Plex Mono", monospace; letter-spacing: 0.14em; color: var(--ink-2); }
.marca span { color: var(--ink); margin-left: 8px; }
.estado-conexion { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-3); margin-left: auto; }
.estado-conexion .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--rule-2); margin-left: 10px; }
.estado-conexion .punto.ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.estado-conexion .punto.mal { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.reloj { font: 600 1.6rem "IBM Plex Sans", sans-serif; font-variant-numeric: tabular-nums; min-width: 96px; text-align: right; }

/* --------------------------------------------------------------- rejilla */
.rejilla {
  height: calc(100% - 56px);
  display: grid;
  grid-template-columns: 1fr 340px;
  grid-template-rows: 54fr 46fr;
  gap: 14px;
  padding: 14px;
}
.tarjeta {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.tarjeta-cab {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 16px 0;
}
.etiqueta {
  font: 600 0.78rem "IBM Plex Mono", monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.flujo-modo { font-size: 0.95rem; color: var(--ink-2); }

/* ------------------------------------------------- flujo (de dashboard.css) */
.flujo {
  flex: 1;
  min-height: 0;
  padding: 4px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.flujo svg { width: 100%; height: 100%; max-width: none; }
/* flujo.js limita su SVG a 280 px de alto (pensado para su dashboard); aquí ocupa la tarjeta. */
#flujo svg.flujo-svg { max-height: none; }
.nodo-caja { fill: var(--surface-2); stroke: var(--rule); stroke-width: 1; }
.nodo-caja.activo { stroke-width: 1.5; }
.nodo-nombre { fill: var(--ink-3); font: 600 11px "IBM Plex Mono", monospace; letter-spacing: 0.09em; text-transform: uppercase; }
.nodo-valor { fill: var(--ink); font: 600 19px "IBM Plex Sans", system-ui, sans-serif; font-variant-numeric: tabular-nums; }
.nodo-sub { fill: var(--ink-3); font: 400 11px "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }
.linea { stroke: var(--rule); stroke-width: 2.5; fill: none; }
.linea.activa { stroke-width: 3; }
.particula { r: 4.5; }

.energia {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}
.energia .e { padding: 10px 16px; border-right: 1px solid var(--rule); }
.energia .e:last-child { border-right: 0; }
.energia .e-label { font: 500 0.72rem "IBM Plex Mono", monospace; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px; }
.energia .e-valor { font: 600 1.45rem "IBM Plex Sans", system-ui, sans-serif; font-variant-numeric: tabular-nums; color: var(--ink); }
.energia .e-valor .u { font-size: 0.65em; font-weight: 500; color: var(--ink-3); margin-left: 4px; }
.energia .e-meta { font-size: 0.78rem; color: var(--ink-3); margin-top: 1px; }

/* ------------------------------------------------------------------ KPIs */
.kpis { flex: 1; display: flex; flex-direction: column; justify-content: space-around; padding: 6px 18px 12px; }
.kpi { border-bottom: 1px solid var(--rule); padding: 6px 0; }
.tarjeta-banco .kpi-valor { font-size: 1.4rem; }
.kpi .pista { font-size: 0.72rem; }
.kpi:last-child { border-bottom: 0; }
.kpi-label { font: 500 0.72rem "IBM Plex Mono", monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.kpi-valor { font: 600 1.6rem "IBM Plex Sans", sans-serif; font-variant-numeric: tabular-nums; }
.kpi-valor .u { font-size: 0.6em; color: var(--ink-3); margin-left: 4px; font-weight: 500; }
.kpi-valor.ok { color: var(--ok); }
.kpi-valor.warn { color: var(--warn); }
.kpi-valor.bad { color: var(--bad); }
.kpi-barra { height: 6px; border-radius: 3px; background: var(--surface-2); margin-top: 6px; overflow: hidden; }
.kpi-barra > div { height: 100%; background: var(--accent-green); transition: width 0.6s ease; }

/* ------------------------------------------------------------------ rack */
.rack-cuerpo { flex: 1; min-height: 0; display: flex; gap: 12px; padding: 6px 12px 12px; }
.rack-3d { flex: 1; position: relative; min-height: 0; height: 100%; }
.rack-3d canvas { display: block; }
.rack-vacio { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); }

/* leyenda y tooltip: copiados de modbusserver/static/dashboard/css/style.css */
.rack-sidebar-legend { flex: 0 0 240px; display: flex; flex-direction: column; gap: 10px; }
.rack-sidebar-legend h4 { font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 8px; }
.rack-legend-list { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; overflow-y: auto; }
.rack-legend-item { background: rgba(255,255,255,0.01); border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.rack-legend-item:hover { background: rgba(6,182,212,0.05); border-color: rgba(6,182,212,0.35); box-shadow: 0 0 10px rgba(6,182,212,0.1); transform: translateX(2px); }
.rack-legend-item.highlighted { background: rgba(6,182,212,0.12) !important; border-color: var(--accent-cyan) !important; box-shadow: 0 0 15px rgba(6,182,212,0.2) !important; transform: translateX(4px); }
.legend-id-tag { font-family: var(--font-mono); font-size: 0.95rem; font-weight: 700; color: var(--accent-cyan); }
.legend-stats { display: flex; flex-direction: column; flex-grow: 1; text-align: right; }
.legend-soc { font-size: 0.95rem; font-weight: 600; }
.legend-v { font-size: 0.75rem; color: var(--text-muted); }
.legend-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.legend-status-dot.standby { background-color: var(--accent-cyan); box-shadow: 0 0 6px var(--accent-cyan-glow); }
.legend-status-dot.charge { background-color: var(--accent-amber); box-shadow: 0 0 6px var(--accent-amber-glow); animation: pulse-glow-amber 1s infinite alternate; }
.legend-status-dot.discharge { background-color: var(--accent-green); box-shadow: 0 0 6px var(--accent-green-glow); animation: pulse-glow-green 1s infinite alternate; }
.legend-status-dot.alarm, .legend-status-dot.offline { background-color: var(--accent-red); box-shadow: 0 0 6px var(--accent-red-glow); animation: pulse-glow-red 0.8s infinite alternate; }
@keyframes pulse-glow-amber { from { box-shadow: 0 0 2px var(--accent-amber-glow); } to { box-shadow: 0 0 8px rgba(245,158,11,0.8); } }
@keyframes pulse-glow-green { from { box-shadow: 0 0 2px var(--accent-green-glow); } to { box-shadow: 0 0 8px rgba(16,185,129,0.8); } }
@keyframes pulse-glow-red { from { box-shadow: 0 0 2px var(--accent-red-glow); } to { box-shadow: 0 0 8px rgba(239,68,68,0.8); } }

.rack-tooltip { position: absolute; z-index: 100; width: 190px; background: rgba(13,20,35,0.85); backdrop-filter: blur(8px); border: 1px solid rgba(6,182,212,0.4); border-radius: 10px; padding: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.5), 0 0 15px rgba(6,182,212,0.15); pointer-events: none; }
.tooltip-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 6px; margin-bottom: 8px; }
.tooltip-title { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.5px; }
.tooltip-id { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--accent-cyan); }
.tooltip-body { display: flex; flex-direction: column; gap: 5px; }
.tooltip-row { display: flex; justify-content: space-between; font-size: 0.8rem; }
.tooltip-row span { color: var(--text-muted); }
.tooltip-row strong { color: var(--text-main); font-weight: 600; }
.tooltip-soc-bar { height: 3px; background-color: rgba(255,255,255,0.05); border-radius: 1.5px; overflow: hidden; margin: 2px 0 4px; }
.tooltip-soc-bar-fill { height: 100%; background-color: var(--accent-cyan); transition: width 0.3s ease; }
.text-cyan { color: var(--accent-cyan) !important; }
.text-amber { color: var(--accent-amber) !important; }
.text-green { color: var(--accent-green) !important; }

/* ---------------------------------------- ventanas (WindowsSystem) en pantalla */
/* La ficha de batería usa el sistema de ventanas y los estilos de modbusserver
   (css/modbusserver-ventanas.css). Aquí solo se agranda para leer a distancia. */
.ui-dialog.custom-window { font-size: 1.05rem; }
.win-cells-grid { grid-template-columns: repeat(8, 1fr); }
.win-cell-v { font-size: 1.05rem; }
.win-cell-t { font-size: 0.72rem; color: var(--text-muted); }
.win-cell-pill.highest-v { border-color: var(--accent-amber); }
.win-cell-pill.lowest-v { border-color: var(--accent-cyan); }
.cell-badges { display: flex; gap: 4px; justify-content: center; }
.cell-badge { font-size: 0.6rem; padding: 1px 4px; border-radius: 4px; background: rgba(255,255,255,0.06); }

/* ------------------------------------------------- gráfica de potencias */
.tarjeta-grafica { padding-bottom: 6px; }
.grafica-cab { display: flex; align-items: center; gap: 10px; padding: 10px 16px 4px; }
.nav { background: var(--surface-2); border: 1px solid var(--rule); color: var(--ink); border-radius: 8px;
       min-width: 44px; height: 40px; font-size: 1.4rem; cursor: pointer; }
.nav:disabled { opacity: 0.3; cursor: default; }
.nav.hoy { font-size: 0.9rem; padding: 0 14px; }
.dia-nombre { font: 600 1.25rem "IBM Plex Sans", sans-serif; min-width: 230px; text-align: center; }
.dia-totales { display: flex; gap: 18px; margin-left: 12px; font-size: 0.95rem; color: var(--ink-2); }
.dia-totales .tot { display: inline-flex; align-items: center; gap: 6px; }
.dia-totales b { color: var(--ink); font-variant-numeric: tabular-nums; }
.dia-totales i, .leyenda i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.leyenda { display: flex; gap: 14px; margin-left: auto; font-size: 0.8rem; color: var(--ink-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i.rayas { background-image: linear-gradient(90deg, transparent 50%, var(--surface) 50%) !important;
                   background-size: 6px 3px; }
.grafica-zona { flex: 1; min-height: 0; padding: 0 8px; touch-action: pan-y; cursor: grab; overflow: hidden; }
.grafica-zona:active { cursor: grabbing; }
.grafica { position: relative; width: 100%; height: 100%; }
.grafica svg { display: block; }
.grafica-vacia { height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 1.1rem; }
.grafica-tip { position: absolute; pointer-events: none; background: rgba(13,20,35,0.92); border: 1px solid var(--rule-2);
               border-radius: 8px; padding: 8px 10px; font-size: 0.82rem; min-width: 230px; }
.grafica-tip .tt { font: 600 0.9rem "IBM Plex Mono", monospace; margin-bottom: 4px; }
.grafica-tip .row { display: flex; align-items: center; gap: 8px; color: var(--ink-2); }
.grafica-tip .row i { width: 10px; height: 3px; border-radius: 2px; }
.grafica-tip .row b { margin-left: auto; color: var(--ink); font-variant-numeric: tabular-nums; }
.grafica-ayuda { text-align: center; padding: 2px 0 4px; font-size: 0.75rem; }

/* ------------------------------ flujo: ajustes sobre el SVG de flujo.js */
/* Cada MPPT con su color (en flujo.js los dos usan --series-2). Las reglas por id
   ganan a los atributos del SVG; el estado "inactive" sigue funcionando por opacidad. */
#d2-flow-pv1-inv { stroke: var(--mppt1); }
#d2-flow-pv2-inv { stroke: var(--mppt2); }
#d2-flow-pv1-inv-val { fill: var(--mppt1); }
#d2-flow-pv2-inv-val { fill: var(--mppt2); }
#d2-flow-pv1-inv-sparks { fill: var(--mppt1); }
#d2-flow-pv2-inv-sparks { fill: var(--mppt2); }
#d2-mppt1-readout rect { stroke: var(--mppt1); stroke-width: 1.2; }
#d2-mppt2-readout rect { stroke: var(--mppt2); stroke-width: 1.2; }
#d2-mppt1-readout text[id] { fill: var(--mppt1); }
#d2-mppt2-readout text[id] { fill: var(--mppt2); }

/* Ventanas del edificio: la animación window-shimmer de modbusserver (style.css),
   que flujo.js usa pero no trae. Aquí solo titilan las ventanas ENCENDIDAS, y cuántas
   lo están depende del consumo (pantalla.js). De día luz fría, de noche cálida. */
.building-window { fill: #141b2c; stroke: #1e293b; stroke-width: 1.5; transition: fill 0.8s ease, stroke 0.8s ease; }
.building-window.encendida:nth-child(3n)   { animation: window-shimmer 5s infinite alternate; }
.building-window.encendida:nth-child(3n+1) { animation: window-shimmer 7s infinite 1.2s alternate; }
.building-window.encendida:nth-child(3n+2) { animation: window-shimmer 6s infinite 2.5s alternate; }
@keyframes window-shimmer {
  0%, 40%   { fill: rgba(254, 240, 138, 0.45); stroke: #c9a227; }
  60%, 100% { fill: rgba(254, 240, 138, 0.85); stroke: #ffe066; filter: drop-shadow(0 0 3px rgba(254, 240, 138, 0.6)); }
}
.flujo-svg.d2-day .building-window.encendida:nth-child(3n)   { animation-name: window-shimmer-dia; }
.flujo-svg.d2-day .building-window.encendida:nth-child(3n+1) { animation-name: window-shimmer-dia; }
.flujo-svg.d2-day .building-window.encendida:nth-child(3n+2) { animation-name: window-shimmer-dia; }
@keyframes window-shimmer-dia {
  0%, 40%   { fill: rgba(125, 211, 252, 0.40); stroke: #38bdf8; }
  60%, 100% { fill: rgba(186, 230, 253, 0.85); stroke: #7dd3fc; filter: drop-shadow(0 0 3px rgba(125, 211, 252, 0.6)); }
}

/* Tooltip de las botellitas (estilo del rack de modbusserver, más grande para la pantalla) */
.tooltip-botella { position: fixed; width: 300px; z-index: 500; padding: 14px 16px; }
.tooltip-botella .tooltip-title { font-size: 0.72rem; }
.tooltip-botella .tooltip-id { font-size: 0.95rem; }
.tooltip-botella .tooltip-row { font-size: 0.88rem; gap: 12px; }
.tooltip-botella .tooltip-row strong { text-align: right; }
.tooltip-botella .tooltip-soc-bar { height: 5px; }
.tooltip-pie { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255,255,255,0.08);
               font-size: 0.72rem; color: var(--text-muted); text-align: center; }
.text-red { color: var(--accent-red) !important; }

/* Ventana del inversor */
#flujo .d2-node-inv { cursor: pointer; }
#flujo .d2-node-inv:hover { filter: drop-shadow(0 0 6px rgba(255, 122, 47, 0.6)); }
.inv-grandes { display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.inv-grande { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid rgba(255,255,255,0.05); padding-bottom: 10px; }
.inv-grande span { color: var(--text-muted); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 1px; }
.inv-grande b { font: 700 2.2rem var(--font-mono); }
.inv-mppt1-txt { color: var(--mppt1) !important; }
.inv-mppt2-txt { color: var(--mppt2) !important; }
.inv-nota { margin-top: 10px; font-size: 0.85rem; line-height: 1.35; }

/* Ficha de batería: pestaña "Día" */
.bat-dia-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bat-dia-fecha { font: 600 1.1rem "IBM Plex Sans", sans-serif; min-width: 120px; text-align: center; }
.bat-dia-res { display: flex; gap: 8px; margin-left: 12px; flex-wrap: wrap; }
.bdr { display: flex; flex-direction: column; padding: 4px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: rgba(255,255,255,0.02); }
.bdr span { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.bdr b { font: 700 0.95rem var(--font-mono); color: var(--text-main); }
.bat-dia-barra { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: rgba(255,255,255,0.04); margin-bottom: 8px; }
.bat-dia-graf { position: relative; height: 430px; }

/* Series de la gráfica activables (leyenda y totales) */
[data-serie] { cursor: pointer; user-select: none; border-radius: 6px; padding: 2px 6px; transition: opacity 0.2s, background 0.2s; }
[data-serie]:hover { background: var(--surface-2); }
[data-serie].apagada { opacity: 0.35; text-decoration: line-through; }

/* Leyenda de paneles de la gráfica de batería */
.bat-dia-leyenda { margin: 0 0 4px; justify-content: flex-end; }
[data-bserie] { cursor: pointer; user-select: none; border-radius: 6px; padding: 2px 6px; transition: opacity 0.2s, background 0.2s; }
[data-bserie]:hover { background: rgba(255,255,255,0.05); }
[data-bserie].apagada { opacity: 0.35; text-decoration: line-through; }
.bat-dia-leyenda i { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }

/* Leyendas de paneles (gráfica genérica de batería e inversor) */
[data-gserie] { cursor: pointer; user-select: none; border-radius: 6px; padding: 2px 6px; transition: opacity 0.2s, background 0.2s; }
[data-gserie]:hover { background: rgba(255,255,255,0.05); }
[data-gserie].apagada { opacity: 0.35; text-decoration: line-through; }
.inv-dia-graf { height: 470px; }

/* ------------------------------- ventana del inversor: pestaña "Esquema" */
.inv-esquema { height: 560px; }
.esq-svg { width: 100%; height: 100%; }
.esq-caja { fill: rgba(255,255,255,0.03); stroke-width: 1.6; }
.esq-rele-caja { stroke: var(--rule-2); stroke-dasharray: 5 4; fill: rgba(255,255,255,0.015); }
.esq-titulo { font: 700 12.5px "IBM Plex Sans", system-ui, sans-serif; letter-spacing: 1px; }
.esq-rele-pos { font-weight: 700; fill: var(--text-main); font-size: 13px; }
.esq-valor { font: 700 20px "IBM Plex Mono", monospace; fill: var(--text-main); }
.esq-valor-p { font: 700 14px "IBM Plex Mono", monospace; fill: var(--accent-cyan); }
.esq-sub { font: 500 12px "IBM Plex Sans", sans-serif; fill: var(--text-muted); }
.esq-mini { font: 700 10px "IBM Plex Mono", monospace; fill: var(--text-muted); }
.esq-bloque { transition: opacity 0.4s; }
.esq-bloque.apagado { opacity: 0.45; }
.esq-bus { fill: rgba(6,182,212,0.18); stroke: var(--accent-cyan); stroke-width: 1.5; }
.esq-panel-marco { fill: #12305a; stroke: #3b6ea8; stroke-width: 1.5; }
.esq-panel-celda { fill: #1f4f8a; }
.esq-senoide { fill: none; stroke: var(--series-1); stroke-width: 2; opacity: 0.8; }
.esq-linea { fill: none; stroke-width: 3; opacity: 0.22; stroke-dasharray: 8 6; }
.esq-linea.on { opacity: 1; animation: esq-flujo 0.9s linear infinite; }
.esq-linea.on.reverso { animation-direction: reverse; }
@keyframes esq-flujo { to { stroke-dashoffset: -14; } }
.esq-contacto { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 2; }
.esq-contacto.activo { fill: var(--accent-green); stroke: var(--accent-green); }
.esq-pivote { fill: var(--ink-2); }
.esq-cuchilla { stroke: var(--series-1); stroke-width: 5; stroke-linecap: round; transition: all 0.6s ease; }
.esq-cuchilla.red { stroke: var(--warn); }
.esq-cuchilla.abierto { stroke: var(--ink-3); }
.inv-esquema-modo { margin-top: 6px; padding: 10px 14px; border: 1px solid var(--border-color); border-radius: 8px;
                    font-size: 0.95rem; color: var(--text-main); background: rgba(255,255,255,0.02); }

/* Esquema v2: relés, bus AC, nota */
.esq-bus-ac { fill: rgba(57,135,229,0.18); stroke: var(--series-1); }
.esq-rele .esq-contacto { fill: var(--surface-2); stroke: var(--ink-2); stroke-width: 2; }
.esq-rele.cerrado .esq-contacto { fill: var(--accent-green); stroke: var(--accent-green); }
.esq-cuchilla { stroke: var(--accent-green); stroke-width: 4; stroke-linecap: round; transition: all 0.6s ease; }
.esq-cuchilla.abierto { stroke: var(--ink-3); }
.esq-k-estado { font: 700 10.5px "IBM Plex Mono", monospace; fill: var(--ink-3); }
.esq-rele.cerrado .esq-k-estado { fill: var(--accent-green); }
.esq-nota { font: 400 11px "IBM Plex Sans", sans-serif; fill: var(--ink-3); font-style: italic; }

/* Esquema: sensores de temperatura */
.esq-termo-tubo { fill: var(--surface-2); stroke: var(--ink-3); stroke-width: 1.2; }
.esq-termo-nivel { transition: all 0.6s ease; }
.esq-termo-bulbo { stroke: var(--surface); stroke-width: 1.5; transition: fill 0.6s ease; }
.esq-termo-valor { font: 700 14px "IBM Plex Mono", monospace; }
.esq-sobretemp rect { fill: rgba(239,68,68,0.18); stroke: var(--accent-red); }
.esq-sobretemp text { font: 700 12px "IBM Plex Sans", sans-serif; fill: var(--accent-red); animation: pulse-glow-red 0.8s infinite alternate; }

/* Carga → Home Assistant */
#flujo .d2-node-load { cursor: pointer; }
#flujo .d2-node-load:hover { filter: drop-shadow(0 0 8px rgba(57, 135, 229, 0.7)); }
.ir-ha { display: flex; flex-direction: column; gap: 14px; padding: 6px 4px; }
.ir-ha-pregunta { font: 600 1.4rem "IBM Plex Sans", sans-serif; color: var(--text-main); }
.ir-ha-botones { display: flex; gap: 10px; }
.ir-ha-btn { flex: 1; padding: 14px 10px; font: 600 1rem "IBM Plex Sans", sans-serif; border-radius: 8px; cursor: pointer;
             background: rgba(255,255,255,0.04); color: var(--text-main); border: 1px solid var(--border-color); }
.ir-ha-btn:hover { border-color: var(--accent-cyan); }
.ir-ha-btn.principal { background: rgba(57,135,229,0.25); border-color: var(--series-1); }
.ir-ha-btn.cancelar { flex: none; background: none; color: var(--text-muted); }
#capa-ha { position: fixed; inset: 0; z-index: 3000; background: var(--paper); display: none; flex-direction: column; }
#capa-ha.visible { display: flex; }
.capa-ha-barra { height: 52px; display: flex; align-items: center; gap: 18px; padding: 0 14px; background: var(--surface);
                 border-bottom: 1px solid var(--rule); }
.capa-ha-barra button { padding: 10px 18px; font: 600 1rem "IBM Plex Sans", sans-serif; border-radius: 8px; cursor: pointer;
                        background: var(--series-1); color: #fff; border: 0; }
#capa-ha-titulo { font: 600 1rem "IBM Plex Sans", sans-serif; color: var(--ink-2); }
.capa-ha-barra .pista { margin-left: auto; }
#capa-ha-marco { flex: 1; border: 0; width: 100%; background: #111; }

/* MPPT: clicables en el flujo y ventana con zoom */
#flujo #d2-mppt1-readout, #flujo #d2-mppt2-readout, #flujo #d2-flow-pv1-inv, #flujo #d2-flow-pv2-inv,
#flujo #d2-flow-pv1-inv-val, #flujo #d2-flow-pv2-inv-val { cursor: pointer; }
#flujo #d2-mppt1-readout:hover { filter: drop-shadow(0 0 6px var(--mppt1)); }
#flujo #d2-mppt2-readout:hover { filter: drop-shadow(0 0 6px var(--mppt2)); }
.mppt-graf { height: 500px; }
.bat-dia-graf { cursor: crosshair; touch-action: none; }
.bat-dia-graf.arrastrando { cursor: grabbing; }
.bat-dia-leyenda .pista { margin-right: auto; }

/* Esquema: bloques clicables (empezando por los MPPT) */
#esq-mppt1, #esq-mppt2, .esq-clic, #esq-l-pv1, #esq-l-pv2, #esq-l-m1bus, #esq-l-m2bus { cursor: pointer; }
#esq-mppt1:hover, [data-esq-mppt="1"]:hover { filter: drop-shadow(0 0 8px var(--mppt1)); }
#esq-mppt2:hover, [data-esq-mppt="2"]:hover { filter: drop-shadow(0 0 8px var(--mppt2)); }
#esq-l-pv1, #esq-l-pv2, #esq-l-m1bus, #esq-l-m2bus { pointer-events: stroke; }

/* Esquema: buses clicables */
#esq-busdc, #esq-busac { cursor: pointer; }
#esq-busdc:hover { filter: drop-shadow(0 0 8px var(--accent-cyan)); }
#esq-busac:hover { filter: drop-shadow(0 0 8px var(--series-1)); }

/* Banco de baterías */
#esq-banco { cursor: pointer; }
#esq-banco:hover { filter: drop-shadow(0 0 8px var(--accent-green)); }
.banco-tarjetas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 12px; }
.banco-tarjeta { border: 1px solid var(--border-color); border-top: 3px solid; border-radius: 8px; padding: 8px 10px;
                 background: rgba(255,255,255,0.02); cursor: pointer; transition: background 0.2s; }
.banco-tarjeta:hover { background: rgba(255,255,255,0.06); }
.banco-tarjeta.fantasma { cursor: default; border-style: dashed; border-top-style: solid; }
.bt-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.bt-cab b { font: 700 0.85rem var(--font-mono); color: var(--text-main); }
.bt-cab span { font-size: 0.7rem; color: var(--text-muted); }
.bt-soc { height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; margin-bottom: 6px; }
.bt-soc > div { height: 100%; }
.bt-fila { display: flex; justify-content: space-between; font-size: 0.75rem; padding: 1px 0; }
.bt-fila span { color: var(--text-muted); }
.bt-fila b { color: var(--text-main); font-weight: 600; }
.banco-graf { height: 440px; }

/* Pronóstico del clima (clic en sol/luna) */
#d2-pv-sun, #d2-pv-moon { cursor: pointer; pointer-events: bounding-box; }
#d2-pv-sun:hover, #d2-pv-moon:hover { filter: drop-shadow(0 0 10px #fbbf24); }
.cl-dias { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-bottom: 14px; }
.cl-dia { border: 1px solid var(--border-color); border-radius: 10px; padding: 10px 12px; cursor: pointer;
          background: rgba(255,255,255,0.02); text-align: center; transition: background 0.2s, border-color 0.2s; }
.cl-dia:hover { background: rgba(255,255,255,0.05); }
.cl-dia.activo { border-color: #fbbf24; background: rgba(251,191,36,0.07); }
.cl-dia .bt-fila { text-align: left; }
.cl-nombre { font-weight: 700; text-transform: capitalize; color: var(--text-main); }
.cl-desc { font-size: 0.8rem; color: var(--text-muted); min-height: 1.2em; }
.cl-temps { margin: 4px 0 6px; font-family: var(--font-mono); }
.cl-temps b { font-size: 1.5rem; color: var(--text-main); margin-right: 8px; }
.cl-temps span { color: var(--text-muted); }
.cl-sol { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 6px; margin-bottom: 4px;
          border-radius: 6px; background: rgba(251,191,36,0.1); font-size: 0.8rem; }
.cl-sol span { color: var(--text-muted); }
.cl-sol b { color: #fbbf24; font: 700 1rem var(--font-mono); }
.cl-detalle-cab { display: flex; gap: 18px; align-items: center; margin-bottom: 4px; font-size: 0.8rem; color: var(--text-muted); }
.cl-detalle-cab b { color: var(--text-main); margin-right: auto; font-size: 0.9rem; }
.cl-ley i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.cl-ley i.raya { height: 0; border-top: 2px dashed; border-radius: 0; }
.cl-svg { width: 100%; height: auto; display: block; }
.cl-rejilla { stroke: rgba(255,255,255,0.06); }
.cl-eje { fill: var(--text-muted); font-size: 11px; }
.cl-temp { fill: #fca5a5; font-size: 11px; font-weight: 600; }
.cl-pie { margin-top: 8px; font-size: 0.72rem; color: var(--text-muted); line-height: 1.5; }

/* ================================================================ celular
   La pantalla del kiosco es 1920×1080; en un teléfono todo pasa a una columna con
   desplazamiento vertical y las ventanas ocupan toda la pantalla. */
@media (max-width: 820px) {
  html, body { height: auto; }
  body { overflow-x: hidden; overflow-y: auto; }
  .cabecera { height: auto; flex-wrap: wrap; gap: 4px 12px; padding: 8px 12px; position: sticky; top: 0; z-index: 50; }
  .marca { font-size: 0.85rem; letter-spacing: 0.08em; flex: 1 1 100%; order: 1; }
  .marca span { display: inline; margin-left: 4px; font-size: 0.8rem; letter-spacing: 0.04em; }
  .estado-conexion { order: 2; margin-left: 0; font-size: 0.75rem; }
  .estado-conexion .punto { margin-left: 0; }
  .reloj { order: 3; font-size: 1.1rem; min-width: 0; margin-left: auto; }
  .rejilla { height: auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 54px; }
  .tarjeta { overflow: visible; }
  .tarjeta-flujo { order: 1; }
  .tarjeta-grafica { order: 2; }
  .tarjeta-banco { order: 3; }
  .tarjeta-inv { order: 4; }
  .tarjeta-cab { padding: 8px 12px 0; flex-wrap: wrap; gap: 4px; }
  .flujo-modo { font-size: 0.8rem; }
  .flujo { padding: 2px 4px; flex: none; display: block; overflow-x: auto; overflow-y: hidden;
           -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .flujo::-webkit-scrollbar { display: none; }
  #flujo svg.flujo-svg { width: 640px; height: 265px; max-width: none; display: block; }
  .energia { grid-template-columns: repeat(2, 1fr); }
  .energia .e { padding: 8px 12px; border-bottom: 1px solid var(--rule); }
  .energia .e:nth-child(2n) { border-right: 0; }
  .energia .e:last-child { grid-column: 1 / -1; }
  .energia .e-valor { font-size: 1.2rem; }
  .kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; padding: 6px 12px 10px; }
  .kpi { min-width: 0; }
  .tarjeta-banco .kpi-valor, .kpi-valor { font-size: 1.15rem; word-break: break-word; }
  .grafica-cab { flex-wrap: wrap; gap: 6px; padding: 8px 10px 4px; }
  .dia-nombre { min-width: 0; flex: 1; font-size: 1.05rem; }
  .nav { min-width: 40px; height: 36px; }
  .dia-totales { order: 5; flex: 1 1 100%; margin-left: 0; gap: 12px; font-size: 0.8rem; flex-wrap: wrap; }
  .leyenda { order: 6; flex: 1 1 100%; margin-left: 0; flex-wrap: wrap; gap: 10px; }
  .grafica-zona { height: 300px; flex: none; padding: 0 2px; }
  .grafica-tip { min-width: 180px; font-size: 0.75rem; }

  /* Ventanas a pantalla completa */
  .ui-dialog { position: fixed !important; left: 0 !important; top: 0 !important; width: 100vw !important;
               max-width: 100vw; height: calc(100dvh - 40px) !important; border-radius: 0 !important; }
  .ui-dialog .ui-dialog-content { height: calc(100dvh - 40px - 44px) !important; overflow-y: auto !important;
                                  -webkit-overflow-scrolling: touch; padding: 8px !important;
                                  width: auto !important; box-sizing: border-box; overflow-x: hidden !important; }
  .win-tabs-nav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .win-tabs-nav::-webkit-scrollbar { display: none; }
  .win-tab-btn { flex: none; font-size: 0.9rem; padding-left: 10px; padding-right: 10px; }
  /* Esquema del inversor y gráfica de clima: más anchos que el teléfono, se deslizan a los lados */
  .inv-esquema { height: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .inv-esquema .esq-svg { width: 860px; height: 403px; max-width: none; }
  .cl-svg { width: 760px; max-width: none; }
  #clima-cuerpo { overflow-x: hidden; }
  .cl-grafica-desliza { overflow-x: auto; }
  .win-grid-2col { grid-template-columns: 1fr !important; }
  .win-metrics-grid, .win-stat-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ui-dialog .ui-dialog-titlebar { font-size: 0.85rem; }
  .ui-dialog .ui-dialog-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; }
  .bat-dia-graf { height: 360px; touch-action: pan-y; }
  .mppt-graf { height: 420px; }
  .banco-graf { height: 420px; }
  .bat-dia-cab { flex-wrap: wrap; gap: 6px; }
  .bat-dia-cab .pista { flex: 1 1 100%; font-size: 0.7rem; }
  .bat-dia-res { flex-wrap: wrap; }
  .banco-tarjetas { grid-template-columns: 1fr 1fr; gap: 8px; }
  .cl-dias { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 8px; padding-bottom: 6px; }
  .cl-dia { flex: 0 0 78%; scroll-snap-align: start; }
  .cl-detalle-cab { flex-wrap: wrap; gap: 6px 12px; }
  .cl-detalle-cab b { flex: 1 1 100%; }
  .win-cells-grid { grid-template-columns: repeat(4, 1fr); }
  .inv-grande b { font-size: 1.5rem; }
}