/* ================================================================
   Tokeniza — Componentes de tabla y gestión de usuarios
   ================================================================ */

/* ── Toolbar de tabla ───────────────────────────────────────── */
.tz-table-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    flex-wrap: wrap;
    background: var(--bg-surface);
}

.tz-search-input {
    flex: 1;
    min-width: 180px;
    padding-left: 12px !important;
}

.tz-select-sm {
    padding: 8px 28px 8px 10px;
    font-size: 12px;
    font-family: inherit;
    color: var(--text-secondary);
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    outline: none;
    cursor: pointer;
    min-width: 140px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.tz-select-sm:focus {
    background-color: var(--bg-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
    color: var(--text-primary);
}

/* ── Footer de tabla ────────────────────────────────────────── */
.tz-table-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-subtle);
    background: var(--bg-surface-2);
}

/* ── Celda de usuario ───────────────────────────────────────── */
.tz-user-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.tz-user-name  { font-weight: 500; font-size: 13px; color: var(--text-primary); }
.tz-user-email { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ── Avatar pequeño ─────────────────────────────────────────── */
.tz-avatar-sm {
    width: 28px;
    height: 28px;
    font-size: 10px;
    font-weight: 700;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Acciones de fila ───────────────────────────────────────── */
.tz-row-actions { display: flex; gap: 4px; }

.tz-action-btn {
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    padding: 4px 7px;
    cursor: pointer;
    color: var(--text-muted);
    font-size: 13px;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.tz-action-btn:hover {
    background: var(--bg-surface-2);
    color: var(--color-primary);
    border-color: var(--color-primary-border);
}
.tz-action-btn.tz-action-danger:hover {
    background: rgba(185,28,28,0.06);
    color: var(--color-danger);
    border-color: rgba(185,28,28,0.2);
}

/* ── Estado vacío ───────────────────────────────────────────── */
.tz-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-muted);
}
.tz-empty-state i { font-size: 36px; display: block; margin-bottom: 10px; opacity: 0.4; }
.tz-empty-state p { font-size: 13px; }

/* ── Stats row ──────────────────────────────────────────────── */
.tz-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.tz-stat-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
}
.tz-stat-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    margin-bottom: 4px;
}
.tz-stat-label { font-size: 11px; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }
.tz-stat-success { color: var(--color-success); }

/* ── KPI con icono (variante estándar opt-in: .tz-kpi) ──────────
   Card en fila: [icono] [valor(es) + etiqueta]. Las vistas sin
   .tz-kpi siguen igual (no se tocan). */
.tz-stat-card.tz-kpi {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 14px 16px;
    transition: box-shadow .15s ease, border-color .15s ease;
}
.tz-stat-card.tz-kpi:hover {
    border-color: var(--border-default);
    box-shadow: 0 2px 10px rgba(16,33,52,.07);
}
/* Cabecera: icono + título */
.tz-kpi-head { display: flex; align-items: center; gap: 10px; }
.tz-kpi-title {
    font-size: 12.5px; font-weight: 600; color: var(--text-secondary);
    text-transform: none; letter-spacing: 0; line-height: 1.2;
}
.tz-kpi .tz-stat-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Mensaje inferior (suave, no mayúsculas) */
.tz-kpi .tz-stat-label { text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; color: var(--text-muted); }
/* Valor: número grande, código de moneda pequeño y discreto */
.tz-kpi .tz-stat-value { font-size: 23px; line-height: 1.12; margin-bottom: 0; }
.tz-kpi .tz-stat-value.tz-stat-value-sm { font-size: 17px; }
.tz-ccy { font-size: 12px; font-weight: 600; color: var(--text-muted); margin-left: 1px; }

.tz-stat-icon {
    width: 44px; height: 44px; flex: 0 0 44px;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    background: var(--bg-surface-2);
    color: var(--text-secondary);
}
/* En la cabecera del KPI el icono es más compacto */
.tz-kpi-head .tz-stat-icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    border-radius: 9px; font-size: 16px;
}
.tz-stat-icon.tone-accent  { background: rgba(46,109,164,.12);  color: var(--color-accent); }
.tz-stat-icon.tone-success { background: rgba(26,127,90,.12);   color: var(--color-success); }
.tz-stat-icon.tone-warning { background: rgba(146,97,10,.12);   color: var(--color-warning); }
.tz-stat-icon.tone-danger  { background: rgba(185,28,28,.12);   color: var(--color-danger); }
.tz-stat-icon.tone-indigo  { background: rgba(91,91,214,.12);   color: #5b5bd6; }
.tz-stat-warning { color: var(--color-warning); }
.tz-stat-danger  { color: var(--color-danger); }

/* ── Modal footer ───────────────────────────────────────────── */
.tz-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--border-subtle);
}

/* ── Invite result ──────────────────────────────────────────── */
.tz-invite-result {
    margin-top: 16px;
    padding: 14px;
    background: var(--bg-surface-2);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-subtle);
}
.tz-invite-link {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
    margin-bottom: 6px;
}
.tz-invite-link code {
    font-size: 11px;
    color: var(--color-primary);
    word-break: break-all;
    flex: 1;
    background: var(--bg-surface);
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
}
.tz-btn-xs { padding: 4px 8px; font-size: 11px; }

/* ── Inputs sin icono (modales) ─────────────────────────────── */
.tz-modal .tz-input {
    padding-left: 12px;
    width: 100%;
}
.tz-modal .tz-field { margin-bottom: 14px; }

/* ── Page header con botones inline ────────────────────────── */
.tz-page-header > div:last-child {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Search wrap ────────────────────────────────────────────── */
.tz-search-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 220px;
    max-width: 340px;
    background: var(--bg-surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 0 10px;
    gap: 7px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.tz-search-wrap:focus-within {
    background: var(--bg-surface);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.tz-search-icon {
    color: var(--text-muted);
    font-size: 13px;
    pointer-events: none;
    flex-shrink: 0;
    line-height: 1;
}
.tz-search-wrap .tz-input {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 8px 0;
    font-size: 13px;
    flex: 1;
    min-width: 0;
    outline: none;
}

/* ── Header actions ─────────────────────────────────────────── */
.tz-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Span rojo requerido (sin inline style) ─────────────────── */
.tz-required { color: var(--color-danger); margin-left: 2px; }

/* ── Tenant icon ────────────────────────────────────────────── */
.tz-tenant-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ── Users count ────────────────────────────────────────────── */
.tz-users-count {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-secondary);
}
.tz-users-count i { color: var(--text-muted); font-size: 12px; }

/* ── Action success ─────────────────────────────────────────── */
.tz-action-btn.tz-action-success:hover {
    background: rgba(26,127,90,0.06);
    color: var(--color-success);
    border-color: rgba(26,127,90,0.2);
}

/* ── Textarea en drawer ─────────────────────────────────────── */
.tz-drawer textarea.tz-input {
    padding: 8px 11px;
    width: 100%;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.5;
}

/* ── Detalle grid ───────────────────────────────────────────── */
.tz-detail-grid { display: flex; flex-direction: column; gap: 0; }
.tz-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-subtle);
    gap: 12px;
}
.tz-detail-row:last-child { border-bottom: none; }
.tz-detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.tz-detail-value {
    font-size: 13px;
    color: var(--text-primary);
    text-align: right;
}

/* ── Monto destacado ────────────────────────────────────────── */
.tz-amount {
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
}

/* ── Fila alerta (vencido) ──────────────────────────────────── */
.tz-row-alert td { background: rgba(185,28,28,0.03); }
.tz-row-alert:hover td { background: rgba(185,28,28,0.06) !important; }
.tz-text-danger { color: var(--color-danger); font-weight: 500; }

/* ── Historial ──────────────────────────────────────────────── */
.tz-historial { display: flex; flex-direction: column; gap: 0; padding-left: 8px; }
.tz-hist-item {
    display: flex;
    gap: 12px;
    padding: 8px 0;
    position: relative;
}
.tz-hist-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 5px;
    top: 24px;
    bottom: 0;
    width: 1px;
    background: var(--border-default);
}
.tz-hist-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    margin-top: 4px;
    position: relative;
    z-index: 1;
}
.tz-hist-content { flex: 1; }

/* ── Paginacion ─────────────────────────────────────────────── */
.tz-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

/* ── Check label ────────────────────────────────────────────── */
.tz-check-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-secondary);
    cursor: pointer;
    white-space: nowrap;
}
.tz-check-label input { cursor: pointer; accent-color: var(--color-primary); }

/* ── Badge con icono ────────────────────────────────────────── */
.tz-badge i { font-size: 10px; margin-right: 3px; }

/* KPI multi-moneda: valor compacto cuando hay 2+ monedas */
.tz-stat-value-sm{font-size:18px;line-height:1.3}

/* ════════════════════════════════════════════════════════════
   LISTADO ESTÁNDAR — barra de filtros, flags y chips
   Patrón de referencia: vista Pagarés. Reutilizable por TODAS las
   vistas de listado (Cesiones, Reemplazos, …). No duplicar en CSS
   por-vista: si un patrón sirve a 2+ vistas, vive aquí.
   ════════════════════════════════════════════════════════════ */

/* Barra de filtros que mutan por tab (se ubica dentro de .tz-table-toolbar) */
.tz-filter-bar{display:inline-flex;align-items:center;gap:14px;flex-wrap:nowrap;margin-left:auto}
.tz-filter-bar .tz-check-label{white-space:nowrap}
.tz-table-toolbar .tz-search-wrap{flex:1 1 240px;min-width:180px;max-width:460px}

/* Etiqueta de grupo de filtros ("Mostrar solo:", "Motivo:") */
.tz-filter-lbl{font-size:12px;color:var(--text-secondary);font-weight:700;margin-right:6px}

/* Grupo de flags (checkboxes) con separador a la izquierda */
.tz-filter-flags{display:flex;align-items:center;gap:12px;white-space:nowrap;margin-left:8px;padding-left:16px;border-left:1px solid var(--border-subtle)}

/* Iconos-flag inline en celdas (afectada/observada, etc.) */
.tz-flag{font-size:13px;margin-left:3px;vertical-align:middle;color:var(--color-accent)}
.tz-flag-warn{color:var(--color-danger)}

/* Chips de filtro (toggles tipo píldora con contador) */
.tz-filter-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:8px;padding-left:16px;border-left:1px solid var(--border-subtle)}
.tz-chip{border:1px solid var(--border-default);background:#fff;border-radius:20px;padding:3px 12px;font-size:12px;font-weight:600;color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.tz-chip:hover{background:var(--bg-surface-2)}
.tz-chip.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}
.tz-chip-n{font-size:11px;background:rgba(0,0,0,.08);border-radius:10px;padding:0 6px}
.tz-chip.active .tz-chip-n{background:rgba(255,255,255,.25)}
.tz-chip-loading{font-size:12px;color:var(--text-muted)}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — anatomía estándar de listado
   Fila 1 KPIs · Fila 2 Tabs · Fila 3 Filtros · Fila 4 Datos
   ════════════════════════════════════════════════════════════ */

/* Fila 4 — la tabla se desplaza horizontalmente en vez de exprimirse */
.tz-table-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

@media (max-width: 900px){
  /* Fila 1 — KPIs a 2 columnas */
  .tz-stats-row{grid-template-columns:repeat(2,1fr);gap:10px}
}

@media (max-width: 768px){
  /* Cabecera de página: apilar título y acciones */
  .tz-page-header{flex-direction:column;align-items:stretch;gap:12px}
  .tz-page-header > div:last-child,
  .tz-header-actions{flex-wrap:wrap}
  .tz-header-actions .tz-btn,
  .tz-page-header > div:last-child .tz-btn{flex:1 1 auto;justify-content:center}

  /* Fila 2 — Tabs con scroll horizontal (no se cortan) */
  .tz-tabs-bar{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tz-tabs-bar::-webkit-scrollbar{display:none}

  /* Fila 3 — Filtros a ancho completo y envolviendo */
  .tz-table-toolbar{gap:8px}
  .tz-table-toolbar .tz-search-wrap{flex:1 1 100%;max-width:none}
  .tz-filter-bar{margin-left:0;flex-wrap:wrap;width:100%;gap:10px}
  .tz-filter-flags,.tz-filter-chips{margin-left:0;padding-left:0;border-left:none;width:100%;flex-wrap:wrap;white-space:normal;gap:10px 14px}
  /* Cada check no se parte por dentro, pero el grupo sí envuelve */
  .tz-filter-flags .tz-check-label,.tz-filter-bar .tz-check-label{white-space:nowrap}
  .tz-filter-lbl{flex:0 0 100%}

  /* Fila 4 — la tabla mantiene ancho mínimo y se desplaza */
  .tz-table-scroll .tz-table{min-width:640px}
}

@media (max-width: 480px){
  /* Fila 1 — KPIs a 1 columna en móvil chico */
  .tz-stats-row{grid-template-columns:1fr}
  .tz-page-title{font-size:18px}
  .tz-stat-value{font-size:22px}
}