/* =========================
   Temporizador - CSS completo
   ========================= */

:root{
  /* controlar tamaño máximo del círculo desde aquí */
  --circle-max-desktop: 420px;
  --circle-max-large: 520px;
}

/* Estilos base */
body{
  font-family: 'Comic Sans MS', cursive, sans-serif;
  background: linear-gradient(135deg,#ff9a9e,#fad0c4);
  margin: 0;
  overflow-x: hidden;
}

/* tarjeta */
.timer-container{
  background: rgb(123,189,250);
  border-radius: 30px;
  padding: 40px 30px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  max-width: 700px;
  margin: 5vh auto;            /* centrado vertical flexible */
  font-size: 1.2rem;
}

/* inputs / header */
h1{ font-size: 2em; margin-bottom: 18px; }
.inputs{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
input[type="number"]{ width:100px; padding:10px; border-radius:12px; border:2px solid #ffcc00; font-size:1.05rem; text-align:center; }

/* ----------------------------------------------------------
   CÍRCULO: ahora usamos una variable --circle-size para controlar
   el ancho/alto del contenedor y que todo el contenido escale.
   ---------------------------------------------------------- */
.circle-container{
  /* tamaño fluido: toma 48vmin (mitad del viewport) pero no pasa del máximo */
  --circle-size: min(48vmin, var(--circle-max-desktop));
  width: var(--circle-size);
  height: var(--circle-size);
  max-width: var(--circle-max-desktop);
  max-height: var(--circle-max-desktop);

  margin: 2.5rem auto;      /* centrado horizontal automático */
  position: relative;       /* para centrar el texto absolutamente */
  display: block;
  box-sizing: border-box;
  /* pequeño padding para que el stroke no toque el borde del contenedor */
  padding: 0;
}

/* SVG ocupando todo el contenedor */
.circle-svg{
  position: absolute;
  inset: 0;                 /* top:0; right:0; bottom:0; left:0; */
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg); /* para que el progreso empiece arriba */
  pointer-events: none;
}

/* Fondo del anillo y progreso */
.circle-bg{
  fill: none;
  stroke: #e9eef3;
  stroke-width: calc(var(--circle-size) * 0.07); /* stroke proporcional al tamaño */
  stroke-linecap: round;
}

.circle-progress{
  fill: none;
  stroke: #ffcc00;
  stroke-width: calc(var(--circle-size) * 0.07);
  stroke-linecap: round;
  stroke-dasharray: 565.48; /* valor base (se puede dejar) */
  stroke-dashoffset: 565.48;
  transition: stroke-dashoffset 0.4s linear;
}

/* ===== Texto del temporizador: CENTRADO dentro del círculo ===== */
#timer, .timer-text{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* CENTRADO perfecto */
  z-index: 5;
  color: #ffffff;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
  font-weight: 800;

  /* tamaño del texto proporcional al círculo */
  font-size: calc(var(--circle-size) * 0.13); /* ajusta 0.13 si quieres más/menos */
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* animación latido opcional */
#timer.ticking{
  animation: pulse 1s infinite;
}
@keyframes pulse{
  0%,100%{ transform: translate(-50%,-50%) scale(1); }
  50%{ transform: translate(-50%,-50%) scale(1.08); }
}

/* Botones estándar */
button{
  font-size: 1.05rem;
  padding: 10px 20px;
  margin: 10px 8px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
}
#startBtn{ background:#ff6f61; color:#fff; }
#pauseBtn{ background:#6a4c93; color:#fff; }
#resetBtn{ background:#ffd166; color:#000; }

/* ----------------------------
   MEDIA QUERIES (ajustes)
   ---------------------------- */
@media (min-width: 1100px){
  /* en pantallas muy grandes hacemos el círculo todavía mayor */
  :root{ --circle-max-desktop: var(--circle-max-large); }
  .timer-container{ max-width: 820px; padding: 60px 50px; }
  .circle-container{ /* si quieres aún más grande en desktop */
    --circle-size: min(40vmin, var(--circle-max-large));
    max-width: var(--circle-max-large);
    max-height: var(--circle-max-large);
  }
  /* texto más grande proporcionalmente */
  #timer{ font-size: calc(var(--circle-size) * 0.12); }
}

@media (max-width: 768px){
  /* móviles/tablet: reducir algunos tamaños */
  .timer-container{ padding: 28px 18px; font-size: 1rem; }
  .circle-container{ --circle-size: min(60vmin, 260px); max-width:260px; max-height:260px; margin:2rem auto; }
  #timer{ font-size: calc(var(--circle-size) * 0.14); }
  input[type="number"]{ width:72px; padding:8px; }
  button{ width: 44%; max-width: 160px; }
}

@media (max-width: 420px){
  .circle-container{ --circle-size: min(72vmin, 220px); max-width:220px; max-height:220px; }
  #timer{ font-size: calc(var(--circle-size) * 0.16); }
  button{ width: 100%; margin:8px 0; }
}