/* public/assets/css/components/buscador.css
   Componente: panel lateral deslizante (drawer) para el buscador/filtros de
   un listado, mas el boton compacto que lo abre. Reutilizable en cualquier
   pantalla con tabla-datos.js: el HTML de los campos de filtro es propio de
   cada pantalla, este componente solo pone el mecanismo de abrir/cerrar
   (ver js/components/buscador.js) y el estilo, en la misma gama de la app.
   Inspirado en el offcanvas de buscador de CONSULTORIA (listado LPRL), aqui
   sin Bootstrap, con componentes propios.

   El boton que abre el buscador debe ser compacto (icono + texto corto),
   para no competir visualmente con la tabla ni ocupar una fila entera. */

.app-buscador-boton {
    display: inline-flex;
    align-items: center;
    gap: var(--app-space-xs);
    min-height: 36px;
    padding: 0 var(--app-space-md);
    border-radius: var(--app-radius-sm);
    background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), var(--app-gradient);
    border: none;
    color: var(--app-on-primary);
    font-size: var(--app-text-xs);
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(var(--app-primary-rgb), 0.24);
    transition: transform .15s ease, box-shadow .15s ease;
}
.app-buscador-boton:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(var(--app-primary-rgb), 0.3); }
/* Icono minimalista de lupa (mismo lenguaje que el ojo de mostrar/ocultar
   contraseña, ver password-toggle.js): trazo fino en el color del texto
   del boton, en vez de un emoji. */
.app-buscador-boton-icono { display: block; flex: 0 0 auto; }

/* Badge con el numero de filtros activos, opcional (data-buscador-contador).
   Blanco solido (no el degradado del boton, que ya es de color): si no
   contrasta con el boton no se distingue el numero. */
.app-buscador-boton-contador {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 var(--app-space-xs);
    border-radius: 999px;
    background: var(--app-surface);
    color: var(--app-primary-dark);
    font-size: var(--app-text-2xs);
    font-weight: 700;
}
.app-buscador-boton-contador:empty,
.app-buscador-boton-contador[data-valor="0"] { display: none; }

.app-buscador-fondo {
    position: fixed;
    inset: 0;
    z-index: 2500;
    background: rgba(15, 23, 42, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.app-buscador-fondo.app-buscador-visible { opacity: 1; pointer-events: auto; }

.app-buscador-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 2600;
    width: 100vw;
    display: flex;
    flex-direction: column;
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
    transform: translateX(-100%);
    transition: transform .22s ease;
}
.app-buscador-panel.app-buscador-visible { transform: translateX(0); }
@media (min-width: 481px) {
    .app-buscador-panel { width: min(340px, 88vw); }
}

.app-buscador-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--app-space-sm);
    padding: var(--app-space-md) var(--app-space-md);
    border-bottom: 1px solid var(--app-border-soft);
}
.app-buscador-titulo { margin: 0; font-size: var(--app-text-sm); font-weight: 700; color: var(--app-text); }
.app-buscador-cerrar {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--app-text-muted);
    font-size: var(--app-text-lg);
    line-height: 1;
    padding: var(--app-space-xs);
}
.app-buscador-cerrar:hover { color: var(--app-text); }

.app-buscador-cuerpo {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: var(--app-space-md) var(--app-space-md);
}

/* Todo el contenido del buscador es mas compacto que el resto de la app
   (formularios normales como Mi perfil): es un panel de filtros, no una
   pantalla de datos, no necesita el mismo tamaño de letra/campo. */
.app-buscador-cuerpo .app-form-group { margin-bottom: var(--app-space-md); max-width: none; gap: var(--app-space-xs); }
.app-buscador-cuerpo .app-form-group label { font-size: var(--app-text-2xs); }
.app-buscador-cuerpo .app-form-group input[type="text"],
.app-buscador-cuerpo .app-form-group input[type="number"] {
    min-height: 34px;
    padding: 0 var(--app-space-sm);
    font-size: var(--app-text-xs);
}
.app-buscador-cuerpo .app-checkbox-line { font-size: var(--app-text-2xs); gap: var(--app-space-xs); }

.app-buscador-pie {
    display: flex;
    gap: var(--app-space-sm);
    padding: var(--app-space-md) var(--app-space-md);
    border-top: 1px solid var(--app-border-soft);
}
.app-buscador-pie .app-button { flex: 1; min-height: 36px; font-size: var(--app-text-xs); }

/* Selector tri-estado (p.ej. Activo: Cualquiera / Si / No), alternativa
   compacta a un <select> de 3 opciones. Un input oculto guarda el valor
   real ('' = cualquiera), y buscador.js alterna la clase "seleccionado" al
   pulsar un chip (ver data-chip-tristate). */
.app-chip-grupo { display: flex; gap: var(--app-space-xs); flex-wrap: wrap; }
.app-chip {
    padding: .28rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--app-border);
    background: var(--app-surface-soft);
    color: var(--app-text-soft);
    font-size: var(--app-text-2xs);
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.app-chip:hover { border-color: var(--app-primary); }
.app-chip.seleccionado {
    background: linear-gradient(rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.22)), var(--app-gradient);
    border-color: transparent;
    color: var(--app-on-primary);
}

/* Desplegable nativo (<details>) para elegir en que campos busca el texto
   libre (p.ej. solo Usuario, o Usuario+Correo): compacto, sin JS propio. */
.app-desplegable-campos {
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius-sm);
    background: var(--app-surface-soft);
}
.app-desplegable-campos summary {
    padding: .4rem .65rem;
    font-size: var(--app-text-2xs);
    font-weight: 600;
    color: var(--app-text);
    cursor: pointer;
    list-style: none;
}
.app-desplegable-campos summary::-webkit-details-marker { display: none; }
.app-desplegable-campos summary::after { content: '▾'; float: right; color: var(--app-text-muted); }
.app-desplegable-campos[open] summary::after { content: '▴'; }
.app-desplegable-campos-lista {
    display: flex;
    flex-direction: column;
    gap: var(--app-space-xs);
    padding: var(--app-space-xs) .75rem .7rem;
    border-top: 1px solid var(--app-border-soft);
}
/* .app-checkbox-line trae margin-top: var(--app-space-sm) de panel-form.css (pensado para
   formularios normales, para separarse del campo de arriba); aqui el
   espaciado ya lo pone el gap de la lista, asi que se resetea del todo
   (top y bottom) o se suman los dos y queda un hueco enorme. */
.app-desplegable-campos-lista .app-checkbox-line { margin: 0; line-height: 1.2; }