:root{
  --bg: #f7fbff;
  --fg:#111;
  --muted:#5b6470;
  --accent:#ff6ab0;
  --accent-2:#6bc6ff;
  --card:#ffffffcc;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}
:root[data-theme="dark"]{
  --bg:#0e0f14; --fg:#fff; --muted:#c6cbd2; --card:#1a1c23cc;
}
/* MODO BAJO ESTÍMULO: tonos pastel + fondo oscuro */
:root[data-theme="low"]{
  --bg:#0f1218;                  /* fondo base más oscuro */
  --fg:#e8eaee;                  /* texto claro, no chillón */
  --muted:#b1b7c2;               /* textos secundarios */
  --card:#151a23cc;              /* tarjetas / controles */
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Fondo específico (sustituye el fondo vibrante por uno tenue) */
:root[data-theme="low"] body{
  background:
    radial-gradient(1200px 600px at 10% -10%, #1a1e27 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%,   #16202b 0%, transparent 60%),
    radial-gradient(600px 400px at 30% 110%, #1a2228 0%, transparent 60%),
    radial-gradient(700px 500px at 70% 120%, #182024 0%, transparent 60%),
    var(--bg);
}

/* Botones más calmados en bajo estímulo */
:root[data-theme="low"] button{
  background: linear-gradient(180deg, #d9dee7, #c2cad7);
  color:#0f172a;
}
:root[data-theme="low"] button.secondary{
  background: linear-gradient(180deg, #cfe2ef, #a9c7d8);
}
:root[data-theme="low"] button.ghost{
  background:#0f1218;
  border:2px solid rgba(255,255,255,.08);
  color:var(--fg);
}

/* Estado/píldoras con verdes y azules apagados */
:root[data-theme="low"] .state-pill{ background:#e8f3eb; color:#1c3a27 }
:root[data-theme="low"] .state-pill[data-type="rest"]{ background:#e7eefb; color:#19315f }

/* Semicírculo: desaturar y oscurecer un poco el SVG completo */
:root[data-theme="low"] #arcSvg{
  filter: saturate(0.55) brightness(0.9);
}

/* Trazo guía del arco (gris según tema) */
#arcTrail{ stroke: var(--trail, rgba(0,0,0,.12)); }
:root[data-theme="dark"]{ --trail: rgba(255,255,255,.12); }
:root[data-theme="low"]{  --trail: rgba(255,255,255,.10); }

/* Picto más integrado en fondo oscuro */
:root[data-theme="low"] .picto-center{
  background:#0f1218;
  border-color:#2a3140;
}


*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: "Baloo 2", "Fredoka", Inter, Roboto, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--fg);
  background:
    radial-gradient(1200px 600px at 10% -10%, #ffeef7 0%, transparent 60%),
    radial-gradient(900px 500px at 90% 0%, #e7f6ff 0%, transparent 60%),
    radial-gradient(600px 400px at 30% 110%, #fffbe6 0%, transparent 60%),
    radial-gradient(700px 500px at 70% 120%, #eaf9f1 0%, transparent 60%),
    var(--bg);
  padding-bottom: 2rem;
  min-height: 100dvh;
}

.layout{ max-width:1400px; margin:0 auto; padding:1rem 1rem 0 }
h1{ display:flex; align-items:center; gap:.6rem; font-size: clamp(1.4rem, 2.4vw, 2rem); margin:.2rem 0 1rem }

/* ===== Escena 16:9 en dos columnas ===== */
.stage{
  display:grid;
  grid-template-columns: 1.2fr 1fr; /* arco más ancho */
  gap: 1.4rem;
  align-items: center;
}
@media (max-width: 900px){
  .stage{ grid-template-columns: 1fr; }
}

/* Columna IZQ: estado + semicírculo + picto */
.state-pill{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.45rem .8rem; border-radius:999px; font-weight:800;
  background:#e6f4ea; color:#14532d; box-shadow: 0 2px 0 rgba(0,0,0,.06)
}
.state-pill[data-type="rest"]{ background:#e6f0ff; color:#102a65 }
.state-pill .badge{ padding:.1rem .5rem; border-radius:999px; background:#fff; border:1px solid rgba(0,0,0,.08) }

.arc-pane{ display:grid; gap:.8rem; justify-items:center }
.arc-wrap{
  position:relative;
  width:100%;
  aspect-ratio: 2 / 1;     /* semicírculo: ancho = 2 * alto */
  max-width: 900px;
}
/* SVG ocupa todo el contenedor */
#arcSvg{ position:absolute; inset:0; width:100%; height:100% }

/* Picto centrado bajo el arco */
.picto-center{
  position:absolute; left:50%; top:58%;
  transform: translate(-50%,-50%);
  width: clamp(400px, 20vmin, 220px);
  height: clamp(400px, 20vmin, 220px);
  object-fit: contain;
  background:#fff; border:2px solid #e5e7eb; border-radius:1rem; box-shadow: var(--shadow);
}

/* Columna DCHA: reloj + barra + controles */
.info-pane{ display:grid; gap:1rem; justify-items:stretch }
.digits{
  font-variant-numeric: tabular-nums; text-align:left;
  font-size: clamp(3.6rem, 12vw, 8rem); line-height:1; letter-spacing:.02em; font-weight:900;
  text-shadow: 0 4px 0 rgba(0,0,0,.08);
}
@media (prefers-reduced-motion: no-preference){
  .running .digits{ animation: pulse 1.5s ease-in-out infinite }
  @keyframes pulse{ 0%,100%{ transform:scale(1) } 50%{ transform:scale(1.015) } }
}

.subrow{ display:flex; align-items:center; gap:.75rem; width:100% }
.progress{ width:100%; height:16px; border-radius:999px; background:#e5e7eb; overflow:hidden; box-shadow: inset 0 2px 5px rgba(0,0,0,.06) }
.progress > span{ display:block; height:100%; background: linear-gradient(90deg, #7dd3fc, #86efac); width:0% }

.controls{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center }
button{
  font:inherit; cursor:pointer; border:0; border-radius:1rem; padding:.9rem 1.1rem;
  min-width:54px; min-height:54px; font-weight:800; color:#111; background:linear-gradient(180deg, #ffb6e8, #ff6ab0);
  box-shadow: 0 6px 0 rgba(0,0,0,.12); transform: translateY(0); transition: transform .05s ease, box-shadow .05s ease;
}
button.secondary{ background: linear-gradient(180deg, #a6e3ff, #51b9ff) }
button.ghost{ background:#ffffffcc; border:2px solid rgba(0,0,0,.08); color:var(--fg) }
button:active{ transform: translateY(2px); box-shadow: 0 3px 0 rgba(0,0,0,.12) }
button:focus-visible{ outline:3px solid #6bc6ff; outline-offset:2px }
.row{ display:flex; gap:.75rem; align-items:center; margin:.2rem 0; flex-wrap:wrap }
.row > label{ width:auto; color:var(--muted) }
.small{ color:var(--muted); font-weight:600 }
.kbd{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding:.2rem .5rem; border:1px solid #e5e7eb; border-radius:.5rem; background:#fff; color:#111 }

/* Confeti */
.confetti{ position:fixed; inset:0; pointer-events:none; display:grid; place-items:center; opacity:0; transition:opacity .25s }
.confetti.show{ opacity:1 }
.confetti .piece{ position:absolute; width:10px; height:10px; border-radius:3px; background:red; animation: fly 900ms ease-out forwards }
@keyframes fly{ to{ transform: translate(var(--dx), var(--dy)) rotate(360deg); opacity:0 } }
@media (prefers-reduced-motion: reduce){ .confetti .piece{ animation:none } .running .digits{ animation:none } }

/* ===== Panel inferior (flujo normal, no tapa) ===== */
.settings{
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: 1.2rem;
  padding: .8rem 0 1.2rem;
}
.settings-inner{
  max-width:1400px; margin:0 auto; padding:0 1rem; display:grid; gap:.8rem;
}
.settings fieldset{ border:0; margin:0; padding:0 }
.settings legend{ font-weight:800; margin-bottom:.3rem }
.settings .row label{ width:auto }

/* Stepper táctil +/− para inputs numéricos */
.stepper{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--card);
  padding:.25rem;
  border:1px solid rgba(0,0,0,.06);
  border-radius:.8rem;
}
.btn-step{
  display:inline-grid; place-items:center;
  width:56px; height:56px; min-width:56px; min-height:56px;
  border:0; border-radius:.8rem; cursor:pointer;
  font-weight:900; font-size:1.4rem; line-height:1;
  color:#111; background: linear-gradient(180deg, #a6e3ff, #51b9ff);
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.btn-step:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.12) }
.btn-step:focus-visible{ outline:3px solid #6bc6ff; outline-offset:2px }

/* Input numérico ancho para tocar/teclear */
.stepper > input[type=number]{
  width:110px; height:56px; font-size:1.1rem; font-weight:800;
  text-align:center; border:1px solid rgba(0,0,0,.08);
  border-radius:.6rem; background:#fff; color:var(--fg);
}

/* Ocultar flechas nativas (para no duplicar controles) */
.stepper input[type=number]::-webkit-outer-spin-button,
.stepper input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.stepper input[type=number]{ -moz-appearance: textfield; }

/* Modo bajo estímulo: botones más calmados */
:root[data-theme="low"] .btn-step{
  background: linear-gradient(180deg, #cfe2ef, #a9c7d8);
  color:#0f172a;
}
:root[data-theme="low"] .stepper{
  background:#151a23cc;
  border-color: rgba(255,255,255,.08);
}
/* Centrado del panel inferior y secciones apiladas */
.settings{
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-top: 1px solid rgba(0,0,0,.06);
  margin-top: 1.2rem;
  padding: .8rem 0 1.2rem;
  text-align: center;
}
.settings-inner{
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 1rem;
  display: grid;
  gap: 1rem;
  place-items: center;               /* todo centrado */
}
.settings-section{ width: 100%; max-width: 1000px; }
.settings fieldset{ border:0; margin:0; padding:0 }
.settings legend{ font-weight:800; margin-bottom:.5rem }

/* Filas centradas */
.row{ display:flex; gap:.75rem; align-items:center; margin:.4rem 0; flex-wrap:wrap }
.row-center{ justify-content: center; }
.row > label{ color:var(--muted); font-weight:700 }

/* Iconos de pictos (duraciones y presets) */
.picto-ico{
  width: 42px; height: 42px; object-fit: contain;
  background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:.5rem;
}

/* Presets con pictos */
.preset-row{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:center }
.preset-btn{
  display:flex; align-items:center; gap:.6rem; padding:.85rem 1.1rem;
  min-height:56px; border-radius:1rem; font-weight:800;
}
.preset-btn .picto-ico{ width:32px; height:32px }

/* Stepper táctil: que el input numérico tenga el mismo tamaño que los botones (56px) */
.stepper{
  display:inline-flex; align-items:center; gap:.5rem;
  background: var(--card);
  padding:.25rem;
  border:1px solid rgba(0,0,0,.06);
  border-radius:.8rem;
}
.btn-step{
  display:inline-grid; place-items:center;
  width:56px; height:56px; min-width:56px; min-height:56px;
  border:0; border-radius:.8rem; cursor:pointer;
  font-weight:900; font-size:1.4rem; line-height:1;
  color:#111; background: linear-gradient(180deg, #a6e3ff, #51b9ff);
  box-shadow: 0 4px 0 rgba(0,0,0,.12);
}
.btn-step:active{ transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.12) }
.btn-step:focus-visible{ outline:3px solid #6bc6ff; outline-offset:2px }

.stepper > input[type=number]{
  width:110px; height:56px;               /* mismo alto que botones */
  font-size:1.2rem; font-weight:800;      /* números grandes */
  text-align:center; border:1px solid rgba(0,0,0,.08);
  border-radius:.6rem; background:#fff; color:var(--fg);
}
.stepper input[type=number]::-webkit-outer-spin-button,
.stepper input[type=number]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.stepper input[type=number]{ -moz-appearance: textfield; }

/* Modo bajo estímulo (coherencia visual) */
:root[data-theme="low"] .preset-btn{ background: linear-gradient(180deg, #cfe2ef, #a9c7d8); color:#0f172a }
:root[data-theme="low"] .stepper{
  background:#151a23cc; border-color: rgba(255,255,255,.08);
}
:root[data-theme="low"] .btn-step{
  background: linear-gradient(180deg, #cfe2ef, #a9c7d8); color:#0f172a;
}
/* Tamaño de pictos en el panel inferior */
.picto-ico{
  width: 48px;
  height: 48px;
  object-fit: contain;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:.5rem;
  flex-shrink: 0;     /* evita que se deformen en flex */
}

/* Pictos dentro de los botones de presets */
.preset-btn .picto-ico{
  width: 40px;
  height: 40px;
}

/* Opcional: ajusta la separación en filas con pictos */
.row.row-center .picto-ico{
  margin-right: .25rem;
}
/* Asegura que el picto esté por encima del arco */
#arcSvg{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.picto-center{ z-index:2; }