.form-control {
    color: #fff !important;
}

.form-control::placeholder {
    color: #fff;
}

.form-outline .form-control ~ .form-notch div {
    border: 1px solid #fff;
}

.form-outline .form-control:focus ~ .form-notch .form-notch-leading {
    border-color: #fff;
    box-shadow: -1px 0 0 0 var(--secondary), 0 1px 0 0 var(--secondary), 0 -1px 0 0 var(--secondary);
}

.form-outline .form-control:focus ~ .form-notch .form-notch-middle {
    border-color: #fff;
    border-top-color: #fff;
    box-shadow: 0 1px 0 0 var(--secondary);
    border-top: 1px solid transparent;
}

.form-outline .form-control:focus ~ .form-notch .form-notch-trailing {
    border-color: #fff;
    box-shadow: 1px 0 0 0 var(--secondary), 0 -1px 0 0 var(--secondary), 0 1px 0 0 var(--secondary);
}

.form-outline .form-control:focus ~ .form-label {
    color: #fff;
}

.form-label {
    color: #fff !important;
}

.form-check-label a {
    color: var(--secondary);
}

.form-check-label a:hover, .txt-register a:hover, .txt-pass a:hover, .txt-login a:hover {
    text-decoration: underline;
}

.form-check-input:checked:focus::before {
    box-shadow: 0 0 0 13px var(--secondary);
    transform: scale(1);
    transition: box-shadow .2s, transform .2s;
}

.form-check-input[type="checkbox"]:checked:focus {
    background-color: var(--secondary);
}

.form-check-input:checked:focus {
    border-color: var(--secondary);
}

.form-check-input:hover::before {
    opacity: .04;
    box-shadow: 0 0 0 13px var(--quaternary);
}

.form-check-input[type="checkbox"]:checked {
    background-image: none;
    background-color: var(--secondary);
}

.form-check-input:checked {
    border-color: var(--secondary);
}

.form-check-input:focus::before {
    opacity: .12;
    box-shadow: 0 0 0 13px var(--quaternary);
}

.form-check-input:checked {
    border-color: var(--secondary);
}

.form-check-input[type="radio"]:checked::after {
    border-color: var(--secondary) !important;
    background-color: var(--secondary) !important;
}

.form-check-input:checked:focus::before {
    box-shadow: 0 0 0 13px var(--secondary);
}

.form-check-input:checked:focus {
    border-color: var(--secondary);
}

.form-outline {
    --mdb-form-outline-select-notch-border-color: #fff;
}

.form-select {
    border: 1px solid #fff;
    background: transparent !important;
    color: #fff;
}

.form-select:focus {
    border: 1px solid #fff;
    box-shadow: none !important;
}

.form-select option {
    color: var(--secondary) !important;
    background: #fff !important;
    border: none !important;
}

.form-select option:hover {
    color: var(--secondary) !important;
}

.form-outline:has(select) {
    position: relative;
}

.form-outline:has(select)::after {
    content: '';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 0.8rem;
    height: 0.8rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
    z-index: 1;
}

.form-outline select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 2rem;
    background-image: none;
}

.invalid-feedback {
    font-size: 9px !important;
    line-height: 5px;
}

/* Centrar el label dentro del input en estado normal */
.form-outline input[type="text"] ~ .form-label,
.form-outline input[type="email"] ~ .form-label,
.form-outline input[type="password"] ~ .form-label,
.form-outline input[type="number"] ~ .form-label,
.form-outline input[type="tel"] ~ .form-label,
.form-outline input[type="url"] ~ .form-label,
.form-outline input[type="search"] ~ .form-label,
.form-outline textarea ~ .form-label {
    left: 50% !important;
    transform: translateX(-50%);
    text-align: center;
    width: auto;
}

/* Centrar el label cuando está activo (arriba del input) */
.form-outline input[type="text"]:focus ~ .form-label,
.form-outline input[type="text"].active ~ .form-label,
.form-outline input[type="email"]:focus ~ .form-label,
.form-outline input[type="email"].active ~ .form-label,
.form-outline input[type="password"]:focus ~ .form-label,
.form-outline input[type="password"].active ~ .form-label,
.form-outline input[type="number"]:focus ~ .form-label,
.form-outline input[type="number"].active ~ .form-label,
.form-outline input[type="tel"]:focus ~ .form-label,
.form-outline input[type="tel"].active ~ .form-label,
.form-outline input[type="url"]:focus ~ .form-label,
.form-outline input[type="url"].active ~ .form-label,
.form-outline input[type="search"]:focus ~ .form-label,
.form-outline input[type="search"].active ~ .form-label,
.form-outline textarea:focus ~ .form-label,
.form-outline textarea.active ~ .form-label {
    left: 50% !important;
    transform: translateX(-40%) translateY(-50%) scale(0.8);
}

/* Asegurar que el label activo no tenga fondo */
.form-outline input:focus ~ .form-label,
.form-outline input.active ~ .form-label,
.form-outline textarea:focus ~ .form-label,
.form-outline textarea.active ~ .form-label {
    background-color: transparent !important;
}

/* Opcional: centrar el texto dentro del input */
.form-outline input[type="text"],
.form-outline input[type="email"],
.form-outline input[type="password"],
.form-outline input[type="number"],
.form-outline input[type="tel"],
.form-outline input[type="url"],
.form-outline input[type="search"],
.form-outline textarea {
    text-align: center;
}

/* Border radius para los inputs */
.form-outline .form-control {
    border-radius: 8px !important;
}

/* Border radius para el notch en estado normal */
.form-outline .form-notch .form-notch-leading {
    border-radius: 8px 0 0 8px !important;
}

.form-outline .form-notch .form-notch-trailing {
    border-radius: 0 8px 8px 0 !important;
}

/* Border radius para el notch cuando está en focus */
.form-outline .form-control:focus ~ .form-notch .form-notch-leading,
.form-outline .form-control.active ~ .form-notch .form-notch-leading {
    border-radius: 8px 0 0 8px !important;
}

.form-outline .form-control:focus ~ .form-notch .form-notch-trailing,
.form-outline .form-control.active ~ .form-notch .form-notch-trailing {
    border-radius: 0 8px 8px 0 !important;
}

/* Ajustar también para select y textarea */
.form-outline select {
    border-radius: 8px !important;
}

.form-outline textarea {
    border-radius: 8px !important;
}

/* Para los form-select estándar */
.form-select {
    border-radius: 8px !important;
}

/* Solución para el autocompletado del navegador */

/* Para Chrome, Safari, Edge */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-control:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Para Firefox */
.form-control:-moz-autofill,
.form-control:-moz-autofill:hover,
.form-control:-moz-autofill:focus {
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 0 30px transparent inset !important;
}

/* Método alternativo más agresivo si el anterior no funciona */
.form-control:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    box-shadow: 0 0 0 1000px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
    background-clip: content-box !important;
}

/* Para inputs de tipo password específicamente */
input[type="password"]:-webkit-autofill,
input[type="password"]:-webkit-autofill:hover,
input[type="password"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
}

/* Para inputs de tipo email específicamente */
input[type="email"]:-webkit-autofill,
input[type="email"]:-webkit-autofill:hover,
input[type="email"]:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -webkit-text-fill-color: #fff !important;
}