/* Estilos generales */
.wp-alp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999999;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.wp-alp-modal-container {
    background-color: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 568px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    position: relative;
}

.wp-alp-close-modal {
    position: absolute;
    top: 16px;
    left: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    z-index: 10;
}

.wp-alp-close-modal:hover {
    background-color: #f7f7f7;
}

.wp-alp-close-icon {
    width: 16px;
    height: 16px;
    position: relative;
}

.wp-alp-close-icon:before, .wp-alp-close-icon:after {
    content: '';
    position: absolute;
    width: 16px;
    height: 2px;
    background-color: #222;
    left: 0;
    top: 50%;
}

.wp-alp-close-icon:before {
    transform: rotate(45deg);
}

.wp-alp-close-icon:after {
    transform: rotate(-45deg);
}

.wp-alp-modal-content {
    padding: 24px;
}

.wp-alp-modal-loader {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.wp-alp-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--wp-alp-primary-color, #cbb881);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Estilos para los formularios */
.wp-alp-form-container {
    width: 100%;
}

.wp-alp-form-container h2 {
    font-size: 22px;
    font-weight: 600;
    color: #222;
    margin: 0 0 24px;
    text-align: center;
    padding-top: 24px;
}

.wp-alp-back-button {
    position: absolute;
    top: 16px;
    left: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.wp-alp-back-button:hover {
    background-color: #f7f7f7;
}

.wp-alp-back-icon {
    width: 16px;
    height: 16px;
    border-top: 2px solid #222;
    border-left: 2px solid #222;
    transform: rotate(-45deg);
}

.wp-alp-input-group {
    margin-bottom: 16px;
    position: relative;
}

.wp-alp-input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #222;
    margin-bottom: 8px;
}

.wp-alp-input {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #b0b0b0;
    border-radius: 8px;
    font-size: 16px;
    color: #222;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.wp-alp-input:focus {
    border-color: #222;
    outline: none;
}

.wp-alp-input.error {
    border-color: var(--wp-alp-primary-color, #cbb881);
}

.wp-alp-toggle-password {
    position: absolute;
    right: 12px;
    top: 38px;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #717171;
    font-weight: 500;
}

.wp-alp-disabled .wp-alp-input {
    background-color: #f7f7f7;
    color: #717171;
}

.wp-alp-button-group {
    margin-top: 24px;
}

.wp-alp-button {
    width: 100%;
    padding: 14px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: transform 0.1s;
}

.wp-alp-button:active {
    transform: scale(0.98);
}

.wp-alp-primary-button {
    background-color: var(--wp-alp-primary-color, #cbb881);
    color: white;
}

.wp-alp-primary-button:hover {
    background-color: var(--wp-alp-primary-hover, #a99969);
}

.wp-alp-secondary-button {
    background-color: #fff;
    color: #222;
    border: 1px solid #b0b0b0;
}

.wp-alp-secondary-button:hover {
    border-color: #222;
}

.wp-alp-divider {
    text-align: center;
    margin: 16px 0;
    position: relative;
}

.wp-alp-divider::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    background-color: #e4e4e4;
    z-index: 1;
}

.wp-alp-divider span {
    position: relative;
    background-color: #fff;
    padding: 0 16px;
    font-size: 14px;
    color: #717171;
    z-index: 2;
}

/* Estilos para login social */
.wp-alp-social-login {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wp-alp-social-button {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
    color: #222;
    border: 1px solid #b0b0b0;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.2s;
}

.wp-alp-social-button:hover {
    border-color: #222;
}

.wp-alp-social-button:active {
    transform: scale(0.98);
}

.wp-alp-social-icon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.google-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OCA0OCI+PHBhdGggZmlsbD0iI0ZGQzEwNyIgZD0iTTQzLjYxMSwyMC4wODNIMTEuNzZ2Ny45MzFoMTguODEzYy0wLjE4NywxLjY3MS0wLjY1NywzLjIzOC0xLjM4LDQuNjc1aDkuNTk0QzQxLjIxNiwzMC41NzYsNDMuMjcsMjYuNDc2LDQzLjYxMSwyMC4wODN6Ii8+PHBhdGggZmlsbD0iI0ZGNjY1QyIgZD0iTTEyLjcxNSwzNS42OTJjMS4yNTUsMi4wNiwzLjA5NCwzLjY4Niw1LjMwMyw0Ljc0N2w4LjM1LTcuNzM0Yy0xLjQyMS0xLjE2NC0yLjQ0OS0yLjczOS0yLjk2MS00LjcxOGgtOS41OTRDMTIuOTUsMzAuMDY1LDEyLjcxNSwzMi44NTksMTIuNzE1LDM1LjY5MnoiLz48cGF0aCBmaWxsPSIjNENBRjUwIiBkPSJNMTcuOTk5LDQzLjU0MWMyLjA2MywwLjk1Nyw0LjQ2MiwxLjUzNyw3LjAwMSwxLjUzN2MzLjM0LDAsNi4yNjYtMC45NDQsOC41NzktMi41NTMgbC04LjM1LTcuNzM0Yy0yLjI2NywxLjE5LTUuMDk5LDEuNTM4LTcuODgsMC44NDRMMTcuOTk5LDQzLjU0MXoiLz48cGF0aCBmaWxsPSIjNDI4NUY0IiBkPSJNMjUsMTFjNC4zLDAsNy44NywxLjQ0MywxMC41NzcsMy43NzVsOC4wOC03LjQ4M0MzOS4wMjQsMy4wMSwzMi41MDEsMCwyNSwwIGMtOC4yNzUsMC0xNS40NDksNC40NjktMTkuMzgxLDExLjA4N2w4LjMzMyw3LjcwNkMxNi4yNjMsMTMuNDU5LDIwLjMzNSwxMSwyNSwxMXoiLz48L3N2Zz4=');
}

.facebook-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj48cGF0aCBmaWxsPSIjMzk1MTlCIiBkPSJNMjE4Ljc3NCwxMjVjMCw1MS44ODQtNDIuNTYsOTMuOTI3LTk1LjM1NSw5My45MjdjLTUyLjUyNiwwLTk1LjE5My00Mi4wNDMtOTUuMTkzLTkzLjkyNyBjMC01Mi4wMTUsNDIuNjY3LTk0LjAyOCw5NS4xOTMtOTQuMDI4UzIxOC43NzQsNzIuOTg1LDIxOC43NzQsMTI1eiIvPjxwYXRoIGZpbGw9IiNGRkZGRkYiIGQ9Ik0xNzEuOTUsOTIuMzk5aC0xMy4yNzZjLTEuNzQsMC0yLjY3OCwwLjI0LTIuNjc4LDIuNjA4djExLjc5MWgxNS45NTR2MTcuMDU3aC0xNS45NTR2NDIuODc0aC0xOS45NjkgVjEyMy45aC0xMC41ODJ2LTE3LjEwM2gxMC41ODJWOTN2LTAuNTc2YzAtOC4zOTMsMy4wOTEtMTYuMDc2LDExLjkyLTE2LjA3Nmg2LjQ2MmM3LjM5MiwwLDExLjU5OSwxLjU4NSwxNi44NjgsNC44MTVWOTZ2LTAuMjQgYzAsMCwwLDAsMCwwTDE3MS45NSw5Mi4zOTl6Ii8+PC9zdmc+');
}

.apple-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMCAzMCI+PHBhdGggZD0iTTE4LjM3NSwxMi44NzJjLTAuMDc4LTEuNDM4LDAuNy0yLjc3NCwxLjYtMy4zMzhjMC44OTctMC42MjgsMi4wMTktMC45NDQsMy4wMjYtMC45NDRjMC4wODcsMS40NzYtMC42NjUsMi43MzgtMS41NzEsMy40Yy0wLjg3NSwwLjYwMy0yLjAwNiwwLjk5OC0zLjA1NiwwLjg4MVoiLz48cGF0aCBkPSJNMjIuOTA4LDkuNDY2YzEuNTYtMC4xNjYsMi45MzMsMC41MzEsMy44MzQsMS4zNjhjLTEuNTU4LDAuOTE4LTIuNDkxLDIuMjMzLTIuMjc3LDQuNDI1LDEuNjA0LDAuMTQ5LDIuNTMxLDEuMDQxLDMuMDk1LDIuMzQ5YzAuNTQ2LDEuMjQ5LDAuMzIzLDIuOTg0LTAuMDE5LDQuMDg4Yy0wLjM2LDEuMDcyLTAuNzgyLDEuOTg1LTEuMzksMi44MDVoLTAuMDVsLTAuMDc0LDBhMC4xMzcsMC4xMzcsMCwwLDEtLjA0OS0uMDE5Yy0wLjAwNi0uMDI2LTAuMDQ1LTAuMDE2LTAuMDI1LTAuMWExOC40MSwxOC40MSwwLDAsMCwuOTE5LTMuNzQ0Yy0wLjExNi0xLjA4OC0uNDY1LTIuMDY2LTEuMjY0LTIuOTIzLTAuNzY2LS44MjktMS42ODMtMS40MjMtMy42MDUtMS4yNjNhMi4zMDcsMi4zMDcsMCwwLDAtLjMxOS0wLjE1NEMxOS42MjcsMTQuNTMxLDE5LjMsMTIuNjk0LDIyLjkwOCw5LjQ2NloiLz48cGF0aCBkPSJNMjIuMzYzLDIyLjE1M2MtMC4wMTksMS40OTcuNTgyLDIuNDQ3LDEuNTE1LDMuMDE0YTE1Ljc0OCwxNS43NDgsMCwwLDEtMS41MTQsMS44MDMsMS43NDEsMS43NDEsMCwwLDEtMi40NDktLjEyNEExMC42OTEsMTAuNjkxLDAsMCwxLDE3Ljk3MSwyNS4wN2EzLjAyMSwzLjAyMSwwLDAsMS0yLjc3NiwxLjU3OCwyLjgzMiwyLjgzMiwwLDAsMS0yLjQzNi0xLjQyOCwzLjM0MiwzLjM0MiwwLDAsMS0uNTgyLTEuNzUzQzEyLjEyMiwyMS45MTMsMTMuNDUzLDIwLjUyMiwxNSwyMGEzLjc4NCwzLjc4NCwwLDAsMSwxLjgyNy4zODZjMC41OTEsMC4zMSwxLjA1NiwwLjc1NiwxLjY4NywwLjc1NmExLjg5NCwxLjg5NCwwLDAsMCwxLjQ1My0uODA2QzE5LjMyNCwyMC4wMDYsMTguMzY3LDE5LjQ4NiwxNy45NjUsMTlBNC4yNzcsNC4yNzcsMCwwLDEsMTYuNDk0LDE0LjksMi43NzgsMi43NzgsMCwwLDEsMTkuMDU1LDEyLjJjMS4xODYsMC4xNDQsMi4wMjUsMC45MzMsMi41MDgsMi4xMzQsMC40NjYsMS4xNjMuMzI5LDMuMzYyLDAuODEsNC4xNjNBMy41NjksMy41NjksMCwwLDEsMjIuMzYzLDIyLjE1M1oiLz48L3N2Zz4=');
}

.phone-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzIyMiIgZD0iTTYuNjIgMTAuNzljLjE0Ny42MS42MTggMS4zNyAxLjE4MiAxLjkzMi41NjUuNTYzIDEuMzI2IDEuMDM1IDEuOTM0IDEuMTguNTA0LjEyMSAxLjE0LjA5IDEuNzkzLS4wOTYuMzg0LS4xMDcuNzktLjAyMyAxLjA3LjI1N2wuMTI3LjEyOGMuMzA4LjMwOCAxLjMzOSAxLjM0IDIuMTg1IDIuMTg1LjE0Ni4xNDYuMjcuMzEzLjM2MS40ODguOTI1IDEuNzctLjQ4IDMuNTQtMi43NTUgMy41NC0xLjcwOCAwLTMuNzA3LS42MTUtNS41OTQtMi4yLTEuNzc2LTEuNDg3LTMuMzYtMy4zMDctNC41MzMtNS44MjctLjzODQtLjc0OC0uNzgtMS43MzYtLjc4LTIuNzRDMiA4LjI4NCAzLjY4NiA2LjA1NyA1LjY0NCA3LjA4M2MuMTcuMDg5LjMzNi4yMTMuNDgyLjM1OS44NTUuODU1IDEuODc1IDEuODc1IDIuMTg1IDIuMTg1bC4xMi4xMjVjLjI4Mi4yOC4zNjYuNjg2LjI2IDEuMDcxLS4xODcuNjUzLS4yMiAxLjI5LS4wOTggMS43OTR6Ii8+PC9zdmc+');
}

.email-icon {
    background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iIzIyMiIgZD0iTTQgM2gxNmEyIDIgMCAwIDEgMiAydjE0YTIgMiAwIDAgMS0yIDJINGEyIDIgMCAwIDEtMi0yVjVhMiAyIDAgMCAxIDItMnptMCAzLjNWMThoMTZWNi4zbC04IDZLNCG2LjN6bTAgMi40TDEyIDEybDgtNlY1SDR2Mi43eiIvPjwvc3ZnPg==');
}

/* Verificación de código */
.wp-alp-verification-code-container {
    display: flex;
    justify-content: space-between;
    margin: 24px 0;
}

.wp-alp-verification-digit {
    width: 40px;
    height: 48px;
    font-size: 24px;
    text-align: center;
    border: 1px solid #b0b0b0;
    border-radius: 8px;
}

.wp-alp-verification-digit:focus {
    border-color: #222;
    outline: none;
}

.wp-alp-verification-text {
    font-size: 14px;
    color: #717171;
    margin-bottom: 16px;
}

.wp-alp-resend-code {
    margin-top: 16px;
    text-align: center;
}

.wp-alp-resend-code a {
    color: #222;
    text-decoration: underline;
    font-size: 14px;
}

/* Formulario de perfil */
.wp-alp-user-info-section, 
.wp-alp-event-info-section {
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4e4e4;
}

.wp-alp-user-info-section h3,
.wp-alp-event-info-section h3 {
    font-size: 18px;
    font-weight: 600;
    color: #222;
    margin-bottom: 16px;
}

.wp-alp-help-text {
    font-size: 12px;
    color: #717171;
    margin-top: 8px;
}

.wp-alp-terms-section {
    margin-top: 16px;
    margin-bottom: 16px;
}

.wp-alp-terms-text {
    font-size: 12px;
    color: #717171;
    line-height: 1.6;
}

.wp-alp-terms-text a {
    color: #222;
    text-decoration: underline;
}

/* Mensajes de error y éxito */
.wp-alp-error-message,
.wp-alp-success-message {
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: 14px;
    text-align: center;
}

.wp-alp-error-message {
    background-color: #FFF0F0;
    color: #C13515;
    border: 1px solid #FFC7C7;
}

.wp-alp-success-message {
    background-color: #F0FFF4;
    color: #276749;
    border: 1px solid #C6F6D5;
}

/* Estilo de título modal */
.wp-alp-modal-title {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 20px 0;
    border-bottom: 1px solid #e4e4e4;
    margin: 0;
}

/* Media queries para responsividad */
@media (max-width: 768px) {
    .wp-alp-modal-container {
        width: 95%;
        max-height: 85vh;
    }
}

@media (max-width: 480px) {
    .wp-alp-verification-digit {
        width: 30px;
        height: 40px;
        font-size: 20px;
    }
}