/* Misma base visual que la Agenda */
:root{
  color-scheme: light;
  --bg:#f4f6f9; --surface:#ffffff; --surface-2:#f0f3f7; --line:#dde3ea;
  --txt:#16202c; --txt-dim:#54637a; --txt-faint:#7c8a9d;
  --accent:#3563c9; --ok:#2f8a4d; --warn:#a9741a; --alert:#c0473f;
  --radius:14px;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1080px; margin:0 auto;
  padding:calc(32px + env(safe-area-inset-top)) 20px calc(72px + env(safe-area-inset-bottom))}
header.top{margin-bottom:28px; display:flex; gap:16px; align-items:center}
header.top img{width:56px; height:56px; border-radius:13px; flex:0 0 auto}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--txt-faint); margin:0 0 4px}
h1{font-size:30px; line-height:1.2; margin:0; letter-spacing:-.02em}

.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px}
.card h2{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-faint); margin:0 0 10px}
.vacio{margin:0; color:var(--txt-faint); font-size:14.5px}

a.volver{display:inline-block; margin-bottom:14px; color:var(--accent); text-decoration:none; font-size:14px; letter-spacing:.06em}
a.tarjeta{color:inherit; text-decoration:none; display:block}
a.tarjeta:active{background:var(--surface-2)}
a.tarjeta h2::after{content:"\203A"; margin-left:auto; font-size:20px; letter-spacing:0; color:var(--txt-faint)}
a.tarjeta h2{display:flex; align-items:center}

.callout{border-left:3px solid var(--warn); background:var(--surface-2); border-radius:0 10px 10px 0;
  padding:12px 14px; margin:0 0 18px; color:var(--txt-dim); font-size:14.5px}
.callout strong{color:var(--txt)}
.callout.alert{border-left-color:var(--alert)}

/* Luces */
.zona h2{display:flex; align-items:center; gap:10px}
.zona h2 button{margin-left:auto}
ul.luces{list-style:none; margin:0; padding:0}
ul.luces li{padding:14px 0; border-top:1px solid var(--line)}
ul.luces li:first-child{border-top:0; padding-top:0}
ul.luces li:last-child{padding-bottom:0}
.luz{display:flex; align-items:center; gap:14px}
.luz .bombilla{flex:0 0 34px; height:34px; border-radius:50%; background:var(--surface-2);
  border:1px solid var(--line); transition:background .2s, box-shadow .2s}
.luz.on .bombilla{background:#f6c75a; border-color:#e8b440;
  box-shadow:0 0 0 4px color-mix(in srgb,#f6c75a calc(var(--brillo,100) * .35%),transparent)}
.luz .nombre{flex:1; min-width:0}
.luz .nombre b{display:block; font-weight:600}
.luz .nombre span{display:block; color:var(--txt-dim); font-size:14px}
.luz.off-line{opacity:.55}

button.texto{appearance:none; border:0; background:none; padding:4px 0; font:inherit; font-size:12px;
  letter-spacing:.06em; color:var(--accent); cursor:pointer; text-transform:none}

/* Interruptor */
button.interruptor{appearance:none; -webkit-appearance:none; flex:0 0 auto; position:relative; width:52px; height:32px;
  border-radius:99px; border:0; padding:0; background:var(--line); cursor:pointer; transition:background .2s}
button.interruptor::after{content:""; position:absolute; top:3px; left:3px; width:26px; height:26px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(20,30,50,.25); transition:transform .2s}
button.interruptor[aria-checked="true"]{background:var(--ok)}
button.interruptor[aria-checked="true"]::after{transform:translateX(20px)}
button.interruptor:disabled{cursor:default; opacity:.6}
button.interruptor:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Brillo */
input.brillo{width:100%; margin:14px 0 0; accent-color:#e8b440; height:28px}