/* belawall — vista pizarra. Estilo "panel de estación": fondo muy oscuro,
   tipografía grande y luminosa, un acento latón (guiño al reloj antiguo).
   Diseñado para leerse a 3 metros en un 27" apaisado (1080p/1440p). */

:root {
  --bg: #0e1116;
  --panel: #171b23;
  --panel-line: #262c38;
  --text: #f2ead9;      /* blanco cálido, alto contraste sobre el fondo oscuro */
  --muted: #9aa3b2;
  --brass: #d9a441;     /* acento latón/ámbar */
  --brass-dim: #8a6a24;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* El atributo hidden debe ganar: si no, el display:grid de .gate/.board lo pisa
   y el overlay "sin token" se cuela sobre el tablero. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  overflow: hidden;
  cursor: none;               /* kiosco: sin puntero */
  -webkit-user-select: none;
  user-select: none;
}

/* -- Gate (sin token) ------------------------------------------------------ */
.gate { position: fixed; inset: 0; display: grid; place-items: center; }
.gate-box { text-align: center; }
.gate-box h1 { color: var(--brass); font-size: 3rem; letter-spacing: .1em; }
.gate-box p { color: var(--muted); font-size: 1.4rem; margin-top: 1rem; }
.gate-hint code { color: var(--text); background: var(--panel); padding: .1em .4em; border-radius: 4px; }

/* -- Tablero --------------------------------------------------------------- */
.board {
  height: 100vh;
  display: grid;
  grid-template-columns: 38% 1fr;
  grid-template-rows: 1fr auto;
  gap: 2vmin;
  padding: 3vmin;
}

/* Columna del reloj */
.clock-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-right: 1px solid var(--panel-line);
}
.board-title {
  color: var(--brass);
  font-size: 2.6vw;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-bottom: 1vh;
}
.clock {
  font-size: 13vw;
  font-weight: 300;
  line-height: .95;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}
.clock-seconds {
  color: var(--brass);
  font-size: 3vw;
  font-variant-numeric: tabular-nums;
  margin-top: -.5vh;
}
.date {
  color: var(--muted);
  font-size: 2vw;
  margin-top: 1.5vh;
  /* el día ya viene capitalizado desde app.js; nada de capitalize aquí, que
     nos pondría "21 De Julio" en vez de "21 de julio" */
}

/* Reloj de péndulo */
.pendulum { width: 12vmin; height: 22vmin; margin-top: 3vh; }
.pend-mount, .pend-rod { stroke: var(--brass-dim); stroke-width: 3; }
.pend-bob { fill: var(--brass); stroke: var(--brass-dim); stroke-width: 2; }
.pend-swing { transform-origin: 60px 10px; animation: swing 2s ease-in-out infinite; }
@keyframes swing {
  0%, 100% { transform: rotate(11deg); }
  50%      { transform: rotate(-11deg); }
}

/* -- Widgets --------------------------------------------------------------- */
.widgets { display: flex; flex-direction: column; gap: 2vmin; overflow: hidden; }
.panel {
  background: var(--panel);
  border-radius: 1.4vmin;
  padding: 2.4vmin 3vmin;
  overflow: hidden;
}
.panel-turnos { flex: 1; display: flex; flex-direction: column; }
.panel h2 {
  color: var(--brass);
  font-size: 2.2vw;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 1.4vh;
  border-bottom: 1px solid var(--panel-line);
  padding-bottom: 1vh;
}

/* Turnos: filas grandes tarea / responsable / horario */
.turnos { list-style: none; display: flex; flex-direction: column; gap: 1vh; }
.turno {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "task assignee" "sched sched";
  align-items: baseline;
  padding: 1.2vh 0;
  border-bottom: 1px solid var(--panel-line);
}
.turno:last-child { border-bottom: none; }
.turno-task { grid-area: task; font-size: 2.4vw; font-weight: 600; }
.turno-assignee { grid-area: assignee; font-size: 2.4vw; color: var(--brass); font-weight: 600; }
.turno-sched { grid-area: sched; font-size: 1.5vw; color: var(--muted); margin-top: .3vh; }
.turno-empty { color: var(--muted); font-size: 1.8vw; }

/* Avisos */
.avisos { list-style: none; display: flex; flex-direction: column; gap: 1vh; }
.aviso { font-size: 1.9vw; padding-left: 1vw; border-left: 4px solid var(--panel-line); }
.aviso-alta { border-left-color: var(--brass); color: var(--brass); }

/* Frase memorable (pie) */
.frase {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--muted);
  font-size: 1.8vw;
  font-style: italic;
  padding: 1.5vh 3vw 0;
  border-top: 1px solid var(--panel-line);
}
.frase-author { font-style: normal; color: var(--brass-dim); }

/* Pantallas verticales o pequeñas: apilar */
@media (max-aspect-ratio: 1/1) {
  .board { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .clock-col { border-right: none; border-bottom: 1px solid var(--panel-line); padding-bottom: 2vh; }
  .clock { font-size: 22vw; }
  .board-title, .date, .clock-seconds { font-size: 5vw; }
  .panel h2, .turno-task, .turno-assignee { font-size: 5vw; }
  .turno-sched, .aviso, .frase { font-size: 3.4vw; }
}