/* vistas/assets/css/plantilla.layout.css
 * CSS separado desde plantilla.php
 * ✅ Limpio: sin duplicados, sin PHP, sin choques
 * ✅ Sidebar scoping: SOLO afecta cuando existe .wrapper (no standalone)
 */

/* =========================================================
   0) Variables fallback (por si no están definidas en otro global)
   ========================================================= */
:root{
  --tf-brand:#4f46e5;
  --tf-ease-out:cubic-bezier(.16,1,.3,1);

  --tf-bg-body:#f6f7fb;
  --tf-bg-surface:#ffffff;

  --tf-text-main:#0f172a;
  --tf-text-muted:#64748b;

  --tf-border-light:rgba(2,6,23,.08);
  --tf-border-input:#e5e7eb;

  --tf-shadow-sm:0 2px 10px rgba(2,6,23,.06);
  --tf-shadow-xl:0 24px 70px rgba(2,6,23,.16);
}

/* =========================================================
   1) SAAS PREMIUM HEADER ACTIONS
   ========================================================= */
.tf-header-actions{
  background: var(--tf-bg-surface);
  border: 1px solid var(--tf-border-light);
  border-radius: 999px;
  padding: 5px 6px;
  box-shadow: 0 2px 8px rgba(15,23,42,.03);
  gap: 8px;
}

.tf-support-group{
  display:flex;
  align-items:center;
  gap: 4px;
  padding-left: 6px;
}

.tf-action-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 600;
  text-decoration:none;
  transition: all .2s var(--tf-ease-out);
  color: var(--tf-text-muted);
}
.tf-action-btn i{ font-size: 1.15rem; }
.tf-action-btn img{ width:16px; height:16px; object-fit:contain; }

.tf-btn-wa:hover{ background:#ecfdf5; color:#059669; }
.tf-btn-tg:hover{ background:#f0f9ff; color:#0284c7; }
.tf-btn-faq{ padding:0 8px; }
.tf-btn-faq:hover{ background:#f1f5f9; color: var(--tf-text-main); }

.tf-action-divider{
  width:1px;
  height:18px;
  background: var(--tf-border-light);
  margin: 0 6px;
}

/* CTA Renovar */
.tf-btn-renew{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  height: 32px;
  padding: 0 16px;
  border-radius: 999px;
  font-size: .8125rem;
  font-weight: 800;
  text-decoration:none;
  background: linear-gradient(135deg,#4f46e5 0%,#8b5cf6 100%);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(79,70,229,.30);
  transition: all .2s var(--tf-ease-out);
}
.tf-btn-renew:hover{
  box-shadow: 0 6px 16px rgba(79,70,229,.40);
  transform: translateY(-1px);
}
.tf-btn-renew:active{
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(79,70,229,.30);
}
.tf-btn-renew i{ font-size: 1.1rem; color:#fef08a; }

/* Badges suscripción (única definición) */
.badge-sub{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  white-space: nowrap;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  transition: all .25s var(--tf-ease-out);
  border: 1px solid transparent;
}
.badge-sub i{ font-size: .95rem; }
.badge-green{ color:#065f46; background:#d1fae5; border-color: rgba(16,185,129,.30); }
.badge-amber{ color:#92400e; background:#fef3c7; border-color: rgba(245,158,11,.30); }
.badge-red{ color:#991b1b; background:#fee2e2; border-color: rgba(239,68,68,.30); }

/* =========================================================
   2) USER DROPDOWN (única versión)
   ========================================================= */
.tf-user-dropdown{
  position: relative;
  margin-left: 1rem;
  display:flex;
  align-items:center;
}
.tf-user-toggle{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  background: var(--tf-bg-surface);
  border: 1px solid var(--tf-border-light);
  border-radius: 999px;
  cursor: pointer;
  text-decoration:none;
  color: inherit;
  box-shadow: 0 2px 8px rgba(15,23,42,.03);
  transition: all .2s var(--tf-ease-out);
  height: 44px;
}
.tf-user-toggle:hover,
.tf-user-toggle[aria-expanded="true"]{
  background: var(--tf-bg-body);
  border-color: var(--tf-border-input);
}

.tf-user-img{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  box-shadow: var(--tf-shadow-sm);
}
.tf-user-info{ text-align:left; }
.tf-user-name{
  font-weight: 700;
  font-size: .875rem;
  color: var(--tf-text-main);
}
.tf-user-role{
  font-size: .75rem;
  color: var(--tf-text-muted);
  font-weight: 600;
}

.tf-dd-menu{
  position:absolute;
  right:0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 8px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.05);
  background: rgba(255,255,255,.98);
  backdrop-filter: blur(20px);
  box-shadow: var(--tf-shadow-xl);
  display:none;
  z-index: 1000;

  opacity: 0;
  transform: translateY(-10px) scale(.98);
  transform-origin: top right;
  transition: opacity .2s var(--tf-ease-out), transform .2s var(--tf-ease-out);
}
.tf-dd-menu.show{
  display:block;
  opacity: 1;
  transform: translateY(0) scale(1);
}

.tf-dd-item{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  font-weight: 600;
  font-size: .875rem;
  color: var(--tf-text-main);
  text-decoration:none;
  transition: all .15s ease;
}
.tf-dd-item i{
  font-size: 1.1rem;
  color: var(--tf-text-muted);
  transition: color .15s;
}
.tf-dd-item:hover{
  background: var(--tf-bg-body);
  color: var(--tf-brand);
}
.tf-dd-item:hover i{ color: var(--tf-brand); }

/* =========================================================
   3) SIDEBAR RESPONSIVE (scoped SOLO a .wrapper)
   ========================================================= */

/* Desktop collapse */
.wrapper.toggled .sidebar-wrapper{ width:72px; }
.wrapper.toggled .sidebar-wrapper .menu-title{ display:none; }
.wrapper.toggled .sidebar-wrapper .metismenu>li>a{
  justify-content:center;
  padding:10px 14px;
}
.wrapper.toggled .sidebar-wrapper .parent-icon{ margin-right:0; }
.wrapper.toggled .page-wrapper{ margin-left:72px; }
.wrapper.toggled.sidebar-hovered .page-wrapper{ margin-left:260px; }

@media (min-width: 992px){
  .wrapper.toggled.sidebar-hovered .sidebar-wrapper{ width:260px; }
  .wrapper.toggled.sidebar-hovered .sidebar-wrapper .menu-title{ display:inline-block; }
  .wrapper.toggled.sidebar-hovered .sidebar-wrapper .metismenu>li>a{ justify-content:flex-start; }
  .wrapper.toggled.sidebar-hovered #menu .mm-collapse.mm-show{
    display:block;
    height:auto !important;
  }
}

/* Mobile drawer */
@media (max-width: 991.98px){
  .wrapper .sidebar-wrapper{
    position: fixed;
    inset: 0 auto 0 0;
    width: 260px;
    transform: translateX(-100%);
    transition: transform .2s ease-in-out;
    z-index: 1040;
  }
  .wrapper.sidebar-open .sidebar-wrapper{ transform: translateX(0); }

  .wrapper .overlay.overlay-panel{
    display:none;
    position: fixed;
    inset:0;
    background: rgba(2,6,23,.45);
    z-index: 1039;
  }
  .wrapper.sidebar-open .overlay.overlay-panel{ display:block; }

  .wrapper.toggled .sidebar-wrapper{
    width: 260px;
    transform: translateX(-100%);
  }
  .wrapper.toggled .page-wrapper{ margin-left:0; }
}

/* =========================================================
   4) LOGO SIDEBAR
   ========================================================= */
.logo-techflow{
  width: 70%;
  max-width: 130px;
  height:auto;
  display:block;
  margin: 8px auto 5px;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.3));
  transition: all .3s ease;
}
.logo-techflow:hover{
  transform: scale(1.05);
  filter: drop-shadow(0 0 6px rgba(255,255,255,.5));
}
.logo-text{
  color:#fff;
  font-weight: 700;
  letter-spacing:.5px;
  font-size: 1rem;
  margin-bottom: 8px;
}
.sidebar-header{
  padding: 10px 0;
  text-align:center;
  background: transparent;
}
@media (max-width: 992px){
  .logo-techflow{ width:60%; max-width:90px; }
  .logo-text{ font-size:.9rem; }
}

/* =========================================================
   5) Overlay éxito global (si lo sigues usando)
   ========================================================= */
#globalSuccessOverlay{
  position:fixed;
  inset:0;
  background: rgba(0,0,0,.45);
  z-index: 20000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:16px;
}
#globalSuccessOverlay .successCard{
  background:#fff;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0,0,0,.28);
  width:100%;
  max-width: 480px;
  text-align:center;
  padding: 32px 24px 28px;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:#1e293b;
}
#globalSuccessOverlay .successIcon{
  width:80px; height:80px;
  border-radius:999px;
  border:3px solid #c7f3cd;
  background:#f6fffa;
  color:#22c55e;
  font-size: 42px;
  font-weight: 800;
  display:flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto 20px;
  line-height: 1;
}
#globalSuccessOverlay .successTitle{
  font-size: 1.5rem;
  font-weight: 800;
  color:#1e293b;
  margin:0;
}

/* SweetAlert2 helper label (solo si lo usas) */
.swal2-label-novolver{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  margin-top:12px;
  font-size:.85rem;
  color:#4b5563;
}

/* =========================================================
   6) MODAL SUCURSAL (TF PRO)
   ========================================================= */
.tf-modal-pro .modal-dialog{ max-width: 900px; }

#modalSucursalObligatoria .modal-dialog{
  max-width: 680px !important;
  width: calc(100% - 1.5rem) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media (min-width: 1200px){
  #modalSucursalObligatoria .modal-dialog{ max-width: 700px !important; }
}

.tf-modal-pro .modal-content{
  border-radius: 20px;
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: 0 24px 70px rgba(15,23,42,.22);
  overflow:hidden;
}
.tf-modal-pro .modal-header{
  border-bottom: 1px solid rgba(148,163,184,.35);
  padding: 14px 18px;
  background:#fff;
}
.tf-modal-pro .modal-title{
  font-weight: 900;
  color:#0f172a;
  font-size: 1.05rem;
}
.tf-modal-pro .tf-modal-chip{
  width: 34px; height:34px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(79,70,229,.10);
  color: #4f46e5;
  box-shadow: 0 10px 25px rgba(79,70,229,.18);
  font-size: 18px;
}
.tf-modal-pro .tf-modal-subtitle{
  font-size:.86rem;
  color:#64748b;
}
.tf-modal-pro .modal-body{ padding: 18px 18px 14px; background:#fff; }
.tf-modal-pro .modal-footer{
  border-top: 1px solid rgba(148,163,184,.35);
  padding: 12px 18px 16px;
  background:#f8fafc;
}
.tf-modal-pro .tf-field-hint{
  font-size:.78rem;
  color:#64748b;
  margin-top:6px;
}
.tf-modal-pro .tf-field-error{
  min-height: 16px;
  margin-top: 6px;
  font-size:.78rem;
  color:#ef4444;
  display:none;
}
.tf-modal-pro .is-invalid{
  border-color: rgba(239,68,68,.70) !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.12) !important;
}
.tf-modal-pro .tf-save-hint{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:#64748b;
  font-size:.85rem;
}

/* preview logo */
#logoPreviewWrapperOblig{ text-align:center; }
#logoPreviewWrapperOblig img{
  max-height:80px;
  max-width:100%;
  border-radius:8px;
  border:1px solid rgba(0,0,0,.1);
  background:#fff;
  padding:6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* =========================================================
   7) ASISTENTE / TOUR Sucursal (TF Tour sticky)
   ========================================================= */
.tf-tour{
  position: sticky;
  top: 0;
  z-index: 20;
  margin-bottom: 12px;
  display:none;
}
.tf-tour.is-open{ display:block; }

.tf-tour-card{
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.35);
  background:#fff;
  box-shadow: 0 18px 45px rgba(15,23,42,.10);
  padding: 12px 12px 10px;
}
.tf-tour-top{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.tf-tour-avatar{
  width:40px; height:40px;
  border-radius:14px;
  background: rgba(79,70,229,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  flex: 0 0 auto;
}
.tf-tour-head{ flex:1 1 auto; }
.tf-tour-title{ font-weight: 950; color:#0f172a; }
.tf-tour-sub{ color:#64748b; font-size:.82rem; margin-top:2px; }
.tf-tour-skip{
  border:0;
  background: transparent;
  color:#64748b;
  font-weight: 800;
  font-size:.82rem;
  padding: 6px 8px;
}
.tf-tour-body{
  margin-top: 8px;
  color:#334155;
  font-size:.9rem;
  line-height: 1.35;
}
.tf-tour-foot{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.tf-tour-progress{ display:flex; align-items:center; gap:6px; }
.tf-tour-dot{
  width:8px; height:8px;
  border-radius:999px;
  background: rgba(100,116,139,.28);
}
.tf-tour-dot.is-on{ background: rgba(79,70,229,.95); }
.tf-tour-highlight{
  outline: 3px solid rgba(79,70,229,.22);
  border-radius: 16px;
  box-shadow: 0 0 0 6px rgba(79,70,229,.12);
  transition: box-shadow .15s ease, outline .15s ease;
}

/* =========================================================
   8) FLOATING LABELS (Outlined / Notch)
   ========================================================= */
.tf-input-modern.tf-gfloat{
  position:relative;
  width:100%;
  border-radius:14px;
  background:#fff;
}

.tf-input-modern.tf-gfloat .form-control,
.tf-input-modern.tf-gfloat .form-select,
.tf-input-modern.tf-gfloat textarea{
  width:100%;
  min-height:48px;
  height:48px;
  border-radius:14px;
  border:1px solid #e5e7eb;
  background:transparent;
  box-shadow:none !important;
  outline:0 !important;

  padding: 0 14px;
  font-weight: 700;
  color:#0f172a;

  transition: border-color .18s ease, box-shadow .18s ease;
}

.tf-input-modern.tf-gfloat .form-select{
  padding-top:14px;
  padding-bottom:8px;
  line-height:1.1;
}

.tf-input-modern.tf-gfloat textarea{
  height:auto;
  min-height:90px;
  padding-top:18px;
  padding-bottom:12px;
  resize:vertical;
}

.tf-input-modern.tf-gfloat .form-control::placeholder,
.tf-input-modern.tf-gfloat textarea::placeholder{ color:transparent; }

/* icon left */
.tf-input-modern.tf-gfloat.has-icon-left .tf-icon-left{
  position:absolute;
  left:14px;
  top:50%;
  transform: translateY(-50%);
  font-size: 18px;
  opacity:.75;
  pointer-events:none;
  color:#64748b;
}
.tf-input-modern.tf-gfloat.has-icon-left .form-control,
.tf-input-modern.tf-gfloat.has-icon-left .form-select,
.tf-input-modern.tf-gfloat.has-icon-left textarea{
  padding-left:44px;
}

/* label */
.tf-input-modern.tf-gfloat .tf-gfloat-label{
  position:absolute;
  left:12px;
  top:50%;
  transform: translateY(-50%);
  pointer-events:none;

  font-size:.92rem;
  font-weight: 800;
  color:#64748b;

  padding: 0 8px;
  background:#fff;
  border-radius: 999px;

  transition: all .16s ease;
  line-height:1;
}
.tf-input-modern.tf-gfloat.has-icon-left .tf-gfloat-label{ left:38px; }

/* focus */
.tf-input-modern.tf-gfloat .form-control:focus,
.tf-input-modern.tf-gfloat textarea:focus,
.tf-input-modern.tf-gfloat .form-select:focus{
  border-color: var(--tf-brand);
  box-shadow: 0 0 0 4px rgba(79,70,229,.14) !important;
}

/* float states */
.tf-input-modern.tf-gfloat .form-control:focus + .tf-gfloat-label,
.tf-input-modern.tf-gfloat textarea:focus + .tf-gfloat-label,
.tf-input-modern.tf-gfloat .form-select:focus + .tf-gfloat-label,
.tf-input-modern.tf-gfloat .form-control:not(:placeholder-shown) + .tf-gfloat-label,
.tf-input-modern.tf-gfloat textarea:not(:placeholder-shown) + .tf-gfloat-label,
.tf-input-modern.tf-gfloat.is-filled .tf-gfloat-label{
  top:-8px;
  transform:none;
  font-size:.74rem;
  color: var(--tf-brand);
}

/* filled border subtle */
.tf-input-modern.tf-gfloat.is-filled .form-control,
.tf-input-modern.tf-gfloat.is-filled textarea,
.tf-input-modern.tf-gfloat.is-filled .form-select{
  border-color:#c7d2fe;
}

/* disabled */
.tf-input-modern.tf-gfloat .form-control:disabled,
.tf-input-modern.tf-gfloat .form-select:disabled,
.tf-input-modern.tf-gfloat textarea:disabled{
  background:#f8fafc;
  color:#64748b;
  cursor:not-allowed;
}
.tf-input-modern.tf-gfloat .form-control:disabled + .tf-gfloat-label,
.tf-input-modern.tf-gfloat .form-select:disabled + .tf-gfloat-label,
.tf-input-modern.tf-gfloat textarea:disabled + .tf-gfloat-label{
  color:#94a3b8;
  background:#f8fafc;
}

/* invalid */
.tf-input-modern.tf-gfloat .is-invalid,
.tf-input-modern.tf-gfloat.tf-invalid .form-control,
.tf-input-modern.tf-gfloat.tf-invalid .form-select,
.tf-input-modern.tf-gfloat.tf-invalid textarea{
  border-color:#ef4444 !important;
  box-shadow: 0 0 0 4px rgba(239,68,68,.12) !important;
}
.tf-input-modern.tf-gfloat .is-invalid + .tf-gfloat-label,
.tf-input-modern.tf-gfloat.tf-invalid .tf-gfloat-label{
  color:#ef4444 !important;
}

/* =========================================================
   9) LOGO UPLOADER (MODAL TIPO GALERÍA)
   ========================================================= */
.tf-logo-modal{ border-radius:18px; overflow:hidden; }
.tf-logo-modal .modal-header{
  background:#fff;
  border-bottom: 1px solid rgba(148,163,184,.25);
}
.tf-logo-modal .modal-body{ background:#fff; }

.tf-logo-gal-grid{
  display:grid;
  grid-template-columns: 220px 1fr;
  gap: 14px;
  align-items: stretch;
}
@media (max-width: 992px){
  .tf-logo-gal-grid{ grid-template-columns: 1fr; }
}

.tf-logo-gal-drop{
  border: 1px dashed rgba(148,163,184,.55);
  border-radius: 16px;
  background: rgba(79,70,229,.04);
  padding: 14px;
  min-height: 210px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap: 6px;
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.tf-logo-gal-drop:hover{
  border-color: rgba(79,70,229,.55);
  background: rgba(79,70,229,.08);
  transform: translateY(-1px);
}
.tf-logo-gal-drop.is-dragover{
  border-color: rgba(79,70,229,.75);
  background: rgba(79,70,229,.12);
}
.tf-logo-gal-ic{
  width:44px; height:44px;
  border-radius:14px;
  background: rgba(79,70,229,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 6px;
}
.tf-logo-gal-ic i{ font-size:22px; color: var(--tf-brand); }
.tf-logo-gal-h{ font-weight: 950; color:#0f172a; }
.tf-logo-gal-sub{ font-size:.86rem; color:#475569; }
.tf-logo-gal-meta{ font-size:.78rem; font-weight: 900; color:#64748b; }

.tf-logo-gal-panel{
  position:relative;
  border: 1px solid rgba(148,163,184,.35);
  border-radius: 16px;
  background:#fff;
  padding: 12px;
  display:flex;
  flex-direction:column;
  min-height: 210px;
}
.tf-logo-gal-x{
  position:absolute;
  top:10px; right:10px;
  width:34px; height:34px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.35);
  background:#fff;
  color:#334155;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow: 0 10px 25px rgba(15,23,42,.10);
}
.tf-logo-gal-x:hover{ background: rgba(148,163,184,.10); }
.tf-logo-gal-x:disabled{ opacity:.45; box-shadow:none; }

.tf-logo-gal-preview{
  flex: 1;
  border-radius: 14px;
  border: 1px dashed rgba(148,163,184,.35);
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 14px;
}
.tf-logo-gal-preview img{
  max-width:100%;
  max-height:180px;
  object-fit: contain;
  display:none;
}
.tf-logo-gal-empty{
  display:flex;
  align-items:center;
  gap: 10px;
  color:#64748b;
}
.tf-logo-gal-empty i{ font-size:28px; }
.tf-empty-h{ font-weight: 950; color:#0f172a; }
.tf-empty-sub{ font-size:.82rem; color:#64748b; margin-top:2px; }

.tf-logo-gal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding-top: 10px;
}
.tf-logo-gal-file{
  font-size:.82rem;
  color:#334155;
  font-weight: 900;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
.tf-logo-gal-links{
  display:flex;
  gap:10px;
  align-items:center;
}
.tf-logo-gal-links .tf-link{
  font-weight: 950;
  font-size:.82rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tf-logo-gal-links .tf-link:disabled{ opacity:.5; pointer-events:none; }

.tf-logo-gal-actions{
  display:flex;
  justify-content:flex-end;
  gap: 10px;
  padding-top: 12px;
}
.tf-logo-gal-actions .btn{
  border-radius: 12px;
  font-weight: 900;
}

/* =========================================================
   10) TOAST HOST
   ========================================================= */
.tf-toast-host{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 20000;
  display:flex;
  flex-direction:column;
  gap: 10px;
  pointer-events:none;
}
.tf-toast{
  pointer-events:auto;
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width: 300px;
  max-width: 440px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 18px 50px rgba(15,23,42,.14);
  transform: translateY(10px);
  opacity:0;
  transition: transform .22s ease, opacity .22s ease;
}
.tf-toast.is-in{ transform: translateY(0); opacity:1; }
.tf-toast.is-leaving{ transform: translateY(10px); opacity:0; }

.tf-toast-ic{
  width:34px; height:34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 950;
  flex: 0 0 34px;
}
.tf-toast-success .tf-toast-ic{ background: rgba(34,197,94,.14); color:#16a34a; }
.tf-toast-error .tf-toast-ic{ background: rgba(239,68,68,.14); color:#dc2626; }
.tf-toast-info .tf-toast-ic{ background: rgba(59,130,246,.14); color:#2563eb; }

.tf-toast-title{
  font-weight: 950;
  font-size: 14px;
  margin:0 0 2px;
}
.tf-toast-msg{
  font-weight: 700;
  font-size: 13px;
  color:#475569;
  line-height: 1.25;
}
.tf-toast-x{
  margin-left:auto;
  border:0;
  background: transparent;
  color:#94a3b8;
  font-size: 22px;
  line-height: 1;
  padding: 0 6px;
  cursor:pointer;
}
.tf-toast-x:hover{ color:#334155; }

/* =========================================================
   11) DASHBOARD TOUR (SaaS Pro)
   ========================================================= */
.tf-dash-tour{
  position: fixed;
  inset: 0;
  z-index: 19000;
  display:none;
}
.tf-dash-tour.is-open{ display:block; }

.tf-dash-tour .tf-dt-backdrop{
  position:absolute;
  inset:0;
  background: rgba(2,6,23,.58);
}
.tf-dash-tour .tf-dt-pop{
  position: fixed;
  width: min(420px, calc(100vw - 24px));
  background:#fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
  padding: 14px 14px 12px;
  transform: translateY(8px);
  opacity:0;
  transition: transform .2s ease, opacity .2s ease;
}
.tf-dash-tour.is-open .tf-dt-pop{
  transform: translateY(0);
  opacity:1;
}

.tf-dt-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom: 6px;
}
.tf-dt-badge{
  width:34px; height:34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(79,70,229,.12);
  color: var(--tf-brand);
  font-weight: 950;
}
.tf-dt-title{
  font-weight: 950;
  font-size: 14.5px;
  margin:0;
}
.tf-dt-sub{
  color:#64748b;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.25;
  margin: 0 0 10px;
}
.tf-dt-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top: 10px;
}
.tf-dt-progress{
  color:#94a3b8;
  font-weight: 800;
  font-size: 12px;
}
.tf-dt-btns{ display:flex; gap:8px; }
.tf-dt-btn{
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  background:#fff;
  padding: 9px 12px;
  font-weight: 950;
  font-size: 13px;
  cursor:pointer;
}
.tf-dt-btn:hover{ background:#f8fafc; }
.tf-dt-btn.primary{
  background: var(--tf-brand);
  border-color: var(--tf-brand);
  color:#fff;
  box-shadow: 0 14px 28px rgba(79,70,229,.22);
}
.tf-dt-btn.primary:hover{ filter: brightness(.98); }

.tf-dt-highlight{
  position: relative;
  z-index: 19001 !important;
  border-radius: 16px !important;
  box-shadow: 0 0 0 6px rgba(255,255,255,.12);
  outline: 2px solid rgba(255,255,255,.18);
}

@media (max-width: 576px){
  .tf-dash-tour .tf-dt-pop{
    left: 12px !important;
    right: 12px !important;
    top: auto !important;
    bottom: 12px !important;
  }
}
.tf-v26-scope{
  --v26-bd: rgba(148,163,184,.35);
  --v26-bd2: rgba(226,232,240,.95);
  --v26-tx: #0f172a;
  --v26-muted:#64748b;

  /* look imagen 2 */
  --v26-shell:#f3f4f6;
  --v26-card:#ffffff;
  --v26-head:#e5e7eb;
  --v26-rowbd: rgba(226,232,240,.85);

  --v26-radius: 14px;
  --v26-radius-in: 12px;
  --v26-shadow: 0 10px 22px rgba(15,23,42,.06);

  font-family: Roboto, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ===== CONTENEDOR (marco suave como imagen 2) ===== */
.tf-v26-scope .tf-table-wrap{
  border: 1px solid var(--v26-bd2);
  border-radius: var(--v26-radius);
  background: var(--v26-shell);
  box-shadow: var(--v26-shadow);
  padding: 10px;
  overflow: hidden;
}

/* tabla “card” interna */
.tf-v26-scope .tf-premium-table{
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--v26-card);
  border-radius: var(--v26-radius-in);
  overflow: hidden;
  table-layout: fixed; /* clave: controlaremos anchos con nth-child */
}

/* ===== HEADER gris compacto ===== */
.tf-v26-scope .tf-premium-table thead th{
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--v26-head);
  border-bottom: 1px solid rgba(203,213,225,.9);
  color: #111827;
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 10px 12px;
  white-space: nowrap;
}

/* ===== ROWS compactas ===== */
.tf-v26-scope .tf-premium-table tbody td{
  border-bottom: 1px solid var(--v26-rowbd);
  padding: 10px 12px;
  vertical-align: middle;
  color: var(--v26-tx);
  font-size: .90rem;
  background: #fff;
  overflow: hidden;
}

.tf-v26-scope .tf-premium-table tbody tr.tf-d-row:hover td{
  background: rgba(79,70,229,.035);
}

/* =========================================================
   ✅ ANCHOS DE COLUMNAS (para que ACCIONES NO se aplaste)
   Ajusta si cambias el orden de columnas.
   Asumiendo: 1 Folio | 2 Cliente | 3 Tel | 4 Equipo | 5 Estado | 6 Fotos | 7 Acciones
   ========================================================= */
.tf-v26-scope .tf-premium-table thead th:nth-child(1),
.tf-v26-scope .tf-premium-table tbody td:nth-child(1){ width: 92px; }

.tf-v26-scope .tf-premium-table thead th:nth-child(2),
.tf-v26-scope .tf-premium-table tbody td:nth-child(2){ width: 190px; }

.tf-v26-scope .tf-premium-table thead th:nth-child(3),
.tf-v26-scope .tf-premium-table tbody td:nth-child(3){ width: 160px; }

.tf-v26-scope .tf-premium-table thead th:nth-child(4),
.tf-v26-scope .tf-premium-table tbody td:nth-child(4){ width: 260px; }

.tf-v26-scope .tf-premium-table thead th:nth-child(5),
.tf-v26-scope .tf-premium-table tbody td:nth-child(5){ width: 150px; }

.tf-v26-scope .tf-premium-table thead th:nth-child(6),
.tf-v26-scope .tf-premium-table tbody td:nth-child(6){ width: 120px; }

/* 🔥 CLAVE: ACCIONES con ancho suficiente */
.tf-v26-scope .tf-premium-table thead th:nth-child(7),
.tf-v26-scope .tf-premium-table tbody td:nth-child(7){
  width: 260px;          /* aquí caben 6 botones compactos */
  overflow: visible;     /* evita que corte los botones */
}

/* En pantallas medianas, baja un poco el ancho pero permite wrap */
@media (max-width: 1200px){
  .tf-v26-scope .tf-premium-table thead th:nth-child(7),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(7){
    width: 230px;
  }
}

/* ===== BARRA LATERAL izquierda por fila ===== */
.tf-v26-scope .tf-premium-table tbody tr.tf-d-row td:first-child{
  position: relative;
  padding-left: 14px;
}
.tf-v26-scope .tf-premium-table tbody tr.tf-d-row{ --tf-row-accent:#fb923c; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-1{ --tf-row-accent:#ef4444; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-2{ --tf-row-accent:#3b82f6; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-3{ --tf-row-accent:#22c55e; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-4{ --tf-row-accent:#f97316; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-5{ --tf-row-accent:#dc2626; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-6{ --tf-row-accent:#a855f7; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-7{ --tf-row-accent:#06b6d4; }

.tf-v26-scope .tf-premium-table tbody tr.tf-d-row td:first-child::before{
  content:"";
  position:absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 4px;
  border-radius: 999px;
  background: var(--tf-row-accent);
  opacity: .95;
}

/* Detalle expandido también hereda el accent */
.tf-v26-scope tr.tf-d-detail{ --tf-row-accent: var(--tf-row-accent, #fb923c); }
.tf-v26-scope tr.tf-d-detail td{
  background: rgba(79,70,229,.06);
}
.tf-v26-scope tr.tf-d-detail td::before{
  content:"";
  position:absolute;
  left: 0;
  top: 10px;
  bottom: 10px;
  width: 4px;
  border-radius: 999px;
  background: var(--tf-row-accent);
  opacity: .95;
}

/* ===== FOLIO ===== */
.tf-v26-scope .tf-folio-cell{
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.tf-v26-scope .tf-btn-expand{
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.55);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .12s ease;
}
.tf-v26-scope .tf-btn-expand:hover{
  transform: translateY(-1px);
  border-color: rgba(79,70,229,.55);
  box-shadow: 0 10px 18px rgba(79,70,229,.10);
}
.tf-v26-scope .tf-btn-expand i{ font-size: .95rem; }

.tf-v26-scope .tf-folio-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  font-weight: 600;
  color: #111827;
  font-size: .86rem;
  white-space: nowrap;
}

/* ===== textos ===== */
.tf-v26-scope .tf-primary{
  font-weight: 600;
  color: #0f172a;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: .92rem;
}
.tf-v26-scope .tf-secondary{
  margin-top: 2px;
  color: var(--v26-muted);
  font-weight: 700;
  font-size: .82rem;
  display:flex;
  align-items:center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== Estado badge ===== */
.tf-v26-scope .tf-status-badge{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(226,232,240,.95);
  background: #fff;
  font-weight: 600;
  font-size: .80rem;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.tf-v26-scope .tf-status-dot{
  width: 8px; height: 8px;
  border-radius: 999px;
  background: currentColor;
}

/* colores estado */
.tf-v26-scope .tf-st-1{ background:#fff1f2; border-color:#fecdd3; color:#be123c; }
.tf-v26-scope .tf-st-2{ background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.tf-v26-scope .tf-st-3{ background:#ecfdf5; border-color:#bbf7d0; color:#15803d; }
.tf-v26-scope .tf-st-4{ background:#fff7ed; border-color:#fed7aa; color:#9a3412; }
.tf-v26-scope .tf-st-5{ background:#fef2f2; border-color:#fecaca; color:#991b1b; }
.tf-v26-scope .tf-st-6{ background:#f5f3ff; border-color:#ddd6fe; color:#5b21b6; }
.tf-v26-scope .tf-st-7{ background:#ecfeff; border-color:#a5f3fc; color:#155e75; }

/* ===== Fotos ===== */
.tf-v26-scope .tf-btn-fotos{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid rgba(59,130,246,.45);
  background:#fff;
  font-weight: 600;
  color: #2563eb;
  cursor:pointer;
  transition:.12s ease;
  height: 32px;
}
.tf-v26-scope .tf-btn-fotos:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(37,99,235,.10);
}
.tf-v26-scope .tf-badge-count,
.tf-v26-scope .tf-badge-zero{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 26px;
  height: 20px;
  padding: 0 8px;
  border-radius: 8px;
  font-size: .74rem;
  font-weight: 600;
}
.tf-v26-scope .tf-badge-count{
  background:#eff6ff;
  border: 1px solid #bfdbfe;
  color:#1d4ed8;
}
.tf-v26-scope .tf-badge-zero{
  background:#f1f5f9;
  border: 1px solid #e2e8f0;
  color:#475569;
}

/* =========================================================
   ✅ ACCIONES: que SI caben (compacto + wrap controlado)
   ========================================================= */
.tf-v26-scope .tf-actions-group{
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: transparent;
  border: 0;
  padding: 0;
  flex-wrap: wrap;      /* si algún día agregas más, baja a 2da línea */
  row-gap: 6px;
  column-gap: 6px;      /* espacio entre botones como imagen 2 */
  max-width: 100%;
}

/* Botón compacto (más pequeño que antes) */
.tf-v26-scope .tf-btn-action{
  width: 38px;
  height: 34px;
  border-radius: 6px;
  border: 1px solid rgba(226,232,240,.95);
  background: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#334155;
  cursor:pointer;
  transition: .12s ease;
  flex: 0 0 auto;
}

/* evita que el icono “empuje” */
.tf-v26-scope .tf-btn-action i{
  font-size: 1.3rem;
  line-height: 1;
}

/* hover pro */
.tf-v26-scope .tf-btn-action:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 16px rgba(15,23,42,.08);
}

/* Colores por acción (si no tienes clases, igual se verán blancos pero cabrán) */
.tf-v26-scope .tf-action-wa{ background:#22c55e; border-color:#22c55e; color:#fff; }
.tf-v26-scope .tf-action-print{ background:#f8fafc; border-color:#e2e8f0; color:#334155; }
.tf-v26-scope .tf-action-barcode{ background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
.tf-v26-scope .tf-action-gear{ background:#ecfeff; border-color:#a5f3fc; color:#0891b2; }
.tf-v26-scope .tf-action-edit{ background:#fff7ed; border-color:#fed7aa; color:#c2410c; }
.tf-v26-scope .tf-action-delete{ background:#fef2f2; border-color:#fecaca; color:#dc2626; }

/* =========================================================
   ✅ EXPAND / DETAIL: se vea como “vista ejemplo”
   - fondo suave gris
   - tarjetas compactas 2 columnas
   - sin “mega inputs”
   ========================================================= */
.tf-v26-scope tr.tf-d-detail{ display:none; }
.tf-v26-scope tr.tf-d-row.tf-row-open + tr.tf-d-detail{ display:table-row; }

.tf-v26-scope tr.tf-d-detail td{
  background: #eef2ff;       /* suave como tu captura */
  border-bottom: 1px solid var(--v26-rowbd);
  padding: 12px 12px 14px;
}

/* “marco” del detalle */
.tf-v26-scope .tf-d-card{
  background: transparent;
  border: 1px dashed rgba(148,163,184,.40);
  border-radius: 14px;
  padding: 12px;
}

/* cabecera del detalle */
.tf-v26-scope .tf-d-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tf-v26-scope .tf-d-title .t1{
  font-weight: 950;
  color:#0f172a;
  font-size: .95rem;
}
.tf-v26-scope .tf-d-title .t2{
  font-weight: 700;
  color:#64748b;
  font-size: .82rem;
  margin-top: 2px;
}

.tf-v26-scope .tf-d-chips{ display:flex; gap:8px; flex-wrap:wrap; }

.tf-v26-scope .tf-page-chip{
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background:#fff;
  border: 1px solid rgba(226,232,240,.95);
  font-weight: 600;
  color:#0f172a;
  font-size: .80rem;
}

/* body 2 columnas compactas */
.tf-v26-scope .tf-d-body{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 992px){
  .tf-v26-scope .tf-d-body{ grid-template-columns: 1fr; }
}

/* cajas del detalle (parecen “inputs” del ejemplo) */
.tf-v26-scope .tf-d-box{
  background:#fff;
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 6px 14px rgba(15,23,42,.04);
}

/* grid interno: etiqueta + valor */
.tf-v26-scope .tf-d-box .grid{
  display:grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 10px;
  align-items:center;
}
.tf-v26-scope .tf-d-k{
  color:#64748b;
  font-weight: 600;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.tf-v26-scope .tf-d-v{
  color:#0f172a;
  font-weight: 600;
  font-size: .88rem;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* notas */
.tf-v26-scope .tf-d-notes{
  grid-column: 1 / -1;
  background:#fff;
  border: 1px solid rgba(226,232,240,.95);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 6px 14px rgba(15,23,42,.04);
}
.tf-v26-scope .tf-d-notes .ttl{
  color:#64748b;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .76rem;
  margin-bottom: 6px;
}
.tf-v26-scope .tf-d-notes .txt{
  color:#0f172a;
  font-weight: 800;
  font-size: .88rem;
  white-space: pre-wrap;
  line-height: 1.5;
}

/* ===== pager ===== */
.tf-v26-scope .tf-server-pager{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid rgba(226,232,240,.95);
  background: rgba(243,244,246,.9);
  flex-wrap:wrap;
}
.tf-v26-scope .tf-server-pager button{
  border-radius: 10px;
  border: 1px solid rgba(226,232,240,.95);
  background:#fff;
  height: 34px;
  padding: 0 12px;
  font-weight: 600;
  cursor:pointer;
  transition: .12s ease;
}
.tf-v26-scope .tf-server-pager button:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}
.tf-v26-scope .tf-server-pager button:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}















/* =========================================================
   ✅ TECH-FLOW V2 — TOPBAR + BOTONES + MODALES (SIN TABLA)
   - Fix visual pro (toolbar arriba tabla + modales)
   ========================================================= */

.tf-rep-page{
  --tf-brand: var(--tf-brand, #4f46e5);
  --tf-brand-2: var(--tf-brand-2, #4338ca);
  --tf-text: var(--tf-text, #0f172a);
  --tf-muted: var(--tf-muted, #64748b);
  --tf-border: var(--tf-border, #e2e8f0);

  --tf-r12: 12px;
  --tf-r14: 14px;
  --tf-r18: 18px;

  --tf-h44: 44px;
  --tf-h40: 40px;
  --tf-shadow-1: 0 10px 26px rgba(15,23,42,.08);
  --tf-shadow-2: 0 18px 45px rgba(15,23,42,.14);
  --tf-focus: rgba(79,70,229,.18);
}

/* =========================================================
   1) TOOLBAR arriba de tabla (tu .tf-top-actions)
   ========================================================= */
.tf-rep-page .card.radius-10 > .card-header{
  padding: 16px 16px 12px !important;
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  border-bottom: 1px solid rgba(226,232,240,.9) !important;
}

.tf-rep-page .tf-top-actions{
  gap: 12px !important;
  margin-bottom: 6px !important;
  align-items: center !important;
}

/* Botones del cabezote: mismo alto, mismos radios */
.tf-rep-page .tf-top-actions .btn{
  height: var(--tf-h44) !important;
  border-radius: 14px !important;
  padding: 0 14px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  box-shadow: none !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease !important;
}

.tf-rep-page .tf-top-actions .btn:active{ transform: translateY(1px); }

.tf-rep-page .tf-top-actions .btn i{
  font-size: 18px !important;
  line-height: 1 !important;
}

/* Outline secondary (Filtro/Cotizaciones) más premium */
.tf-rep-page .tf-top-actions .btn.btn-outline-secondary{
  background: #fff !important;
  border: 1px solid rgba(148,163,184,.55) !important;
  color: var(--tf-text) !important;
}
.tf-rep-page .tf-top-actions .btn.btn-outline-secondary:hover{
  background: rgba(79,70,229,.06) !important;
  border-color: rgba(79,70,229,.35) !important;
  box-shadow: 0 10px 22px rgba(79,70,229,.12) !important;
}

/* Primary (Nueva Reparación) PRO */
.tf-rep-page .tf-top-actions .btn.btn-primary{
  background: var(--tf-brand) !important;
  border-color: transparent !important;
}
.tf-rep-page .tf-top-actions .btn.btn-primary:hover{
  background: var(--tf-brand-2) !important;
  box-shadow: 0 12px 26px rgba(79,70,229,.20) !important;
}
.tf-rep-page .tf-top-actions .btn.btn-primary:focus{
  box-shadow: 0 0 0 .22rem var(--tf-focus) !important;
}

/* Filtro Rápido: label 2 líneas (sin desbordes) */
#btnQuickFilters{
  padding: .48rem .75rem !important;
  min-height: var(--tf-h44, 44px);
  white-space: normal !important;
}
#btnQuickFilters .d-flex{
  gap: 10px !important;
  align-items: flex-start !important;
  min-width: 0;
}
#btnQuickFilters i{
  opacity: .85;
  margin-top: 1px;
  flex: 0 0 auto;
}
#quickFilterLabel{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
#quickFilterLabel .tf-qf-btnTitle{
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .02em;
  line-height: 1.05;
}
#quickFilterLabel .tf-qf-btnSub{
  font-weight: 800;
  font-size: .76rem;
  line-height: 1.15;
  color: rgba(15,23,42,.72);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
/* Search: look “pro input pill” */
.rep-search-wrapper .tf-input-modern{
  border-radius: 16px !important;
  border: 1px solid rgba(148,163,184,.45) !important;
  background: #fff !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
  overflow: hidden;
}
.rep-search-wrapper .tf-input-modern .tf-icon-left{
  left: 12px !important;
  opacity: .70 !important;
}
.rep-search-wrapper .tf-input-modern .form-control{
  height: var(--tf-h44) !important;
  padding-left: 44px !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  color: var(--tf-text) !important;
}
.rep-search-wrapper .tf-input-modern .form-control::placeholder{
  color: rgba(100,116,139,.85) !important;
  font-weight: 700 !important;
}

/* Responsivo: en móvil apilar bonito */
@media (max-width: 768px){
  .tf-rep-page .tf-top-actions{
    gap: 10px !important;
  }
  .tf-rep-page .tf-top-actions .dropdown,
  .tf-rep-page .tf-top-actions .flex-grow-1{
    width: 100% !important;
  }
  #btnIrCotizaciones,
  #btnAbrirAgregarRep{
    width: 100% !important;
  }
}

/* =========================================================
   2) Dropdown filtro rápido (más PRO)
   ========================================================= */
.tf-rep-page .dropdown-menu.tf-match-btn{
  border-radius: 16px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  box-shadow: var(--tf-shadow-2) !important;
  padding: 10px !important;
  background: #fff !important;
  overflow: hidden;
}

.tf-rep-page .dropdown-menu.tf-match-btn .filter-chip{
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-weight: 600 !important;
  padding: 10px 12px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.tf-rep-page .dropdown-menu.tf-match-btn .filter-chip:hover{
  background: rgba(79,70,229,.06) !important;
  border-color: rgba(79,70,229,.25) !important;
}
.tf-rep-page .dropdown-menu.tf-match-btn .filter-chip.active{
  background: rgba(79,70,229,.10) !important;
  border-color: rgba(79,70,229,.35) !important;
}

/* =========================================================
   3) MODALES: premium + compactos + botones coherentes
   ========================================================= */
.tf-rep-page .modal .modal-dialog{ padding: 8px; }

.tf-rep-page .modal-elevated{
  border-radius: 18px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  box-shadow: 0 30px 80px rgba(15,23,42,.25) !important;
  overflow: hidden;
}

/* Header PRO */
.tf-rep-page .modal-elevated .modal-header{
  background: linear-gradient(180deg, #fff 0%, #fbfcff 100%) !important;
  border-bottom: 1px solid rgba(226,232,240,.9) !important;
  padding: 14px 18px !important;
}
.tf-rep-page .modal-elevated .modal-title{
  font-weight: 600 !important;
  color: var(--tf-text) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.tf-rep-page .modal-elevated .modal-title i{
  font-size: 18px !important;
  opacity: .9 !important;
}
.tf-rep-page .modal-elevated .btn-close{
  border-radius: 12px !important;
  opacity: .75 !important;
}
.tf-rep-page .modal-elevated .btn-close:hover{ opacity: 1 !important; }

/* Body compacto */
.tf-rep-page .modal-elevated .modal-body{
  padding: 16px 18px !important;
  background: #fff !important;
}

/* Reduce el "aire" del grid SOLO dentro de modales */
.tf-rep-page .modal-elevated .row.g-4{
  --bs-gutter-x: 1rem !important;
  --bs-gutter-y: 1rem !important;
}

/* Footer PRO + botones iguales al cabezote */
.tf-rep-page .modal-elevated .modal-footer{
  border-top: 1px solid rgba(226,232,240,.9) !important;
  padding: 12px 18px !important;
  background: #fff !important;
}
.tf-rep-page .modal-elevated .modal-footer .btn{
  height: var(--tf-h44) !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}

/* Botón warning de guardar: más “premium” */
.tf-rep-page .modal-elevated .btn.btn-warning{
  background: #f59e0b !important;
  border-color: transparent !important;
  color: #fff !important;
}
.tf-rep-page .modal-elevated .btn.btn-warning:hover{
  background: #d97706 !important;
  box-shadow: 0 12px 24px rgba(245,158,11,.22) !important;
}

/* =========================================================
   4) Inputs en modales: “material” + iconos bien centrados
   (sin tocar tu sistema, solo pulimos look)
   ========================================================= */
.tf-rep-page .modal-elevated .tf-input-modern{
  border-radius: 14px !important;
}

/* Iconos izquierda: centrados vertical + tamaño consistente */
.tf-rep-page .modal-elevated .tf-input-modern.has-icon-left .tf-icon-left,
.tf-rep-page .modal-elevated .tf-input-modern.has-icon-left > i.bx,
.tf-rep-page .modal-elevated .tf-input-modern.has-icon-left > i{
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  opacity: .75 !important;
  font-size: 18px !important;
}

/* Campo: misma altura que toolbar, tipografía pro */
.tf-rep-page .modal-elevated .tf-input-modern .form-control,
.tf-rep-page .modal-elevated .tf-input-modern .form-select{
  min-height: var(--tf-h44) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148,163,184,.45) !important;
  box-shadow: none !important;
  font-weight: 500 !important;
  color: var(--tf-text) !important;
  background: #fff !important;
}

.tf-rep-page .modal-elevated .tf-input-modern.has-icon-left .form-control,
.tf-rep-page .modal-elevated .tf-input-modern.has-icon-left .form-select{
  padding-left: 44px !important;
}

/* Focus */
.tf-rep-page .modal-elevated .tf-input-modern .form-control:focus,
.tf-rep-page .modal-elevated .tf-input-modern .form-select:focus{
  border-color: rgba(79,70,229,.55) !important;
  box-shadow: 0 0 0 .22rem rgba(79,70,229,.14) !important;
}

/* Label flotante: un poco más arriba + legible */
.tf-rep-page .modal-elevated .tf-gfloat-label{
  font-weight: 600 !important;
  color: rgba(100,116,139,.95) !important;
}

/* Botoncitos icon-right (eye / clear) alineados */
.tf-rep-page .modal-elevated .tf-icon-right-btn{
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  background: #fff !important;
}
.tf-rep-page .modal-elevated .tf-icon-right-btn:hover{
  background: rgba(79,70,229,.06) !important;
  border-color: rgba(79,70,229,.28) !important;
}

/* =========================================================
   5) Switch card (Esperando refacción) — más pro
   ========================================================= */
.tf-rep-page .modal-elevated .tf-switch-card{
  border-radius: 16px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.06) !important;
  padding: 10px 12px !important;
}
.tf-rep-page .modal-elevated .tf-switch-card .form-check-input{
  width: 44px !important;
  height: 24px !important;
}

/* =========================================================
   6) En móvil: footer apilado bonito
   ========================================================= */
@media (max-width: 576px){
  .tf-rep-page .modal-elevated .modal-footer{
    flex-direction: column !important;
    gap: 10px !important;
  }
  .tf-rep-page .modal-elevated .modal-footer .btn{
    width: 100% !important;
  }
}
/* =========================================================
   ✅ FIX ICONO DENTRO DEL INPUT (Google style)
   - Icono a la izquierda dentro del input
   - Centrado vertical perfecto (cualquier altura)
   - Padding-left correcto para el texto
   - Funciona con input + select
   - Compatible con tf-gfloat (label flotante)
   ========================================================= */

/* Contenedor base */
.tf-rep-page .tf-input-modern{
  position: relative !important;
}

/* Forzar altura consistente (ajusta si quieres) */
.tf-input-modern .form-control,
.tf-rep-page .tf-input-modern .form-select{
  min-height: 44px !important;          /* altura pro */
  height: 44px !important;
  line-height: 1.15 !important;
  border-radius: 14px !important;
}

/* ===== Icon-left dentro ===== */
.tf-input-modern.has-icon-left .tf-icon-left,
.tf-input-modern.has-icon-left > i.tf-icon-left,
.tf-rep-page .tf-input-modern.has-icon-left > i.bx{
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;   /* ✅ centro vertical real */
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: .75 !important;
  pointer-events: none !important;          /* no estorba al click */
  z-index: 2 !important;
}

/* Si usas span como icon-left (dinero, símbolo) */
.tf-rep-page .tf-input-modern.has-icon-left .tf-icon-left.tf-money-icon{
  width: 26px !important;
  height: 26px !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
.tf-rep-page .tf-input-modern .tf-currency-symbol{
  font-weight: 600 !important;
  color: rgba(100,116,139,.9) !important;
}

/* ===== Padding del input para que NO se encime con el icono ===== */
.tf-input-modern.has-icon-left .form-control,
.tf-rep-page .tf-input-modern.has-icon-left .form-select{
  padding-left: 44px !important; /* ✅ deja espacio al icono */
}

/* Cuando hay icon-right (eye / clear), deja espacio a la derecha */
.tf-input-modern.has-icon-right .form-control,
.tf-rep-page .tf-input-modern.has-icon-right .form-select{
  padding-right: 48px !important;
}

/* Botón de icon-right centrado vertical */
.tf-rep-page .tf-input-modern .tf-icon-right-btn{
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;   /* ✅ centro vertical */
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
}

/* =========================================================
   ✅ Label flotante tipo Google (tf-gfloat)
   - Se ve como placeholder al inicio
   - Sube al enfocar o tener valor (.has-value)
   ========================================================= */
.tf-rep-page .tf-input-modern.tf-gfloat .tf-gfloat-label{
  position: absolute !important;
  left: 44px !important;                  /* arranca después del icono */
  top: 50% !important;
  transform: translateY(-50%) !important; /* centro como placeholder */
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: rgba(100,116,139,.85) !important;
  background: transparent !important;
  padding: 0 .35rem !important;
  pointer-events: none !important;
  transition: all .14s ease !important;
  z-index: 2 !important;
}

/* Si NO hay icon-left, el label arranca normal */
.tf-rep-page .tf-input-modern.tf-gfloat:not(.has-icon-left) .tf-gfloat-label{
  left: 14px !important;
}

/* Subir label cuando foco o has-value */
.tf-input-modern.tf-gfloat:focus-within .tf-gfloat-label,
.tf-rep-page .tf-input-modern.tf-gfloat.has-value .tf-gfloat-label{
  top: 6px !important;
  transform: translateY(0) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--tf-brand, #4f46e5) !important;
  background: #fff !important;            /* notch limpio */
}

/* Notch “bonito” para el label */
.tf-input-modern.tf-gfloat:focus-within .tf-gfloat-label,
.tf-rep-page .tf-input-modern.tf-gfloat.has-value .tf-gfloat-label{
  border-radius: 8px !important;
}

/* =========================================================
   ✅ Select: arreglar flecha (no choca con icon-right)
   ========================================================= */
.tf-rep-page .tf-input-modern .form-select{
  background-position: right 14px center !important;
  padding-right: 44px !important;
}

/* =========================================================
   ✅ Extra: si tu input es más alto, mantiene centro
   (solo cambia aquí y todo sigue centrado)
   ========================================================= */
/* Ejemplo: inputs altos tipo Google
.tf-input-modern .form-control,
.tf-rep-page .tf-input-modern .form-select{
  min-height: 52px !important;
  height: 52px !important;
}
*/
  /* =========================================================
   ✅ FLOAT LABEL tipo GOOGLE (notch sobre el borde)
   - Label sube y se posa sobre el borde superior del input
   - Con fondo blanco para "cortar" la línea (notch)
   - Icon-left centrado vertical siempre
   ========================================================= */

/* 1) Asegura contexto */
.tf-rep-page .tf-input-modern.tf-gfloat{
  position: relative !important;
}

/* 2) Inputs con borde visible (para que se note el notch) */
.tf-input-modern.tf-gfloat .form-control,
.tf-rep-page .tf-input-modern.tf-gfloat .form-select{
  min-height: 44px !important;
  height: 44px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(148,163,184,.45) !important;
  background: #fff !important;
}

/* 3) Icono left: centrado perfecto */
.tf-input-modern.has-icon-left .tf-icon-left,
.tf-input-modern.has-icon-left > i.tf-icon-left,
.tf-rep-page .tf-input-modern.has-icon-left > i.bx{
  position: absolute !important;
  left: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 20px !important;
  height: 20px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  opacity: .75 !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* 4) Padding del texto por el icono */
.tf-input-modern.has-icon-left .form-control,
.tf-rep-page .tf-input-modern.has-icon-left .form-select{
  padding-left: 44px !important;
}

/* =========================================================
   5) LABEL como placeholder (estado "abajo")
   ========================================================= */
.tf-rep-page .tf-input-modern.tf-gfloat .tf-gfloat-label{
  position: absolute !important;
  left: 44px !important;              /* después del icono */
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-size: .92rem !important;
  font-weight: 500 !important;
  color: rgba(100,116,139,.85) !important;
  padding: 0 .35rem !important;
  pointer-events: none !important;
  background: transparent !important;  /* abajo NO necesita fondo */
  z-index: 2 !important;
  transition: top .14s ease, transform .14s ease, font-size .14s ease, color .14s ease, background .14s ease !important;
}

/* Si NO hay icon-left, arranca normal */
.tf-rep-page .tf-input-modern.tf-gfloat:not(.has-icon-left) .tf-gfloat-label{
  left: 14px !important;
}

/* =========================================================
   6) LABEL flotado "sobre el borde" (estado arriba)
   ========================================================= */
.tf-input-modern.tf-gfloat:focus-within .tf-gfloat-label,
.tf-rep-page .tf-input-modern.tf-gfloat.has-value .tf-gfloat-label{
  top: 0px !important;                  /* ✅ se posa sobre el borde */
  transform: translateY(-50%) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--tf-brand, #4f46e5) !important;

  background: #fff !important;          /* ✅ notch: corta el borde */
  padding: 0 .45rem !important;
  border-radius: 999px !important;
}

/* Extra: si tu borde es grueso o se ve raro, baja 1px */
.tf-input-modern.tf-gfloat:focus-within .tf-gfloat-label,
.tf-rep-page .tf-input-modern.tf-gfloat.has-value .tf-gfloat-label{
  margin-top: 1px !important;
}

/* =========================================================
   7) Focus ring (como Google suave)
   ========================================================= */
.tf-input-modern.tf-gfloat .form-control:focus,
.tf-rep-page .tf-input-modern.tf-gfloat .form-select:focus{
  border-color: rgba(79,70,229,.60) !important;
  box-shadow: 0 0 0 .22rem rgba(79,70,229,.14) !important;
}

/* =========================================================
   8) Icon-right (eye / clear) centrado vertical
   ========================================================= */
.tf-input-modern.has-icon-right .form-control,
.tf-rep-page .tf-input-modern.has-icon-right .form-select{
  padding-right: 54px !important;
}

.tf-rep-page .tf-input-modern .tf-icon-right-btn{
  position: absolute !important;
  right: 8px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  background: #fff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 4 !important;
}

/* =========================================================
   9) Fix específico para inputs con fecha (tu tf-fecha-fix)
   - Evita que el texto se "subraye" raro o se recorte
   ========================================================= */
.tf-fecha-fix .form-control{
  padding-top: 10px !important;   /* deja aire para label arriba */
  padding-bottom: 10px !important;
}

/* =========================================================
   ✅ AUTOCOMPLETE SIN EMPUJAR INPUTS (overlay absoluto)
   - Evita que el dropdown desplace el layout
   - Funciona dentro de modales (bootstrap)
   ========================================================= */

/* 1) El wrapper del input debe ser el "ancla" */
.mrr-search-wrap,
.tf-ac-wrap{
  position: relative !important;
}

/* 2) Listas de resultados: fuera del flujo (NO empujan) */
#clienteResultsAdd,
#clienteResultsEdit,
#tecnicoResultsEdit,
#mrrResults{
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 6px) !important;  /* debajo del input */
  z-index: 2000 !important;
  display: none;                    /* tu JS lo prende */
  max-height: 260px !important;
  overflow: auto !important;

  background: #fff !important;
  border: 1px solid rgba(226,232,240,.95) !important;
  border-radius: 14px !important;
  box-shadow: 0 18px 45px rgba(15,23,42,.18) !important;
}

/* 3) Items de la lista: look pro + compacto */
#clienteResultsAdd .list-group-item,
#clienteResultsEdit .list-group-item,
#tecnicoResultsEdit .list-group-item,
#mrrResults .list-group-item{
  border: 0 !important;
  padding: .60rem .75rem !important;
  font-weight: 500 !important;
  font-size: .86rem !important;
  cursor: pointer !important;
}

#clienteResultsAdd .list-group-item:hover,
#clienteResultsEdit .list-group-item:hover,
#tecnicoResultsEdit .list-group-item:hover,
#mrrResults .list-group-item:hover{
  background: rgba(79,70,229,.08) !important;
}

/* 4) Texto secundario (teléfono / meta) dentro del item si lo usas */
#clienteResultsAdd small,
#clienteResultsEdit small,
#tecnicoResultsEdit small,
#mrrResults small{
  display: block;
  font-weight: 700;
  color: rgba(100,116,139,.95);
  margin-top: 2px;
}

/* 5) Badge tipo "FOLIO" a la derecha (como en tu screenshot) */
#clienteResultsAdd .badge,
.tf-rep-page #clienteResultsEdit .badge{
  font-weight: 600;
  font-size: .70rem;
  border-radius: 10px;
  border: 1px solid rgba(226,232,240,.95);
  background: #f8fafc;
  color: #334155;
}

/* 6) MUY IMPORTANTE en modales:
      Bootstrap a veces corta overlays por overflow.
      Esto permite que el dropdown "salga" sin recortar. */
/* (patched) modal content overflow handled below */
/* (patched) modal body overflow handled below */

/* 7) Si algún contenedor padre trae overflow hidden, neutralízalo en tu card */
.tf-box-group{ overflow: visible !important; }

/* =========================================================
   ✅ FIX: Label sube cuando hay valor (ilegible fix)
   - Funciona con inputs text/tel/number/datetime-local
   - Usa :not(:placeholder-shown) para detectar valor
   ========================================================= */

/* Aplica el "estado flotado" cuando el input NO está vacío */
.tf-input-modern.tf-gfloat:has(.form-control:not(:placeholder-shown)) .tf-gfloat-label,
.tf-rep-page .tf-input-modern.tf-gfloat:has(.form-select:not([value=""])) .tf-gfloat-label{
  top: 0px !important;
  transform: translateY(-50%) !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  color: var(--tf-brand, #4f46e5) !important;
  background: #fff !important;
  padding: 0 .45rem !important;
  border-radius: 999px !important;
  margin-top: 1px !important;
}
  /* =========================================================
   ✅ TECH-FLOW — PATRÓN (Unlock Pattern) UI PRO
   - Soporta: #patternWrapAdd / #patternWrapEdit
   - Líneas en SVG: #patternSvgAdd / #patternSvgEdit
   - Puntos: .pattern-dot (con estados .is-active .is-hit)
   - Texto/acciones: .tf-pattern-foot
   ========================================================= */

.tf-rep-page{
  --tf-pat-bg:#ffffff;
  --tf-pat-surface:#f8fafc;
  --tf-pat-bd:rgba(148,163,184,.45);
  --tf-pat-bd2:rgba(148,163,184,.25);
  --tf-pat-tx:#0f172a;
  --tf-pat-muted:#64748b;
  --tf-pat-brand:var(--tf-brand,#4f46e5);
  --tf-pat-glow:rgba(79,70,229,.22);
  --tf-pat-danger:#ef4444;
  --tf-pat-ok:#22c55e;
}

/* ====== Modal: evita “pantalla blanca” ====== */
.tf-rep-page .modal .tf-pattern-shell{
  padding: 14px 14px 10px;
}
.tf-rep-page .modal .tf-pattern-shell .tf-pattern-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 4px 12px;
  border-bottom:1px solid rgba(148,163,184,.18);
}
.tf-rep-page .modal .tf-pattern-shell .tf-pattern-title{
  font-weight:800;
  letter-spacing:.2px;
  color:var(--tf-pat-tx);
  margin:0;
  font-size:1.02rem;
}
.tf-rep-page .modal .tf-pattern-shell .tf-pattern-sub{
  color:var(--tf-pat-muted);
  font-size:.86rem;
  margin:2px 0 0;
  line-height:1.25;
}
.tf-rep-page .modal .tf-pattern-shell .tf-pattern-body{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding-top: 12px;
}

/* Si tu modal queda gigante, esto lo compacta */
.tf-rep-page .modal .tf-pattern-shell .tf-pattern-body{
  min-height: 360px;
  align-content: start;
}

/* ====== Contenedor del patrón ====== */
#patternWrapAdd,
#patternWrapEdit{
  position: relative;
  width: min(360px, 100%);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  background:
    radial-gradient(1200px 600px at 50% -20%, rgba(79,70,229,.10), transparent 55%),
    linear-gradient(180deg, #ffffff, var(--tf-pat-surface));
  border: 1px solid var(--tf-pat-bd);
  border-radius: 18px;
  box-shadow:
    0 18px 40px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.8);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

/* borde “glow” al interactuar */
#patternWrapAdd.is-active,
#patternWrapEdit.is-active{
  border-color: rgba(79,70,229,.55);
  box-shadow:
    0 22px 55px rgba(15,23,42,.14),
    0 0 0 6px var(--tf-pat-glow),
    inset 0 1px 0 rgba(255,255,255,.86);
}

/* Estado error/ok (útil si tu JS los aplica) */
#patternWrapAdd.is-error,
#patternWrapEdit.is-error{
  border-color: rgba(239,68,68,.65);
  box-shadow:
    0 22px 55px rgba(15,23,42,.14),
    0 0 0 6px rgba(239,68,68,.14);
}
#patternWrapAdd.is-ok,
#patternWrapEdit.is-ok{
  border-color: rgba(34,197,94,.65);
  box-shadow:
    0 22px 55px rgba(15,23,42,.14),
    0 0 0 6px rgba(34,197,94,.14);
}

/* ====== SVG líneas ====== */
#patternSvgAdd,
#patternSvgEdit{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index: 1;
}

/* Si tu JS dibuja <path> o <line>, esto los “skinea” */
#patternSvgAdd path, #patternSvgAdd line,
#patternSvgEdit path, #patternSvgEdit line{
  stroke: var(--tf-pat-brand);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 10px 16px rgba(79,70,229,.22));
  opacity: .95;
}

/* ====== Grid 3x3 (tu JS normalmente inserta los dots) ====== */
#patternWrapAdd .pattern-grid,
#patternWrapEdit .pattern-grid{
  position:absolute;
  inset: 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  place-items:center;
  padding: 18px;
  z-index: 2;
}

/* Dot base */
#patternWrapAdd .pattern-dot,
#patternWrapEdit .pattern-dot{
  width: 62px;
  height: 62px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.78);
  border: 1px solid var(--tf-pat-bd2);
  box-shadow:
    0 10px 26px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.9);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

#patternWrapAdd .pattern-dot::after,
#patternWrapEdit .pattern-dot::after{
  content:"";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(100,116,139,.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transition: transform .12s ease, background .18s ease, box-shadow .18s ease;
}

#patternWrapAdd .pattern-dot:hover,
#patternWrapEdit .pattern-dot:hover{
  transform: translateY(-1px);
  border-color: rgba(79,70,229,.35);
  box-shadow:
    0 14px 34px rgba(15,23,42,.14),
    inset 0 1px 0 rgba(255,255,255,.95);
}

/* Dot al “tocar” (cuando tu JS lo marca) */
#patternWrapAdd .pattern-dot.is-hit,
#patternWrapEdit .pattern-dot.is-hit{
  border-color: rgba(79,70,229,.55);
  box-shadow:
    0 16px 40px rgba(15,23,42,.16),
    0 0 0 8px rgba(79,70,229,.12),
    inset 0 1px 0 rgba(255,255,255,.95);
  transform: scale(1.03);
}
#patternWrapAdd .pattern-dot.is-hit::after,
#patternWrapEdit .pattern-dot.is-hit::after{
  background: var(--tf-pat-brand);
  box-shadow:
    0 10px 22px rgba(79,70,229,.28),
    inset 0 1px 0 rgba(255,255,255,.35);
  transform: scale(1.35);
}

/* Dot mientras arrastras */
#patternWrapAdd .pattern-dot.is-active,
#patternWrapEdit .pattern-dot.is-active{
  transform: scale(1.05);
}

/* ====== Footer del patrón (texto + borrar) ====== */
.tf-pattern-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding: 10px 6px 0;
}
.tf-pattern-foot .hint{
  color: var(--tf-pat-muted);
  font-size: .86rem;
  line-height: 1.25;
}
.tf-pattern-foot .btn-clear{
  border:1px solid rgba(239,68,68,.25);
  background: rgba(239,68,68,.06);
  color: #b91c1c;
  font-weight:800;
  border-radius: 10px;
  padding: .45rem .75rem;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.tf-pattern-foot .btn-clear:hover{
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.38);
  transform: translateY(-1px);
}

/* ====== Responsive ====== */
@media (max-width: 420px){
  #patternWrapAdd, #patternWrapEdit{
    width: min(320px, 100%);
    border-radius: 16px;
  }
  #patternWrapAdd .pattern-dot,
  #patternWrapEdit .pattern-dot{
    width: 56px;
    height: 56px;
  }
}
/* Labels del patrón SIN mover los dots */
.pattern-dot{ position:relative; overflow:hidden; }

/* etiqueta (1..F) no altera layout */
.pattern-dot .pattern-label{
  position:absolute;
  top:10px;
  left:12px;
  font-size:12px;
  line-height:1;
  font-weight:800;
  color:rgba(15,23,42,.75);
  pointer-events:none;
  user-select:none;
}

/* si prefieres centrado, cambia a:
.pattern-dot .pattern-label{ inset:0; display:grid; place-items:center; top:auto; left:auto; }
*/
/* Quitar líneas punteadas (focus/outline) SOLO en el patrón */
#patternWrapAdd .pattern-dot,
#patternWrapEdit .pattern-dot{
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

#patternWrapAdd .pattern-dot:focus,
#patternWrapAdd .pattern-dot:focus-visible,
#patternWrapEdit .pattern-dot:focus,
#patternWrapEdit .pattern-dot:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

/* Por si viene de algún :after / :before global */
#patternWrapAdd .pattern-dot::before,
#patternWrapAdd .pattern-dot::after,
#patternWrapEdit .pattern-dot::before,
#patternWrapEdit .pattern-dot::after{
  outline: none !important;
}
/* ===== Botón Nueva Reparación visible SIEMPRE ===== */
#btnAbrirAgregarRep{
  display:inline-flex !important;
  align-items:center !important;
  gap:.55rem !important;
  padding:.55rem .85rem !important;
  border-radius:12px !important;
  font-weight: 500 !important;
  background: var(--tf-brand, #4f46e5) !important;
  border:1px solid rgba(79,70,229,.35) !important;
  color:#fff !important;
  box-shadow: 0 10px 24px rgba(79,70,229,.18) !important;
  white-space:nowrap !important;       /* que no se parta el texto */
}

#btnAbrirAgregarRep:hover{
  transform: translateY(-1px);
  filter: brightness(.98);
}

/* =========================================================
   ✅ V26 — MÓVIL: tu plantilla actual (LISTA) se ve PRO
   - Aplica cuando el TR trae 1 solo TD (tu caso)
   - No depende de columnas reales
   ========================================================= */
@media (max-width: 768px){

  /* ocultar header si existe */
  .tf-v26-scope .tf-premium-table thead{ display:none !important; }

  /* cada fila como card */
  .tf-v26-scope .tf-premium-table tbody tr{
    display:block !important;
    background:#fff !important;
    border:1px solid rgba(226,232,240,.95) !important;
    border-radius:16px !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.06) !important;
    margin: 10px 0 !important;
    overflow:hidden !important;
  }

  /* tu caso: un solo td con TODO adentro */
  .tf-v26-scope .tf-premium-table tbody tr > td{
    display:block !important;
    width:100% !important;
    border:0 !important;
    padding: 12px 12px 10px !important;
  }

  /* header del card: folio + botón + */
  .tf-v26-scope .tf-folio-cell{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin-bottom: 6px !important;
  }

  .tf-v26-scope .tf-btn-expand{
    width:28px !important;
    height:28px !important;
    border-radius:999px !important;
  }
  .tf-v26-scope .tf-folio-pill{
    font-size: 1.02rem !important;
    font-weight: 600 !important;
  }

  /* textos principales (cliente/equipo) */
  .tf-v26-scope .tf-primary{
    font-size: 1.02rem !important;
    font-weight: 600 !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    margin-top: 2px !important;
  }
  .tf-v26-scope .tf-secondary{
    font-size: .90rem !important;
    font-weight: 500 !important;
    color: rgba(100,116,139,.95) !important;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    margin-top: 2px !important;
  }

  /* bloque de “resumen” (tel/compromiso/estado/monto) si vienen como texto suelto */
  .tf-v26-scope .tf-m-summary{
    margin-top: 6px !important;
    padding-top: 8px !important;
    border-top: 1px solid rgba(226,232,240,.95) !important;
    display:flex !important;
    flex-direction:column !important;
    gap: 3px !important;
  }
  .tf-v26-scope .tf-m-summary .money{
    font-size: 1.05rem !important;
    font-weight: 600 !important;
  }

  /* “Más detalles” como acordeón */
  .tf-v26-scope .tf-m-more{
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid rgba(226,232,240,.95) !important;
  }

  /* por defecto OCULTO (lo prende .tf-row-open) */
  .tf-v26-scope .tf-m-more{ display:none !important; }
  .tf-v26-scope tr.tf-row-open .tf-m-more{ display:block !important; }

  /* si tu título “Más detalles” es texto plano, estilízalo cuando lo envuelvas */
  .tf-v26-scope .tf-m-more-title{
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
  }

  /* acciones en grid (si existen dentro del card) */
  .tf-v26-scope .tf-actions-group{
    display:grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-top: 10px !important;
  }
  .tf-v26-scope .tf-btn-action{
    width: 100% !important;
    height: 38px !important;
    border-radius: 12px !important;
  }
}
/* ===== QuickFilters dropdown: siempre visible encima ===== */
.tf-rep-page #repQuickFilters{
  z-index: 5000 !important;
}

/* si algún padre tiene overflow hidden, esto evita recorte */
.tf-rep-page .tf-top-actions,
.tf-rep-page .card.radius-10 > .card-header,
.tf-rep-page .page-breadcrumb,
.tf-rep-page .modal,
.tf-v26-scope{
  overflow: visible !important;
}

/* opcional: estilo de apertura manual */
#repQuickFilters.is-open{ display:block !important; }


/* ===== Super Filtro UI ===== */
.tf-rep-page #repQuickFilters{
  padding: 12px !important;
  border-radius: 16px !important;
}

.tf-qf-box{ width: 280px; max-width: 90vw; }
.tf-qf-title{
  font-weight: 950;
  color: var(--tf-text);
  margin-bottom: 10px;
}
.tf-qf-section{ margin-bottom: 10px; }
.tf-qf-label{
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(100,116,139,.95);
  margin-bottom: 6px;
}
.tf-qf-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tf-qf-field label{
  display:block;
  font-size:.72rem;
  font-weight: 800;
  color: rgba(100,116,139,.95);
  margin: 0 0 4px;
}
.tf-qf-field .form-control{
  height: 40px !important;
  border-radius: 12px !important;
  font-weight: 500 !important;
}

.tf-qf-presets{
  display:flex;
  gap:8px;
  margin: 8px 0 10px;
}
.tf-qf-presets .btn{
  border-radius: 12px !important;
  font-weight: 600 !important;
  height: 34px !important;
}

.tf-qf-actions{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tf-qf-actions .btn{
  height: 42px !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}

/* =========================================================
   ✅ OVERRIDE FINAL: barra izquierda por estado SIEMPRE + detalle con accent
   (esto va al final para ganar a cualquier regla previa)
   ========================================================= */
.tf-v26-scope .tf-premium-table tbody tr.tf-d-row{ --tf-row-accent:#fb923c; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-1{ --tf-row-accent:#ef4444; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-2{ --tf-row-accent:#3b82f6; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-3{ --tf-row-accent:#22c55e; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-4{ --tf-row-accent:#f97316; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-5{ --tf-row-accent:#dc2626; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-6{ --tf-row-accent:#a855f7; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-7{ --tf-row-accent:#06b6d4; }

.tf-v26-scope .tf-premium-table tbody tr.tf-d-row td:first-child::before{
  background: var(--tf-row-accent) !important;
}

.tf-v26-scope tr.tf-d-detail td{
  position: relative !important;
  background: color-mix(in srgb, var(--tf-row-accent) 10%, #ffffff) !important;
}
.tf-v26-scope tr.tf-d-detail td::before{
  content:"";
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:4px;
  border-radius:999px;
  background: var(--tf-row-accent);
  opacity:.95;
}
/* Toolbar: filtro izq | buscador centro | botones der */
.tf-rep-page .tf-top-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:nowrap;
}
.tf-rep-page .tf-top-actions .tf-left{ width:190px; min-width:190px; flex:0 0 auto; }
.tf-rep-page .tf-top-actions .tf-center{ flex:1 1 auto; min-width:260px; }
.tf-rep-page .tf-top-actions .tf-right{ flex:0 0 auto; display:flex; gap:10px; white-space:nowrap; }

/* móvil apila */
@media (max-width: 768px){
  .tf-rep-page .tf-top-actions{ flex-wrap:wrap; }
  .tf-rep-page .tf-top-actions .tf-left,
  .tf-rep-page .tf-top-actions .tf-center,
  .tf-rep-page .tf-top-actions .tf-right{ width:100%; min-width:0; }
  .tf-rep-page .tf-top-actions .tf-right{ justify-content:stretch; }
  #btnIrCotizaciones, #btnAbrirAgregarRep{ width:100%; }
}

/* menú encima */
#repQuickFilters{ z-index: 6000 !important; }
#repQuickFilters.is-open{ display:block !important; }

/* =========================================================
   ✅ Super Filtro: fechas SIEMPRE caben en dropdown angosto
   - Apila "Desde" y "Hasta" en 1 columna
   - Reduce padding/altura del date input
   ========================================================= */

.tf-rep-page #repQuickFilters .tf-qf-grid{
  grid-template-columns: 1fr !important;   /* 🔥 1 columna */
  gap: 10px !important;
}

.tf-rep-page #repQuickFilters .tf-qf-field .form-control[type="date"]{
  width: 100% !important;
  min-width: 0 !important;
  height: 38px !important;                /* un poco más compacto */
  padding: 0 12px !important;
  font-weight: 500 !important;
}

/* Evita que el input de fecha “quiera” medir más de lo que debe */
.tf-rep-page #repQuickFilters input[type="date"]{
  box-sizing: border-box !important;
}

/* =========================================================
   ✅ MODAL — SUPER FILTRO (UI/UX)
   - Reemplaza dropdown gigante por modal legible
   ========================================================= */
.tf-qf-modal .modal-body{ background:#fff !important; }

.tf-qf-wrap{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.tf-qf-block{
  border:1px solid rgba(226,232,240,.95);
  border-radius:16px;
  padding:14px;
  background:#fff;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

.tf-qf-block-title{
  font-weight:950;
  font-size:.82rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(100,116,139,.95);
  margin-bottom:10px;
}

.tf-qf-chips-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 10px;
}
@media (min-width: 992px){
  .tf-qf-chips-grid{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

.tf-qf-modal .filter-chip{
  width:100%;
  border:1px solid rgba(226,232,240,.95);
  border-radius:14px;
  background:#fff;
  font-weight: 600;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: .12s ease;
}
.tf-qf-modal .filter-chip:hover{
  background: rgba(79,70,229,.06);
  border-color: rgba(79,70,229,.25);
}
.tf-qf-modal .filter-chip.active{
  background: rgba(79,70,229,.10);
  border-color: rgba(79,70,229,.35);
}

.tf-qf-range{
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px dashed rgba(148,163,184,.35);
}
.tf-qf-range:first-of-type{ border-top:0; margin-top:0; padding-top:0; }

.tf-qf-range-head{
  font-weight: 950;
  color:#0f172a;
  margin-bottom: 8px;
}

.tf-qf-grid2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px){
  .tf-qf-grid2{ grid-template-columns: 1fr; }
}

.tf-qf-field label{
  display:block;
  font-size:.74rem;
  font-weight:800;
  color: rgba(100,116,139,.95);
  margin:0 0 6px;
}

.tf-qf-field .form-control[type="date"]{
  height: 42px !important;
  border-radius: 14px !important;
  font-weight: 500 !important;
  min-width: 0 !important;
}

.tf-qf-presets{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.tf-qf-presets .btn{
  height: 36px !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
}

/* Toolbar layout (filtro | buscador | botones) */
.tf-rep-page .tf-top-actions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.tf-rep-page .tf-top-actions .tf-left{ width:190px; min-width:190px; flex:0 0 auto; }
.tf-rep-page .tf-top-actions .tf-center{ flex:1 1 auto; min-width:260px; }
.tf-rep-page .tf-top-actions .tf-right{ flex:0 0 auto; display:flex; gap:10px; white-space:nowrap; }
@media (max-width: 768px){
  .tf-rep-page .tf-top-actions{ flex-wrap:wrap !important; }
  .tf-rep-page .tf-top-actions .tf-left,
  .tf-rep-page .tf-top-actions .tf-center,
  .tf-rep-page .tf-top-actions .tf-right{ width:100% !important; min-width:0 !important; }
  .tf-rep-page .tf-top-actions .tf-right{ justify-content:stretch !important; }
  #btnIrCotizaciones, #btnAbrirAgregarRep{ width:100% !important; }
}


/* =========================================================
   ✅ TOOLBAR (Desktop): filtro izq | buscador centro | botones der
   ========================================================= */
.tf-rep-page .tf-top-actions{
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
}
.tf-rep-page .tf-top-actions .tf-left{ width:190px !important; min-width:190px !important; flex:0 0 auto !important; }
.tf-rep-page .tf-top-actions .tf-center{ flex:1 1 auto !important; min-width:260px !important; }
.tf-rep-page .tf-top-actions .tf-right{ flex:0 0 auto !important; display:flex !important; gap:10px !important; white-space:nowrap !important; }

@media (max-width: 768px){
  .tf-rep-page .tf-top-actions{ flex-wrap:wrap !important; }
  .tf-rep-page .tf-top-actions .tf-left,
  .tf-rep-page .tf-top-actions .tf-center,
  .tf-rep-page .tf-top-actions .tf-right{ width:100% !important; min-width:0 !important; }
  .tf-rep-page .tf-top-actions .tf-right{ justify-content:stretch !important; }
  #btnIrCotizaciones, #btnAbrirAgregarRep{ width:100% !important; }
}

/* 🔥 Asegura que el dropdown viejo JAMÁS aparezca */
#repQuickFilters{ display:none !important; }
#repQuickFilters.is-open{ display:none !important; }


/* =========================================================
   ✅ FIX GLOBAL: TODOS los modales scrollean cuando no caben
   - Scroll dentro del modal-body
   - Header/Footer fijos
   - Funciona con .modal-elevated y modales normales
   ========================================================= */

.tf-rep-page .modal{
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.tf-rep-page .modal .modal-dialog{
  margin: 1rem auto !important;
}

.tf-rep-page .modal .modal-content{
  max-height: calc(100vh - 2rem) !important;
  display: flex !important;
  flex-direction: column !important;
}

.tf-rep-page .modal .modal-content.modal-elevated{
  overflow: hidden !important; /* scroll no aquí */
}

.tf-rep-page .modal .modal-content .modal-header,
.tf-rep-page .modal .modal-content .modal-footer{
  flex: 0 0 auto !important;
}

.tf-rep-page .modal .modal-content .modal-body{
  flex: 1 1 auto !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (max-width: 576px){
  .tf-rep-page .modal .modal-dialog{
    margin: .5rem !important;
  }
  .tf-rep-page .modal .modal-content{
    max-height: calc(100vh - 1rem) !important;
  }
}


/* =========================================================
   ✅ PATCH V13: Accent siempre + mobile row + Estado Quick icons
   ========================================================= */

/* Accent variable para fila principal, detalle y móvil */
.tf-v26-scope .tf-premium-table tbody tr.tf-d-row,
.tf-v26-scope .tf-premium-table tbody tr.tf-d-detail,
.tf-v26-scope .tf-premium-table tbody tr.tf-m-row{
  --tf-row-accent:#fb923c;
}
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-1{ --tf-row-accent:#ef4444; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-2{ --tf-row-accent:#3b82f6; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-3{ --tf-row-accent:#22c55e; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-4{ --tf-row-accent:#f97316; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-5{ --tf-row-accent:#dc2626; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-6{ --tf-row-accent:#a855f7; }
.tf-v26-scope .tf-premium-table tbody tr.tf-row-st-7{ --tf-row-accent:#06b6d4; }

/* Barra izquierda SIEMPRE con accent (esté abierta o no) */
.tf-v26-scope .tf-premium-table tbody tr.tf-d-row td:first-child::before{
  background: var(--tf-row-accent) !important;
}
.tf-v26-scope .tf-premium-table tbody tr.tf-d-detail td::before{
  background: var(--tf-row-accent) !important;
}

/* Detalle 2 columnas: helpers */
.tf-v26-scope .tf-d-body-2col{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 992px){
  .tf-v26-scope .tf-d-body-2col{ grid-template-columns: 1fr; }
}
.tf-v26-scope .tf-d-col{ display:flex; flex-direction:column; gap:10px; }
.tf-v26-scope .tf-d-mini .k{
  font-weight: 950;
  font-size:.72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(100,116,139,.95);
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.tf-v26-scope .tf-d-mini .k i{ font-size: 1rem; opacity:.85; }
.tf-v26-scope .tf-d-mini .v{
  font-weight: 600;
  color:#0f172a;
}

/* Chips abajo ocupan ancho completo */
.tf-v26-scope .tf-d-chips-bottom{
  grid-column: 1 / -1;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top: 6px;
}

/* =========================================================
   ✅ MODAL "Actualizar Estado" — iconos/símbolos dentro del input
   ========================================================= */
.tf-input-modern.has-text-left{ position:relative !important; }
.tf-rep-page .tf-input-modern.has-text-left .tf-text-left{
  position:absolute !important;
  left:12px !important;
  top:50% !important;
  transform: translateY(-50%) !important;
  font-weight: 600 !important;
  opacity: .9 !important;
  z-index: 3 !important;
  pointer-events:none !important;
}
.tf-rep-page .tf-input-modern.has-text-left .form-control{
  padding-left: 42px !important;
}


/* =========================================================
   ✅ V8 PATCH — MÓVIL EXPAND/CONTRAER (forzado)
   - Oculta "Más detalles" por defecto
   - Muestra solo cuando .tf-row-open está activo
   ========================================================= */
@media (max-width: 768px){
  /* base: oculto siempre */
  .tf-v26-scope .tf-m-more,
  .tf-v26-scope .tf-d-detail-inline{
    display:none !important;
  }
  /* cuando está abierto */
  .tf-v26-scope tr.tf-row-open .tf-m-more,
  .tf-v26-scope .tf-card-open .tf-m-more,
  .tf-v26-scope tr.tf-row-open .tf-d-detail-inline,
  .tf-v26-scope .tf-card-open .tf-d-detail-inline{
    display:block !important;
  }

  /* Asegura que el botón expand sea clickeable */
  .tf-v26-scope .tf-btn-expand{
    pointer-events:auto !important;
    z-index:5 !important;
  }
}



/* =========================================================
   ✅ V15 PATCH — MÓVIL COMPACTO
   - Por defecto solo se ve el NOMBRE (tf-primary) + folio
   - Resto de info aparece al expandir
   - "Más detalles" oculto hasta expand
   ========================================================= */
@media (max-width: 768px){
  /* Oculta secundarios por defecto */
  .tf-v26-scope tr:not(.tf-row-open) .tf-secondary,
  .tf-v26-scope tr:not(.tf-row-open) .tf-status-badge,
  .tf-v26-scope tr:not(.tf-row-open) .tf-btn-fotos,
  .tf-v26-scope tr:not(.tf-row-open) .tf-m-summary,
  .tf-v26-scope tr:not(.tf-row-open) .tf-actions-group{
    display:none !important;
  }

  /* Oculta el bloque "Más detalles" hasta abrir */
  .tf-v26-scope .tf-m-more,
  .tf-v26-scope .tf-d-detail-inline{
    display:none !important;
  }
  .tf-v26-scope tr.tf-row-open .tf-m-more,
  .tf-v26-scope tr.tf-row-open .tf-d-detail-inline{
    display:block !important;
  }

  /* Botón expand siempre visible */
  .tf-v26-scope .tf-btn-expand{ display:inline-flex !important; }
}


/* =====================================================================
   ✅ V26.3 — MOBILE TABLE (IMAGEN 1 / IMAGEN 2)
   - Móvil colapsado: [+] | FOLIO | CLIENTE (solo nombre)
   - Expand: card con acciones arriba + campos tipo "input" (imagen 2)
   ===================================================================== */

/* Fallback: ocultar detalles si por alguna razón el JS no aplica inline style */
.tf-v26-scope tr.tf-d-detail,
.tf-v26-scope tr.tf-m-detail{ display:none; }
.tf-v26-scope tr.tf-row-open + tr.tf-d-detail,
.tf-v26-scope tr.tf-row-open + tr.tf-m-detail{ display:table-row; }

/* Ajustes específicos móvil */
@media (max-width: 768px){
  .tf-v26-scope .tf-table-wrap{ padding: 8px; }
  .tf-v26-scope .tf-premium-table{ table-layout: fixed; }

  .tf-v26-scope .tf-premium-table thead th{
    font-size: .70rem;
    padding: 10px 10px;
  }
  .tf-v26-scope .tf-premium-table tbody td{
    padding: 10px 10px;
  }

  /* Columnas: 1 toggle | 2 folio | 3 cliente */
  .tf-v26-scope .tf-premium-table thead th:nth-child(1),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(1){
    width: 44px;
    text-align: center;
  }
  .tf-v26-scope .tf-premium-table thead th:nth-child(2),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(2){
    width: 92px;
  }
  .tf-v26-scope .tf-premium-table thead th:nth-child(3),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(3){
    width: auto;
  }

  .tf-v26-scope .tf-m-td{ vertical-align: middle; }
  .tf-v26-scope .tf-m-td-toggle{
    position: relative;
    padding-left: 14px !important; /* espacio para el accent */
  }
  .tf-v26-scope .tf-m-td-toggle::before{
    content:"";
    position:absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 4px;
    border-radius: 999px;
    background: var(--tf-row-accent, #fb923c);
    opacity: .95;
  }

  /* Cliente: solo una línea */
  .tf-v26-scope .tf-m-cliente{
    font-weight: 950;
    letter-spacing: .01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Detalle */
  .tf-v26-scope tr.tf-m-detail td{
    padding: 10px 10px 14px;
    background: rgba(79,70,229,.06);
    border-bottom: 1px solid rgba(226,232,240,.95);
  }
}

/* Card detalle (imagen 2 vibe) */
.tf-v26-scope .tf-m-detail-card{
  background: rgba(255,255,255,.90);
  border: 1px dashed rgba(99,102,241,.35);
  border-radius: 14px;
  padding: 12px;
}

/* =========================================================
   ✅ Acento por estado (móvil + desktop)
   - En desktop ya se aplica a tr.tf-row-st-*
   - En móvil cards usamos el MISMO token: --tf-row-accent
   ========================================================= */
.tf-v26-scope .tf-row-st-1{ --tf-row-accent:#ef4444; } /* pendiente */
.tf-v26-scope .tf-row-st-2{ --tf-row-accent:#3b82f6; } /* listo */
.tf-v26-scope .tf-row-st-3{ --tf-row-accent:#22c55e; } /* entregado */
.tf-v26-scope .tf-row-st-4{ --tf-row-accent:#f97316; } /* no quedo entregado */
.tf-v26-scope .tf-row-st-5{ --tf-row-accent:#f97316; } /* no quedo */
.tf-v26-scope .tf-row-st-6{ --tf-row-accent:#a855f7; } /* diagnostico */
.tf-v26-scope .tf-row-st-7{ --tf-row-accent:#14b8a6; } /* en proceso */

/* Barra izquierda (como escritorio) */
.tf-v26-scope .tf-m-card{ position:relative; }
.tf-v26-scope .tf-m-card::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius: 999px;
  background: var(--tf-row-accent, #94a3b8);
  opacity: .95;
}

/* Acciones arriba (touch friendly, SIN amontonarse) */
.tf-v26-scope .tf-m-actionsbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px dashed rgba(148,163,184,.45);
  flex-wrap: wrap;
  overflow: visible;
}
.tf-v26-scope .tf-m-actionsbar-right{ display:flex; }
.tf-v26-scope .tf-m-actionsbar-right .tf-actions-group{
  display:flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

/* Botones de acción (44px touch) */
.tf-v26-scope .tf-m-actionsbar .tf-btn-action{
  width:44px;
  height:44px;
  min-width:44px;
  min-height:44px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.tf-v26-scope .tf-m-actionsbar .tf-btn-action i{ font-size: 1.15rem; }

/* Fotos button: badge compacto (evita botón largo) */
.tf-v26-scope .tf-m-actionsbar .tf-action-fotos{ position:relative; }
.tf-v26-scope .tf-m-actionsbar .tf-action-fotos .tf-badge-count,
.tf-v26-scope .tf-m-actionsbar .tf-action-fotos .tf-badge-zero{
  position:absolute;
  top:-6px;
  right:-6px;
  margin-left:0 !important;
}

/* Campos tipo "input" */
.tf-v26-scope .tf-m-fields{
  display:flex;
  flex-direction: column;
  gap: 10px;
}
.tf-v26-scope .tf-m-field{
  background: #ffffff;
  border: 1px solid rgba(203,213,225,.95);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 1px 0 rgba(15,23,42,.03);
}
.tf-v26-scope .tf-m-field-head{
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 950;
  font-size: .66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(100,116,139,.95);
}
.tf-v26-scope .tf-m-field-head i{ font-size: 1rem; opacity: .85; }
.tf-v26-scope .tf-m-field-val{
  margin-top: 6px;
  font-weight: 600;
  color: #0f172a;
  font-size: .95rem;
  line-height: 1.15;
}
.tf-v26-scope .tf-m-field-val .tf-status-badge{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding: .38rem .65rem;
  border-radius: 999px;
  font-size: .80rem;
  font-weight: 950;
}

/* Notas */
.tf-v26-scope .tf-m-notes2{
  margin-top: 10px;
  background:#ffffff;
  border: 1px solid rgba(203,213,225,.95);
  border-radius: 12px;
  padding: 10px 12px;
}
.tf-v26-scope .tf-m-notes2 .ttl{
  font-weight: 950;
  font-size:.66rem;
  letter-spacing:.08em;
  text-transform: uppercase;
  color: rgba(100,116,139,.95);
  margin-bottom: 6px;
}
.tf-v26-scope .tf-m-notes2 .txt{
  font-weight: 700;
  color:#0f172a;
  font-size: .90rem;
  white-space: pre-wrap;
}

/* Totales abajo */
.tf-v26-scope .tf-m-totals{
  margin-top: 12px;
  display:flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tf-v26-scope .tf-m-totals .tf-page-chip{
  background: rgba(255,255,255,.95);
  border: 1px solid rgba(203,213,225,.95);
}

/* Afinar botón expand en móvil */
@media (max-width: 768px){
  .tf-v26-scope .tf-btn-expand{
    width: 26px;
    height: 26px;
    border-radius: 999px;
  }
}


/* =====================================================================
   ✅ V26.3 — DESKTOP: corregir anchos para 6 columnas reales
   (1 Folio | 2 Cliente | 3 Equipo/Servicio | 4 Estado | 5 Fotos | 6 Acciones)
   ===================================================================== */
@media (min-width: 769px){
  .tf-v26-scope .tf-premium-table thead th:nth-child(1),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(1){ width: 92px; }

  .tf-v26-scope .tf-premium-table thead th:nth-child(2),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(2){ width: 220px; }

  .tf-v26-scope .tf-premium-table thead th:nth-child(3),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(3){ width: 280px; }

  .tf-v26-scope .tf-premium-table thead th:nth-child(4),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(4){ width: 170px; }

  .tf-v26-scope .tf-premium-table thead th:nth-child(5),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(5){ width: 120px; }

  /* 🔥 ACCIONES con ancho suficiente */
  .tf-v26-scope .tf-premium-table thead th:nth-child(6),
  .tf-v26-scope .tf-premium-table tbody td:nth-child(6){
    width: 260px;
    overflow: visible;
  }
}

/* Utilidad */
.tf-v26-scope .tf-muted{ color: rgba(100,116,139,.95); font-weight: 700; }


/* =========================================================
   ✅ V26 — MÓVIL (FIX): lista de cards (NO tabla) — evita ancho raro
   ========================================================= */
@media (max-width: 768px){
  .tf-v26-scope,
  .tf-v26-scope .tf-table-wrap{ width:100% !important; max-width:100% !important; }

  /* en móvil usamos cards, no tabla */
  .tf-v26-scope .tf-premium-table{ display:none !important; }

  .tf-v26-scope .tf-table-wrap{
    padding: 10px !important;
    overflow: visible !important;
  }

  .tf-v26-scope .tf-m-list{
    display:flex !important;
    flex-direction:column !important;
    gap: 10px !important;
    width:100% !important;
  }

  .tf-v26-scope .tf-m-card{
    width:100% !important;
    background:#fff !important;
    border:1px solid rgba(226,232,240,.95) !important;
    border-radius:16px !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.06) !important;
    overflow:hidden !important;
  }

  .tf-v26-scope .tf-m-head{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding: 12px 12px 10px !important;
  }

  .tf-v26-scope .tf-m-head-main{
    flex:1 !important;
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:2px !important;
  }

  .tf-v26-scope .tf-m-folio{
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    line-height: 1.05 !important;
    color:#0f172a !important;
  }

  .tf-v26-scope .tf-m-cliente{
    font-size: .98rem !important;
    font-weight: 600 !important;
    color:#111827 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .tf-v26-scope .tf-btn-expand{
    width:30px !important;
    height:30px !important;
    border-radius:999px !important;
  }

  .tf-v26-scope .tf-m-detail{
    padding: 0 12px 12px !important;
  }
}