/* ===== Paleta de Alejadata.pro (tomada de alejadata.pro) =====
   fondo:        #0A0A0A   (negro principal)
   tarjeta:      #252525   (gris oscuro)
   texto:        #FFFFFF
   texto suave:  #B8C0CC   (gris)
   acento:       #FF4E1B   (naranja de marca)  -> también en index.html, círculo "ring"
   crema:        #E5E3DC   (descansos)
   Tipografías:  Inter (títulos y texto) y JetBrains Mono (tiempos), como el sitio.
*/
html, body { margin: 0; padding: 0; background: #0A0A0A; overflow: hidden; }
body { font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif; color: #FFFFFF; -webkit-user-select: none; }
#stage { position: relative; width: 1024px; height: 768px; overflow: hidden; }

#clock { position: absolute; right: 40px; top: 22px; font-family: "JetBrains Mono", Menlo, Courier, monospace; font-size: 38px; font-weight: 300; color: #B8C0CC; }
#brand { position: absolute; left: 40px; top: 20px; font-size: 40px; font-weight: 700; letter-spacing: 1px; color: #FF4E1B; }
#dot { position: absolute; left: 112px; top: 40px; width: 12px; height: 12px; border-radius: 6px; background: #B8C0CC; }
#dot.err { background: #ff3b3b; }
#demo { position: absolute; left: 140px; top: 34px; font-size: 16px; color: #E5E3DC; display: none; }

#warn { position: absolute; left: 40px; right: 40px; top: 76px; height: 46px; line-height: 46px; padding: 0 20px;
        background: #FF4E1B; color: #0A0A0A; font-size: 24px; font-weight: 600; border-radius: 10px; display: none; }

#card { position: absolute; left: 40px; top: 140px; width: 540px; height: 410px; background: #252525; border-radius: 22px; }
#avatarWrap { position: absolute; left: 28px; top: 26px; width: 84px; height: 84px; border-radius: 42px;
              background: #0A0A0A; text-align: center; overflow: hidden; }
#avatarEmoji { font-size: 46px; line-height: 84px; }
#project { position: absolute; left: 132px; top: 34px; right: 24px; font-size: 18px; color: #B8C0CC; letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
#blockTitle { position: absolute; left: 132px; top: 62px; right: 24px; font-size: 30px; font-weight: 600; line-height: 34px; height: 70px; overflow: hidden; }
#mainTask { position: absolute; left: 28px; right: 28px; top: 150px; font-size: 32px; line-height: 38px; height: 114px; overflow: hidden; color: #FFFFFF; }
#doneRow { position: absolute; left: 28px; top: 276px; display: none; }
#doneBtn { display: inline-block; padding: 10px 24px; font-size: 22px; font-weight: 600; border: 2px solid #FF4E1B; color: #FF4E1B; border-radius: 28px; }
#doneBtn:active { background: #FF4E1B; color: #0A0A0A; }
#nextBtn { display: none; margin-left: 14px; padding: 10px 24px; font-size: 22px; font-weight: 600; border: 2px solid #B8C0CC; color: #B8C0CC; border-radius: 28px; }
#nextBtn:active { background: #B8C0CC; color: #0A0A0A; }
#counter { margin-left: 16px; font-family: "JetBrains Mono", Menlo, Courier, monospace; font-size: 18px; color: #B8C0CC; }
#moreTasks { position: absolute; left: 28px; right: 28px; top: 330px; font-size: 20px; line-height: 26px; height: 52px; overflow: hidden; color: #B8C0CC; }
#range { position: absolute; right: 28px; bottom: 14px; font-family: "JetBrains Mono", Menlo, Courier, monospace; font-size: 18px; color: #B8C0CC; }

#ringWrap { position: absolute; left: 640px; top: 140px; width: 340px; height: 340px; }
#ringSvg { position: absolute; left: 0; top: 0; }
#remain { position: absolute; left: 0; top: 118px; width: 340px; text-align: center; font-family: "JetBrains Mono", Menlo, Courier, monospace; font-size: 64px; font-weight: 300; }
#pct { position: absolute; left: 0; top: 204px; width: 340px; text-align: center; font-size: 26px; color: #B8C0CC; }

#nextBar { position: absolute; left: 40px; right: 40px; top: 576px; height: 80px; line-height: 80px; padding: 0 28px;
           background: #252525; border-radius: 18px; font-size: 30px; white-space: nowrap; overflow: hidden; }
#nextLabel { color: #B8C0CC; margin-right: 14px; }
#nextTitle { font-weight: 600; }
#nextWhen { float: right; color: #FF4E1B; font-family: "JetBrains Mono", Menlo, Courier, monospace; font-size: 26px; }

#later { position: absolute; left: 40px; right: 40px; top: 672px; font-size: 20px; line-height: 28px; color: #B8C0CC; height: 56px; overflow: hidden; }
#sound { position: absolute; right: 40px; bottom: 8px; font-size: 14px; color: #7A7A7A; display: none; }

/* estado: descanso (crema en lugar de naranja) */
.isbreak #ring { stroke: #E5E3DC; }
.isbreak #pct { color: #E5E3DC; }

/* ===== Pausas para cuidarte (aviso sobre el panel) ===== */
#care { position: absolute; left: 0; top: 0; width: 1024px; height: 768px; background: rgba(10,10,10,0.96); display: none; z-index: 50; }
#careCard { position: absolute; left: 132px; top: 110px; width: 760px; height: 540px; background: #252525; border-radius: 28px; text-align: center; overflow: hidden; }
#careEmoji { margin-top: 34px; font-size: 110px; line-height: 130px; }
#careTitle { margin-top: 10px; font-size: 52px; font-weight: 700; line-height: 60px; }
#careText { margin: 10px 60px 0 60px; font-size: 30px; line-height: 38px; color: #B8C0CC; height: 80px; }
#careTimer { margin-top: 6px; font-family: "JetBrains Mono", Menlo, Courier, monospace; font-size: 60px; line-height: 70px; color: #FF4E1B; height: 70px; }
#careCount { font-size: 20px; color: #B8C0CC; height: 26px; }
#careBtn { display: inline-block; margin-top: 12px; padding: 12px 40px; font-size: 26px; font-weight: 600; border: 2px solid #FF4E1B; color: #FF4E1B; border-radius: 32px; }
#careBtn:active { background: #FF4E1B; color: #0A0A0A; }
#careBar { position: absolute; left: 0; bottom: 0; width: 760px; height: 8px; background: #0A0A0A; }
#careBarIn { width: 100%; height: 8px; background: #FF4E1B; }