/* =================================================================
   FormStyles.css
   Estilos específicos para controles de formulario, inputs y validaciones.
   ================================================================= */

/* 1. FIX PARA EL ICONO DEL CALENDARIO EN MODO OSCURO
   Los navegadores pintan este icono negro por defecto.
   Aquí invertimos el color para que sea blanco/claro y visible sobre el fondo gris.
*/
::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Vuelve el negro -> blanco */
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    ::-webkit-calendar-picker-indicator:hover {
        opacity: 1; /* Brilla al pasar el mouse */
        transform: scale(1.1); /* Pequeño zoom para feedback táctil */
    }

/* 2. FIX PARA EL ANCHO DEL DATETIME
   Asegura que el input ocupe el 100% de su contenedor padre (la columna del grid).
   Esto evita que se corte el texto o se desborde.
*/
input[type="date"],
input[type="datetime-local"],
input[type="time"] {
    width: 100%;
    min-width: 0; /* Crucial para flexbox/grid para evitar desbordes */
    box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
    /* Ajuste de padding para ganar espacio horizontal para el texto */
    padding-left: 0.5rem;
    padding-right: 0.2rem;
}

/* 3. REFUERZO DE ESTILOS DE INPUT (Opcional, para asegurar consistencia con tus variables)
   Esto asegura que si el navegador intenta poner estilos por defecto, nosotros ganemos.
*/
input.form-control {
    background-color: var(--color-form-background-input-reloj-de-luz);
    color: var(--color-form-text-reloj-de-luz);
    border: 1px solid var(--color-form-border-reloj-de-luz);
}

    input.form-control:focus {
        background-color: var(--color-form-background-input-focus-reloj-de-luz);
        border-color: var(--color-form-border-input-focus-reloj-de-luz);
        box-shadow: 0 0 0 0.2rem var(--color-form-border-input-focus-shadow-reloj-de-luz);
        color: var(--color-text-reloj-de-luz);
    }