/* ============================================================
   BZ.UI - Formularios, filtros y controles
   Archivo: bz-form.css
   ============================================================ */

.bz-filter-panel {
    padding: 1rem;
    background: var(--bz-surface-soft);
    border: 1px solid var(--bz-border);
    border-radius: var(--bz-radius-md);
}

.bz-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1rem;
    align-items: start;
}

.bz-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.bz-label {
    display: block;
    min-height: 1.25rem;
    margin: 0;
    color: var(--bz-text-soft);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25rem;
}

/* Controles base */
.bz-input,
.bz-select,
.bz-textarea {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: .72rem .85rem;
    color: var(--bz-text);
    background-color: var(--bz-surface);
    border: 1px solid var(--bz-border-strong);
    border-radius: var(--bz-radius-sm);
    outline: none;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color var(--bz-transition), box-shadow var(--bz-transition), background-color var(--bz-transition);
}

/* Inputs y selects deben tener exactamente la misma altura */
.bz-input,
.bz-select {
    height: 48px;
    min-height: 48px;
    line-height: 1.25;
}

/* Select nativo */
.bz-select {
    padding-right: 2.5rem;
    cursor: pointer;
}

/* Textarea */
.bz-textarea {
    min-height: 110px;
    resize: vertical;
}

    /* Placeholder */
    .bz-input::placeholder,
    .bz-textarea::placeholder {
        color: var(--bz-text-muted);
        opacity: 1;
    }

    /* Focus */
    .bz-input:focus,
    .bz-select:focus,
    .bz-textarea:focus {
        border-color: var(--bz-primary);
        box-shadow: 0 0 0 3px color-mix( in srgb, var(--bz-primary) 18%, transparent );
    }

    /* Estados deshabilitados */
    .bz-input:disabled,
    .bz-select:disabled,
    .bz-textarea:disabled {
        color: var(--bz-text-muted);
        background: var(--bz-surface-muted);
        cursor: not-allowed;
        opacity: .75;
    }

/* Texto de ayuda */
.bz-help {
    color: var(--bz-text-muted);
    font-size: .78rem;
}

/* Grupos de controles */
.bz-input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

    .bz-input-group > .bz-input,
    .bz-input-group > .bz-select {
        border-radius: 0;
    }

    .bz-input-group > :first-child {
        border-radius: var(--bz-radius-sm) 0 0 var(--bz-radius-sm);
    }

    .bz-input-group > :last-child {
        border-radius: 0 var(--bz-radius-sm) var(--bz-radius-sm) 0;
    }

/* Acciones del formulario */
.bz-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ============================================================
   Compatibilidad con componentes que todavía usan Bootstrap
   dentro de un panel de filtros BZ
   ============================================================ */

.bz-filter-panel .form-control,
.bz-filter-panel .form-select {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 0;
    padding: .72rem .85rem;
    color: var(--bz-text);
    background-color: var(--bz-surface);
    border: 1px solid var(--bz-border-strong);
    border-radius: var(--bz-radius-sm);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.25;
    transition: border-color var(--bz-transition), box-shadow var(--bz-transition), background-color var(--bz-transition);
}

    .bz-filter-panel .form-control:focus,
    .bz-filter-panel .form-select:focus {
        border-color: var(--bz-primary);
        box-shadow: 0 0 0 3px color-mix( in srgb, var(--bz-primary) 18%, transparent );
    }

/* Corrige etiquetas antiguas construidas con <p> */
.bz-filter-panel p.font-weight-bold,
.bz-filter-panel p.fw-bold {
    display: block;
    min-height: 1.25rem;
    margin: 0 0 .4rem;
    color: var(--bz-text-soft);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.25rem;
}

/* Evita diferencias de alto introducidas por Bootstrap */
.bz-filter-panel select.form-control,
.bz-filter-panel select.form-select {
    padding-right: 2.5rem;
    cursor: pointer;
}

/* ============================================================
   Panel de filtros compacto
   ============================================================ */

.bz-filter-panel-compact {
    padding: .85rem 1rem;
}

/*
   Seis filtros + botón de acción.
   El botón ocupa solo el ancho necesario.
*/
.bz-filter-grid-compact {
    display: grid;
    grid-template-columns: repeat(6, minmax(150px, 1fr)) auto;
    align-items: end;
    gap: .75rem;
}

/* Reduce ligeramente el alto de los controles en filtros compactos */
.bz-filter-panel-compact .bz-input,
.bz-filter-panel-compact .bz-select,
.bz-filter-panel-compact .form-control,
.bz-filter-panel-compact .form-select {
    height: 44px;
    min-height: 44px;
    padding: .6rem .75rem;
}

/* Etiquetas más compactas */
.bz-filter-panel-compact .bz-label,
.bz-filter-panel-compact p.font-weight-bold,
.bz-filter-panel-compact p.fw-bold {
    min-height: 1.1rem;
    margin-bottom: .3rem;
    font-size: .8rem;
    line-height: 1.1rem;
}

/* Contenedor del botón dentro del grid */
.bz-filter-action {
    display: flex;
    align-items: flex-end;
}

    /* El botón mantiene el mismo alto que los filtros */
    .bz-filter-action .bz-btn {
        height: 44px;
        min-height: 44px;
        white-space: nowrap;
    }

/* Pantallas medianas */
@media (max-width: 1400px) {
    .bz-filter-grid-compact {
        grid-template-columns: repeat(3, minmax(190px, 1fr));
    }

    .bz-filter-action {
        justify-content: flex-end;
    }
}

/* Tablet */
@media (max-width: 900px) {
    .bz-filter-grid-compact {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

/* Responsive */
@media (max-width: 576px) {
    .bz-filter-grid {
        grid-template-columns: 1fr;
    }

    .bz-form-actions {
        justify-content: stretch;
    }

        .bz-form-actions > .bz-btn {
            width: 100%;
        }
    .bz-filter-grid-compact {
        grid-template-columns: 1fr;
    }

    .bz-filter-action,
    .bz-filter-action .bz-btn {
        width: 100%;
    }
}

/* ============================================================
   Filtros compactos BZ - distribución uniforme a ancho completo
   ============================================================ */

.bz-filter-panel-compact {
    padding: .85rem 1rem;
}

.bz-filter-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    align-items: start;
    gap: 1rem;
    width: 100%;
}

.bz-filter-grid-compact > .bz-field,
.bz-filter-grid-compact > * {
    min-width: 0;
    width: 100%;
}

.bz-filter-panel-compact .bz-input,
.bz-filter-panel-compact .bz-select,
.bz-filter-panel-compact .form-control,
.bz-filter-panel-compact .form-select {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: .6rem .75rem;
}

.bz-filter-panel-compact .bz-label,
.bz-filter-panel-compact p.font-weight-bold,
.bz-filter-panel-compact p.fw-bold {
    min-height: 1.1rem;
    margin: 0 0 .3rem;
    font-size: .8rem;
    line-height: 1.1rem;
}

@media (max-width: 576px) {
    .bz-filter-grid-compact {
        grid-template-columns: 1fr;
    }
}


/* ============================================================
   BZ.UI - Layout de consulta estándar (guía Usuarios Internos)
   ============================================================ */
.bz-filter-panel-guide {
    width: 100%;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

.bz-filter-grid-guide {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    align-items: end;
    width: 100%;
}

.bz-filter-panel-guide .bz-field {
    width: 100%;
}

.bz-guide-actions {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr);
    gap: 1rem;
    width: min(500px, 100%);
    margin-top: 1rem;
    margin-left: auto;
}

.bz-guide-actions .bz-btn {
    min-height: 48px;
}

@media (max-width: 768px) {
    .bz-filter-grid-guide,
    .bz-guide-actions {
        grid-template-columns: 1fr;
    }

    .bz-guide-actions {
        width: 100%;
    }
}