:root{
  --cuerpo:#f4f2ee; --cuerpo-borde:#d8d5cf; --placa:#9a9a98;
  --boton:#c0392b; --boton-brillo:#e74c3c; --led-off:#5a3d3d; --led-on:#ff5747;
  --tinta:#2b2925; --tinta-suave:#6f6b63; --linea:#e2ded6; --ok:#2e7d4f; --mal:#b3261e;
  --fondo-1:#2c3440; --fondo-2:#12161d;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{min-height:100%;background:radial-gradient(circle at 30% 20%, var(--fondo-1), var(--fondo-2) 70%) fixed var(--fondo-2)}
body{
  min-height:100svh; background:transparent;
  font-family:-apple-system,'Helvetica Neue',system-ui,sans-serif; color:var(--tinta);
  padding:max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.centro{min-height:calc(100svh - 32px); display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px}

/* ---- control remoto (igual al original) ---- */
.remoto{
  --w:min(92vw, 58vh, 440px);
  width:var(--w); font-size:calc(var(--w) / 12);
  padding:1.45em 1.2em 1.95em; border-radius:2.1em;
  background:linear-gradient(160deg,#fbfaf8,var(--cuerpo) 45%,#e8e5df);
  border:1px solid var(--cuerpo-borde);
  box-shadow:0 1.4em 3.4em rgba(0,0,0,.55), inset 0 2px 3px #fff, inset 0 -6px 14px rgba(0,0,0,.10);
  display:flex; flex-direction:column; align-items:center; gap:1.25em; user-select:none;
}
.led{width:.85em;height:.5em;border-radius:.25em;background:var(--led-off);box-shadow:inset 0 1px 2px rgba(0,0,0,.5);transition:all .15s}
.led.on{background:var(--led-on);box-shadow:0 0 .9em .28em rgba(255,87,71,.75)}
.marca{font-size:.72em;letter-spacing:.18em;color:#8b877f;font-weight:600}
.plato{width:7em;height:7em;border-radius:1.25em;background:linear-gradient(145deg,#a8a8a6,var(--placa) 55%,#8b8b89);
  box-shadow:inset 0 .2em .4em rgba(255,255,255,.35), inset 0 -.26em .5em rgba(0,0,0,.35), 0 .13em .26em rgba(0,0,0,.25);
  display:flex;align-items:center;justify-content:center}
.boton{font:inherit; /* los <button> NO heredan font-size */
  width:4.4em;height:4.4em;border-radius:50%;border:none;cursor:pointer;touch-action:manipulation;
  background:radial-gradient(circle at 35% 30%, var(--boton-brillo), var(--boton) 65%);
  box-shadow:0 .34em 0 #8e2418, 0 .5em .8em rgba(0,0,0,.45), inset 0 .1em .18em rgba(255,255,255,.45);
  transition:transform .07s, box-shadow .07s}
.boton:active,.boton.apretado{transform:translateY(.28em);
  box-shadow:0 .06em 0 #8e2418, 0 .17em .34em rgba(0,0,0,.45), inset 0 .12em .22em rgba(0,0,0,.35)}
.boton:focus-visible{outline:.12em solid #fff;outline-offset:.2em}
.estado{font-size:.6em;color:#6f6b63;min-height:2.6em;font-weight:500;text-align:center;line-height:1.3;max-width:12em}
.aro{width:2.3em;height:.3em;border-radius:.18em;background:#d8d5cf;box-shadow:inset 0 1px 2px rgba(0,0,0,.25);margin-top:-.4em}
.pie{display:flex;gap:18px;font-size:14px}
.pie a{color:#aab3c0;text-decoration:none}
.pie a:hover{color:#fff}

/* ---- tarjetas (login, invitación, cuenta, admin) ---- */
.tarjeta{
  width:min(100%, 440px); background:linear-gradient(160deg,#fbfaf8,var(--cuerpo) 60%,#ebe8e2);
  border:1px solid var(--cuerpo-borde); border-radius:22px; padding:24px 20px;
  box-shadow:0 18px 44px rgba(0,0,0,.5); display:flex; flex-direction:column; gap:14px;
}
.ancha{width:min(100%, 980px)}
.pagina{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:16px;padding-top:8px}
.barra{display:flex;justify-content:space-between;align-items:center;color:#dfe5ee;gap:12px;flex-wrap:wrap}
.barra h1{font-size:20px;font-weight:650;letter-spacing:.02em}
.barra a{color:#aab3c0;text-decoration:none;font-size:14px}
h2{font-size:17px;font-weight:650}
h3{font-size:14px;font-weight:650;color:var(--tinta-suave);text-transform:uppercase;letter-spacing:.06em}
p,li{font-size:15px;line-height:1.45}
.suave{color:var(--tinta-suave);font-size:14px}
.marca-chica{font-size:12px;letter-spacing:.18em;color:#8b877f;font-weight:600;text-align:center}
.btn{font:inherit;font-size:15px;font-weight:600;border:none;border-radius:12px;padding:12px 16px;cursor:pointer;
  background:#2b2925;color:#fff;touch-action:manipulation;min-height:44px}
.btn:disabled{opacity:.55;cursor:default}
.btn.rojo{background:radial-gradient(circle at 35% 30%, var(--boton-brillo), var(--boton) 70%)}
.btn.claro{background:#fff;color:var(--tinta);border:1px solid var(--linea)}
.btn.peligro{background:#fff;color:var(--mal);border:1px solid #e9c7c4}
.btn.chico{font-size:13px;padding:7px 10px;min-height:34px;border-radius:9px}
.fila{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
input,select{font:inherit;font-size:16px;padding:10px 12px;border-radius:10px;border:1px solid var(--linea);background:#fff;color:var(--tinta);min-height:44px;width:100%}
label{font-size:13px;color:var(--tinta-suave);display:flex;flex-direction:column;gap:4px;flex:1;min-width:140px}
.msg{font-size:14px;min-height:1.2em}
.msg.ok{color:var(--ok)} .msg.mal{color:var(--mal)}
.oculto{position:absolute;opacity:0;pointer-events:none;height:0;width:0}
.secreto{font-family:ui-monospace,Menlo,monospace;font-size:13px;word-break:break-all;background:#fff;border:1px dashed #c9c4ba;border-radius:10px;padding:10px}
.lista{list-style:none;display:flex;flex-direction:column;gap:8px}
.lista li{background:#fff;border:1px solid var(--linea);border-radius:12px;padding:10px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.chip{font-size:12px;font-weight:600;border-radius:999px;padding:2px 8px;background:#ece9e3;color:var(--tinta-suave)}
.chip.activo{background:#dcefe3;color:var(--ok)} .chip.invitado{background:#fdf0d5;color:#8a5a00}
.chip.suspendido{background:#f7dcda;color:var(--mal)}
.tabla-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--linea);border-radius:12px;background:#fff}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--linea);white-space:nowrap;vertical-align:middle}
th{font-size:12px;color:var(--tinta-suave);font-weight:650;text-transform:uppercase;letter-spacing:.04em;background:#faf9f7}
tr:last-child td{border-bottom:none}
.aviso{background:#fdf0d5;border:1px solid #f1d59a;color:#6b4a00;border-radius:12px;padding:10px 12px;font-size:14px}
.aviso.mal{background:#f7dcda;border-color:#eab6b1;color:var(--mal)}
.pasos{padding-left:20px;display:flex;flex-direction:column;gap:6px}
details summary{cursor:pointer;font-weight:600;font-size:15px}
@media (max-width:520px){ .tarjeta{padding:20px 16px} th,td{padding:7px 8px} }
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}

/* ---- control de dos botones ---- */
.plato.doble{width:9.4em;height:6.4em;justify-content:space-around;padding:0 .3em}
.tecla{display:flex;flex-direction:column;align-items:center;gap:.35em}
.plato.doble .boton{width:3.7em;height:3.7em}
.boton.ciclo{background:radial-gradient(circle at 35% 30%, #5d6a7c, #3a4554 65%);
  box-shadow:0 .34em 0 #232b36, 0 .5em .8em rgba(0,0,0,.45), inset 0 .1em .18em rgba(255,255,255,.35)}
.boton.ciclo:active,.boton.ciclo.apretado{box-shadow:0 .06em 0 #232b36, 0 .17em .34em rgba(0,0,0,.45), inset 0 .12em .22em rgba(0,0,0,.35)}
.rotulo{font-size:.36em;letter-spacing:.12em;color:#f1efea;font-weight:700;text-shadow:0 1px 1px rgba(0,0,0,.35);white-space:nowrap}
.cancelar{font:inherit;font-size:.5em;font-weight:650;color:#b3261e;background:#fff;border:1px solid #e9c7c4;
  border-radius:999px;padding:.55em 1.2em;margin-top:-.6em;cursor:pointer;touch-action:manipulation;min-height:44px}
.cancelar[hidden]{display:none}
.tarjeta[hidden]{display:none}