/* Ajustes en móviles */
@media (max-width: 767px) {

    .products img {
        height: 100%;
        margin-bottom: 10px;
    }

}


.text-site {
    color: #D7B691;
}

.bg-site {
    background-color: #060f41;
}

.bg-site-dark {
    background-color: #D7B691;
}

.cursor-pointer {
    cursor: pointer;
}



/* Contenedor general con borde redondeado */
.stepper-container {
    border: 2px solid lightgray;
    border-radius: 50px;
    padding: 20px;
    padding-bottom: 0;
    background-color: #f8f9fa;
}

/* Distribución de los pasos */
.stepper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* Estilo de cada paso */
.step {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-bottom: 20px;
    text-align: center;
    flex: 1;
}

/* Círculo numerado */
.circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: white;
    background-color: lightgray;
    margin-bottom: 10px;
}

/* Círculo completado */
.step.completed .circle {
    background-color: rgb(160, 184, 235);
    color: white;
}

/* Círculo completado */
.step.actual .circle {
    background-color: rgb(91, 50, 50);
    color: white;
}

/* Texto al lado del círculo */
.step-label {
    font-size: 14px;
    white-space: nowrap;
}

/* Mantener forma circular en móviles */
@media (max-width: 576px) {
    .step {
        flex-direction: row;
        text-align: left;
        margin-bottom: 10px;
    }

    .circle {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .step-label {
        font-size: 12px;
        margin-left: 10px;
    }
}

.no-decoration {
    text-decoration: none !important;
    color: gray;
}



/* Estilo base de las tarjetas */
.product-card {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 8px;
    transition: border-color 0.3s ease;
}

/* Cambiar borde a marrón cuando el checkbox esté marcado */
.product-checkbox:checked+label {
    border: 2px solid rgb(91, 50, 50);
    border-radius: 8px;
}

/* Añadir el círculo en la esquina superior derecha cuando esté seleccionado */
.product-checkbox:checked+label::after {
    content: '✓';
    /* Símbolo de check */
    position: absolute;
    top: -8px;
    /* Ajusta según lo necesario */
    right: 8px;
    /* Ajusta según lo necesario */
    width: 50px;
    /* Tamaño del círculo */
    height: 50px;
    background-color: rgb(91, 50, 50);
    /* Color del círculo */
    color: white;
    /* Color del símbolo */
    display: flex;
    /* Centra el símbolo */
    align-items: center;
    /* Centra verticalmente */
    justify-content: center;
    /* Centra horizontalmente */
    font-size: 25px;
    /* Tamaño del símbolo */
    border-radius: 50%;
    /* Para hacer que sea circular */
}

/* Cambiar el cursor a pointer cuando pase por encima */
.product-card label {
    cursor: pointer;
}



.stepper-group {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 300px;
    /* Limitar el ancho del grupo de botones e input */
    margin: 0 auto;
    /* Centrar horizontalmente */
}

.custom-btn.stepper-btn {
    background-color: white;
    /* Fondo blanco */
    color: black;
    /* Texto negro */
    border: 2px solid black;
    /* Borde negro */
    font-weight: bold;
    /* Texto en negrita */
    border-radius: 50% !important;
    /* Forma circular */
    width: 40px;
    /* Ajustar el ancho */
    height: 40px;
    /* Ajustar la altura */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    /* Sin relleno */
    margin: 0 5px;
    /* Margen lateral para separación */
}

.custom-input.stepper-input {
    background-color: white;
    /* Fondo blanco */
    color: black;
    /* Texto negro */
    border: 1px solid black;
    border-radius: 10px !important;
    /* Ajuste de ancho */
    max-width: 50%;
    /* Ancho máximo del 50% */
    margin: 0 10px;
    /* Separación entre los botones */
    text-align: center;
    /* Centrar el texto */
}

.input-group-prepend,
.input-group-append {
    display: flex;
    /* Asegurar que se comporten como flex containers */
    align-items: center;
}


.check-realizado {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    background-color: lightgreen;
    /* Color de fondo verde claro */
    color: black;
    /* Color del texto negro */
    border-radius: 50%;
    /* Para hacer el fondo redondeado */
    font-size: 50px;
    /* Tamaño del símbolo check */
    font-weight: bold;
    /* Para hacer el símbolo más visible */
    text-align: center;
    /* Alineación del texto */
    line-height: 1;
    /* Ajusta la altura de la línea */
}

.check-realizado::before {
    content: '\2713';
    /* Símbolo de check (✓) */
}



/* Estilos para la pantalla transparente */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: none; /* se muestra con .show() de jQuery */
  color: #fff;
  text-align: center;
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5rem;
  padding: 20px;
}


.upload-btn {
    background-color: #060f41;
    color: white;
    padding: 3px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.upload-btn:hover {
    background-color: #caa06f;
    /* Color más oscuro en hover */
}


.check-icon {
    font-size: 1.5rem;
    color: green;
    position: absolute;
    top: 50%;
    right: 10px;
    /* Ajusta la posición horizontal */
    transform: translateY(-50%);
    visibility: hidden;
    /* Oculto por defecto */
}