/* public/css/admin/creditos_por_fecha.css */

.date-filter-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    max-width: 600px;
    /* NUEVO: Centra el contenedor en la página */
    margin-left: auto;
    margin-right: auto;
}

.date-filter-container .InputBox {
    flex-grow: 1; /* Hace que el campo de fecha ocupe el espacio disponible */
    position: relative;
    background-color: var(--modal-info-group-input-bg);
    border-radius: 8px;
}

.date-filter-container .InputInfo {
    width: 100%;
    padding: 12px 14px;
    font-size: 0.9em;
    border: 1px solid var(--modal-info-input-border);
    border-radius: 8px;
    background-color: var(--modal-info-input-bg);
    color: var(--modal-info-input-text-color);
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.date-filter-container .InputLabel {
    position: absolute;
    left: 14px;
    top: 13px; /* Ajuste para centrado vertical */
    font-size: 0.9em;
    color: var(--modal-info-label-color);
    pointer-events: none;
    transition: all 0.2s ease-out;
    background-color: var(--modal-info-input-bg);
    padding: 0 4px;
}

/* Efecto de etiqueta flotante */
.date-filter-container .InputInfo:focus + .InputLabel,
.date-filter-container .InputInfo:valid + .InputLabel { /* :valid se usa para que la etiqueta se mantenga arriba si hay una fecha */
    top: -10px;
    left: 10px;
    font-size: 0.78em;
    color: var(--modal-info-label-active-color);
    background-color: var(--modal-info-group-input-bg);
}

.date-filter-container .InputInfo:focus {
    border-color: var(--modal-info-input-focus-border);
}


/* Estilos para el botón de consulta (sin cambios) */
.ButtonConsult {
    padding: 1rem 2.5rem;
    border-radius: 2.6rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background-image: linear-gradient(to right, var(--first-color), var(--second-color), var(--first-color));
    background-size: 200% 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.5s ease;
    color: white;
    white-space: nowrap; /* Evita que el texto se parta */
}

.ButtonConsult:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    background-position: 100% 0;
}