/* =========================================
   ESTILOS DEL TEMPORIZADOR CIRCULAR
   ========================================= */
:root {
    --color-timer: var(--bs-rosa-logo);
}

/* Contenedor principal relativo para superponer elementos */
.timer-container {
    position: relative;
    width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f8f9fa; /* Fondo opcional, se mezcla con Bootstrap */
    border-radius: 50%;
}

/* Rotamos el SVG para que el inicio (0 grados) sea a las 12 en punto */
.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    transform: rotate(-90deg);
}

.progress-ring circle {
    fill: transparent;
    stroke-width: 4; /* Grosor de la línea, delgado como en la referencia */
}

/* Estilo del camino de fondo */
.progress-ring__track {
    stroke: #d3d3d3; /* Gris claro */
}

/* Estilo de la barra de progreso que se vacía */
.progress-ring__circle {
    stroke: var(--bs-rosa-logo); /* Color salmón/coral */
    stroke-linecap: round; /* Bordes redondeados al final de la línea */
    /* Transición suave para que no brinque bruscamente cada segundo */
    transition: stroke-dashoffset 1s linear; 
}

/* Contenedor que girará para mover el indicador circular */
.knob-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    transition: transform 1s linear; /* Debe coincidir con la transición del stroke */
}

/* El pequeño círculo indicador superpuesto en la línea */
.knob {
    position: absolute;
    top: 10px; /* Posicionado exactamente sobre el radio de 140px (150 centro - 140 radio) */
    left: 50%;
    transform: translate(-50%, -50%);
    width: 18px;
    height: 18px;
    background-color: white;
    border: 3px solid var(--bs-rosa-logo); /* Borde salmón */
    border-radius: 50%;
}

/* Estilo de los números */
.time-text {
    font-size: 5rem;
    font-weight: 300; /* Fuente delgada para un look elegante */
    color: var(--bs-rosa-logo);   /* Mismo color salmón */
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    letter-spacing: 2px;
    z-index: 2; /* Asegura que el texto esté por encima de todo */
}