/* ========================================================================
   Tech-Flow SaaS Core
   Paso 01: capa visual global segura.
   - No cambia lógica PHP.
   - No cambia IDs.
   - No renombra clases usadas por JS.
   - Extrae estilos que estaban embebidos en plantilla.php.
   ======================================================================== */

:root{
  --tf-font-sans: Roboto, Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --tf-bg: #f6f8fb;
  --tf-surface: #ffffff;
  --tf-surface-soft: #f8fafc;
  --tf-border: #e2e8f0;
  --tf-border-strong: #cbd5e1;
  --tf-text: #0f172a;
  --tf-muted: #64748b;
  --tf-muted-2: #94a3b8;
  --tf-primary: #4f46e5;
  --tf-primary-2: #6366f1;
  --tf-success: #10b981;
  --tf-warning: #f59e0b;
  --tf-danger: #ef4444;
  --tf-info: #0ea5e9;
  --tf-radius-sm: 10px;
  --tf-radius-md: 14px;
  --tf-radius-lg: 18px;
  --tf-radius-xl: 22px;
  --tf-shadow-sm: 0 8px 22px rgba(15,23,42,.08);
  --tf-shadow-md: 0 16px 44px rgba(15,23,42,.12);
  --tf-shadow-lg: 0 24px 80px rgba(15,23,42,.22);
}

/* Nuevas clases reutilizables. No afectan vistas existentes hasta que se usen. */
.tf-page-shell{font-family:var(--tf-font-sans);color:var(--tf-text);}
.tf-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px;}
.tf-page-title-wrap{display:flex;align-items:center;gap:12px;min-width:0;}
.tf-page-icon{width:42px;height:42px;border-radius:16px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,var(--tf-primary),var(--tf-primary-2));box-shadow:0 12px 30px rgba(79,70,229,.25);flex:0 0 auto;}
.tf-page-icon i{font-size:22px;}
.tf-page-title{margin:0;color:var(--tf-text);font-size:1.28rem;font-weight:800;letter-spacing:-.025em;line-height:1.1;}
.tf-page-subtitle{margin:4px 0 0;color:var(--tf-muted);font-size:.84rem;font-weight:500;line-height:1.35;}
.tf-page-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;}
.tf-surface-card{background:var(--tf-surface);border:1px solid var(--tf-border);border-radius:var(--tf-radius-xl);box-shadow:var(--tf-shadow-sm);}
.tf-btn-pro{border:0;border-radius:14px;min-height:40px;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:.86rem;font-weight:800;line-height:1;text-decoration:none;white-space:nowrap;transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease;}
.tf-btn-pro:hover{transform:translateY(-1px);text-decoration:none;}
.tf-btn-pro-primary{background:linear-gradient(135deg,var(--tf-primary),var(--tf-primary-2));color:#fff;box-shadow:0 14px 30px rgba(79,70,229,.24);}
.tf-btn-pro-primary:hover{color:#fff;filter:saturate(1.04);}
.tf-btn-pro-soft{background:#f1f5f9;color:#334155;border:1px solid var(--tf-border);}
.tf-btn-pro-soft:hover{color:#0f172a;background:#eaf0f7;}
.tf-icon-btn-pro{width:38px;height:38px;border-radius:13px;border:1px solid var(--tf-border);background:#fff;color:#334155;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(15,23,42,.07);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;}
.tf-icon-btn-pro:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(15,23,42,.11);border-color:var(--tf-border-strong);}
.tf-icon-btn-pro i{font-size:18px;}
@media (max-width:767.98px){.tf-page-head{align-items:flex-start;flex-direction:column;gap:12px;}.tf-page-actions{width:100%;justify-content:stretch;}.tf-page-actions>*{flex:1 1 auto;}.tf-page-title{font-size:1.12rem;}.tf-page-subtitle{font-size:.8rem;}}

/* ================= SOFT ALERT GLOBAL ================= */
.tf-soft-alert-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.36);display:flex;align-items:center;justify-content:center;padding:20px;z-index:99999;opacity:0;visibility:hidden;transition:all .25s ease;}
.tf-soft-alert-backdrop.show{opacity:1;visibility:visible;}
.tf-soft-alert-card{width:min(560px,100%);background:#fff;border-radius:22px;box-shadow:0 24px 80px rgba(15,23,42,.22);overflow:hidden;transform:translateY(12px) scale(.98);transition:all .25s ease;}
.tf-soft-alert-backdrop.show .tf-soft-alert-card{transform:translateY(0) scale(1);}
.tf-soft-alert-head{display:flex;align-items:center;gap:14px;padding:20px 22px 14px;}
.tf-soft-alert-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,#eef2ff,#e0e7ff);color:#4338ca;font-size:24px;flex:0 0 52px;}
.tf-soft-alert-title{margin:0;font-size:18px;font-weight:800;color:#0f172a;}
.tf-soft-alert-sub{margin:4px 0 0;font-size:13px;color:#64748b;}
.tf-soft-alert-body{padding:0 22px 18px;}
.tf-soft-alert-list{display:grid;gap:10px;margin:0;padding:0;list-style:none;}
.tf-soft-alert-item{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc;}
.tf-soft-alert-item i{color:#4f46e5;font-size:18px;margin-top:1px;}
.tf-soft-alert-item strong{display:block;color:#0f172a;font-size:14px;}
.tf-soft-alert-item span{display:block;color:#64748b;font-size:13px;line-height:1.45;}
.tf-soft-alert-actions{display:flex;justify-content:flex-end;gap:10px;padding:0 22px 22px;}
.tf-soft-alert-btn{border:none;border-radius:12px;padding:11px 16px;font-weight:700;cursor:pointer;}
.tf-soft-alert-btn.secondary{background:#eef2f7;color:#334155;}
.tf-soft-alert-btn.primary{background:#4f46e5;color:#fff;}

/* ================= PATCH SELECTS FLOATING V3 ================= */
.tf-form-pro .tf-input-modern.tf-gfloat.is-select{position:relative;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select .form-select{min-height:56px;height:56px;padding-top:12px;padding-bottom:12px;line-height:1.2;border-radius:16px;background-position:right 1rem center;color:#0f172a;font-weight:700!important;transition:border-color .2s ease,box-shadow .2s ease,padding .2s ease,height .2s ease;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select.has-icon-left .form-select{padding-left:44px;padding-right:42px;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select .tf-gfloat-label{position:absolute;top:50%;left:44px;transform:translateY(-50%);font-size:15px;line-height:1.2;padding:0;max-width:calc(100% - 72px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;z-index:3;background:transparent;color:#64748b;font-weight:700;transition:all .18s ease;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select .tf-icon-left{z-index:4;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select .form-select,.tf-form-pro .tf-input-modern.tf-gfloat.is-select .form-select:focus{box-shadow:none;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select.is-focused .tf-gfloat-label,.tf-form-pro .tf-input-modern.tf-gfloat.is-select.has-value .tf-gfloat-label{top:0;left:38px;transform:translateY(-50%);font-size:12px;line-height:1;padding:0 6px;background:linear-gradient(180deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.98) 100%);color:#6366f1;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select.is-focused .form-select,.tf-form-pro .tf-input-modern.tf-gfloat.is-select.has-value .form-select{padding-top:18px;padding-bottom:8px;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select:not(.has-value) .form-select{color:transparent!important;text-shadow:none;caret-color:transparent;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select:not(.has-value) .form-select option{color:#0f172a;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select.has-value .form-select{color:#0f172a!important;font-weight:700!important;}
.tf-form-pro .tf-input-modern.tf-gfloat.is-select .form-select option[value=""]{display:none;}
@media (max-width:767.98px){.tf-form-pro .tf-input-modern.tf-gfloat.is-select .form-select{min-height:54px;height:54px;}}

/* ================= SUCURSAL ACTIVA / CAMBIO ================= */
.tf-branch-switch-btn{border:1px solid #e2e8f0;background:#fff;color:#0f172a;border-radius:14px;min-height:42px;padding:7px 12px;display:flex;align-items:center;gap:9px;box-shadow:0 8px 22px rgba(15,23,42,.08);font-weight:800;max-width:260px;}
.tf-branch-switch-btn i{font-size:20px;color:#4f46e5;}
.tf-branch-switch-btn .tf-branch-mini{display:block;font-size:10px;line-height:1;color:#64748b;text-transform:uppercase;letter-spacing:.06em;font-weight:900;text-align:left;}
.tf-branch-switch-btn .tf-branch-name{display:block;font-size:12px;line-height:1.15;max-width:170px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;}
.tf-branch-modal-card{border:1px solid #e2e8f0;border-radius:16px;padding:13px 14px;background:#f8fafc;color:#334155;font-size:13px;margin-top:12px;}

/* ========================================================================
   Paso 06: base global para tablas SaaS.
   Objetivo:
   - Crear una arquitectura reutilizable para tablas sin migrar todavía markup.
   - Mantener compatibilidad con clases existentes como .tf-premium-table,
     .tf-table-wrap y .tf-action-row.
   - Usar :where() para que esta capa tenga baja especificidad y no gane
     contra estilos ya scopeados por vista.
   ======================================================================== */

:root{
  --tf-table-bg: #ffffff;
  --tf-table-head-bg: #f1f5f9;
  --tf-table-head-text: #334155;
  --tf-table-row-hover: rgba(79,70,229,.045);
  --tf-table-row-selected: rgba(79,70,229,.075);
  --tf-table-border: #e2e8f0;
  --tf-table-border-soft: rgba(226,232,240,.82);
  --tf-table-text: #0f172a;
  --tf-table-muted: #64748b;
  --tf-table-radius: 18px;
  --tf-table-radius-inner: 14px;
  --tf-table-shadow: 0 12px 30px rgba(15,23,42,.07);
  --tf-table-action-w: 208px;
}

/* Contenedor estándar de tabla. Opt-in recomendado para nuevas migraciones. */
.tf-table-shell{
  background: var(--tf-surface, #fff);
  border: 1px solid var(--tf-table-border);
  border-radius: var(--tf-table-radius);
  box-shadow: var(--tf-table-shadow);
  overflow: hidden;
}

.tf-table-headbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--tf-table-border);
  background:linear-gradient(180deg,#fff,#f8fafc);
}

.tf-table-headbar-title{
  margin:0;
  color:var(--tf-text,#0f172a);
  font-size:.98rem;
  line-height:1.15;
  font-weight:850;
  letter-spacing:-.02em;
}

.tf-table-headbar-subtitle{
  margin:4px 0 0;
  color:var(--tf-muted,#64748b);
  font-size:.78rem;
  line-height:1.35;
  font-weight:600;
}

.tf-table-headbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  flex-wrap:wrap;
}

/* Alias de baja especificidad para wrappers ya existentes. */
:where(.tf-table-wrap, .tf-table-box){
  border:1px solid var(--tf-table-border);
  border-radius:var(--tf-table-radius-inner);
  background:#f8fafc;
  padding:10px;
  overflow:hidden;
}

:where(.tf-table-scroll){
  width:100%;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#cbd5e1 transparent;
}

:where(.tf-table-scroll)::-webkit-scrollbar{height:10px;width:10px;}
:where(.tf-table-scroll)::-webkit-scrollbar-track{background:transparent;}
:where(.tf-table-scroll)::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px;border:2px solid transparent;background-clip:content-box;}
:where(.tf-table-scroll)::-webkit-scrollbar-thumb:hover{background:#94a3b8;background-clip:content-box;}

/* Nueva tabla base. .tf-premium-table queda como alias compatible. */
:where(.tf-table-saas, .tf-premium-table){
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--tf-table-bg);
  color:var(--tf-table-text);
  border-radius:var(--tf-table-radius-inner);
  overflow:hidden;
  table-layout:fixed;
}

:where(.tf-table-saas, .tf-premium-table) thead th{
  background:var(--tf-table-head-bg);
  border-bottom:1px solid var(--tf-table-border);
  color:var(--tf-table-head-text);
  font-size:.72rem;
  line-height:1.15;
  font-weight:850;
  letter-spacing:.045em;
  text-transform:uppercase;
  padding:10px 12px;
  white-space:nowrap;
  vertical-align:middle;
}

:where(.tf-table-saas, .tf-premium-table) tbody td{
  border-bottom:1px solid var(--tf-table-border-soft);
  color:var(--tf-table-text);
  font-size:.88rem;
  line-height:1.25;
  font-weight:600;
  padding:10px 12px;
  vertical-align:middle;
  background:#fff;
  overflow:hidden;
  text-overflow:ellipsis;
}

:where(.tf-table-saas, .tf-premium-table) tbody tr:last-child td{border-bottom:0;}
:where(.tf-table-saas, .tf-premium-table) tbody tr:hover td{background:var(--tf-table-row-hover);}
:where(.tf-table-saas, .tf-premium-table) tbody tr.is-selected td{background:var(--tf-table-row-selected);}

:where(.tf-table-saas, .tf-premium-table) th:first-child,
:where(.tf-table-saas, .tf-premium-table) td:first-child{padding-left:14px;}

:where(.tf-table-saas, .tf-premium-table) th:last-child,
:where(.tf-table-saas, .tf-premium-table) td:last-child{padding-right:14px;}

/* Utilidades de columnas reutilizables. Evitan depender de nth-child. */
.tf-col-xs{width:64px;}
.tf-col-sm{width:92px;}
.tf-col-md{width:132px;}
.tf-col-lg{width:180px;}
.tf-col-xl{width:240px;}
.tf-col-fluid{width:auto;}
.tf-col-folio{width:86px;}
.tf-col-date{width:132px;}
.tf-col-money{width:128px;}
.tf-col-status{width:132px;}
.tf-col-actions{width:var(--tf-table-action-w);}

.tf-cell-main{min-width:0;display:flex;flex-direction:column;gap:3px;}
.tf-cell-title{display:block;color:var(--tf-table-text);font-weight:850;font-size:.9rem;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tf-cell-sub{display:block;color:var(--tf-table-muted);font-size:.76rem;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tf-cell-meta{display:inline-flex;align-items:center;gap:5px;color:var(--tf-table-muted);font-size:.75rem;font-weight:700;line-height:1.2;}
.tf-cell-meta i{font-size:15px;}
.tf-cell-money{font-variant-numeric:tabular-nums;color:var(--tf-table-text);font-weight:850;white-space:nowrap;}
.tf-cell-muted{color:var(--tf-table-muted)!important;font-weight:600;}
.tf-cell-strong{color:var(--tf-table-text)!important;font-weight:850;}
.tf-cell-nowrap{white-space:nowrap!important;}
.tf-cell-wrap{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;word-break:break-word;}
.tf-cell-center{text-align:center!important;}
.tf-cell-right{text-align:right!important;}

/* Acciones de tabla: alias compatible con .tf-action-row. */
:where(.tf-table-actions, .tf-action-row){
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:nowrap;
  width:max-content;
  max-width:100%;
  margin-left:auto;
}

:where(.tf-table-actions, .tf-action-row) .btn,
:where(.tf-table-actions, .tf-action-row) .tf-icon-btn-pro{
  width:34px;
  height:34px;
  min-width:34px;
  padding:0;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

:where(.tf-table-actions, .tf-action-row) .btn i{font-size:18px;line-height:1;}

/* Variante para filas con muchas acciones. */
.tf-table-actions--wide{min-width:190px;}
.tf-table-actions--wrap{width:100%;flex-wrap:wrap;justify-content:flex-start;margin-left:0;}
.tf-table-actions--compact{gap:4px;}
.tf-table-actions--compact .btn{width:30px;height:30px;min-width:30px;border-radius:9px;}

/* Badges globales reutilizables. Mantienen aliases legacy. */
:where(.tf-badge, .tf-badge-soft){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-height:24px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.72rem;
  line-height:1;
  font-weight:850;
  white-space:nowrap;
}

.tf-badge--success,
.tf-badge-ok{background:#ecfdf5;color:#047857;border-color:#bbf7d0;}
.tf-badge--warning,
.tf-badge-low{background:#fffbeb;color:#b45309;border-color:#fde68a;}
.tf-badge--danger,
.tf-badge-out{background:#fef2f2;color:#b91c1c;border-color:#fecaca;}
.tf-badge--info{background:#eff6ff;color:#1d4ed8;border-color:#bfdbfe;}
.tf-badge--muted,
.tf-badge-muted,
.tf-badge-off{background:#f1f5f9;color:#475569;border-color:#e2e8f0;}
.tf-badge--primary{background:#eef2ff;color:#4338ca;border-color:#c7d2fe;}
/* Alias legacy usado por vistas existentes como usuarios.php. */
.tf-badge-soft{background:#eef2ff;color:#4f46e5;border-color:#c7d2fe;}


/* Estados de carga/vacío/paginación. Aliases compatibles. */
:where(.tf-table-state, .tf-empty, .tf-loader){
  width:100%;
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  padding:22px 16px;
  color:var(--tf-table-muted);
  text-align:center;
  font-size:.88rem;
  font-weight:700;
}

:where(.tf-table-state, .tf-empty, .tf-loader) i{font-size:28px;color:#94a3b8;}

:where(.tf-table-footer, .tf-footer, .tf-user-footer){
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 4px 2px;
  color:var(--tf-table-muted);
  font-size:.78rem;
  font-weight:700;
}

:where(.tf-table-pager, .tf-pager){display:flex;align-items:center;justify-content:flex-end;gap:6px;flex-wrap:wrap;}
:where(.tf-table-pager, .tf-pager) .btn{min-width:34px;height:34px;border-radius:11px;font-weight:800;}

/* Toolbar / filtros arriba de tablas. */
.tf-table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.tf-table-search{
  position:relative;
  flex:1 1 260px;
  min-width:min(100%,260px);
}

.tf-table-search i{
  position:absolute;
  left:13px;
  top:50%;
  transform:translateY(-50%);
  color:#94a3b8;
  font-size:18px;
  pointer-events:none;
}

.tf-table-search .form-control{
  min-height:42px;
  border-radius:14px;
  border:1px solid var(--tf-border,#e2e8f0);
  background:#fff;
  padding-left:40px;
  color:var(--tf-text,#0f172a);
  font-size:.88rem;
  font-weight:650;
  box-shadow:0 8px 20px rgba(15,23,42,.045);
}

.tf-table-search .form-control:focus{
  border-color:rgba(99,102,241,.55);
  box-shadow:0 0 0 4px rgba(99,102,241,.12);
}

.tf-table-filter-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;}

/* Variante compacta para vistas densas. */
.tf-table-saas--compact thead th{padding:8px 10px;font-size:.69rem;}
.tf-table-saas--compact tbody td{padding:8px 10px;font-size:.84rem;}
.tf-table-saas--loose thead th{padding:12px 14px;}
.tf-table-saas--loose tbody td{padding:13px 14px;}

/* Mobile cards opt-in. No se aplica automáticamente para evitar romper tablas existentes. */
@media (max-width:767.98px){
  .tf-table-headbar{align-items:flex-start;flex-direction:column;padding:13px 14px;}
  .tf-table-headbar-actions{width:100%;justify-content:stretch;}
  .tf-table-headbar-actions>*{flex:1 1 auto;}
  .tf-table-toolbar{align-items:stretch;flex-direction:column;}
  .tf-table-filter-actions{width:100%;justify-content:stretch;}
  .tf-table-filter-actions>*{flex:1 1 auto;}
  :where(.tf-table-footer, .tf-footer, .tf-user-footer){align-items:flex-start;flex-direction:column;}
  :where(.tf-table-pager, .tf-pager){width:100%;justify-content:stretch;}
  :where(.tf-table-pager, .tf-pager) .btn{flex:1 1 auto;}

  .tf-table-mobile-cards .tf-table-scroll,
  .tf-table-mobile-cards .tf-table-saas,
  .tf-table-mobile-cards .tf-table-saas tbody{display:block;width:100%;min-width:0;overflow:visible;background:transparent;}

  .tf-table-mobile-cards .tf-table-saas thead,
  .tf-table-mobile-cards .tf-table-saas colgroup{display:none;}

  .tf-table-mobile-cards .tf-table-saas tbody tr{
    display:block;
    width:100%;
    margin:0 0 10px;
    padding:13px;
    border:1px solid var(--tf-table-border);
    border-radius:16px;
    background:#fff;
    box-shadow:0 8px 18px rgba(15,23,42,.055);
  }

  .tf-table-mobile-cards .tf-table-saas tbody td{
    display:flex;
    justify-content:space-between;
    gap:12px;
    width:100%;
    padding:8px 0;
    border:0;
    background:transparent;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  .tf-table-mobile-cards .tf-table-saas tbody td::before{
    content:attr(data-label);
    flex:0 0 92px;
    color:var(--tf-table-muted);
    font-size:.70rem;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
  }

  .tf-table-mobile-cards .tf-table-actions,
  .tf-table-mobile-cards .tf-action-row{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,minmax(42px,1fr));
    gap:8px;
    margin:0;
  }

  .tf-table-mobile-cards .tf-table-actions .btn,
  .tf-table-mobile-cards .tf-action-row .btn{
    width:100%;
    height:42px;
    min-width:0;
    border-radius:13px;
  }
}


/* ========================================================================
   Paso 07: aliases globales para migrar Usuarios a la base de tablas.
   Estos aliases son seguros para futuras vistas; no cambian lógica ni JS.
   ======================================================================== */

:where(.tf-user-empty, .tf-user-loader){
  width:100%;
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  padding:22px 16px;
  color:var(--tf-table-muted);
  text-align:center;
  font-size:.88rem;
  font-weight:750;
}

:where(.tf-user-empty, .tf-user-loader) i{
  font-size:28px;
  color:#94a3b8;
}

:where(.tf-user-pager){
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap;
}

:where(.tf-user-pager) .btn{
  min-width:34px;
  height:34px;
  border-radius:11px;
  font-weight:800;
}

.tf-table-page-size,
.tf-user-page-size{
  width:auto;
  min-width:82px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--tf-border-strong,#cbd5e1);
  background:#fff;
  color:var(--tf-text,#0f172a);
  font-size:.84rem;
  font-weight:800;
  padding:0 10px;
}

.tf-badge .dot{
  width:7px;
  height:7px;
  border-radius:999px;
  display:inline-block;
  flex:0 0 auto;
}

.tf-badge-ok .dot,
.tf-badge--success .dot{background:#22c55e;}

.tf-badge-low .dot,
.tf-badge--warning .dot{background:#f59e0b;}

.tf-badge-out .dot,
.tf-badge-off .dot,
.tf-badge--danger .dot{background:#ef4444;}

.tf-badge-muted .dot,
.tf-badge--muted .dot{background:#94a3b8;}

.tf-badge-soft .dot,
.tf-badge--primary .dot{background:#6366f1;}


/* ========================================================================
   Paso 08: utilidades globales para tablas centradas y tipografía suave.
   Se activan solo al agregar la clase correspondiente en la vista.
   ======================================================================== */
.tf-table-saas--center-soft thead th{
  text-align:center;
  font-weight:720;
  letter-spacing:.035em;
}
.tf-table-saas--center-soft tbody td{
  text-align:center;
  font-weight:560;
}
.tf-table-actions--center{
  justify-content:center;
  margin-left:auto;
  margin-right:auto;
}
.tf-table-actions--center .btn{
  box-shadow:0 6px 16px rgba(15,23,42,.055);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}
.tf-table-actions--center .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,23,42,.10);
}
.tf-font-soft{font-weight:560!important;}
.tf-font-medium{font-weight:620!important;}
.tf-font-strong{font-weight:720!important;}


/* =====================================================
   SaaS command/search primitives — base reusable.
   No pisa vistas existentes si no usan estas clases.
   ===================================================== */
.tf-command-bar{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:10px;
  border-radius:20px;
  border:1px solid rgba(226,232,240,.88);
  background:rgba(248,250,252,.82);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}
.tf-search-control,
.tf-filter-control{
  position:relative;
}
.tf-search-control .form-control,
.tf-filter-control .form-select{
  min-height:48px;
  border-radius:16px;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#1f2937;
  font-weight:400;
  box-shadow:0 8px 18px rgba(15,23,42,.035);
}
.tf-btn-gradient-primary{
  border:0;
  color:#fff;
  background:linear-gradient(135deg,#2563eb 0%,#4f46e5 100%);
  box-shadow:0 14px 26px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
@media(max-width:992px){
  .tf-command-bar{grid-template-columns:1fr;}
}


/* ========================================================================
   Usuarios — capa visual migrada desde vistas/modulos/usuarios.php
   Motivo: la tipografía de tabla, toolbar y acciones no debe vivir inline
   dentro de la vista. Se mantiene scopeado a .tf-user-page.tf-v26-scope
   para no afectar otras vistas hasta migrarlas de forma controlada.
   ======================================================================== */
/* =====================================================
   PASO 08 — Usuarios: tabla centrada, tipografía más suave
   y acciones con iconografía más limpia.
   No cambia IDs, endpoints, clases JS ni lógica.
   ===================================================== */
.tf-user-page.tf-v26-scope{
  --tf-user-font-strong:700;
  --tf-user-font-medium:600;
  --tf-user-font-soft:500;
}
.tf-user-page .tf-title{font-weight:800 !important;letter-spacing:-.025em !important;}
.tf-user-page .tf-title-sub{font-weight:600 !important;}
.tf-user-page .tf-title-icon{box-shadow:0 8px 18px rgba(79,70,229,.10) !important;}
.tf-user-page .tf-actions-top .btn,
.tf-user-page .tf-top-actions .btn{font-weight:760 !important;}
.tf-user-page .tf-input-modern .form-control,
.tf-user-page .tf-input-modern .form-select{font-weight:600 !important;}
.tf-user-page .tf-input-modern .form-control::placeholder{font-weight:650 !important;color:#9aa7b8 !important;}

.tf-user-page .tf-users-table thead th{
  text-align:center !important;
  font-weight:720 !important;
  font-size:.70rem !important;
  letter-spacing:.035em !important;
  color:#1f2937 !important;
}
.tf-user-page .tf-users-table tbody td{
  text-align:center !important;
  font-weight:560 !important;
  color:#172033 !important;
}
.tf-user-page .tf-users-table th:last-child,
.tf-user-page .tf-users-table td:last-child{
  text-align:center !important;
}
.tf-user-page .tf-user-folio{
  justify-content:center !important;
  font-weight:700 !important;
}
.tf-user-page .tf-user-plus{
  font-weight:760 !important;
  box-shadow:0 5px 14px rgba(15,23,42,.06) !important;
}
.tf-user-page .tf-user-name{
  text-align:center !important;
  font-weight:720 !important;
  color:#07111f !important;
}
.tf-user-page .tf-user-sub{
  justify-content:center !important;
  text-align:center !important;
  font-weight:560 !important;
  color:#64748b !important;
}
.tf-user-page .tf-user-cell-strong{
  text-align:center !important;
  font-weight:620 !important;
  color:#111827 !important;
}
.tf-user-page .tf-badge{
  font-weight:700 !important;
  letter-spacing:-.005em !important;
}
.tf-user-page #badgeTotalUsuarios{
  min-width:30px !important;
  justify-content:center !important;
  font-weight:700 !important;
}
.tf-user-page .tf-user-detail-item .lbl{font-weight:720 !important;}
.tf-user-page .tf-user-detail-item .val{font-weight:600 !important;}
.tf-user-page .tf-user-empty,
.tf-user-page .tf-user-loader,
.tf-user-page .tf-user-footer,
.tf-user-page .tf-user-pager .btn,
.tf-user-page .tf-user-page-size{font-weight:650 !important;}

.tf-user-page .tf-action-row,
.tf-user-page .tf-user-actions{
  justify-content:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
  min-width:196px !important;
}
.tf-user-page .tf-action-row .btn,
.tf-user-page .tf-user-actions .btn{
  width:38px !important;
  min-width:38px !important;
  height:34px !important;
  border-radius:12px !important;
  border-width:1.35px !important;
  background:#fff !important;
  box-shadow:0 6px 16px rgba(15,23,42,.055) !important;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease !important;
}
.tf-user-page .tf-action-row .btn i,
.tf-user-page .tf-user-actions .btn i{font-size:18px !important;line-height:1 !important;}
.tf-user-page .tf-action-row .btn:hover,
.tf-user-page .tf-user-actions .btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 10px 22px rgba(15,23,42,.10) !important;
}
.tf-user-page .tf-action-btn--edit{color:#d97706 !important;border-color:#f59e0b !important;background:#fffaf0 !important;}
.tf-user-page .tf-action-btn--permissions{color:#2563eb !important;border-color:#2563eb !important;background:#eff6ff !important;}
.tf-user-page .tf-action-btn--status.btn-outline-success{color:#047857 !important;border-color:#059669 !important;background:#ecfdf5 !important;}
.tf-user-page .tf-action-btn--status.btn-outline-danger{color:#be123c !important;border-color:#e11d48 !important;background:#fff1f2 !important;}
.tf-user-page .tf-action-btn--delete{color:#e11d48 !important;border-color:#fb7185 !important;background:#fff1f2 !important;}

@media (max-width:768px){
  .tf-user-page #userRows tr.tf-d-row td{text-align:left !important;}
  .tf-user-page #userRows .tf-user-folio{justify-content:flex-start !important;}
  .tf-user-page #userRows .tf-user-name{text-align:left !important;font-weight:720 !important;}
  .tf-user-page #userRows .tf-user-sub{justify-content:flex-start !important;text-align:left !important;}
  .tf-user-page #userRows .tf-user-cell-strong{text-align:left !important;}
  .tf-user-page #userRows .tf-action-row,
  .tf-user-page #userRows .tf-user-actions{min-width:0 !important;width:100% !important;margin:0 !important;}
  .tf-user-page #userRows .tf-action-row .btn,
  .tf-user-page #userRows .tf-user-actions .btn{width:100% !important;min-width:0 !important;height:42px !important;}
}



/* =====================================================
   PASO 08C — Corrección real de tipografía Usuarios
   Causa: la fuente Roboto cargada en plantilla solo trae 400/500.
   Pesos 700/900 se sintetizan y se ven demasiado negros.
   Este bloque fuerza pesos reales/suaves en encabezados y
   columnas #, Nombre, Teléfono y Sucursal.
   ===================================================== */
.tf-user-page.tf-v26-scope .tf-title{
  font-weight:500 !important;
  color:#111827 !important;
  letter-spacing:-.018em !important;
  text-shadow:none !important;
}
.tf-user-page.tf-v26-scope #badgeTotalUsuarios{
  font-weight:500 !important;
  color:#3730a3 !important;
}
.tf-user-page.tf-v26-scope .tf-users-table thead th{
  color:#334155 !important;
  font-weight:500 !important;
  font-size:.695rem !important;
  letter-spacing:.035em !important;
  text-transform:uppercase !important;
  text-align:center !important;
}
.tf-user-page.tf-v26-scope .tf-users-table tbody td{
  color:#334155 !important;
  font-weight:400 !important;
  text-align:center !important;
}
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(1) .tf-user-folio,
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(1) .tf-user-folio-number{
  color:#1e293b !important;
  font-weight:500 !important;
}
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(2) .tf-user-name,
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(2) .tf-user-name-soft{
  color:#1f2937 !important;
  font-weight:500 !important;
  font-size:.95rem !important;
  line-height:1.18 !important;
  letter-spacing:-.01em !important;
}
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(3) .tf-user-cell-strong,
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(3) .tf-user-cell-text,
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(4) .tf-user-cell-strong,
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(4) .tf-user-cell-text{
  color:#1f2937 !important;
  font-weight:500 !important;
  font-size:.90rem !important;
  letter-spacing:-.006em !important;
}
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(5) .tf-badge,
.tf-user-page.tf-v26-scope .tf-users-table tbody td:nth-child(6) .tf-badge{
  font-weight:500 !important;
}
.tf-user-page.tf-v26-scope .tf-user-sub{
  color:#64748b !important;
  font-weight:400 !important;
}
.tf-user-page.tf-v26-scope .tf-user-plus{
  font-weight:500 !important;
}
.tf-user-page.tf-v26-scope .tf-input-modern .form-control::placeholder{
  color:#b0bac8 !important;
  font-weight:400 !important;
}
.tf-user-page.tf-v26-scope .tf-input-modern .form-select{
  font-weight:500 !important;
  color:#1f2937 !important;
}
@media(max-width:768px){
  .tf-user-page.tf-v26-scope #userRows .tf-user-folio > span,
  .tf-user-page.tf-v26-scope #userRows .tf-user-folio-number,
  .tf-user-page.tf-v26-scope #userRows .tf-user-name,
  .tf-user-page.tf-v26-scope #userRows .tf-user-name-soft,
  .tf-user-page.tf-v26-scope #userRows .tf-user-cell-strong,
  .tf-user-page.tf-v26-scope #userRows .tf-user-cell-text{
    font-weight:500 !important;
  }
  .tf-user-page.tf-v26-scope #userRows tr.tf-d-row.is-open td:nth-child(n+3)::before{
    font-weight:500 !important;
    color:#64748b !important;
  }
}



/* =====================================================
   PASO 08D — Usuarios: toolbar y buscador más SaaS/pro
   Enfoque: mejorar header, CTA, buscador y filtro sin tocar
   IDs, endpoints, permisos, sesiones ni lógica JS.
   ===================================================== */
.tf-user-page.tf-v26-scope .card-header{
  padding:18px 18px 16px !important;
  background:
    radial-gradient(circle at top left, rgba(79,70,229,.055), transparent 34%),
    linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
}
.tf-user-page.tf-v26-scope .tf-head-row{
  align-items:flex-start !important;
  gap:16px !important;
}
.tf-user-page.tf-v26-scope .tf-users-title-wrap{
  gap:12px !important;
  align-items:flex-start !important;
}
.tf-user-page.tf-v26-scope .tf-title-copy{
  min-width:0 !important;
  padding-top:1px !important;
}
.tf-user-page.tf-v26-scope .tf-users-title-icon{
  width:40px !important;
  height:40px !important;
  border-radius:15px !important;
  color:#4f46e5 !important;
  background:linear-gradient(135deg,#eef2ff 0%,#f8fafc 100%) !important;
  border:1px solid rgba(199,210,254,.72) !important;
  box-shadow:0 12px 24px rgba(79,70,229,.10) !important;
}
.tf-user-page.tf-v26-scope .tf-title{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  font-size:1.12rem !important;
  font-weight:500 !important;
  letter-spacing:-.02em !important;
  color:#111827 !important;
}
.tf-user-page.tf-v26-scope .tf-title-sub{
  display:block !important;
  margin-top:5px !important;
  color:#64748b !important;
  font-size:.765rem !important;
  font-weight:400 !important;
  line-height:1.25 !important;
  letter-spacing:-.005em !important;
}
.tf-user-page.tf-v26-scope .tf-users-count-pill{
  min-width:28px !important;
  height:28px !important;
  padding:0 9px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  font-size:.78rem !important;
  font-weight:500 !important;
  border-radius:999px !important;
  box-shadow:0 8px 18px rgba(79,70,229,.08) !important;
}
.tf-user-page.tf-v26-scope .tf-users-actions-top{
  margin-left:auto !important;
}
.tf-user-page.tf-v26-scope .tf-btn-add-user{
  height:46px !important;
  border:0 !important;
  border-radius:16px !important;
  padding:0 18px 0 14px !important;
  color:#fff !important;
  background:linear-gradient(135deg,#2563eb 0%,#4f46e5 100%) !important;
  box-shadow:0 14px 26px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;
  font-weight:500 !important;
  letter-spacing:-.01em !important;
  gap:9px !important;
  transition:transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
.tf-user-page.tf-v26-scope .tf-btn-add-user .tf-btn-icon{
  width:27px !important;
  height:27px !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:10px !important;
  background:rgba(255,255,255,.16) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
.tf-user-page.tf-v26-scope .tf-btn-add-user i{
  font-size:18px !important;
  line-height:1 !important;
}
.tf-user-page.tf-v26-scope .tf-btn-add-user:hover{
  transform:translateY(-1px) !important;
  filter:saturate(1.04) !important;
  box-shadow:0 18px 32px rgba(37,99,235,.24), inset 0 1px 0 rgba(255,255,255,.20) !important;
}
.tf-user-page.tf-v26-scope .tf-users-top-actions{
  grid-template-columns:minmax(0,1fr) 178px !important;
  gap:12px !important;
  align-items:center !important;
  margin-top:16px !important;
  padding:10px !important;
  border-radius:20px !important;
  border:1px solid rgba(226,232,240,.88) !important;
  background:rgba(248,250,252,.82) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
}
.tf-user-page.tf-v26-scope .tf-users-searchbox .tf-icon-left,
.tf-user-page.tf-v26-scope .tf-users-filterbox .tf-icon-left{
  left:9px !important;
  width:32px !important;
  height:32px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  color:#64748b !important;
  background:#f8fafc !important;
  border:1px solid rgba(226,232,240,.95) !important;
  font-size:18px !important;
}
.tf-user-page.tf-v26-scope .tf-users-searchbox.has-icon-left .form-control,
.tf-user-page.tf-v26-scope .tf-users-filterbox.has-icon-left .form-select{
  padding-left:52px !important;
}
.tf-user-page.tf-v26-scope .tf-users-searchbox .form-control,
.tf-user-page.tf-v26-scope .tf-users-filterbox .form-select{
  height:48px !important;
  min-height:48px !important;
  border-radius:16px !important;
  border:1px solid #e2e8f0 !important;
  background:#fff !important;
  color:#1f2937 !important;
  font-size:.90rem !important;
  font-weight:400 !important;
  letter-spacing:-.006em !important;
  box-shadow:0 8px 18px rgba(15,23,42,.035) !important;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease !important;
}
.tf-user-page.tf-v26-scope .tf-users-searchbox .form-control::placeholder{
  color:#a8b3c3 !important;
  font-weight:400 !important;
}
.tf-user-page.tf-v26-scope .tf-users-searchbox .form-control:hover,
.tf-user-page.tf-v26-scope .tf-users-filterbox .form-select:hover{
  border-color:#cbd5e1 !important;
}
.tf-user-page.tf-v26-scope .tf-users-searchbox .form-control:focus,
.tf-user-page.tf-v26-scope .tf-users-filterbox .form-select:focus{
  border-color:#93c5fd !important;
  background:#fff !important;
  box-shadow:0 0 0 4px rgba(37,99,235,.10),0 12px 24px rgba(15,23,42,.055) !important;
}
.tf-user-page.tf-v26-scope .tf-users-searchbox:focus-within .tf-icon-left,
.tf-user-page.tf-v26-scope .tf-users-filterbox:focus-within .tf-icon-left{
  color:#2563eb !important;
  background:#eff6ff !important;
  border-color:#bfdbfe !important;
}
.tf-user-page.tf-v26-scope .tf-users-filterbox .form-select{
  cursor:pointer !important;
  font-weight:500 !important;
  color:#111827 !important;
}
@media(max-width:992px){
  .tf-user-page.tf-v26-scope .tf-users-top-actions{
    grid-template-columns:1fr !important;
  }
  .tf-user-page.tf-v26-scope .tf-users-actions-top,
  .tf-user-page.tf-v26-scope .tf-btn-add-user{
    width:100% !important;
  }
}
@media(max-width:576px){
  .tf-user-page.tf-v26-scope .card-header{
    padding:14px !important;
  }
  .tf-user-page.tf-v26-scope .tf-head-row{
    gap:12px !important;
  }
  .tf-user-page.tf-v26-scope .tf-title{
    font-size:1.02rem !important;
  }
  .tf-user-page.tf-v26-scope .tf-title-sub{
    font-size:.72rem !important;
  }
  .tf-user-page.tf-v26-scope .tf-users-top-actions{
    padding:8px !important;
    border-radius:18px !important;
  }
  .tf-user-page.tf-v26-scope .tf-users-searchbox .form-control,
  .tf-user-page.tf-v26-scope .tf-users-filterbox .form-select{
    height:46px !important;
    min-height:46px !important;
  }
}

/* =====================================================
   PASO 08F — Usuarios: header compacto / command bar
   Objetivo: eliminar espacio desperdiciado arriba de la tabla
   sin tocar IDs, JS, endpoints, permisos ni lógica PHP.
   ===================================================== */
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header{
  display:grid !important;
  grid-template-columns:minmax(238px,max-content) minmax(320px,1fr) 168px max-content !important;
  grid-template-areas:"title search filter action" !important;
  align-items:center !important;
  gap:10px 12px !important;
  min-height:72px !important;
  padding:12px 16px !important;
  border-bottom:1px solid rgba(226,232,240,.82) !important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-head-row,
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-top-actions{
  display:contents !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-title-wrap{
  grid-area:title !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-actions-top{
  grid-area:action !important;
  margin:0 !important;
  justify-self:end !important;
  align-self:center !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-searchbox{
  grid-area:search !important;
  min-width:0 !important;
  margin:0 !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-filterbox{
  grid-area:filter !important;
  min-width:0 !important;
  margin:0 !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-title-icon{
  width:34px !important;
  height:34px !important;
  border-radius:13px !important;
  font-size:18px !important;
  box-shadow:0 8px 16px rgba(79,70,229,.08) !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-title-copy{
  min-width:0 !important;
  padding-top:0 !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-title{
  font-size:1.02rem !important;
  line-height:1.08 !important;
  margin:0 !important;
  gap:7px !important;
  white-space:nowrap !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-title-sub{
  margin-top:3px !important;
  font-size:.705rem !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:260px !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-count-pill{
  min-width:24px !important;
  height:24px !important;
  padding:0 8px !important;
  font-size:.72rem !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-btn-add-user{
  height:42px !important;
  min-height:42px !important;
  border-radius:14px !important;
  padding:0 15px 0 11px !important;
  white-space:nowrap !important;
  box-shadow:0 12px 22px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-btn-add-user .tf-btn-icon{
  width:25px !important;
  height:25px !important;
  border-radius:9px !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-searchbox .tf-icon-left,
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-filterbox .tf-icon-left{
  left:8px !important;
  width:29px !important;
  height:29px !important;
  border-radius:11px !important;
  font-size:17px !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-searchbox.has-icon-left .form-control,
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-filterbox.has-icon-left .form-select{
  padding-left:47px !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-searchbox .form-control,
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-filterbox .form-select{
  height:42px !important;
  min-height:42px !important;
  border-radius:14px !important;
  font-size:.86rem !important;
  box-shadow:0 6px 14px rgba(15,23,42,.028) !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-searchbox .form-control::placeholder{
  color:#b8c2d1 !important;
}
.tf-user-page.tf-v26-scope > .card.radius-10 > .card-body{
  padding-top:14px !important;
}

@media(max-width:1180px) and (min-width:769px){
  .tf-user-page.tf-v26-scope > .card.radius-10 > .card-header{
    grid-template-columns:minmax(220px,1fr) 168px max-content !important;
    grid-template-areas:
      "title filter action"
      "search search search" !important;
    min-height:112px !important;
  }
  .tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-title-sub{
    max-width:360px !important;
  }
}

@media(max-width:768px){
  .tf-user-page.tf-v26-scope > .card.radius-10 > .card-header{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "title"
      "search"
      "filter"
      "action" !important;
    gap:9px !important;
    min-height:0 !important;
    padding:12px !important;
  }
  .tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-users-actions-top,
  .tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-btn-add-user{
    width:100% !important;
  }
  .tf-user-page.tf-v26-scope > .card.radius-10 > .card-header .tf-title-sub{
    max-width:100% !important;
    white-space:normal !important;
  }
  .tf-user-page.tf-v26-scope > .card.radius-10 > .card-body{
    padding-top:12px !important;
  }
}

/* =====================================================
   PASO 09 — Ventas historial: mismo header compacto SaaS
   que Usuarios, pero scopeado para NO afectar otras vistas.
   Requiere root: .tf-sales-history-page
   ===================================================== */
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header{
  display:grid !important;
  grid-template-columns:minmax(220px,.82fr) minmax(320px,1.35fr) 176px max-content !important;
  grid-template-areas:"title search filter action" !important;
  align-items:center !important;
  gap:10px !important;
  min-height:74px !important;
  padding:12px 18px !important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
  border-bottom:1px solid #e5edf7 !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-head-row,
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-top-actions{display:contents !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-title-wrap{grid-area:title !important;min-width:0 !important;gap:10px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-actions-top{grid-area:action !important;display:flex !important;justify-content:flex-end !important;margin:0 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox{grid-area:search !important;min-width:0 !important;margin:0 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-filterbox{grid-area:filter !important;min-width:0 !important;margin:0 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-title-icon{width:34px !important;height:34px !important;border-radius:13px !important;font-size:18px !important;background:#eef2ff !important;color:#4f46e5 !important;box-shadow:0 8px 16px rgba(79,70,229,.08) !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title-copy{min-width:0 !important;padding-top:0 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title{display:flex !important;align-items:center !important;gap:7px !important;margin:0 !important;color:#111827 !important;font-size:1.02rem !important;line-height:1.08 !important;font-weight:600 !important;letter-spacing:-.02em !important;white-space:nowrap !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title-sub{margin-top:3px !important;max-width:330px !important;color:#64748b !important;font-size:.705rem !important;line-height:1.1 !important;font-weight:400 !important;white-space:nowrap !important;overflow:hidden !important;text-overflow:ellipsis !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-count-pill{min-width:24px !important;height:24px !important;padding:0 8px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;border-radius:999px !important;font-size:.72rem !important;font-weight:500 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-btn-sales-pos{height:42px !important;min-height:42px !important;border:0 !important;border-radius:14px !important;padding:0 15px 0 11px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;white-space:nowrap !important;color:#fff !important;font-size:.88rem !important;font-weight:600 !important;background:linear-gradient(135deg,#2563eb 0%,#4f46e5 100%) !important;box-shadow:0 12px 22px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-btn-sales-pos:hover{transform:translateY(-1px) !important;box-shadow:0 16px 28px rgba(37,99,235,.24), inset 0 1px 0 rgba(255,255,255,.22) !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-btn-sales-pos .tf-btn-icon{width:25px !important;height:25px !important;border-radius:9px !important;display:grid !important;place-items:center !important;background:rgba(255,255,255,.16) !important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18) !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox .tf-icon-left,
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-filterbox .tf-icon-left{left:8px !important;width:29px !important;height:29px !important;border-radius:11px !important;display:grid !important;place-items:center !important;color:#49617d !important;background:#f8fafc !important;border:1px solid #e5edf7 !important;font-size:17px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox.has-icon-left .form-control,
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-filterbox.has-icon-left .form-select{padding-left:47px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox .form-control,
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-filterbox .form-select{height:42px !important;min-height:42px !important;border-radius:14px !important;border-color:#dbe5f0 !important;background:#fff !important;color:#1f2937 !important;font-size:.86rem !important;font-weight:400 !important;box-shadow:0 6px 14px rgba(15,23,42,.028) !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox .form-control::placeholder{color:#b8c2d1 !important;font-weight:400 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox .form-control:focus,
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-filterbox .form-select:focus{border-color:#93c5fd !important;box-shadow:0 0 0 4px rgba(37,99,235,.10) !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-body{padding-top:14px !important;}

/* Tabla ventas: centrada, más ligera y menos cansada visualmente */
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table thead th{text-align:center !important;color:#334155 !important;font-size:.70rem !important;line-height:1.1 !important;font-weight:500 !important;letter-spacing:.055em !important;background:#f1f5f9 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table tbody td{text-align:center !important;color:#334155 !important;font-size:.875rem !important;font-weight:400 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sale-folio,
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sale-main,
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sale-money{color:#111827 !important;font-weight:500 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sale-sub{color:#64748b !important;font-weight:400 !important;justify-content:center !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sale-plus{font-weight:600 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-badge{font-weight:500 !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-action-row{justify-content:center !important;margin-left:auto !important;margin-right:auto !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-action-row .btn{border-radius:12px !important;box-shadow:0 5px 12px rgba(15,23,42,.035) !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-user-footer,
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-user-footer span,
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-user-footer small,
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-user-pager{font-weight:400 !important;color:#64748b !important;}

@media(max-width:1180px) and (min-width:769px){
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header{grid-template-columns:minmax(220px,1fr) 176px max-content !important;grid-template-areas:"title filter action" "search search search" !important;min-height:112px !important;}
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title-sub{max-width:360px !important;}
}
@media(max-width:768px){
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header{grid-template-columns:1fr !important;grid-template-areas:"title" "search" "filter" "action" !important;gap:9px !important;min-height:0 !important;padding:12px !important;}
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-actions-top,
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-btn-sales-pos{width:100% !important;}
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title-sub{max-width:100% !important;white-space:normal !important;}
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-body{padding-top:12px !important;}
  .tf-user-page.tf-v26-scope.tf-sales-history-page #ventasRows tr.tf-d-row td,
  .tf-user-page.tf-v26-scope.tf-sales-history-page #ventasRows .tf-sale-main,
  .tf-user-page.tf-v26-scope.tf-sales-history-page #ventasRows .tf-sale-money,
  .tf-user-page.tf-v26-scope.tf-sales-history-page #ventasRows .tf-sale-sub{text-align:left !important;justify-content:flex-start !important;}
}

/* =====================================================
   PASO 09B — Ventas historial: igualar layout visual con Usuarios
   Motivo: el paso 09 aplicó una variante parecida, pero no idéntica.
   Aquí se igualan proporciones, padding, alto del header y tabla sin scrollbar
   innecesario en escritorio. Scopeado solo a ventas historial.
   ===================================================== */
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header{
  display:grid !important;
  grid-template-columns:minmax(238px,max-content) minmax(320px,1fr) 168px max-content !important;
  grid-template-areas:"title search filter action" !important;
  align-items:center !important;
  gap:10px 12px !important;
  min-height:72px !important;
  padding:12px 16px !important;
  border-bottom:1px solid rgba(226,232,240,.82) !important;
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-head-row,
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-top-actions{
  display:contents !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-title-wrap{
  grid-area:title !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-actions-top{
  grid-area:action !important;
  margin:0 !important;
  justify-self:end !important;
  align-self:center !important;
  display:flex !important;
  justify-content:flex-end !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox{
  grid-area:search !important;
  min-width:0 !important;
  margin:0 !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-filterbox{
  grid-area:filter !important;
  min-width:0 !important;
  margin:0 !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-title-icon{
  width:34px !important;
  height:34px !important;
  border-radius:13px !important;
  font-size:18px !important;
  box-shadow:0 8px 16px rgba(79,70,229,.08) !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title-copy{
  min-width:0 !important;
  padding-top:0 !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title{
  font-size:1.02rem !important;
  line-height:1.08 !important;
  margin:0 !important;
  gap:7px !important;
  white-space:nowrap !important;
  font-weight:600 !important;
  letter-spacing:-.02em !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title-sub{
  margin-top:3px !important;
  font-size:.705rem !important;
  line-height:1.1 !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:260px !important;
  font-weight:400 !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-count-pill{
  min-width:24px !important;
  height:24px !important;
  padding:0 8px !important;
  font-size:.72rem !important;
  font-weight:500 !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-btn-sales-pos{
  height:42px !important;
  min-height:42px !important;
  border-radius:14px !important;
  padding:0 15px 0 11px !important;
  white-space:nowrap !important;
  font-size:.88rem !important;
  font-weight:600 !important;
  box-shadow:0 12px 22px rgba(37,99,235,.18), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-btn-sales-pos .tf-btn-icon{
  width:25px !important;
  height:25px !important;
  border-radius:9px !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox .tf-icon-left,
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-filterbox .tf-icon-left{
  left:8px !important;
  width:29px !important;
  height:29px !important;
  border-radius:11px !important;
  font-size:17px !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox.has-icon-left .form-control,
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-filterbox.has-icon-left .form-select{
  padding-left:47px !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox .form-control,
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-filterbox .form-select{
  height:42px !important;
  min-height:42px !important;
  border-radius:14px !important;
  font-size:.86rem !important;
  font-weight:400 !important;
  box-shadow:0 6px 14px rgba(15,23,42,.028) !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-searchbox .form-control::placeholder{
  color:#b8c2d1 !important;
  font-weight:400 !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-body{
  padding-top:14px !important;
}

/* La diferencia más visible era esta: Ventas conservaba min-width de 1180px
   y una columna Acciones de 246px desde CSS viejo; eso generaba scrollbar y
   hacía que la tabla se viera distinta a Usuarios aunque el header fuera parecido. */
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-table-scroll{
  overflow-x:auto !important;
  overflow-y:visible !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table{
  width:100% !important;
  min-width:980px !important;
  table-layout:fixed !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table col.col-folio{width:92px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table col.col-fecha{width:160px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table col.col-total{width:120px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table col.col-metodo{width:125px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table col.col-estado{width:130px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table col.col-sucursal{width:auto !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table col.col-vendedor{width:150px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table col.col-acciones{width:154px !important;}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table th:last-child,
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table td:last-child{
  width:154px !important;
  min-width:154px !important;
  max-width:154px !important;
  text-align:center !important;
  padding-left:8px !important;
  padding-right:8px !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-action-row{
  min-width:0 !important;
  width:max-content !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  justify-content:center !important;
  gap:7px !important;
}
.tf-user-page.tf-v26-scope.tf-sales-history-page .tf-action-row .btn{
  flex:0 0 38px !important;
  width:38px !important;
  min-width:38px !important;
  height:36px !important;
  border-radius:12px !important;
}

@media(max-width:1180px) and (min-width:769px){
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header{
    grid-template-columns:minmax(220px,1fr) 168px max-content !important;
    grid-template-areas:
      "title filter action"
      "search search search" !important;
    min-height:112px !important;
  }
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title-sub{
    max-width:360px !important;
  }
  .tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table{
    min-width:980px !important;
  }
}
@media(max-width:768px){
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header{
    grid-template-columns:1fr !important;
    grid-template-areas:
      "title"
      "search"
      "filter"
      "action" !important;
    gap:9px !important;
    min-height:0 !important;
    padding:12px !important;
  }
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-sales-actions-top,
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-btn-sales-pos{
    width:100% !important;
  }
  .tf-user-page.tf-v26-scope.tf-sales-history-page > .card.radius-10 > .card-header .tf-title-sub{
    max-width:100% !important;
    white-space:normal !important;
  }
  .tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table{
    min-width:0 !important;
  }
  .tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table th:last-child,
  .tf-user-page.tf-v26-scope.tf-sales-history-page .tf-sales-history-table td:last-child{
    width:auto !important;
    min-width:0 !important;
    max-width:none !important;
  }
}