dialog::backdrop {
    background-color: rgb(88 88 88 / 31%) !important;
}
.pnt-mensaje-error-participando {
    color: red;
    font-size: 12px;
    display: none;
}

.pnt-mensaje-error-participando.pnt-error-activo {
    display: block;
}

/* ===================================
   MODAL DE RESULTADO (Éxito/Error)
   =================================== */

/* Overlay - Fondo oscuro */
.pnt-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    justify-content: center;
    align-items: center;
    padding: 0 12px;
    z-index: 9999;
    animation: pnt-modal-fade-in 0.3s ease-out;
}

/* Contenedor del modal */
.pnt-modal-box {
    background-color: #fff;
    padding: 32px 24px;
    border-radius: 16px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    min-width: 300px;
    max-width: 400px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: pnt-modal-slide-in 0.3s ease-out;
}

/* Contenido interno */
.pnt-modal-content {
    display: flex;
    flex-direction: column;
}

/* Header con ícono y mensaje */
.pnt-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Ícono (✓ o ✗) */
#pnt-modal-icono {
    font-size: 64px;
    font-weight: bold;
    display: block;
    margin: 0;
    line-height: 1;
}

/* Mensaje */
#pnt-modal-mensaje {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    line-height: 1.4;
}

/* Footer */
.pnt-modal-footer {
    display: flex;
    justify-content: center;
}

/* Botón cerrar en modal de resultado */
.pnt-modal-box .pnt-boton-cerrar {
    font-size: 14px;
    font-weight: 500;
    min-height: 40px;
    padding: 10px 24px;
    background-color: #019BEF;
    border-radius: 60px;
    border: none;
    color: white;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.pnt-modal-box .pnt-boton-cerrar:hover {
    background-color: #0186d1;
}

/* ===================================
   TOAST DE ERRORES
   =================================== */

.pnt-toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #f44336;
    color: white;
    padding: 16px 24px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    z-index: 10000;
    font-size: 14px;
    max-width: 350px;
    animation: pnt-toast-slide-in 0.3s ease-out;
}

.pnt-toast.pnt-hide {
    animation: pnt-toast-slide-out 0.3s ease-out;
}

/* ===================================
   ANIMACIONES
   =================================== */

@keyframes pnt-toast-slide-in {
    from {
        transform: translateX(400px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes pnt-toast-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

@keyframes pnt-modal-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes pnt-modal-slide-in {
    from {
        transform: translateY(-30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ===================================
   MODAL DE FORMULARIO (Concurso)
   =================================== */

#pnt-modal-concurso {
    margin: auto;
    padding: 0;
    border: none;
    border-radius: 16px;
}

.pnt-modal-formulario {
    background-color: #fff;
    padding: 0 16px 8px 16px;
    border-radius: 8px;
    text-align: center;
    font-family: 'Roboto';
}

.pnt-modal-formulario .pnt-modal-header {
    display: flex;
    justify-content: end;
    padding: 4px 0 0 0;
    flex-direction: unset;
}

.pnt-modal-formulario .pnt-modal-header .pnt-boton-cerrar {
    background: unset;
    border: none;
}

.pnt-modal-formulario .pnt-titulo {
    font-size: 16px;
}

.pnt-modal-formulario .pnt-show {
    color: #019df4;
    font-size: 18px;
}

.pnt-modal-formulario .pnt-pedido-datos {
    font-size: 14px;
}

.pnt-modal-formulario .pnt-input {
    width: 100%;
    margin-bottom: 4px;
    border-radius: 4px;
    border: 1px solid black;
    padding: 14px 40px 8px 12px;
    font-size: 14px;
}

.pnt-modal-formulario .pnt-input:focus-visible {
    outline-offset: 0px;
}

.pnt-modal-formulario .pnt-informacion-creativa {
    text-align: start;
    font-size: 14px;
    margin-bottom: 4px;
}

.pnt-modal-formulario .pnt-boton-participar {
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    margin-top: 8px;
    width: 100%;
    padding: 7px;
    font-size: 14px;
}

.pnt-modal-formulario .pnt-error-mensaje {
    color: red;
    font-size: 12px;
    margin-bottom: 10px;
    text-align: left;
}

.pnt-modal-formulario .pnt-input.pnt-error-input {
    border: 1px solid #d93025;
}

.pnt-modal-formulario .pnt-input.pnt-error-input:not(select):not(textarea) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23 12.0297C23 1.91393 14.617 1.0626 12.4602 1.01252C12.2035 1.00313 11.9061 1 11.6181 1H11.4178C9.21087 1.01878 1 1.77621 1 11.964C1 22.1643 9.28913 22.9624 11.496 22.9969C11.5519 22.9969 11.6085 22.9976 11.6655 22.9984L11.6658 22.9984H11.6659H11.6659C11.7238 22.9992 11.7821 23 11.8404 23C12.072 23 12.3036 22.9969 12.504 22.9937C14.6013 22.9531 23 22.1674 23 12.0297ZM21.6258 12.0266C21.6258 20.5274 15.2305 21.5634 12.4789 21.6135C12.2849 21.6166 12.0626 21.6197 11.8341 21.6197L11.5117 21.6166C8.76323 21.579 2.37109 20.5587 2.37109 11.9609C2.37109 3.38185 8.70376 2.39906 11.4271 2.37402H11.6181C11.8936 2.37402 12.1784 2.37715 12.4257 2.38341C15.1929 2.44914 21.6258 3.52269 21.6258 12.0266ZM11.9969 15.9045C11.6181 15.9045 11.3082 15.5978 11.3082 15.216V5.71987C11.3082 5.34116 11.615 5.0313 11.9969 5.0313C12.3788 5.0313 12.6855 5.33803 12.6855 5.71987V15.216C12.6824 15.5947 12.3756 15.9045 11.9969 15.9045ZM12.7826 17.6228C12.7795 17.1909 12.4289 16.8404 11.9969 16.8404C11.5649 16.8404 11.2143 17.1909 11.2143 17.6228C11.2143 18.0579 11.5649 18.4085 11.9969 18.4085H12C12.432 18.4053 12.7826 18.0548 12.7826 17.6228Z' fill='%23B22634'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 36px;
}

.pnt-modal-formulario .pnt-input.pnt-error-input:is(select) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M23 12.0297C23 1.91393 14.617 1.0626 12.4602 1.01252C12.2035 1.00313 11.9061 1 11.6181 1H11.4178C9.21087 1.01878 1 1.77621 1 11.964C1 22.1643 9.28913 22.9624 11.496 22.9969C11.5519 22.9969 11.6085 22.9976 11.6655 22.9984L11.6658 22.9984H11.6659H11.6659C11.7238 22.9992 11.7821 23 11.8404 23C12.072 23 12.3036 22.9969 12.504 22.9937C14.6013 22.9531 23 22.1674 23 12.0297ZM21.6258 12.0266C21.6258 20.5274 15.2305 21.5634 12.4789 21.6135C12.2849 21.6166 12.0626 21.6197 11.8341 21.6197L11.5117 21.6166C8.76323 21.579 2.37109 20.5587 2.37109 11.9609C2.37109 3.38185 8.70376 2.39906 11.4271 2.37402H11.6181C11.8936 2.37402 12.1784 2.37715 12.4257 2.38341C15.1929 2.44914 21.6258 3.52269 21.6258 12.0266ZM11.9969 15.9045C11.6181 15.9045 11.3082 15.5978 11.3082 15.216V5.71987C11.3082 5.34116 11.615 5.0313 11.9969 5.0313C12.3788 5.0313 12.6855 5.33803 12.6855 5.71987V15.216C12.6824 15.5947 12.3756 15.9045 11.9969 15.9045ZM12.7826 17.6228C12.7795 17.1909 12.4289 16.8404 11.9969 16.8404C11.5649 16.8404 11.2143 17.1909 11.2143 17.6228C11.2143 18.0579 11.5649 18.4085 11.9969 18.4085H12C12.432 18.4053 12.7826 18.0548 12.7826 17.6228Z' fill='%23B22634'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 24px center;
    background-size: 16px 16px;
    padding-right: 36px;
}

.pnt-modal-formulario .pnt-textarea-wrapper {
    position: relative;
}

.pnt-modal-formulario .pnt-textarea-wrapper .pnt-respuesta-usuario {
    padding-bottom: 28px;
}

.pnt-modal-formulario .pnt-contador-letras {
    position: absolute;
    bottom: 12px;
    right: 10px;
    font-size: 12px;
    color: #666;
    pointer-events: none;
}

.pnt-modal-formulario .pnt-input-wrapper {
    position: relative;
}

.pnt-modal-formulario .pnt-texto-flotante {
    position: absolute;
    top: 50%;
    left: 8px;
    transform: translateY(-50%);
    font-size: 12px;
    font-weight: 400;
    pointer-events: none;
    background-color: #fff;
    padding: 0 6px;
    line-height: 1;
    transition: all 0.2s ease;
}

.pnt-modal-formulario .pnt-input:focus + .pnt-texto-flotante,
.pnt-modal-formulario .pnt-input:not(:placeholder-shown) + .pnt-texto-flotante {
    top: 4px;
}

.pnt-modal-formulario .pnt-input.pnt-error-input + .pnt-texto-flotante {
    color: #d93025;
}

.pnt-modal-formulario .pnt-input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset;
    -webkit-text-fill-color: #000;
}

@media (width > 600px) {
    .pnt-modal-formulario {
        padding: 0 32px 16px 32px;
    }

    .pnt-modal-formulario .pnt-modal-header .pnt-boton-cerrar {
        padding-top: 8px;
    }

    .pnt-modal-formulario .pnt-show {
        font-size: 24px;
    }

    .pnt-modal-formulario .pnt-pedido-datos {
        font-size: 16px;
    }

    .pnt-modal-formulario .pnt-texto-flotante {
        font-size: 14px;
    }
}