:root {
  --negro: #000;  /* igual que el fondo del logo */
  --panel: #171717;
  --borde: #2e2e2e;
  --gris: #a8a8a8;
  --texto: #f2f2f2;
  --mostaza: #f6a823;
  --rojo: #e2335a;
  --radio: 10px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--negro); color: var(--texto);
  font: 16px/1.55 "Rubik", system-ui, sans-serif;
}
a { color: var(--mostaza); }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: "Rubik Dirt", "Rubik", sans-serif; font-weight: 400; color: var(--mostaza); line-height: 1.1; margin: 0 0 .6em; }
h2 { font-size: clamp(2rem, 6vw, 3rem); margin-bottom: .1em; }
.subtitulo { color: var(--rojo); font-style: italic; margin: 0 0 1.2em; }
button, select, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--mostaza); outline-offset: 2px; }

.contenedor { max-width: 1000px; margin: 0 auto; padding: 0 16px; }
.boton {
  display: inline-block; background: var(--mostaza); color: #111; border: 0; border-radius: 999px;
  padding: .7em 1.4em; font-weight: 700; text-decoration: none; cursor: pointer;
}
.boton.secundario { background: transparent; color: var(--texto); border: 2px solid var(--borde); }
.boton:hover { filter: brightness(1.1); }

/* Cabecera */
.barra { position: sticky; top: 0; z-index: 10; background: rgba(11,11,11,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--borde); }
.barra .contenedor { display: flex; align-items: center; gap: 16px; height: 56px; }
.barra .marca { font-family: "Rubik Dirt", sans-serif; font-size: 1.5rem; color: var(--mostaza); text-decoration: none; margin-right: auto; }
.barra nav { display: flex; gap: 16px; overflow-x: auto; }
.barra nav a { color: var(--texto); text-decoration: none; white-space: nowrap; font-size: .95rem; }
.barra nav a:hover { color: var(--mostaza); }
.barra .boton { padding: .4em 1em; }
@media (max-width: 640px) { .barra.publica nav a:not(.boton) { display: none; } }

/* Portada */
.portada { position: relative; overflow: hidden; text-align: center; min-height: calc(100svh - 56px);
  display: grid; place-items: center; padding: 32px 0 56px; }
.portada .fondo { position: absolute; inset: 0; }
.portada .fondo::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,.55), rgba(0,0,0,.85) 70%), linear-gradient(to bottom, transparent 70%, var(--negro)); }
.portada .fondo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transform: scale(1.08); transition: opacity 1.5s ease, transform 6.5s ease-out; }
.portada .fondo img.activa { opacity: 1; transform: scale(1); }
.portada .contenedor { position: relative; }
/* screen hace transparente el fondo negro del JPG del logo */
.portada .logo { width: min(460px, 85vw); margin: 0 auto 8px; mix-blend-mode: screen; }
.portada p { font-size: 1.2rem; color: var(--texto); text-shadow: 0 1px 6px #000; max-width: 34em; margin: 0 auto 24px; }
@media (prefers-reduced-motion: reduce) { .portada .fondo img { transition: none; } }

section { padding: 56px 0; border-top: 1px solid var(--borde); }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tarjeta { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; }
.tarjeta h3 { font-size: 1.5rem; }

.bolos { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.bolos li { display: flex; gap: 16px; align-items: center; background: var(--panel); border-left: 4px solid var(--rojo); border-radius: var(--radio); padding: 14px 16px; }
.bolos .fecha { font-weight: 700; color: var(--mostaza); min-width: 5.5em; text-align: center; line-height: 1.2; }
.bolos .fecha span { display: block; font-size: 1.8rem; }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.galeria img { aspect-ratio: 1; object-fit: cover; width: 100%; border-radius: 6px; }

.contacto { display: grid; gap: 12px; font-size: 1.15rem; }
.contacto a { text-decoration: none; }
footer { padding: 32px 0; color: var(--gris); text-align: center; font-size: .9rem; border-top: 1px solid var(--borde); }

/* ===== Zona de ensayo ===== */
.oculto { display: none !important; }
.pestanas { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0; }
.pestanas button { background: var(--panel); border: 1px solid var(--borde); border-radius: 999px; padding: .45em 1em; cursor: pointer; }
.pestanas button[aria-pressed="true"] { background: var(--mostaza); color: #111; border-color: var(--mostaza); font-weight: 700; }

.personas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.personas button { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 12px; cursor: pointer; text-align: left; }
.personas button:hover { border-color: var(--mostaza); }
.personas b { display: block; font-size: 1.1rem; }
.personas small { color: var(--gris); }

.lista { list-style: none; padding: 0; margin: 0 0 24px; }
.lista li button, .lista li .sin { width: 100%; display: flex; justify-content: space-between; gap: 12px; align-items: center; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--borde); padding: 12px 4px; cursor: pointer; }
.lista li button:hover { color: var(--mostaza); }
.lista .sin { color: var(--gris); cursor: default; font-style: italic; }
.lista .num { color: var(--gris); min-width: 2em; }
.lista .titulo { flex: 1; }
.etiqueta { font-size: .75rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--borde); color: var(--gris); white-space: nowrap; }
.etiqueta.ok { border-color: var(--mostaza); color: var(--mostaza); }
.etiqueta.falta { border-color: var(--rojo); color: var(--rojo); }

.controles { background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px; display: grid; gap: 10px; }
.controles audio { width: 100%; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fila label { color: var(--gris); font-size: .9rem; }
.fila input[type=range] { flex: 1; min-width: 120px; accent-color: var(--mostaza); }
.fila input[type=number] { width: 4.5em; background: var(--negro); border: 1px solid var(--borde); border-radius: 6px; padding: 4px 6px; }
.valor { min-width: 3.5em; font-variant-numeric: tabular-nums; font-weight: 700; }
.pulso { width: 14px; height: 14px; border-radius: 50%; background: var(--borde); }
.pulso.on { background: var(--rojo); }
.pulso.on.fuerte { background: var(--mostaza); }

/* Gestión */
.formulario { display: grid; gap: 12px; max-width: 640px; background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px; margin-bottom: 24px; }
.formulario h3 { margin: 0; }
.formulario label:not(.boton) { display: grid; gap: 4px; color: var(--gris); font-size: .9rem; }
.formulario input:not([type=file]), .formulario select, .fila-lista select { background: var(--negro); border: 1px solid var(--borde); border-radius: 8px; padding: .55em .8em; color: var(--texto); font-size: 1rem; }
.formulario fieldset { border: 1px solid var(--borde); border-radius: 8px; display: grid; gap: 8px; }
.formulario legend { color: var(--mostaza); padding: 0 6px; }
.formulario .subir { justify-self: start; }
.parte { display: grid; grid-template-columns: 1fr minmax(120px, 200px) auto auto; gap: 6px; align-items: center; }
.parte button, .fila-lista button:not(.boton) { background: none; border: 1px solid var(--borde); border-radius: 6px; min-width: 36px; padding: 6px; cursor: pointer; }
.fila-lista button:disabled { opacity: .3; cursor: default; }
@media (max-width: 520px) { .parte { grid-template-columns: 1fr auto; } .parte select { grid-column: 1; } }
.fila-lista { display: flex; gap: 8px; align-items: center; padding: 10px 4px; border-bottom: 1px solid var(--borde); color: var(--texto); text-decoration: none; }
a.fila-lista:hover .titulo { color: var(--mostaza); }
.boton.peligro { border-color: var(--rojo); color: var(--rojo); }
.pestanas .boton { padding: .45em 1em; }

.login { display: grid; gap: 10px; max-width: 320px; }
.login input { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; padding: .7em 1em; }
.error { color: var(--rojo); min-height: 1.5em; margin: 0; }
.personas button[aria-pressed="true"] { border-color: var(--mostaza); }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.filtros input, .filtros select { background: var(--panel); border: 1px solid var(--borde); border-radius: 999px; padding: .5em 1em; }
.filtros input { flex: 1; min-width: 180px; }
.etiqueta.sabida { border-color: #4caf50; color: #4caf50; }
.sabida-check { display: inline-flex; gap: 8px; align-items: center; margin: 16px 0 0; cursor: pointer; }
.sabida-check input { width: 1.2em; height: 1.2em; accent-color: var(--mostaza); }

.transporte { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.transporte button { background: var(--negro); border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 8px; font-size: 1.05rem; cursor: pointer; }
.transporte .principal { background: var(--mostaza); color: #111; font-size: 1.4rem; border: 0; }
.transporte #entrada { grid-column: 1 / -1; }

.visor { margin-top: 16px; }
.herramientas { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.herramientas button { background: var(--panel); border: 1px solid var(--borde); border-radius: 8px; min-width: 40px; padding: 6px 10px; cursor: pointer; }
.herramientas #foco { margin-left: auto; }
.visor.foco { position: fixed; inset: 0; z-index: 50; background: #000; overflow: auto; padding: 8px; margin: 0; }
.visor.foco .herramientas { position: sticky; top: 0; z-index: 1; background: #000; padding-bottom: 8px; }
.partitura { display: grid; grid-template-columns: 100%; gap: 8px; overflow-x: auto; justify-items: start; }
.partitura canvas, .partitura img { max-width: none; }
.partitura canvas, .partitura img { height: auto; background: #fff; border-radius: 4px; }
.letra { white-space: pre-wrap; font: 1.15rem/1.7 "Rubik", sans-serif; background: var(--panel); border-radius: var(--radio); padding: 20px; margin: 0; }
.aviso { background: var(--panel); border: 1px dashed var(--rojo); border-radius: var(--radio); padding: 16px; color: var(--gris); }
.navegacion { display: flex; justify-content: space-between; gap: 8px; margin: 16px 0; }