/* =========================================================================
   theme.css — Tokens de diseño "Mesa Central (claro)" — Modelo C
   Compartir este archivo entre todas las pantallas de la sub-web de mesas.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  --bg:#FFFFFF; --panel:#F6F7F9; --line:#E2E5EA; --text:#12161C; --soft:#6B7480;
  --signal:#2E5BFF; --ok:#178A57; --alert:#C2382F;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
}

.disp{ font-family:'Space Grotesk',sans-serif; }
.mono{ font-family:'JetBrains Mono',monospace; }

.topbar{
  padding:14px 22px;border-bottom:1px solid var(--line);background:var(--text);
  display:flex;justify-content:space-between;align-items:center;
}
.brand{ display:flex; align-items:center; gap:10px; }
.led{ width:8px;height:8px;border-radius:1px;background:var(--ok);box-shadow:0 0 5px rgba(23,138,87,.45); }
.led.off{ background:var(--soft); box-shadow:none; }
.brand-txt .eb{ font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#B8C0CC; }
.brand-txt .nm{ font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:#FFFFFF; }

.center-wrap{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:32px 20px;
}

.card{
  width:100%; max-width:420px; background:var(--panel); border:1px solid var(--line);
  border-radius:4px; padding:28px;
}

.eb{ font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--signal); margin-bottom:8px; text-align:center; }
h1.disp{ font-size:22px; font-weight:600; margin:0 0 22px; text-align:center; }

.toggle{
  display:flex; background:#fff; border:1px solid var(--line); border-radius:4px; padding:4px; margin-bottom:22px;
}
.toggle button{
  flex:1; padding:10px; border:none; border-radius:3px; cursor:pointer; background:transparent;
  font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12.5px; color:var(--soft);
}
.toggle button.active{ background:var(--text); color:#fff; }

.qr-box{
  width:220px; height:220px; margin:0 auto 18px; border:1px solid var(--line); border-radius:4px;
  background:#fff; display:flex; align-items:center; justify-content:center; position:relative;
}
.countdown-bar-track{ height:4px; background:var(--line); border-radius:2px; overflow:hidden; margin-bottom:8px; }
.countdown-bar-fill{ height:100%; background:var(--signal); transition:width 1s linear; }
.countdown-label{ text-align:center; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--soft); margin-bottom:18px; }

.cua-input{
  width:100%; padding:16px; border:2px solid var(--line); border-radius:4px; text-align:center;
  font-family:'JetBrains Mono',monospace; font-size:20px; font-weight:700; letter-spacing:.25em;
  outline:none; margin-bottom:14px; color:var(--text);
}
.cua-input:focus{ border-color:var(--signal); }

.btn-signal{
  width:100%; padding:14px; border:none; border-radius:4px; cursor:pointer;
  background:var(--signal); color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:14px; letter-spacing:.06em; text-transform:uppercase;
}
.btn-signal:disabled{ background:var(--line); color:var(--soft); cursor:not-allowed; }

.status-msg{ text-align:center; font-size:12.5px; color:var(--soft); margin-top:14px; min-height:18px; }
.status-msg.err{ color:var(--alert); }
.status-msg.ok{ color:var(--ok); }

/* -------- Modo Votación (pantalla completa) -------- */
.vote-screen{ padding:34px 26px; max-width:900px; margin:0 auto; }
.vote-eb{ text-align:center;font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--signal);margin-bottom:8px; }
.vote-h{ text-align:center;font-family:'Space Grotesk',sans-serif;font-size:20px;font-weight:600;margin:0 0 28px; }
.ballot-grid{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.ballot{
  width:160px;height:176px;background:var(--panel);border:1px solid var(--line);border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;position:relative;
}
.ballot.sel{ border-color:var(--signal); box-shadow:inset 0 0 0 1px var(--signal); background:#EEF2FF; }
.ballot .mark{ width:46px;height:46px;background:var(--bg);border:1px solid var(--line);border-radius:4px;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px; }
.ballot.sel .mark{ border-color:var(--signal); color:var(--signal); }
.ballot .logo-img{ width:75%; max-width:120px; max-height:96px; object-fit:contain; }
.ballot .nm{ font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-align:center;color:var(--soft); padding:0 8px; }
.ballot.sel .nm{ color:var(--text); }
.ballot .tick{ position:absolute;top:8px;right:8px;width:18px;height:18px;background:var(--signal);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;font-weight:700;border-radius:2px; }
.ballot.nulo{ border-style:dashed; }
.ballot.nulo .mark{ color:var(--alert); border-color:var(--alert); }
.vote-btn-wrap{ display:flex; justify-content:center; margin-top:30px; }
.vote-btn{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;letter-spacing:.1em;
  padding:16px 52px;background:var(--signal);color:#fff;border:none;border-radius:4px;cursor:pointer;text-transform:uppercase;
}
.vote-btn:disabled{ background:var(--line); color:var(--soft); cursor:not-allowed; }

/* -------- Pantalla de reposo / "Iniciar Votación" -------- */
.pantalla-inicio{ text-align:center; padding-top:120px; }
.btn-iniciar{
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:20px;letter-spacing:.08em;
  padding:30px 70px;background:var(--signal);color:#fff;border:none;border-radius:6px;cursor:pointer;text-transform:uppercase;
  box-shadow:0 8px 24px rgba(46,91,255,.25);
}
.pantalla-inicio .eb{ font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin-bottom:18px; }
.link-cerrar-mesa{
  display:inline-block; margin-top:22px; background:none; border:none; cursor:pointer;
  font-family:'Inter',system-ui,sans-serif; font-size:12.5px; color:var(--soft); text-decoration:underline;
  text-underline-offset:3px;
}
.link-cerrar-mesa:hover{ color:var(--alert); }

/* -------- Cuadrito de emergencia (casi invisible) -------- */
.led-emergencia{
  position:fixed; bottom:14px; right:14px; width:9px; height:9px; border-radius:1px;
  background:var(--line); cursor:pointer; opacity:.55; border:none; padding:0;
}
.led-emergencia:hover{ opacity:1; }