/* ✅ RESET Y ESTILOS BASE CON ALTA ESPECIFICIDAD */
.emb-vendor-dashboard .emb-form-container,
.emb-vendor-dashboard .emb-form-container * {
    box-sizing: border-box !important;
}

.emb-vendor-dashboard {
    max-width: 1200px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

.emb-vendor-dashboard .emb-form-container {
    background: white !important;
    border-radius: 16px !important;  /* Bordes más redondeados */
    padding: 50px !important;        /* Más espacio interno */
    box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important;  /* Sombra más pronunciada */
    border: 1px solid #e2e8f0 !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

.emb-vendor-dashboard .emb-form-header {
    text-align: center !important;
    margin-bottom: 30px !important;
}

.emb-vendor-dashboard .emb-form-header h2 {
    color: #2d3748 !important;
    margin-bottom: 10px !important;
    font-size: 28px !important;
    font-weight: 700 !important;
}

.emb-vendor-dashboard .emb-form-header p {
    color: #718096 !important;
    font-size: 16px !important;
    margin: 0 !important;
}

/* SECCIONES */
.emb-vendor-dashboard .emb-form-section {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;  /* Más redondeado */
    padding: 30px !important;        /* Más espacio */
    margin-bottom: 25px !important;  /* Más separación */
}

.emb-vendor-dashboard .emb-form-section h4 {
    color: #2d3748 !important;
    font-size: 18px !important;
    margin: 0 0 15px 0 !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* FILAS Y GRUPOS */
.emb-vendor-dashboard .emb-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;            /* Más espacio entre campos */
    margin-bottom: 20px !important;
}

.emb-vendor-dashboard .emb-form-row:last-child {
    margin-bottom: 0 !important;
}

.emb-vendor-dashboard .emb-form-group {
    margin-bottom: 15px !important;
    display: block !important;
}

.emb-vendor-dashboard .emb-form-group:last-child {
    margin-bottom: 0 !important;
}

/* LABELS E INPUTS */
.emb-vendor-dashboard .emb-form-label {
    display: block !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    font-size: 14px !important;
    width: auto !important;
    float: none !important;
}

.emb-vendor-dashboard .emb-form-input {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    background: white !important;
    display: block !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    float: none !important;
}

.emb-vendor-dashboard .emb-form-input:focus {
    outline: none !important;
    border-color: #D10459 !important;
    box-shadow: 0 0 0 3px rgba(209, 4, 89, 0.1) !important;
}

.emb-vendor-dashboard .emb-help-text {
    font-size: 12px !important;
    color: #6b7280 !important;
    margin-top: 6px !important;
    display: block !important;
}

/* BOTONES */
.emb-vendor-dashboard .emb-primary-btn {
    background: #D10459 !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 30px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
    display: block !important;
    margin: 0 !important;
    text-align: center !important;
}

.emb-vendor-dashboard .emb-btn-large {
    padding: 16px 30px !important;
    font-size: 18px !important;
}

.emb-vendor-dashboard .emb-primary-btn:hover {
    background: #b3034d !important;
    transform: translateY(-1px) !important;
}

.emb-vendor-dashboard .emb-form-actions {
    text-align: center !important;
    margin-top: 30px !important;
    display: block !important;
}

.emb-vendor-dashboard .emb-form-footer {
    text-align: center !important;
    margin-top: 20px !important;
    padding-top: 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    display: block !important;
}

.emb-vendor-dashboard .emb-form-footer p {
    margin: 0 !important;
    color: #6b7280 !important;
}

.emb-vendor-dashboard .emb-form-footer a {
    color: #4299e1 !important;
    text-decoration: none !important;
}

.emb-vendor-dashboard .emb-form-footer a:hover {
    text-decoration: underline !important;
}

/* CHECKBOX - CORREGIDO */
.emb-vendor-dashboard .emb-checkbox-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 14px !important;
    color: #374151 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    width: auto !important;
    float: none !important;
}

.emb-vendor-dashboard .emb-checkbox-label input {
    display: none !important;
}

.emb-vendor-dashboard .emb-checkbox-checkmark {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid #cbd5e0 !important;
    border-radius: 3px !important;
    position: relative !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
    margin-top: 2px !important;
    background: white !important;
}

.emb-vendor-dashboard .emb-checkbox-label input:checked + .emb-checkbox-checkmark {
    background: #4299e1 !important;
    border-color: #4299e1 !important;
}

.emb-vendor-dashboard .emb-checkbox-label input:checked + .emb-checkbox-checkmark::after {
    content: "✓" !important;
    color: white !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    font-size: 12px !important;
    font-weight: bold !important;
}

/* PASSWORD STRENGTH */
.emb-vendor-dashboard .emb-password-strength {
    height: 4px !important;
    margin-top: 5px !important;
    border-radius: 2px !important;
    background: #e2e8f0 !important;
    transition: all 0.3s ease !important;
    display: block !important;
    width: 100% !important;
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .emb-vendor-dashboard .emb-form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    
    .emb-vendor-dashboard .emb-form-container {
        padding: 25px !important;
    }
    
    .emb-vendor-dashboard {
        padding: 0 10px !important;
        margin: 20px auto !important;
    }
}

/* ✅ FORZAR DISPLAY BLOCK PARA TODOS LOS ELEMENTOS */
.emb-vendor-dashboard div,
.emb-vendor-dashboard form,
.emb-vendor-dashboard section {
    display: block !important;
    float: none !important;
    width: auto !important;
}

/* ✅ ESTILOS PARA MENSAJES DE ERROR Y NOTIFICACIONES */
.emb-vendor-dashboard .emb-notification {
    padding: 16px 20px !important;
    border-radius: 8px !important;
    margin-bottom: 25px !important;
    border: 1px solid !important;
    font-weight: 500 !important;
    display: block !important;
}

.emb-vendor-dashboard .emb-notification-error {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
}

.emb-vendor-dashboard .emb-notification-success {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #16a34a !important;
}

.emb-vendor-dashboard .emb-notification-warning {
    background: #fffbeb !important;
    border-color: #fed7aa !important;
    color: #ea580c !important;
}

.emb-vendor-dashboard .emb-notification-message {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    margin: 0 !important;
}

.emb-vendor-dashboard .emb-notification-message::before {
    font-size: 16px !important;
}

.emb-vendor-dashboard .emb-notification-error .emb-notification-message::before {
    content: "❌" !important;
}

.emb-vendor-dashboard .emb-notification-success .emb-notification-message::before {
    content: "✅" !important;
}

.emb-vendor-dashboard .emb-notification-warning .emb-notification-message::before {
    content: "⚠️" !important;
}

/* ✅ ESTILOS PARA CAMPOS CON ERROR */
.emb-vendor-dashboard .emb-form-input.error {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
}

.emb-vendor-dashboard .emb-form-group.has-error .emb-form-label {
    color: #dc2626 !important;
}

.emb-vendor-dashboard .emb-field-error {
    color: #dc2626 !important;
    font-size: 12px !important;
    margin-top: 5px !important;
    display: block !important;
    font-weight: 500 !important;
}

/* ✅ ESTILOS PARA CONTRASEÑA DÉBIL */
.emb-vendor-dashboard .emb-password-strength.weak {
    background: #dc2626 !important;
}

.emb-vendor-dashboard .emb-password-strength.medium {
    background: #ea580c !important;
}

.emb-vendor-dashboard .emb-password-strength.strong {
    background: #16a34a !important;
}

/* ✅ ANIMACIONES PARA LLAMAR LA ATENCIÓN */
@keyframes emb-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

.emb-vendor-dashboard .emb-notification-error {
    animation: emb-shake 0.5s ease-in-out !important;
}

.emb-vendor-dashboard .emb-form-input.error {
    animation: emb-shake 0.3s ease-in-out !important;
}

/* RESPONSIVE - REEMPLAZA LA VERSIÓN ACTUAL */
@media (max-width: 768px) {
    .emb-vendor-dashboard {
        max-width: 100% !important;
        margin: 20px 0 !important;
        padding: 0 15px !important;
    }
    
    .emb-vendor-dashboard .emb-form-container {
        padding: 30px 25px !important;
        border-radius: 12px !important;
        margin: 0 !important;
    }
    
    .emb-vendor-dashboard .emb-form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-bottom: 0 !important;
    }
    
    .emb-vendor-dashboard .emb-form-group {
        margin-bottom: 20px !important;
    }
    
    .emb-vendor-dashboard .emb-form-section {
        padding: 20px !important;
        margin-bottom: 15px !important;
    }
    
    .emb-vendor-dashboard .emb-form-header h2 {
        font-size: 24px !important;
    }
    
    .emb-vendor-dashboard .emb-form-header p {
        font-size: 14px !important;
    }
    
    .emb-vendor-dashboard .emb-primary-btn {
        padding: 16px 20px !important;
        font-size: 16px !important;
    }
    
    /* ✅ ESPECÍFICO PARA SECCIÓN FISCAL EN MOBILE */
    .emb-vendor-dashboard .emb-form-section:nth-child(3) {
        border-left: 3px solid #D10459 !important; /* Borde más fino en mobile */
    }
}

@media (max-width: 480px) {
    .emb-vendor-dashboard {
        padding: 0 10px !important;
    }
    
    .emb-vendor-dashboard .emb-form-container {
        padding: 25px 20px !important;
        border-radius: 10px !important;
    }
    
    .emb-vendor-dashboard .emb-form-section {
        padding: 15px !important;
    }
    
    .emb-vendor-dashboard .emb-form-header h2 {
        font-size: 22px !important;
        flex-direction: column !important; /* Emojis y texto en columna */
        gap: 5px !important;
    }
    
    .emb-vendor-dashboard .emb-form-input {
        padding: 14px 12px !important;
        font-size: 16px !important; /* Previene zoom en iOS */
    }
    
    /* ✅ MEJORA ESPACIADO EN SECCIONES CON MUCHO CONTENIDO */
    .emb-vendor-dashboard .emb-form-section h4 {
        font-size: 16px !important;
        margin-bottom: 12px !important;
    }
}
/* ✅ ESTILOS ESPECÍFICOS PARA STRIPE CONNECT */
.emb-vendor-dashboard .emb-stripe-connect-btn {
    background: #635bff !important;
    color: white !important;
    border: none !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    justify-content: center !important;
    margin: 0 !important;
    text-decoration: none !important;
}

.emb-vendor-dashboard .emb-stripe-connect-btn:hover {
    background: #5a54d9 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(99, 91, 255, 0.3) !important;
}

.emb-vendor-dashboard .emb-stripe-connect-btn:disabled {
    background: #94a3b8 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
}

.emb-vendor-dashboard .emb-stripe-connect-btn img {
    height: 20px !important;
    width: auto !important;
    margin: 0 !important;
}

.emb-vendor-dashboard .emb-stripe-status {
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 15px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border: 1px solid !important;
}

.emb-vendor-dashboard .emb-stripe-status.pending {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #d97706 !important;
}

.emb-vendor-dashboard .emb-stripe-status.connected {
    background: #f0fdf4 !important;
    border-color: #bbf7d0 !important;
    color: #16a34a !important;
}

.emb-vendor-dashboard .emb-stripe-status.error {
    background: #fef2f2 !important;
    border-color: #fecaca !important;
    color: #dc2626 !important;
}

/* ✅ ESTILOS PARA ACORDEÓN */
.emb-vendor-dashboard .emb-accordion {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
}

.emb-vendor-dashboard .emb-accordion-header {
    background: #f8fafc !important;
    padding: 20px !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: background 0.3s ease !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    margin: 0 !important;
}

.emb-vendor-dashboard .emb-accordion-header:hover {
    background: #f1f5f9 !important;
}

.emb-vendor-dashboard .emb-accordion-header h4 {
    margin: 0 !important;
    color: #334155 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
}

.emb-vendor-dashboard .emb-accordion-icon {
    font-size: 1.2rem !important;
    font-weight: bold !important;
    color: #64748b !important;
    transition: transform 0.3s ease !important;
}

.emb-vendor-dashboard .emb-accordion-content {
    padding: 25px !important;
    background: white !important;
    border-top: 1px solid #e2e8f0 !important;
    transition: all 0.3s ease !important;
}

.emb-vendor-dashboard .emb-accordion-closed {
    display: none !important;
}

.emb-vendor-dashboard .emb-accordion-open {
    display: block !important;
}

/* ✅ ESTILOS PARA VALIDACIÓN EN TIEMPO REAL */
.emb-vendor-dashboard .emb-form-input.valid {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1) !important;
}

.emb-vendor-dashboard .emb-form-input.error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

.emb-vendor-dashboard .validation-feedback.valid {
    color: #10b981 !important;
    font-weight: 500 !important;
}

.emb-vendor-dashboard .validation-feedback.invalid {
    color: #ef4444 !important;
    font-weight: 500 !important;
}

/* ✅ RESPONSIVE PARA STRIPE CONNECT */
@media (max-width: 768px) {
    .emb-vendor-dashboard .emb-stripe-connect-btn {
        padding: 16px 20px !important;
        font-size: 14px !important;
        flex-direction: column !important;
        gap: 8px !important;
    }
    
    .emb-vendor-dashboard .emb-stripe-connect-btn img {
        height: 18px !important;
    }
    
    .emb-vendor-dashboard .emb-accordion-header {
        padding: 16px !important;
    }
    
    .emb-vendor-dashboard .emb-accordion-header h4 {
        font-size: 16px !important;
    }
    
    .emb-vendor-dashboard .emb-accordion-content {
        padding: 20px !important;
    }
}
/* Agregar esto a tu CSS */
.error-field {
    border-color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

.error-field:focus {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}
/* ✅ ESTILOS PARA EL CHECKBOX CORREGIDO */
.emb-vendor-dashboard .emb-checkbox-container:hover {
    border-color: #D10459 !important;
    background: #ffffff !important;
}

.emb-vendor-dashboard .emb-checkbox-container.checkbox-error {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
    animation: shake 0.5s ease-in-out !important;
}

.emb-vendor-dashboard #vendor_terms_checkbox:focus {
    outline: 2px solid #D10459 !important;
    outline-offset: 2px !important;
}

/* ✅ MEJORAS VISUALES */
.emb-vendor-dashboard .emb-terms-error {
    z-index: 1000 !important;
    position: relative !important;
}

.emb-vendor-dashboard .emb-checkbox-container {
    transition: all 0.3s ease !important;
}

/* ✅ RESPONSIVE PARA CHECKBOX */
@media (max-width: 768px) {
    .emb-vendor-dashboard .emb-checkbox-container {
        padding: 12px !important;
    }
    
    .emb-vendor-dashboard .emb-checkbox-container label {
        font-size: 13px !important;
    }
}