/* ============================================================
   GESTION-BACKEND.CSS — Gestión Backend en celular
   ------------------------------------------------------------
   Todo bajo #page-gestion-backend. Dos capas:

   1. ESCRITORIO (fuera de @media): estilos que antes iban en
      style="" de index.html y de los strings de js/gestion-backend.js,
      movidos aca con los MISMOS valores para que el @media de abajo
      los pueda pisar sin !important. Por encima de 640 la pantalla
      se ve igual que antes.

   2. BAJO 640px: una columna, 16px de margen lateral, barra de
      subtabs con scroll propio, buscadores a ancho completo, botones
      de 44px, grids y filas de cambio que no pasan del ancho.

   Por que un archivo propio: la sección no tenia CSS (solo el
   padding-top de css/layout.css), css/responsive.css lleva reglas
   globales y no las de un modulo, y los demas CSS de modulo son de
   otras pantallas.

   LA TARJETA DE GESTIÓN PERSONA/ALIADO (#gb-tarjeta) LA PINTA
   _gaRenderTarjeta, que es del bloque ga* que la cabecera de
   js/gestion-backend.js marca NO TOCAR (la comparte page-aliados).
   No se le agregaron clases: se la adapta desde afuera, con
   selectores dentro de #gb-tarjeta y !important para ganarle a su
   style="". Es la unica parte del archivo que lo usa.
   ============================================================ */


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

/* Contenedor de toda la sección (index.html, antes inline) */
#page-gestion-backend .gb-wrap {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Contenedor de la barra de subtabs */
#page-gestion-backend .gb-subtabs-cont {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Cada uno de los seis paneles. El display lo maneja gbCambiarSubtab
   en línea ('' o 'none'): aca no se toca. */
#page-gestion-backend .gb-panel {
    max-width: 1400px;
    margin: 32px auto 0;
    padding: 0 20px;
}

/* Cabecera de color de cada tarjeta (el degradado queda en línea) */
#page-gestion-backend .gb-card-cab {
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Zona del buscador */
#page-gestion-backend .gb-buscador {
    padding: 20px 28px;
}

/* Campo de búsqueda: crece y no baja de su mínimo */
#page-gestion-backend .gb-campo-240 { flex: 1; min-width: 240px; }
#page-gestion-backend .gb-campo-260 { flex: 1; min-width: 260px; }

/* Barras de fecha (el display lo maneja el JS en línea) */
#page-gestion-backend .gb-barra-fecha {
    padding: 12px 28px;
}

/* Zonas de resultado, tarjeta y paginación */
#page-gestion-backend .gb-zona-16      { padding: 16px 28px; }
#page-gestion-backend .gb-zona-20      { padding: 20px 28px; }
#page-gestion-backend .gb-zona-tarjeta { padding: 16px 28px 28px; }
#page-gestion-backend .gb-zona-pag     { padding: 12px 28px 20px; }

/* Bandeja de contraseña temporal (#gbct-seccion, la crea el JS) */
#page-gestion-backend .gb-zona-gbct {
    padding: 20px 28px 28px;
}

/* Grids de las tarjetas y del snapshot (antes en los strings del JS) */
#page-gestion-backend .gb-grid-240 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
#page-gestion-backend .gb-grid-260 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
#page-gestion-backend .gb-grid-280 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* Interruptores de verificación de la tarjeta de Cognito */
#page-gestion-backend .gb-toggle { flex: 1; min-width: 220px; }

/* Filas de cambio "campo · antes → después": el nombre del campo */
#page-gestion-backend .gb-cambio-campo     { min-width: 200px; }
#page-gestion-backend .gb-cambio-campo-160 { min-width: 160px; }


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

    /* PADDING: había tres capas de 20 + 20 + 28 px. La del medio
       (.gb-panel, y .gb-subtabs-cont) repetía lo que ya hace la de
       afuera y se va. Queda .gb-wrap con los 16px de margen de
       pantalla y 16px adentro de cada tarjeta, como Recepción:
       a 360 el contenido mide 360 − 2×16 − 2 de borde − 2×16 = 294. */
    #page-gestion-backend .gb-wrap { padding: 0 16px; }

    #page-gestion-backend .gb-subtabs-cont,
    #page-gestion-backend .gb-panel { padding: 0; }

    #page-gestion-backend .gb-panel { margin-top: 16px; }

    #page-gestion-backend .gb-card-cab { padding: 16px; }

    #page-gestion-backend .gb-buscador { padding: 16px; }

    #page-gestion-backend .gb-barra-fecha { padding: 12px 16px; }

    #page-gestion-backend .gb-zona-16,
    #page-gestion-backend .gb-zona-20,
    #page-gestion-backend .gb-zona-tarjeta,
    #page-gestion-backend .gb-zona-pag,
    #page-gestion-backend .gb-zona-gbct {
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Una palabra sin espacios (UUID, email, id de transacción, username)
       no puede empujar nada: se corta donde haga falta. Es heredable, así
       que vale para todo lo que pinta el JS adentro de la sección. */
    #page-gestion-backend { overflow-wrap: anywhere; }

    /* Todo botón de la sección —buscadores, filtros de fecha, tarjetas,
       bandeja de contraseñas, paginación— mide al menos 44px de alto */
    #page-gestion-backend button { min-height: 44px; }

    /* Un input dentro de una fila flex (el celular con "+57", los buscadores)
       se achica en vez de empujar la fila más allá de su caja */
    #page-gestion-backend input { min-width: 0; }

    /* Barra de subtabs: una fila con scroll horizontal propio, como la de
       Banking › Personas. gbCambiarSubtab deja la activa a la vista. */
    #page-gestion-backend .gb-subtabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    #page-gestion-backend .gb-subtabs::-webkit-scrollbar { display: none; }

    #page-gestion-backend .gb-subtabs > button {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Buscador: "Buscar por" y el campo a ancho completo; Buscar a ancho
       completo y Limpiar / CSV lado a lado debajo (en Cognito, que no
       tiene CSV, Limpiar ocupa la fila). */
    #page-gestion-backend .gb-buscador-fila { gap: 8px; }

    #page-gestion-backend .gb-buscador-tipo { flex: 1 1 100%; }
    #page-gestion-backend .gb-buscador-tipo select { width: 100%; min-height: 44px; }

    #page-gestion-backend .gb-campo-240,
    #page-gestion-backend .gb-campo-260 {
        flex: 1 1 100%;
        min-width: 0;
    }

    #page-gestion-backend .gb-campo-240 input,
    #page-gestion-backend .gb-campo-260 input { min-height: 44px; box-sizing: border-box; }

    #page-gestion-backend .gb-buscador-fila > button {
        flex: 1 1 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    #page-gestion-backend .gb-buscador-fila > button:first-of-type { flex-basis: 100%; }

    /* Grids de tarjetas: una columna que no pasa del ancho */
    #page-gestion-backend .gb-grid-240,
    #page-gestion-backend .gb-grid-260,
    #page-gestion-backend .gb-grid-280 { grid-template-columns: minmax(0, 1fr); }

    #page-gestion-backend .gb-toggle {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Filas de cambio: el campo arriba y "antes → después" debajo */
    #page-gestion-backend .gb-cambio { flex-wrap: wrap; }

    #page-gestion-backend .gb-cambio-campo,
    #page-gestion-backend .gb-cambio-campo-160 {
        flex: 1 1 100%;
        min-width: 0;
    }

    /* Cabecera de un registro: pastilla e id en dos renglones si no entran */
    #page-gestion-backend .gb-reg-cab { flex-wrap: wrap; min-width: 0; }

    /* Paginación: conteo y botones envuelven; botones de 44px */
    #page-gestion-backend .gb-pag-info,
    #page-gestion-backend .gb-pag-botones { flex-wrap: wrap; }

    #page-gestion-backend .gb-pag-botones > button { min-width: 44px; }

    #page-gestion-backend .gb-pag-info select { min-height: 44px; }

    /* Pestañas de la bandeja de contraseñas: scroll propio */
    #page-gestion-backend .gb-gbct-tabs {
        overflow-x: auto;
        scrollbar-width: none;
    }

    #page-gestion-backend .gb-gbct-tabs::-webkit-scrollbar { display: none; }

    #page-gestion-backend .gb-gbct-tabs > button {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Tarjeta de Gestión Persona/Aliado (_gaRenderTarjeta, NO TOCAR):
       se adapta desde afuera. Los !important le ganan a su style="". */
    #page-gestion-backend #gb-tarjeta > div { padding: 16px !important; }

    #page-gestion-backend #gb-tarjeta [style*="minmax(220px"],
    #page-gestion-backend #gb-tarjeta [style*="minmax(280px"] {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    #page-gestion-backend #gb-tarjeta [style*="min-width:220px"] { min-width: 0 !important; }
}