/* ============================================================
   USUARIOS-LISTA.CSS — Vista Lista de Usuarios Nuevos
   ------------------------------------------------------------
   Maquetado compacto del listado de Usuarios Nuevos (Onboarding
   Personas) cuando el operador elige la vista "Lista": una fila
   por persona en vez de la tarjeta completa, para que entre el
   doble o triple de gente en pantalla.

   Solo aplica a Usuarios Nuevos. La vista Tarjetas (.usuario-card
   en css/components.css), Historico y Por Aprobar no se tocan.

   Lo pinta js/usuarios.js:
     filaListaUsuarioNuevo()   -> una fila
     renderSeccion('nuevos')   -> elige fila o tarjeta segun vistaActual
     cambiarVista()            -> alterna y muestra el selector 10/25/50
     cambiarItemsPorPaginaLista()

   El contenedor #usuarios-nuevos ya recibe .list-view (display:block)
   desde css/components.css; aca solo se define la fila y su contenido.

   NOTA SOBRE COLORES — se usan los tokens de css/design-system.css
   solo donde el token vale exactamente el hex que ya usaba la
   tarjeta, para no cambiar la paleta del modulo. El resto va
   literal, con los mismos valores que la tarjeta equivalente.

   Autor: Miguel Yepes
   Creado: 2026-08-10
   ============================================================ */


/* ── Selector de personas por pagina (10 / 25 / 50) ──────────── */
/*
   Vive en .section-controls, al lado del toggle Tarjetas/Lista.
   Arranca oculto (display:none inline en el HTML) y cambiarVista()
   lo pasa a flex solo en vista Lista.
*/

.unl-por-pagina {
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--gray-600);
    white-space: nowrap;
}

.unl-por-pagina select {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: var(--radius-sm);
    font-size: 13px;
    font-family: inherit;
    color: #374151;
    background: #fff;
    cursor: pointer;
}

.unl-por-pagina select:focus {
    outline: none;
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(42, 160, 72, 0.1);
}


/* ── La fila ─────────────────────────────────────────────────── */
/*
   Grid de 5 columnas para que cedula, telefono y acciones queden
   alineadas verticalmente entre filas (se lee como una tabla, pero
   sin las limitaciones de <table> para el responsive).
*/

.unl-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) 190px 175px auto;
    align-items: center;
    gap: var(--space-3);
    padding: 7px var(--space-3);
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    background: #fff;
    margin-bottom: 5px;
    border-left: 4px solid transparent;
}

.unl-fila:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

/* Misma prioridad y colores de borde que la tarjeta:
   incompleta > reencuestado > no contesto. */
.unl-fila--incompleta   { border-left-color: #f59e0b; }
.unl-fila--reencuestado { border-left-color: #8b5cf6; }
.unl-fila--nocontesto   { border-left-color: #fbbf24; }


/* ── Columna 1: los dos checkboxes ───────────────────────────── */
/*
   G = en gestion por agente, S = standby. Se etiquetan con una letra
   porque el texto completo no cabe en una fila; el detalle va en el
   title, que es el mismo texto que muestra la tarjeta.
*/

.unl-checks {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.unl-check {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--radius-sm);
}

.unl-check:hover {
    background: #f0fdf4;
}

.unl-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    cursor: pointer;
    margin: 0;
}

.unl-check-tag {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: 0.3px;
}

/* Marcado = la letra toma el verde YaYa, para leer el estado de un
   golpe de vista recorriendo la columna. */
.unl-check input[type="checkbox"]:checked + .unl-check-tag {
    color: var(--primary-600);
}


/* ── Columna 2: nombre + badges ──────────────────────────────── */

.unl-nombre {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex-wrap: wrap;
}

.unl-nombre-txt {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.unl-badges {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.unl-badge {
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 10px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    text-transform: uppercase;
    letter-spacing: 0.2px;
}

/* Mismos colores que los badges de la tarjeta, en tamano chico. */
.unl-badge--vip           { background: linear-gradient(135deg, #f59e0b, #ef4444); color: #fff; }
.unl-badge--incompleta    { background: #f59e0b; color: #fff; }
.unl-badge--reencuestado  { background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: #fff; }
.unl-badge--nocontesto    { background: #fbbf24; color: #78350f; }
.unl-badge--aliado        { background: linear-gradient(135deg, #ff9800, #f57c00); color: #fff; }
.unl-badge--standby       { background: linear-gradient(135deg, #64748b, #475569); color: #fff; }
.unl-badge--kyc           { background: var(--primary-600); color: #fff; }


/* ── Columnas 3 y 4: cedula y telefono ───────────────────────── */

.unl-dato {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    color: #374151;
    min-width: 0;
}

.unl-dato i {
    color: #9ca3af;
    font-size: 11px;
    flex-shrink: 0;
}

.unl-dato-txt {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* .btn-copiar viene de css/components.css; aca solo se encoge para
   que no infle el alto de la fila. */
.unl-dato .btn-copiar {
    padding: 2px 5px;
    font-size: 10px;
    margin: 0;
    flex-shrink: 0;
}


/* ── Columna 5: acciones ─────────────────────────────────────── */

.unl-acciones {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: flex-end;
}

.unl-btn {
    border: none;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    padding: 5px 9px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    font-family: inherit;
    background: #f3f4f6;
    color: #374151;
    line-height: 1.4;
}

.unl-btn:hover:not(:disabled) {
    filter: brightness(0.95);
}

.unl-btn:disabled {
    background: #9ca3af;
    color: #fff;
    cursor: not-allowed;
}

/* Botón principal: hacer la encuesta. Verde como en la tarjeta;
   ambar cuando hay una encuesta a medias que continuar. */
.unl-btn--encuesta {
    background: var(--primary-600);
    color: #fff;
}

.unl-btn--continuar {
    background: #f59e0b;
    color: #fff;
}

/* Acciones secundarias: solo icono, con title. */
.unl-btn--icono {
    padding: 5px 7px;
}

.unl-btn--nocontesto { background: #fbbf24; color: #78350f; }
.unl-btn--nota       { background: var(--primary-600); color: #fff; }
.unl-btn--docs       { background: #1a73e8; color: #fff; }
.unl-btn--kyc        { background: var(--primary-600); color: #fff; }


/* ── Responsive ──────────────────────────────────────────────── */
/*
   Por debajo de 1100px el grid de 5 columnas no cabe: la fila pasa a
   flujo flexible y envuelve. Sigue siendo mas compacta que la tarjeta.
*/

@media (max-width: 1100px) {
    .unl-fila {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .unl-nombre {
        flex: 1 1 100%;
        order: 1;
    }

    .unl-checks   { order: 0; }
    .unl-dato     { order: 2; }
    .unl-acciones { order: 3; flex: 1 1 auto; }
}

@media (max-width: 560px) {
    .unl-acciones {
        justify-content: flex-start;
        flex: 1 1 100%;
    }
}