/* launch-pomodoro — estilos propios. Los tokens y la base viven en assets/tokens.css */

/* Cristal de la ventana del cohete: oscuro de noche; sobre papel, un azul pálido */
:root {
  --rocket-glass: #161b22;
}

:root[data-theme="light"] {
  --rocket-glass: #dce8f6;
}

.layout {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
  grid-template-areas: "stage control";
  align-items: center;
  gap: var(--s-6);
}

/* ---------- marca ---------- */

.brand-orbit {
  stroke: var(--text-2);
}

.brand-flame {
  fill: var(--alert);
}

.brand-fins {
  fill: var(--accent);
}

/* Cohete blanco: en modo claro lo sostiene un contorno de tinta */
.brand-rocket {
  fill: var(--rocket);
  stroke: var(--rocket-line);
  stroke-width: 1.2;
  stroke-linejoin: round;
}

.brand-window {
  fill: var(--surface);
}

:root[data-theme="light"] .brand-window {
  fill: var(--rocket-line);
}

/* ---------- escena ---------- */

.stage {
  grid-area: stage;
  position: relative;
  min-width: 0;
  height: clamp(380px, calc(100dvh - 190px), 640px);
  container-type: inline-size; /* el reloj y las etiquetas se miden contra la escena */
}

.scene {
  width: 100%;
  height: 100%;
  overflow: hidden; /* el cohete sale del encuadre por arriba */
  transition: opacity 200ms var(--ease-in-out);
}

.scene.is-fading {
  opacity: 0;
}

/* Plutón pasa de fondo lejano a centro de la órbita; las dos poses las calcula scene.js */
.pluto {
  transform: var(--pluto-pad, translate(276px, 78px) scale(0.42));
}

/* Sin transición hasta el primer encuadre: Plutón no llega deslizándose al cargar */
.scene.is-ready .pluto {
  transition: transform 1600ms var(--ease-in-out);
}

.scene[data-view="orbit"] .pluto {
  transform: var(--pluto-orbit, translate(184px, 166px) scale(0.82));
}

.pluto-orbit {
  stroke: var(--border-strong);
}

/* Sombra del limbo de Plutón: se funde con el fondo en oscuro; sobre papel es
   una sombra cálida y más leve. */
.pluto-shade {
  stop-color: #0d1117;
}

:root[data-theme="light"] .pluto-shade {
  stop-color: #5b4330;
  stop-opacity: 0.38;
}

/* La plataforma se queda abajo cuando la cámara sube con el cohete */
.site-in {
  transition:
    transform 1500ms var(--ease-in-out),
    opacity 1000ms var(--ease-in-out);
}

.scene[data-view="orbit"] .site-in {
  transform: translateY(150px);
  opacity: 0;
}

.ground-stop {
  stop-color: var(--border);
}

.flight-path {
  stroke: var(--border-strong);
}

.pad {
  fill: var(--surface-2);
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-linejoin: round;
}

.tower {
  transition: transform 1800ms var(--ease-in-out);
}

.tower-frame {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tower-arms {
  fill: var(--border-strong);
  transform-box: fill-box;
  transform-origin: 100% 50%;
  transition:
    transform 1100ms var(--ease-in-out),
    opacity 600ms var(--ease-in-out);
}

.tower-beacon {
  fill: var(--alert);
}

/* T-10: los brazos se recogen y la torre se aparta */
.scene.is-retracted .tower {
  transform: translateX(30px);
}

.scene.is-retracted .tower-arms {
  transform: scaleX(0);
  opacity: 0;
}

.fuel-track {
  fill: var(--bg);
  stroke: var(--border-strong);
  stroke-width: 1;
}

.fuel-fill {
  fill: var(--accent);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(var(--fuel, 0));
  transition: transform 700ms var(--ease-out);
}

.fuel-marks {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 1;
  stroke-linecap: round;
}

/* Vapor de pre-lanzamiento: solo mientras corre el enfoque */
.vapor circle {
  fill: var(--text);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.scene.is-venting .vapor circle {
  animation: vapor 3.8s var(--ease-out) infinite;
}

.scene.is-venting .vapor circle:nth-child(2) {
  animation-delay: -1.3s;
  animation-duration: 4.6s;
}

.scene.is-venting .vapor circle:nth-child(3) {
  --drift: -24px;
  animation-delay: -2.4s;
}

@keyframes vapor {
  from {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  18% {
    opacity: 0.18;
  }
  to {
    transform: translate(var(--drift, -18px), -14px) scale(2.2);
    opacity: 0;
  }
}

.smoke circle {
  fill: var(--text);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Sobre papel el humo en tinta ensucia: pasa a un gris cálido, como polvo */
:root[data-theme="light"] .smoke circle {
  fill: var(--border-strong);
}

/* Estela: viaja con el cohete y se estira hacia abajo al acelerar */
.trail {
  fill: var(--accent);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 0;
}

/* Cohete: los colores van por clase para que sigan al tema. El blanco del cuerpo
   se sostiene en modo claro con un contorno de tinta que no cambia de grosor
   entre la plataforma y la órbita (donde el cohete se ve a la mitad). */
.rocket-body {
  fill: var(--rocket);
}

.rocket-shade {
  fill: #cfd6dd;
}

.rocket-outline {
  fill: none;
  stroke: var(--rocket-line);
  stroke-width: 1.25px;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.rocket-fin,
.rocket-band {
  fill: var(--accent);
}

.rocket-nozzle {
  fill: var(--text-2);
}

.rocket-window {
  fill: var(--rocket-glass);
  stroke: var(--text-2);
}

.rocket-glint {
  stroke: var(--cold);
}

.flame-outer {
  fill: var(--alert);
}

/* Llama: el grupo marca la intensidad; las dos capas parpadean por separado */
.rocket-flame {
  transform-box: fill-box;
  transform-origin: 50% 0;
  transform: scale(0.2);
  opacity: 0;
  transition:
    transform 600ms var(--ease-out),
    opacity 300ms var(--ease-out);
}

.rocket[data-flame="ignite"] .rocket-flame {
  transform: scale(0.6);
  opacity: 1;
}

.rocket[data-flame="cruise"] .rocket-flame {
  transform: scale(0.75);
  opacity: 1;
}

.rocket[data-flame="full"] .rocket-flame {
  transform: scale(1.3);
  opacity: 1;
}

.flame-outer,
.flame-inner {
  transform-box: fill-box;
  transform-origin: 50% 0;
}

.rocket:not([data-flame="off"]) .flame-outer {
  animation: flame 150ms var(--ease-in-out) infinite alternate;
}

.rocket:not([data-flame="off"]) .flame-inner {
  animation: flame 110ms var(--ease-in-out) infinite alternate-reverse;
}

@keyframes flame {
  from {
    transform: scaleY(0.84);
  }
  to {
    transform: scaleY(1.1);
  }
}

/* ---------- reloj y etiquetas sobre la escena ---------- */

.clock {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  pointer-events: none;
}

.clock-time {
  font-size: var(--fs-display);
  font-size: clamp(2.25rem, 11cqw, 4rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transform-origin: 0 50%;
  transition:
    color var(--t-med) var(--ease-out),
    opacity var(--t-med) var(--ease-out);
}

.clock-sign {
  color: var(--text-2);
  transition: color var(--t-med) var(--ease-out);
}

.clock[data-state="paused"] .clock-time {
  opacity: 0.55;
}

.clock[data-state="countdown"] .clock-time,
.clock[data-state="countdown"] .clock-sign,
.clock[data-state="liftoff"] .clock-time,
.clock[data-state="liftoff"] .clock-sign {
  color: var(--alert);
}

.clock[data-state="break"] .clock-time,
.clock[data-state="landing"] .clock-time {
  color: var(--cold);
}

.stage-hud {
  position: absolute;
  bottom: 0;
  margin: 0;
  pointer-events: none;
}

.stage-hud--bl {
  left: 0;
}

.stage-hud--br {
  right: 0;
}

/* En una escena estrecha las dos etiquetas no caben en una línea */
@container (max-width: 440px) {
  .stage-hud--br {
    display: none;
  }
}

/* ---------- control de misión ---------- */

.control {
  grid-area: control;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-4);
}

.control-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.control-leds {
  display: inline-flex;
  gap: 6px;
}

.control-leds i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  transition: background-color var(--t-med) var(--ease-out);
}

.control[data-state="focus"] .control-leds i:nth-child(1),
.control[data-state="countdown"] .control-leds i:nth-child(1),
.control[data-state="countdown"] .control-leds i:nth-child(2),
.control[data-state="liftoff"] .control-leds i {
  background: var(--accent);
}

.control[data-state="break"] .control-leds i:nth-child(3),
.control[data-state="landing"] .control-leds i:nth-child(3) {
  background: var(--cold);
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

.actions .btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.action-main {
  grid-column: 1 / -1;
  min-height: 52px;
  font-size: var(--fs-md);
}

.btn:not(.btn--accent) {
  background: var(--surface-2);
}

.btn:not(.btn--accent):hover {
  background: var(--surface-3);
}

.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn[aria-disabled="true"]:active {
  transform: none;
}

.icon {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Durante el despegue y el aterrizaje el botón principal informa, no actúa */
.action-main[aria-disabled="true"] {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent);
  opacity: 1;
  cursor: default;
}

.icon-pause,
.action-main[data-icon="pause"] .icon-play,
.action-main[data-icon="none"] .icon {
  display: none;
}

.action-main[data-icon="pause"] .icon-pause {
  display: block;
}

/* Estadísticas del día */

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-2);
  margin: 0;
}

.stat {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 84px;
  padding: var(--s-3);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.stat dt {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  line-height: 1.35;
  color: var(--text-2);
}

.stat dd {
  display: flex;
  align-items: center;
  min-height: 1.75rem;
  margin: 0;
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1;
  color: var(--accent);
}

.missions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.missions i {
  width: 12px;
  height: 12px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  transition:
    background-color var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out);
}

.missions i[data-state="current"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.missions i[data-state="done"] {
  border-color: var(--accent);
  background: var(--accent);
}

/* Ajustes */

.config {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.config legend {
  margin-bottom: var(--s-2);
  padding: 0;
}

.field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 44px;
  font-size: var(--fs-sm);
}

.field small {
  margin-left: var(--s-1);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--text-2);
}

.stepper {
  display: flex;
  align-items: stretch;
  height: 40px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease-out);
}

.stepper:focus-within {
  border-color: var(--border-strong);
}

.step {
  position: relative;
  width: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  font-family: var(--font-mono);
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--text-2);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--t-fast) var(--ease-out),
    background-color var(--t-fast) var(--ease-out);
}

/* Toque cómodo (44 px) sin agrandar el botón a la vista */
.step::after {
  content: "";
  position: absolute;
  inset: -2px;
}

.step:hover {
  color: var(--text);
  background: var(--surface-2);
}

.step:active {
  color: var(--accent);
}

.stepper input {
  width: 3.25rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-inline: 1px solid var(--border);
  border-radius: 0;
  font-size: var(--fs-md);
  text-align: center;
  appearance: textfield;
  -moz-appearance: textfield;
}

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

.stepper input:focus-visible {
  outline-offset: -2px;
}

.config-note {
  margin-top: var(--s-1);
  line-height: 1.6;
}

.switch {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 44px;
  padding: 0;
  background: transparent;
  border: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.switch-state {
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.switch-track {
  display: block;
  width: 44px;
  height: 24px;
  padding: 2px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition:
    background-color var(--t-med) var(--ease-out),
    border-color var(--t-med) var(--ease-out);
}

.switch-thumb {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text-2);
  transition:
    transform var(--t-med) var(--ease-spring),
    background-color var(--t-med) var(--ease-out);
}

.switch[aria-checked="true"] .switch-track {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.switch[aria-checked="true"] .switch-thumb {
  transform: translateX(20px);
  background: var(--accent);
}

.switch[aria-checked="true"] .switch-state {
  color: var(--text);
}

.control-hint {
  line-height: 1.6;
}

/* ---------- pantallas estrechas ---------- */

@media (max-width: 860px) {
  .page {
    gap: var(--s-4);
  }

  .layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "stage"
      "control";
    align-items: start;
    gap: var(--s-4);
  }

  .stage {
    height: clamp(260px, 38dvh, 360px);
  }

  .control {
    width: 100%;
    max-width: 460px;
    margin-inline: auto;
  }

  .stepper {
    height: 44px;
  }

  .step {
    width: 44px;
  }

  .control-hint {
    display: none;
  }
}

@media (hover: none) {
  .control-hint {
    display: none;
  }
}