/* ================================================================
   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 ──────────────────────────
   La regla apunta al contenedor de acciones, pero se escribia como
   "ultimo div": en las vistas SIN botones ese ultimo div es el del titulo, y
   convertirlo en flex ponia el subtitulo AL LADO del titulo en vez de debajo.
   Se apunta a la clase, que es lo que se queria decir. */
.tz-page-header > .tz-header-actions {
    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 > .tz-header-actions,
  .tz-header-actions{flex-wrap:wrap}
  .tz-header-actions .tz-btn,
  .tz-page-header > .tz-header-actions .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}
}

/* ── Linea de tiempo con tarjetas + icono circular (bóveda NAV / Historial) ──
   Reemplaza el punto chico plano por un icono en circulo de color, y la fila
   por una tarjeta con borde izquierdo del mismo color -- mismo estilo que
   usa fileserver.locker en su 'Estado del activo'. */
.tz-timeline-item {
    display: flex; gap: 12px; position: relative; padding-bottom: 16px;
}
.tz-timeline-item:not(:last-child)::before {
    content: ''; position: absolute; left: 19px; top: 40px; bottom: 0;
    width: 2px; background: var(--border-default);
}
.tz-timeline-icon {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 18px;
}
.tz-timeline-card {
    flex: 1; min-width: 0; border: 1px solid var(--border-default);
    border-left: 3px solid var(--tl-color, var(--color-primary));
    border-radius: 8px; padding: 12px 14px; background: var(--bg-surface);
}

/* Aviso de ventana en la lista de pagares elegibles: se pintan 150 de N. */
.tz-pag-tope{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:8px 4px 2px;padding:9px 12px;background:var(--bg-surface-2);border-radius:6px;
  font-size:11.5px;color:var(--text-secondary);line-height:1.45}
.tz-pag-mas{flex:none}
.tz-spinner-sm{width:12px;height:12px;border-width:2px;display:inline-block;vertical-align:-2px;margin-right:5px}

/* Progreso de creacion del paquete: la boveda tarda y la pantalla quieta
   parecia colgada. Cubre la vista a proposito -el proceso es todo o nada y no
   debe interrumpirse a media-. */
.tz-prog-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:9500;
  display:flex;align-items:center;justify-content:center;padding:20px}
.tz-prog-card{background:var(--bg-surface);border-radius:12px;padding:26px 28px;max-width:460px;
  width:100%;box-shadow:0 12px 40px rgba(0,0,0,.22);text-align:left}
/* El spinner vive en el paso activo, no en la cabecera: asi se ve CUAL esta
   corriendo sin cruzar el titulo con la lista. */
.tz-prog-spin{position:absolute;left:-11px;top:0;width:20px;height:20px;border-radius:50%;
  border:2px solid rgba(46,109,164,.25);border-top-color:var(--color-accent);
  animation:tz-prog-giro .7s linear infinite;background:var(--bg-surface);z-index:1}
@keyframes tz-prog-giro{to{transform:rotate(360deg)}}
.tz-prog-pasos li.on::before{opacity:0}
.tz-prog-avance{margin-top:9px}
.tz-prog-avance .b{height:6px;background:var(--bg-surface-2);border-radius:99px;overflow:hidden}
.tz-prog-avance .b i{display:block;height:100%;background:var(--color-accent);border-radius:99px;
  transition:width .4s ease}
.tz-prog-avance .b i.ind{width:35%;animation:tz-prog-ind 1.2s ease-in-out infinite}
@keyframes tz-prog-ind{0%{margin-left:-35%}100%{margin-left:100%}}
.tz-prog-avance .t{display:block;margin-top:5px;font-size:11px;color:var(--text-secondary);
  font-variant-numeric:tabular-nums}
.tz-prog-card h4{margin:0 0 16px;font-size:15px;font-weight:700;text-align:center}
.tz-prog-pasos{list-style:none;margin:0;padding:0;counter-reset:paso}
.tz-prog-pasos li{counter-increment:paso;position:relative;padding:0 0 14px 30px;
  border-left:2px solid var(--border-subtle);margin-left:9px}
.tz-prog-pasos li:last-child{border-left-color:transparent;padding-bottom:0}
.tz-prog-pasos li::before{content:counter(paso);position:absolute;left:-11px;top:0;
  width:20px;height:20px;border-radius:50%;background:var(--bg-surface-2);color:var(--text-muted);
  font-size:11px;font-weight:700;display:grid;place-items:center;border:2px solid var(--bg-surface)}
.tz-prog-pasos li.ok::before{content:'✓';background:var(--color-success);color:#fff}
.tz-prog-pasos li.on::before{background:var(--color-accent);color:#fff}
.tz-prog-pasos li b{display:block;font-size:13px;color:var(--text-muted);font-weight:600}
.tz-prog-pasos li.ok b{color:var(--text-secondary)}
.tz-prog-pasos li.on b{color:var(--text-primary)}
.tz-prog-pasos li span{display:block;font-size:11.5px;color:var(--text-muted);line-height:1.5;margin-top:2px}
.tz-prog-nota{margin:16px 0 0;padding-top:13px;border-top:1px dashed var(--border-subtle);
  font-size:11.5px;color:var(--text-secondary);line-height:1.5}

/* ── Cabecera del detalle de cesion ───────────────────────────
   Tres cifras arriba porque son las que deciden: cuanto adelanta el fondo,
   cuanto lo respalda hoy y si eso cumple el minimo de la linea. El resto pasa
   a metadato, que es lo que es. */
.tz-ces-head{padding:2px 0 4px}
.tz-ces-badges{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.tz-ces-linea{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--text-secondary)}
.tz-ces-linea i{font-size:12px;color:var(--text-muted)}
.tz-ces-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-subtle);
  border:1px solid var(--border-subtle);border-radius:10px;overflow:hidden}
.tz-ces-cifras .c{background:var(--bg-surface);padding:12px 13px}
.tz-ces-cifras .k{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted)}
.tz-ces-cifras .v{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.15;
  margin-top:4px;font-variant-numeric:tabular-nums}
.tz-ces-cifras .v em{font-style:normal;font-size:11px;font-weight:600;color:var(--text-muted);margin-left:4px}
.tz-ces-cifras .d{display:block;font-size:10.5px;color:var(--text-muted);margin-top:4px;line-height:1.4}
.tz-ces-partes{display:flex;align-items:center;gap:14px;margin-top:14px;padding:11px 13px;
  background:var(--bg-surface-2);border-radius:9px}
.tz-ces-partes .p{flex:1;min-width:0}
.tz-ces-partes .k{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted)}
.tz-ces-partes .v{display:block;font-size:13px;font-weight:600;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tz-ces-partes > i{flex:none;color:var(--text-muted);font-size:14px}
.tz-ces-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;padding-top:12px;
  border-top:1px dashed var(--border-subtle)}
.tz-ces-meta span{font-size:12px;color:var(--text-primary);font-variant-numeric:tabular-nums}
.tz-ces-meta b{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--text-muted);margin-bottom:1px}
.tz-ces-rechazo{display:flex;align-items:flex-start;gap:8px;margin-top:13px;padding:10px 12px;
  background:rgba(185,28,28,.06);border-left:3px solid var(--color-danger);border-radius:6px;
  font-size:12px;color:#7f1d1d;line-height:1.5}
.tz-ces-rechazo i{margin-top:1px;flex:none}
@media(max-width:520px){.tz-ces-cifras{grid-template-columns:1fr}}

/* Asistente ocupado: se atenua y se ignoran los clics mientras una operacion
   cambia la seleccion. El boton que la disparo queda visible con su spinner. */
/* El pie del drawer -donde vive 'Siguiente'- esta fuera del body, asi que hay
   que atenuarlo aparte o el usuario ve un boton nitido que no responde. */
.tz-drawer-ocupado .tz-drawer-body,
.tz-drawer-ocupado .tz-drawer-footer{opacity:.45;pointer-events:none;transition:opacity .15s}
/* Capa con el spinner sobre el propio panel: dice que se esta esperando y
   ademas impide cualquier clic, incluido el del boton que lo disparo. */
.tz-drawer-cargando{position:absolute;inset:0;z-index:5;display:flex;align-items:center;
  justify-content:center;background:rgba(255,255,255,.35);backdrop-filter:blur(1px)}
.tz-drawer-cargando .c{display:flex;flex-direction:column;align-items:center;gap:12px;
  background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:12px;
  padding:22px 26px;box-shadow:0 8px 28px rgba(0,0,0,.14);max-width:280px;text-align:center}
.tz-drawer-cargando .c span{font-size:12.5px;color:var(--text-secondary);line-height:1.5}
/* El menu de la aplicacion tambien: si no, se puede navegar fuera y dejar la
   seleccion a medias. */
.tz-nav-bloqueada .tz-sidebar{pointer-events:none;opacity:.6}

/* Cancelacion y reversion del bloqueo en boveda. */
.tz-prog-acciones{display:flex;justify-content:center;margin-top:14px}
.tz-prog-cancelar{min-width:120px}
/* Al revertir, la barra se vuelca a rojo y se vacia: la liberacion de los
   pagares ya bloqueados hay que verla, no solo leerla. Se baja despacio a
   proposito -1,2 s- para que el gesto se registre. */
.tz-prog-avance .b i.rojo{background:var(--color-danger);transition:width 1.2s ease, background .25s}
.tz-prog-card.revertido h4{color:var(--color-danger)}
.tz-prog-card.revertido .tz-prog-pasos li.on b{color:var(--color-danger)}
.tz-prog-card.revertido .tz-prog-pasos li.on::before{opacity:1;background:var(--color-danger);
  color:#fff;content:'!'}
.tz-prog-card.revertido .tz-prog-acciones{display:none}

/* Deshacer un paquete: mismos pasos que el armado pero en ambar, para que se
   lea como la operacion inversa y no como un error. */
.tz-prog-card.deshacer h4{color:var(--color-warning)}
.tz-prog-card.deshacer .tz-prog-pasos li.on::before{background:var(--color-warning)}
.tz-prog-card.deshacer .tz-prog-spin{border-color:rgba(146,97,10,.25);border-top-color:var(--color-warning)}
.tz-prog-avance .b i.ambar{background:var(--color-warning)}

.tz-prog-cancelando{display:inline-flex;align-items:center;gap:6px;font-size:11px;
  color:var(--color-warning);white-space:nowrap}
/* Contador y boton en la misma linea, bajo la barra: cancelar pertenece al
   proceso que la barra representa, no al modal entero. El texto se deja en una
   sola linea -antes se partia en dos y descuadraba el alto de la fila-. */
.tz-prog-pie{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:7px}
.tz-prog-pie .t{margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Detener algo en curso es una accion destructiva: se ve como tal, en rojo
   perfilado, sin competir con el azul de la barra que sigue avanzando. */
.tz-prog-pie .tz-prog-cancelar{flex:none;display:inline-flex;align-items:center;justify-content:center;
  gap:6px;height:26px;padding:0 14px;font-size:11.5px;font-weight:600;line-height:1;
  border-radius:6px;background:transparent;color:var(--color-danger);
  border:1px solid rgba(185,28,28,.45);cursor:pointer;transition:background .15s,border-color .15s}
.tz-prog-pie .tz-prog-cancelar:hover{background:rgba(185,28,28,.08);border-color:var(--color-danger)}
.tz-prog-pie .tz-prog-cancelar:active{background:rgba(185,28,28,.14)}
.tz-prog-pie .tz-prog-cancelar:disabled{opacity:.6;cursor:default}

/* ── Bóveda: bloqueos huérfanos ───────────────────────────── */
.tz-bov-card{padding:0}
.tz-bov-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:16px 18px;flex-wrap:wrap}
.tz-bov-head h3{margin:0 0 4px;font-size:15px;font-weight:700}
.tz-bov-head p{margin:0;max-width:640px;line-height:1.5}
.tz-bov-cargando{display:flex;align-items:center;gap:12px;padding:18px;
  border-top:1px solid var(--border-subtle);font-size:12.5px;color:var(--text-secondary)}
.tz-bov-ok{display:flex;align-items:center;gap:10px;padding:14px 18px;
  border-top:1px solid var(--border-subtle);font-size:12.5px;color:var(--color-success)}
.tz-bov-aviso{display:flex;align-items:flex-start;gap:10px;padding:13px 18px;
  border-top:1px solid var(--border-subtle);background:rgba(185,28,28,.05);
  font-size:12.5px;color:#7f1d1d;line-height:1.55}
.tz-bov-aviso i{margin-top:2px;flex:none}
.tz-bov-lista{display:flex;flex-wrap:wrap;gap:5px;padding:14px 18px;max-height:190px;overflow-y:auto}
.tz-bov-chip{font-size:11px;font-family:ui-monospace,SFMono-Regular,monospace;
  background:var(--bg-surface-2);color:var(--text-secondary);padding:3px 8px;border-radius:5px}
.tz-bov-acciones{display:flex;justify-content:flex-end;padding:0 18px 16px}

/* Detalle de documentos que la boveda rechazo durante la firma. */
.tz-firma-fallo{padding:4px 2px}
.tz-firma-fallo .cab{display:flex;gap:11px;align-items:flex-start;padding:13px 15px;
  background:rgba(185,28,28,.06);border-left:3px solid var(--color-danger);border-radius:7px}
.tz-firma-fallo .cab i{font-size:16px;color:var(--color-danger);margin-top:1px}
.tz-firma-fallo .cab b{display:block;font-size:13.5px;color:#7f1d1d}
.tz-firma-fallo .cab span{display:block;font-size:12px;color:var(--text-secondary);margin-top:3px}
.tz-firma-tabla{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px}
.tz-firma-tabla th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-muted);font-weight:700;padding:0 8px 7px}
.tz-firma-tabla td{padding:8px;border-top:1px solid var(--border-subtle);vertical-align:top}
.tz-firma-tabla td.n{font-weight:600;white-space:nowrap}
.tz-firma-tabla td.r{font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;
  color:var(--text-muted);white-space:nowrap}
.tz-firma-fallo .nota{margin:14px 0 0;font-size:12px;color:var(--text-secondary);line-height:1.6}
.tz-firma-fallo .acc{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}

/* ── Espera de firma ──────────────────────────────────────────
   Dos fases visibles: recibir los firmados y guardarlos en la boveda. Antes
   era un spinner y un contador, y no se distinguia una fase de la otra. */
.tz-espera{padding:22px 18px}
.tz-espera-fases{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.tz-espera-fases .f{display:grid;grid-template-columns:26px 1fr;grid-template-rows:auto auto;
  gap:0 11px;padding:0 0 18px;position:relative;align-items:start}
/* Titulo y subtitulo, cada uno en su fila: sin esto caian juntos en la misma y
   se leian pegados -"Cerrando el paquetela cesion queda firmada"-. */
.tz-espera-fases .f > b{grid-column:2;grid-row:1}
.tz-espera-fases .f > i{grid-column:2;grid-row:2}
.tz-espera-fases .f:last-child{padding-bottom:0}
.tz-espera-fases .f::after{content:'';position:absolute;left:12px;top:29px;bottom:2px;
  width:2px;background:var(--border-subtle)}
.tz-espera-fases .f:last-child::after{display:none}
.tz-espera-fases .p{grid-row:1/3;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg-surface-2);color:var(--text-muted);font-size:11px;font-weight:700;z-index:1}
.tz-espera-fases .f.on .p{background:var(--color-accent);color:#fff}
.tz-espera-fases .f.ok .p{background:var(--color-success);color:#fff}
.tz-espera-fases .f.ok .p{font-size:0}
.tz-espera-fases .f.ok .p::before{content:'✓';font-size:13px}
.tz-espera-fases b{font-size:13.5px;font-weight:600;color:var(--text-muted)}
.tz-espera-fases .f.on b{color:var(--text-primary)}
.tz-espera-fases .f.ok b{color:var(--text-secondary)}
/* El subtitulo iba pegado al titulo -1 px- y se leian como una sola linea
   partida. Y con line-height heredado, dos lineas se solapaban. */
.tz-espera-fases > .f > i{font-style:normal;font-size:11.5px;color:var(--text-muted);
  margin-top:4px;line-height:1.5}

/* El icono de la fase debe caber en su circulo de 25 px: sin tamaño propio
   heredaba el del texto y se salia del borde, encimandose con el trazo que une
   las fases. */
.tz-espera-fases .p > i{font-size:12px;line-height:1;margin:0;color:inherit}
.tz-espera-fases .p .tz-spinner-sm{width:13px;height:13px;border-width:2px}
/* El spinner se veia congelado: esta regla fija tamano y grosor del borde,
   pero al ser mas especifica que la base pisaba border-radius y animation sin
   volver a declararlos -el mismo bug que ya se habia encontrado y arreglado
   para .tz-fase, pero aqui nunca se replico-. Se redeclara entero, con el
   giro que SI esta definido (tz-prog-giro): el keyframe 'spin' que usa la
   regla generica de tokeniza.css no existe en ningun archivo. */
.tz-espera-fases .f.on .p .tz-spinner-sm{
  display:inline-block;width:13px;height:13px;margin:0;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:tz-prog-giro .7s linear infinite;
}
.tz-espera-barra{height:6px;background:var(--bg-surface-2);border-radius:99px;overflow:hidden}
.tz-espera-barra i{display:block;height:100%;background:var(--color-accent);border-radius:99px;
  transition:width .4s ease}
.tz-espera-nota{font-size:11.5px;color:var(--text-muted);margin-top:6px;font-variant-numeric:tabular-nums}
.tz-espera-txt{font-size:12px;color:var(--text-secondary);line-height:1.6;margin:14px 0 0}

/* Barra y ETA propias de cada fase con avance real -entregando, recibiendo-,
   dentro de la opcion en vez de una sola barra ambigua al final de la lista. */
.tz-fase-cnt{display:block;font-variant-numeric:tabular-nums}
.tz-fase-barra{height:4px;background:var(--bg-surface-2);border-radius:99px;overflow:hidden;
  margin:4px 0 2px;width:100%}
.tz-fase-barra > span{display:block;height:100%;background:var(--color-accent);border-radius:99px;
  transition:width .3s ease}
.tz-fase-eta{display:block;font-size:10.5px;color:var(--text-muted);margin-top:1px;
  font-variant-numeric:tabular-nums}
.tz-espera-acc{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.tz-espera-quieta{display:flex;gap:9px;align-items:flex-start;padding:11px 13px;width:100%;
  background:rgba(146,97,10,.07);border-left:3px solid var(--color-warning);border-radius:6px;
  font-size:12px;color:#7a5209;line-height:1.5}
.tz-espera-quieta i{margin-top:1px;flex:none}

/* Seguimiento de firma en segundo plano. Vive pegado a la esquina y sobrevive
   a los cambios de vista: el operador puede seguir trabajando mientras la
   aplicacion de firma hace lo suyo. */
.tz-firma-bg{position:fixed;right:18px;bottom:18px;z-index:8000;width:290px;
  background:var(--color-primary);color:#fff;border-radius:10px;overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.24)}
.tz-firma-bg .c{display:flex;align-items:center;gap:11px;padding:12px 13px}
.tz-firma-bg .t{flex:1;min-width:0}
.tz-firma-bg .t b{display:block;font-size:12.5px;font-weight:600}
.tz-firma-bg .t span{display:block;font-size:11px;opacity:.75;font-variant-numeric:tabular-nums;margin-top:1px}
.tz-firma-bg .x{background:none;border:0;color:#fff;opacity:.6;font-size:19px;line-height:1;
  cursor:pointer;padding:0 2px}
.tz-firma-bg .x:hover{opacity:1}
.tz-firma-bg .b{height:3px;background:rgba(255,255,255,.2)}
.tz-firma-bg .b i{display:block;height:100%;background:#fff;transition:width .4s ease}
.tz-firma-bg .tz-spinner-sm{border-color:rgba(255,255,255,.3);border-top-color:#fff}
@media(max-width:520px){.tz-firma-bg{left:14px;right:14px;width:auto}}

/* Desembolso: codigo de operacion, evidencia (pegada o subida) y notas.
   Compartido entre cesiones.js (cedente) y aprobaciones.js (fondo): ambos
   necesitan ver y registrar lo mismo para resolver disputas de transferencia. */
.tz-desem-intro{display:flex;gap:8px;align-items:flex-start;background:var(--bg-subtle,#f7f8fa);border-radius:8px;padding:10px 12px;font-size:12.5px;color:var(--text-secondary);margin-bottom:18px;line-height:1.5}
.tz-desem-intro i{color:var(--text-muted);margin-top:1px}
.tz-desem-label{display:block;font-size:11.5px;font-weight:600;color:var(--text-secondary);margin-bottom:6px}
.tz-desem-tabs{display:flex;gap:4px;background:var(--bg-subtle,#f1f3f5);border-radius:8px;padding:4px;margin-bottom:12px}
.tz-desem-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border:none;background:transparent;border-radius:6px;font-size:12.5px;font-weight:600;color:var(--text-muted);cursor:pointer}
.tz-desem-tab.active{background:var(--bg-surface,#fff);color:var(--text-primary);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.tz-desem-paste,.tz-desem-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px 16px;border:1.5px dashed var(--border-default);border-radius:10px;text-align:center;font-size:12.5px;color:var(--text-muted);cursor:pointer;transition:border-color .15s,background .15s}
.tz-desem-paste:focus,.tz-desem-paste:hover,.tz-desem-drop:hover{border-color:var(--brand-primary,#1e3a8a);background:var(--bg-subtle,#f7f8fa)}
.tz-desem-drop.over{border-color:var(--brand-primary,#1e3a8a);background:#eef2ff}
.tz-desem-paste i,.tz-desem-drop i{font-size:22px;color:var(--text-muted)}
.tz-desem-preview-card{display:flex;align-items:center;gap:10px;border:1px solid var(--border-default);border-radius:8px;padding:8px 10px;margin-top:10px}
.tz-desem-preview-card img{width:44px;height:44px;object-fit:cover;border-radius:6px}
.tz-desem-preview-pdf{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:#fdecea;border-radius:6px;color:#c0392b;font-size:20px}
.tz-desem-preview-info{flex:1;min-width:0}
.tz-desem-preview-info b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tz-desem-preview-info span{font-size:11px;color:var(--text-muted)}
.tz-desem-preview-x{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:4px}
.tz-desem-datos{display:flex;flex-direction:column;gap:10px}
.tz-desem-evid-link{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border-default);border-radius:8px;background:var(--bg-surface,#fff);cursor:pointer;font-size:12.5px;color:var(--text-primary);width:100%;text-align:left}
.tz-desem-evid-link:hover{background:var(--bg-subtle,#f7f8fa)}

/* Detalle de verificacion de firma: certificado X.509, DID del actor, sellado
   de tiempo en blockchain y cadena de custodia. Pensado en dos lectores: el
   usuario final solo mira el check del encabezado; el perito abre los
   acordeones -por eso van cerrados por defecto- y encuentra ahi lo que
   necesita para sustentar el documento. */
.tz-verif-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:9500;
  display:flex;align-items:center;justify-content:center;padding:20px;animation:tzVerifFade .15s ease}
@keyframes tzVerifFade{from{opacity:0}to{opacity:1}}
.tz-verif-modal{background:var(--bg-surface,#fff);border-radius:var(--radius-lg,14px);
  box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:520px;max-height:88vh;
  overflow-y:auto;position:relative;padding:0}
.tz-verif-close{position:absolute;top:14px;right:14px;background:var(--bg-subtle,#f1f3f5);
  border:none;border-radius:8px;width:32px;height:32px;display:flex;align-items:center;
  justify-content:center;color:var(--text-muted);cursor:pointer;z-index:2}
.tz-verif-close:hover{background:var(--border-default,#e1e4e8)}
.tz-verif-head{display:flex;gap:14px;align-items:flex-start;padding:26px 24px 20px}
.tz-verif-head i{font-size:34px;flex:none;margin-top:1px}
.tz-verif-head.ok i{color:var(--color-success,#1a8754)}
.tz-verif-head.mal i{color:var(--color-danger,#c0392b)}
.tz-verif-head b{display:block;font-size:17px;font-weight:700;color:var(--text-primary)}
.tz-verif-head span{display:block;font-size:13px;color:var(--text-secondary);margin-top:4px;line-height:1.5}
.tz-verif-firmantes{padding:0 24px}
.tz-verif-firmante{background:var(--bg-subtle,#f7f8fa);border-radius:10px;padding:12px 14px;margin-bottom:10px}
.tz-verif-firmante-cab{display:flex;gap:9px;align-items:flex-start}
.tz-verif-firmante-cab i{font-size:17px;margin-top:2px;flex:none}
.tz-verif-firmante-cab i.ok{color:var(--color-success,#1a8754)}
.tz-verif-firmante-cab i.mal{color:var(--color-danger,#c0392b)}
.tz-verif-firmante-cab b{display:block;font-size:13.5px;color:var(--text-primary)}
.tz-verif-firmante-cab span{display:block;font-size:12px;color:var(--text-muted);margin-top:1px}
.tz-verif-chk-row{display:flex;flex-direction:column;gap:5px;margin-top:9px;padding-left:26px}
.tz-verif-chk-row span{display:flex;align-items:center;gap:6px;font-size:12px}
.tz-verif-chk-row span.ok{color:var(--color-success,#1a8754)}
.tz-verif-chk-row span.mal{color:var(--color-danger,#c0392b)}
.tz-verif-accs{padding:14px 24px 22px}
.tz-verif-cert-block{padding:2px 0}
.tz-verif-cert-num{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.03em;margin-bottom:6px}
.tz-verif-sep{border:none;border-top:1px solid var(--border-default);margin:14px 0}
.tz-verif-huella{display:flex;align-items:center;gap:8px;background:var(--bg-subtle,#f7f8fa);
  border-radius:8px;padding:9px 11px;margin-top:10px;flex-wrap:wrap}
.tz-verif-huella span{font-size:11px;color:var(--text-muted);flex:none;width:100%}
.tz-verif-huella code{font-size:11.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--text-primary);word-break:break-all;flex:1;line-height:1.5}
.tz-verif-copy{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:2px;flex:none}
.tz-verif-copy:hover{color:var(--brand-primary,#1e3a8a)}
.tz-verif-explorer{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;
  color:var(--brand-primary,#1e3a8a);text-decoration:none;margin-top:10px;font-weight:600}
.tz-verif-explorer:hover{text-decoration:underline}
.tz-verif-timeline{position:relative;padding-left:6px}
.tz-verif-tl-item{display:flex;gap:12px;position:relative;padding-bottom:16px}
.tz-verif-tl-item:last-child{padding-bottom:0}
.tz-verif-tl-item:not(:last-child)::before{content:'';position:absolute;left:4px;top:14px;
  bottom:-2px;width:1.5px;background:var(--border-default)}
.tz-verif-tl-dot{width:9px;height:9px;border-radius:50%;background:var(--brand-primary,#1e3a8a);
  flex:none;margin-top:4px}
.tz-verif-tl-content{flex:1;min-width:0}
.tz-verif-tl-content b{display:block;font-size:12.5px;color:var(--text-primary)}
.tz-verif-tl-transicion{display:block;font-size:11.5px;color:var(--text-secondary);margin-top:1px}
.tz-verif-tl-fecha{display:block;font-size:11px;color:var(--text-muted);margin-top:2px}

/* Mini-tracker de 3 pasos dentro de "Firmando la carta" (aprobaciones.js):
   para un solo documento no hay % real que medir, pero tres circulos que se
   pintan al avanzar se entienden mejor que un spinner solo o puntos que
   saltan sin indicar progreso. Cada paso deja explicito DONDE ocurre -el
   equipo del usuario, no el servidor-: descarga y firma pasan ahi, por eso
   el icono de "Firmando" es una laptop y no un lapiz. La linea que conecta
   dos pasos muestra puntos viajando mientras ese tramo esta en curso, y
   queda solida en verde al completarse.
   Sin max-width: el padre ya compensa el ancho exacto del icono+gap de
   .tz-fase (35px, ver el estilo inline en aprobaciones.js) para que el
   tracker llegue borde a borde de la tarjeta -con el tope de 460px viejo
   ese calculo no se notaba en tarjetas mas anchas y quedaba angosto con
   aire de sobra a los costados. */
.tz-minitrk{display:flex;align-items:flex-start;justify-content:space-between;margin:12px 0 0;padding:0 4px;width:100%}
.tz-minitrk-step{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;width:78px}
.tz-minitrk-circle{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;border:2px solid var(--border-default);color:var(--text-muted);
  font-size:22px;transition:background .3s,border-color .3s,color .3s;flex:none}
.tz-minitrk-step.on .tz-minitrk-circle{background:var(--color-primary);border-color:var(--color-primary);color:#fff}
.tz-minitrk-step.ok .tz-minitrk-circle{background:var(--color-success);border-color:var(--color-success);color:#fff}
/* Paso activo: spinner en vez del icono estatico -un icono quieto durante
   la espera real de firmar (el usuario elige certificado y firma, puede
   tardar) se leia como trabado, no como "en curso". Mismo patron que
   .tz-fase.on .tz-fase-p: tz-spinner-sm solo fija tamano, el borde y el
   giro hay que declararlos aca para que ande en blanco sobre el circulo
   de color. */
.tz-minitrk-step.on .tz-minitrk-circle .tz-spinner-sm{
  width:20px;height:20px;margin:0;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:tz-prog-giro .7s linear infinite}
.tz-minitrk-lbl{font-size:12px;color:var(--text-muted);text-align:center;margin-top:8px;
  line-height:1.4;font-weight:600;transition:color .3s}
.tz-minitrk-lbl small{display:block;font-size:10.5px;color:var(--text-muted);font-weight:400}
.tz-minitrk-step.on .tz-minitrk-lbl,.tz-minitrk-step.ok .tz-minitrk-lbl{color:var(--text-primary)}
.tz-minitrk-line{position:relative;height:4px;min-width:24px;border-radius:2px;overflow:visible;
  background:var(--border-strong,var(--border-default));flex:1 1 auto;margin-top:26px;transition:background .3s;
  display:block}
.tz-minitrk-line.done{background:var(--color-success)}
.tz-minitrk-dot{position:absolute;top:-4px;width:12px;height:12px;border-radius:50%;
  background:var(--color-primary);animation:tz-minitrk-viajar 1.1s linear infinite;display:block}
.tz-minitrk-dot.d2{animation-delay:.37s}
.tz-minitrk-dot.d3{animation-delay:.74s}
@keyframes tz-minitrk-viajar{0%{left:-14px}100%{left:100%}}

/* Boton icono generico (ej. refrescar una lista) y su spin de feedback. */
.tz-btn-icon{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;
  padding:0;border:1px solid var(--border-default);border-radius:var(--radius-md,8px);
  background:var(--bg-surface,#fff);color:var(--text-secondary);cursor:pointer;font-size:15px}
.tz-btn-icon:hover{background:var(--bg-subtle,#f7f8fa);color:var(--text-primary)}
.tz-btn-icon:disabled{opacity:.6;cursor:default}
.tz-spin{display:inline-block;animation:tzSpin .8s linear infinite}
@keyframes tzSpin{to{transform:rotate(360deg)}}