/* ============================================================
   BANKING-PERSONAS.CSS — Subdominio Personas del módulo Banking
   ------------------------------------------------------------
   Estilos propios del subdominio Personas de Banking en Virgilio.
   Cubre los sub-tabs de Personas (Listado / Recaudos / Cashouts /
   Cartera), los grids de los paneles Recaudos y Cashouts, y la
   tarjeta de persona (Cliente 360).

   El chasis transversal del módulo (barra de tabs raíz
   Personas | Aliados) vive en:
     - css/modules/banking.css

   Cargar SIEMPRE después de banking.css (chasis primero).

   Autor: Johnnatan Villada / Miguel Yepes
   Creado: 2026-06-04 (separación por subdominio)
   Contenido migrado desde: css/modules/banking.css
   ============================================================ */


/* ── Sub-tabs de Personas ───────────────────────────────── */
/*
   Contenedor de los 4 sub-tabs: Listado / Recaudos / Cashouts / Cartera.
   Usa la clase .personas-subtab para cada botón.
*/

.personas-subtab-bar {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
    background: #fff;
    padding: 5px;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    width: fit-content;
}

.personas-subtab {
    padding: 8px 16px;
    border: none;
    border-radius: 7px;
    background: none;
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, font-weight 0.1s;
}

.personas-subtab:hover {
    background: #f0fdf4;
    color: #166534;
}

.personas-subtab.active {
    background: #dcfce7;
    color: #166534;
    font-weight: 600;
}


/* ── Grids de dos columnas: Recaudos y Cashouts ─────────── */
/*
   Los paneles de Recaudos y Cashouts usan grid-template-columns
   con anchos fijos en el HTML inline. Estas reglas aseguran que
   el contenido no se desborde y añaden min-width: 0 para el
   comportamiento correcto del grid.
*/

#panel-recaudos > div,
#panel-cashouts > div {
    min-width: 0;
}


/* ── Tarjeta de persona (Cliente 360) ───────────────────── */

#modal-cliente-360 {
    /* El modal ya tiene position: fixed en el HTML.
       Solo sobreescribimos lo necesario para que el scroll
       funcione bien en pantallas pequeñas. */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#modal-cliente-360 > div {
    /* Contenedor interno: máximo ancho y margen auto */
    max-width: 1100px;
    margin: 20px auto;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}