:root {
  --background: #0d0d0d;
  --surface: #171717;
  --surface-light: #222222;
  --border: #333333;

  --text: #f5f5f5;
  --text-muted: #b5b5b5;

  /* Estados de las butacas */
  --available: #22c55e;
  --selected: #2563eb;
  --reserved: #f59e0b;
  --sold: #dc2626;

  --button: #f5f5f5;
  --button-text: #111111;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  background: var(--background);
  color: var(--text);
}

main {
  width: min(1100px, 94%);
  margin: 0 auto;
  padding: 40px 0 80px;
}

h1,
h2,
h3,
h4 {
  margin-top: 0;
}

h1 {
  margin-bottom: 8px;
}

h2 {
  margin-bottom: 8px;
}

p {
  line-height: 1.5;
}

hr {
  margin: 28px 0;
  border: 0;
  border-top: 1px solid var(--border);
}

section {
  margin-top: 30px;
  padding: 24px;

  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 12px;

  max-width: 420px;
  margin-top: 24px;
}

label {
  font-weight: 700;
}

input {
  width: 100%;
  padding: 13px 14px;

  font-size: 16px;

  color: var(--text);
  background: var(--surface-light);

  border: 1px solid var(--border);
  border-radius: 8px;

  outline: none;
}

input:focus {
  border-color: #777777;
}

button {
  padding: 12px 18px;

  font-size: 15px;
  font-weight: 700;

  color: var(--button-text);
  background: var(--button);

  border: 0;
  border-radius: 8px;

  cursor: pointer;
}

button:hover:not(:disabled) {
  opacity: 0.9;
}

button:disabled {
  cursor: not-allowed;
}

#student-message,
#selection-message {
  margin-top: 20px;
}

#functions-container {
  display: grid;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(260px, 1fr)
    );

  gap: 18px;

  margin-top: 22px;
}

.function-card {
  padding: 20px;

  background: var(--surface-light);

  border: 1px solid var(--border);
  border-radius: 12px;
}

.function-card p {
  margin: 8px 0;
}

.seat-selection {
  margin-top: 26px;
}

.seat-map-wrapper {
  width: 100%;
  overflow-x: auto;

  margin-top: 22px;
  padding-bottom: 12px;
}

.seat-map {
  min-width: 850px;

  padding: 24px;

  background: #111111;

  border: 1px solid var(--border);
  border-radius: 12px;
}

.stage {
  width: 78%;
  max-width: 700px;

  margin: 0 auto 26px;
  padding: 12px;

  text-align: center;

  font-weight: 700;
  letter-spacing: 3px;

  color: #111111;
  background: #e5e5e5;

  border-radius: 6px;
}

.seat-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 18px;

  margin-bottom: 24px;
}

.legend-item {
  display: flex;
  align-items: center;

  gap: 7px;

  font-size: 13px;
  color: var(--text-muted);
}

.legend-box {
  width: 18px;
  height: 18px;

  display: inline-block;

  border-radius: 4px;
}

.legend-available {
  background: var(--available);
}

.legend-selected {
  background: var(--selected);
}

.legend-reserved {
  background: var(--reserved);
}

.legend-sold {
  background: var(--sold);
}

.seat-row {
  display: flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 7px;
}

.row-label {
  width: 32px;
  flex: 0 0 32px;

  margin-right: 10px;

  text-align: center;

  font-weight: 700;
  color: var(--text-muted);
}

.seat-block {
  display: grid;

  grid-template-columns:
    repeat(9, 34px);

  gap: 6px;
}

.center-aisle {
  width: 48px;
  flex: 0 0 48px;
}

.seat {
  width: 34px;
  height: 34px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 11px;
  font-weight: 700;

  border-radius: 6px;

  transition:
    transform 0.12s ease,
    opacity 0.12s ease;
}

/* DISPONIBLE */

.seat.available {
  color: #ffffff;
  background: var(--available);
}

.seat.available:hover {
  transform: scale(1.08);
}

/* SELECCIONADA */

.seat.selected {
  color: #ffffff;
  background: var(--selected);
}

.seat.selected:hover {
  transform: scale(1.08);
}

/* RESERVADA */

.seat.reserved {
  color: #111111;
  background: var(--reserved);

  opacity: 0.9;
}

/* VENDIDA */

.seat.sold {
  color: #ffffff;
  background: var(--sold);

  opacity: 0.9;
}

/*
  Reservadas y vendidas no pueden
  seleccionarse desde el navegador.
*/

.seat.reserved:disabled,
.seat.sold:disabled {
  cursor: not-allowed;
}

/* Numeración superior */

.seat-number-row {
  margin-bottom: 10px;
}

.seat-number-label {
  width: 34px;

  text-align: center;

  font-size: 11px;
  font-weight: 700;

  color: var(--text-muted);
}

/* PALCO */

.palco-selector {
  margin-top: 28px;
  padding: 20px;

  background: var(--surface-light);

  border: 1px solid var(--border);
  border-radius: 12px;
}

.quantity-control {
  display: flex;
  align-items: center;

  gap: 14px;

  margin-top: 14px;
}

.quantity-control button {
  width: 42px;
  height: 42px;

  padding: 0;

  font-size: 22px;
}

.quantity-value {
  min-width: 34px;

  text-align: center;

  font-size: 20px;
  font-weight: 700;
}

/* RESUMEN */

.selection-summary {
  margin-top: 28px;
  padding: 20px;

  background: var(--surface-light);

  border: 1px solid var(--border);
  border-radius: 12px;
}

.selection-summary p {
  margin: 7px 0;
}

/* RESPONSIVE */

@media (max-width: 700px) {
  main {
    width: 96%;
    padding-top: 20px;
  }

  section {
    padding: 18px;
  }

  .seat-map {
    padding: 18px;
  }

  .seat-legend {
    justify-content: flex-start;
  }
}
/* ========================================
   CENTRADO DE BLOQUES PRINCIPALES
   ======================================== */

/* Centrar formulario de código de alumno */
#student-code-form {
  margin-left: auto;
  margin-right: auto;
}

/* Centrar el contenido inicial de verificación */
#student-code-form + #student-message {
  margin-left: auto;
  margin-right: auto;
}

/* Centrar selector de palco */
.palco-selector {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* Centrar controles + / - del palco */
.quantity-control {
  justify-content: center;
}/* ========================================
   LOGO MOTION DANCE
   ======================================== */

.site-header {
  text-align: center;
  margin-bottom: 24px;
}

.motion-logo {
  display: block;
  width: min(280px, 75vw);
  height: auto;
  margin: 0 auto 18px;
}