/* ==========================================================================
   Laguntapp · Estética del escudo de la cuadrilla Laguntasuna
   Rojo escudo, verde de la "L", negro de trazo y crema de papel.
   ========================================================================== */

:root {
  --rojo: #e2231a;
  --rojo-oscuro: #b3140d;
  --carmesi: #c0202c;
  --verde: #1f6b44;
  --verde-oscuro: #14512f;
  --negro: #141210;
  --gris: #6f6862;
  --gris-claro: #d9d2c8;
  --crema: #f8f3ea;
  --papel: #fffdf8;
  --sombra: 0 3px 0 var(--negro);
  /* Colores de las figuras del resumen. Comprobados para que se distingan
     también con daltonismo (deuteranopía y tritanopía). */
  --grafico-cuotas: #b3140d;
  --grafico-comidas: #2f9166;
  --grafico-merch: #7d5ba6;
  --fuente-titulo: "Oswald", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --fuente-texto: "Source Sans 3", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* El atributo hidden debe ganar a cualquier display de las clases. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fuente-texto);
  color: var(--negro);
  background-color: var(--crema);
  background-image:
    repeating-linear-gradient(135deg, rgba(226, 35, 26, 0.035) 0 14px, transparent 14px 28px);
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3, h4 {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

/* ==========================================================================
   Login
   ========================================================================== */
.pagina-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  background-color: var(--negro);
  background-image:
    repeating-linear-gradient(45deg, rgba(226, 35, 26, 0.16) 0 18px, transparent 18px 36px),
    radial-gradient(circle at 50% 20%, #2b2724 0%, #0d0c0b 70%);
}

.login-caja {
  width: 100%;
  max-width: 420px;
  background: var(--papel);
  border: 4px solid var(--negro);
  box-shadow: 10px 10px 0 var(--rojo);
  padding: 28px 30px 22px;
  text-align: center;
}

.login-escudo img {
  width: 130px;
  height: auto;
  display: block;
  margin: 0 auto 6px;
}

.login-caja h1 {
  font-size: 40px;
  line-height: 1;
  color: var(--rojo);
  -webkit-text-stroke: 1px var(--negro);
}

.login-sub {
  margin: 6px 0 20px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--verde);
  font-weight: 700;
}

.login-form {
  display: grid;
  gap: 6px;
  text-align: left;
}

.login-form label {
  font-family: var(--fuente-titulo);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

input[type="email"],
input[type="password"],
input[type="text"],
input[type="number"],
input[type="tel"],
input[type="search"],
select {
  width: 100%;
  padding: 10px 12px;
  border: 2px solid var(--negro);
  background: #fff;
  font-family: var(--fuente-texto);
  font-size: 15px;
  border-radius: 0;
}

input:focus, select:focus {
  outline: 3px solid var(--rojo);
  outline-offset: 1px;
}

.boton-principal {
  margin-top: 14px;
  padding: 12px;
  border: 3px solid var(--negro);
  background: var(--rojo);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  box-shadow: var(--sombra);
  transition: transform .08s ease, background .15s ease;
}

.boton-principal:hover { background: var(--rojo-oscuro); }
.boton-principal:active { transform: translateY(3px); box-shadow: none; }

.alerta-error {
  background: #fde8e6;
  border: 2px solid var(--rojo);
  color: var(--rojo-oscuro);
  padding: 8px 10px;
  margin: 0 0 14px;
  font-weight: 600;
  font-size: 14px;
}

.login-pie {
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris);
}

/* ==========================================================================
   Cabecera de la aplicación
   ========================================================================== */
.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 10px 22px;
  background: var(--negro);
  border-bottom: 5px solid var(--rojo);
  color: #fff;
}

.cabecera-marca { display: flex; align-items: center; gap: 12px; }

/* Los logos son PNG con fondo transparente: van sueltos, sin marco ni fondo. */
.cabecera-escudo {
  height: 54px;
  width: auto;
  display: block;
}

.cabecera-titulo {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 26px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.cabecera-sub {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--rojo);
  font-weight: 700;
}

.cabecera-nav { display: flex; gap: 8px; }

.nav-enlace {
  font-family: var(--fuente-titulo);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #fff;
  text-decoration: none;
  padding: 8px 18px;
  border: 2px solid #fff;
}

.nav-enlace:hover { background: rgba(255, 255, 255, 0.14); }

.nav-enlace.activo {
  background: var(--rojo);
  border-color: var(--rojo);
}

.cabecera-usuario { display: flex; align-items: center; gap: 10px; }
/* El contorno negro de la "CL" se pierde sobre la cabecera negra: una sombra
   fina que sigue la silueta (no un marco) le devuelve la definición. */
.cabecera-lc {
  height: 40px;
  width: auto;
  display: block;
  filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.85));
}
.usuario-nombre { font-size: 14px; font-weight: 600; }

.boton-salir {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.06em;
  color: #fff;
  text-decoration: none;
  border: 2px solid var(--rojo);
  padding: 5px 12px;
}

.boton-salir:hover { background: var(--rojo); }

/* ==========================================================================
   Contenido y cabecera de sección
   ========================================================================== */
.contenido { padding: 22px 22px 60px; max-width: 1400px; margin: 0 auto; }

.seccion-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.seccion-cabecera h1 { font-size: 34px; color: var(--negro); }
.seccion-cabecera h1::after {
  content: "";
  display: block;
  width: 68px;
  height: 5px;
  background: var(--rojo);
  margin-top: 4px;
}

.seccion-sub {
  margin: 6px 0 0;
  color: var(--gris);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.resumen-cajas { display: flex; gap: 10px; flex-wrap: wrap; }

.resumen-caja {
  background: var(--papel);
  border: 3px solid var(--negro);
  box-shadow: 4px 4px 0 var(--verde);
  padding: 8px 16px;
  min-width: 118px;
}

.resumen-caja strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 26px;
  line-height: 1.1;
  color: var(--rojo);
}

.resumen-caja span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--gris);
  font-weight: 700;
}

.leyenda {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--gris);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

.punto {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid var(--negro);
  margin-right: 5px;
  vertical-align: -1px;
}

.punto-verde { background: var(--verde); }
.punto-rojo { background: var(--rojo); }
.punto-gris { background: var(--gris-claro); }

/* ==========================================================================
   Calendario
   ========================================================================== */
.calendario-cabecera,
.calendario-rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.calendario-cabecera {
  margin-bottom: 8px;
}

.calendario-cabecera span {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-align: center;
  color: #fff;
  background: var(--verde);
  border: 2px solid var(--negro);
  padding: 4px 0;
}

.dia {
  position: relative;
  background: var(--papel);
  border: 3px solid var(--negro);
  box-shadow: 4px 4px 0 rgba(20, 18, 16, 0.18);
  min-height: 150px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dia-clicable { cursor: pointer; transition: transform .08s ease, box-shadow .08s ease; }
.dia-clicable:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--rojo); }

.dia-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 5px 9px;
  background: var(--negro);
  color: #fff;
}

.dia-numero { font-family: var(--fuente-titulo); font-size: 22px; line-height: 1; }
.dia-nombre { font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--gris-claro); }

/* Nombre temático del día ("Día del Txupinazo", "San Fausto"...). */
.dia-tema {
  background: var(--verde);
  color: #fff;
  border-bottom: 2px solid var(--negro);
  padding: 3px 9px;
  font-family: var(--fuente-titulo);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dia-cuerpo { padding: 9px; flex: 1; display: flex; flex-direction: column; gap: 8px; }

/* --- Comidas ------------------------------------------------------------ */
.comida-menu {
  font-family: var(--fuente-titulo);
  font-size: 16px;
  line-height: 1.15;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* Precio por persona: es el dato que está en el Excel. */
.comida-precio {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  line-height: 1;
  color: var(--rojo);
}

.comida-precio small {
  font-family: var(--fuente-texto);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--gris);
}

/* Presupuesto: calculado (precio por persona x apuntados). */
.comida-presupuesto {
  font-size: 12px;
  font-weight: 700;
  color: var(--verde);
}

.contador {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  border: 2px solid var(--negro);
  padding: 3px 8px;
  font-family: var(--fuente-titulo);
  font-size: 15px;
  background: var(--gris-claro);
}

.contador small { font-family: var(--fuente-texto); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; }
.contador.lleno { background: var(--verde); color: #fff; }
.contador.vacio { background: var(--rojo); color: #fff; }

/* --- Eventos ------------------------------------------------------------ */
.evento-tarjeta {
  border: 2px solid var(--negro);
  border-left-width: 7px;
  background: #fff;
  padding: 6px 8px;
  cursor: pointer;
  transition: background .12s ease;
}

.evento-tarjeta:hover { background: #fdf1ef; }
.evento-tarjeta.cubierto { border-left-color: var(--verde); }
.evento-tarjeta.falta { border-left-color: var(--rojo); }
.evento-tarjeta.vacio { border-left-color: var(--gris); }

.evento-hora {
  font-family: var(--fuente-titulo);
  font-size: 15px;
  color: var(--rojo);
}

.evento-nombre { font-size: 13px; font-weight: 600; line-height: 1.2; }

.evento-personas {
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gris);
}

.evento-personas b { color: var(--negro); }

.sin-eventos {
  font-size: 12px;
  color: var(--gris-claro);
  font-style: italic;
  margin: auto 0;
  text-align: center;
}

.cargando { grid-column: 1 / -1; text-align: center; color: var(--gris); padding: 30px 0; }

/* ==========================================================================
   Modal de detalle
   ========================================================================== */
.modal-fondo {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 12, 0.72);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
  z-index: 50;
}

.modal {
  position: relative;
  width: 100%;
  max-width: 620px;
  background: var(--papel);
  border: 4px solid var(--negro);
  box-shadow: 12px 12px 0 var(--rojo);
}

.modal-cerrar {
  position: absolute;
  top: 6px;
  right: 8px;
  background: none;
  border: none;
  font-size: 30px;
  line-height: 1;
  color: #fff;
  cursor: pointer;
}

.modal-cabecera {
  background: var(--negro);
  color: #fff;
  padding: 14px 46px 14px 20px;
  border-bottom: 4px solid var(--rojo);
}

.modal-cabecera h2 { font-size: 26px; line-height: 1.05; }
.modal-cabecera p { margin: 4px 0 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--rojo); font-weight: 700; }

.modal-cuerpo { padding: 18px 20px 22px; }

.fichas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }

.ficha {
  border: 2px solid var(--negro);
  background: #fff;
  padding: 6px 14px;
  min-width: 108px;
}

.ficha strong { display: block; font-family: var(--fuente-titulo); font-size: 21px; color: var(--verde); }
.ficha span { font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gris); font-weight: 700; }

/* Ficha del dato calculado (el presupuesto del día). */
.ficha.destacada { background: var(--verde); border-color: var(--negro); }
.ficha.destacada strong,
.ficha.destacada span { color: #fff; }

.calculo {
  margin: -6px 0 4px;
  font-size: 13px;
  color: var(--gris);
  border-left: 5px solid var(--rojo);
  background: #fff;
  padding: 6px 12px;
}

.calculo b { color: var(--negro); }

.modal-cuerpo h3 {
  font-size: 17px;
  margin: 16px 0 8px;
  padding-bottom: 3px;
  border-bottom: 3px solid var(--rojo);
}

.descripcion-evento {
  background: #fff;
  border-left: 5px solid var(--verde);
  padding: 8px 12px;
  font-size: 14px;
  margin-bottom: 12px;
}

.lista-personas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }

.persona {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 2px solid var(--negro);
  padding: 6px 10px;
}

.persona-indice {
  font-family: var(--fuente-titulo);
  background: var(--negro);
  color: #fff;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex: none;
}

.persona.extra .persona-indice { background: var(--verde); }
.persona-nombre {
  flex: 1 1 120px;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 600;
}
.etiqueta-extra { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--verde); font-weight: 700; }

.acciones-persona { display: flex; gap: 6px; flex-wrap: wrap; }

.boton-mini {
  border: 2px solid var(--negro);
  background: #fff;
  font-family: var(--fuente-titulo);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  cursor: pointer;
}

.boton-mini:hover { background: var(--gris-claro); }
.boton-mini.peligro { border-color: var(--rojo); color: var(--rojo); }
.boton-mini.peligro:hover { background: var(--rojo); color: #fff; }

/* Botón esperando el segundo clic de confirmación. */
.boton-mini.confirmando {
  background: var(--rojo);
  border-color: var(--rojo);
  color: #fff;
  animation: latido 1s ease-in-out infinite;
}

@keyframes latido {
  50% { opacity: 0.65; }
}

/* Fila en modo edición (botón "Cambiar" de los eventos). */
.persona.editando { border-color: var(--verde); border-width: 3px; flex-wrap: wrap; }
.persona.editando .persona-indice { background: var(--verde); }

.persona-select,
.persona-input {
  flex: 1 1 130px;
  min-width: 0;
  padding: 4px 8px;
  font-size: 14px;
}

.boton-mini.guardar { background: var(--verde); border-color: var(--verde); color: #fff; }
.boton-mini.guardar:hover { background: var(--verde-oscuro); }

.lista-vacia { color: var(--gris); font-style: italic; font-size: 14px; }

.formulario-linea {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.formulario-linea select,
.formulario-linea input { flex: 1; min-width: 170px; }

.boton-anadir {
  border: 3px solid var(--negro);
  background: var(--verde);
  color: #fff;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--negro);
}

.boton-anadir:hover { background: var(--verde-oscuro); }
.boton-anadir:active { transform: translate(3px, 3px); box-shadow: none; }

.nota-modal { font-size: 12px; color: var(--gris); margin-top: 10px; }

/* ==========================================================================
   Aviso flotante
   ========================================================================== */
.aviso {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  background: var(--negro);
  color: #fff;
  border-left: 6px solid var(--verde);
  padding: 12px 18px;
  font-weight: 600;
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.25);
  max-width: 340px;
}

.aviso.error { border-left-color: var(--rojo); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1100px) {
  .calendario-cabecera { display: none; }
  /* Sin cabecera de días de la semana, los huecos no alinean nada: estorban. */
  .dia-hueco { display: none; }
  .calendario-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dia { min-height: auto; }
}

@media (max-width: 640px) {
  .contenido { padding: 16px 14px 50px; }
  .calendario-rejilla { grid-template-columns: 1fr; }
  .cabecera { padding: 10px 14px; }
  /* Cinco pestañas no caben en una fila de móvil: que salten de línea en vez
     de empujar la página y dejarla con scroll horizontal. */
  .cabecera-nav { order: 3; width: 100%; flex-wrap: wrap; }
  .nav-enlace {
    flex: 1 1 28%;
    text-align: center;
    padding: 7px 8px;
    font-size: 15px;
  }
  .seccion-cabecera h1 { font-size: 27px; }
}

/* ==========================================================================
   Barras · turnos de 2 horas
   ========================================================================== */
.punto-negro { background: var(--negro); }

.dia-cuerpo-turnos { gap: 4px; }

.aviso-dia {
  align-self: flex-start;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--rojo);
  color: #fff;
  padding: 2px 7px;
  border: 2px solid var(--negro);
  margin-bottom: 3px;
}

.aviso-dia.ok { background: var(--verde); }

/* Un turno del día: hora, plazas y cuenta. */
.turno {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 2px solid var(--negro);
  border-left-width: 7px;
  background: #fff;
  padding: 4px 7px;
  cursor: pointer;
  transition: background .12s ease;
}

.turno:hover { background: #f3efe7; }
.turno.descubierto { border-left-color: var(--rojo); background: #fdeceb; }
.turno.cubierto { border-left-color: var(--verde); }
.turno.completo { border-left-color: var(--negro); background: #eef3ef; }

.turno-hora {
  font-family: var(--fuente-titulo);
  font-size: 13px;
  white-space: nowrap;
}

/* El guion que separa la entrada de la salida: se ve, pero sin robar sitio. */
.turno-a {
  font-style: normal;
  color: var(--gris);
  margin: 0 2px;
}

/* Bolitas: rellenas las plazas ocupadas, huecas las libres. */
.turno-plazas {
  flex: 1;
  letter-spacing: 2px;
  font-size: 11px;
  color: var(--verde);
  white-space: nowrap;
  overflow: hidden;
}

.turno.descubierto .turno-plazas { color: var(--rojo); }
.turno.completo .turno-plazas { color: var(--negro); }

.turno-cuenta {
  font-size: 11px;
  font-weight: 700;
  color: var(--gris);
}

.turno.descubierto .turno-cuenta { color: var(--rojo); }

/* Caja de resumen que avisa de lo que falta. */
.resumen-caja.alerta { box-shadow: 4px 4px 0 var(--rojo); }
.resumen-caja.alerta strong { color: var(--rojo); }

.estado-turno { margin: 0 0 6px; }

.etiqueta {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 3px 12px;
  border: 2px solid var(--negro);
  color: #fff;
}

.etiqueta.descubierto { background: var(--rojo); }
.etiqueta.cubierto { background: var(--verde); }
.etiqueta.completo { background: var(--negro); }

/* Separación entre la noche y la madrugada del día siguiente. */
.separador-madrugada {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 5px 0 2px;
  font-family: var(--fuente-titulo);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--negro);
  background: var(--gris-claro);
  border: 2px solid var(--negro);
  padding: 1px 7px;
  align-self: stretch;
}

/* ==========================================================================
   Barras temáticas
   ========================================================================== */
.dia-tematica {
  background: var(--carmesi);
  color: #fff;
  border-bottom: 2px solid var(--negro);
  padding: 3px 9px;
  font-family: var(--fuente-titulo);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.turno.tematica { background: #fdf2f3; }
.turno.tematica:hover { background: #f9e7e9; }

.marca-tema {
  color: var(--carmesi);
  font-style: normal;
  margin-right: 3px;
}

.punto-tema {
  display: inline-block;
  width: 11px;
  margin-right: 5px;
  color: var(--carmesi);
  font-style: normal;
  text-align: center;
}

.etiqueta.tematica { background: var(--carmesi); margin-right: 6px; }

/* Celda vacía: los días anteriores al comienzo de las fiestas. */
.dia-hueco {
  border: 2px dashed var(--gris-claro);
  background: transparent;
  min-height: 60px;
}

/* Comidas con varias opciones de precio (menú entero, solo silla...). */
.opcion-persona {
  width: auto;
  max-width: 210px;
  padding: 3px 6px;
  font-size: 12px;
  border-width: 2px;
}

.desglose-linea,
.desglose-total {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.desglose-total {
  border-top: 2px solid var(--negro);
  margin-top: 5px;
  padding-top: 4px;
  font-weight: 700;
  color: var(--negro);
}

/* ==========================================================================
   Socios · altas y cuentas
   ========================================================================== */
.dos-columnas {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.tarjeta {
  background: var(--papel);
  border: 3px solid var(--negro);
  box-shadow: 5px 5px 0 rgba(20, 18, 16, 0.18);
}

.tarjeta-titulo {
  background: var(--negro);
  color: #fff;
  font-size: 19px;
  padding: 8px 14px;
  border-bottom: 4px solid var(--rojo);
}

.formulario { padding: 14px; }

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

.campos label,
.formulario h3 { font-family: var(--fuente-titulo); text-transform: uppercase; letter-spacing: 0.05em; }

.campos label {
  display: grid;
  gap: 3px;
  font-size: 12px;
}

.formulario h3 {
  font-size: 16px;
  margin: 16px 0 6px;
  padding-bottom: 3px;
  border-bottom: 3px solid var(--rojo);
}

.lista-conceptos { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.casilla {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 2px solid var(--negro);
  padding: 5px 9px;
  cursor: pointer;
  font-size: 14px;
}

.casilla:hover { background: #f6f1e8; }
.casilla input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--verde); flex: none; }
.casilla-texto { flex: 1; }
.casilla-precio { font-weight: 700; color: var(--verde); }
.casilla .opcion-comida { width: auto; max-width: 190px; padding: 2px 5px; font-size: 12px; }

.total-cobrar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-top: 16px;
  padding: 8px 14px;
  background: var(--verde);
  border: 3px solid var(--negro);
  color: #fff;
}

.total-cobrar span {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 14px;
}

.total-cobrar strong { font-family: var(--fuente-titulo); font-size: 30px; line-height: 1; }

/* Listado de socios */
.tabla-socios { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabla-socios th {
  background: var(--verde);
  color: #fff;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  text-align: left;
  padding: 5px 10px;
  border: 2px solid var(--negro);
}

.tabla-socios td { padding: 6px 10px; border: 2px solid var(--negro); background: #fff; }
.tabla-socios tbody tr { cursor: pointer; }
.tabla-socios tbody tr:hover td { background: #f6f1e8; }
.tabla-socios small { display: block; color: var(--gris); font-size: 11px; }
@media (max-width: 900px) {
  .dos-columnas { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
}

/* Cuota: obligatoria, ni se marca ni se desmarca. */
.casilla.obligatoria { background: #eef3ef; cursor: default; }
.casilla.obligatoria:hover { background: #eef3ef; }

.marca-obligatoria {
  width: 17px;
  height: 17px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--verde);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.casilla-texto small {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  font-weight: 700;
  color: var(--verde);
  margin-left: 6px;
}

/* Cantidad de cada cosa: se puede llevar más de una. */
input.producto {
  width: 52px;
  flex: none;
  padding: 3px 6px;
  font-size: 14px;
  text-align: center;
}

.nota-pago {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--gris);
  text-align: right;
}

/* Padrón: buscador y estado de cada persona. */
#buscador { margin-bottom: 4px; }

.ayuda-campo {
  margin: 2px 0 10px;
  font-size: 12px;
  color: var(--gris);
}

.campo-ancho {
  display: grid;
  gap: 3px;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 12px;
}

.etiqueta-si,
.etiqueta-no {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border: 2px solid var(--negro);
  display: inline-block;
}

.etiqueta-si { background: var(--verde); color: #fff; }
.etiqueta-no { background: var(--gris-claro); color: var(--gris); }

/* Actos obligatorios del herriko: se distinguen de los juegos. */
.evento-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.evento-tarjeta.obligatorio {
  background: #fdf7ec;
  border-left-style: double;
  border-left-width: 9px;
}

.evento-tarjeta.obligatorio:hover { background: #f8eeda; }

.marca-obligatorio {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--negro);
  color: #fff;
  padding: 1px 5px;
}

.punto-herriko {
  background: #fdf7ec;
  border-left: 5px double var(--negro);
}

.etiqueta.obligatorio-etiqueta { background: var(--negro); }
.etiqueta.juego-etiqueta { background: var(--verde); }

/* Perfil de los juegos: cupos por sexo y solo txikis / solo adultos. */
.etiqueta.perfil-etiqueta { background: var(--carmesi); margin-left: 6px; }
.cupo-lleno { color: var(--verde); font-weight: 700; }
.cupo-falta { color: var(--rojo); font-weight: 700; }

.etiqueta-txiki {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--carmesi);
  color: #fff;
  padding: 1px 5px;
}

/* Cupos de un juego: chicos por un lado, chicas por otro. */
.cupos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.cupo {
  border: 3px solid var(--negro);
  background: #fff;
  padding: 10px;
}

.cupo-titulo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 16px;
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 3px solid var(--negro);
}

.cupo-cuenta {
  font-family: var(--fuente-texto);
  font-size: 13px;
  font-weight: 700;
}

.cupo-completo .cupo-titulo { border-bottom-color: var(--verde); }
.cupo-completo .cupo-cuenta { color: var(--verde); }
.cupo-pendiente .cupo-titulo { border-bottom-color: var(--rojo); }
.cupo-pendiente .cupo-cuenta { color: var(--rojo); }

.cupo .lista-personas { gap: 4px; }
.cupo .persona { flex-wrap: wrap; row-gap: 4px; }
.cupo .acciones-persona { margin-left: auto; }
.cupo .formulario-linea { margin-top: 10px; }
.cupo .nota-modal { margin-top: 10px; text-align: center; }

@media (max-width: 640px) {
  .cupos { grid-template-columns: 1fr; }
}

/* Flechas para cambiar el puesto de alguien en un evento. */
.flechas { display: inline-flex; flex-direction: column; gap: 1px; }

.boton-flecha {
  border: 2px solid var(--negro);
  background: #fff;
  font-size: 9px;
  line-height: 1;
  padding: 1px 5px;
  cursor: pointer;
  color: var(--negro);
}

.boton-flecha:hover:not(:disabled) { background: var(--verde); color: #fff; }

.boton-flecha:disabled {
  border-color: var(--gris-claro);
  color: var(--gris-claro);
  cursor: default;
}

/* ==========================================================================
   Mertx · el merchandising: catálogo, stock y ventas
   ========================================================================== */
.rejilla-productos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.producto {
  border: 2px solid var(--negro);
  border-left-width: 7px;
  background: #fff;
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .08s ease, box-shadow .08s ease;
}

.producto:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--rojo); }

/* Verde mientras sobra, negro cuando quedan pocas, rojo si se ha agotado. */
.producto.hay { border-left-color: var(--verde); }
.producto.pocas { border-left-color: var(--negro); }
.producto.agotado { border-left-color: var(--rojo); background: #fdeceb; }

.producto-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.producto-cabecera h3 {
  font-family: var(--fuente-titulo);
  font-size: 16px;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.producto-precio { font-weight: 700; color: var(--verde); white-space: nowrap; }

/* Cuánto se ha vendido de lo que había. */
.producto-barra {
  height: 8px;
  border: 2px solid var(--negro);
  background: #fff;
  overflow: hidden;
}

.producto-barra span { display: block; height: 100%; background: var(--verde); }
.producto.pocas .producto-barra span { background: var(--negro); }
.producto.agotado .producto-barra span { background: var(--rojo); }

.producto-datos {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--gris);
}

.producto-datos strong { font-size: 14px; color: var(--negro); }
.producto.agotado .producto-datos strong { color: var(--rojo); }

.importe-venta { font-weight: 700; color: var(--verde); }

.marca-origen {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  font-weight: 700;
  color: var(--gris);
  margin-left: 6px;
}

/* El stock que queda, al lado de cada cosa en el formulario de alta. */
.stock-restante {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  font-weight: 700;
  color: var(--gris);
  margin-left: 6px;
}

.stock-restante.sin-stock { color: var(--rojo); }
.stock-restante { white-space: nowrap; }
.casilla input:disabled { opacity: 0.4; }

.titulo-nota {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  font-weight: 700;
  color: var(--gris);
  margin-left: 8px;
}

/* ==========================================================================
   Documentos: privacidad y condiciones de uso
   ========================================================================== */
.pagina-legal { background: var(--crema); }

.documento {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 18px 60px;
  line-height: 1.6;
}

.documento h1 {
  font-family: var(--fuente-titulo);
  font-size: 34px;
  margin: 0 0 4px;
  text-transform: uppercase;
  border-bottom: 4px solid var(--rojo);
  padding-bottom: 8px;
}

.documento h2 {
  font-family: var(--fuente-titulo);
  font-size: 19px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin: 28px 0 6px;
  color: var(--verde);
}

.documento p, .documento li { font-size: 15px; }
.documento ul { padding-left: 20px; }
.documento li { margin-bottom: 6px; }
.documento code { background: #fff; border: 1px solid var(--gris-claro); padding: 1px 4px; }
.documento a { color: var(--carmesi); }

.documento-fecha {
  color: var(--gris);
  font-size: 13px;
  margin: 0 0 4px;
}

.documento-volver {
  margin-top: 36px;
  border-top: 2px solid var(--negro);
  padding-top: 14px;
  font-weight: 700;
}

/* Enlaces a los documentos bajo el formulario de acceso. */
.login-legal {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 4px 0 0;
}

.login-legal a { color: var(--gris); text-decoration: none; }
.login-legal a:hover { color: var(--rojo); text-decoration: underline; }

/* Etiquetas con los años en que alguien ha sido socio/a. */
.etiqueta-anio {
  display: inline-block;
  border: 2px solid var(--negro);
  background: #fff;
  padding: 0 5px;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
}

.etiqueta-anio.actual { background: var(--verde); color: #fff; border-color: var(--verde); }

.historial { margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 5px; }

/* Cabecera de tarjeta con algo a la derecha (el selector de edición). */
.tarjeta-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.selector-anio {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--gris);
  display: flex;
  align-items: center;
  gap: 6px;
}

.selector-anio select { width: auto; padding: 4px 8px; font-size: 13px; }

.aviso-historico {
  border: 2px solid var(--negro);
  border-left-width: 7px;
  border-left-color: var(--carmesi);
  background: #fdf2f3;
  padding: 7px 10px;
  margin: 0 0 10px;
  font-size: 13px;
}

/* Quien come sin ser de la cuadrilla: se marca para que se distinga de un
   socio, que es lo que de verdad cuenta para las cuotas. */
.marca-invitado {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  font-weight: 700;
  color: var(--gris);
  margin-left: 6px;
}

/* Casilla suelta con su explicación al lado, fuera de una lista. */
.casilla-suelta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--gris);
  margin: 6px 0 0;
  cursor: pointer;
}

.casilla-suelta input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex: none;
  accent-color: var(--verde);
}

/* Repartir una barra temática entre los turnos de una noche. */
.turnos-tema {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.turnos-tema .casilla-suelta { margin: 0; color: var(--negro); font-size: 14px; }

.marca-madrugada,
.marca-otro-tema {
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 10px;
  font-weight: 700;
  margin-left: 6px;
}

.marca-madrugada { color: var(--gris); }
.marca-otro-tema { color: var(--carmesi); }

/* Enlaces de "marcar todos / solo este", que son botones de verdad. */
.enlace-mini {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--carmesi);
  text-decoration: underline;
  cursor: pointer;
}

.enlace-mini:hover { color: var(--rojo); }

/* ==========================================================================
   Alta · sugerencias del padrón y contador de unidades
   ========================================================================== */
.con-sugerencias,
.buscador-socio { position: relative; }

/* El buscador que sustituye a los desplegables de gente: se escribe y salen
   las sugerencias debajo. */
.buscador-socio { flex: 1 1 190px; display: block; }
.buscador-socio .entrada-buscador { width: 100%; }

.sugerencias {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
  background: #fff;
  border: 2px solid var(--negro);
  box-shadow: 4px 4px 0 rgba(20, 18, 16, 0.18);
  max-height: 260px;
  overflow-y: auto;
}

.sugerencias li {
  padding: 6px 10px;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--gris-claro);
}

.sugerencias li:last-child { border-bottom: none; }
.sugerencias li:hover,
.sugerencias li.resaltada { background: var(--crema); }
.sugerencias li strong { font-weight: 600; }

.sugerencias small {
  font-size: 11px;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Marcar un producto y subir o bajar unidades. */
.casilla input[type="checkbox"].lleva-producto { accent-color: var(--verde); }

.contador {
  display: inline-flex;
  align-items: stretch;
  border: 2px solid var(--negro);
  flex: none;
}

.boton-contador {
  border: none;
  background: #fff;
  color: var(--negro);
  font-family: var(--fuente-titulo);
  font-size: 16px;
  line-height: 1;
  padding: 0 9px;
  cursor: pointer;
}

.boton-contador:hover:not(:disabled) { background: var(--verde); color: #fff; }
.boton-contador:disabled { color: var(--gris-claro); cursor: default; }

.contador input.producto {
  width: 38px;
  border: none;
  border-left: 2px solid var(--negro);
  border-right: 2px solid var(--negro);
  padding: 3px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  -moz-appearance: textfield;
}

.contador input.producto::-webkit-outer-spin-button,
.contador input.producto::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Los dos botones del repaso previo al cobro. */
.acciones-confirmar { margin-top: 14px; align-items: center; }
.acciones-confirmar .boton-principal { flex: 1 1 auto; }

/* Calculadora del cambio, en el repaso previo al cobro. */
.calculadora {
  border: 2px solid var(--negro);
  background: var(--crema);
  padding: 10px 12px;
  display: grid;
  gap: 8px;
}

.billetes { display: flex; flex-wrap: wrap; gap: 6px; }

.boton-billete {
  border: 2px solid var(--negro);
  background: #fff;
  font-family: var(--fuente-titulo);
  font-size: 14px;
  letter-spacing: 0.02em;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--negro);
}

.boton-billete:hover { background: var(--negro); color: var(--crema); }

.paga-con {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--gris);
  margin: 0;
}

.paga-con input { width: 110px; padding: 5px 8px; font-size: 16px; font-weight: 700; }

.resultado-cambio {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: 20px;
  line-height: 1.2;
  color: var(--gris);
}

.resultado-cambio.devolver { color: var(--verde); }
.resultado-cambio.justo { color: var(--verde); }
.resultado-cambio.falta { color: var(--rojo); }

/* ==========================================================================
   Resumen · las cuentas de la edición
   ========================================================================== */
.barra-resumen {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.tabla-resumen {
  background: var(--papel);
  border: 2px solid var(--negro);
  margin-bottom: 18px;
}

.tabla-resumen h2 {
  margin: 0;
  padding: 9px 14px;
  background: var(--negro);
  color: var(--crema);
  font-family: var(--fuente-titulo);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.tabla-resumen .tabla-envoltorio { padding: 0 14px; overflow-x: auto; }

table.cuentas {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

table.cuentas th {
  text-align: left;
  font-family: var(--fuente-titulo);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gris);
  border-bottom: 2px solid var(--negro);
  padding: 8px 10px 5px 0;
}

table.cuentas td {
  padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--gris-claro);
}

table.cuentas th.numero,
table.cuentas td.numero { text-align: right; padding-right: 0; white-space: nowrap; }
table.cuentas td small { color: var(--gris); font-size: 11px; }

table.cuentas tr.total td {
  border-top: 2px solid var(--negro);
  border-bottom: none;
  font-size: 15px;
  padding-top: 8px;
}

table.cuentas tr.total td.numero { color: var(--verde); }
table.cuentas tr.apagada td { color: var(--gris); }
table.cuentas tr.sangrada td:first-child { color: var(--gris); font-size: 13px; }
table.cuentas tr:last-child td { border-bottom: none; }

.dia-chip {
  display: inline-block;
  min-width: 22px;
  text-align: center;
  background: var(--negro);
  color: var(--crema);
  font-family: var(--fuente-titulo);
  font-size: 11px;
  padding: 1px 4px;
  margin-right: 5px;
}

.nota-tabla {
  margin: 0;
  padding: 8px 14px 12px;
  font-size: 12.5px;
  color: var(--gris);
}

/* Imprimir el resumen: sin menús ni botones, y en blanco y negro. */
@media print {
  .cabecera, .barra-resumen, .aviso, .modal-fondo { display: none !important; }
  body { background: #fff; }
  .contenido { padding: 0; }
  .tabla-resumen { break-inside: avoid; border-color: #000; }
  .tabla-resumen h2 { background: #fff; color: #000; border-bottom: 2px solid #000; }
  table.cuentas tr.total td.numero { color: #000; }
}

/* ==========================================================================
   Resumen · figuras
   ========================================================================== */
.figura .cuerpo-figura { padding: 14px; }

/* Una sola barra partida en trozos: de dónde viene el dinero. */
.barra-apilada {
  display: flex;
  gap: 2px;                 /* el hueco deja ver el fondo y separa los trozos */
  height: 30px;
  border: 2px solid var(--negro);
  background: var(--papel);
  overflow: hidden;
}

.barra-apilada .trozo { display: block; min-width: 3px; }

.leyenda-grafico {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}

.leyenda-grafico li {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 13px;
}

.leyenda-grafico i {
  width: 12px;
  height: 12px;
  border: 1px solid var(--negro);
  flex: none;
  align-self: center;
}

.leyenda-grafico b { font-variant-numeric: tabular-nums; }
.leyenda-grafico small { color: var(--gris); }

/* Barras horizontales: una fila por cosa, con su número siempre a la vista. */
.barras { display: grid; gap: 6px; }

.barra-fila {
  display: grid;
  grid-template-columns: minmax(90px, 0.9fr) minmax(60px, 2fr) auto;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
}

.barra-nombre { overflow-wrap: anywhere; }

.barra-pista {
  height: 14px;
  background: var(--crema);
  border: 1px solid var(--gris-claro);
}

.barra-relleno {
  display: block;
  height: 100%;
  background: var(--verde);
  border-radius: 0 3px 3px 0;   /* la punta del dato, redondeada */
}

.barra-valor {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 12.5px;
  white-space: nowrap;
}

/* Columnas: lo ingresado cada día. */
.columnas {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  min-height: 150px;
  overflow-x: auto;
  padding-top: 6px;
}

.columna {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  flex: 1 1 54px;
  min-width: 54px;
  max-width: 88px;     /* con pocos días, columnas y no bloques */
  height: 150px;
}

.columna-barra {
  width: 100%;
  background: var(--verde);
  border-radius: 3px 3px 0 0;
  border-bottom: 2px solid var(--negro);
  min-height: 3px;
}

.columna-valor {
  font-size: 11.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.columna-dia {
  font-size: 10.5px;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .barra-fila { grid-template-columns: 1fr auto; }
  .barra-fila .barra-pista { grid-column: 1 / -1; order: 3; }
}