/* pwa-app-shell: tokens claro/oscuro (REQ-005) + shell + responsive (REQ-001/006). */
:root{
  --bg:#f4f6f9; --surface:#fff; --surface-2:#eef2f7; --border:#d8dee9;
  --fg:#1f2733; --fg-muted:#5b6675;
  --primary:#1F4E79; --primary-fg:#fff; --accent:#2E6DA4;
  --ok:#1A7A42; --warn:#956314; --err:#C0392B;
  --price:#d97706;  /* curva/eje de precio spot (€/MWh) */
  --radius:10px; --shadow:0 2px 8px rgba(0,0,0,.08); --sidebar-w:260px; --topbar-h:56px;
}
[data-theme="dark"]{
  --bg:#0f172a; --surface:#1e293b; --surface-2:#0b1220; --border:#334155;
  --fg:#e2e8f0; --fg-muted:#94a3b8;
  --primary:#0b1f3a; --primary-fg:#e2e8f0; --accent:#38bdf8;
  --ok:#34d399; --warn:#f59e0b; --err:#ef4444; --shadow:0 2px 10px rgba(0,0,0,.5);
  --price:#fbbf24;  /* precio spot, legible sobre fondo oscuro */
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0}
body{font-family:Inter,system-ui,sans-serif;background:var(--bg);color:var(--fg);min-height:100vh}
a{color:var(--accent)}
h1{font-size:1.2rem;margin:0}h2{font-size:1.15rem;margin:.2rem 0 1rem}
h3{font-size:1rem;margin:.9rem 0 .4rem;color:var(--accent)}

/* --- Acceso (sin shell) --- */
#auth-view{max-width:380px;margin:0 auto;padding:2rem 1rem}
form{display:flex;flex-direction:column;gap:.75rem}
label{display:flex;flex-direction:column;gap:.25rem;font-size:.9rem}
input{padding:.6rem;border-radius:.4rem;border:1px solid var(--border);background:var(--surface);color:var(--fg)}
button{padding:.6rem 1rem;border:0;border-radius:.5rem;background:var(--primary);color:var(--primary-fg);font-weight:600;cursor:pointer}
[data-theme="dark"] button{background:var(--accent);color:#04263a}
button:disabled{opacity:.45;cursor:not-allowed}

/* --- Shell (REQ-001) --- */
#app-shell{display:grid;grid-template-columns:var(--sidebar-w) 1fr;grid-template-rows:var(--topbar-h) 1fr;min-height:100vh}
.topbar{grid-column:1/3;display:flex;align-items:center;gap:.6rem;padding:0 1rem;background:var(--primary);color:var(--primary-fg);position:sticky;top:0;z-index:30;box-shadow:var(--shadow)}
.brand{font-weight:700;letter-spacing:.02em;font-size:1rem}
.spacer{flex:1}
.hamburger{display:none;flex-direction:column;gap:4px;width:40px;height:40px;background:rgba(255,255,255,.12);border-radius:8px;align-items:center;justify-content:center;padding:0}
.hamburger span{display:block;width:20px;height:2px;background:currentColor;border-radius:2px}

/* Menú de usuario (REQ-002) */
.user-menu{position:relative}
.avatar{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);color:#fff;font-weight:700;padding:0}
[data-theme="dark"] .avatar{background:var(--accent);color:#04263a}
.dropdown{position:absolute;right:0;top:46px;min-width:220px;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.4rem;z-index:40}
.dropdown .id{padding:.5rem .6rem;border-bottom:1px solid var(--border);font-size:.9rem;word-break:break-all}
.dropdown .id small{display:block;color:var(--fg-muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;margin-top:.15rem}
.dropdown button{display:flex;width:100%;gap:.5rem;align-items:center;justify-content:flex-start;background:none;color:var(--fg);font-weight:500;text-align:left;padding:.6rem;border-radius:8px;min-height:40px}
.dropdown button:hover,.dropdown button:focus-visible{background:var(--surface-2)}
.dropdown .danger{color:var(--err)}

/* Sidebar / árbol (REQ-003) */
.sidebar{background:var(--surface);border-right:1px solid var(--border);padding:.6rem;overflow-y:auto}
.tree,.tree ul{list-style:none;margin:0;padding:0}
.tree ul{padding-left:.4rem}
.client-node{display:flex;align-items:center;gap:.4rem;width:100%;background:none;color:var(--primary);font-weight:700;font-size:.95rem;text-align:left;padding:.55rem .4rem;border-radius:8px;min-height:40px}
.client-node + ul .plant-node{padding-left:1rem}
.client-node:hover,.client-node:focus-visible{background:var(--surface-2)}
.plant-node{display:flex;align-items:center;gap:.4rem;width:100%;background:none;color:var(--fg);font-weight:600;font-size:.92rem;text-align:left;padding:.55rem .4rem;border-radius:8px;min-height:40px}
/* En oscuro, la regla genérica de <button> (fondo acento) ganaba a los nodos del árbol y
   ocultaba el texto. Forzamos fondo transparente y color legible con mayor especificidad. */
[data-theme="dark"] .client-node{color:var(--accent);background:none}
[data-theme="dark"] .plant-node{color:var(--fg);background:none}
[data-theme="dark"] .client-node:hover,[data-theme="dark"] .plant-node:hover{background:var(--surface-2)}
.plant-node:hover,.plant-node:focus-visible{background:var(--surface-2)}
.caret{color:var(--fg-muted);font-size:.7rem;width:.8rem;display:inline-block}
.meter-node{display:block;padding:.5rem .6rem .5rem 1.5rem;border-radius:8px;color:var(--fg);text-decoration:none;font-size:.92rem;position:relative;min-height:40px}
.meter-node:hover,.meter-node:focus-visible{background:var(--surface-2)}
.meter-node.active{background:var(--surface-2);color:var(--accent);font-weight:600}
.meter-node.active::before{content:"";position:absolute;left:.4rem;top:.35rem;bottom:.35rem;width:3px;border-radius:3px;background:var(--accent)}
.sidebar .empty{color:var(--fg-muted);padding:1rem;font-size:.9rem}

/* Contenido */
#content{padding:1.1rem 1.3rem;overflow-y:auto}
.overlay{display:none}

/* --- Componentes existentes (re-tematizados) --- */
.card{display:block;width:100%;text-align:left;margin:.5rem 0;background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:.8rem 1rem}
.card.add{text-align:center}
.error{color:var(--err)} .warn{color:var(--warn)} .ok{color:var(--ok)}
#offline-banner{background:var(--warn);color:#3a2a04;padding:.5rem;border-radius:.4rem;margin-bottom:.75rem}
dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem 1rem}
dt{color:var(--fg-muted)} dd{margin:0;font-variant-numeric:tabular-nums}
.grp{margin:.1rem 0 .6rem}
.grp .lab{color:var(--fg-muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
.vals{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.25rem}
.v{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.35rem .6rem;font-variant-numeric:tabular-nums}
.v .ph{color:var(--fg-muted);font-size:.72rem;margin-right:.35rem}
.v.dudoso{border-color:var(--warn)} .v.dudoso::after{content:" ⚠";color:var(--warn)}
.derived .v{border-style:dashed}
.calc{color:var(--fg-muted);font-size:.72rem}
.controls{display:flex;gap:.5rem;flex-wrap:wrap;margin:.6rem 0}
select,input[type=date]{background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:8px;padding:.45rem .5rem;font:inherit;min-height:40px}
.chart{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:.4rem}
.chart svg{display:block;width:100%;height:auto}
.axis{stroke:var(--border);stroke-width:1}
/* el color de cada serie lo fija el atributo `stroke` por línea (no en CSS, para multi-variable) */
.serie{fill:none;stroke-width:2}
/* Precio spot: trazo discontinuo para distinguirlo de las series de energía (color por `stroke`). */
.serie.price{stroke-width:1.6;stroke-dasharray:5 3}
.grid{stroke:var(--border);stroke-width:1;stroke-dasharray:2 3;opacity:.6}
.lbl{fill:var(--fg-muted);font-size:10px}
.empty{color:var(--fg-muted);padding:1rem;text-align:center}
details.ficha{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:.4rem .9rem;margin:.6rem 0}
details.ficha summary{cursor:pointer;font-weight:600;padding:.5rem 0;color:var(--accent)}
.trad{color:var(--ok)}
.note{color:var(--fg-muted);font-size:.78rem;margin-top:.4rem}
table{width:100%;border-collapse:collapse;font-size:.85rem}
table td{border-top:1px solid var(--border);padding:.2rem .4rem;font-variant-numeric:tabular-nums}
ul{margin:.3rem 0 .3rem 1.1rem;padding:0} li{font-size:.85rem}
.measure-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
/* Medidas instantáneas en 3 columnas: [P,Q,S] · [V,I] · [FP] */
.measure-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.measure-col{display:flex;flex-direction:column;gap:.7rem}

/* Configuración (REQ-004) */
.settings-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1rem 1.2rem;margin-bottom:1rem}
.settings-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--border)}
.settings-row:first-of-type{border-top:0}
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.seg button{background:var(--surface);color:var(--fg);font-weight:500;border-radius:0;padding:.45rem .8rem;min-height:40px}
.seg button.sel{background:var(--primary);color:var(--primary-fg)}
[data-theme="dark"] .seg button.sel{background:var(--accent);color:#04263a}
.switch{width:48px;height:28px;border-radius:999px;background:#cdd6e0;position:relative;padding:0}
.switch.on{background:var(--ok)}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on::after{left:23px}

/* Histórico multi-variable */
.varbox{border:1px solid var(--border);border-radius:8px;padding:.3rem .6rem .5rem;margin:.4rem 0;display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.varbox legend{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-muted);padding:0 .3rem}
.varcheck{display:flex;flex-direction:row;align-items:center;gap:.35rem;font-size:.85rem;cursor:pointer}
.legend{display:flex;flex-wrap:wrap;gap:.5rem 1rem;margin-top:.4rem;font-size:.8rem;color:var(--fg-muted)}
.legend-item{display:inline-flex;align-items:center;gap:.35rem}
.legend-swatch{width:12px;height:12px;border-radius:3px;display:inline-block;flex:0 0 auto}
/* Botón de periodo: apagado (contorno) por defecto, resaltado cuando está activo. */
.preset{background:var(--surface);color:var(--fg);border:1px solid var(--border);font-weight:500}
.preset.active{background:var(--primary);color:var(--primary-fg);border-color:var(--primary);font-weight:700}
[data-theme="dark"] .preset{background:var(--surface);color:var(--fg)}
[data-theme="dark"] .preset.active{background:var(--accent);color:#04263a}

/* Compartir (meter-sharing) */
.shared-badge{font-size:.66rem;color:var(--fg-muted);border:1px solid var(--border);border-radius:999px;padding:.05rem .45rem;margin-left:.4rem}
.shared-badge.pend{color:var(--warn);border-color:var(--warn)}
.share-dialog{background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);max-width:420px;width:92%;padding:1.1rem 1.3rem}
.share-dialog::backdrop{background:rgba(0,0,0,.45)}
.share-dialog h3{margin:.1rem 0 .8rem;color:var(--fg)}

/* Foco visible (REQ-010) */
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* --- Responsive: drawer + tabla->tarjetas + grids (REQ-006) --- */
@media (min-width:1024px){ .measure-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:768px){
  #app-shell{grid-template-columns:1fr}
  .hamburger{display:flex}
  .sidebar{position:fixed;top:var(--topbar-h);left:0;bottom:0;width:min(82vw,300px);transform:translateX(-100%);transition:transform .25s ease;z-index:25}
  #app-shell.drawer-open .sidebar{transform:translateX(0)}
  .overlay{display:none;position:fixed;inset:var(--topbar-h) 0 0 0;background:rgba(0,0,0,.45);z-index:24}
  #app-shell.drawer-open .overlay{display:block}
  #content{padding:.9rem}
  table thead{display:none}
  table tr{display:block;border:1px solid var(--border);border-radius:8px;margin-bottom:.5rem;padding:.3rem .5rem}
  table td{display:flex;justify-content:space-between;gap:1rem;border-top:0}
  table td::before{content:attr(data-label);color:var(--fg-muted);font-size:.72rem;text-transform:uppercase}
  .measure-grid{grid-template-columns:1fr}
  .measure-cols{grid-template-columns:1fr}
  .dropdown{position:fixed;right:.5rem;left:.5rem;top:calc(var(--topbar-h) + 4px);min-width:0}
}

/* meter-tiers (REQ-009): nivel del contador en la ficha */
.tier-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:.25rem 0 .5rem}
.tier-label{color:var(--fg-muted);font-size:.85rem}
.tier-row select{padding:.25rem .4rem;border-radius:6px}
.tier-msg{font-size:.8rem;color:var(--fg-muted)}
.tier-badge{display:inline-block;padding:.15rem .55rem;border-radius:999px;font-size:.78rem;
  border:1px solid var(--border);color:var(--fg-muted)}
.tier-badge.tier-frontera{color:var(--ok);border-color:var(--ok)}

/* item 1: icono de actualizar junto a la antigüedad del dato */
.age-line{display:flex;align-items:center;gap:.45rem;margin:.2rem 0 .5rem}
.icon-btn{background:none;border:1px solid var(--border);border-radius:6px;cursor:pointer;
  color:var(--fg);width:1.7rem;height:1.7rem;line-height:1;padding:0;font-size:1rem}
.icon-btn:hover{background:var(--surface-2)}
.icon-btn:disabled{opacity:.6;cursor:default}
.icon-btn.spin{animation:icon-spin .8s linear infinite}
@keyframes icon-spin{to{transform:rotate(360deg)}}
.muted{color:var(--fg-muted)}

/* meter-rbac RBAC-E */
.attest { display:flex; gap:.5rem; align-items:flex-start; margin:.5rem 0; font-size:.9rem; }
.attest input { margin-top:.2rem; }
.group-row, .member-row { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:.35rem 0; }
.members { max-height:40vh; overflow:auto; margin:.5rem 0; }

/* Gate de aceptación del aviso de privacidad (primer acceso) */
#consent-view{max-width:460px;margin:0 auto;padding:2rem 1rem}
.consent-card{background:var(--surface);color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.2rem 1.4rem}
.consent-check{display:flex;gap:.5rem;align-items:flex-start;margin:1rem 0;line-height:1.4}
.consent-check input{margin-top:.2rem}
.consent-actions{display:flex;gap:.6rem;flex-wrap:wrap}
button.secondary{background:var(--surface-2);color:var(--fg)}
[data-theme="dark"] button.secondary{background:var(--surface-2);color:var(--fg)}