/* ============================================================
   ONBOARDING-PERSONAS.CSS — Pantalla Onboarding Personas en movil
   ------------------------------------------------------------
   Todo bajo #page-onboarding. Dos capas:

   1. ESCRITORIO (fuera de @media): los estilos que antes iban en
      style="" dentro de index.html, movidos aca con los MISMOS
      valores para que el @media de abajo los pueda pisar sin
      !important. Por encima de 640px la pantalla se ve igual que
      antes. Lo unico nuevo en escritorio es .onb-filtros-toggle,
      que existe pero con display:none.

   2. BAJO 640px: encabezados de seccion compactos (titulo en una
      linea, CSV y Tarjetas/Lista como botones de icono de 44px, y
      colapsar con texto corto: "Ocultar listado") y los filtros
      de Usuarios nuevos y del Historico plegados detras de un
      boton "Filtros" con el conteo de filtros activos.

   Por que un archivo propio: css/modules/usuarios-lista.css se
   declara solo para la vista Lista de Usuarios nuevos ("Historico
   y Por Aprobar no se tocan"), css/components.css lo comparten
   todos los modulos y css/responsive.css tiene las reglas
   genericas de .section-header / .section-controls que afectan
   a otras secciones. Esta pantalla no tenia CSS propio.

   Los !important de abajo son SOLO los que contrarrestan reglas
   genericas con !important de css/responsive.css (.section-header
   en columna, .section-controls con wrap y botones/selects al 100%
   a <=480). Con #page-onboarding delante ganan por especificidad.

   Lo pinta js/usuarios.js:
     toggleSection()        -> los dos textos de .collapse-btn
     onbAlternarFiltros()   -> abre / cierra el plegado
     onbContarFiltros()     -> el numero del boton "Filtros"
   ============================================================ */


/* ── Escritorio: estilos movidos desde style="" ─────────────── */

/* Caja de filtros de Usuarios nuevos (antes inline en index.html) */
#page-onboarding .search-filters {
    padding: 20px;
    background: linear-gradient(135deg, #f0fdf4, #f0fdf4);
    border-radius: 12px;
    margin-bottom: 20px;
    border: 1px solid #c8ecc7;
}

/* Contenedor del buscador de Usuarios nuevos */
#page-onboarding .onb-filtros-buscador {
    flex: 1;
    min-width: 250px;
}

/* Lo que se pliega en Usuarios nuevos: fechas y casillas, en columna */
#page-onboarding .onb-nuevos-resto {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Lo que se pliega en el Historico: una sola fila que envuelve */
#page-onboarding .onb-hist-resto {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* Fila "Filtrar por fecha de registro / de fotos" */
#page-onboarding .onb-filtro-fechas {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* "Desde: [fecha]" y "Hasta: [fecha]" (Usuarios nuevos e Historico) */
#page-onboarding .onb-filtro-rango {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Envoltorio de las casillas de categoria. En escritorio no existe
   como caja: sus casillas siguen siendo items de la fila de siempre. */
#page-onboarding .onb-filtro-chips {
    display: contents;
}

/* El boton "Filtros" solo existe bajo 640 */
#page-onboarding .onb-filtros-toggle {
    display: none;
}

/* Texto del boton de colapsar. Lleva los dos textos y se ve uno segun el
   ancho: en escritorio "Colapsar" / "Expandir", bajo 640 "Ocultar listado"
   / "Mostrar listado" (o "metricas" en Analytics, por data-onb-que). Los
   escribe toggleSection en cada clic, igual que el marcado inicial de
   index.html. Sin aria-label a proposito: el span oculto con display:none
   no cuenta para el nombre accesible, asi que el lector de pantalla dice
   lo mismo que se ve, en los dos anchos. */
#page-onboarding .onb-colapsar-movil {
    display: none;
}


/* ── Bajo 640px ─────────────────────────────────────────────── */
@media (max-width: 640px) {

    /* Encabezado de seccion: titulo en una linea arriba y las acciones
       en una fila de iconos abajo. responsive.css lo pone en columna
       con align-items:flex-start; aca se estira para que el titulo
       pueda cortarse con puntos suspensivos en vez de desbordar. */
    #page-onboarding .section-header {
        padding: 12px 14px;
        gap: 8px !important;
        align-items: stretch !important;
    }

    #page-onboarding .section-title {
        font-size: 15px;
        gap: 8px;
        min-width: 0;
        white-space: nowrap;
    }

    #page-onboarding .section-title > i,
    #page-onboarding .section-title > .badge { flex-shrink: 0; }

    #page-onboarding .section-title > span:not(.badge) {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #page-onboarding .section-title > .badge { margin-left: 0; }

    /* La fila de acciones envuelve: el boton de colapsar lleva texto y,
       si no entra al lado de los iconos, baja a su propia fila. */
    #page-onboarding .section-controls,
    #page-onboarding .section-actions {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px !important;
    }

    /* Botones de icono (CSV, Tarjetas, Lista). El texto sigue en el DOM con
       font-size:0 y el nombre accesible lo da el aria-label del marcado. */
    #page-onboarding .section-header .btn,
    #page-onboarding .section-header .view-btn {
        width: auto !important;
        min-width: 44px;
        min-height: 44px;
        padding: 0 12px;
        margin-top: 0;
        gap: 0;
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    #page-onboarding .section-header .btn i,
    #page-onboarding .section-header .view-btn i { font-size: 16px; }

    /* Colapsar: chevron + texto corto ("Ocultar listado" / "Mostrar
       listado"). flex 1 0 auto: llena lo que quede de la fila y NUNCA se
       achica por debajo de su texto; si no entra, baja solo a su propia
       fila y ahi ocupa todo el ancho. A 360 pasa en Usuarios nuevos con la
       vista Lista (iconos + selector 10/25/50 + boton ~382px en ~310). */
    #page-onboarding .section-header .collapse-btn {
        width: auto !important;
        flex: 1 0 auto;
        min-height: 44px;
        padding: 0 12px;
        gap: 6px;
        font-size: 13px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Que texto se ve: ver el bloque de .onb-colapsar-* fuera del @media */
    #page-onboarding .onb-colapsar-esc { display: none; }
    #page-onboarding .onb-colapsar-movil { display: inline; }

    #page-onboarding .section-header .view-toggle { padding: 2px; }

    /* Selector 10 / 25 / 50 de la vista Lista: responsive.css pone los
       select de .section-controls al 100% a <=480. */
    #page-onboarding .unl-por-pagina { flex-shrink: 0; }
    #page-onboarding .unl-por-pagina select {
        width: auto !important;
        min-height: 44px;
    }


    /* ── Filtros plegables ── */

    #page-onboarding .search-filters {
        padding: 12px;
        margin-bottom: 12px;
    }

    #page-onboarding .onb-filtros-buscador {
        flex: 1 1 0;
        min-width: 0;
    }

    #page-onboarding .onb-filtros-toggle {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        min-height: 44px;
        padding: 0 14px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background: #ffffff;
        color: #374151;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    #page-onboarding .onb-filtros--abierto .onb-filtros-toggle {
        border-color: #2AA048;
        color: #1E8038;
    }

    #page-onboarding .onb-filtros-cuenta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: 10px;
        background: #2AA048;
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
    }

    /* Sin esto el display de arriba le gana al atributo hidden */
    #page-onboarding .onb-filtros-cuenta[hidden] { display: none; }

    /* min-width:0 (17/10/2026): sin él, el mínimo de contenido de las casillas
       —una fila sin wrap con scroll propio, ~1430px a 360— subía a esta caja, que
       quedaba en ~1540px y arrastraba fechas, "Mostrar usuarios" y Limpiar fuera
       de la pantalla apenas se abrían los filtros (medido en Chrome headless). */
    #page-onboarding .onb-filtros-resto { flex: 1 1 100%; min-width: 0; }

    #page-onboarding .onb-filtros:not(.onb-filtros--abierto) .onb-filtros-resto {
        display: none;
    }

    /* Fechas: el rotulo del rango arriba y Desde / Hasta en dos columnas */
    #page-onboarding .onb-filtro-fechas {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 6px 10px;
        align-items: end;
    }

    #page-onboarding .onb-filtro-fechas > i { display: none; }
    #page-onboarding .onb-filtro-fechas > span { grid-column: 1 / -1; }

    #page-onboarding .onb-filtro-rango {
        flex-direction: column;
        align-items: stretch;
        gap: 3px;
        min-width: 0;
    }

    #page-onboarding .onb-filtro-rango input {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* "Mostrar usuarios": primero de la fila y a ancho completo, con el
       rotulo arriba y los dos botones mitad y mitad */
    #page-onboarding .onb-filtro-modo {
        order: -1;
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    #page-onboarding .onb-filtro-modo > span { flex: 1 1 100%; }

    #page-onboarding .onb-filtro-modo > button {
        flex: 1 1 0;
        min-width: 0;
        white-space: nowrap;
    }

    /* Casillas de categoria: una sola fila con scroll horizontal propio
       (body y .app-content tienen overflow-x:hidden: sin este contenedor
       lo que no entra se recortaria). "Todos" queda fijo a la izquierda. */
    #page-onboarding .onb-filtro-todos { flex-shrink: 0; }

    #page-onboarding .onb-filtro-chips {
        display: flex;
        flex: 1 1 0;
        min-width: 0;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }

    #page-onboarding .onb-filtro-chips > label {
        flex-shrink: 0;
        white-space: nowrap;
    }

    #page-onboarding .onb-filtro-limpiar {
        flex: 1 1 100%;
        justify-content: center;
        min-height: 44px;
    }

    /* Historico: casilla, selects y rotulo de fecha a ancho completo;
       Desde / Hasta y Aplicar / Limpiar en dos columnas */
    #page-onboarding .onb-hist-resto {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
        align-items: end;
    }

    #page-onboarding .onb-hist-resto > i { display: none; }

    #page-onboarding .onb-hist-resto > .checkbox-reencuesta,
    #page-onboarding .onb-hist-resto > select,
    #page-onboarding .onb-hist-resto > span { grid-column: 1 / -1; }

    #page-onboarding .onb-hist-resto > select {
        width: 100%;
        min-width: 0;
    }

    #page-onboarding .onb-hist-resto > button {
        justify-content: center;
        min-height: 44px;
    }
}