.icon-servicio {
    background: url('./images/barbershop.svg') no-repeat center center;
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
}

.icon-warning {
    background: url('./images/warning-icon.svg') no-repeat center center;
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
}

.icon-inicio {
    background: url('./images/icono-inicio.svg') no-repeat center center;
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
}

.icon-fin {
    background: url('./images/icono-fin.svg') no-repeat center center;
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
}

.icon-duracion {
    background: url('./images/icono-duracion.svg') no-repeat center center;
    background-size: 16px 16px;
    height: 16px;
    width: 16px;
}

/* Estilos para los iconos de tiempo - Versión corregida */
.iconos-tiempo-container {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 20px;
}

.icono-contenedor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.icono-circulo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

/* Estilos para el wrapper del icono */
.icono-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Estilos para las letras indicadoras */
.letra-indicador {
    position: absolute;
    top: 0;
    right: 0;
    width: 12px;
    height: 12px;
    margin: 2px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    font-weight: bold;
    color: white;
}

.letra-i {
    background-color: #2563eb;
    /* Azul */
}

.letra-f {
    background-color: #dc2626;
    /* Rojo */
}

/* Estilos para los círculos de fondo */
.icono-inicio {
    background-color: #dbeafe;
    /* Azul claro */
}

.icono-inicio svg {
    color: #2563eb;
    /* Azul */
}

.icono-fin {
    background-color: #fee2e2;
    /* Rojo claro */
}

.icono-fin svg {
    color: #dc2626;
    /* Rojo */
}

.icono-duracion {
    background-color: #dcfce7;
    /* Verde claro */
}

.icono-duracion svg {
    color: #16a34a;
    /* Verde */
}

.icono-etiqueta {
    padding: 5px;
    font-size: 12px;
    font-weight: 500;
}