/* Estilos para el modal */
/* Estilos para el modal */
.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* Oculto por defecto */

    /* Centrando con flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 700px;
    height: 80%;
    overflow: auto;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    animation-name: modalopen;
    animation-duration: 0.4s;

    /* Opcionalmente puedes agregar esto si necesitas un comportamiento más específico */
    position: relative;
    margin: auto;
}


        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

.result-item svg{
    width:24px;
}

.bar-container {
    background-color: #e0e0e0; /* Fondo gris claro para la barra vacía */
    border-radius: 5px;
    overflow: hidden;
    height: 4px;
    position: relative;
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho disponible */
}

.bar {
    background-color: #007bff; /* Color de la barra activa */
    height: 100%; /* Asegura que la barra ocupe toda la altura del contenedor */
    transition: width 0.3s ease;
    position: absolute; /* Hace que la barra se superponga sobre el contenedor */
    top: 0;
    left: 0;
    margin: 0px;
}

.vote-option-wrapper {
    padding:6px 10px;
}

.vote-option-wrapper input {
    display:none;
    box-sizing:border-box;
}

.vote-option, .vote-option-result {
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.vote-option .vote-icon, 
.vote-option-result .vote-icon{
    /*border: 2px solid transparent; */ /* Borde inicial transparente */
    border-radius: 50%; /* Hace que el borde sea circular */
    transition: all 0.3s ease; /* Animación para el borde */
    object-fit:cover;
}
/*
.vote-option-wrapper input:checked + .vote-option .vote-icon, 
.vote-option-wrapper input:checked + .vote-option-result .vote-icon   {
    border: 2px solid transparent;
    border-radius: 50%;
}
*/



.vote-option .vote-icon, 
.vote-option-result .vote-icon{
    width:36px;
    height:36px;
}

.vote-option svg, 
.vote-option-result svg {
    width:18px;
    height:18px;
    fill:#331d0d;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon svg{
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-name: headShake;
    animation-name: headShake;
    animation-duration:1s;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.hate{
    background: rgb(255,67,67);
    background: linear-gradient(90deg, rgba(255,67,67,1) 0%, rgba(255,166,0,1) 100%);
    transition: all 0.3s ease; 
}

.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.like{
    background:#2a77f2;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.like svg{
    fill:#fff;
}

.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.love{
    background:#f44747;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.love svg{
    fill:#fff;
}

.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.neutral{
    background:#222;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.neutral svg{
    fill:#fff;
}

.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.no_like{
    background:#222;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.no_like svg{
    fill:#fff;
}

.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.winter{
    background:#67a2f9;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.winter svg{
    fill:#fff;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.spring{
    background:#6cb23e;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.spring svg{
    fill:#fff;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.summer{
    background:#ef7100;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.summer svg{
    fill:#fff;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.autumn{
    background:#ce4a07;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.autumn svg{
    fill:#fff;
}

.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.day{
    background:#f6c038;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.day svg{
    fill:#fff;
}

.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.night{
    background:#03255b;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.night svg{
    fill:#fff;
}

.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.have,
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.had,
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.want{
    background:#00cb7a;
}
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.have svg,
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.had svg,
.vote-option-wrapper input:checked + .vote-option-style-icon .vote-icon.want svg{
    fill:#fff;
}

@media (max-width: 768px){
    .modal-content {
        padding: 0px;
        width:100%;
        max-width: 100%;
        height: 100%;
        overflow-y:auto;
    }
}
@media (max-width: 640px) {
    .vote-option-result span, .vote-option-result span {
        font-size:10px;
        display: inline-block;     
        max-width: 8ch;            
        overflow: hidden;          
        white-space: nowrap;        
        text-overflow: ellipsis;     
    }
    
}
@media (max-width: 440px) {
    .vote-option-result span {
        display:none
    }
}

@media (min-width: 640px) {
    .vote-option-wrapper {
        padding:1rem;
    }
}


.poll-slider {
    width: 100%;
    margin-top: 10px;
}

.range-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 5px;
}

.range-label {
    font-size: 12px;
    text-align: center;
    width: calc(100% / 5);
}
.poll-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #ccc, #ccc);
    outline: none;
    transition: background 0.3s ease;
    margin-top: 10px;
    margin-bottom: 20px;
}

.poll-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top:-5px;
    background: #007bff;
    border-radius: 50%;
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, transform 0.3s ease;
}

.poll-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    margin-top:-5px;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, transform 0.3s ease;
}

.poll-slider::-ms-thumb {
    width: 20px;
    height: 20px;
    background: #007bff;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    transition: background 0.3s ease, transform 0.3s ease;
}

.poll-slider::-webkit-slider-thumb:hover,
.poll-slider::-moz-range-thumb:hover,
.poll-slider::-ms-thumb:hover {
    background: #0056b3;
    transform: scale(1.2);
}

.poll-slider::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: linear-gradient(to right, #007bff, #ccc);
    border-radius: 5px;
}

.poll-slider::-moz-range-track {
    width: 100%;
    height: 10px;
    cursor: pointer;
    background: linear-gradient(to right, #007bff, #ccc);
    border-radius: 5px;
}

.poll-slider::-ms-track {
    width: 100%;
    height: 12px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}

.poll-slider::-ms-fill-lower {
    background: #007bff;
    border-radius: 5px;
}

.poll-slider::-ms-fill-upper {
    background: #ccc;
    border-radius: 5px;
}

.slider-label {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #007bff;
    margin-top: 10px;
    transition: opacity 0.3s ease;
    opacity: 1;
}
.field-group-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 20px; /* Espacio entre las columnas */
    margin-bottom: 20px;
}

.field-group {
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slider-label {
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #007bff;
    margin-top: 10px;
    transition: opacity 0.3s ease;
    opacity: 1;
}
.poll-slider:disabled {
    cursor: not-allowed;
    opacity: 0.5; /* Opción: Reduce la opacidad para indicar que está deshabilitado */
}

input:disabled + label {
    cursor: not-allowed;
}

.result-title > img{
    width:24px;
    height:24px;
}
.result-option p{
    font-size:14px;
}
/* Estilos responsivos */
@media (max-width: 768px) {
    .field-group-wrapper {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }
}

        @keyframes modalopen {
            from {opacity: 0;}
            to {opacity: 1;}
        }

        /* Cambiar el fondo de las notificaciones */
.toast-success {
    background-color: #28a745 !important;
    color: #ffffff !important;
    border: 2px solid #218838;
    border-radius: 8px;
    box-shadow: none!important
}

.toast-error {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border: 2px solid #c82333;
    border-radius: 8px;
    box-shadow: none!important
}

.toast-warning {
    background-color: #ffc107 !important;
    color: #212529 !important;
    border: 2px solid #e0a800;
    border-radius: 8px;
    box-shadow: none!important
}

.toast-info {
    background-color: #17a2b8 !important;
    color: #ffffff !important;
    border: 2px solid #138496;
    border-radius: 8px;
    box-shadow: none!important
}

@-webkit-keyframes pulse {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.05, 1.05, 1.05);
      transform: scale3d(1.05, 1.05, 1.05);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }
  @keyframes pulse {
    from {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  
    50% {
      -webkit-transform: scale3d(1.05, 1.05, 1.05);
      transform: scale3d(1.05, 1.05, 1.05);
    }
  
    to {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }


  @-webkit-keyframes headShake {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  
    6.5% {
      -webkit-transform: translateX(-6px) rotateY(-9deg);
      transform: translateX(-6px) rotateY(-9deg);
    }
  
    18.5% {
      -webkit-transform: translateX(5px) rotateY(7deg);
      transform: translateX(5px) rotateY(7deg);
    }
  
    31.5% {
      -webkit-transform: translateX(-3px) rotateY(-5deg);
      transform: translateX(-3px) rotateY(-5deg);
    }
  
    43.5% {
      -webkit-transform: translateX(2px) rotateY(3deg);
      transform: translateX(2px) rotateY(3deg);
    }
  
    50% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }
  @keyframes headShake {
    0% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  
    6.5% {
      -webkit-transform: translateX(-6px) rotateY(-9deg);
      transform: translateX(-6px) rotateY(-9deg);
    }
  
    18.5% {
      -webkit-transform: translateX(5px) rotateY(7deg);
      transform: translateX(5px) rotateY(7deg);
    }
  
    31.5% {
      -webkit-transform: translateX(-3px) rotateY(-5deg);
      transform: translateX(-3px) rotateY(-5deg);
    }
  
    43.5% {
      -webkit-transform: translateX(2px) rotateY(3deg);
      transform: translateX(2px) rotateY(3deg);
    }
  
    50% {
      -webkit-transform: translateX(0);
      transform: translateX(0);
    }
  }