:root{
  --bg:#0b0d10; --panel:#14181d; --line:#262d36; --text:#f2f5f8; --muted:#8b97a5;
  --round:#2ecc71; --rest:#f5a623; --prep:#2ecc71; --done:#ff3b3b; --danger:#ff5252;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  display:flex;flex-direction:column;overflow:hidden;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
button:focus,input:focus,select:focus{outline:5px solid var(--accent,var(--prep));outline-offset:3px}

/* Logo de fondo, translúcido y a un lado */
.logo{position:fixed;left:1.5vw;top:2vh;height:30vh;width:auto;opacity:.12;filter:brightness(0) invert(1);pointer-events:none;z-index:0}
body.dual .logo{height:25vh}
.clock,.timers,.controls{position:relative;z-index:1}

/* Reloj */
.clock{text-align:center;padding:1.5vh 2vw 0}
.clock-time{font-size:min(23vw,34vh);line-height:1;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.clock-time .sec{color:var(--muted);font-size:.5em;font-weight:500;margin-left:.1em}
body.dual .clock-time{font-size:min(23vw,27vh)}
.timers.dual .count{font-size:min(24cqw,17vh)}
.clock-date{font-size:clamp(.9rem,2.2vw,2rem);color:var(--muted);margin-top:.4vh}

/* Temporizadores */
.timers{flex:1;min-height:0;display:grid;grid-template-columns:1fr;border-top:1px solid var(--line);margin-top:1.5vh}
.timers.dual{grid-template-columns:1fr 1fr}
.timers.dual .timer+.timer{border-left:1px solid var(--line)}
@media (max-width:700px){.timers.dual{grid-template-columns:1fr;grid-template-rows:1fr 1fr}.timers.dual .timer+.timer{border-left:0;border-top:1px solid var(--line)}}
.timer{--accent:var(--text);container-type:inline-size;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8vh;padding:1vh 1.5vw}
.timer[data-phase="round"]{--accent:var(--round)}
.timer[data-phase="rest"]{--accent:var(--rest)}
.timer[data-phase="prep"]{--accent:var(--prep)}
.timer[data-phase="done"]{--accent:var(--done)}
.tname{font-size:clamp(1rem,5cqw,2.4rem);font-weight:700;color:var(--muted)}
.timers:not(.dual) .tname{display:none}
.phase{font-size:clamp(1rem,6cqw,3.4rem);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);text-align:center}
.count{font-size:min(26cqw,24vh);line-height:1;font-weight:800;font-variant-numeric:tabular-nums;color:var(--text)}
.bar{width:90cqw;height:clamp(8px,1.4vh,16px);background:var(--panel);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;width:0;background:var(--accent);transition:width .15s linear}
.meta{font-size:clamp(.9rem,4cqw,2rem);color:var(--muted);font-variant-numeric:tabular-nums;text-align:center}
.meta b{color:var(--text)}
.tctl{display:flex;flex-wrap:wrap;gap:1.5cqw;justify-content:center;margin-top:.6vh}

/* Botones */
.btn{background:var(--panel);border:2px solid var(--line);border-radius:14px;padding:1vh 2vw;
  font-size:clamp(.95rem,2.2vw,1.8rem);font-weight:700;min-height:48px}
.tctl .btn{font-size:clamp(.9rem,4cqw,1.6rem);padding:1vh 3cqw}
.btn:hover{border-color:var(--accent,var(--prep))}
.btn.primary{background:var(--accent,var(--prep));border-color:var(--accent,var(--prep));color:#04120a}
.btn.touch{border-color:var(--accent);color:var(--accent)}
.btn[hidden]{display:none}
.controls{display:flex;flex-wrap:wrap;gap:1.2vw;justify-content:center;padding:1vh 2vw 2vh;border-top:1px solid var(--line)}

/* Ajustes */
.panel{position:fixed;inset:0;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:3vmin;z-index:5}
.panel.open{display:flex}
.sheet{background:var(--panel);border:1px solid var(--line);border-radius:20px;width:min(760px,100%);max-height:94vh;overflow:auto;padding:clamp(16px,3vmin,32px)}
.sheet h2{font-size:clamp(1.3rem,3vw,2rem);margin-bottom:1.2vh}
.sheet h3{font-size:1rem;color:var(--muted);margin:2vh 0 1vh;text-transform:uppercase;letter-spacing:.08em}
.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}
.presets .btn{font-size:1.1rem;padding:12px}
.fields .wide{grid-column:span 2}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
label{display:flex;flex-direction:column;gap:6px;font-size:.95rem;color:var(--muted)}
label.check{flex-direction:row;align-items:center;gap:12px;font-size:1.1rem;color:var(--text);grid-column:1/-1}
label.check input{width:26px;height:26px;padding:0}
input,select{background:var(--bg);border:2px solid var(--line);border-radius:12px;color:var(--text);padding:12px;font-size:1.2rem;width:100%}
.row{display:flex;gap:10px;justify-content:flex-end;margin-top:2.4vh;flex-wrap:wrap}
.hist{font-size:.95rem;color:var(--muted);display:grid;gap:6px}
.hist div{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:6px}
.keys{font-size:.9rem;color:var(--muted);margin-top:1.6vh;line-height:1.5}
.err{color:var(--danger);font-size:.9rem;min-height:1.2em;margin-top:6px}
@media (prefers-reduced-motion:reduce){.bar>i{transition:none}}