/* Reservas · sala de juegos.
 *
 * LOS COLORES SALEN DE LA SALA, no de un tema genérico: fondo índigo casi
 * negro (#190E2C en la pantalla de la arena), tarjetas en degradado morado →
 * magenta (#401B46 → #8E007A), acento violeta (#A742E8) y el morado apagado
 * del pie (#4B3160). Muestreados de la grabación, no inventados.
 *
 * Es un tema oscuro a propósito —una sala de juegos no se ve en blanco—, así
 * que todo pinta su propio fondo y no hereda el del navegador.
 */

@import url("https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&display=swap");

:root {
  /* Le dice al navegador que esto es oscuro, y con eso pinta oscuros los
     controles que dibuja él: el selector de fecha, las barras de rodar y los
     desplegables. Sin esto, el campo de fecha sale blanco con letra blanca. */
  color-scheme: dark;

  --fondo: #100820;
  --fondo-2: #1A0E2E;
  --carta: #1C1030;
  --carta-2: #241541;
  --linea: #3A2153;
  --linea-suave: #2A1740;

  --texto: #C9BBDF;
  --claro: #F4EFFB;
  --suave: #9583B4;

  --magenta: #C2129F;
  --magenta-hondo: #8E007A;
  --violeta: #A742E8;
  --violeta-hondo: #5B1E86;
  --morado: #4B3160;

  --ok: #35D6A4;
  --ok-fondo: #10352F;
  --malo: #FF6B8A;
  --malo-fondo: #3A1226;

  --vivo: linear-gradient(100deg, var(--violeta-hondo), var(--magenta));
  --r: 14px;
  --titulo: "Chakra Petch", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* Varias clases de aquí ponen `display`, y eso gana sobre el atributo
   `hidden`. Sin esta línea, lo escondido se sigue viendo. */
[hidden] { display: none !important; }

body {
  font: 15px/1.6 "Segoe UI", system-ui, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  /* El resplandor de la sala: dos focos morados sobre el índigo, como el
     fondo de la arena. Van fijos para que no se muevan al rodar la página. */
  background-image:
    radial-gradient(1100px 620px at 12% -8%, rgba(167, 66, 232, .22), transparent 62%),
    radial-gradient(900px 560px at 96% 8%, rgba(194, 18, 159, .18), transparent 58%);
  background-attachment: fixed;
  min-height: 100vh;
  /* `align-items: flex-start` y no el `stretch` de fábrica: siendo body un
     flex de alto 100vh, por defecto estira el marco hasta abajo, y ese alto
     de más se reparte entre sus filas. La barra del logo salía del triple de
     alto sin que nada en ella lo pidiera. */
  display: flex; justify-content: center; align-items: flex-start;
  padding: 28px 16px 60px;
}

h1, h2, h3, .marca, .codigo, .rotulo { font-family: var(--titulo); }

a { color: var(--violeta); }

.marco {
  width: min(980px, 100%);
  background: var(--carta); border: 1px solid var(--linea); border-radius: 20px;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .9), 0 0 0 1px rgba(167, 66, 232, .06);
  display: grid; grid-template-columns: 300px minmax(0, 1fr); overflow: hidden;
}
@media (max-width: 800px) { .marco { grid-template-columns: 1fr; } }

/* ── la columna de la izquierda ── */
.lado {
  padding: 26px; border-right: 1px solid var(--linea-suave);
  background: linear-gradient(180deg, var(--carta-2), var(--carta));
}
@media (max-width: 800px) { .lado { border-right: 0; border-bottom: 1px solid var(--linea-suave); } }
.marca {
  display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--claro);
  letter-spacing: .01em;
}
.marca .bola {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center;
  background: var(--vivo); font-size: 17px; box-shadow: 0 6px 18px -8px var(--magenta);
}
.lado h1 { font-size: 25px; line-height: 1.15; color: var(--claro); margin: 22px 0 6px; }
.lado .sub { margin: 0 0 20px; font-size: 14px; }
.datos { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; font-size: 14px; }
.datos li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: start; color: var(--claro); }
.datos li span.ico { opacity: .9; }
.datos li small { display: block; color: var(--suave); font-size: 12.5px; }
.volver {
  margin-top: 22px; background: none; border: 0; color: var(--violeta); cursor: pointer;
  font: inherit; font-size: 14px; padding: 0; display: inline-flex; gap: 6px; align-items: center;
}
.volver:hover { color: var(--magenta); }

/* la barra de arriba: el logo al centro, la puerta a la derecha.
   Tres columnas y no un `flex` con separador: la del medio se queda en el
   centro del marco pase lo que pase, así que el logo no se corre cuando
   «Acceso» cambie de ancho —o cuando algún día haya dos botones—. */
.alto {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 14px; padding: 16px 20px;
  border-bottom: 1px solid var(--linea-suave); background: rgba(0, 0, 0, .18);
}
.alto .acceso { grid-column: 3; justify-self: end; }
.logo { grid-column: 2; display: inline-flex; line-height: 0; }
/* Alto fijo y ancho automático: si mañana cambian el logo por uno más ancho o
   más estrecho, la barra no se mueve. */
.logo img { height: 54px; width: auto; display: block; }
@media (max-width: 700px) {
  /* Apretado, el logo centrado y el botón se pisarían: se apilan. */
  .alto { grid-template-columns: 1fr; justify-items: center; gap: 12px; }
  .alto .acceso, .logo { grid-column: 1; justify-self: center; }
  .logo img { height: 42px; }
}
.acceso {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  border: 1px solid var(--linea); color: var(--claro); border-radius: 99px;
  padding: 7px 16px; font-size: 13.5px; font-weight: 600;
}
.acceso:hover { border-color: var(--violeta); background: rgba(167, 66, 232, .14); }

/* ── el cuerpo ── */
.cuerpo { padding: 26px 30px 34px; min-height: 470px; }
.cuerpo h2 { font-size: 21px; color: var(--claro); margin: 0 0 4px; }
.cuerpo .ayuda { margin: 0 0 20px; font-size: 14px; }

/* paso 1: en qué jugar */
.tipos { display: grid; gap: 14px; }
.tipo {
  display: grid; grid-template-columns: 58px 1fr auto; gap: 16px; align-items: center;
  padding: 18px; border: 1px solid var(--linea); border-radius: var(--r);
  background: linear-gradient(100deg, var(--carta-2), var(--carta) 62%);
  cursor: pointer; text-align: left; font: inherit; width: 100%; color: var(--texto);
  transition: border-color .14s, box-shadow .14s, transform .14s, background .14s;
}
.tipo:hover {
  border-color: var(--magenta); transform: translateY(-2px);
  background: linear-gradient(100deg, var(--violeta-hondo), var(--magenta-hondo) 85%);
  box-shadow: 0 18px 34px -22px var(--magenta);
}
.tipo:hover small { color: rgba(255, 255, 255, .82) !important; }
.tipo .emoji { font-size: 34px; line-height: 1; text-align: center; }
.tipo b { display: block; color: var(--claro); font-size: 17px; font-family: var(--titulo); }
.tipo small { color: var(--texto); font-size: 13.5px; }
.tipo .cuantas { font-size: 12.5px; color: var(--suave); white-space: nowrap; }

.duraciones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.pastilla {
  border: 1px solid var(--linea); background: var(--carta-2); border-radius: 99px;
  padding: 9px 18px; cursor: pointer; font: inherit; font-size: 14px; color: var(--claro);
}
.pastilla:hover { border-color: var(--violeta); }
.pastilla.on { background: var(--vivo); border-color: transparent; color: #fff; font-weight: 600; }
.rotulo {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--suave);
  font-weight: 700; margin: 26px 0 10px;
}

/* paso 2: mes y horas */
.agenda { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 26px; }
@media (max-width: 720px) { .agenda { grid-template-columns: 1fr; } }
.mes-alto { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mes-alto b { color: var(--claro); font-size: 16px; font-family: var(--titulo); }
.mes-alto button {
  border: 1px solid var(--linea); background: var(--carta-2); width: 32px; height: 32px;
  border-radius: 50%; cursor: pointer; color: var(--claro); font-size: 15px; line-height: 1;
}
.mes-alto button:hover:not(:disabled) { border-color: var(--violeta); }
.mes-alto button:disabled { opacity: .3; cursor: not-allowed; }
.semana, .mes { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.semana span {
  text-align: center; font-size: 11.5px; color: var(--suave); text-transform: uppercase;
  letter-spacing: .06em; padding-bottom: 4px;
}
.dia {
  aspect-ratio: 1; border: 0; border-radius: 12px; background: rgba(167, 66, 232, .16);
  color: #DCC3F4; font: inherit; font-weight: 600; cursor: pointer; position: relative;
}
.dia:hover { background: rgba(167, 66, 232, .32); color: #fff; }
.dia.vacio { background: none; cursor: default; }
.dia.cerrado { background: none; color: #4C3A64; cursor: not-allowed; }
.dia.on { background: var(--vivo); color: #fff; }
.dia .punto {
  position: absolute; left: 50%; bottom: 6px; width: 4px; height: 4px; border-radius: 50%;
  background: currentColor; transform: translateX(-50%); opacity: .8;
}
.hoy-marca { font-size: 12px; color: var(--suave); margin-top: 10px; }

.horas { display: flex; flex-direction: column; gap: 8px; max-height: 330px; overflow: auto; padding-right: 4px; }
.horas .titulo { font-size: 13.5px; color: var(--claro); font-weight: 600; margin: 0 0 2px; }
.hora {
  border: 1px solid var(--linea); color: var(--claro); background: var(--carta-2);
  border-radius: 10px; padding: 11px; font: inherit; font-weight: 600; cursor: pointer;
}
.hora:hover { border-color: transparent; background: var(--vivo); color: #fff; }
.hora:hover small { color: rgba(255, 255, 255, .8); }
.hora small { display: block; font-weight: 400; font-size: 11.5px; color: var(--suave); }
.vacio-msg { font-size: 13.5px; color: var(--suave); }

/* paso 3: qué puesto — 19 PC no caben en una fila, así que se reparten solos */
.puestos { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.puesto {
  border: 1px solid var(--linea); color: var(--claro); background: var(--carta-2);
  border-radius: 12px; padding: 15px 8px; font: inherit; font-weight: 600; cursor: pointer;
  text-align: center; font-family: var(--titulo);
}
.puesto:hover { border-color: transparent; background: var(--vivo); color: #fff; }
.puesto.tomado {
  border-color: var(--linea-suave); color: #52406B; background: rgba(0, 0, 0, .2);
  cursor: not-allowed; text-decoration: line-through;
}
.leyenda { display: flex; gap: 18px; margin-top: 18px; font-size: 12.5px; color: var(--suave); flex-wrap: wrap; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.muestra { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.muestra.libre { border: 1px solid var(--linea); background: var(--carta-2); }
.muestra.tomado { border: 1px solid var(--linea-suave); background: rgba(0, 0, 0, .2); }

/* paso 4: los datos */
.campos { display: grid; gap: 14px; max-width: 430px; }
.campo { display: grid; gap: 5px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--claro); }
.campo input, .campo select {
  font: inherit; padding: 11px 12px; border: 1px solid var(--linea); border-radius: 10px;
  background: #150B26; color: var(--claro);
}
.campo input::placeholder { color: #5B4878; }
/* Los campos de fecha de los paneles van sueltos, sin `.campo` alrededor. */
input[type="date"] { background: #150B26; color: var(--claro); }
.campo input:focus, .campo select:focus { outline: 2px solid var(--violeta); outline-offset: -1px; }
.campo small { color: var(--suave); font-size: 12px; }
.acciones { display: flex; gap: 12px; align-items: center; margin-top: 22px; flex-wrap: wrap; }
.boton {
  background: var(--vivo); color: #fff; border: 0; border-radius: 99px; padding: 12px 26px;
  font: inherit; font-weight: 600; cursor: pointer;
  /* También se usa en enlaces (<a class="boton">), y ahí hay que quitar el
     subrayado o el botón sale rayado. */
  text-decoration: none; display: inline-block; text-align: center;
}
.boton:hover { filter: brightness(1.12); }
.boton:disabled { opacity: .45; cursor: not-allowed; filter: none; }
.boton.flojo { background: var(--carta-2); color: var(--claro); border: 1px solid var(--linea); }
.boton.flojo:hover { border-color: var(--violeta); filter: none; }
.error { color: var(--malo); font-size: 13.5px; }

/* paso 5: listo */
.listo { text-align: center; padding: 26px 0; }
.listo .tic {
  width: 64px; height: 64px; border-radius: 50%; background: var(--ok-fondo); color: var(--ok);
  display: grid; place-items: center; font-size: 30px; margin: 0 auto 16px;
  box-shadow: 0 0 0 1px rgba(53, 214, 164, .3);
}
.listo h2 { font-size: 23px; }
.resumen {
  margin: 20px auto 0; max-width: 390px; text-align: left; border: 1px solid var(--linea);
  border-radius: var(--r); padding: 18px 20px; display: grid; gap: 10px; font-size: 14px;
  background: var(--carta-2);
}
.resumen div { display: grid; grid-template-columns: 108px 1fr; gap: 10px; }
.resumen b { color: var(--suave); font-weight: 600; }
.resumen span { color: var(--claro); }
.codigo { font-size: 18px; letter-spacing: .1em; color: var(--violeta); font-weight: 700; }
.enlace-cal { display: inline-block; margin-top: 16px; color: var(--violeta); font-size: 14px; }

/* ── las pantallas del local ── */
.panel { width: min(1040px, 100%); }
.panel h1 { color: var(--claro); font-size: 26px; margin: 0 0 6px; }
.panel .ayuda { font-size: 14px; }
.tarjeta {
  background: var(--carta); border: 1px solid var(--linea); border-radius: var(--r);
  padding: 20px 22px; margin-bottom: 18px;
}
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--suave); padding: 8px 10px; border-bottom: 1px solid var(--linea);
}
.tabla td { padding: 11px 10px; border-bottom: 1px solid var(--linea-suave); color: var(--claro); }
.tabla tr:last-child td { border-bottom: 0; }
.etiqueta {
  display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px;
  font-weight: 600; background: rgba(167, 66, 232, .18); color: #D9B8F5;
}
.etiqueta.ok { background: var(--ok-fondo); color: var(--ok); }
.aviso { border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-bottom: 14px; }
.aviso.bien { background: var(--ok-fondo); color: var(--ok); }
.aviso.mal { background: var(--malo-fondo); color: var(--malo); }

/* ── la rejilla del administrador: 23 puestos por 13 horas ──
   Se lee de un vistazo, así que las casillas son cuadraditos de color y el
   texto va dentro solo si cabe. La columna de nombres queda pegada al borde
   para no perder de vista de qué puesto es la fila cuando se rueda de lado. */
.rejilla-caja { overflow: auto; max-height: 70vh; border: 1px solid var(--linea); border-radius: var(--r); }
.rejilla { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: max-content; }
.rejilla th, .rejilla td { border-right: 1px solid var(--linea-suave); border-bottom: 1px solid var(--linea-suave); }
.rejilla thead th {
  position: sticky; top: 0; z-index: 3; background: var(--carta-2); color: var(--suave);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 9px 6px;
  min-width: 78px; white-space: nowrap;
}
.rejilla thead th.cerrada { background: var(--malo-fondo); color: var(--malo); }
.rejilla tbody th {
  position: sticky; left: 0; z-index: 2; background: var(--carta-2); color: var(--claro);
  text-align: left; font-weight: 600; padding: 0 12px; white-space: nowrap; min-width: 96px;
  font-family: var(--titulo);
}
.rejilla thead th:first-child { left: 0; z-index: 4; min-width: 96px; }
.rejilla tbody tr.separa th, .rejilla tbody tr.separa td { border-top: 2px solid var(--violeta); }
.casilla { height: 40px; padding: 0; text-align: center; background: #150B26; }
.casilla button {
  width: 100%; height: 100%; border: 0; background: none; font: inherit; font-size: 12px;
  cursor: pointer; color: inherit; padding: 2px 6px; overflow: hidden; white-space: nowrap;
  text-overflow: ellipsis; display: block;
}
.casilla.libre button { color: #4A3766; }
.casilla.libre:hover { background: rgba(167, 66, 232, .16); }
.casilla.ocupada { background: linear-gradient(100deg, var(--violeta-hondo), var(--magenta-hondo)); color: #fff; font-weight: 600; }
.casilla.ocupada:hover { filter: brightness(1.2); }
.casilla.bloqueada { background: var(--malo-fondo); color: var(--malo); font-weight: 600; }
.casilla.cerrada {
  background: repeating-linear-gradient(45deg, #2A1233, #2A1233 6px, #1D0C26 6px, #1D0C26 12px);
}

dialog {
  border: 1px solid var(--linea); border-radius: var(--r); padding: 0; max-width: 450px;
  width: 92%; color: var(--texto); background: var(--carta);
  box-shadow: 0 50px 100px -50px #000;
}
dialog::backdrop { background: rgba(8, 4, 16, .72); }
dialog .dentro { padding: 22px 24px 20px; }
dialog h3 { margin: 0 0 4px; color: var(--claro); font-size: 19px; }
dialog .ayuda { margin: 0 0 16px; font-size: 13.5px; }
.fila2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* ── la pantalla de acceso ── */
.puerta {
  width: min(420px, 100%); align-self: center; background: var(--carta);
  border: 1px solid var(--linea); border-radius: 20px; padding: 34px 32px 30px;
  box-shadow: 0 40px 90px -50px #000;
}
.puerta .marca { justify-content: center; margin-bottom: 20px; }
.puerta h1 { font-size: 23px; color: var(--claro); margin: 0 0 6px; text-align: center; }
.puerta .ayuda { text-align: center; margin: 0 0 22px; font-size: 14px; }
.puerta .acciones { justify-content: center; }
.puerta .volver { display: block; margin: 18px auto 0; text-align: center; }