.bixxus-step-inner {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-family: sans-serif;
    color: #444;
}
h2.bixxus-step-title {
    font-size: 1.4rem !important;
    font-weight: 600;
    margin-bottom: 1rem;
    color: #333;
}
.bixxus-subtitle {
    font-size: 1.1rem;
    font-weight: 600 !important;
    margin-bottom: 0.5rem;
    color: #4f4f4f;
}
.bixxus-highlight {
    font-weight: 600;
    color: #4b4b4b;
}
.bixxus-sale-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    margin: 0.1rem 0;
    color: #4f4f4f;
}

.bixxus-sale-label {
    font-weight: 500;
}

.bixxus-sale-value {
    font-weight: 600;
    color: #6f6f6f;
}
#bixxus-sale-summary {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 1rem;
    border: none;
    box-shadow: none;
}
#bixxus-selected-account {
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-bottom: 1rem;
    border: none;
    box-shadow: none;
}
.bixxus-card-summary {
    background: #f0f0f0;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 1rem;
    border: none;
    box-shadow: none;
}

/* Responsive para móviles */
@media (max-width: 768px) {
    #bixxus-sale-summary,
    .bixxus-card-summary {
        padding: 10px 12px;
        margin-bottom: 0.8rem;
    }
    
    #bixxus-selected-account {
        padding: 0;
        margin-bottom: 0.8rem;
    }
}
.bixxus-sale-row {
    display: flex;
    justify-content: space-between;
    margin: 0.1rem 0;
}
.bixxus-note {
    font-size: 0.85rem;
    color: #999;
    margin-top: 0.5rem;
    line-height: 1.3;
}

/* Nuevo estilo compacto para el modal de agregar cuenta bancaria */
#bixxus-add-account-overlay {
    z-index: 999999;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#bixxus-add-account-modal {
    max-height: 90vh;
    overflow-y: auto;
    padding: 30px 25px;
    z-index: 1000000;
    width: 100%;
    max-width: 460px;
}

#bixxus-add-account-modal form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

#bixxus-add-account-modal form > div {
    margin-bottom: 0.5rem;
    width: 100%;
}

/* Agrupación de campos en desktop */
@media (min-width: 768px) {
    #bixxus-add-account-modal form {
        display: block;
    }
    
    /* Contenedor para agrupar campos en la misma fila */
    .bixxus-form-row {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 0.5rem;
    }
    
    .bixxus-form-row > div {
        width: 50%;
        margin-bottom: 0;
    }
    
    /* Estilos específicos para desktop */
    #bixxus-add-account-modal .form-field,
    #bixxus-add-account-modal .select-container {
        position: relative;
        padding-top: 0;
    }
    
    #bixxus-add-account-modal label {
        position: static !important;
        transform: none !important;
        display: block !important;
        margin-bottom: 5px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        font-size: 12px !important;
        color: #444 !important;
        background-color: transparent !important;
        font-weight: 500 !important;
    }
    
    #bixxus-add-account-modal input,
    #bixxus-add-account-modal select {
        padding: 8px 10px !important;
        height: 36px !important;
    }
    
    #bixxus-add-account-modal .float-active label {
        position: static !important;
        transform: none !important;
        color: #444 !important;
        font-size: 12px !important;
    }
    
    #bixxus-add-account-modal input,
    #bixxus-add-account-modal select {
        padding-top: 0;
    }
}

@media (max-width: 767px) {
    .bixxus-form-row {
        display: block;
    }
    
    .bixxus-form-row > div {
        width: 100%;
        margin-bottom: 0.3rem;
    }
    
    #bixxus-add-account-modal form {
        gap: 10px;
    }
    
    #bixxus-add-account-modal form > div {
        margin-bottom: 0.5rem;
        position: relative;
    }
    
    #bixxus-add-account-modal .form-field {
        position: relative;
        margin-top: 10px;
    }
    
    #bixxus-add-account-modal label {
        position: absolute !important;
        left: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        transition: all 0.2s ease !important;
        margin: 0 !important;
        padding: 0 4px !important;
        font-size: 13px !important;
        color: #666 !important;
        pointer-events: none !important;
        background-color: transparent !important; /* Siempre transparente por defecto */
        z-index: 1 !important;
    }
    
    #bixxus-add-account-modal input,
    #bixxus-add-account-modal select {
        height: 38px;
        margin-bottom: 0;
        padding: 0 10px;
        display: flex;
        align-items: center; /* Mejor centrado vertical del texto */
    }
    
    /* Estilos para labels flotantes cuando el input tiene foco o contenido */
    #bixxus-add-account-modal .float-active label {
        top: 0 !important; /* Posición en la línea del borde */
        font-size: 10px !important;
        color: #0073aa !important;
        background-color: white !important; /* Fondo blanco para cortar la línea */
        transform: translateY(-50%) !important;
        z-index: 5 !important; /* Mayor z-index para estar por encima */
        padding: 0 4px !important;
        line-height: 1 !important; /* Altura de línea ajustada */
        pointer-events: none !important; /* Evita que la etiqueta interfiera con el input */
    }
    
    /* Consistencia para todos los inputs cuando tienen foco */
    #bixxus-add-account-modal input:focus + label,
    #bixxus-add-account-modal select:focus + label {
        top: 0 !important; /* Igual que arriba, en la línea del borde */
        font-size: 10px !important;
        color: #0073aa !important;
        background-color: white !important; /* Fondo blanco para cortar la línea */
        transform: translateY(-50%) !important;
        z-index: 5 !important;
        pointer-events: none !important;
    }
    
    /* Ajustes específicos para dispositivos móviles */
    @media (max-width: 768px) {
        /* Ajuste general para inputs en móvil */
        #bixxus-add-account-modal input,
        #bixxus-add-account-modal select {
            height: 40px;
            line-height: normal;
            padding: 0 10px;
            padding-top: 10px; /* Espacio para la etiqueta y centrado vertical */
        }
        
        /* Etiquetas flotantes en modo activo (arriba) */
        #bixxus-add-account-modal .float-active label {
            top: 0 !important;
            font-size: 10px !important;
            background-color: white !important; /* Fondo blanco que corta la línea */
            z-index: 5 !important;
            line-height: 1 !important;
        }
        
        /* Etiquetas cuando el input tiene foco */
        #bixxus-add-account-modal input:focus + label,
        #bixxus-add-account-modal select:focus + label {
            top: 0 !important;
            background-color: white !important;
        }
        
        /* Ajuste específico para número de documento */
        .form-field label[for="numero-documento"] {
            z-index: 5 !important; /* Mayor z-index para estar siempre visible */
        }
    }
    
    /* Para selects siempre mostrar el label arriba ya que siempre tienen valor */
    #bixxus-add-account-modal .select-container label {
        top: 0 !important; /* En la línea del borde */
        font-size: 10px !important;
        background-color: white !important; /* Blanco para cortar la línea del borde */
        transform: translateY(-50%) !important;
        pointer-events: none !important;
    }
}

#bixxus-add-account-modal h3.bixxus-step-title {
    margin-bottom: 15px;
    font-size: 17px;
    text-align: center;
    padding: 0 20px;
}

#bixxus-add-account-modal .bixxus-close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 24px;
}

#bixxus-add-account-modal label {
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 500;
}

#bixxus-add-account-modal input,
#bixxus-add-account-modal select {
    height: 36px;
    font-size: 13px;
    padding: 0 10px;
    width: 100%;
    box-sizing: border-box;
}

#bixxus-add-account-msg {
    width: 100%;
    margin-top: 0.5rem;
}

.bixxus-button-row {
    margin-top: 1rem;
}

/* Clase para el modal cuando está en modo verificación */
.verify-mode {
    height: auto !important;
    max-height: auto !important;
    position: relative !important;
    border-radius: 16px !important;
}

/* Animación para el spinner de carga */
@keyframes bixxus-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width: 480px) {
    #bixxus-add-account-overlay {
        padding: 0 !important;
        margin: 0 !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }
    
    #bixxus-add-account-modal {
        max-width: 100%;
        width: 100%;
        height: auto;
        min-height: auto;
        max-height: 95vh;
        border-radius: 8px 8px 0 0;
        padding: 30px 20px 25px;
        margin: 0;
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
    }
    
    /* Modal cuando está en modo verificación (compacto) */
    #bixxus-add-account-modal.verify-mode {
        width: 90% !important;
        max-width: 340px !important;
        height: auto !important;
        max-height: none !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        padding-top: 25px !important;
        padding-bottom: 25px !important;
        border-radius: 16px !important;
    }
    
    #bixxus-add-account-modal form {
        flex: 1;
        overflow-y: auto;
    }
    
    /* Asegurarse que cada div ocupa el 100% del ancho en móvil */
    #bixxus-add-account-modal form > div {
        width: 100% !important;
        display: block !important;
        margin-right: 0 !important;
    }
    
    #bixxus-add-account-modal .bixxus-close-btn {
        top: 10px !important;
        right: 10px !important;
        font-size: 28px !important;
    }
    
    #bixxus-add-account-modal h3.bixxus-step-title {
        margin-bottom: 20px;
        font-size: 18px;
    }
}