/* ==========================================================================
   TPA Clean UI System — Unified Rounded Geometry, Smooth Motion & Area Tints
   Uses TPA's native module color palette across Ventas, Administración,
   Almacén, Auditoría and Dev. Respects prefers-reduced-motion & dark/light views.
   ========================================================================== */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: tpa-vt-fade-out .2s cubic-bezier(.4, 0, .2, 1) both;
}

::view-transition-new(root) {
  animation: tpa-vt-fade-in .28s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes tpa-vt-fade-out {
  from { opacity: 1; }
  to { opacity: .01; }
}

@keyframes tpa-vt-fade-in {
  from { opacity: .01; }
  to { opacity: 1; }
}

:root {
  /* Native TPA area & module palette */
  --tpa-c-ventas: #00E279;
  --tpa-c-admin: #8b5cf6;
  --tpa-c-almacen: #84b446;
  --tpa-c-tasks: #60a5fa;
  --tpa-c-packages: #f59e0b;
  --tpa-c-notes: #34d399;
  --tpa-c-admin-notes: #06b6d4;
  --tpa-c-bdd: #f472b6;
  --tpa-c-history: #10b981;
  --tpa-c-prod: #a78bfa;
  --tpa-c-rose: #fb7185;
  --tpa-c-teal: #14b8a6;
  --tpa-c-audit: #d97706;
  --tpa-c-sky: #0ea5e9;
  --tpa-c-danger: #ef4444;

  /* Active page accent (auto-refined per route by tpa_clean_ui.js) */
  --tpa-page-accent: var(--acc, var(--accent, var(--ventas-acc, #00E279)));

  /* Rounded geometry scale */
  --tpa-r-pill: 999px;
  --tpa-r-2xl: 26px;
  --tpa-r-xl: 22px;
  --tpa-r-lg: 18px;
  --tpa-r-md: 14px;
  --tpa-r-sm: 10px;

  /* Motion curves */
  --tpa-ease-out: cubic-bezier(.22, 1, .36, 1);
  --tpa-ease-spring: cubic-bezier(.16, 1, .3, 1);
  --tpa-ease-std: cubic-bezier(.4, 0, .2, 1);

  /* Off-white area background texture at exact 20% opacity (80% off-white veil + 20% image) */
  --tpa-offwhite-base: #f3f5f8;
  --tpa-offwhite-bg-layers:
    linear-gradient(180deg, rgba(243, 245, 248, .80) 0%, rgba(240, 242, 246, .80) 100%),
    url("/static/tpa_offwhite_bg.jpg");
}

/* ── 1. OFF-WHITE SUBTLE TEXTURE (20% OPACITY) & SMOOTH PAGE MOTION ───── */
html body[data-tpa-surface="light"]:not(:has(.board-area)),
html body[data-tpa-surface="light"]:not(:has(.board-area)) .main,
html body[data-tpa-surface="light"]:not(:has(.board-area)) > main:not(.content):not(.wrap):not(.page),
html body[data-tpa-surface="light"] .board-area {
  background-color: var(--tpa-offwhite-base) !important;
  background-image: var(--tpa-offwhite-bg-layers) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
}
html.tpa-page-leaving body:not(:has(.login-ambient)) :is(main, .main, .content, .wrap, .page, .dashboard) {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .22s var(--tpa-ease-std);
}

body:not(:has(.login-ambient)) :is(.content, main.wrap, main.page) {
  animation: tpa-surface-enter .42s var(--tpa-ease-out);
}

@keyframes tpa-surface-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 2. FLOATING CAPSULE TOPBAR (Reference-inspired sleek pill header) ── */
html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header) {
  background: linear-gradient(135deg, rgba(19, 25, 31, .95) 0%, rgba(30, 38, 46, .93) 100%) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .11) !important;
  border-radius: var(--tpa-r-pill) !important;
  box-shadow:
    0 12px 30px -10px rgba(15, 23, 42, .28),
    0 2px 8px rgba(15, 23, 42, .10),
    inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  min-height: 58px;
  padding-left: 16px !important;
  padding-right: 18px !important;
  transition:
    box-shadow .3s var(--tpa-ease-out),
    border-color .28s ease,
    background-color .28s ease,
    transform .3s var(--tpa-ease-out);
}

html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header):not([data-tpa-fixed-top="1"]) {
  margin: 10px 16px 6px !important;
  width: calc(100% - 32px) !important;
}

html body:not(:has(.login-ambient)) :is(.admin-topbar, .ventas-topbar, header.top):not([data-tpa-fixed-top="1"]) {
  top: 10px !important;
}

html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top)[data-tpa-fixed-top="1"] {
  top: 10px !important;
  left: 16px !important;
  right: 16px !important;
  width: auto !important;
  margin: 0 !important;
}

html body[data-tpa-has-fixed-top="1"] .main {
  padding-top: 76px !important;
}

html body:not(:has(.login-ambient)) .admin-sticky {
  top: 74px !important;
  border-radius: 0 0 var(--tpa-r-lg) var(--tpa-r-lg);
}

/* Hamburger / Sidebar Trigger Pill Button */
html body:not(:has(.login-ambient)) :is(.ham-btn, .admin-ham, .ventas-ham-btn, .ham, header.topbar .menu, #hamBtn, #ventasHamBtn, #menuButton) {
  width: 38px;
  height: 38px;
  padding: 0 !important;
  border-radius: var(--tpa-r-pill) !important;
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .11) !important;
  color: #f8fafc !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition:
    background-color .26s var(--tpa-ease-out),
    border-color .26s var(--tpa-ease-out),
    color .24s ease,
    transform .34s var(--tpa-ease-spring),
    box-shadow .28s var(--tpa-ease-out) !important;
}

html body:not(:has(.login-ambient)) :is(.ham-btn, .admin-ham, .ventas-ham-btn, .ham, header.topbar .menu, #hamBtn, #ventasHamBtn, #menuButton):hover {
  background: color-mix(in srgb, var(--tpa-page-accent) 22%, rgba(255, 255, 255, .08)) !important;
  border-color: color-mix(in srgb, var(--tpa-page-accent) 56%, rgba(255, 255, 255, .24)) !important;
  color: #ffffff !important;
  transform: scale(1.06);
  box-shadow: 0 0 18px color-mix(in srgb, var(--tpa-page-accent) 28%, transparent);
}

html body:not(:has(.login-ambient)) :is(.ham-btn, .admin-ham, .ventas-ham-btn, .ham, header.topbar .menu, #hamBtn, #ventasHamBtn, #menuButton):active {
  transform: scale(.94);
}

html body[data-tpa-sb-open="1"] :is(.ham-btn, .admin-ham, .ventas-ham-btn, .ham, header.topbar .menu, #hamBtn, #ventasHamBtn, #menuButton) {
  background: color-mix(in srgb, var(--tpa-page-accent) 26%, rgba(255, 255, 255, .10)) !important;
  border-color: color-mix(in srgb, var(--tpa-page-accent) 65%, transparent) !important;
  transform: rotate(90deg);
}

/* Topbar Action Buttons & Profile Pill (like "Get in Touch" capsule) */
html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header) :is(.btn, a.btn, button.btn, .home, .dn-btn, .logout) {
  border-radius: var(--tpa-r-pill) !important;
  transition:
    background-color .26s var(--tpa-ease-out),
    border-color .26s var(--tpa-ease-out),
    color .22s ease,
    transform .26s var(--tpa-ease-out),
    box-shadow .28s var(--tpa-ease-out) !important;
}

html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header) :is(.btn:not(.btn-accent):not(.btn-a):not(.btn-primary), .home, .dn-btn:not(.danger)) {
  background: rgba(255, 255, 255, .07) !important;
  color: #f1f5f9 !important;
  border: 1px solid rgba(255, 255, 255, .20) !important;
}

html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header) :is(.btn:not(.btn-accent):not(.btn-a):not(.btn-primary), .home, .dn-btn:not(.danger)):hover {
  background: color-mix(in srgb, var(--tpa-page-accent) 20%, rgba(255, 255, 255, .12)) !important;
  border-color: color-mix(in srgb, var(--tpa-page-accent) 62%, rgba(255, 255, 255, .36)) !important;
  color: #ffffff !important;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 18px -4px color-mix(in srgb, var(--tpa-page-accent) 28%, rgba(0, 0, 0, .25));
}

html body:not(:has(.login-ambient)) :is(.admin-top-user, .ventas-top-user, .top-profile, header.topbar .user, header.topbar .profile, header.top .user, .topbar > a[href="/perfil"]) {
  padding: 4px 12px 4px 5px;
  border-radius: var(--tpa-r-pill);
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .86) !important;
  transition:
    background-color .26s var(--tpa-ease-out),
    border-color .26s var(--tpa-ease-out),
    color .22s ease,
    transform .26s var(--tpa-ease-out) !important;
}

html body:not(:has(.login-ambient)) :is(.admin-top-user, .ventas-top-user, .top-profile, header.topbar .user, header.topbar .profile, header.top .user, .topbar > a[href="/perfil"]):hover {
  background: color-mix(in srgb, var(--tpa-page-accent) 18%, rgba(255, 255, 255, .09));
  border-color: color-mix(in srgb, var(--tpa-page-accent) 50%, rgba(255, 255, 255, .24));
  color: #ffffff !important;
  transform: translateY(-1px);
}

html body:not(:has(.login-ambient)) :is(.topbar, header.top) .logout {
  padding: 7px 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .04);
  text-decoration: none;
}

html body:not(:has(.login-ambient)) :is(.topbar, header.top) .logout:hover {
  background: rgba(251, 113, 133, .16);
  border-color: rgba(251, 113, 133, .45);
  color: #ffe4e6 !important;
  transform: translateY(-1px);
}

/* ── 3. SIDEBAR: SMOOTH DRAWER + PER-AREA TENUE HOVER COLORS ──────────── */
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) {
  background-color: #1c2229 !important;
  background-image: linear-gradient(165deg, rgba(255, 255, 255, .05) 0%, rgba(255, 255, 255, .01) 42%, rgba(10, 14, 19, .28) 100%) !important;
  border-radius: 0 var(--tpa-r-2xl) var(--tpa-r-2xl) 0 !important;
  border-right: 1px solid rgba(255, 255, 255, .09);
  transition:
    transform .46s var(--tpa-ease-spring),
    box-shadow .34s var(--tpa-ease-out) !important;
}

html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar).open {
  box-shadow:
    22px 0 56px -8px rgba(10, 15, 25, .42),
    inset -1px 0 0 rgba(255, 255, 255, .11) !important;
}

html body :is(.sb-box, .ventas-sb-box, .sb-logo-box, .brand-box) {
  border-radius: 13px !important;
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, .32);
}

/* Per-destination native TPA color assignment inside every sidebar */
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) :is(.sb-a, .ventas-sb-a, .sb-item, .warehouse-nav-link) {
  --sb-item-accent: var(--tpa-page-accent, #00E279);
  border-radius: var(--tpa-r-md) !important;
  margin-bottom: 3px;
  border: 1px solid transparent;
  position: relative;
  transition:
    background-color .26s var(--tpa-ease-out),
    border-color .26s var(--tpa-ease-out),
    color .22s ease,
    box-shadow .28s var(--tpa-ease-out),
    translate .26s var(--tpa-ease-out) !important;
}

/* Exact TPA module color map for sidebar links */
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/ventas_home"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/ventas_dashboard"] { --sb-item-accent: #00E279; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/dashboard"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/almacen/tareas"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/seguimiento_paquetes"] { --sb-item-accent: #60a5fa; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href^="/packages"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/admin/dashboard"] { --sb-item-accent: #f59e0b; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/notas_venta"] { --sb-item-accent: #34d399; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/mi_bdd"] { --sb-item-accent: #f472b6; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/historial"] { --sb-item-accent: #10b981; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/productividad"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href^="/dev"] { --sb-item-accent: #a78bfa; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/paquetes_eliminados"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/users"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/logout"] { --sb-item-accent: #fb7185; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/tablero_kpis_ventas"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href^="/dashboard_envios"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href^="/reporte_noemi"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/admin/conciliacion"] { --sb-item-accent: #14b8a6; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/admin_home"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href^="/admin/tareas"] { --sb-item-accent: #8b5cf6; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/admin/notas_venta"] { --sb-item-accent: #06b6d4; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/admin/conciliacion-egresos"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/auditoria_clientes"] { --sb-item-accent: #f59e0b; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/admin/no-aplica"] { --sb-item-accent: #f87171; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/home_almacen"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/almacen/actividades"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/almacen/productividad"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/almacen_test"] { --sb-item-accent: #84b446; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/home"] { --sb-item-accent: #38bdf8; }
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/cambiar_perfil"],
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) a[href="/perfil"] { --sb-item-accent: #c084fc; }

/* Soft tenue area-colored hover on every sidebar link */
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) :is(.sb-a, .ventas-sb-a, .sb-item, .warehouse-nav-link):hover {
  background-color: color-mix(in srgb, var(--sb-item-accent) 18%, rgba(255, 255, 255, .03)) !important;
  border-color: color-mix(in srgb, var(--sb-item-accent) 34%, transparent) !important;
  color: color-mix(in srgb, var(--sb-item-accent) 42%, #ffffff) !important;
  box-shadow:
    inset 3px 0 0 color-mix(in srgb, var(--sb-item-accent) 85%, #ffffff),
    0 8px 20px -8px color-mix(in srgb, var(--sb-item-accent) 32%, transparent);
}

html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) :is(.sb-a, .ventas-sb-a, .sb-item, .warehouse-nav-link) .ic {
  transition: transform .26s var(--tpa-ease-spring), filter .26s ease;
}

html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) :is(.sb-a, .ventas-sb-a, .sb-item, .warehouse-nav-link):hover .ic {
  transform: scale(1.14);
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--sb-item-accent) 45%, transparent));
}

/* Active state in sidebar uses the item's own soft area tint */
html body :is(.sb, nav.ventas-sb, .sidebar, .warehouse-sidebar) :is(.sb-a.on, .ventas-sb-a.on, .sb-item.active, .warehouse-nav-link.active, .warehouse-nav-link.on) {
  background-color: color-mix(in srgb, var(--sb-item-accent) 22%, rgba(255, 255, 255, .04)) !important;
  border-color: color-mix(in srgb, var(--sb-item-accent) 40%, transparent) !important;
  color: color-mix(in srgb, var(--sb-item-accent) 72%, #ffffff) !important;
  box-shadow: inset 3px 0 0 var(--sb-item-accent);
}

/* Sidebar user footer capsule */
html body :is(.sb-usr, .ventas-sb-usr, .sb-user) {
  border-radius: var(--tpa-r-md) !important;
  border: 1px solid transparent;
  transition:
    background-color .26s var(--tpa-ease-out),
    border-color .26s var(--tpa-ease-out),
    transform .24s var(--tpa-ease-out) !important;
}

html body :is(.sb-usr, .ventas-sb-usr, .sb-user):hover {
  background-color: color-mix(in srgb, var(--tpa-page-accent) 15%, rgba(255, 255, 255, .05)) !important;
  border-color: color-mix(in srgb, var(--tpa-page-accent) 30%, transparent);
  transform: translateY(-1px);
}

/* ── 4. AREA CARDS & MODULE CARDS: ROUNDED + TENUE COLOR HOVER BLOOM ──── */
html body :is(.area-card) {
  --tpa-card-tint: var(--c, var(--card-color, var(--tpa-page-accent)));
  border-radius: var(--tpa-r-xl) !important;
  border: 1px solid rgba(15, 23, 42, .08);
  box-shadow:
    0 8px 26px -6px rgba(15, 23, 42, .06),
    0 2px 6px rgba(15, 23, 42, .03);
  transition:
    transform .34s var(--tpa-ease-out),
    box-shadow .34s var(--tpa-ease-out),
    border-color .28s var(--tpa-ease-out),
    background-color .3s var(--tpa-ease-out),
    opacity .22s ease,
    filter .22s ease !important;
}

html body .area-card::before {
  height: 4px;
  background: var(--tpa-card-tint) !important;
  opacity: .42;
  transition: height .3s var(--tpa-ease-out), opacity .26s ease !important;
}

html body .area-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(
      circle 260px at var(--tpa-mx, 28%) var(--tpa-my, 24%),
      color-mix(in srgb, var(--tpa-card-tint) 20%, transparent) 0%,
      color-mix(in srgb, var(--tpa-card-tint) 9%, transparent) 58%,
      color-mix(in srgb, var(--tpa-card-tint) 5%, transparent) 100%
    ) !important;
  opacity: 0;
  transition: opacity .32s var(--tpa-ease-out) !important;
}

html body .area-card:hover {
  transform: translateY(-5px);
  border-color: color-mix(in srgb, var(--tpa-card-tint) 52%, #cbd5e1) !important;
  box-shadow:
    0 20px 44px -12px color-mix(in srgb, var(--tpa-card-tint) 26%, rgba(15, 23, 42, .12)),
    0 4px 12px rgba(15, 23, 42, .05) !important;
}

html body .area-card:hover::before {
  height: 5px;
  opacity: 1 !important;
}

html body .area-card:hover::after {
  opacity: 1 !important;
}

html body .area-card :is(.ic, .card-icon) {
  transition: transform .34s var(--tpa-ease-spring), filter .3s ease !important;
}

html body .area-card:hover :is(.ic, .card-icon) {
  transform: scale(1.09) translateY(-2px);
}

html body .area-card :is(.card-badge, .badge) {
  border-radius: var(--tpa-r-pill) !important;
  padding: 5px 13px !important;
  transition: transform .26s var(--tpa-ease-out), box-shadow .26s ease, background-color .26s ease;
}

html body .area-card:hover :is(.card-badge, .badge) {
  box-shadow: 0 4px 12px -3px color-mix(in srgb, var(--tpa-card-tint) 28%, transparent);
}

html body .area-card :is(.arrow, .card-arrow) {
  transition: color .24s ease, transform .28s var(--tpa-ease-spring) !important;
}

html body .area-card:hover :is(.arrow, .card-arrow) {
  color: var(--tpa-card-tint) !important;
  transform: translateX(5px) !important;
}

/* ── 5. CLEAN ROUNDED SURFACES & TENUE HOVERS ACROSS MODULE VIEWS ─────── */
/* Major containers, panels & table cards */
html body:not(:has(.login-ambient)) :is(.card, .tcard, .reg-card, .create-card, .table-card, .table-shell, .table-panel, .agenda-card, .admin-cal-card, .admin-day-card, .panel:not(.tpa-help-panel):not(.password-panel):not([id^="panel-"]), .security-card, .ai-panel, .chalkboard) {
  border-radius: var(--tpa-r-xl) !important;
}

/* KPI, Stat & Metric tiles — soft tenue color hover */
html body:not(:has(.login-ambient)) :is(.stat, .metric, .agenda-kpi, .stat-card, .kpi-card, .person, .package-person, .package-detail-item, .detail-item) {
  --tpa-tile-tint: var(--sc, var(--accent-clr, var(--tpa-page-accent)));
  border-radius: var(--tpa-r-lg) !important;
  transition:
    transform .28s var(--tpa-ease-out),
    box-shadow .3s var(--tpa-ease-out),
    border-color .26s var(--tpa-ease-out),
    background-color .28s var(--tpa-ease-out) !important;
}

html body:not(:has(.login-ambient)):not([data-tpa-dark="1"]) :is(.stat, .metric, .agenda-kpi, .stat-card, .kpi-card, .person, .package-person, .package-detail-item, .detail-item):hover {
  background-color: color-mix(in srgb, var(--tpa-tile-tint) 8.5%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--tpa-tile-tint) 40%, #d1d5db) !important;
  transform: translateY(-2.5px);
  box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--tpa-tile-tint) 22%, rgba(15, 23, 42, .08));
}

html body[data-tpa-dark="1"] :is(.stat, .stat-card, .ai-panel):hover {
  background-color: color-mix(in srgb, var(--tpa-tile-tint) 13%, #22262b) !important;
  border-color: color-mix(in srgb, var(--tpa-tile-tint) 42%, rgba(255, 255, 255, .14)) !important;
  transform: translateY(-2.5px);
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--tpa-tile-tint) 28%, rgba(0, 0, 0, .4));
}

/* Task cards, Kanban items, Warehouse activities, Admin events & Profile selectors */
html body:not(:has(.login-ambient)) :is(.task-card, .col-body .card, .activity, .admin-event, .agenda-item, .timer-item, .admin-action-card, .request, .profile-btn, .tpa-update-card) {
  border-radius: var(--tpa-r-lg) !important;
  transition:
    transform .28s var(--tpa-ease-out),
    box-shadow .3s var(--tpa-ease-out),
    border-color .26s var(--tpa-ease-out),
    background-color .28s var(--tpa-ease-out) !important;
}

html body:not(:has(.login-ambient)):not([data-tpa-dark="1"]) :is(.task-card, .col-body .card, .agenda-item, .timer-item, .admin-action-card, .request, .tpa-update-card):hover {
  background-color: color-mix(in srgb, var(--tpa-page-accent) 7.5%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--tpa-page-accent) 42%, #cbd5e1) !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px color-mix(in srgb, var(--tpa-page-accent) 20%, rgba(15, 23, 42, .08));
}

html body .activity:hover {
  background-color: color-mix(in srgb, #84b446 11%, #fefcf3) !important;
  border-color: color-mix(in srgb, #84b446 45%, #d5dfc8) !important;
  transform: translateY(-2.5px);
  box-shadow: 0 12px 24px -8px rgba(20, 40, 22, .22);
}

html body .profile-btn {
  border-radius: var(--tpa-r-lg) !important;
}

html body .profile-btn:hover {
  background-color: color-mix(in srgb, var(--tpa-c-ventas) 9%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--tpa-c-ventas) 58%, #cbd5e1) !important;
  transform: translateY(-2.5px) !important;
  box-shadow: 0 14px 28px -10px rgba(0, 226, 121, .24) !important;
}

html body .profile-btn .profile-arrow {
  transition: transform .26s var(--tpa-ease-spring), color .22s ease;
}

html body .profile-btn:hover .profile-arrow {
  color: #059669;
  transform: translateX(4px);
}

/* Table rows & Interactive List rows — smooth tenue tint on hover */
html body:not(:has(.login-ambient)) :is(tbody tr) {
  transition: background-color .22s var(--tpa-ease-out), box-shadow .22s ease;
}

html body:not(:has(.login-ambient)) :is(tbody tr td) {
  transition: background-color .22s var(--tpa-ease-out);
}

html body:not(:has(.login-ambient)):not([data-tpa-dark="1"]) tbody tr:hover td {
  background-color: color-mix(in srgb, var(--tpa-page-accent) 6.5%, #ffffff) !important;
}

html body[data-tpa-dark="1"] tbody tr:hover td {
  background-color: color-mix(in srgb, var(--tpa-page-accent) 11%, rgba(255, 255, 255, .025)) !important;
}

html body:not(:has(.login-ambient)) :is(.pkg-row, .user-row, .assignment-row, .reminder-row, .filter-option) {
  border-radius: var(--tpa-r-md);
  transition:
    background-color .24s var(--tpa-ease-out),
    border-color .24s var(--tpa-ease-out),
    box-shadow .24s var(--tpa-ease-out),
    transform .24s var(--tpa-ease-out) !important;
}

html body:not(:has(.login-ambient)):not([data-tpa-dark="1"]) :is(.pkg-row, .assignment-row, .reminder-row, .filter-option):hover {
  background-color: color-mix(in srgb, var(--tpa-page-accent) 8%, #ffffff) !important;
}

html body[data-tpa-dark="1"] .user-row:hover {
  background-color: color-mix(in srgb, var(--tpa-page-accent) 11%, #22262b) !important;
  border-color: color-mix(in srgb, var(--tpa-page-accent) 40%, rgba(255, 255, 255, .14)) !important;
  transform: translateY(-1.5px);
}

/* ── 6. FORM CONTROLS, PILL BADGES & TACTILE BUTTONS ──────────────────── */
html body:not(:has(.login-ambient)) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.term-input), select, textarea) {
  border-radius: var(--tpa-r-md) !important;
  transition:
    border-color .22s var(--tpa-ease-out),
    box-shadow .24s var(--tpa-ease-out),
    background-color .22s ease !important;
}

html body:not(:has(.login-ambient)) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(.term-input), select, textarea):focus {
  border-color: var(--tpa-page-accent) !important;
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--tpa-page-accent) 16%, transparent) !important;
}

/* Rounded Pill Buttons & Smooth Hover Tinting */
html body:not(:has(.login-ambient)) :is(.btn, .admin-runtime-btn, .tpa-admin-timer-accept, .file-label, .security-toggle, .password-submit, .denied-close, .u-btn, .tpa-updates-understood, .tpa-help-button, .tpa-help-demo-button) {
  border-radius: var(--tpa-r-pill) !important;
  transition:
    transform .24s var(--tpa-ease-out),
    box-shadow .26s var(--tpa-ease-out),
    background-color .24s var(--tpa-ease-out),
    border-color .24s var(--tpa-ease-out),
    color .2s ease !important;
}

html body:not(:has(.login-ambient)):not([data-tpa-dark="1"]) :is(.btn:not(.btn-accent):not(.btn-a):not(.btn-primary):not(.primary):not(.btn-danger):not(.btn-ok), .admin-runtime-btn:not(.primary):not(.danger)):hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--tpa-page-accent) 10%, #ffffff) !important;
  border-color: color-mix(in srgb, var(--tpa-page-accent) 44%, #cbd5e1) !important;
  transform: translateY(-1.5px);
  box-shadow: 0 8px 18px -6px color-mix(in srgb, var(--tpa-page-accent) 22%, rgba(15, 23, 42, .08));
}

html body:not(:has(.login-ambient)) :is(.btn.btn-accent, .btn.btn-a, .btn.btn-primary, .btn.primary, .admin-runtime-btn.primary, .file-label, .security-toggle, .password-submit, .tpa-updates-understood, .tpa-help-demo-button):hover:not(:disabled) {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 24px -6px color-mix(in srgb, var(--tpa-page-accent) 38%, rgba(15, 23, 42, .22));
}

html body:not(:has(.login-ambient)) :is(.btn, .admin-runtime-btn, .u-btn, .dn-btn, .file-label, .security-toggle, .password-submit):active:not(:disabled) {
  transform: translateY(0) scale(.975) !important;
}

/* Status Badges & Chips */
html body:not(:has(.login-ambient)) :is(.badge, .estado-badge, .pill, .tag, .u-role, .role-badge, .pbadge, .status-badge, .filter-chip) {
  border-radius: var(--tpa-r-pill) !important;
}

/* Segmented Switches & Filter Bars */
html body:not(:has(.login-ambient)) :is(.filters:not(.sf-filters), .bdd-scope-switch, .task-source-toggle) {
  border-radius: var(--tpa-r-lg) !important;
}

html body:not(:has(.login-ambient)) :is(.bdd-scope-switch button, .task-source-toggle button) {
  border-radius: var(--tpa-r-md) !important;
  transition: background-color .22s var(--tpa-ease-out), color .2s ease, box-shadow .22s ease;
}

/* Keep Mi BDD draggable tabs geometry untouched while polishing outer radius */
html body .tabs:has([data-bdd-tab]) {
  border-radius: 16px !important;
}

/* ── 7. SMOOTH MODAL, DIALOG & DRAWER OVERLAYS ────────────────────────── */
/* Class-toggled overlays fade smoothly on BOTH open AND close */
html body :is(
  .overlay,
  .modal-wrap,
  .filter-drawer-overlay,
  .bdd-filter-overlay,
  .tpa-admin-timer-overlay,
  #adminAlertOverlay,
  .delete-conciliation-overlay,
  .task-submit-overlay,
  #tpa-overlay,
  .loading
):not([style*="display"]) {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition:
    opacity .28s var(--tpa-ease-out),
    visibility 0s linear .28s !important;
}

html body :is(
  .overlay.on,
  .overlay.open,
  .overlay.show,
  .modal-wrap.on,
  .modal-wrap.open,
  .modal-wrap.show,
  .filter-drawer-overlay.on,
  .filter-drawer-overlay.open,
  .bdd-filter-overlay.on,
  .bdd-filter-overlay.open,
  .tpa-admin-timer-overlay.on,
  .tpa-admin-timer-overlay.open,
  #adminAlertOverlay.open,
  #adminAlertOverlay.on,
  .delete-conciliation-overlay.on,
  .delete-conciliation-overlay.open,
  .task-submit-overlay.open,
  .task-submit-overlay.on,
  #tpa-overlay.show,
  #tpa-overlay.on,
  .loading.on,
  .loading.open
):not([style*="display"]) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition:
    opacity .28s var(--tpa-ease-out),
    visibility 0s linear 0s !important;
}

/* Smooth spring scale & rounded corners for inner modal cards */
html body :is(
  .modal,
  .admin-runtime-modal,
  .tpa-admin-timer-dialog,
  .task-submit-panel,
  .package-detail-modal,
  .delete-conciliation-modal,
  .denied-card,
  .export-modal
) {
  border-radius: var(--tpa-r-2xl) !important;
}

html body :is(.overlay, .modal-wrap, .tpa-admin-timer-overlay, #adminAlertOverlay, .task-submit-overlay):not([style*="display"]) :is(.modal, .admin-runtime-modal, .tpa-admin-timer-dialog, .task-submit-panel) {
  transform: translateY(14px) scale(.975);
  opacity: 0;
  transition:
    transform .34s var(--tpa-ease-spring),
    opacity .26s var(--tpa-ease-out) !important;
}

html body :is(
  .overlay.on,
  .overlay.open,
  .overlay.show,
  .modal-wrap.on,
  .modal-wrap.open,
  .modal-wrap.show,
  .tpa-admin-timer-overlay.on,
  #adminAlertOverlay.open,
  .task-submit-overlay.open
):not([style*="display"]) :is(.modal, .admin-runtime-modal, .tpa-admin-timer-dialog, .task-submit-panel) {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Native <dialog> elements */
html body dialog {
  border-radius: var(--tpa-r-2xl) !important;
}

html body dialog[open] {
  animation: tpa-dialog-pop .3s var(--tpa-ease-spring);
}

html body dialog::backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: tpa-backdrop-in .26s ease;
}

@keyframes tpa-dialog-pop {
  from {
    opacity: 0;
    transform: translateY(12px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes tpa-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Side Drawers (Filters & AI Assistant) */
html body :is(.filter-drawer, .tpa-ai-drawer) {
  border-radius: var(--tpa-r-2xl) 0 0 var(--tpa-r-2xl) !important;
  transition: transform .42s var(--tpa-ease-spring), box-shadow .32s ease !important;
}

/* Navigation & Full-screen Loading Cards */
html body :is(.sales-nav-load__panel, .admin-navigation-status, .area-load-panel, .ov-panel, .load-panel) {
  border-radius: var(--tpa-r-2xl) !important;
}

/* ── 8. MESSAGES, TOASTS & NOTICES: SMOOTH MOTION + HOVER REACTION ────── */
/* Single persistent toast elements (#toast, .admin-runtime-toast) */
html body :is(#toast.toast, .admin-runtime-toast) {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  border-radius: var(--tpa-r-lg) !important;
  padding: 13px 18px !important;
  background: rgba(20, 26, 33, .95) !important;
  color: #f8fafc !important;
  border: 1px solid color-mix(in srgb, var(--tpa-page-accent) 42%, rgba(255, 255, 255, .14)) !important;
  box-shadow:
    0 18px 42px -10px rgba(15, 23, 42, .34),
    inset 3px 0 0 var(--tpa-page-accent) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(14px) scale(.96);
  transition:
    opacity .28s var(--tpa-ease-out),
    transform .34s var(--tpa-ease-spring),
    visibility 0s linear .28s,
    background-color .26s ease,
    border-color .26s ease,
    box-shadow .28s ease !important;
}

html body :is(#toast.toast.show, #toast.toast.on, .admin-runtime-toast.show, .admin-runtime-toast.on) {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1);
  transition:
    opacity .28s var(--tpa-ease-out),
    transform .34s var(--tpa-ease-spring),
    visibility 0s linear 0s,
    background-color .26s ease,
    border-color .26s ease,
    box-shadow .28s ease !important;
}

/* Stacked dynamic toasts (.toasts .toast, #toasts .toast, .toast-wrap .toast, .tpa-live-toast) */
html body :is(.toasts .toast, #toasts .toast, .toast-wrap .toast, #toastWrap .toast, .tpa-live-toast) {
  --tpa-toast-accent: var(--tpa-page-accent, #00E279);
  border-radius: var(--tpa-r-lg) !important;
  padding: 13px 18px !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 16px 38px -10px rgba(15, 23, 42, .28),
    0 2px 8px rgba(15, 23, 42, .08) !important;
  animation: tpa-toast-enter .34s var(--tpa-ease-spring) both !important;
  transition:
    transform .26s var(--tpa-ease-spring),
    box-shadow .28s var(--tpa-ease-out),
    background-color .26s var(--tpa-ease-out),
    border-color .26s var(--tpa-ease-out),
    opacity .24s ease !important;
  cursor: pointer;
}

html body :is(.toasts .toast.err, .toasts .toast.error, #toasts .toast.err, #toasts .toast.error, .toast-wrap .toast.err, #toastWrap .toast.err, .tpa-live-toast.is-error) {
  --tpa-toast-accent: #ff4d6a;
}

html body :is(.toast-wrap .toast.warn, #toastWrap .toast.warn, .tpa-live-toast.is-warn) {
  --tpa-toast-accent: #f59e0b;
}

html body :is(.toasts .toast, #toasts .toast, .toast-wrap .toast, #toastWrap .toast, .tpa-live-toast).is-leaving {
  opacity: 0 !important;
  transform: translateY(10px) scale(.96) !important;
  pointer-events: none;
}

/* Smooth hover-over reaction on ALL floating toast messages */
html body :is(.toasts .toast, #toasts .toast, .toast-wrap .toast, #toastWrap .toast, .tpa-live-toast, #toast.toast.show, #toast.toast.on, .admin-runtime-toast.show):hover {
  transform: translateY(-3px) scale(1.018) !important;
  border-color: color-mix(in srgb, var(--tpa-toast-accent, var(--tpa-page-accent)) 68%, rgba(255, 255, 255, .3)) !important;
  box-shadow:
    0 22px 46px -10px color-mix(in srgb, var(--tpa-toast-accent, var(--tpa-page-accent)) 32%, rgba(15, 23, 42, .35)),
    0 0 0 1px color-mix(in srgb, var(--tpa-toast-accent, var(--tpa-page-accent)) 28%, transparent) !important;
}

@keyframes tpa-toast-enter {
  from {
    opacity: 0;
    transform: translateY(14px) scale(.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Global TPA Toast Stack container */
.tpa-live-toasts {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10500;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(410px, calc(100vw - 32px));
  pointer-events: none;
}

.tpa-live-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(20, 26, 33, .94);
  color: #f8fafc;
  border: 1px solid color-mix(in srgb, var(--tpa-toast-accent) 44%, rgba(255, 255, 255, .12));
  box-shadow: inset 3px 0 0 var(--tpa-toast-accent);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}

.tpa-live-toast__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--tpa-toast-accent);
  box-shadow: 0 0 10px var(--tpa-toast-accent);
}

/* Inline Notices, Banners, Status Alerts & Chat Messages — rounded + smooth hover */
html body:not(:has(.login-ambient)) :is(.notice, .dialog-error, .err-box, .wh-invite-error, .scope-note, .my-work, .invitations, .readonly, .overdue-banner, .note-item) {
  border-radius: var(--tpa-r-lg) !important;
  transition:
    transform .26s var(--tpa-ease-out),
    box-shadow .28s var(--tpa-ease-out),
    background-color .26s var(--tpa-ease-out),
    border-color .26s var(--tpa-ease-out) !important;
}

html body:not(:has(.login-ambient)) :is(.notice, .dialog-error, .err-box, .wh-invite-error, .scope-note, .my-work, .invitations, .overdue-banner, .note-item):hover {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 24px -10px rgba(15, 23, 42, .14);
}

html body .tpa-ai-message {
  transition: transform .24s var(--tpa-ease-out), box-shadow .26s var(--tpa-ease-out), border-color .24s ease;
}

html body .tpa-ai-message:hover {
  transform: translateY(-1.5px);
  box-shadow: 0 10px 22px -10px rgba(15, 23, 42, .16);
}

/* Floating Quick Launchers (Notifications, Novedades, Chat TPA) */
html body .tpa-updates-launcher {
  top: 76px;
}

html body :is(.tpa-notif-launcher, .tpa-updates-launcher, .tpa-ai-launcher) {
  transition:
    transform .28s var(--tpa-ease-spring),
    box-shadow .28s var(--tpa-ease-out),
    background-color .24s ease,
    border-color .24s ease !important;
}

html body :is(.tpa-notif-launcher, .tpa-updates-launcher):hover {
  transform: translateY(-2.5px) scale(1.04) !important;
  background-color: color-mix(in srgb, var(--tpa-page-accent) 24%, #242b33) !important;
  box-shadow: 0 12px 26px -6px color-mix(in srgb, var(--tpa-page-accent) 35%, rgba(15, 23, 42, .35)) !important;
}

/* ── 9. iOS PASSCODE KEYPAD UNLOCK BOUNCE (Ventas, Almacén & Admin Homes) ─ */
html body:has([data-tpa-keypad-home="1"]) :is(.content, main.content) {
  animation: none !important;
}

html body:has([data-tpa-keypad-home="1"]) .welcome {
  animation: tpa-keypad-welcome-in .38s var(--tpa-ease-out) both;
}

@keyframes tpa-keypad-welcome-in {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Pre-computed 3-column keypad cascade delays so first paint has zero FOUC */
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(1)  { --tpa-key-delay: 0ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(2)  { --tpa-key-delay: 34ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(3)  { --tpa-key-delay: 68ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(4)  { --tpa-key-delay: 52ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(5)  { --tpa-key-delay: 86ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(6)  { --tpa-key-delay: 120ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(7)  { --tpa-key-delay: 104ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(8)  { --tpa-key-delay: 138ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(9)  { --tpa-key-delay: 172ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(10) { --tpa-key-delay: 156ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(11) { --tpa-key-delay: 190ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(12) { --tpa-key-delay: 224ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(13) { --tpa-key-delay: 208ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(14) { --tpa-key-delay: 242ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(15) { --tpa-key-delay: 276ms; }
html body [data-tpa-keypad-home="1"] > .area-card:nth-child(n+16) { --tpa-key-delay: 295ms; }

html body [data-tpa-keypad-home="1"]:not(.tpa-keypad-settled):not(.is-navigating) > .area-card:not(.is-selected) {
  animation: tpa-ios-keypad-bounce .64s linear var(--tpa-key-delay, 0ms) both;
  will-change: transform, opacity;
}

html body [data-tpa-keypad-home="1"]:not(.tpa-keypad-settled):not(.is-navigating) > .area-card:not(.is-selected) .card-icon {
  animation: tpa-ios-keypad-icon .66s linear calc(var(--tpa-key-delay, 0ms) + 22ms) both;
}

/* UIKit CASpringAnimation-matched damped harmonic curve (overshoot + cushioned settle) */
@keyframes tpa-ios-keypad-bounce {
  0% {
    opacity: 0;
    transform: translate3d(0, 26px, 0) scale(.78);
    animation-timing-function: cubic-bezier(.20, .88, .32, 1);
  }
  44% {
    opacity: 1;
    transform: translate3d(0, -5.5px, 0) scale(1.038);
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
  }
  68% {
    opacity: 1;
    transform: translate3d(0, 1.8px, 0) scale(.991);
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
  }
  86% {
    opacity: 1;
    transform: translate3d(0, -0.5px, 0) scale(1.003);
    animation-timing-function: cubic-bezier(.25, .10, .25, 1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes tpa-ios-keypad-icon {
  0% {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(.70);
    animation-timing-function: cubic-bezier(.20, .88, .32, 1);
  }
  46% {
    opacity: 1;
    transform: translate3d(0, -1.5px, 0) scale(1.11);
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
  }
  72% {
    opacity: 1;
    transform: translate3d(0, 0.5px, 0) scale(.975);
    animation-timing-function: cubic-bezier(.25, .10, .25, 1);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* ── 10. TOPBAR QUICK-ACCESS BUTTONS (Left-aligned next to title, 1 button/area) ─ */
html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header) :is(.t-title, .topbar-title, .admin-top-title, .ventas-top-title, .top-title) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header):has(.tpa-quick-areas) :is(.t-title, .topbar-title, .admin-top-title, .ventas-top-title, .top-title, .brand, .brand-row, .dev-brand),
html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header):has(.tpa-quick-areas) > strong {
  flex: 0 1 auto !important;
}

.tpa-quick-areas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 8px;
  margin-right: auto;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  flex-shrink: 0;
  max-width: 100%;
}

.tpa-quick-pill {
  --qa-accent: var(--tpa-page-accent, #00E279);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 13px;
  border-radius: var(--tpa-r-pill);
  border: 1px solid rgba(255, 255, 255, .13);
  background: rgba(255, 255, 255, .055);
  color: rgba(248, 250, 252, .86) !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 650;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition:
    background-color .24s var(--tpa-ease-out),
    border-color .24s var(--tpa-ease-out),
    color .2s ease,
    transform .26s var(--tpa-ease-spring),
    box-shadow .26s var(--tpa-ease-out);
}

.tpa-quick-pill__ic {
  font-size: 12.5px;
  line-height: 1;
  opacity: .94;
  flex-shrink: 0;
}

.tpa-quick-pill__lbl {
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpa-quick-pill.is-current {
  background: color-mix(in srgb, var(--qa-accent) 18%, rgba(255, 255, 255, .07));
  border-color: color-mix(in srgb, var(--qa-accent) 46%, rgba(255, 255, 255, .16));
  color: #ffffff !important;
}

.tpa-quick-pill:hover,
.tpa-quick-pill:focus-visible {
  background: color-mix(in srgb, var(--qa-accent) 22%, rgba(255, 255, 255, .09)) !important;
  border-color: color-mix(in srgb, var(--qa-accent) 58%, rgba(255, 255, 255, .22)) !important;
  color: #ffffff !important;
  transform: translateY(-1.5px);
  box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--qa-accent) 42%, rgba(0, 0, 0, .36));
  outline: none;
}

.tpa-quick-pill:active {
  transform: translateY(0) scale(.96);
}

/* ── 11. RESPONSIVE & REDUCED MOTION SAFEGUARDS ────────────────────────── */
@media (max-width: 1100px) {
  .tpa-quick-pill {
    padding: 0 10px;
  }
}

@media (max-width: 880px) {
  .tpa-quick-pill__lbl {
    display: none;
  }
  .tpa-quick-pill {
    width: 32px;
    padding: 0;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header) {
    border-radius: 22px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header):not([data-tpa-fixed-top="1"]) {
    margin: 8px 10px 4px !important;
    width: calc(100% - 20px) !important;
  }
  html body:not(:has(.login-ambient)) :is(.topbar, .admin-topbar, .ventas-topbar, header.top)[data-tpa-fixed-top="1"] {
    top: 8px !important;
    left: 10px !important;
    right: 10px !important;
  }
}

@media (max-width: 620px) {
  .tpa-quick-areas {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  body:not(:has(.login-ambient)) :is(.content, main.wrap, main.page),
  html body:has([data-tpa-keypad-home="1"]) .welcome,
  html body [data-tpa-keypad-home="1"] > .area-card,
  html body [data-tpa-keypad-home="1"] > .area-card .card-icon,
  html body dialog[open],
  html body dialog::backdrop,
  html body :is(.toasts .toast, #toasts .toast, .tpa-live-toast) {
    animation: none !important;
  }
  html body :is(
    .topbar, .admin-topbar, .ventas-topbar, header.top, .dev-header,
    .ham-btn, .admin-ham, .ventas-ham-btn, .ham,
    .tpa-quick-pill, .tpa-quick-pill__dot,
    .area-card, .area-card::before, .area-card::after,
    .stat, .metric, .agenda-kpi, .stat-card, .task-card, .activity,
    .btn, .overlay, .modal-wrap, .modal, .filter-drawer,
    #toast.toast, .admin-runtime-toast, .tpa-live-toast
  ) {
    transition: none !important;
  }
}