/* Rondas — hoja de estilos. Modo oscuro permanente (vista inmersiva de gimnasio). */

:root {
  --bg: #101214;
  --fg: #f4f4f2;
  --fg-suave: rgba(244, 244, 242, 0.72);
  --panel: #1b1e22;
  --panel-2: #262a30;
  --borde: #363b43;
  --acento: #f2a007;
  --acento-fg: #141414;
  --peligro: #ff8a7a;
  --ok: #4cd08a;

  /* Colores de fase: texto blanco con contraste >= 7:1 salvo el aviso, que invierte (oscuro sobre ámbar). */
  --prep-bg: #6b4400;
  --prep-fg: #ffffff;
  --ronda-bg: #0a5f30;
  --ronda-fg: #ffffff;
  --descanso-bg: #9e1f17;
  --descanso-fg: #ffffff;
  --aviso-bg: #f2a007;
  --aviso-fg: #141414;
  --fin-bg: #1f2a3a;
  --fin-fg: #ffffff;

  --timer-bg: var(--bg);
  --timer-fg: var(--fg);

  --radio: 16px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

html[data-fase="prep"] { --timer-bg: var(--prep-bg); --timer-fg: var(--prep-fg); }
html[data-fase="ronda"] { --timer-bg: var(--ronda-bg); --timer-fg: var(--ronda-fg); }
html[data-fase="ronda"][data-aviso="1"] { --timer-bg: var(--aviso-bg); --timer-fg: var(--aviso-fg); }
html[data-fase="descanso"] { --timer-bg: var(--descanso-bg); --timer-fg: var(--descanso-fg); }
html[data-fase="fin"] { --timer-bg: var(--fin-bg); --timer-fg: var(--fin-fg); }

html {
  background: var(--timer-bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--timer-bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.35;
  overscroll-behavior: none;
  transition: background-color 0.2s ease;
}

[hidden] { display: none !important; }

h1, h2, h3, p { margin: 0; }

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

input, output { font: inherit; color: inherit; }

.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Pantallas ---------- */

.pantalla {
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: calc(var(--safe-top) + 12px) calc(var(--safe-right) + 16px) calc(var(--safe-bottom) + 12px) calc(var(--safe-left) + 16px);
  max-width: 720px;
  margin: 0 auto;
}

.cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}

.marca {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.marca svg { width: 30px; height: 30px; }

.titulo-pantalla { font-size: 28px; font-weight: 700; }

.titulo-seccion {
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-suave);
  margin-top: 8px;
}

main { display: flex; flex-direction: column; gap: 12px; flex: 1; }

.pie-accion {
  position: sticky;
  bottom: 0;
  margin-top: auto;
  padding: 12px 0 0;
  background: var(--bg);
  border-top: 1px solid var(--borde);
  box-shadow: 0 -12px 16px -8px var(--bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ---------- Botones ---------- */

.boton {
  min-height: 56px;
  padding: 0 20px;
  border: 0;
  border-radius: 14px;
  font-size: 18px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--panel-2);
  color: var(--fg);
  border: 1px solid var(--borde);
}

.boton-primario { background: var(--acento); color: var(--acento-fg); border-color: transparent; }
.boton-grande { min-height: 72px; width: 100%; font-size: 22px; }
.boton-secundario { background: var(--panel-2); }
.boton-peligro { background: transparent; color: var(--peligro); border-color: rgba(255, 138, 122, 0.5); }
.boton:active { filter: brightness(0.9); }
.boton:disabled { opacity: 0.45; cursor: default; }

.boton-icono {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--panel-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.boton-icono svg { width: 24px; height: 24px; }

.boton:focus-visible,
.boton-icono:focus-visible,
.segmento:focus-visible,
.stepper-btn:focus-visible,
.preset-principal:focus-visible,
.interruptor:focus-visible + .interruptor-pista {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* ---------- Tarjetas y listas ---------- */

.tarjeta {
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tarjeta h3 { font-size: 19px; font-weight: 700; }
.tarjeta p { color: var(--fg-suave); }
.tarjeta ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.tarjeta-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.tarjeta-acciones .boton { flex: 1; min-height: 48px; }

.lista-presets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preset {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: var(--radio);
  padding: 6px 8px 6px 6px;
}

.preset[aria-selected="true"] { border-color: var(--acento); }

.preset-principal {
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 10px;
  min-height: 64px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-radius: 10px;
  min-width: 0;
}

.preset-linea { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.preset-nombre { font-size: 20px; font-weight: 600; }
.preset-detalle { font-size: 15px; color: var(--fg-suave); }
.preset-total { font-size: 16px; font-variant-numeric: tabular-nums; color: var(--fg-suave); white-space: nowrap; }
.preset[aria-selected="true"] .preset-total { color: var(--acento); font-weight: 600; }

.resumen-seleccion { font-size: 15px; color: var(--fg-suave); text-align: center; }

/* ---------- Temporizador ---------- */

#pantalla-timer { color: var(--timer-fg); gap: 8px; }

.timer-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.timer-ronda { font-size: 22px; font-weight: 600; }
.timer-preset { font-size: 15px; opacity: 0.8; }

.boton-candado {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
  color: inherit;
  position: relative;
  width: 56px;
  height: 56px;
}

.boton-candado[aria-pressed="true"] { background: rgba(0, 0, 0, 0.45); border-color: currentColor; }
.boton-candado .candado-abierto, .boton-candado .candado-cerrado { position: absolute; }
.boton-candado[aria-pressed="false"] .candado-cerrado { display: none; }
.boton-candado[aria-pressed="true"] .candado-abierto { display: none; }
.boton-candado.sosteniendo { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.5); }

.timer-zona {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  border-radius: 24px;
  padding: 12px 0;
  -webkit-user-select: none;
  user-select: none;
}

.timer-fase {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.timer-digitos {
  font-size: clamp(88px, 36vw, 184px);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, system-ui, sans-serif;
}

.timer-digitos.ancho { font-size: clamp(76px, 30vw, 160px); }

.barra {
  width: min(92%, 520px);
  height: 12px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

html[data-aviso="1"] .barra { background: rgba(0, 0, 0, 0.18); }

.barra-relleno {
  height: 100%;
  width: 0%;
  background: currentColor;
  border-radius: 6px;
  transition: width 0.25s linear;
}

.timer-total { font-size: 17px; opacity: 0.85; font-variant-numeric: tabular-nums; }

.timer-indicadores {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 14px;
  opacity: 0.85;
}

.indicador { display: inline-flex; align-items: center; gap: 6px; }
.indicador::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; opacity: 0.45; }
.indicador.activo::before { opacity: 1; background: var(--ok); }
.indicador.fallo::before { background: var(--peligro); opacity: 1; }

.timer-toque, .timer-bloqueo-aviso {
  font-size: 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.3);
}

.timer-pausado .timer-digitos { opacity: 0.6; }
.timer-pausado .timer-fase::after { content: " · PAUSA"; }

.timer-controles { display: flex; flex-direction: column; gap: 10px; }
.timer-controles-fila { display: flex; gap: 10px; }
.timer-controles-fila .boton { flex: 1; min-height: 56px; font-size: 17px; }

#pantalla-timer .boton-secundario, #pantalla-timer .boton-peligro {
  background: rgba(0, 0, 0, 0.25);
  color: inherit;
  border-color: rgba(255, 255, 255, 0.3);
}

#pantalla-timer .boton-primario { background: rgba(255, 255, 255, 0.92); color: #141414; }
html[data-aviso="1"] #pantalla-timer .boton-primario { background: #141414; color: #ffffff; }

.boton-sostener { position: relative; overflow: hidden; }
.boton-sostener .sostener-progreso {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.boton-sostener > span { position: relative; }

.timer-fin {
  position: fixed;
  inset: 0;
  background: rgba(16, 18, 20, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10;
}

.timer-fin .tarjeta { width: min(100%, 420px); text-align: center; gap: 16px; }
.timer-fin h2 { font-size: 30px; }

/* Pulso del aviso (1 Hz, nunca más rápido). */
@keyframes pulso-aviso {
  0%, 100% { box-shadow: inset 0 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: inset 0 0 0 10px rgba(0, 0, 0, 0.35); }
}

html[data-aviso="1"] .timer-zona { animation: pulso-aviso 1s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  html[data-aviso="1"] .timer-zona { animation: none; box-shadow: inset 0 0 0 8px rgba(0, 0, 0, 0.35); }
  .barra-relleno, body { transition: none; }
}

/* Modo horizontal: dígitos al máximo, controles en columna a la derecha. */
@media (orientation: landscape) and (max-height: 520px) {
  #pantalla-timer {
    display: grid;
    grid-template-columns: 1fr 180px;
    grid-template-rows: auto 1fr;
    gap: 8px 16px;
    max-width: none;
  }
  .timer-cabecera { grid-column: 1 / -1; }
  .timer-zona { grid-column: 1; grid-row: 2; gap: 6px; }
  .timer-digitos { font-size: clamp(96px, 46vh, 260px); }
  .timer-digitos.ancho { font-size: clamp(80px, 38vh, 220px); }
  .timer-fase { font-size: 22px; }
  .timer-controles { grid-column: 2; grid-row: 2; justify-content: center; }
  .timer-controles-fila { flex-direction: column; }
  .timer-controles .boton-grande { min-height: 64px; font-size: 20px; }
}

/* ---------- Ajustes y editor ---------- */

.formulario { display: flex; flex-direction: column; gap: 10px; }

.fila-ajuste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 64px;
  padding: 8px 14px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 14px;
}

.fila-ajuste.vertical { flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 14px; }
.fila-etiqueta { display: flex; flex-direction: column; gap: 2px; }
.fila-etiqueta span:first-child { font-weight: 600; }
.fila-nota { font-size: 14px; color: var(--fg-suave); }

.campo-texto {
  min-height: 48px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--panel-2);
  padding: 0 14px;
  font-size: 18px;
  width: 100%;
  box-sizing: border-box;
}

.stepper { display: inline-flex; align-items: center; gap: 6px; }

.stepper-btn {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--panel-2);
  font-size: 28px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.stepper-btn:active { background: var(--borde); }

.stepper-valor {
  min-width: 5ch;
  text-align: center;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

.segmento {
  min-width: 60px;
  min-height: 48px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid var(--borde);
  background: var(--panel-2);
  font-weight: 600;
  font-size: 17px;
  flex: 1 1 60px;
  white-space: nowrap;
}

.segmento[aria-checked="true"] { background: var(--acento); color: var(--acento-fg); border-color: transparent; }

/* Interruptor accesible: el input real queda visualmente oculto. */
/* La etiqueta es la zona táctil: 48 px de alto aunque la pista mida 32. */
.interruptor-etiqueta { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; min-height: 48px; padding: 0 2px; flex: 0 0 auto; }
.interruptor { position: absolute; opacity: 0; width: 1px; height: 1px; }
.interruptor-pista {
  width: 54px;
  height: 32px;
  border-radius: 16px;
  background: var(--borde);
  position: relative;
  transition: background 0.15s;
  flex: 0 0 auto;
}
.interruptor-pista::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform 0.15s;
}
.interruptor:checked + .interruptor-pista { background: var(--ok); }
.interruptor:checked + .interruptor-pista::after { transform: translateX(22px); }

.rango { width: 160px; accent-color: var(--acento); }

.total-editor { font-size: 17px; color: var(--fg-suave); text-align: center; font-variant-numeric: tabular-nums; }

.estado-dispositivo {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-size: 15px;
}
.estado-dispositivo dt { color: var(--fg-suave); }
.estado-dispositivo dd { margin: 0; text-align: right; font-weight: 600; }
.estado-dispositivo dd.ok { color: var(--ok); }
.estado-dispositivo dd.mal { color: var(--peligro); }

.acciones-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.acciones-fila .boton { flex: 1; min-height: 48px; font-size: 16px; }

.nota { font-size: 14px; color: var(--fg-suave); }
.nota a { color: var(--acento); }

/* ---------- Diálogo ---------- */

dialog {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  color: var(--fg);
  padding: 20px;
  width: min(92vw, 420px);
  box-sizing: border-box;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
dialog p { font-size: 18px; margin-bottom: 16px; }
.dialogo-acciones { display: flex; gap: 10px; }
.dialogo-acciones .boton { flex: 1; }

/* ---------- 404 ---------- */

.pagina-404 .contenedor-404 { padding: 48px 24px; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.pagina-404 h1 { font-size: 28px; }
.pagina-404 a.boton { text-decoration: none; }