/* Tikitago identity contract — WEB/STUDIO parity.
   Late, non-destructive bridge between the legacy --n-* material tokens and the
   current --tgds-* design system. Not loaded by transparent broadcast overlays. */
@layer tg-identity-contract {
  :root{
    --tg-ink-0:#070812;
    --tg-ink-1:#0b0d19;
    --tg-ink-2:#111425;
    --tg-ink-3:#171a2e;
    --tg-line:rgba(182,169,255,.15);
    --tg-line-strong:rgba(182,169,255,.28);
    --tg-text:#f7f5ff;
    --tg-soft:#d4d0e4;
    --tg-muted:#aaa7be;
    --tg-violet:#9f6bff;
    --tg-cyan:#27d9ff;
    --tg-mint:#48f3c3;
    --tg-amber:#ffb84d;
    --tg-rose:#ff5ca8;
    --tg-r-s:12px;
    --tg-r-m:18px;
    --tg-r-l:26px;
    --tg-control-h:40px;
    --tg-focus:0 0 0 3px rgba(159,107,255,.22),0 0 0 1px rgba(199,178,255,.72);

    /* One neutral material scale. Existing pages keep their semantic aliases. */
    --n-fondo:var(--tg-ink-0);
    --n-fondo-alto:var(--tg-ink-1);
    --n-plano:var(--tg-ink-2);
    --n-plano-alto:var(--tg-ink-3);
    --n-relieve:#1d2035;
    --n-filo:var(--tg-line);
    --n-filo-vivo:var(--tg-line-strong);
    --n-tinta:var(--tg-text);
    --n-tinta-med:var(--tg-soft);
    --n-tinta-baja:var(--tg-muted);
    --n-viol:var(--tg-violet);
    --n-viol-claro:#c7b2ff;
    --n-verde:var(--tg-mint);
    --n-rojo:var(--tg-rose);
    --r-sm:var(--tg-r-s);
    --r-md:var(--tg-r-m);
    --r-lg:var(--tg-r-l);
  }

  html.tg-design-surface{
    --tgds-ink-0:var(--tg-ink-0);
    --tgds-ink-1:var(--tg-ink-1);
    --tgds-ink-2:var(--tg-ink-2);
    --tgds-ink-3:var(--tg-ink-3);
    --tgds-line:var(--tg-line);
    --tgds-line-strong:var(--tg-line-strong);
    --tgds-text:var(--tg-text);
    --tgds-soft:var(--tg-soft);
    --tgds-muted:var(--tg-muted);
    --tgds-violet:var(--tg-violet);
    --tgds-cyan:var(--tg-cyan);
    --tgds-mint:var(--tg-mint);
    --tgds-amber:var(--tg-amber);
    --tgds-rose:var(--tg-rose);
    --tgds-radius-s:var(--tg-r-s);
    --tgds-radius-m:var(--tg-r-m);
    --tgds-radius-l:var(--tg-r-l);
  }

  /* Shared control geometry. Specific components may opt out with data-tg-raw-control. */
  html.tg-design-surface :where(button,.btn,.button,input:not([type="checkbox"]):not([type="radio"]),select,textarea):not([data-tg-raw-control]){
    border-radius:var(--tg-r-s);
  }
  html.tg-design-surface :where(button,.btn,.button):not([data-tg-raw-control]){
    min-height:36px;
  }
  html.tg-design-surface :where(input:not([type="checkbox"]):not([type="radio"]),select):not([data-tg-raw-control]){
    min-height:var(--tg-control-h);
  }
  html.tg-design-surface :where(input,select,textarea):focus-visible{
    outline:none;
    box-shadow:var(--tg-focus);
    border-color:color-mix(in srgb,var(--tgds-accent,var(--tg-violet)) 72%,white 8%);
  }

  /* Canonical icon geometry: prevents random 14/16/18/20px glyphs in equal buttons. */
  html.tg-design-surface :where(button,.btn,.button) > :where(svg,.icon,[data-icon]){
    flex:0 0 auto;
  }
  html.tg-design-surface :where(.icon-btn,[data-icon-button="true"]){
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
    padding:0;
    display:inline-grid;
    place-items:center;
  }
  html.tg-design-surface :where(.icon-btn,[data-icon-button="true"]) svg{
    width:18px;
    height:18px;
  }

  /* Consistent scrollbar and selection tint across product surfaces. */
  html.tg-design-surface{scrollbar-color:rgba(159,107,255,.52) rgba(255,255,255,.035);scrollbar-width:thin}
  html.tg-design-surface ::selection{background:rgba(159,107,255,.32);color:var(--tg-text)}

  @media(max-width:820px){
    html.tg-design-surface :where(button,.btn,.button,input,select){max-width:100%}
    html.tg-design-surface :where(.toolbar,.actions,.header-actions,[role="toolbar"]){min-width:0;flex-wrap:wrap}
  }
  /* Performance + accessibility: touch targets and motion policy are part of the product contract. */
  @media (pointer:coarse){
    html.tg-design-surface :where(button,.btn,.button,[role="button"],input,select){min-height:44px}
    html.tg-design-surface :where(.icon-btn,[data-icon-button="true"]){width:44px;min-width:44px;height:44px;min-height:44px}
  }
  @media(max-width:820px),(pointer:coarse){
    html.tg-design-surface body{background-attachment:scroll}
  }
  @media(prefers-reduced-motion:reduce){
    html.tg-design-surface *,html.tg-design-surface *::before,html.tg-design-surface *::after{
      scroll-behavior:auto!important;
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
      transition-delay:0s!important;
    }
  }
}

/* R11.51.28 · Premium product finish shared by WEB + STUDIO.
   Deliberately restrained: depth communicates hierarchy, not decoration. */
@layer tg-premium-finish {
  :root{
    --tg-ease-out:cubic-bezier(.2,.8,.2,1);
    --tg-ease-spring:cubic-bezier(.2,.9,.2,1.18);
    --tg-shadow-1:0 8px 28px rgba(0,0,0,.22);
    --tg-shadow-2:0 18px 52px rgba(0,0,0,.34);
    --tg-inner:inset 0 1px rgba(255,255,255,.035);
    --tg-accent-glow:0 0 0 1px rgba(159,107,255,.22),0 10px 30px rgba(81,49,142,.16);
  }

  html.tg-design-surface body{
    background:
      radial-gradient(900px 520px at 72% -12%,rgba(159,107,255,.085),transparent 58%),
      radial-gradient(700px 420px at 12% 110%,rgba(39,217,255,.045),transparent 62%),
      var(--tg-ink-0);
  }

  html.tg-design-surface :where(.card,.panel,.surface,.modal,.dialog,.sheet,.drawer,.kpi,.widget,[data-tg-surface="true"]){
    box-shadow:var(--tg-inner);
  }

  html.tg-design-surface :where(button,.btn,.button):not([data-tg-raw-control]){
    position:relative;
    transform:translateZ(0);
    transition:transform .14s var(--tg-ease-out),background-color .16s ease,border-color .16s ease,box-shadow .18s ease,filter .18s ease;
  }
  html.tg-design-surface :where(button,.btn,.button):not([data-tg-raw-control]):hover:not(:disabled):not([aria-disabled="true"]){
    transform:translateY(-1px);
  }
  html.tg-design-surface :where(button,.btn,.button):not([data-tg-raw-control]):active:not(:disabled):not([aria-disabled="true"]){
    transform:translateY(1px) scale(.985);
    transition-duration:.06s;
  }
  html.tg-design-surface :where(.btn-primary,.primary,.cta,[data-variant="primary"]):not([data-tg-raw-control]){
    box-shadow:0 7px 22px rgba(94,62,170,.18),inset 0 1px rgba(255,255,255,.12);
  }
  html.tg-design-surface :where(.btn-primary,.primary,.cta,[data-variant="primary"]):hover:not(:disabled){
    box-shadow:0 10px 30px rgba(94,62,170,.28),inset 0 1px rgba(255,255,255,.16);
  }

  html.tg-design-surface :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):not([data-tg-raw-control]){
    background-color:color-mix(in srgb,var(--tg-ink-2) 88%,black 12%);
    border-color:var(--tg-line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease;
  }
  html.tg-design-surface :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea):hover:not(:focus){
    border-color:var(--tg-line-strong);
  }

  /* Selected/active controls get one unmistakable accent language. */
  html.tg-design-surface :where([aria-current="page"],[aria-selected="true"],[data-active="true"],.is-active,.active):not(body):not(html){
    --tg-active-edge:rgba(159,107,255,.72);
  }

  /* Tables/lists read like professional data surfaces instead of card stacks. */
  html.tg-design-surface :where(table,.tbl){border-spacing:0}
  html.tg-design-surface :where(.list,.table-wrap,.tbl-wrap,[role="listbox"]){scrollbar-gutter:stable}

  /* Better empty/loading/error rhythm without introducing more text. */
  html.tg-design-surface :where(.empty,.empty-state,.cd-empty,[data-state="empty"]){
    min-height:150px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }

  /* Tooltips/popovers should float, not look like another card in the page. */
  html.tg-design-surface :where(.tooltip,.popover,[role="tooltip"]){
    box-shadow:var(--tg-shadow-2);
    backdrop-filter:blur(18px) saturate(1.08);
  }

  /* Clean compact density on desktop, comfortable touch density on mobile. */
  @media (min-width:1024px) and (pointer:fine){
    html.tg-design-surface :where(.toolbar,.actions,[role="toolbar"]){gap:6px}
  }
  @media (max-width:720px){
    html.tg-design-surface body{background-image:radial-gradient(520px 300px at 75% -8%,rgba(159,107,255,.07),transparent 60%)}
    html.tg-design-surface :where(.modal,.dialog,.sheet){max-width:calc(100vw - 20px)}
  }
}


/* R11.51.29 — exhaustive family polish.
   One late visual authority for every normal WEB surface. Broadcast overlays and
   estudio-escena remain intentionally isolated from application chrome. */
@layer tg-exhaustive-polish {
  html.tg-design-surface body { color:var(--tg-text); }
  html.tg-design-surface .tgds-content-root { min-width:0; }
  html.tg-design-surface :where(.card,.panel,.surface,[data-tgds-card]) :where(.card,.panel,.surface,[data-tgds-card]) {
    box-shadow:none;
  }
  html.tg-design-surface :where(.toolbar,.actions,.topbar,.head,.panel-head,.tabs) {
    align-items:center;
  }
  html.tg-design-surface :where(.toolbar,.actions,.topbar-r,.panel-head) > :where(button,.btn,.button) { flex:0 0 auto; }
  html.tg-design-surface :where(label,legend,.lab,.lbl,.mini-label) { letter-spacing:.01em; }
  html.tg-design-surface :where(.muted,.sub,.hint,.soft,.tk-copy-brief) { color:var(--tg-muted); }
  html.tg-design-surface :where(.pill,.chip,.tag,.badge) { border-color:var(--tg-line); }
  html.tg-design-surface :where(.toast,.aviso,[role="status"]) { border-radius:var(--tg-r-s); }

  /* ADMIN — data dense, operational, fewer decorative card borders. */
  html.tg-design-surface[data-tg-family="admin"] { --tgds-accent:var(--tg-violet); --tgds-accent-2:var(--tg-amber); }
  html.tg-design-surface[data-tg-family="admin"] :where(.wrap,.page,.content,.main) { min-width:0; }
  html.tg-design-surface[data-tg-family="admin"] :where(.panel,.card) { border-color:var(--tg-line); }
  html.tg-design-surface[data-tg-family="admin"] :where(.panel,.card) :where(.panel,.card) {
    background:color-mix(in srgb,var(--tg-ink-2) 62%,transparent); border-color:transparent;
  }
  html.tg-design-surface[data-tg-family="admin"] :where(.metric,.kpi) { min-height:86px; }
  html.tg-design-surface[data-tg-family="admin"] :where(table,.tbl) thead th {
    position:sticky; top:0; z-index:2; backdrop-filter:blur(12px); background:rgba(11,13,25,.94);
  }
  html.tg-design-surface[data-tg-family="admin"] :where(table,.tbl) tbody tr { transition:background-color .14s ease; }
  html.tg-design-surface[data-tg-family="admin"] :where(table,.tbl) tbody tr:hover { background:rgba(159,107,255,.055); }
  html.tg-design-surface[data-tg-family="admin"] :where(.b-del,.danger,[data-variant="danger"]) { color:#ffd9ea; border-color:rgba(255,92,168,.34); }

  /* SOCIAL — conversation/profile surfaces read as one continuous workspace. */
  html.tg-design-surface[data-tg-family="social"] { --tgds-accent:var(--tg-cyan); --tgds-accent-2:var(--tg-violet); }
  html.tg-design-surface[data-tg-family="social"] :where(.shell,.ws,.side,.panel,.card) { min-width:0; }
  html.tg-design-surface[data-tg-family="social"] :where(.side,.panel) { border-color:var(--tg-line); }
  html.tg-design-surface[data-tg-family="social"] :where(.msg,.message,.bubble,.burbuja) { max-width:min(78%,720px); }
  html.tg-design-surface[data-tg-family="social"] :where(.composer,.compose,.chat-input,.acciones) { backdrop-filter:blur(18px); }

  /* CREATOR — tool surfaces feel like instruments, not nested forms. */
  html.tg-design-surface[data-tg-family="creator"] { --tgds-accent:var(--tg-violet); --tgds-accent-2:var(--tg-cyan); }
  html.tg-design-surface[data-tg-family="creator"] :where(.pane,.rail,.nova-bar,.bt-camera-pane,.bt-camera-group,.download-panel) { border-color:var(--tg-line); }
  html.tg-design-surface[data-tg-family="creator"] :where(.pane,.bt-camera-pane,.download-panel) :where(.card,.panel,.pane) {
    box-shadow:none;
  }
  html.tg-design-surface[data-tg-family="creator"] :where(.tabs,.seg,.rail) button[aria-selected="true"],
  html.tg-design-surface[data-tg-family="creator"] :where(.tabs,.seg,.rail) .active {
    box-shadow:inset 0 -2px var(--tg-violet);
  }

  /* LEGAL / HELP — calmer typography, readable measure, sticky local navigation. */
  html.tg-design-surface[data-tg-family="legal"] { --tgds-accent:var(--tg-violet); --tgds-accent-2:var(--tg-cyan); }
  html.tg-design-surface[data-tg-family="legal"] :where(.lg-wrap,main,.legal-main) { max-width:1180px; margin-inline:auto; }
  html.tg-design-surface[data-tg-family="legal"] :where(.accordion-body,p,li) { line-height:1.72; }
  html.tg-design-surface[data-tg-family="legal"] .accordion-button { min-height:48px; text-align:left; }
  html.tg-design-surface[data-tg-family="legal"] .lg-toc { position:sticky; top:16px; max-height:calc(100vh - 32px); overflow:auto; }

  @media (max-width:900px) {
    html.tg-design-surface[data-tg-family="legal"] .lg-toc { position:static; max-height:none; }
    html.tg-design-surface[data-tg-family="admin"] :where(.top,.topbar,.panel-head,.actions) { flex-wrap:wrap; }
  }
  @media (max-width:640px) {
    html.tg-design-surface[data-tg-family="social"] :where(.msg,.message,.bubble,.burbuja) { max-width:88%; }
    html.tg-design-surface[data-tg-family="creator"] :where(.pane,.rail,.download-panel) { border-radius:var(--tg-r-s); }
  }
}


/* R11.51.77 · VISUAL CONSOLIDATION AUTHORITY
   --------------------------------------------------------------------------
   Fuente final para densidad, jerarquía y controles en superficies normales.
   Es deliberadamente UNLAYERED: las páginas legacy aún contienen CSS sin
   cascade layers; esta autoridad tardía debe ganar sin multiplicar !important.
   No cambia identidad ni lógica y no se carga en overlays transparentes. */

html.tg-design-surface{
  --tg77-copy:14px;
  --tg77-meta:12px;
  --tg77-label:11.5px;
  --tg77-control:40px;
  --tg77-control-compact:36px;
  --tg77-panel-radius:14px;
  --tg77-panel-pad:18px;
}

/* ADMIN · datos primero, decoración después. */
html.tg-design-surface[data-tg-family="admin"] :where(.panel,.card,.sw-card,.apro-card,.sa-card){
  border-radius:var(--tg77-panel-radius);
}
html.tg-design-surface[data-tg-family="admin"] :where(.panel,.sw-card,.apro-card,.sa-card){
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
html.tg-design-surface[data-tg-family="admin"] :where(.sec-title,.section-title,.mini-label,.lab,.lbl){
  font-size:var(--tg77-label);
  line-height:1.35;
  letter-spacing:.06em;
}
html.tg-design-surface[data-tg-family="admin"] :where(.kpi-lbl,.metric-label){font-size:11.5px;line-height:1.3}
html.tg-design-surface[data-tg-family="admin"] :where(.kpi-sub,.metric-sub,.hint,.help,.sw-help){font-size:12.5px;line-height:1.5}
html.tg-design-surface[data-tg-family="admin"] :where(.kpi-val,.metric-value){font-size:clamp(22px,2vw,28px);line-height:1.05}
html.tg-design-surface[data-tg-family="admin"] :where(table,.tbl) thead th{
  font-size:11.5px;
  line-height:1.25;
  letter-spacing:.055em;
  padding-block:10px;
}
html.tg-design-surface[data-tg-family="admin"] :where(table,.tbl) tbody td{
  font-size:13px;
  line-height:1.45;
  padding-block:11px;
}
html.tg-design-surface[data-tg-family="admin"] :where(input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  font-size:13px;
}
html.tg-design-surface[data-tg-family="admin"] :where(button,.btn,.button):not([data-tg-raw-control]){
  min-height:var(--tg77-control-compact);
  font-size:12.5px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045);
}
html.tg-design-surface[data-tg-family="admin"] :where(.btn-primary,.btn-acc,.primary,[data-variant="primary"]){
  box-shadow:0 7px 20px rgba(74,47,132,.20),inset 0 1px rgba(255,255,255,.11);
}
html.tg-design-surface[data-tg-family="admin"] :where(.tabs,.tabbar,.cc-tabbar,.filters,.toolbar,.actions){gap:8px}
html.tg-design-surface[data-tg-family="admin"] :where(.tab,.tabs>button,.cc-tabbar>button,[role="tab"]){
  min-height:38px;
  font-size:12.5px;
}
html.tg-design-surface[data-tg-family="admin"] :where(.panel,.card) :where(.panel,.card){
  box-shadow:none;
}

/* SOCIAL/MENSAJES · espacio de conversación legible y táctil. */
html.tg-design-surface[data-tg-family="social"] .side{width:clamp(300px,26vw,360px)}
html.tg-design-surface[data-tg-family="social"] :where(.side-h h2,.mhname){line-height:1.2}
html.tg-design-surface[data-tg-family="social"] .search{min-height:42px}
html.tg-design-surface[data-tg-family="social"] .search input{font-size:13.5px}
html.tg-design-surface[data-tg-family="social"] .seg b{
  min-height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:12px;
}
html.tg-design-surface[data-tg-family="social"] .cv{min-height:70px}
html.tg-design-surface[data-tg-family="social"] .cvname{font-size:14px}
html.tg-design-surface[data-tg-family="social"] .cvlast{font-size:12.5px;line-height:1.35}
html.tg-design-surface[data-tg-family="social"] .cvtime{font-size:11px}
html.tg-design-surface[data-tg-family="social"] :where(.badge,.tg,.ub-pro){font-size:10.5px}
html.tg-design-surface[data-tg-family="social"] :where(.mhsub,.live-context,.lctx-viewers){font-size:11.5px}
html.tg-design-surface[data-tg-family="social"] :where(.row .bub,.bub){font-size:13.5px;line-height:1.5}
html.tg-design-surface[data-tg-family="social"] .day{font-size:11.5px}
html.tg-design-surface[data-tg-family="social"] .comp{padding:11px 16px 14px}
html.tg-design-surface[data-tg-family="social"] .ctool{
  width:40px;
  height:40px;
  min-height:40px;
}
html.tg-design-surface[data-tg-family="social"] .cin{
  min-height:46px;
  font-size:14px;
  line-height:1.48;
}
html.tg-design-surface[data-tg-family="social"] .send{
  width:46px;
  min-width:46px;
  height:46px;
  min-height:46px;
}
html.tg-design-surface[data-tg-family="social"] :where(.sup-cats-sub,.sup-back-sub,.sup-compose-hint,.emo-empty){
  font-size:12.5px;
  line-height:1.45;
}

/* CREATOR/SONIDOS/DJ · instrumento de producción, no formulario apilado. */
html.tg-design-surface[data-tg-family="creator"] :where(.robot-panel,.sa-card,.dt-card,.dt-side-card,.dj-nowcard){
  border-radius:16px;
  border-color:var(--tg-line);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
html.tg-design-surface[data-tg-family="creator"] :where(.dt-title,.sa-title){font-size:clamp(20px,2vw,24px);line-height:1.15}
html.tg-design-surface[data-tg-family="creator"] :where(.dt-sub,.sa-sub,.desc,.hint){font-size:13px;line-height:1.55}
html.tg-design-surface[data-tg-family="creator"] :where(.dt-lbl,.dt-lbl2,.sa-dd-grp,.sa-lib-grp,.cel-k){
  font-size:11.5px;
  line-height:1.35;
  letter-spacing:.065em;
}
html.tg-design-surface[data-tg-family="creator"] :where(.dt-mini,.dt-count,.dt-mnm,.dt-lbl2,.dj-regla,.dj-itx){font-size:12.5px}
html.tg-design-surface[data-tg-family="creator"] :where(.dt-inp,.dt-ta,.dt-num,.dt-msearch,.sa-inp,input:not([type="checkbox"]):not([type="radio"]),select,textarea){
  font-size:13px;
}
html.tg-design-surface[data-tg-family="creator"] :where(.dt-del,.dt-x2,.dt-mx,.sa-btn,.snd-btn,.btn,.button):not([data-tg-raw-control]){
  min-height:36px;
}
html.tg-design-surface[data-tg-family="creator"] :where(.dt-pfx,.qitem .tag,.qitem .qt,.qitem .time,.cel .edit,.dj-netq,.dj-regla i){
  font-size:11px;
}
html.tg-design-surface[data-tg-family="creator"] :where(.pageview,.main){min-width:0}
html.tg-design-surface[data-tg-family="creator"] :where(.dt-cols,.dj-cols){gap:20px}

@media(max-width:820px){
  html.tg-design-surface[data-tg-family="social"] .side{width:100%}
  html.tg-design-surface[data-tg-family="admin"] :where(table,.tbl) tbody td{font-size:12.5px}
  html.tg-design-surface[data-tg-family="creator"] :where(.dt-cols,.dj-cols){gap:14px}
}