body, html { height: 100%; margin: 0; }
        .contenedor-principal { display: flex; flex-wrap: wrap; width: 100%; min-height: 100vh; }
        .lado-izquierdo { flex: 1; min-width: 300px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; padding: 40px; }
        .lado-izquierdo img { max-width: 100%; max-height: 100%; object-fit: contain; }
        .contenedor-derecho { flex: 1; min-width: 300px; display: flex; align-items: center; justify-content: center; padding: 40px; background-color: #ffffff; }
        .caja-formulario { background-color: #e3f2fd; padding: 30px; border-radius: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); width: 100%; max-width: 500px; }
        form { width: 100%; }
        .form-select { width: auto !important; min-width: 90px; display: inline-block; }
        .input-wrapper { display: flex; align-items: center; background: white; border: 1px solid #ced4da; border-radius: 5px; padding: 5px 15px; margin-bottom: 5px; }
        .input-wrapper i { color: #003399; margin-right: 10px; width: 20px; text-align: center; }
        .btn-custom { background-color: #003399; color: white; width: 100%; padding: 12px; font-weight: bold; border: none; }
        .label-form { font-size: 0.85rem; font-weight: bold; color: #003399; margin-bottom: 2px; display: block; }
        
        /* Transiciones Profesionales */
        .transicion { transition: opacity 0.4s ease, transform 0.4s ease; }
        .oculto { opacity: 0; transform: translateX(20px); display: none !important; }
        .visible { opacity: 1; transform: translateX(0); display: block !important; }
        .btn-custom { background-color: #0044cc; color: white; width: 100%; padding: 12px; font-weight: bold; border: none; transition: background-color 0.3s ease; }
        .btn-custom:hover { background-color: #002266 !important; color: white !important; }

        .btn-atras { background-color: #889097; color: white; width: 100%; padding: 10px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; }
        .btn-atras:hover { background-color: #5a6268 !important; color: white !important; }
        .btn-atras { background-color: #6c757d; color: white; width: 100%; padding: 10px; border: none; border-radius: 5px; cursor: pointer; transition: background-color 0.3s ease; margin-top: 10px; }
        .btn-atras:hover { background-color: #495057 !important; color: white !important; }