/* ============================================
   ESTILOS PARA INPUTS EN TONOS DE GRISES
   Sin coloración alguna en ningún estado
   ============================================ */

/* Resetear estilos base de los inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="file"],
textarea,
select {
    /* Colores base */
    background-color: #f4f6fa;
    border: 1px solid #dde2ee;
    color: #1a1f36;

    /* Tipografía */
    font-family: Arial, sans-serif;
    font-size: 14px;

    /* Espaciado */
    padding: 0.45rem 0.7rem;
    border-radius: 6px;

    /* Transición suave */
    transition: border-color 0.2s ease;

    /* Eliminar outline por defecto del navegador */
    outline: none;

    /* Ancho completo si está en un contenedor */
    width: 100%;
    box-sizing: border-box;
}

/* Estado HOVER (cuando pasas el mouse) */
input[type="text"]:hover,
input[type="email"]:hover,
input[type="password"]:hover,
input[type="tel"]:hover,
input[type="number"]:hover,
textarea:hover,
select:hover {
    border-color: #b0bcda;
}

/* Estado FOCUS (cuando está seleccionado/activo) */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    background-color: #ffffff;
    border-color: #3d63e8;
}

/* Estado DISABLED (cuando está deshabilitado) */
input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
input[type="tel"]:disabled,
input[type="number"]:disabled,
textarea:disabled,
select:disabled {
    background-color: #eef0f6;
    border-color: #dde2ee;
    color: #6b7592;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Placeholder */
input::placeholder,
textarea::placeholder {
    color: #6b7592;
    opacity: 1;
}

input:focus::placeholder,
textarea:focus::placeholder {
    color: #9ba5bf;
}

/* AUTOFILL - Eliminar el fondo amarillo/azul que ponen los navegadores */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #f4f6fa inset !important;
    -webkit-text-fill-color: #1a1f36 !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Para Firefox */
input:-moz-autofill,
input:-moz-autofill-preview {
    background-color: #f4f6fa !important;
    color: #1a1f36 !important;
}

/* Labels */
label {
    color: #6b7592;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 6px;
    display: block;
}

/* Mensajes de error */
.error-message {
    color: #6b7592;
    font-size: 12px;
    margin-top: 4px;
    font-style: italic;
}

/* Input con error */
input.error,
textarea.error {
    border-color: #1a1f36;
    background-color: #f4f6fa;
}

/* ============================================
   REMOVER COLORES ESPECÍFICOS DEL NAVEGADOR
   ============================================ */

/* Chrome, Safari, Edge - remover highlight azul */
input:focus,
textarea:focus,
select:focus {
    outline: none;
    -webkit-tap-highlight-color: transparent;
}

/* input:focus,
textarea:focus {
    outline: 0 0 0 0.2rem rgba(1, 56, 44, 0.207) !important;
    box-shadow: 0 0 0 0.2rem rgba(1, 56, 44, 0.207) !important;
} */

/* Firefox - remover outline azul */
input::-moz-focus-inner,
textarea::-moz-focus-inner {
    border: 0;
}

/* Internet Explorer - remover X de clear */
input::-ms-clear {
    display: none;
}

/* Chrome - remover íconos de autofill */
input::-webkit-contacts-auto-fill-button,
input::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    right: 0;
}

/* ============================================
   ESTILOS PARA CHECKBOX Y RADIO (opcional)
   ============================================ */

input[type="checkbox"],
input[type="radio"] {
    accent-color: #808080;
    /* Color gris para checkbox/radio */
    cursor: pointer;
}

/* ============================================
   SELECT PERSONALIZADO
   ============================================ */

select {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 35px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

select:focus {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333333' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
}

input[type="date"],
input[type="file"] {
    max-width: 400px;
}