@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/assets/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --tapete: #14503f;
  --tapete-oscuro: #0d3b2e;
  --papel: #f5f8f1;
  --tinta: #10261f;
  --gris: #51655d;
  --mostaza: #f4b52e;
  --ciruela: #6b2455;
  --linea: #cfdcd2;
  --error: #9e1f2c;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--tapete);
  color: var(--tinta);
  font: 400 1.0625rem/1.5 'Bricolage Grotesque', system-ui, sans-serif;
}

h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; font-weight: 700; }
h2 { font-size: 1.375rem; font-weight: 700; }
h3 { margin-top: 1.5rem; font-size: 1.0625rem; font-weight: 700; }

:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 2px; }

.barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: .875rem max(16px, calc((100% - 960px) / 2));
  background: var(--tapete-oscuro);
  color: var(--papel);
}

.marca { color: var(--mostaza); font-size: 1.125rem; font-weight: 700; text-decoration: none; }
.cuenta { display: flex; align-items: center; gap: 1rem; margin: 0; }
.barra .boton-texto { color: var(--papel); }

.contenido {
  width: min(100%, 992px);
  margin: 0 auto;
  padding: 2rem 16px 3rem;
  display: grid;
  gap: 1.5rem;
}

.portada { padding: clamp(3rem, 12vh, 7rem) 0; color: var(--papel); max-width: 34rem; }
.portada p { margin: 1rem 0 2rem; font-size: 1.25rem; }

.panel {
  background: var(--papel);
  border-radius: 6px;
  padding: 1.5rem;
  min-width: 0;
}

.formulario { display: grid; gap: .625rem; max-width: 26rem; margin-top: 1.25rem; }
.formulario .boton { margin-top: .5rem; justify-self: start; }

label { font-weight: 600; }

input:not([type='hidden']) {
  width: 100%;
  padding: .7rem .8rem;
  border: 2px solid var(--gris);
  border-radius: 4px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
}

.campo-codigo {
  max-width: 15rem;
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.boton {
  display: inline-block;
  padding: .7rem 1.2rem;
  border: 0;
  border-radius: 4px;
  background: var(--mostaza);
  color: var(--tinta);
  box-shadow: 0 3px 0 #b47f0f;
  font: inherit;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover { background: #ffc849; }
.boton:active { transform: translateY(2px); box-shadow: 0 1px 0 #b47f0f; }
.boton-pequeno { padding: .35rem .75rem; font-size: 1rem; }

.boton-texto {
  padding: .25rem;
  border: 0;
  background: none;
  color: var(--ciruela);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.mesa { color: var(--papel); }
.mesa p { margin-top: .5rem; font-size: 1.125rem; }

.fichas { display: flex; flex-wrap: wrap; gap: clamp(.35rem, 1.2vw, .7rem); margin-top: 1rem; }

.ficha {
  display: grid;
  place-items: center;
  width: clamp(3rem, 13vw, 6.5rem);
  aspect-ratio: 1;
  border-radius: 8px;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: 0 6px 0 var(--mostaza);
  font-size: clamp(2rem, 9vw, 4.5rem);
  font-weight: 800;
  line-height: 1;
}

.columnas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1.5rem; align-items: start; }

.titulo-acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
h2 span { color: var(--gris); font-weight: 500; }

.lista { list-style: none; margin: .75rem 0 0; padding: 0; }

.lista li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .55rem 0;
  border-top: 1px solid var(--linea);
}

.lista > li > span:last-child:not(.acciones) { color: var(--gris); }
.acciones { display: flex; align-items: center; gap: .75rem; }
.vacio { margin-top: .75rem; color: var(--gris); }

.aviso { padding: .75rem 1rem; border-radius: 4px; background: var(--papel); color: var(--error); font-weight: 600; }
.conexion { padding: .5rem .75rem; border-radius: 4px; background: var(--mostaza); font-weight: 600; }
.zona-cierre { color: var(--papel); }
.zona-cierre .boton-texto { color: var(--papel); }

.mesa-alumno { padding: clamp(3rem, 14vh, 8rem) 0; max-width: 36rem; }
.mesa-alumno[data-estado='admitido'] h1 { color: var(--mostaza); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  .boton:active { transform: none; }
}

select {
  padding: .35rem .5rem;
  border: 2px solid var(--gris);
  border-radius: 4px;
  background: #fff;
  color: var(--tinta);
  font: inherit;
}

.controles { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.mesas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1rem; margin-top: 1rem; }
.mesas:empty { display: none; }
.tarjeta-mesa { padding: .875rem 1rem; border: 2px solid var(--linea); border-radius: 6px; }
.tarjeta-mesa h3 { margin: 0; }
.zona-empezar { margin-top: 1.25rem; }
.tarjeta-mesa .lista > li > span:last-child:not(.acciones) { color: var(--tinta); }