/* Single source of truth. A future preference only needs to set --ui-text-scale
   on <html> (e.g. 1.25). rem also respects the browser's default text size.
   Do not redefine these tokens in modules, themes or mobile breakpoints. */
:root{
  --ui-text-scale:1;
  --type-caption:calc(.75rem * var(--ui-text-scale));
  --type-label:calc(.8125rem * var(--ui-text-scale));
  --type-ui:calc(.875rem * var(--ui-text-scale));
  --type-body:calc(1rem * var(--ui-text-scale));
  --type-subtitle:calc(1.125rem * var(--ui-text-scale));
  --type-page:calc(1.5rem * var(--ui-text-scale));
  --type-hero:calc(2rem * var(--ui-text-scale));
  --type-display:calc(clamp(2.25rem,1.5rem + 2vw,3.5rem) * var(--ui-text-scale));
  --type-section:var(--type-subtitle);
  --type-metric:var(--type-page);
  --type-leading-compact:1.35;
  --type-leading-body:1.55;
  --type-weight-medium:500;
  --type-weight-semibold:600;
  --type-weight-bold:700;
  --type-tracking-label:.035em;
  --type-tracking-title:-.02em;
}

html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-size:var(--type-body);line-height:var(--type-leading-body)}

:where(h1,h2,h3,h4){font-weight:var(--type-weight-bold);letter-spacing:var(--type-tracking-title);text-wrap:balance}
:where(p,li,dd){text-wrap:pretty}
:where(strong,b){font-weight:var(--type-weight-bold)}
:where(button,input,select,textarea){font-size:var(--type-ui)}
.button{font-size:var(--type-ui);font-weight:var(--type-weight-bold)}
.button.small{font-size:var(--type-label)}

/* Navegación y estructura compartida por Gestor, Studio y Administración. */
#app-sidebar .mode-switch a{font-size:var(--type-ui)}
#app-sidebar .side-nav>a,
#app-sidebar .side-nav summary{font-size:var(--type-body);font-weight:var(--type-weight-semibold)}
#app-sidebar .side-nav>small,
#app-sidebar .side-nav-configuration>small,
#app-sidebar .side-nav-system>small,
#app-sidebar .workspace-label small{
  font:var(--type-weight-bold) var(--type-caption)/var(--type-leading-compact) var(--font);
  letter-spacing:var(--type-tracking-label);
}
#app-sidebar .workspace-label strong,
#app-sidebar .profile strong{font-size:var(--type-label);font-weight:var(--type-weight-bold)}
#app-sidebar .profile small{font-size:var(--type-caption);line-height:var(--type-leading-compact)}
.shell-body .topbar .eyebrow{
  font:var(--type-weight-bold) var(--type-caption)/var(--type-leading-compact) var(--font);
  letter-spacing:var(--type-tracking-label);
}
.shell-body .topbar h1{font-size:var(--type-page);font-weight:var(--type-weight-bold);letter-spacing:var(--type-tracking-title)}
.shell-body .top-actions{font-size:var(--type-label)}

/* Escala operativa: una sola jerarquía para usuario y administrador. */
.shell-body #main-content .page-kicker,
.shell-body #main-content .eyebrow{
  font:var(--type-weight-bold) var(--type-caption)/var(--type-leading-compact) var(--font);
  letter-spacing:var(--type-tracking-label);
}
.shell-body #main-content .page-head h2{font-size:var(--type-page)!important;line-height:1.14;font-weight:var(--type-weight-bold);letter-spacing:var(--type-tracking-title)}
.shell-body #main-content .page-head p,
.shell-body #main-content .console-hero p{font-size:var(--type-body);line-height:var(--type-leading-body)}
.shell-body #main-content .console-hero h2{font-size:var(--type-hero)!important;line-height:1.16;letter-spacing:var(--type-tracking-title)}
.shell-body #main-content .studio-command-copy h2{font-size:var(--type-hero)!important;line-height:1.14;letter-spacing:var(--type-tracking-title)}
.shell-body #main-content .panel-head h3{font-size:var(--type-body);font-weight:var(--type-weight-bold)}
.shell-body #main-content .panel-subtitle{font-size:var(--type-label);line-height:var(--type-leading-compact)}
.shell-body #main-content small{font-size:var(--type-caption);line-height:1.45}
.shell-body #main-content .stat-label,
.shell-body #main-content .metric-note{
  font-size:var(--type-caption);
  font-family:var(--font);
  letter-spacing:.02em;
}
.shell-body #main-content .stat-card>strong,
.shell-body #main-content .metric-card>strong{font-size:var(--type-hero);letter-spacing:-.025em}
.shell-body #main-content .badge{min-height:27px;font-size:var(--type-caption);line-height:1.2}
.shell-body #main-content .data-table th{
  font:var(--type-weight-bold) var(--type-caption)/var(--type-leading-compact) var(--font);
  letter-spacing:var(--type-tracking-label);
}
.shell-body #main-content .data-table td{font-size:var(--type-ui);line-height:1.45}
.shell-body #main-content .field label{font-size:var(--type-label);line-height:var(--type-leading-compact);font-weight:var(--type-weight-semibold)}
.shell-body #main-content .field input,
.shell-body #main-content .field select,
.shell-body #main-content .field textarea,
.shell-body #main-content .search-field input{font-size:var(--type-body);line-height:1.45}
.shell-body #main-content .notice{font-size:var(--type-label);line-height:1.5}
.shell-body #main-content .modal-head h3{font-size:var(--type-subtitle);line-height:1.3;letter-spacing:-.012em}
.shell-body #main-content .modal-head .page-kicker{font-size:var(--type-caption);letter-spacing:.03em}
.shell-body #main-content .modal-head .panel-subtitle{font-size:var(--type-caption)}

/* Formularios delicados: contexto, elección y consecuencia deben leerse sin esfuerzo. */
.shell-body #main-content .renewal-context strong,
.shell-body #main-content .renewal-submit-summary strong{font-size:var(--type-label);line-height:1.5}
.shell-body #main-content .renewal-context p{font-size:var(--type-caption);line-height:1.5}
.shell-body #main-content .renewal-period-picker button{font-size:var(--type-label);line-height:1.35}
.shell-body #main-content .renewal-period-picker button small{font-size:var(--type-caption)}
.shell-body #main-content .renewal-result-facts dt{font-size:var(--type-caption)}
.shell-body #main-content .renewal-result-facts dd{font-size:var(--type-label)}
.shell-body #main-content .renewal-result-message textarea{font-size:var(--type-label);line-height:1.55}
.shell-body #main-content .renewal-copy-status,
.shell-body #main-content .renewal-result-return{font-size:var(--type-caption)}

/* Sitio público, autenticación y acceso administrativo. */
.public-body,.admin-auth-body{font-size:var(--type-body)}
.public-nav{font-size:var(--type-body)}
.public-body .button,.admin-auth-body .button{font-size:var(--type-ui)}
.public-body #main-content .eyebrow,
.public-body #main-content .page-context,
.public-body #main-content .home-context-label,
.public-body #main-content .bento-label,
.public-body #main-content .destination-index{
  font:var(--type-weight-bold) var(--type-caption)/var(--type-leading-compact) var(--font);
  letter-spacing:var(--type-tracking-label);
}
.public-body #main-content small,
.admin-auth-body main small{font-size:var(--type-caption);line-height:1.45}
.public-body #main-content .hero h1,
.public-body #main-content .landing-hero-copy h1,
.public-body #main-content .marketing-hero-copy h1,
.public-body #main-content .plans-page-hero h1,
.admin-auth-body .admin-auth-context h1{
  font-size:var(--type-display)!important;
  line-height:1.08;
  letter-spacing:-.03em;
  font-weight:var(--type-weight-bold);
}
.public-body #main-content .section-head h2,
.public-body #main-content .landing-section-head h2,
.public-body #main-content .marketing-section-heading h2,
.public-body #main-content .landing-final-cta h2,
.public-body #main-content .public-publishing-card h2,
.public-body #main-content .studio-copy h2,
.public-body #main-content .price-copy h2{
  font-size:var(--type-hero)!important;
  line-height:1.16;
  letter-spacing:-.025em;
}
.public-body #main-content :is(.demo-stage,.product-frame,.public-studio-library,.publishing-calendar,.campaign-preview) small{font-size:var(--type-caption);line-height:1.35}
.auth-body #main-content .auth-form-heading h1{font-size:var(--type-hero);line-height:1.16;letter-spacing:-.025em}
.auth-body #main-content .auth-context-copy h2{font-size:var(--type-hero);line-height:1.14;letter-spacing:-.025em}
.auth-body #main-content .field label,
.admin-auth-body main .field label{font-size:var(--type-label);font-weight:var(--type-weight-semibold)}
.auth-body #main-content input,
.auth-body #main-content select,
.auth-body #main-content textarea,
.admin-auth-body main input,
.admin-auth-body main select,
.admin-auth-body main textarea{font-size:var(--type-body)}

@media(max-width:760px){
  :where(input,select,textarea){font-size:var(--type-body)}
  .shell-body #main-content :is(.field input,.field select,.field textarea,.search-field input),
  .auth-body #main-content :is(input,select,textarea),
  .admin-auth-body main :is(input,select,textarea){font-size:var(--type-body)}
  .shell-body #main-content .console-hero h2,
  .shell-body #main-content .studio-command-copy h2{font-size:var(--type-hero)!important}
  .shell-body #main-content .page-head p,
  .shell-body #main-content .console-hero p{font-size:var(--type-ui)}
  .shell-body #main-content .dashboard-metrics .stat-label{
    max-width:calc(100% - 48px);
    white-space:normal;
    line-height:1.3;
  }
  .shell-body #main-content .dashboard-metrics .metric-card>strong{
    font-size:var(--type-page);
    white-space:nowrap;
  }
  .shell-body #main-content .console-hero-actions .button{padding-inline:12px}
  .public-body #main-content .section-head h2,
  .public-body #main-content .landing-section-head h2,
  .public-body #main-content .marketing-section-heading h2,
  .public-body #main-content .landing-final-cta h2,
  .public-body #main-content .public-publishing-card h2,
  .public-body #main-content .studio-copy h2,
  .public-body #main-content .price-copy h2{font-size:var(--type-hero)!important}
}

@media(max-width:480px){
  .shell-body #main-content .console-hero-actions{display:grid;grid-template-columns:1fr;width:100%}
  .shell-body #main-content .console-hero-actions .button{width:100%;min-height:46px}
}

/* Semantic roles apply to the entire document, including utility dialogs
   mounted outside #main-content. Modules consume the same sizes above. */
:is(.shell-body,.public-body,.admin-auth-body) small{
  font-size:var(--type-caption);
  line-height:var(--type-leading-compact);
}
:is(.shell-body,.public-body,.admin-auth-body) .button{
  font-size:var(--type-ui);
  line-height:var(--type-leading-compact);
  height:auto;
  min-height:44px;
  padding-block:.55em;
  white-space:normal;
}
:is(.shell-body,.public-body,.admin-auth-body) .button.small{font-size:var(--type-label)}
:is(.shell-body,.public-body,.admin-auth-body) :is(input,select,textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=hidden]){
  font-size:var(--type-body)!important;
  line-height:var(--type-leading-compact);
  min-height:max(44px,2.75em);
}
:is(.shell-body,.public-body,.admin-auth-body) .field>label{
  font-size:var(--type-label);
  line-height:var(--type-leading-compact);
}
.shell-body :is(.panel-head,.modal-head) h3{
  font-size:var(--type-body)!important;
  line-height:var(--type-leading-compact);
}
.shell-body .modal-head h3{font-size:var(--type-subtitle)!important}
.shell-body :is(.panel-head,.modal-head){height:auto;min-height:58px;padding-block:14px}
.shell-body :is(.panel-subtitle,.field>small,.business-wallet-settings>p,.business-price-identity small){
  font-size:var(--type-caption)!important;
  line-height:var(--type-leading-body);
}
.shell-body :is(.page-head p,.console-hero p,.notice,.studio-template-content>p,.studio-detail-description,.bloc-note-content){
  font-size:var(--type-ui)!important;
  line-height:var(--type-leading-body);
}
.shell-body :is(.page-kicker,.eyebrow,dt,.stat-label){
  font-size:var(--type-caption);
  line-height:var(--type-leading-compact);
  letter-spacing:var(--type-tracking-label);
}
.shell-body .ui-compact-facts :is(dt,dd,small,strong,span){
  white-space:normal!important;
  overflow-wrap:anywhere;
}
.shell-body :is(.business-wallet-settings>legend,.business-wallet-setting>header strong,.payment-admin-wallet-head strong,.settings-action-card strong,.business-facts-grid dd,.ui-compact-facts dd,.studio-category-grid strong){
  font-size:var(--type-ui);
  line-height:var(--type-leading-compact);
}
.shell-body :is(.business-wallet-default,.payment-default-choice){
  min-height:44px;
  max-width:12ch;
  text-align:center;
  font-size:var(--type-caption);
  line-height:var(--type-leading-compact);
}
.shell-body :is(.stat-card>strong,.metric-card>strong){
  font-size:var(--type-metric)!important;
  line-height:var(--type-leading-compact);
  overflow-wrap:anywhere;
}
.shell-body .sale-detail-metrics strong{font-size:var(--type-subtitle)!important;line-height:var(--type-leading-compact)}
.shell-body :is(.sale-detail-identity h2,.account-detail-identity h2){
  font-size:var(--type-page)!important;
  overflow-wrap:break-word;
  word-break:normal;
}
.shell-body :is(.studio-template-heading h3,.profile-card h3){
  font-size:var(--type-body)!important;
  line-height:var(--type-leading-compact);
}
.shell-body .studio-template-card{display:flex;flex-direction:column}
.shell-body .studio-template-media{flex:none}
.shell-body .studio-template-content{container-type:inline-size;min-width:0;display:flex;flex-direction:column;flex:1}
.shell-body .studio-template-heading{align-items:flex-start}
.shell-body .studio-template-title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start}
.shell-body .studio-template-title-row h3{
  display:block;
  min-height:0;
  overflow:visible;
  overflow-wrap:anywhere;
}
.shell-body .studio-template-heading>.studio-template-title-row>.studio-template-recency{
  font-size:var(--type-caption);
  line-height:var(--type-leading-compact);
  white-space:normal;
  justify-content:flex-end;
  text-align:right;
  max-width:12ch;
}
.shell-body .studio-template-content>p{
  height:auto;
  min-height:3.1em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.shell-body .studio-template-footer>a{
  display:flex;
  align-items:center;
  font-size:var(--type-label);
  line-height:var(--type-leading-compact);
  min-height:44px;
  white-space:normal;
  overflow-wrap:anywhere;
}
.shell-body .studio-template-footer{gap:8px;flex-wrap:wrap;margin-top:auto}
.shell-body .studio-template-grid{
  --type-card-gap:14px;
  gap:var(--type-card-gap);
  grid-template-columns:repeat(var(--studio-template-columns),minmax(0,1fr))!important;
}
.shell-body :is(.studio-template-category,.studio-template-featured,.badge){
  height:auto;
  min-height:27px;
  padding-block:.25em;
  line-height:var(--type-leading-compact);
}
/* Keep title and date side by side; let actions wrap instead of shrinking text. */
@container (max-width:220px){
  .shell-body .studio-template-footer{display:flex;flex-wrap:wrap}
  .shell-body .studio-template-footer>a{flex:1 0 auto;max-width:100%}
}
@media(max-width:760px){
  .shell-body .studio-template-grid{--type-card-gap:12px}
  .shell-body .studio-template-heading h3{font-size:var(--type-ui)!important}
  .shell-body :is(.console-hero h2,.studio-command-copy h2){font-size:var(--type-page)!important}
  .shell-body.area-studio .studio-filter-bar{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .shell-body.area-studio .studio-favorite-filter{grid-column:auto}
}
@media(max-width:480px){
  .shell-body.area-studio .studio-filter-options>label:not(.studio-favorite-filter){grid-column:auto!important}
}