/* Paur Smart - panel de la casa. Mobile-first; menu lateral con boton hamburguesa. Colores de la marca PAUR. */
:root {
  --bg: #0a0a0c;
  --card: #141418;
  --card-2: #1c1c22;
  --card-3: #24242c;
  --ink: #f4f4f6;
  --muted: #9b9ba8;
  --line: #2a2a33;
  --side: #050506;
  --side-ink: #e6e6ea;
  --side-line: rgba(255, 255, 255, 0.08);
  --brand: #fc0076;
  --brand-2: #ff4fa3;
  --brand-soft: rgba(252, 0, 118, 0.14);
  --brand-ink: #ffffff;
  --ok: #2fd08f;
  --ok-soft: rgba(47, 208, 143, 0.14);
  --alarm: #ff4242;
  --alarm-bg: #3a1214;
  --warn: #ffb224;
  --warn-bg: #33260b;
  --cold: #4fb3ff;
  --heat: #ff8a3d;
  --off: #5d5d68;
  --radius: 14px;
  --side-w: 268px;
  --font: "Montserrat", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.45;
  font-size: 15px;
  min-height: 100vh;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--brand-2); outline-offset: 2px; }
.sprite { position: absolute; }
.icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.icon.sm { width: 18px; height: 18px; }
.icon.lg { width: 28px; height: 28px; }

/* ---------- estructura ---------- */
.side {
  position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--side-w);
  background: var(--side); color: var(--side-ink); border-right: 1px solid var(--side-line);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform 0.22s ease;
  padding-top: env(safe-area-inset-top);
}
body.nav-open .side { transform: none; }
.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, 0.6); }
.side-head { display: flex; align-items: center; gap: 12px; padding: 18px 16px 14px; border-bottom: 1px solid var(--side-line); }
.side-title { font-weight: 800; font-size: 1.2rem; letter-spacing: 0.06em; line-height: 1.1; }
.side-title span { color: var(--brand); font-weight: 600; letter-spacing: 0.02em; }
.side-sub { font-size: 0.8rem; opacity: 0.65; }
.nav { flex: 1; overflow-y: auto; padding: 4px 10px 16px; }
.nav-group { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.5; padding: 16px 10px 6px; }
.nav a {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 7px 12px; border-radius: 10px;
  text-decoration: none; color: var(--side-ink); font-weight: 500; position: relative;
}
.nav a:hover { background: rgba(255, 255, 255, 0.06); }
.nav a[aria-current="page"] { background: var(--brand-soft); color: #fff; }
.nav a[aria-current="page"] .icon { color: var(--brand); }
.nav a[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 4px; border-radius: 0 4px 4px 0; background: var(--brand); }
.nav .tag { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--alarm); color: #fff; font-size: 0.75rem; font-weight: 700; display: grid; place-items: center; }
.nav .tag.soft { background: var(--card-3); color: var(--side-ink); }
.side-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); border-top: 1px solid var(--side-line); font-size: 0.85rem; }
.side-foot .who { opacity: 0.7; margin-bottom: 8px; }
.side-foot button { width: 100%; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--side-line); background: transparent; color: var(--side-ink); }
.side-foot button:hover { background: rgba(255, 255, 255, 0.06); }

.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 10px;
  padding: calc(8px + env(safe-area-inset-top)) 14px 8px; background: rgba(10, 10, 12, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.burger { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); display: grid; place-items: center; flex-shrink: 0; }
.burger:hover { border-color: var(--brand); color: var(--brand); }
.top-title { font-weight: 700; font-size: 1.05rem; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-chip { display: flex; align-items: center; gap: 7px; font-size: 0.8rem; padding: 6px 11px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); white-space: nowrap; }
.top-chip.armed { border-color: var(--brand); color: var(--brand-2); }
.top-chip.fired { background: var(--alarm); border-color: var(--alarm); color: #fff; }
@media (max-width: 560px) { #linkText { display: none; } .top-chip { padding: 6px 9px; } }
@media (max-width: 380px) { #alarmChipText { display: none; } }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--off); flex-shrink: 0; }
.dot.on { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-soft); }
.dot.sim { background: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dot.bad { background: var(--alarm); }

.alert-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--alarm); color: #fff; font-weight: 700; text-decoration: none; }
.alert-bar.warn { background: var(--warn); color: #1d1300; }
.alert-bar span { flex: 1; min-width: 0; }
.alert-bar u { font-weight: 500; white-space: nowrap; }
.blink { animation: blink 1.2s ease-in-out infinite; }
@keyframes blink { 50% { filter: brightness(0.75); } }
@media (prefers-reduced-motion: reduce) { .blink { animation: none; } }
.banner { background: var(--warn-bg); color: var(--warn); text-align: center; font-weight: 600; font-size: 0.88rem; padding: 6px 12px; }
.demo-bar { background: linear-gradient(90deg, var(--brand), #b3005a); color: #fff; text-align: center; font-weight: 600; font-size: 0.8rem; padding: 5px 12px; }

.main { padding: 18px 14px calc(48px + env(safe-area-inset-bottom)); max-width: 1240px; margin: 0 auto; }
.view-title { font-size: 1.5rem; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.01em; }
.view-sub { color: var(--muted); margin-bottom: 18px; max-width: 72ch; }

@media (min-width: 1000px) {
  .shell { transition: margin-left 0.22s ease; }
  body.nav-open .shell { margin-left: var(--side-w); }
  .scrim { display: none; }
  .main { padding: 26px 30px 56px; }
}

/* ---------- piezas comunes ---------- */
.grid { display: grid; gap: 14px; }
.grid.auto { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); align-items: start; }
.grid.tiles { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; }
@media (min-width: 760px) { .grid.c2 { grid-template-columns: 1fr 1fr; } .grid.c3 { grid-template-columns: repeat(3, 1fr); } }
.stack > * + * { margin-top: 16px; }
.section-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 26px 0 12px; }
.section-h h2 { font-size: 1.05rem; font-weight: 700; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; }
.card-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.card-h h2, .card-h h3 { font-size: 1rem; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: 0.84rem; }
.note { color: var(--muted); font-size: 0.85rem; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spacer { flex: 1; }
.pink { color: var(--brand-2); }
.okc { color: var(--ok); }
.alc { color: var(--alarm); }
.wac { color: var(--warn); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 8px 16px;
  border-radius: 11px; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink); font-weight: 600; text-decoration: none; white-space: nowrap;
}
.btn:hover:not(:disabled) { background: var(--brand-2); border-color: var(--brand-2); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-2); background: transparent; }
.btn.danger { background: var(--alarm); border-color: var(--alarm); }
.btn.danger:hover:not(:disabled) { background: #ff6262; border-color: #ff6262; }
.btn.small { min-height: 34px; padding: 4px 12px; font-size: 0.85rem; border-radius: 9px; }
.btn.icon-only { width: 42px; padding: 0; }
.btn.small.icon-only { width: 34px; }
.btn.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-2); }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--card-2); }
.seg button { border: 0; background: transparent; padding: 7px 12px; min-height: 38px; font-size: 0.86rem; font-weight: 600; color: var(--muted); }
.seg button + button { border-left: 1px solid var(--line); }
.seg button[aria-pressed="true"] { background: var(--brand); color: #fff; }

.chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; scrollbar-width: thin; }
.chip { border: 1px solid var(--line); background: var(--card); border-radius: 999px; padding: 6px 14px; font-size: 0.86rem; white-space: nowrap; font-weight: 500; }
.chip[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }

/* interruptor */
.switch { position: relative; width: 50px; height: 30px; flex-shrink: 0; border: 0; border-radius: 15px; background: var(--card-3); transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #c9c9d2; transition: transform 0.15s, background 0.15s; }
.switch[aria-checked="true"] { background: var(--brand); }
.switch[aria-checked="true"]::after { transform: translateX(20px); background: #fff; }

input[type="range"] { width: 100%; accent-color: var(--brand); height: 28px; }
input[type="color"] { width: 42px; height: 34px; border: 1px solid var(--line); border-radius: 8px; background: var(--card-2); padding: 2px; }

/* ---------- dispositivos ---------- */
.dev { display: flex; flex-direction: column; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; min-width: 0; transition: border-color 0.15s; }
.dev.active { border-color: rgba(252, 0, 118, 0.55); background: linear-gradient(180deg, rgba(252, 0, 118, 0.08), var(--card) 70%); }
.dev.alarm { border-color: var(--alarm); background: linear-gradient(180deg, rgba(255, 66, 66, 0.16), var(--card) 75%); }
.dev.warnb { border-color: var(--warn); }
.dev-h { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dev-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--card-2); color: var(--muted); flex-shrink: 0; }
.dev.active .dev-ic { background: var(--brand); color: #fff; }
.dev.alarm .dev-ic { background: var(--alarm); color: #fff; }
.dev-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dev-state { font-size: 0.83rem; color: var(--muted); }
.dev-t { min-width: 0; flex: 1; }
.dev-big { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.dev-big small { font-size: 0.9rem; color: var(--muted); font-weight: 500; }
.dev-ctl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dev-ctl .lbl { font-size: 0.8rem; color: var(--muted); min-width: 44px; }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--card-3); color: var(--muted); }
.badge.sim { background: var(--brand-soft); color: var(--brand-2); }
.badge.ok { background: var(--ok-soft); color: var(--ok); }
.badge.bad { background: var(--alarm-bg); color: var(--alarm); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }

.bar { height: 10px; border-radius: 6px; background: var(--card-3); overflow: hidden; position: relative; }
.bar > i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border-radius: 6px; transition: width 0.6s ease; }
.bar.water > i { background: linear-gradient(90deg, #1f7fd1, var(--cold)); }
.bar.ok > i { background: var(--ok); }
.bar.warn > i { background: var(--warn); }
.bar.bad > i { background: var(--alarm); }

.curtain-vis { position: relative; height: 54px; border-radius: 10px; background: linear-gradient(180deg, #1d2a3d, #2a3f5c); overflow: hidden; border: 1px solid var(--line); }
.curtain-vis i { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(90deg, #5c1c3d 0 7px, #7a2350 7px 14px); transition: width 0.5s linear; }
.curtain-vis i.l { left: 0; }
.curtain-vis i.r { right: 0; }

/* ---------- inicio ---------- */
.hero { display: grid; gap: 14px; grid-template-columns: 1fr; margin-bottom: 16px; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.3fr 1fr; } }
.hero-main { position: relative; overflow: hidden; background: radial-gradient(120% 140% at 100% 0%, rgba(252, 0, 118, 0.35), transparent 55%), var(--card); }
.hero-main .logo { position: absolute; right: -24px; bottom: -30px; width: 190px; opacity: 0.12; pointer-events: none; }
.hero-clock { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1; }
.hero-date { color: var(--muted); margin-top: 4px; }
.wx { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 0.9rem; }
.wx div { display: flex; align-items: center; gap: 6px; }
.alarm-card { display: flex; flex-direction: column; gap: 12px; }
.alarm-state { display: flex; align-items: center; gap: 14px; }
.alarm-state .big-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--card-3); }
.alarm-state.armed .big-ic { background: var(--brand); }
.alarm-state.fired .big-ic { background: var(--alarm); }
.alarm-state b { font-size: 1.2rem; display: block; }
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.modes button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 12px; border: 1px solid var(--line); background: var(--card-2); font-size: 0.82rem; font-weight: 600; }
.modes button[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-2); }
.countdown { font-weight: 700; color: var(--warn); }

.tile { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; min-width: 0; }
.tile:hover { border-color: var(--brand); }
.tile .ti { color: var(--brand); display: flex; }
.tile .tv { font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.tile .tl { font-size: 0.82rem; color: var(--muted); }

.scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.scene { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--card); font-weight: 600; text-align: left; min-height: 56px; }
.scene .icon { color: var(--brand); }
.scene:hover { border-color: var(--brand); }
.scene.busy { opacity: 0.6; }

.room { display: flex; flex-direction: column; gap: 8px; }
.room-h { display: flex; align-items: center; gap: 10px; }
.room-h h3 { font-size: 1rem; flex: 1; min-width: 0; }
.room-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.84rem; color: var(--muted); }

/* ---------- listas ---------- */
.list { display: flex; flex-direction: column; }
.list > .li { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--line); min-width: 0; }
.list > .li:first-child { border-top: 0; }
.list.wrap > .li { flex-wrap: wrap; row-gap: 6px; }
.list.wrap .lt { min-width: 150px; }
.li .lt { flex: 1; min-width: 0; }
.li .lt b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; }
.li .lt span { font-size: 0.82rem; color: var(--muted); }
.ev-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--card-2); color: var(--muted); flex-shrink: 0; }
.ev-ic.alarma { background: var(--alarm); color: #fff; }
.ev-ic.aviso { background: var(--warn-bg); color: var(--warn); }
.ev-time { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }

/* graficos de barras simples */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 150px; padding-top: 10px; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; gap: 4px; }
.chart .col i { width: 100%; max-width: 26px; background: linear-gradient(180deg, var(--brand-2), var(--brand)); border-radius: 4px 4px 1px 1px; min-height: 2px; }
.chart .col.now i { background: #fff; }
.chart .col span { font-size: 0.64rem; color: var(--muted); }
.chart .col.water i { background: linear-gradient(180deg, var(--cold), #1f7fd1); }

/* ---------- formularios y dialogos ---------- */
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; }
.field label, .field .flabel { font-size: 0.84rem; color: var(--muted); font-weight: 500; }
.field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), .field select, .field textarea {
  min-height: 42px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card-2); width: 100%;
}
.field input:focus, .field select:focus { border-color: var(--brand); outline: none; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; }
.checks label { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.86rem; background: var(--card-2); cursor: pointer; }
.checks input { accent-color: var(--brand); }
.inline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
dialog { margin: auto; border: 1px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink); padding: 0; width: min(560px, calc(100vw - 24px)); max-height: calc(100vh - 32px); }
dialog::backdrop { background: rgba(0, 0, 0, 0.7); }
dialog form { padding: 20px; }
dialog h3 { font-size: 1.12rem; margin-bottom: 10px; }
dialog p { color: var(--muted); margin-bottom: 8px; white-space: pre-line; }
.dlg-btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.form-error { background: var(--alarm-bg); color: var(--alarm); padding: 8px 12px; border-radius: 9px; margin-bottom: 12px; font-size: 0.9rem; }
.act-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; padding: 10px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; background: var(--card-2); }

.toast { position: fixed; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; background: var(--card-3); border: 1px solid var(--line); color: var(--ink); padding: 10px 16px; border-radius: 12px; max-width: calc(100vw - 32px); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); }
.toast.err { background: var(--alarm); border-color: var(--alarm); color: #fff; }

.panic { width: 100%; min-height: 54px; border-radius: 14px; border: 2px solid var(--alarm); background: transparent; color: var(--alarm); font-weight: 800; letter-spacing: 0.08em; position: relative; overflow: hidden; }
.panic i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--alarm); opacity: 0.35; }
.panic.holding i { width: 100%; transition: width 1.6s linear; }

.empty { text-align: center; color: var(--muted); padding: 30px 10px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 0.86rem; }
.kv dt { color: var(--muted); }
.kv dd { min-width: 0; overflow-wrap: anywhere; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.84em; }
.pins { display: flex; flex-wrap: wrap; gap: 6px; }
.pins span { font-size: 0.76rem; padding: 3px 8px; border-radius: 7px; background: var(--card-2); border: 1px solid var(--line); }

/* ---------- permisos y modulos ---------- */
@media (min-width: 900px) { .hero.solo { grid-template-columns: 1fr; } }
.list > .li.off .lt b { color: var(--muted); text-decoration: line-through; }
.perm-group { border-top: 1px solid var(--line); padding-top: 12px; }
.perm-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.perm-h .flabel { flex: 1; margin: 0; }
.list.users > .li .lt { flex-basis: 100%; }