.campos-inputs {
    border: 2px solid #d1dae6; /* Azul muy claro (casi blanco azulado) */
    border-radius: 8px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: #1a365d !important; /* Azul marino oscuro */
    font-weight: 800 !important;
   /* padding: 12px 16px;*/
   gap: 5px;
    font-size: 1rem;
    background-color: #f8fafc; /* Blanco azulado muy claro */
    box-shadow: 0 1px 2px rgba(166, 188, 214, 0.3);
}

    /* Efecto hover - azul medio vibrante */
 .campos-inputs:hover {
        border-color: #63b3ed; /* Azul cielo medio */
        background-color: #ffffff;
        box-shadow: 0 2px 6px rgba(99, 179, 237, 0.3);
    }

    /* Focus state - azul intenso */
p .campos-inputs:focus {
        border-color: #3182ce; /* Azul fuerte */
        box-shadow: 0 0 0 3px rgba(49, 130, 206, 0.3);
        outline: none;
        background-color: #ffffff;
    }

    /* Placeholder - azul claro */
 .campos-inputs::placeholder {
        color: #90cdf4; /* Azul pastel */
        opacity: 1;
        font-weight: 400;
    }

    /* Estado deshabilitado - azul muy claro */
 .campos-inputs:disabled {
        background-color: #ebf4ff;
        color: #4299e1 !important; /* Azul desaturado */
        border-color: #bee3f8;
    }

/* Helper text - azul oscuro */
 .mud-input-helper-text {
    font-size: 0.80rem;
    margin-top: 4px;
    color: #2b6cb0; /* Azul medio oscuro */
}

/* Icono - azul intermedio */
 .mud-input-adornment-icon {
    color: red;
}

    /* Efecto hover para el icono */
    .mud-input-adornment-icon:hover {
        color: #3182ce;
        transform: scale(1.05);
    }

/* Quitar bordes inferiores de MudBlazor */
.deep .mud-input-root:hover .mud-input-slot:before,
 .mud-input-root:not(.mud-input-root-outlined) .mud-input-slot:before {
    border-bottom: none !important;
}