/*
 * Streamd4y · Nexo
 * Dirección visual aprobada para producto público, Gestor, Studio,
 * Administración y la red comercial.
 * Esta capa consume la estructura y los componentes existentes sin alterar flujos.
 */

:root {
  --bg: #050b15;
  --sidebar: #07111f;
  --surface: #0b1626;
  --surface-2: #0f1c2e;
  --border: #21334d;
  --text: #f5f9ff;
  --muted: #91a4be;
  --primary: #3181ff;
  --cyan: #38d4ff;
  --studio: #8b5cf6;
  --studio-action-strong: #7c3aed;
  --studio-action-hover: #6d28d9;
  --success: #6ee7a1;
  --warning: #facc65;
  --danger: #fb7185;
  --semantic-danger-strong: #e11d48;
  --semantic-danger-hover: #be123c;
  --semantic-danger-on: #ffffff;
  --semantic-success-strong: #15803d;
  --semantic-success-hover: #166534;
  --semantic-success-on: #ffffff;
  --semantic-warning-strong: #f59e0b;
  --semantic-warning-hover: #d97706;
  --semantic-warning-on: #211400;
  --shadow: 0 24px 55px rgba(0, 0, 0, .22);
  --font: "Segoe UI Variable", "Segoe UI", Manrope, system-ui, sans-serif;
  --mono: "Cascadia Mono", "IBM Plex Mono", ui-monospace, monospace;

  --ui-accent: #3181ff;
  --ui-accent-bright: #67dcff;
  --ui-accent-strong: #2563eb;
  --ui-accent-hover: #1d4ed8;
  --ui-accent-content: #38d4ff;
  --ui-label-accent-start: #20c5ff;
  --ui-label-accent-end: #7477ff;
  --ui-cyan: #38d4ff;
  --ui-blue: #3181ff;
  --ui-indigo: #7477ff;
  --ui-violet: #8b5cf6;
  --ui-teal: #5eead4;
  --ui-amber: #facc65;
  --ui-surface: #0b1626;
  --ui-surface-raised: #0f1c2e;
  --ui-surface-soft: #081321;
  --ui-navigation-surface: #07111f;
  --ui-control: #101d30;
  --ui-interactive-surface: #101d30;
  --ui-edge: #21334d;
  --ui-edge-strong: #2b4567;
  --ui-edge-inner: rgba(112, 145, 184, .2);
  --ui-edge-soft: rgba(112, 145, 184, .14);
  --ui-edge-tonal: #1b2e46;
  --ui-scrim: rgba(2, 6, 14, .64);
  --ui-scrim-fallback: rgba(2, 6, 14, .82);
  --ui-shadow-card: inset 0 1px 0 rgba(255, 255, 255, .035), 0 12px 35px rgba(0, 0, 0, .16);
  --ui-shadow-float: inset 0 1px 0 rgba(255, 255, 255, .05), 0 22px 52px rgba(0, 0, 0, .25);
  --ui-shadow-modal: inset 0 1px 0 rgba(255, 255, 255, .06), 0 38px 100px rgba(0, 0, 0, .48);
  --ui-radius-control: 12px;
  --ui-radius-card: 18px;
  --ui-radius-panel: 22px;
  --ui-form-focus-width: 1px;
  --ui-form-focus-color: color-mix(in srgb, var(--ui-accent-content) 24%, transparent);
  /* Shared component aliases. Feature areas inherit these values instead of
   * maintaining a second visual system. */
  --ui-context-surface: var(--ui-surface);
  --ui-context-raised: var(--ui-surface-raised);
  --ui-context-inset: var(--ui-surface-soft);
  --ui-context-hover: var(--nexo-row-hover);
  --ui-context-edge: var(--ui-edge);
  --ui-context-divider: var(--ui-edge-soft);
  --ui-context-shadow: var(--ui-shadow-card);
  --ui-record-surface: var(--ui-surface);
  --ui-record-header: var(--nexo-table-head);
  --ui-record-row: var(--ui-surface);
  --ui-record-hover: var(--nexo-row-hover);
  --ui-record-edge: var(--ui-edge);
  --ui-record-divider: var(--ui-edge-soft);
  --ui-secondary-surface: var(--ui-control);
  --ui-secondary-edge: var(--ui-edge);
  --ui-secondary-shadow: var(--ui-shadow-card);
  --ui-interactive-surface-hover: var(--ui-surface-raised);
  --ui-interactive-edge: var(--ui-edge);
  --ui-interactive-shadow: var(--ui-shadow-card);
  /* Shared catalog geometry used by Gestor tutorials and reseller resources. */
  --ui-catalog-gap: 16px;
  --ui-catalog-card-radius: 14px;
  --ui-catalog-card-padding: 14px;
  --ui-catalog-media-pc: 16 / 9;
  --ui-catalog-media-mobile: 9 / 16;
  --ui-catalog-media-canva: 4 / 3;
  --nexo-page: #040914;
  --nexo-app-canvas:
    radial-gradient(620px 420px at 16% 12%, rgba(49, 129, 255, .12), transparent 74%),
    radial-gradient(560px 420px at 92% 82%, rgba(139, 92, 246, .1), transparent 76%),
    var(--nexo-page);
  --nexo-table-head: #0e1c30;
  --nexo-row-hover: #10243d;
  --nexo-hero: radial-gradient(circle at 90% -20%, #154ea6 0, #0a2a58 35%, #071426 72%);
  --nexo-studio-hero: radial-gradient(circle at 90% -20%, #6035b4 0, #2c1b62 38%, #0b1227 74%);
  --nexo-admin-hero: radial-gradient(circle at 90% -20%, #5530a0 0, #24174b 38%, #0b1223 72%);
  --nexo-transition: 200ms cubic-bezier(.2, .8, .2, 1);
}

.area-studio {
  --ui-accent: #8b5cf6;
  --ui-accent-bright: #b49aff;
  --ui-accent-strong: #7c3aed;
  --ui-accent-hover: #6d28d9;
  --ui-accent-content: #b49aff;
  --ui-label-accent-start: #b49aff;
  --ui-label-accent-end: #7477ff;
}

.area-admin,
.admin-auth-body {
  --ui-accent: #7c3aed;
  --ui-accent-bright: #b49aff;
  --ui-accent-strong: #6d28d9;
  --ui-accent-hover: #5b21b6;
  --ui-accent-content: #b49aff;
  --ui-label-accent-start: #b49aff;
  --ui-label-accent-end: #7c3aed;
}

html[data-theme="light"] {
  --bg: #f3f7fc;
  --sidebar: #ffffff;
  --surface: #ffffff;
  --surface-2: #edf3fb;
  --border: #d5e0ee;
  --text: #0d1b2e;
  --muted: #5f718a;
  --primary: #1d5fda;
  --cyan: #087eae;
  --studio: #6d28d9;
  --danger: #be123c;
  --success: #15803d;
  --warning: #b45309;
  --ui-accent-bright: #036f9c;
  --ui-accent-content: #1557c5;
  --ui-label-accent-start: #075fae;
  --ui-label-accent-end: #4f46cf;
  --ui-cyan: #036f9c;
  --ui-blue: #1d5fda;
  --ui-indigo: #4f46cf;
  --ui-violet: #6d28d9;
  --ui-teal: #0f766e;
  --ui-amber: #b45309;
  --ui-surface: #ffffff;
  --ui-surface-raised: #f7faff;
  --ui-surface-soft: #edf3fb;
  --ui-navigation-surface: #ffffff;
  --ui-control: #eef4fb;
  --ui-interactive-surface: #eef4fb;
  --ui-edge: #d5e0ee;
  --ui-edge-strong: #9db4d1;
  --ui-edge-inner: rgba(44, 69, 102, .15);
  --ui-edge-soft: rgba(44, 69, 102, .1);
  --ui-edge-tonal: #dce7f3;
  --nexo-page: #edf3fa;
  --nexo-table-head: #edf3fb;
  --nexo-row-hover: #eef5ff;
  --ui-shadow-card: inset 0 1px 0 rgba(255, 255, 255, .9), 0 12px 32px rgba(30, 64, 110, .08);
  --ui-shadow-float: inset 0 1px 0 rgba(255, 255, 255, .95), 0 20px 48px rgba(30, 64, 110, .14);
  --ui-shadow-modal: 0 34px 90px rgba(15, 35, 62, .24);
  --ui-form-focus-color: color-mix(in srgb, var(--ui-accent-content) 20%, transparent);
}

html[data-theme="light"] :is(.area-studio, .area-admin, .admin-auth-body) {
  --ui-accent-content: #6d28d9;
  --ui-label-accent-start: #6d28d9;
  --ui-label-accent-end: #4f46cf;
}

html {
  background: var(--nexo-page);
  scrollbar-color: var(--ui-edge-strong) var(--nexo-page);
}

body {
  color: var(--text);
  background: var(--nexo-page);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 18px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--ui-accent-strong);
  color: #fff;
  font-weight: 700;
  transform: translateY(-180%);
  transition: transform .18s ease;
}

.skip-link:focus { transform: none; }

:where(h1, h2, h3, h4, .console-user-name) {
  font-family: Bahnschrift, "Segoe UI Variable Display", "Segoe UI", Manrope, sans-serif;
  font-variation-settings: "wght" 650;
}

:where(a, button, input, select, textarea, summary) {
  transition: color var(--nexo-transition), border-color var(--nexo-transition), background-color var(--nexo-transition), box-shadow var(--nexo-transition), opacity var(--nexo-transition), transform var(--nexo-transition);
}

:where(a, button, summary, [role="button"]) { cursor: pointer; }

:where(a, button, summary, [role="button"], [tabindex]:not(input):not(select):not(textarea)):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ui-accent-content) 64%, transparent) !important;
  outline-offset: 2px !important;
}

.button,
.icon-button,
.field :is(input, select, textarea),
.search-field,
.password-control,
.filter-control {
  border-radius: var(--ui-radius-control) !important;
}

.button {
  min-height: 44px;
  padding-inline: 18px;
  padding-block: 0 !important;
  line-height: 1.2;
  font-weight: 750;
}

.button.primary,
.button.studio {
  color: #fff !important;
  border-color: var(--button-solid-accent, var(--ui-accent-strong)) !important;
  background: var(--button-solid-accent, var(--ui-accent-strong)) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--button-solid-shadow, var(--ui-accent)) 26%, transparent) !important;
}

.button.primary:hover,
.button.studio:hover {
  border-color: var(--button-solid-hover, var(--ui-accent-hover)) !important;
  background: var(--button-solid-hover, var(--ui-accent-hover)) !important;
  transform: translateY(-1px);
}

/* Semantic actions keep their meaning across Gestor, Studio and Admin. */
.button.danger,
.button.success,
.button.warning {
  color: var(--semantic-action-on) !important;
  border-color: var(--semantic-action-strong) !important;
  background: var(--semantic-action-strong) !important;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--semantic-action-strong) 24%, transparent) !important;
}

.button.danger {
  --semantic-action-color: var(--danger);
  --semantic-action-strong: var(--semantic-danger-strong);
  --semantic-action-hover: var(--semantic-danger-hover);
  --semantic-action-on: var(--semantic-danger-on);
}

.button.success {
  --semantic-action-color: var(--success);
  --semantic-action-strong: var(--semantic-success-strong);
  --semantic-action-hover: var(--semantic-success-hover);
  --semantic-action-on: var(--semantic-success-on);
}

.button.warning {
  --semantic-action-color: var(--warning);
  --semantic-action-strong: var(--semantic-warning-strong);
  --semantic-action-hover: var(--semantic-warning-hover);
  --semantic-action-on: var(--semantic-warning-on);
}

:is(.button.danger, .button.success, .button.warning):hover {
  color: var(--semantic-action-on) !important;
  border-color: var(--semantic-action-hover) !important;
  background: var(--semantic-action-hover) !important;
  transform: translateY(-1px);
}

.button.danger-soft,
.icon-button.danger,
.icon-button.success,
.icon-button.warning {
  --semantic-action-color: var(--danger);
  color: var(--semantic-action-color) !important;
  border-color: color-mix(in srgb, var(--semantic-action-color) 42%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--semantic-action-color) 13%, var(--ui-surface-raised)) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 4%, transparent) !important;
}

.icon-button.success { --semantic-action-color: var(--success); }
.icon-button.warning { --semantic-action-color: var(--warning); }

:is(.button.danger-soft, .icon-button.danger, .icon-button.success, .icon-button.warning):hover {
  color: var(--semantic-action-color) !important;
  border-color: color-mix(in srgb, var(--semantic-action-color) 64%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--semantic-action-color) 20%, var(--ui-surface-raised)) !important;
}

:is(.button.danger, .button.danger-soft, .icon-button.danger):focus-visible {
  outline-color: color-mix(in srgb, var(--danger) 64%, transparent) !important;
}

:is(.button.success, .icon-button.success):focus-visible {
  outline-color: color-mix(in srgb, var(--success) 64%, transparent) !important;
}

:is(.button.warning, .icon-button.warning):focus-visible {
  outline-color: color-mix(in srgb, var(--warning) 68%, transparent) !important;
}

.shell-body .intervention-action:is(.danger, .warning, .success) {
  --semantic-action-color: var(--danger);
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--semantic-action-color) 34%, var(--ui-context-edge)) !important;
  background: color-mix(in srgb, var(--semantic-action-color) 8%, var(--ui-context-inset)) !important;
}

.shell-body .intervention-action.warning { --semantic-action-color: var(--warning); }
.shell-body .intervention-action.success { --semantic-action-color: var(--success); }

.shell-body .intervention-action:is(.danger, .warning, .success) > span:first-child {
  color: var(--semantic-action-color) !important;
  background: color-mix(in srgb, var(--semantic-action-color) 13%, var(--ui-context-inset)) !important;
}

.shell-body .intervention-action:is(.danger, .warning, .success):hover {
  border-color: color-mix(in srgb, var(--semantic-action-color) 58%, var(--ui-context-edge)) !important;
  background: color-mix(in srgb, var(--semantic-action-color) 12%, var(--ui-context-hover)) !important;
}

.shell-body .admin-intervention-impact:is(.is-danger, .is-warning, .is-success),
.shell-body .decision-context.is-danger {
  --semantic-action-color: var(--danger);
  color: var(--semantic-action-color) !important;
  border-color: color-mix(in srgb, var(--semantic-action-color) 42%, var(--ui-context-edge)) !important;
  background: color-mix(in srgb, var(--semantic-action-color) 8%, var(--ui-context-inset)) !important;
}

.shell-body .admin-intervention-impact.is-warning { --semantic-action-color: var(--warning); }
.shell-body .admin-intervention-impact.is-success { --semantic-action-color: var(--success); }

.shell-body .bloc-note-actions button[data-note-action="complete"] {
  color: var(--success);
  border-color: color-mix(in srgb, var(--success) 34%, var(--ui-edge));
  background: color-mix(in srgb, var(--success) 8%, var(--ui-control));
}

.shell-body .bloc-note-actions button[data-note-action="archive"] {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 34%, var(--ui-edge));
  background: color-mix(in srgb, var(--danger) 8%, var(--ui-control));
}

.shell-body .bloc-note-actions button[data-note-action="archive"]:hover {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 58%, var(--ui-edge));
  background: color-mix(in srgb, var(--danger) 14%, var(--ui-control));
}

.button.secondary,
.button.ghost,
.icon-button,
.topbar-business,
.utility-control {
  color: var(--text);
  border: 1px solid var(--ui-edge) !important;
  background: var(--ui-control) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025) !important;
}

.button.secondary:hover,
.button.ghost:hover,
.icon-button:hover,
.topbar-business:hover,
.utility-control:hover {
  color: var(--ui-accent-content) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 52%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-control)) !important;
}

.field :is(input, select, textarea),
.search-field,
.password-control,
.data-control,
.filter-control {
  min-height: 46px;
  color: var(--text);
  border-color: var(--ui-edge) !important;
  background: var(--ui-interactive-surface) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .02) !important;
}

::placeholder { color: color-mix(in srgb, var(--muted) 72%, transparent); }

.badge,
.status-mark,
.plan-badge,
.dev-env-pill { border-radius: 999px !important; }

/* Public product */
.public-body {
  min-height: 100vh;
  background:
    radial-gradient(680px 460px at 83% 18%, rgba(49, 129, 255, .12), transparent 72%),
    radial-gradient(540px 380px at 92% 54%, rgba(139, 92, 246, .08), transparent 76%),
    var(--nexo-page) !important;
}

.public-body .wrap { width: min(1220px, calc(100% - 48px)); }

.public-header {
  position: sticky !important;
  z-index: 50;
  top: 12px;
  min-height: 72px;
  margin-top: 12px;
  padding: 10px 12px !important;
  border: 1px solid var(--ui-edge) !important;
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-navigation-surface) 90%, transparent) !important;
  box-shadow: var(--ui-shadow-card);
  backdrop-filter: blur(18px) saturate(1.15);
}

.public-header .brand,
.sidebar-brand-row .brand {
  min-height: 44px;
  padding-inline: 8px;
}

.public-header .public-nav {
  min-height: 44px;
  padding: 3px;
  gap: 2px;
  border: 1px solid transparent;
}

.public-header .public-nav a {
  min-height: 38px;
  padding-inline: 14px;
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
}

.public-header .public-nav a:hover,
.public-header .public-nav a.is-active {
  color: var(--text);
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-control));
}

.public-header .header-actions { gap: 8px; }

.landing-hero {
  min-height: 0 !important;
  padding: clamp(46px, 5vw, 72px) 0 clamp(58px, 6vw, 84px) !important;
  display: grid !important;
  grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr) !important;
  align-items: center !important;
  gap: clamp(40px, 4.5vw, 64px) !important;
}

.landing-hero-copy { max-width: 600px; }

.landing-hero-copy .eyebrow,
.landing-section .eyebrow,
.marketing-hero .eyebrow {
  color: var(--ui-label-accent-start) !important;
  letter-spacing: .09em;
}

.landing-hero-copy h1 {
  max-width: 600px;
  margin: 0 0 20px !important;
  font-size:var(--type-display) !important;
  line-height: .98 !important;
  letter-spacing: -.055em !important;
}

.landing-hero-copy h1 span {
  color: transparent !important;
  background: linear-gradient(90deg, #38d4ff, #7477ff 55%, #b49aff);
  background-clip: text;
  -webkit-background-clip: text;
}

.landing-hero-copy > p {
  max-width: 600px;
  color: var(--muted);
  font-size:var(--type-body);
  line-height: 1.65;
}

.hero-actions { gap: 10px; }
.hero-assurance { margin-top: 18px; gap: 18px; }
.hero-assurance span { color: var(--muted); }
.hero-assurance .icon { color: var(--success); }

.product-demo {
  width: 100% !important;
  min-width: 0;
  min-height: 440px !important;
  margin: 0 !important;
  transform: none !important;
}

.demo-window {
  min-height: 418px;
  overflow: hidden;
  border: 1px solid var(--ui-edge-strong) !important;
  border-radius: 22px !important;
  box-shadow: var(--ui-shadow-float) !important;
}

html:not([data-theme="light"]) .demo-window {
  background:
    radial-gradient(560px 330px at 88% 0, rgba(49, 129, 255, .28), transparent 70%),
    linear-gradient(145deg, #0c1b30, #081321 68%) !important;
}

.demo-window-bar,
.demo-tabs,
.demo-chart-card,
.demo-inventory-list > div,
.demo-studio-layout {
  border-color: var(--ui-edge) !important;
}

.demo-tabs button { min-height: 44px; border-radius: 10px !important; }
.demo-tabs button[aria-selected="true"] { color: #fff; background: var(--ui-accent-strong) !important; }

html:not([data-theme="light"]) .demo-window-bar { background: rgba(7, 17, 31, .76) !important; }
html:not([data-theme="light"]) .demo-tabs { background: rgba(7, 17, 31, .56) !important; }
html:not([data-theme="light"]) .demo-stage { background: transparent !important; }

.demo-bridge-card {
  right: 18px !important;
  bottom: -18px !important;
  border: 1px solid color-mix(in srgb, var(--ui-violet) 44%, var(--ui-edge)) !important;
  border-radius: 14px !important;
  box-shadow: var(--ui-shadow-float) !important;
}

html:not([data-theme="light"]) .demo-bridge-card { background: #171436 !important; }

.trust-strip { background: transparent !important; }
.trust-strip-grid {
  overflow: hidden;
  border: 1px solid var(--ui-edge);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-surface) 88%, transparent);
  box-shadow: var(--ui-shadow-card);
}
.trust-strip-grid > div { min-height: 84px; border-color: var(--ui-edge) !important; }

.landing-section { padding-block: 70px !important; }
.landing-section-head { margin-bottom: 28px !important; }
.landing-section-head h2,
.marketing-section-heading h2 { max-width: 720px; font-size:var(--type-hero) !important; letter-spacing: -.045em; }

.home-context-core,
.home-principles,
.home-operation-route,
.home-destination-card,
.landing-final-cta,
.marketing-hero,
.product-bento > article,
.public-studio-intro,
.public-studio-library,
.public-studio-process,
.plans-page-hero,
.public-period-card,
.payment-card,
.payment-context {
  border-color: var(--ui-edge) !important;
  border-radius: var(--ui-radius-card) !important;
  background:
    radial-gradient(500px 260px at 100% 0, color-mix(in srgb, var(--ui-accent) 9%, transparent), transparent 74%),
    var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.home-destination-card:hover,
.product-bento > article:hover,
.public-period-card:hover {
  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-edge)) !important;
  box-shadow: var(--ui-shadow-float) !important;
  transform: translateY(-2px);
}

.landing-final-cta {
  margin-block: 24px 56px !important;
  padding: 28px 32px !important;
  background:
    radial-gradient(600px 300px at 100% 0, rgba(49, 129, 255, .18), transparent 74%),
    radial-gradient(460px 240px at 0 100%, rgba(139, 92, 246, .1), transparent 76%),
    var(--ui-surface) !important;
}

.landing-footer {
  border-top: 1px solid var(--ui-edge) !important;
  background: #07111f !important;
}

html[data-theme="light"] .landing-footer { background: #fff !important; }

/* Nexo public migration: remove the oversized legacy marketing composition. */
.public-body .marketing-hero {
  min-height: 0 !important;
  margin-block: 28px 18px;
  padding: clamp(36px, 4.2vw, 58px) !important;
  grid-template-columns: minmax(0, .92fr) minmax(480px, 1.08fr) !important;
  gap: clamp(34px, 4vw, 56px) !important;
  overflow: visible !important;
}

.public-body .marketing-hero-copy h1 {
  margin-block: 16px 18px !important;
  font-size:var(--type-display) !important;
  line-height: 1 !important;
}

.public-body .marketing-hero-copy > p {
  margin-bottom: 24px;
  font-size:var(--type-body);
  line-height: 1.62;
}

.public-body .marketing-hero .product-demo {
  min-height: 380px !important;
}

.public-body .product-marketing-hero .demo-window {
  min-height: 370px;
}

.public-body .studio-library-hero .public-studio-library {
  height: 400px;
  padding: 8px;
}

.public-body .studio-library-hero .public-studio-mosaic {
  height: 276px;
  padding: 10px;
}

.public-body .page-proof-strip {
  border: 0;
  background: transparent !important;
}

.public-body .page-proof-strip > .wrap {
  min-height: 66px;
  padding-inline: 22px;
  gap: clamp(20px, 4vw, 48px);
  border: 1px solid var(--ui-edge);
  border-radius: 16px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.public-body .marketing-section { padding-block: 82px; }
.public-body .marketing-section-heading { margin-bottom: 34px; }
.public-body .marketing-section-heading.compact { margin-bottom: 28px; }

.public-body .product-bento article {
  min-height: 224px;
  padding: 26px;
}

.public-body .product-bento .bento-large {
  min-height: 462px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.public-body .product-bento .bento-large .inventory-overview { margin-top: auto; }

.public-body .product-bento .bento-wide { min-height: 238px; }
.public-body .product-bento .bento-icon { margin-bottom: 28px; }

.public-body .decision-steps li,
.public-body .payment-steps li {
  min-height: 184px;
  padding: 20px;
  border-color: var(--ui-edge);
  border-radius: 16px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.public-body .decision-steps li > span,
.public-body .payment-steps li > span { margin-bottom: 28px; }

.public-body .decision-flow-section,
.public-body .public-studio-process {
  border-inline: 0 !important;
  border-radius: 0 !important;
  background: color-mix(in srgb, var(--ui-accent) 4%, var(--nexo-page)) !important;
  box-shadow: none !important;
}

.public-body .public-studio-intro {
  padding: 38px !important;
  gap: clamp(34px, 5vw, 68px);
}

.public-body .public-studio-categories > span {
  min-height: 112px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--category-color) 7%, var(--ui-surface-raised));
  box-shadow: none;
}

.public-body .public-studio-categories > span > .icon { margin-bottom: 18px; }

.public-body .public-studio-steps li {
  min-height: 212px;
  padding: 22px;
  border-color: var(--ui-edge);
  border-radius: 16px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.public-body .public-studio-steps .bento-icon { margin: 28px 0 18px; }

.public-body .public-publishing-card {
  min-height: 400px;
  padding: 36px;
  gap: clamp(38px, 5vw, 70px);
  border-color: var(--ui-edge);
  border-radius: 18px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

.public-body .plans-page-hero {
  min-height: 0;
  margin-block: 28px 20px;
  padding: clamp(28px, 3.4vw, 44px) !important;
  align-items: flex-start;
  text-align: left;
}

.public-body .plans-page-hero h1 {
  max-width: 760px;
  margin: 0 0 8px;
  font-size:var(--type-display);
}

.public-body .plans-page-hero > p { max-width: 720px; font-size:var(--type-body); }
.public-body .plans-hero-notes { margin-top: 16px; }
.public-body .plans-catalog { padding: 0 0 76px; }

.public-body .public-period-grid { gap: 12px; }
.public-body .public-period-card {
  min-height: 315px;
  padding: 23px;
  border-radius: 17px !important;
  background: var(--ui-surface) !important;
}

.public-body .public-period-card.featured { transform: none; }
.public-body .public-period-card h3 { margin: 12px 0 7px; font-size:var(--type-page); }
.public-body .public-period-price strong { font-size:var(--type-hero); }

.public-body .plan-inclusions {
  border-color: var(--ui-edge);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-card);
}

/* Shared application shell */
.shell-body {
  --nexo-sidebar-width: 264px;
  min-height: 100vh;
}

/* Authentication and every signed-in workspace share one restrained ambient canvas. */
.shell-body:is(.area-app, .area-studio, .area-admin, .area-reseller) {
  background: var(--nexo-app-canvas) !important;
}

.shell-body .shell-ambient { display: none !important; }

.shell-body .sidebar {
  width: var(--nexo-sidebar-width) !important;
  padding: 20px 16px 18px !important;
  border-right: 1px solid var(--ui-edge) !important;
  background: var(--ui-navigation-surface) !important;
  box-shadow: 16px 0 44px rgba(0, 0, 0, .12) !important;
}

.shell-body .shell-main {
  min-width: 0;
  margin-left: var(--nexo-sidebar-width) !important;
  padding-top: 1px;
}

.shell-body .sidebar-brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 0 4px 13px;
  border-bottom: 1px solid var(--ui-edge);
}

.shell-body .sidebar-brand-row > .brand {
  min-width: 0;
  flex: 1 1 auto;
}

.shell-body .sidebar-business-profile {
  min-width: 0;
  min-height: 52px;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border: 1px solid var(--ui-edge);
  border-radius: 13px;
  color: var(--text);
  background: var(--ui-surface);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .025), 0 6px 16px rgba(0, 0, 0, .08);
  transition: color var(--nexo-transition), background-color var(--nexo-transition), border-color var(--nexo-transition);
}

.shell-body .sidebar-business-profile-meta {
  min-width: 0;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
}

.shell-body .sidebar-business-profile-meta > .icon {
  width: 15px;
  height: 15px;
  opacity: .78;
}

.shell-body .sidebar-business-profile:is(:hover, :focus-visible) {
  color: var(--ui-accent-content);
  border-color: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-edge));
  background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-navigation-surface));
}

.shell-body .sidebar-business-profile:is(:hover, :focus-visible) .sidebar-business-profile-meta {
  color: var(--ui-accent-content);
}

.shell-body .sidebar-business-profile:focus-visible {
  outline: 2px solid var(--ui-accent-content);
  outline-offset: 2px;
}

.shell-body .sidebar-business-logo {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 24%, var(--ui-edge));
  border-radius: 10px;
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface));
}

.shell-body .sidebar-business-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.shell-body .sidebar-business-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: block;
}

.shell-body .sidebar-business-copy strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--type-caption);
  font-weight: 800;
}

.shell-body .sidebar-edition {
  border-color: color-mix(in srgb, var(--ui-accent) 42%, var(--ui-edge));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent) 10%, var(--ui-navigation-surface));
}

.shell-body .mode-switch {
  min-height: 50px;
  margin: 12px 3px 16px !important;
  padding: 2px !important;
  border: 1px solid var(--ui-edge) !important;
  border-radius: 13px !important;
  background: var(--nexo-page) !important;
  box-shadow: none !important;
}

.shell-body .mode-switch a {
  min-height: 44px;
  height: auto;
  border-radius: 9px !important;
}

.shell-body .mode-switch a.active {
  color: #fff !important;
  background: var(--ui-accent-strong) !important;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--ui-accent) 24%, transparent) !important;
}

.shell-body .workspace-label {
  min-height: 48px;
  margin: 12px 3px 16px !important;
  padding: 8px 10px !important;
  border-color: var(--ui-edge) !important;
  border-radius: 13px !important;
  background: var(--nexo-page) !important;
  box-shadow: none !important;
}

.shell-body .side-nav { gap: 3px; }
.shell-body .side-nav small { padding: 15px 10px 6px; }

.shell-body .side-nav :is(a, summary) {
  min-height: 44px !important;
  height: auto !important;
  padding: 0 11px !important;
  border: 1px solid transparent;
  border-radius: 12px !important;
  color: var(--muted);
}

.shell-body .side-nav :is(a, summary):hover {
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 18%, transparent) !important;
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-navigation-surface)) !important;
}

.shell-body .side-nav :is(a.active, summary.active) {
  color: var(--ui-accent-content) !important;
  border-color: color-mix(in srgb, var(--ui-accent) 72%, var(--ui-edge)) !important;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-accent) 18%, var(--ui-navigation-surface)), var(--ui-navigation-surface)) !important;
  box-shadow: none !important;
}

.shell-body .side-nav :is(a.active, summary.active)::before { display: none !important; }

.shell-body .side-nav a.active::after {
  width: 6px;
  height: 6px;
  right: 10px;
  background: var(--ui-accent-content) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ui-accent) 12%, transparent), 0 0 12px color-mix(in srgb, var(--ui-accent-content) 58%, transparent) !important;
}

.shell-body .side-subnav {
  margin-block: 3px 5px;
  border-color: var(--ui-edge) !important;
}

.shell-body .sidebar-foot {
  min-height: 62px;
  padding-top: 12px !important;
  border-color: var(--ui-edge) !important;
  min-width: 0;
  gap: 8px;
}

.shell-body .sidebar-foot .profile {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.shell-body .sidebar-foot .sidebar-profile-avatar {
  flex: 0 0 34px;
  min-width: 34px;
  overflow: hidden;
  white-space: nowrap;
  background-image: none !important;
}

.shell-body .sidebar-foot .sidebar-profile-copy {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

.shell-body .sidebar-foot .sidebar-profile-copy strong,
.shell-body .sidebar-foot .sidebar-profile-copy small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-body .sidebar-foot > form {
  flex: 0 0 auto;
  margin: 0;
}

.shell-body .field-hint {
  margin-top: -3px;
  color: var(--muted);
  font-size:var(--type-caption);
  line-height: 1.35;
}

.shell-body .field-feedback.coverage-warning {
  color: var(--warning) !important;
}

.shell-body .sidebar-foot .avatar { border-radius: 12px; }
.shell-body .sidebar-foot .icon-button { width: 44px !important; min-width: 44px !important; height: 44px !important; }

.shell-body .sidebar {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-edge)) transparent;
}

.shell-body .sidebar::-webkit-scrollbar { width: 7px; }
.shell-body .sidebar::-webkit-scrollbar-track { background: transparent; }
.shell-body .sidebar::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-edge));
  background-clip: padding-box;
}
.shell-body .sidebar::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--ui-accent) 52%, var(--ui-edge));
  background-clip: padding-box;
}
.shell-body .sidebar::-webkit-scrollbar-button { display: none; }

.shell-body .topbar {
  position: sticky;
  z-index: 30;
  top: 8px;
  width: auto;
  min-height: 72px;
  height: auto !important;
  margin: 8px 10px 0 !important;
  padding: 8px 12px 8px 18px !important;
  border: 1px solid var(--ui-edge) !important;
  border-radius: 18px !important;
  background: color-mix(in srgb, var(--ui-navigation-surface) 90%, transparent) !important;
  box-shadow: var(--ui-shadow-card) !important;
  backdrop-filter: blur(16px) saturate(1.08) !important;
}

.shell-body .topbar h1 {
  margin-top: 4px;
  font-size:var(--type-page);
  letter-spacing: -.035em;
}

.shell-body .topbar-route-name { display: none; }
.shell-body .topbar-workspace-name { display: inline; }

.shell-body .topbar .eyebrow {
  margin: 0;
  font:700 var(--type-caption)/1.2 var(--mono);
  letter-spacing: .08em;
}

.shell-body .top-actions {
  min-height: 44px;
  padding: 0;
  gap: 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.shell-body .topbar-divider {
  width: 1px;
  height: 24px;
  margin-inline: 2px;
  background: var(--ui-edge) !important;
}

.shell-body .top-actions > :where(.topbar-business, .utility-control, .theme-control) {
  min-width: 0;
  min-height: 44px;
  height: 44px;
  padding-inline: 10px;
  gap: 7px;
  color: var(--muted) !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: transparent !important;
  box-shadow: none !important;
  transition: color var(--nexo-transition), background-color var(--nexo-transition);
}

.shell-body .top-actions > .topbar-business {
  max-width: 166px;
  padding: 4px 10px 4px 4px;
  color: var(--text) !important;
}

.shell-body .top-actions > .topbar-business > span {
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 24%, var(--ui-edge));
  border-radius: 8px;
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface));
}

.shell-body .top-actions > :where(.utility-control, .theme-control) {
  font-size:var(--type-caption);
  font-weight: 700;
}

.shell-body .top-actions > :where(.topbar-business, .utility-control, .theme-control) :where(.icon, strong, span) {
  color: inherit !important;
}

.shell-body .top-actions > :where(.topbar-business, .utility-control, .theme-control):is(:hover, :focus-visible),
.shell-body .top-actions > .utility-control[aria-expanded="true"] {
  color: var(--ui-accent-content) !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-control)) !important;
  box-shadow: none !important;
}

.shell-body .top-actions > :where(.topbar-business, .utility-control, .theme-control):focus-visible {
  outline: 2px solid var(--ui-accent-content);
  outline-offset: -2px;
}

.shell-body .page-content {
  width: 100%;
  max-width: 1600px;
  padding: 14px 18px 48px !important;
}

.shell-body .page-content > .page-head {
  min-height: 96px;
  margin-bottom: 12px !important;
  padding: 14px 18px !important;
  gap: 18px;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 17%, var(--ui-edge)) !important;
  border-radius: var(--ui-radius-card) !important;
  background: linear-gradient(100deg, color-mix(in srgb, var(--ui-accent) 8%, var(--ui-surface)), var(--ui-surface) 74%) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.shell-body .page-content > .page-head > :first-child { min-width: 0; }
.shell-body .page-content > .page-head .page-kicker {
  margin-bottom: 5px;
  line-height: 1.2;
}
.shell-body .page-head h2 {
  font-size:var(--type-page);
  line-height: 1.12;
  letter-spacing: -.04em;
}
.shell-body .page-content > .page-head p {
  max-width: 72ch;
  margin-top: 5px;
  line-height: 1.45;
}

/* Shared surfaces and records */
.shell-body :is(
  .panel,
  .surface-toolbar,
  .credential-vault,
  .profile-card,
  .settings-hub,
  .settings-action-card,
  .template-card,
  .payment-card,
  .payment-context,
  .inventory-catalog-panel,
  .outage-impact-panel,
  .sale-detail-panel,
  .security-side,
  .export-card,
  .backup-panel
) {
  border-color: var(--ui-edge) !important;
  border-radius: var(--ui-radius-card) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.shell-body :is(.panel, .settings-action-card, .template-card, .export-card):hover {
  border-color: color-mix(in srgb, var(--ui-accent) 18%, var(--ui-edge)) !important;
  box-shadow: var(--ui-shadow-float) !important;
}

.shell-body :is(.panel-head, .records-title, .studio-panel-toolbar) {
  min-height: 52px;
  border-color: var(--ui-edge) !important;
  background: color-mix(in srgb, var(--ui-accent) 2%, var(--ui-surface)) !important;
}

.shell-body .surface-toolbar {
  min-height: 62px;
  padding: 8px 10px !important;
  gap: 10px;
}

@media (min-width: 761px) {
  .shell-body .surface-toolbar > .filter-bar {
    min-width: 0;
    flex: 1 1 auto;
  }

  .shell-body .surface-toolbar > .filter-bar > .search-field,
  .shell-body .surface-toolbar > .search-field {
    width: min(520px, 100%);
  }
}

.shell-body .button.small { min-height: 44px; }
.shell-body :is(.customer-row-link, .sale-whatsapp-link, .template-favorite) { min-height: 44px; }
.shell-body .template-favorite { min-width: 44px; width: 44px; height: 44px; }

.shell-body .data-table thead,
.shell-body .inventory-table thead {
  background: var(--ui-record-header, var(--nexo-table-head)) !important;
}

.shell-body table.data-table > thead > tr > th {
  height: 40px;
  box-sizing: border-box;
  padding-inline: 0 !important;
  vertical-align: middle !important;
  text-align: center !important;
  text-indent: 0 !important;
  color: var(--muted);
  border-color: var(--ui-edge) !important;
}

.shell-body table.data-table > thead > tr > th > .table-column-label {
  display: inline-block;
  max-width: 100%;
  transform: translateX(var(--table-column-label-shift, 0px));
  transition: transform 160ms cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .shell-body table.data-table > thead > tr > th > .table-column-label {
    transition: none;
  }
}

/* Video descriptions: the text owns scrolling, while the action row remains
 * inside the dialog instead of being clipped by the shared sticky margins. */
.shell-body .tutorial-description-modal-card {
  max-height: min(560px, calc(100dvh - 32px));
}

.shell-body .tutorial-description-modal-card > .tutorial-description-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.shell-body .tutorial-description-modal-card > .tutorial-description-actions {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 21px;
  border-top: 1px solid var(--ui-edge-soft);
  background: var(--ui-surface) !important;
  backdrop-filter: none;
}

.shell-body .tutorial-description-copy strong {
  color: var(--text);
  font-weight: 800;
}

.shell-body .video-description-editor {
  display: grid;
  gap: 8px;
}

.shell-body .video-description-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--text-muted, var(--muted));
  font-size: var(--type-caption);
  line-height: 1.4;
}

.shell-body .video-description-toolbar .button {
  min-height: 36px;
  padding: 7px 11px;
}

.shell-body .video-description-toolbar .button strong {
  margin-right: 3px;
  font-size: var(--type-body);
}

@media (max-width: 760px) {
  .shell-body .tutorial-description-modal-card {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
  }

  .shell-body .tutorial-description-modal-card > .tutorial-description-actions .button {
    width: 100%;
  }
}

.shell-body :is(.data-table, .inventory-table) td {
  height: 54px;
  border-color: var(--ui-edge-soft) !important;
}

.shell-body :is(.data-table, .inventory-table) tbody tr:hover {
  background: var(--ui-record-hover, var(--nexo-row-hover)) !important;
}

@media (min-width: 1181px) {
  /* Record content stays untouched while the shared label wrapper handles visible headers. */

  .shell-body #users-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    white-space: normal;
  }

  .shell-body #users-table :is(th, td):nth-child(1) { width: 19%; }
  .shell-body #users-table :is(th, td):nth-child(2) { width: 15%; }
  .shell-body #users-table :is(th, td):nth-child(3) { width: 13%; }
  .shell-body #users-table :is(th, td):nth-child(4) { width: 9%; }
  .shell-body #users-table :is(th, td):nth-child(5) { width: 10%; }
  .shell-body #users-table :is(th, td):nth-child(6) { width: 14%; }
  .shell-body #users-table :is(th, td):nth-child(7) { width: 20%; }

  .shell-body #users-table :is(.table-name, .table-name strong, .table-name small, td) {
    min-width: 0;
  }

  .shell-body #users-table :is(.table-name strong, .table-name small, td:nth-child(2), td:nth-child(3), td:nth-child(6)) {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .shell-body #users-table :is(td:nth-child(2), td:nth-child(3), td:nth-child(6)) {
    white-space: nowrap;
  }

  .shell-body .decision-table {
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    white-space: normal;
  }

  .shell-body .decision-table-pending :is(th, td):nth-child(1) { width: 14%; }
  .shell-body .decision-table-pending :is(th, td):nth-child(2) { width: 18%; }
  .shell-body .decision-table-pending :is(th, td):nth-child(3) { width: 14%; }
  .shell-body .decision-table-pending :is(th, td):nth-child(4) { width: 22%; }
  .shell-body .decision-table-pending :is(th, td):nth-child(5) { width: 11%; }
  .shell-body .decision-table-pending :is(th, td):nth-child(6) { width: 21%; }

  .shell-body .decision-table-history :is(th, td):nth-child(1) { width: 14%; }
  .shell-body .decision-table-history :is(th, td):nth-child(2) { width: 18%; }
  .shell-body .decision-table-history :is(th, td):nth-child(3) { width: 12%; }
  .shell-body .decision-table-history :is(th, td):nth-child(4) { width: 16%; }
  .shell-body .decision-table-history :is(th, td):nth-child(5) { width: 18%; }
  .shell-body .decision-table-history :is(th, td):nth-child(6) { width: 22%; }

  .shell-body .decision-table :is(.table-name strong, .table-name small, td > strong, td > small) {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (min-width: 761px) and (max-width: 1180px) {
  .shell-body .panel.table-wrap:has(> .data-table[data-mobile-records="true"]) {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tbody {
    padding: 0 !important;
  }
}

.modal { background: var(--ui-scrim) !important; backdrop-filter: blur(5px); }
.modal-card {
  border-color: color-mix(in srgb, var(--ui-accent) 34%, var(--ui-edge)) !important;
  border-radius: var(--ui-radius-panel) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-modal) !important;
}
.modal-head { border-color: var(--ui-edge) !important; background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface)); }

/* Gestor */
.shell-body.area-app .console-hero {
  min-height: 230px !important;
  margin-bottom: 12px !important;
  padding: 24px 28px !important;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px) !important;
  border-color: color-mix(in srgb, var(--ui-blue) 42%, var(--ui-edge)) !important;
  border-radius: var(--ui-radius-panel) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

html:not([data-theme="light"]) .shell-body.area-app .console-hero {
  background: var(--nexo-hero) !important;
}

.shell-body.area-app .console-hero .hero-signal {
  min-height: 144px;
  padding: 16px 20px !important;
  border: 1px solid color-mix(in srgb, var(--ui-cyan) 32%, var(--ui-edge)) !important;
  border-radius: 16px !important;
}

html:not([data-theme="light"]) .shell-body.area-app .console-hero .hero-signal {
  background: rgba(11, 28, 54, .78) !important;
}

.shell-body.area-app .console-hero .console-user-name {
  color: var(--ui-accent-content) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
}

.shell-body .stat-grid,
.shell-body .dashboard-metrics,
.shell-body .admin-metrics {
  gap: 12px !important;
  margin-bottom: 12px !important;
}

.shell-body .stat-grid .metric-card,
.shell-body .dashboard-metrics > .metric-card,
.shell-body .admin-metrics > .metric-card {
  min-height: 104px !important;
  padding: 14px !important;
  border-color: var(--ui-edge) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(250px 150px at 100% 100%, color-mix(in srgb, var(--metric-accent) 8%, transparent), transparent 76%),
    var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.shell-body .stat-grid .metric-card::before { display: none !important; }
.shell-body .stat-grid .metric-card::after {
  content: "" !important;
  position: absolute;
  inset: auto 14px 9px;
  display: block !important;
  height: 1px;
  background: linear-gradient(90deg, var(--metric-accent), transparent);
  opacity: .4;
}

.shell-body .stat-grid .metric-card .metric-icon {
  border-color: color-mix(in srgb, var(--metric-accent) 36%, var(--ui-edge)) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--metric-accent) 4%, var(--ui-control)) !important;
}

.shell-body .dashboard-grid,
.shell-body .admin-dashboard-grid { gap: 12px !important; }

.shell-body .dashboard-grid > .panel,
.shell-body .admin-dashboard-grid > .panel { border-radius: 18px !important; }

html body.shell-body.area-app .dashboard-grid > .panel,
html body.shell-body.area-app .dashboard-grid > .panel:hover {
  border-color: var(--ui-edge) !important;
  background: var(--ui-surface) !important;
}

html body.shell-body.area-app .dashboard-grid .panel-head {
  border-bottom-color: var(--ui-edge) !important;
  background: color-mix(in srgb, var(--dashboard-panel-accent) 8%, var(--ui-surface)) !important;
  box-shadow: none !important;
}

html body.shell-body.area-app .dashboard-grid .panel-body {
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

html body.shell-body.area-app .dashboard-metrics > .metric-card,
html body.shell-body.area-app .dashboard-metrics > .metric-card:hover {
  border: 1px solid var(--ui-edge) !important;
  border-radius: 16px !important;
  background:
    radial-gradient(250px 150px at 100% 100%, color-mix(in srgb, var(--metric-accent) 9%, transparent), transparent 76%),
    var(--ui-surface) !important;
  background-clip: border-box !important;
  box-shadow: var(--ui-shadow-card) !important;
}

html body.shell-body.area-app .dashboard-metrics > .metric-card::after {
  content: "" !important;
  position: absolute;
  inset: auto 14px 9px;
  display: block !important;
  height: 1px;
  background: linear-gradient(90deg, var(--metric-accent), transparent);
  opacity: .4;
}

.shell-body .dashboard-revenue-chart,
.shell-body .chart-bars {
  background:
    repeating-linear-gradient(0deg, transparent 0 49px, var(--ui-edge-soft) 50px),
    color-mix(in srgb, var(--ui-blue) 2%, var(--ui-surface)) !important;
}

.shell-body .bar {
  border: 1px solid rgba(56, 212, 255, .2);
  background: linear-gradient(180deg, #38d4ff, #3181ff) !important;
  box-shadow: 0 10px 22px rgba(49, 129, 255, .16) !important;
}

/* Studio */
.shell-body.area-studio .studio-command-hero {
  min-height: 220px;
  border-color: color-mix(in srgb, var(--ui-violet) 42%, var(--ui-edge)) !important;
  border-radius: var(--ui-radius-panel) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

html:not([data-theme="light"]) .shell-body.area-studio .studio-command-hero {
  background: var(--nexo-studio-hero) !important;
}

.shell-body.area-studio .page-content > .page-head.studio-library-head {
  min-height: 96px !important;
  margin: 0 !important;
  padding: 12px 2px 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.shell-body.area-studio .page-content > .page-head.studio-library-head h2 {
  max-width: 720px;
  font-size:var(--type-hero) !important;
  letter-spacing: -.045em;
}

.shell-body.area-studio .studio-filter-bar {
  min-height: 62px;
  margin-bottom: 10px !important;
  padding: 8px 10px !important;
  gap: 8px !important;
  border-color: var(--ui-edge) !important;
  border-radius: 16px !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.shell-body.area-studio .studio-filter-search,
.shell-body.area-studio .studio-filter-options :is(select, button) {
  min-height: 44px;
  border-color: var(--ui-edge) !important;
  border-radius: 12px !important;
  background: var(--ui-interactive-surface) !important;
}

.shell-body.area-studio .studio-filter-search {
  border-color: var(--ui-query-edge) !important;
  background: var(--ui-query-surface) !important;
  box-shadow: var(--ui-query-shadow) !important;
}

.shell-body.area-studio .studio-filter-bar > .button {
  width: auto;
  height: 44px !important;
  min-height: 44px !important;
  padding-block: 0 !important;
  white-space: nowrap;
}

.shell-body.area-studio .studio-category-grid .studio-category-group > a {
  min-height: 64px;
  border-color: var(--ui-edge) !important;
  border-radius: 14px !important;
  background: color-mix(in srgb, var(--category-accent, var(--ui-violet)) 3%, var(--ui-surface)) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.shell-body.area-studio .studio-library-panel {
  border-color: var(--ui-edge) !important;
  border-radius: 18px !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

.shell-body.area-studio .studio-template-card {
  overflow: hidden;
  border-color: var(--ui-edge) !important;
  border-radius: 16px !important;
  background: var(--ui-surface-raised) !important;
  box-shadow: none !important;
}

.shell-body.area-studio .studio-template-card:hover {
  border-color: color-mix(in srgb, var(--ui-violet) 46%, var(--ui-edge)) !important;
  box-shadow: var(--ui-shadow-float) !important;
  transform: translateY(-2px);
}

.shell-body.area-studio .studio-template-media {
  margin: 0;
  border-radius: 0 !important;
}

/* Administración */
.shell-body.area-admin .admin-command-hero,
.shell-body.area-admin .console-hero {
  min-height: 230px !important;
  margin-bottom: 12px !important;
  padding: 24px 28px !important;
  border-color: color-mix(in srgb, var(--ui-violet) 42%, var(--ui-edge)) !important;
  border-radius: var(--ui-radius-panel) !important;
  box-shadow: var(--ui-shadow-card) !important;
}

html:not([data-theme="light"]) .shell-body.area-admin :is(.admin-command-hero, .console-hero) {
  background: var(--nexo-admin-hero) !important;
}

.shell-body.area-admin .admin-seal,
.shell-body.area-admin .hero-signal {
  border: 1px solid color-mix(in srgb, var(--ui-violet) 34%, var(--ui-edge)) !important;
  border-radius: 16px !important;
}

html:not([data-theme="light"]) .shell-body.area-admin :is(.admin-seal, .hero-signal) {
  background: rgba(31, 22, 68, .76) !important;
}

.shell-body.area-admin :is(.command-item, .studio-admin-row, .admin-period-card) {
  border-color: var(--ui-edge) !important;
  border-radius: 13px !important;
  background: var(--ui-surface-raised) !important;
}

/* Empty and zero-data states share one compact, actionable Nexo surface. */
.shell-body .empty-state {
  min-height: 164px !important;
  padding: 28px !important;
  border: 1px solid var(--ui-edge) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--ui-accent) 1%, var(--ui-surface)) !important;
  box-shadow: none !important;
}

.shell-body .empty-state.compact { min-height: 116px !important; padding: 20px !important; }
.shell-body .empty-state-icon {
  border: 1px solid color-mix(in srgb, var(--ui-accent) 34%, var(--ui-edge)) !important;
  border-radius: 12px !important;
  background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-control)) !important;
  color: var(--ui-accent-content) !important;
}

.shell-body.area-studio .template-grid > .studio-empty:only-child {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0 !important;
  box-sizing: border-box;
  min-height: 190px !important;
  grid-column: 1 / -1;
}

/* Authentication and independent admin access */
.auth-body,
.admin-auth-body {
  background: var(--nexo-app-canvas) !important;
}

.admin-auth-body::before { display: none !important; }

.admin-auth-body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

.admin-auth-body > main {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vh, 48px) 20px max(36px, env(safe-area-inset-bottom));
}

.auth-body .auth-page {
  min-height: calc(100svh - 84px);
  padding: 24px 24px 48px;
}

.auth-shell,
.admin-login-card,
.auth-card,
.auth-flow-card {
  border-color: var(--ui-edge) !important;
  border-radius: var(--ui-radius-panel) !important;
  background: var(--ui-surface) !important;
  box-shadow: var(--ui-shadow-float) !important;
}

.auth-shell {
  width: min(1040px, 100%);
  border-radius: 20px !important;
}

.auth-shell-login {
  min-height: 520px;
  grid-template-columns: minmax(0, 1fr) 430px;
}

.auth-shell-register {
  min-height: 598px;
  grid-template-columns: 380px minmax(0, 1fr);
}

.auth-shell::before { display: none; }

.auth-flow-visual {
  background:
    radial-gradient(480px 300px at 100% 0, rgba(49, 129, 255, .24), transparent 72%),
    radial-gradient(360px 260px at 0 100%, rgba(139, 92, 246, .12), transparent 76%),
    #081526 !important;
}

html:not([data-theme="light"]) .auth-context {
  background:
    radial-gradient(480px 300px at 100% 0, rgba(49, 129, 255, .24), transparent 72%),
    radial-gradient(360px 260px at 0 100%, rgba(139, 92, 246, .12), transparent 76%),
    #081526 !important;
}

.auth-context {
  padding: 36px;
  border-right-color: var(--ui-edge) !important;
}

.auth-context::after { display: none; }
.auth-context-copy h2,
.auth-shell-register .auth-context-copy h2 { font-size:var(--type-hero); }
.auth-module-list { gap: 7px; }
.auth-module-item { min-height: 58px; border-color: var(--ui-edge); }
html:not([data-theme="light"]) .auth-module-item { background: rgba(11, 22, 38, .82); }
.auth-module-icon { width: 38px; height: 38px; border-radius: 10px; }
.auth-form-panel,
.auth-shell-login .auth-form-panel { padding: 36px 38px; }
.auth-form-heading { margin-bottom: 22px; }
.auth-form-mark { margin-bottom: 16px; border-radius: 12px; }

.public-body .auth-result-card {
  width: min(520px, 100%);
  padding: 38px;
  border-radius: 18px !important;
  background:
    linear-gradient(90deg, var(--ui-accent-strong) 0 64px, transparent 64px) top left / 100% 2px no-repeat,
    var(--ui-surface) !important;
}

.public-body .auth-result-card .auth-mark { border-radius: 12px; box-shadow: none; }
.public-body .auth-result-card > p { line-height: 1.62; }

.auth-flow-card {
  width: min(920px, 100%);
  min-height: 500px;
  grid-template-columns: 360px minmax(0, 1fr);
  border-color: var(--ui-edge) !important;
  background: var(--ui-surface) !important;
}

.auth-flow-visual {
  padding: 38px 32px;
  border-right: 1px solid var(--ui-edge);
}

.auth-flow-visual::after { display: none; }
.auth-flow-content { padding: 44px; }
.auth-orbit { width: 154px; height: 154px; }

.admin-auth-context {
  --admin-auth-context-text: #f5f9ff;
  --admin-auth-context-muted: #a7b8ce;
  max-width: none;
  align-self: stretch;
  padding: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--ui-violet) 30%, var(--ui-edge));
  border-radius: 17px;
  background:
    radial-gradient(520px 340px at 100% 0, rgba(124, 58, 237, .28), transparent 72%),
    radial-gradient(380px 260px at 0 100%, rgba(99, 102, 241, .14), transparent 76%),
    #0b1020 !important;
}

.admin-auth-context h1 {
  color: var(--admin-auth-context-text);
  font-size:var(--type-display);
}
.admin-auth-context > p,
.admin-auth-context .admin-auth-points { color: var(--admin-auth-context-muted); }
.admin-auth-context .admin-seal { margin-bottom: 24px; }

.admin-auth-page {
  width: min(1120px, 100%);
  min-height: min(600px, calc(100svh - 168px));
  margin: 0 auto;
  padding: 10px;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 10px;
  border: 1px solid var(--ui-edge);
  border-radius: 22px;
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-float);
}

.admin-login-card {
  align-self: stretch;
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 17px !important;
  box-shadow: none !important;
}

.admin-auth-header {
  width: min(1240px, calc(100% - 24px));
  margin: 12px auto 0;
  min-height: 68px;
  padding: 10px 14px !important;
  border: 1px solid var(--ui-edge);
  border-radius: 18px;
  background: color-mix(in srgb, var(--ui-navigation-surface) 90%, transparent);
  box-shadow: var(--ui-shadow-card);
}

/* Responsive Nexo */
@media (max-width: 1180px) {
  .landing-hero {
    grid-template-columns: minmax(0, .9fr) minmax(470px, 1.1fr) !important;
    gap: 36px !important;
  }

  .landing-hero-copy h1 { font-size:var(--type-display) !important; }
  .public-body .marketing-hero {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .public-body .marketing-hero-copy { max-width: 760px; }
  .public-body .marketing-hero .product-demo,
  .public-body .studio-library-hero .public-studio-library { width: 100%; max-width: 820px; }
  .shell-body .page-content { padding-inline: 14px !important; }
  .shell-body.area-app .console-hero,
  .shell-body.area-admin .admin-command-hero,
  .shell-body.area-admin .console-hero { grid-template-columns: minmax(0, 1fr) 310px !important; }
}

@media (max-width: 900px) {
  .landing-hero {
    min-height: auto !important;
    padding-top: 62px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .landing-hero-copy { max-width: 720px; }
  .product-demo { max-width: 760px; }

  .auth-shell-login,
  .auth-shell-register {
    width: min(650px, 100%);
    grid-template-columns: minmax(0, 1fr);
  }

  .auth-context { padding: 30px; }
  .auth-flow-card { grid-template-columns: 300px minmax(0, 1fr); }
  .auth-flow-content { padding: 36px; }

  .admin-auth-body > main {
    place-items: center;
    padding: 28px 16px max(40px, env(safe-area-inset-bottom));
  }

  .admin-auth-body .admin-auth-context {
    display: none;
  }

  .admin-auth-body .admin-auth-page {
    width: min(520px, 100%);
    min-height: 0;
    margin: 0;
    padding: 8px;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .shell-body .sidebar {
    z-index: 50 !important;
    width: min(300px, calc(100vw - 40px)) !important;
    border-radius: 0 22px 22px 0;
    box-shadow: 24px 0 62px rgba(0, 0, 0, .44) !important;
  }

  .shell-body .shell-main { margin-left: 0 !important; }
  .shell-body .shell-nav-backdrop { z-index: 45 !important; }

  .shell-body .topbar {
    top: 0;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border-width: 0 0 1px !important;
    border-radius: 0 !important;
    grid-template-columns: 44px minmax(0, 1fr) auto !important;
  }

  .shell-body .mobile-nav-toggle {
    display: grid !important;
    width: 44px;
    min-width: 44px;
    height: 44px;
    color: var(--muted) !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .shell-body .mobile-nav-toggle:is(:hover, :focus-visible),
  .shell-body .mobile-nav-toggle[aria-expanded="true"] {
    color: var(--ui-accent-content) !important;
    border: 0 !important;
    background: color-mix(in srgb, var(--ui-accent) 9%, var(--ui-control)) !important;
    box-shadow: none !important;
  }

  .shell-body .mobile-nav-toggle:focus-visible {
    outline: 2px solid var(--ui-accent-content);
    outline-offset: -2px;
  }

  .shell-body .topbar h1 { font-size:var(--type-subtitle); }
  .shell-body .topbar .eyebrow { font-size:var(--type-caption); }
  .shell-body .topbar-copy {
    height: 44px;
    display: grid;
    align-content: center;
    gap: 2px;
    line-height: 1;
  }
  .shell-body .topbar-copy h1 { margin: 0; line-height: 1.08; }
  .shell-body .topbar-copy .eyebrow { line-height: 1; }
  .shell-body .topbar-workspace-name { display: none; }
  .shell-body .topbar-route-name { display: inline; }
  .shell-body .top-actions {
    min-height: 44px;
    padding: 0;
    gap: 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .shell-body .top-actions > :where(.topbar-business, .utility-control, .theme-control) {
    padding: 0;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .shell-body .top-actions > :where(.topbar-business, .utility-control, .theme-control):is(:hover, :focus-visible),
  .shell-body .top-actions > .utility-control[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--ui-accent) 52%, var(--ui-edge)) !important;
    background: color-mix(in srgb, var(--ui-accent) 8%, var(--ui-control)) !important;
  }
  .shell-body .page-content { padding: 12px 12px max(32px, env(safe-area-inset-bottom)) !important; }

  .shell-body.area-app .console-hero,
  .shell-body.area-admin .admin-command-hero,
  .shell-body.area-admin .console-hero,
  .shell-body.area-studio .studio-command-hero {
    min-height: 0 !important;
    padding: 20px !important;
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 760px) {
  .public-body .wrap { width: min(100% - 24px, 1220px); }

  .public-header {
    top: 8px;
    min-height: 62px;
    margin-top: 8px;
    padding: 7px 8px !important;
    border-radius: 15px;
  }

  .public-header .public-nav { display: none; }
  .public-header .brand { margin-right: auto; }
  .public-header .header-actions { width: auto; }
  .public-header .header-actions .button { min-width: 0; padding-inline: 12px; }
  .public-header .header-actions .button.ghost { display: none; }

  .landing-hero {
    padding: 38px 0 40px !important;
    gap: 32px !important;
  }

  .landing-hero-copy h1 {
    margin-top: 0 !important;
    font-size:var(--type-display) !important;
  }

  .landing-hero-copy > p { font-size:var(--type-body); }
  .public-body .hero-actions { display: grid !important; grid-template-columns: 1fr; }
  .public-body .hero-actions .button { width: 100%; }
  .shell-body.area-studio .hero-actions {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) !important;
    gap: 8px;
  }
  .shell-body.area-studio .hero-actions .button {
    width: 100%;
    min-width: 0;
    padding-inline: 8px;
    white-space: nowrap;
  }
  .hero-assurance { display: grid !important; grid-template-columns: 1fr; gap: 8px; }

  .product-demo { min-height: 350px !important; }
  .demo-window { min-height: 330px; border-radius: 18px !important; }
  .demo-window-bar { padding-inline: 10px !important; }
  .demo-live { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .demo-tabs { grid-template-columns: repeat(3, 1fr); }
  .demo-tabs button { min-width: 0; padding-inline: 5px !important; }
  .demo-bridge-card { right: 8px !important; left: 8px !important; width: auto !important; }

  .trust-strip-grid { grid-template-columns: 1fr !important; }
  .trust-strip-grid > div { min-height: 68px; border-right: 0 !important; border-bottom: 1px solid var(--ui-edge); }
  .trust-strip-grid > div:last-child { border-bottom: 0; }
  .landing-section { padding-block: 48px !important; }
  .landing-final-cta { margin-bottom: 42px !important; padding: 24px !important; }

  .public-body .marketing-hero {
    margin-block: 16px 12px;
    padding: 24px 20px !important;
    gap: 28px !important;
    border-radius: 18px !important;
  }

  .public-body .marketing-hero-copy h1 {
    font-size:var(--type-hero) !important;
  }

  .public-body .marketing-hero .product-demo { min-height: 330px !important; }
  .public-body .product-marketing-hero .demo-window { min-height: 320px; }
  .public-body .studio-library-hero .public-studio-library { height: 360px; }
  .public-body .studio-library-hero .public-studio-mosaic { height: 238px; }

  .public-body .page-proof-strip > .wrap {
    min-height: 0;
    padding: 18px;
    gap: 10px;
    align-items: flex-start;
  }

  .public-body .marketing-section { padding-block: 58px; }
  .public-body .product-bento .bento-large { min-height: 380px; padding: 26px; }
  .public-body .product-bento .bento-wide { min-height: 220px; }
  .public-body .decision-steps li,
  .public-body .payment-steps li,
  .public-body .public-studio-steps li { min-height: 0; }
  .public-body .decision-steps li > span,
  .public-body .payment-steps li > span { margin-bottom: 18px; }
  .public-body .public-studio-steps .bento-icon { margin-block: 20px 16px; }

  .public-body .public-studio-intro { padding: 24px !important; }
  .public-body .public-studio-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .public-body .public-studio-categories > span { min-height: 104px; }
  .public-body .public-publishing-card { min-height: 0; padding: 24px; }

  .public-body .plans-page-hero {
    margin-block: 16px 14px;
    padding: 26px 22px !important;
    border-radius: 18px !important;
  }
  .public-body .plans-page-hero h1 { font-size:var(--type-hero); }
  .public-body .plans-hero-notes { justify-content: flex-start; gap: 10px 16px; }
  .public-body .plans-catalog { padding-bottom: 58px; }
  .public-body .public-period-card { min-height: 0; }

  .auth-flow-card { width: min(520px, 100%); min-height: 0; grid-template-columns: minmax(0, 1fr); }
  .auth-flow-visual { display: none; }
  .auth-flow-content { padding: 30px 24px; }
  .public-body .auth-result-card { padding: 28px 24px; }
  .shell-body .empty-state { min-height: 144px !important; padding: 22px !important; }

  .shell-body .mode-switch { margin: 8px 3px 10px !important; padding: 1px !important; }
  .shell-body .mode-switch a { min-height: 44px; }
  .shell-body .workspace-label { margin-block: 8px 10px !important; }

  .shell-body .top-actions { gap: 6px; }
  .shell-body .top-actions > :is(.topbar-business, .desktop-shortcuts) { display: none !important; }
  .shell-body .top-actions > :is(.bloc-control, .theme-control) {
    display: inline-flex !important;
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
  }
  .shell-body .top-actions > :is(.bloc-control, .theme-control) > span { display: none !important; }
  .shell-body .topbar-divider { display: none; }

  .shell-body .page-content > .page-head {
    min-height: 0 !important;
    height: auto !important;
    padding: 16px !important;
    gap: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .shell-body .page-content > .page-head > :first-child {
    flex: 0 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .shell-body .page-content > .page-head:has(> :is(button, .button, a.button)),
  .shell-body .page-content > .page-head.renewal-page-head,
  .shell-body .page-content > .page-head.inventory-module-head,
  .shell-body .page-content > .page-head.outage-module-head {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 14px !important;
  }

  .shell-body .page-content > .page-head > :is(button, .button, a.button) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    font-size: var(--type-ui) !important;
    font-weight: 700 !important;
    letter-spacing: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .shell-body .page-content > .page-head > :is(button, .button, a.button) .icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .shell-body .page-content > .page-head :is(.actions, .page-head-actions) {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .shell-body .page-content > .page-head :is(.actions, .page-head-actions) > :is(.button, button, a) {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 0 14px !important;
    font-size: var(--type-ui) !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* Account detail keeps its two primary actions side by side on phones. */
  .shell-body .page-content > .page-head.account-detail-head :is(.actions, .page-head-actions) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    flex-direction: initial !important;
    gap: 9px !important;
  }

  .shell-body .page-content > .page-head.account-detail-head :is(.actions, .page-head-actions) > :is(.button, button, a) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .shell-body .page-content > .page-head.studio-admin-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start !important;
  }

  .shell-body .studio-admin-head > .actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .shell-body .studio-admin-head > .actions .button {
    width: 100% !important;
    min-width: 0 !important;
  }
  .shell-body .studio-editor-head .back-link {
    width: max-content;
    margin-bottom: 9px;
    display: flex;
  }

  .shell-body .studio-editor-head .page-kicker { margin-bottom: 6px; }

  .shell-body .page-head h2 { font-size:var(--type-page); }

  .shell-body.area-app .console-hero,
  .shell-body.area-admin .admin-command-hero,
  .shell-body.area-admin .console-hero,
  .shell-body.area-studio .studio-command-hero {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .shell-body.area-app .console-hero { row-gap: 14px !important; }
  .shell-body.area-app .console-hero .hero-signal { min-height: 96px; padding: 10px 12px !important; }
  .shell-body.area-app .console-hero-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }
  .shell-body.area-app .console-hero-actions > .button { min-width: 0; padding-inline: 8px; }

  .shell-body .stat-grid,
  .shell-body .dashboard-metrics,
  .shell-body .admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .shell-body .stat-grid .metric-card,
  .shell-body .dashboard-metrics > .metric-card,
  .shell-body .admin-metrics > .metric-card {
    min-height: 96px !important;
    padding: 12px !important;
  }

  .shell-body.area-studio .page-content > .page-head.studio-library-head {
    min-height: 96px !important;
    padding-block: 8px 12px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 44px !important;
    align-items: end !important;
    gap: 10px !important;
  }

  .shell-body.area-studio .page-content > .page-head.studio-library-head .page-kicker {
    margin-bottom: 5px !important;
    font-size:var(--type-caption) !important;
    line-height: 1.2 !important;
  }
  .shell-body.area-studio .page-content > .page-head.studio-library-head h2 {
    font-size:var(--type-page) !important;
    line-height: 1.06 !important;
  }
  .shell-body.area-studio .page-content > .page-head.studio-library-head p {
    margin-top: 4px !important;
    font-size:var(--type-caption) !important;
    line-height: 1.45 !important;
  }
  .shell-body.area-studio .page-content > .page-head.studio-library-head > .button {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    font-size: var(--type-ui) !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    overflow: visible !important;
  }
  .shell-body.area-studio .page-content > .page-head.studio-library-head > .button .icon { width: 16px !important; height: 16px !important; }

  .shell-body.area-studio .studio-filter-bar {
    padding: 6px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .shell-body.area-studio .studio-filter-search { grid-column: 1 / -1; width: 100%; }
  .shell-body.area-studio .studio-filter-options { display: contents !important; }
  .shell-body.area-studio .studio-filter-options > label { width: 100%; min-width: 0; }
  .shell-body.area-studio .studio-filter-options :is(select, .studio-favorite-filter > span) {
    width: 100%;
    min-width: 0;
    padding-inline: 7px;
    justify-content: center;
    font-size:var(--type-caption);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shell-body.area-studio .studio-filter-bar > .button {
    width: 100%;
    min-width: 0;
    padding-inline: 5px;
    font-size:var(--type-caption);
    white-space: normal;
  }
  .shell-body .surface-toolbar {
    min-height: 60px;
    padding: 7px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px;
  }
  .shell-body .surface-toolbar > :is(.filter-bar, .search-field),
  .shell-body .surface-toolbar .filter-bar > .search-field {
    width: 100%;
    min-width: 0;
  }
  .shell-body .surface-toolbar .toolbar-meta {
    width: auto !important;
    max-width: 118px;
    justify-self: end;
    text-align: right;
    font-size:var(--type-caption);
    line-height: 1.25;
  }

  .shell-body .panel.table-wrap:has(> .data-table[data-mobile-records="true"]) {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .shell-body .data-table[data-mobile-records="true"] tbody {
    padding: 0 !important;
  }

  .shell-body .inventory-catalog-panel .inventory-catalog-list,
  .shell-body .studio-library-panel .studio-admin-list {
    padding: 0 14px 8px !important;
    gap: 0 !important;
  }

  .shell-body .inventory-catalog-panel .inventory-catalog-row,
  .shell-body .studio-library-panel .studio-admin-row {
    border-width: 1px 0 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .shell-body .studio-admin-actions .icon-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .shell-body .studio-media-grid[data-canva-preview-block] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 16px !important;
  }

  .shell-body .studio-media-fields,
  .shell-body .manual-cover-options {
    width: 100%;
    min-width: 0;
  }

  .shell-body .manual-cover-body {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .shell-body .button.small { min-height: 44px !important; }
  .shell-body .modal-card {
    width: min(520px, calc(100vw - 28px)) !important;
    max-height: calc(100svh - max(48px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px))) !important;
    max-height: calc(100dvh - max(48px, calc(env(safe-area-inset-top) + env(safe-area-inset-bottom) + 24px))) !important;
  }
  .shell-body .security-progress {
    padding: 10px 12px !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
  }
  .shell-body .security-progress > i { display: none; }
  .shell-body .security-progress > span {
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    text-align: center;
    white-space: normal;
    font-size:var(--type-caption);
    letter-spacing: 0;
    line-height: 1.2;
  }
  .admin-auth-header {
    width: calc(100% - 16px);
    margin: 8px auto 0;
  }
}

@media (max-width: 620px) {
  .admin-auth-body > main {
    place-items: center;
    padding: clamp(18px, 4vh, 32px) 14px max(28px, env(safe-area-inset-bottom));
  }

  .admin-auth-body .admin-auth-page {
    width: min(100%, 520px);
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
    align-items: start !important;
  }

  .admin-auth-body .admin-login-card {
    min-height: 0;
    padding: 24px 18px;
  }

  .admin-auth-body .admin-card-foot a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Cabecera pública intermedia: conserva la navegación sin partir las acciones. */
@media (min-width: 761px) and (max-width: 900px) {
  .public-body:not(.auth-body) .public-header { gap: 10px; }
  .public-body:not(.auth-body) .public-header .public-nav a { padding-inline: 10px; }
  .public-body:not(.auth-body) .public-header .header-actions {
    flex: 0 0 auto;
    flex-wrap: nowrap;
  }
  .public-body:not(.auth-body) .public-header .header-actions .button.ghost { display: none; }
}

/* Administración editorial: consulta escalable y paginación del catálogo. */
body.shell-body.area-admin .studio-admin-query {
  margin-bottom: 14px;
  padding: 13px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-items: stretch !important;
  gap: 12px !important;
  overflow: visible;
}

.studio-admin-filter-form {
  display: grid;
  grid-template-columns: minmax(200px, 1.35fr) repeat(3, minmax(125px, .72fr)) minmax(175px, .95fr) 72px auto;
  align-items: end;
  gap: 9px;
}

.studio-admin-filter {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.studio-admin-filter > span:first-child {
  color: var(--muted);
  font:700 var(--type-caption)/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.studio-admin-filter select,
.studio-admin-filter-control {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--ui-interactive-edge, var(--ui-edge));
  border-radius: var(--ui-radius-control);
  background: var(--ui-interactive-surface, var(--ui-control));
  color: var(--text);
  box-shadow: var(--ui-interactive-shadow, none);
}

.studio-admin-filter select {
  padding: 0 34px 0 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.studio-admin-filter-control {
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--muted);
  background: var(--ui-query-surface, var(--ui-control));
  border-color: var(--ui-query-edge, var(--ui-edge));
}

.studio-admin-filter-control input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.studio-admin-filter select:focus-visible,
.studio-admin-filter-control:has(input:focus-visible) {
  border-color: var(--ui-query-focus-edge, var(--ui-accent-content));
  outline: 2px solid color-mix(in srgb, var(--ui-accent-content) 20%, transparent);
  outline-offset: 1px;
}

.studio-admin-filter-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.studio-admin-filter-actions .button {
  min-height: 44px;
  padding-inline: 13px;
  white-space: nowrap;
}

.studio-admin-status-filters {
  padding-top: 11px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid var(--ui-context-divider, var(--ui-edge));
}

.studio-admin-status-filters a {
  min-height: 38px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--ui-interactive-edge, var(--ui-edge));
  border-radius: 10px;
  background: var(--ui-interactive-surface, var(--ui-control));
  color: var(--muted);
  font-size:var(--type-caption);
  font-weight: 700;
  transition: color var(--ui-fast) ease, border-color var(--ui-fast) ease, background-color var(--ui-fast) ease;
}

.studio-admin-status-filters a b {
  color: inherit;
  font:700 var(--type-caption)/1 var(--mono);
}

.studio-admin-status-filters a:hover,
.studio-admin-status-filters a.active {
  border-color: color-mix(in srgb, var(--ui-accent-content) 46%, var(--ui-edge));
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-interactive-surface, var(--ui-control)));
  color: var(--ui-accent-content);
}

.studio-admin-status-filters a:focus-visible,
.studio-admin-pagination a:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ui-accent-content) 62%, transparent);
  outline-offset: 2px;
}

.studio-admin-result-page {
  color: var(--muted);
  font:700 var(--type-caption)/1 var(--mono);
}

.studio-admin-title {
  min-width: 0;
  flex-wrap: wrap;
}

.studio-admin-title > a {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.link-review-chip.is-report {
  border-color: color-mix(in srgb, var(--warning) 42%, var(--ui-edge)) !important;
}

.studio-admin-pagination-bar {
  min-height: 68px;
  padding: 11px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--ui-record-divider, var(--ui-edge));
  background: var(--ui-record-header, var(--ui-surface));
}

.studio-admin-pagination-bar > span {
  color: var(--muted);
  font-size:var(--type-caption);
}

.studio-admin-pagination {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}

.studio-admin-pagination a {
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--ui-interactive-edge, var(--ui-edge));
  border-radius: 10px;
  background: var(--ui-interactive-surface, var(--ui-control));
  color: var(--muted);
  font-size:var(--type-caption);
  font-weight: 700;
}

.studio-admin-pagination a:hover,
.studio-admin-pagination a.active {
  border-color: color-mix(in srgb, var(--ui-accent-content) 48%, var(--ui-edge));
  color: var(--ui-accent-content);
  background: color-mix(in srgb, var(--ui-accent) 12%, var(--ui-interactive-surface, var(--ui-control)));
}

.studio-admin-pagination .pagination-direction {
  min-width: auto;
}

.pagination-gap {
  min-width: 22px;
  color: var(--muted);
  text-align: center;
}

/* Shared live filtering: Studio and Administración reuse one loading and fallback contract. */
[data-live-filter-root] {
  position: relative;
}

[data-live-filter-root].is-live-filter [data-live-filter-submit] {
  display: none;
}

[data-live-filter-region="results"] {
  position: relative;
  transition: opacity var(--ui-fast) ease;
}

[data-live-filter-root].is-filter-loading {
  cursor: progress;
}

[data-live-filter-root].is-filter-loading [data-live-filter-region="results"] {
  opacity: .58;
  pointer-events: none;
}

[data-live-filter-root].is-filter-loading [data-live-filter-region="results"]::before {
  content: "";
  position: absolute;
  z-index: 40;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0 28%, var(--ui-accent-content) 48%, transparent 70% 100%);
  background-repeat: no-repeat;
  background-size: 38% 100%;
  animation: live-filter-progress .9s linear infinite;
}

@keyframes live-filter-progress {
  from { background-position: -62% 0; }
  to { background-position: 162% 0; }
}

@media (max-width: 1250px) {
  .studio-admin-filter-form {
    grid-template-columns: minmax(220px, 1.4fr) minmax(150px, 1fr) minmax(150px, 1fr);
  }

  .studio-admin-filter-sort { grid-column: span 2; }
  .studio-admin-filter-actions { justify-content: flex-end; }
}

@media (max-width: 760px) {
  body.shell-body.area-admin .studio-admin-query {
    padding: 9px !important;
  }

  .studio-admin-filter-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .studio-admin-filter-sort { grid-column: auto; }
  .studio-admin-filter-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .studio-admin-filter-actions .button { width: 100%; }

  .studio-admin-status-filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .studio-admin-status-filters a {
    width: 100%;
    justify-content: space-between;
  }

  .studio-admin-pagination-bar {
    padding: 12px;
    align-items: flex-start;
    flex-direction: column;
  }

  .studio-admin-pagination {
    width: 100%;
    justify-content: flex-start;
  }

  .studio-admin-result-page { font-size:var(--type-caption); }
}

@media (prefers-reduced-motion: reduce) {
  .studio-admin-status-filters a { transition: none; }
  [data-live-filter-region="results"] { transition: none; }
  [data-live-filter-root].is-filter-loading [data-live-filter-region="results"]::before {
    animation: none;
    background-position: center;
  }
}

/* Renewal priority: keep the complete label on one line and center its date
 * underneath at every supported text scale. */
#renewals-table td:first-child .table-name {
  justify-items: center;
  text-align: center;
}

#renewals-table td:first-child .table-name > .ui-status-label {
  width: max-content !important;
  max-width: 100% !important;
  white-space: nowrap !important;
}

#renewals-table td:first-child .table-name > small {
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 480px) {
  .public-body:not(.auth-body) .public-header {
    flex-wrap: nowrap !important;
  }
  .public-body.landing-home .public-header {
    height: auto !important;
    flex-wrap: wrap !important;
  }
  .public-body.landing-home .public-header .header-actions .button.primary {
    width: auto !important;
  }
  .public-body:not(.auth-body) .header-actions {
    display: flex !important;
    grid-template-columns: none !important;
    width: auto !important;
    flex-wrap: nowrap !important;
  }
  .public-header .brand::after { font-size:var(--type-subtitle); }
  .public-header .header-actions .button.primary { padding-inline: 10px; font-size:var(--type-caption); }
  .landing-hero-copy h1 { font-size:var(--type-display) !important; }
  .public-body .public-studio-categories { grid-template-columns: minmax(0, 1fr); }
  .public-body .plans-hero-notes { display: grid; }
  .public-body .auth-result-card { width: calc(100vw - 28px); }

  .public-body .auth-header,
  .admin-auth-body .admin-auth-header {
    min-height: 64px;
    height: auto;
    padding: 7px 9px !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .public-body .auth-header .brand,
  .admin-auth-body .admin-auth-header .brand { margin-right: auto; }

  .public-body .auth-header .brand img,
  .admin-auth-body .admin-auth-header .brand img { width: 108px; }

  .public-body .auth-header .auth-header-actions,
  .admin-auth-body .admin-auth-header .header-actions {
    display: flex !important;
    width: auto !important;
    flex: 0 1 auto;
    gap: 5px !important;
  }

  .public-body .auth-header .auth-header-actions .button,
  .admin-auth-body .admin-auth-header .header-actions .button {
    width: auto !important;
    min-width: 0;
    padding-inline: 9px;
    font-size:var(--type-caption);
  }

  .public-body .auth-header .auth-header-actions .icon-button,
  .admin-auth-body .admin-auth-header .header-actions .icon-button {
    width: 44px;
    min-width: 44px;
  }

  .public-body .public-header .icon-button {
    width: 44px !important;
    min-width: 44px !important;
    height: 44px !important;
  }

  .shell-body .topbar { padding-inline: 8px !important; column-gap: 8px !important; }
  .shell-body .top-actions { gap: 4px; }
  .shell-body.area-studio .studio-filter-options { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

@media (max-width: 390px) {
  .admin-auth-body .admin-auth-header .brand { min-height: 44px; }
  .admin-auth-body .admin-auth-header .header-actions .button {
    padding-inline: 6px;
    font-size:var(--type-caption);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/*
 * Compact form focus contract.
 * The control border and one soft outer ring communicate focus without the
 * former stacked border + shadow + outline that made fields look oversized.
 */
:where(
  .field input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  .field select,
  .field textarea,
  .form-control,
  .password-control,
  .data-control,
  .filter-control,
  .inventory-filter-group select,
  .studio-filter-options select
):is(:focus, :focus-visible, :focus-within) {
  border-color: var(--ui-focus-edge) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Search never gains extra luminosity after the pointer leaves a focused field. */
body.shell-body :is(.search-field, .studio-filter-search, .bloc-search):is(:focus, :focus-visible, :focus-within) {
  border-color: var(--ui-query-focus-edge) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: var(--ui-query-shadow) !important;
}

/* Composite controls paint focus on their outer frame, never on the inner input. */
.field > :is(.search-field, .password-control, .studio-filter-search, .bloc-search)
  > :where(input, select, textarea):is(:focus, :focus-visible),
:is(.search-field, .password-control, .studio-filter-search, .bloc-search)
  > :where(input, select, textarea):is(:focus, :focus-visible) {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Validation replaces the contextual accent with the semantic error signal. */
.field.is-invalid > :is(input, select, textarea, .password-control):is(:focus, :focus-visible, :focus-within),
.field > :is(input, select, textarea)[aria-invalid="true"]:is(:focus, :focus-visible, :focus-within),
.field > .password-control:has(input[aria-invalid="true"]):focus-within,
.field > :is(input, select, textarea):user-invalid:is(:focus, :focus-visible, :focus-within) {
  border-color: var(--danger) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow:
    0 0 0 var(--ui-form-focus-width) color-mix(in srgb, var(--danger) 18%, transparent) !important;
}

/* Native compact inputs and proxy controls retain one keyboard-visible ring. */
:where(
  input[type="checkbox"],
  input[type="radio"],
  input[type="range"],
  input[type="color"]
):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--ui-accent-content) 64%, transparent) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}

:where(
  .theme-choice input:focus-visible + span,
  .plan-access-option input:focus-visible + span,
  .platform-choice > input:focus-visible + .platform-choice-card,
  .period-feature-radio input:focus-visible + span,
  .period-option input:focus-visible + span,
  .studio-favorite-filter input:focus-visible + span,
  .switch input:focus-visible + i
) {
  border-color: var(--ui-accent-content) !important;
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: 0 0 0 var(--ui-form-focus-width) var(--ui-form-focus-color) !important;
}

:where(
  .confirmation-check:has(input:focus-visible),
  .plan-choice:has(> input:focus-visible)
) {
  border-color: var(--ui-accent-content) !important;
  outline: none !important;
  box-shadow: 0 0 0 var(--ui-form-focus-width) var(--ui-form-focus-color) !important;
}

/* Nexo hierarchy normalization --------------------------------------------
 * Secondary query bars remain quiet beside first-level module cards. Pointer
 * focus keeps a calm edge; keyboard focus receives the only visible ring. */
body.shell-body .surface-toolbar {
  border-color: var(--ui-edge) !important;
  background: var(--ui-surface) !important;
  box-shadow: none !important;
}

body.shell-body :is(.search-field, .studio-filter-search, .bloc-search):focus-within {
  border-color: var(--ui-query-edge-hover) !important;
  outline: none !important;
  box-shadow: none !important;
}

body.shell-body :is(.search-field, .studio-filter-search, .bloc-search):has(> input:focus-visible) {
  border-color: var(--ui-focus-edge) !important;
  outline: 1px solid var(--ui-form-focus-color) !important;
  outline-offset: 1px !important;
  box-shadow: none !important;
}

body:is(.shell-body, .public-body) :where(
  .field input,
  .field select,
  .field textarea,
  .password-control,
  .data-control,
  .filter-control
):is(:focus, :focus-within) {
  box-shadow: none !important;
}

body:is(.shell-body, .public-body) :where(
  .field input,
  .field select,
  .field textarea,
  .password-control,
  .data-control,
  .filter-control
):focus-visible {
  outline: 1px solid var(--ui-form-focus-color) !important;
  outline-offset: 1px !important;
}

@media (max-width: 760px) {
  .shell-body .mobile-record-summary-secondary { font-size:var(--type-caption); }
  .shell-body .mobile-record-summary-date { font-size:var(--type-caption); }
  .shell-body .mobile-record-fact dt { font-size:var(--type-caption); }
  .shell-body .mobile-record-fact dd { font-size:var(--type-caption); }
  .shell-body .mobile-record-summary-primary .coverage-inline-danger { font-size:var(--type-caption); }
}

/* Renewal reminders: the action stays in the WhatsApp/success treatment.
 * Pending work is communicated by a small warning marker, not by recoloring
 * the whole control. This keeps the channel recognizable at a glance. */
.shell-body .renewal-reminder-form .button.whatsapp-action:not(.is-sent) {
  color: var(--success) !important;
  border-color: color-mix(in srgb, var(--success) 42%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--success) 8%, var(--ui-surface-raised)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.shell-body .renewal-reminder-form .button.whatsapp-action:not(.is-sent) > .icon,
.shell-body .renewal-reminder-form .button.whatsapp-action.is-sent > .icon {
  color: var(--whatsapp-brand, #25d366) !important;
}

.shell-body .renewal-reminder-form .reminder-pending-indicator {
  display: inline-flex;
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  align-items: center;
  justify-content: center;
  color: var(--semantic-warning-strong, var(--warning, #f59e0b));
}

.shell-body .renewal-reminder-form .reminder-pending-indicator > .icon {
  width: 12px;
  height: 12px;
  color: currentColor !important;
  stroke-width: 1.8;
}

.shell-body .renewal-reminder-form .button.whatsapp-action:not(.is-sent):hover,
.shell-body .renewal-reminder-form .button.whatsapp-action:not(.is-sent):focus-visible {
  color: var(--success) !important;
  border-color: color-mix(in srgb, var(--success) 64%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--success) 14%, var(--ui-surface-raised)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--success) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

.shell-body .renewal-reminder-form .button.whatsapp-action.is-sent {
  color: var(--success) !important;
  border-color: color-mix(in srgb, var(--success) 42%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--success) 8%, var(--ui-surface-raised)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045) !important;
}

.shell-body .renewal-reminder-form .button.whatsapp-action.is-sent:hover,
.shell-body .renewal-reminder-form .button.whatsapp-action.is-sent:focus-visible {
  color: var(--success) !important;
  border-color: color-mix(in srgb, var(--success) 64%, var(--ui-edge)) !important;
  background: color-mix(in srgb, var(--success) 14%, var(--ui-surface-raised)) !important;
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--success) 10%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .055) !important;
}

.shell-body .renewal-reminder-modal-card {
  width: min(560px, calc(100vw - 32px));
}

.shell-body .renewal-reminder-modal-card .modal-body {
  display: grid;
  gap: 14px;
}

.shell-body .renewal-reminder-recipient,
.shell-body .renewal-reminder-context,
.shell-body .renewal-reminder-message-wrap {
  border: 1px solid var(--ui-edge);
  border-radius: var(--ui-radius-card, 12px);
  background: var(--ui-surface-raised);
}

.shell-body .renewal-reminder-recipient {
  display: flex;
  min-height: 62px;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.shell-body .renewal-reminder-recipient .table-avatar {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
}

.shell-body .renewal-reminder-recipient strong,
.shell-body .renewal-reminder-recipient small,
.shell-body .renewal-reminder-context strong,
.shell-body .renewal-reminder-context-copy > span {
  display: block;
}

.shell-body .renewal-reminder-recipient strong,
.shell-body .renewal-reminder-context strong {
  overflow: hidden;
  color: var(--text-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.shell-body .renewal-reminder-recipient small,
.shell-body .renewal-reminder-context-copy > span {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: var(--type-caption);
}

.shell-body .renewal-reminder-context {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.shell-body .renewal-reminder-platform-logo {
  display: inline-grid;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  place-items: center;
}

.shell-body .renewal-reminder-platform-logo .platform-logo {
  width: 42px;
  height: 42px;
  border-radius: 12px;
}

.shell-body .renewal-reminder-platform-fallback {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--cyan) 34%, var(--ui-edge));
  border-radius: 12px;
  background: color-mix(in srgb, var(--cyan) 10%, var(--ui-surface));
  color: var(--cyan);
  font-weight: 800;
}

.shell-body .renewal-reminder-context-copy {
  min-width: 0;
}

.shell-body .renewal-reminder-context small,
.shell-body .renewal-reminder-section-label {
  color: var(--text-muted);
  font-family: var(--font-mono, monospace);
  font-size: var(--type-caption);
  font-weight: 700;
  letter-spacing: .08em;
}

.shell-body .renewal-reminder-message-wrap {
  padding: 12px 14px;
}

.shell-body .renewal-reminder-message-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.shell-body .renewal-reminder-section-label {
  margin: 0;
}

.shell-body .renewal-reminder-message-edit-status {
  color: var(--text-muted);
  font-size: var(--type-caption);
  white-space: nowrap;
}

.shell-body .renewal-reminder-message {
  display: block;
  width: 100%;
  box-sizing: border-box;
  height: 156px;
  min-height: 156px;
  max-height: 600px;
  overflow: auto;
  resize: vertical;
  padding: 11px 12px;
  border: 1px solid color-mix(in srgb, var(--ui-edge) 74%, transparent);
  border-radius: 10px;
  background: var(--ui-surface);
  color: var(--text-body);
  font-size: var(--type-ui);
  line-height: 1.5;
  font-family: var(--font, sans-serif);
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.shell-body .renewal-reminder-message:focus {
  border-color: color-mix(in srgb, var(--cyan) 58%, var(--ui-edge));
  background: color-mix(in srgb, var(--cyan) 5%, var(--ui-surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cyan) 12%, transparent);
  outline: none;
}

.shell-body .renewal-reminder-message-resize-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 8px;
}

.shell-body .renewal-reminder-message-auto-expand {
  min-width: 0;
  min-height: 42px;
  height: 42px;
  max-width: 100%;
  gap: 7px;
  padding-inline: 16px;
  white-space: nowrap;
}

.shell-body .renewal-reminder-message-expand-icon {
  display: inline-flex;
  flex: none;
}

.shell-body .renewal-reminder-message-expand-icon[hidden] {
  display: none;
}

.shell-body .renewal-reminder-message-auto-expand[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--cyan) 44%, var(--ui-edge));
  background: color-mix(in srgb, var(--cyan) 8%, var(--ui-surface));
  color: var(--cyan);
}

.shell-body .renewal-reminder-note {
  margin: 0;
  align-items: flex-start;
  line-height: 1.45;
}

.shell-body .renewal-reminder-modal-card .form-actions {
  margin-top: 2px;
}

@media (max-width: 520px) {
  .shell-body .renewal-reminder-message-label-row {
    align-items: stretch;
    flex-direction: column;
    gap: 6px;
  }

  .shell-body .renewal-reminder-message-edit-status {
    white-space: normal;
  }

  .shell-body .renewal-reminder-message-resize-controls {
    margin-top: 7px;
  }

  .shell-body .renewal-reminder-message-auto-expand {
    width: 100%;
    padding-inline: 13px;
  }

  .shell-body .renewal-reminder-modal-card .form-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shell-body .renewal-reminder-modal-card .form-actions .button {
    width: 100%;
    min-width: 0;
  }
}

/* Peru-only phone control: the country code is fixed and the editable area
 * remains the familiar nine-digit national number. */
.peru-phone-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  width: 100%;
  min-height: 46px;
  overflow: hidden;
  border: 1px solid var(--ui-form-edge, var(--ui-edge));
  border-radius: var(--ui-radius-control, 12px);
  background: var(--ui-form-surface, var(--ui-control));
  box-shadow: var(--ui-form-shadow, none);
  transition: border-color var(--ui-fast) ease, background-color var(--ui-fast) ease;
}

.peru-phone-prefix {
  display: inline-flex;
  min-width: 84px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-inline: 12px;
  border-right: 1px solid var(--ui-form-edge, var(--ui-edge));
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface-raised));
  color: var(--text);
  white-space: nowrap;
  user-select: none;
}

.peru-phone-prefix b {
  display: inline-grid;
  min-width: 26px;
  min-height: 22px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--ui-accent-content) 34%, var(--ui-edge));
  border-radius: 6px;
  color: var(--ui-accent-content);
  font:750 var(--type-caption)/1 var(--font);
  letter-spacing: .06em;
}

.peru-phone-prefix span {
  font:700 var(--type-caption)/1 var(--mono);
  letter-spacing: .015em;
}

.field .peru-phone-control > input[data-peru-phone] {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  outline: 0 !important;
  outline-offset: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}

/* Yape and Plin already establish the Peruvian context, so their editable
 * control uses the national number without repeating a visible country code. */
.field > input.wallet-local-phone[data-peru-phone] {
  width: 100%;
  min-width: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: .025em;
}

.peru-phone-control:hover {
  border-color: var(--ui-form-edge-hover, var(--ui-edge-strong));
}

.peru-phone-control:focus-within {
  border-color: var(--ui-focus-edge) !important;
}

.peru-phone-control:has(> input:focus-visible) {
  outline: 1px solid var(--ui-form-focus-color) !important;
  outline-offset: 1px !important;
}

.field.is-invalid > .peru-phone-control,
.peru-phone-control:has(> input[aria-invalid="true"]) {
  border-color: var(--danger) !important;
}

.field.is-invalid > .peru-phone-control:focus-within,
.peru-phone-control:has(> input[aria-invalid="true"]:focus-visible) {
  outline-color: color-mix(in srgb, var(--danger) 52%, transparent) !important;
}

.field.is-valid > .peru-phone-control {
  border-color: color-mix(in srgb, var(--success) 46%, var(--ui-form-edge)) !important;
}

.auth-form-panel .peru-phone-control {
  min-height: 48px;
}

@media (max-width: 620px) {
  .peru-phone-prefix {
    min-width: 78px;
    gap: 7px;
    padding-inline: 10px;
  }

  .field .peru-phone-control > input[data-peru-phone] {
    font-size:var(--type-body) !important;
  }

  .field > input.wallet-local-phone[data-peru-phone] {
    font-size:var(--type-body) !important;
  }
}


/* Renewal mobile enhancements: priority tag beside platform name & outside Avisar button */
.renewal-platform-priority {
  display: none !important;
}

@media (max-width: 760px) {
  .renewal-platform-priority {
    display: inline-flex !important;
    flex: 0 0 auto;
    min-width: max-content;
    margin-left: 6px;
    font-size: var(--type-caption) !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    height: 20px !important;
    line-height: 1 !important;
    vertical-align: middle;
    border-radius: 999px !important;
    letter-spacing: normal !important;
  }

  .shell-body .mobile-record-summary-primary .service-platform-title {
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    min-width: 0;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .shell-body .mobile-record-summary-primary .service-platform-title > strong {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .shell-body .mobile-record-summary-signal {
    max-width: 100% !important;
  }

  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-action) {
    grid-template-columns: minmax(0, 1fr) auto auto 44px !important;
    column-gap: 8px !important;
    padding: 10px 10px 10px 12px !important;
    min-height: 72px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) :is(.mobile-record-summary-primary, .mobile-record-summary-secondary) {
    grid-column: 1 !important;
    max-width: 100% !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-status {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 2px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-status .badge {
    padding: 3px 8px !important;
    font-size: var(--type-caption) !important;
  }

  .shell-body .mobile-record-summary-action {
    grid-column: 3 !important;
    grid-row: 1 / 3 !important;
    align-self: center !important;
    justify-self: center !important;
    display: flex !important;
    align-items: center !important;
  }

  .shell-body .mobile-record-summary-action .renewal-reminder-form {
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
  }

  .shell-body .mobile-record-summary-action .button.whatsapp-action {
    min-height: 44px !important;
    height: 44px !important;
    min-width: 116px !important;
    padding: 0 12px !important;
    font-size: var(--type-ui) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: var(--ui-radius-control) !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .shell-body .mobile-record-summary-action .button.whatsapp-action > .icon {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-toggle {
    grid-column: 4 !important;
    grid-row: 1 / 3 !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    border-radius: var(--ui-radius-control) !important;
    align-self: center !important;
    justify-self: center !important;
  }

  .shell-body .data-table[data-mobile-records="true"] td[data-mobile-field="actions"] .renewal-reminder-form {
    display: none !important;
  }

  .shell-body #renewals-table tr[data-mobile-expanded="true"] .renewal-action-button,
  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] .renewal-action-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    justify-content: center !important;
    font-weight: 700 !important;
  }

  /* En renovaciones, las acciones operativas visibles comparten la fila. */
  .shell-body #renewals-table tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > .service-table-actions,
  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > .service-table-actions {
    --ui-mobile-action-columns: 2 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .shell-body #renewals-table tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > .service-table-actions > .renewal-action-button,
  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > .service-table-actions > .renewal-action-button {
    grid-column: auto !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

@media (min-width: 1251px) {
  .studio-admin-filter-form {
    grid-template-columns: minmax(260px, 1.35fr) repeat(5, minmax(120px, .72fr)) minmax(80px, .5fr) 62px auto;
  }
}

/* Keep mobile record controls stable when the user's text scale is enlarged. */
@media (max-width: 760px) {
  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-action) {
    grid-template-columns: minmax(0, 1fr) 138px 138px 44px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action,
  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action .renewal-reminder-form {
    width: 138px !important;
    min-width: 0 !important;
    max-width: 138px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .button.whatsapp-action {
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .button.whatsapp-action > [data-renewal-reminder-label] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 440px) {
  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell {
    column-gap: 10px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-status) .mobile-record-summary-status {
    width: 132px !important;
    max-width: 132px !important;
  }

  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-action) {
    grid-template-columns: minmax(0, 1fr) 132px 112px 44px !important;
    column-gap: 8px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action,
  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action .renewal-reminder-form {
    width: 112px !important;
    max-width: 112px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .button.whatsapp-action {
    padding-inline: 7px !important;
    gap: 5px !important;
    font-size: var(--type-caption) !important;
  }
}

/* Never hide meaningful mobile record text when the user increases the font. */
@media (max-width: 760px) {
  /* Keep the status/date column visually separated from the expand control. */
  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell {
    column-gap: 12px !important;
  }

  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-action) {
    column-gap: 10px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-status) .mobile-record-summary-status {
    width: 138px !important;
    max-width: 138px !important;
    justify-self: stretch !important;
  }

  .shell-body .mobile-record-summary-primary :is(.table-name strong, .service-platform-title strong, .inventory-account-name strong),
  .shell-body .mobile-record-summary-primary > strong,
  .shell-body .mobile-record-summary-secondary,
  .shell-body .mobile-record-summary-signal {
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
  }

  .shell-body .mobile-record-summary-status :is(.badge, .ui-status-label),
  .shell-body .mobile-record-summary-status:is(.badge, .ui-status-label) {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 30px !important;
    padding-inline: 6px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
    text-align: center;
  }

  .shell-body .mobile-record-summary-status > :is(.badge, .ui-status-label) {
    display: inline-flex !important;
    justify-content: center;
    white-space: nowrap !important;
  }

  .shell-body .mobile-record-summary-signal {
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
    text-align: center !important;
  }

  .shell-body .mobile-record-summary-status > .table-name {
    width: 100%;
    min-width: 0;
    display: grid !important;
    justify-items: center;
    align-content: center;
    gap: 4px;
  }

  .shell-body .mobile-record-summary-status > .table-name > small {
    display: block;
    width: 100%;
    min-width: 0;
    color: var(--muted);
    font-size: var(--type-caption);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .button.whatsapp-action > [data-renewal-reminder-label] {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }
}

/* Reserve a real spacer column so status/date never touches the expand control. */
@media (max-width: 760px) {
  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-status):not(:has(.mobile-record-summary-action)) {
    grid-template-columns: minmax(0, 1fr) 138px 14px 44px !important;
    column-gap: 0 !important;
  }

  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-status):not(:has(.mobile-record-summary-action)) .mobile-record-toggle {
    grid-column: 4 !important;
  }

  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-status):has(.mobile-record-summary-action) {
    grid-template-columns: minmax(0, 1fr) 138px 138px 14px 44px !important;
    column-gap: 0 !important;
  }

  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-status):has(.mobile-record-summary-action) .mobile-record-toggle {
    grid-column: 5 !important;
  }
}

@media (max-width: 440px) {
  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-status):not(:has(.mobile-record-summary-action)) {
    grid-template-columns: minmax(0, 1fr) 132px 14px 44px !important;
  }

  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-status):has(.mobile-record-summary-action) {
    grid-template-columns: minmax(0, 1fr) 132px 112px 14px 44px !important;
  }
}

/* Renewal reminder controls only need enough room for icon, label and focus. */
@media (max-width: 760px) {
  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-action) {
    grid-template-columns: minmax(0, 1fr) 138px 120px 14px 44px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action,
  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action .renewal-reminder-form,
  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action .button.whatsapp-action {
    width: 120px !important;
    min-width: 0 !important;
    max-width: 120px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action .button.whatsapp-action {
    padding-inline: 8px !important;
    gap: 6px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action {
    transform: translateX(6px);
  }
}

@media (max-width: 440px) {
  .shell-body .data-table[data-mobile-records="true"] .mobile-record-summary-cell:has(.mobile-record-summary-action) {
    grid-template-columns: minmax(0, 1fr) 132px 108px 14px 44px !important;
  }

  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action,
  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action .renewal-reminder-form,
  .shell-body .mobile-record-summary-cell:has(.mobile-record-summary-action) .mobile-record-summary-action .button.whatsapp-action {
    width: 108px !important;
    max-width: 108px !important;
  }
}

/* Header status badges stay content-sized on mobile; only buttons stretch. */
@media (max-width: 760px) {
  .shell-body .page-content > .page-head > :is(.badge, .ui-status-label) {
    width: max-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-self: flex-start !important;
  }
}

/* Renewal action: when a mobile record is expanded, Renovar gets its own full row. */
@media (max-width: 760px) {
  .shell-body #renewals-table tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > .service-table-actions > .renewal-action-button,
  .shell-body .data-table[data-mobile-records="true"] tr[data-mobile-expanded="true"] > td[data-mobile-field="actions"] > .service-table-actions > .renewal-action-button {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* Renovation dialog -------------------------------------------------------
 * The renewal flow is a sequence of decisions. Keep each decision compact,
 * but give it its own rhythm so the confirmation and actions never collide
 * with the scroll area on short screens. */
.shell-body #main-content .renewal-modal-card {
  width: min(600px, calc(100vw - 32px));
}

.shell-body #main-content .renewal-modal-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  padding: 16px 18px 18px;
}

.shell-body #main-content .renewal-modal-form > :is(.renewal-outage-context, .renewal-context, .renewal-coverage-check, .renewal-period-picker, .ui-dense-modal-grid, .confirmation-check, .renewal-submit-summary, .form-actions) {
  min-width: 0;
  margin-block: 0;
}

.shell-body #main-content .renewal-modal-form .renewal-outage-context {
  min-height: 58px;
  padding: 10px 11px;
  gap: 9px;
}

.shell-body #main-content .renewal-modal-form .renewal-context {
  min-height: 66px;
  padding: 10px 12px;
  gap: 10px;
}

.shell-body #main-content .renewal-modal-form .renewal-context > span {
  width: 34px;
  height: 34px;
}

.shell-body #main-content .renewal-modal-form .renewal-context strong,
.shell-body #main-content .renewal-modal-form .renewal-coverage-check strong {
  line-height: 1.35;
}

.shell-body #main-content .renewal-modal-form .renewal-context p {
  margin-top: 2px;
  line-height: 1.4;
}

.shell-body #main-content .renewal-modal-form .renewal-coverage-check {
  min-height: 58px;
  padding: 10px 12px;
  gap: 10px;
}

.shell-body #main-content .renewal-modal-form .renewal-coverage-check > svg {
  flex: 0 0 auto;
}

.shell-body #main-content .renewal-modal-form .renewal-coverage-check small {
  line-height: 1.4;
}

.shell-body #main-content .renewal-modal-form .renewal-period-picker legend {
  margin-bottom: 6px;
}

.shell-body #main-content .renewal-modal-form .renewal-period-picker > div {
  gap: 7px;
}

.shell-body #main-content .renewal-modal-form .renewal-period-picker button {
  min-height: 56px;
  padding: 7px 8px;
  line-height: 1.25;
}

.shell-body #main-content .renewal-modal-form .renewal-period-picker button small {
  line-height: 1.2;
}

.shell-body #main-content .renewal-modal-form .ui-dense-modal-grid {
  gap: 10px 12px;
}

.shell-body #main-content .renewal-modal-form .renewal-values-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.shell-body #main-content .renewal-modal-form .ui-dense-modal-grid .field {
  gap: 5px;
}

.shell-body #main-content .renewal-modal-form .ui-dense-modal-grid > .field > label {
  min-height: 24px;
  display: flex;
  align-items: center;
  margin: 0;
}

.shell-body #main-content .renewal-modal-form .ui-dense-modal-grid .field > :is(input, select) {
  min-height: 44px;
  height: 44px;
}

.shell-body #main-content .renewal-modal-form .ui-dense-modal-grid .field textarea {
  min-height: 72px;
  height: 72px;
}

.shell-body #main-content .renewal-modal-form .transaction-wallet-summary {
  min-height: 52px;
  padding: 7px 10px;
}

.shell-body #main-content .renewal-modal-form .confirmation-check {
  padding: 10px 11px;
}

.shell-body #main-content .renewal-modal-form .confirmation-check > span {
  gap: 9px;
}

.shell-body #main-content .renewal-modal-form .confirmation-check small,
.shell-body #main-content .renewal-modal-form .renewal-submit-summary strong {
  line-height: 1.4;
}

.shell-body #main-content .renewal-modal-form .renewal-submit-summary {
  min-height: 54px;
  padding: 9px 11px;
  gap: 9px;
}

.shell-body #main-content .renewal-modal-form .form-actions {
  position: static;
  display: flex;
  gap: 8px;
  margin: 2px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--ui-edge-soft);
  background: transparent;
  backdrop-filter: none;
}

.shell-body #main-content .renewal-modal-form .form-actions .button {
  min-height: 44px;
  flex: 1 1 0;
}

@media (max-width: 620px) {
  .shell-body #main-content .renewal-modal-card {
    width: min(100%, calc(100vw - 24px));
    max-height: calc(100svh - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
    border-radius: 16px !important;
  }

  .shell-body #main-content .renewal-modal-form {
    gap: 10px;
    padding: 14px 14px 16px;
  }

  .shell-body #main-content .renewal-modal-form .renewal-outage-context {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .shell-body #main-content .renewal-modal-form .renewal-outage-context .button {
    grid-column: 1 / -1;
    width: 100%;
  }

  .shell-body #main-content .renewal-modal-form .renewal-context,
  .shell-body #main-content .renewal-modal-form .renewal-coverage-check {
    padding: 9px 10px;
  }

  .shell-body #main-content .renewal-modal-form .renewal-period-picker > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .shell-body #main-content .renewal-modal-form .renewal-period-picker button {
    min-width: 0;
    min-height: 50px;
    padding: 7px 3px;
    font-size: var(--type-caption);
    line-height: 1.15;
  }

  .shell-body #main-content .renewal-modal-form .renewal-period-picker button small {
    font-size: var(--type-caption);
    line-height: 1.15;
    white-space: normal;
  }

  .shell-body #main-content .renewal-modal-form .ui-dense-modal-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px;
  }

  .shell-body #main-content .renewal-modal-form .ui-dense-modal-grid > .field.full {
    grid-column: auto !important;
  }

  .shell-body #main-content .renewal-modal-form .form-actions {
    gap: 8px;
    padding-top: 10px;
  }
}

@media (max-width: 420px) {
  .shell-body #main-content .renewal-modal-form .form-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Renewal payment and optional note share one compact row. */
.shell-body #main-content .renewal-modal-form .renewal-payment-note-row {
  grid-column: 1 / -1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
}

.shell-body #main-content .renewal-modal-form .renewal-payment-note-row > :is(.field, .renewal-note-toggle-wrap, .renewal-note-editor) {
  min-width: 0;
  margin: 0;
}

.shell-body #main-content .renewal-modal-form .renewal-payment-note-row .transaction-wallet-summary {
  width: 100%;
  min-width: 0;
}

.shell-body #main-content .renewal-modal-form .renewal-note-toggle-wrap {
  min-width: 0;
  min-height: 0;
  padding-top: 24px;
  display: flex;
  align-self: stretch;
  align-items: stretch;
  justify-content: center;
  box-sizing: border-box;
}

.shell-body #main-content .renewal-modal-form .renewal-note-toggle {
  width: 100%;
  max-width: none;
  min-height: 52px;
  height: 52px;
  margin: 0;
}

.shell-body #main-content .renewal-modal-form .renewal-note-toggle[aria-expanded="true"] .ui-aux-action-chevron {
  transform: rotate(180deg);
}

.shell-body #main-content .renewal-modal-form .renewal-note-editor {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.shell-body #main-content .renewal-modal-form .renewal-note-editor .field {
  min-width: 0;
  margin: 0;
}

@media (max-width: 620px) {
  .shell-body #main-content .renewal-modal-form .renewal-payment-note-row {
    gap: 8px;
  }

  .shell-body #main-content .renewal-modal-form .renewal-note-toggle-wrap {
    padding-top: 24px;
  }
}

@media (max-width: 620px) {
  .shell-body #main-content .renewal-modal-form .ui-dense-modal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 8px;
    row-gap: 10px;
  }

  .shell-body #main-content .renewal-modal-form .renewal-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 420px) {
  .shell-body #main-content .renewal-modal-form .renewal-values-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Searchable customer select: keep the query and results together in the popup. */
body.shell-body .ui-select-popover.is-searchable {
  padding: 8px;
}

body.shell-body .ui-select-popover.is-searchable .ui-select-search {
  display: grid;
  gap: 5px;
  margin-bottom: 3px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--ui-edge-soft);
}

body.shell-body .ui-select-popover.is-searchable .ui-select-search input {
  width: 100%;
  min-width: 0;
  height: 42px;
  min-height: 42px;
  padding: 0 11px;
  border: 1px solid var(--ui-edge);
  border-radius: var(--ui-radius-control);
  background: var(--ui-control);
  color: var(--text);
  font: 500 var(--type-ui) var(--font);
  outline: none;
  box-sizing: border-box;
}

body.shell-body .ui-select-popover.is-searchable .ui-select-search input::placeholder {
  color: var(--muted);
}

body.shell-body .ui-select-popover.is-searchable .ui-select-search input:focus {
  border-color: var(--ui-focus-edge, var(--ui-accent-content));
  box-shadow: 0 0 0 var(--ui-form-focus-width) var(--ui-form-focus-color);
}

body.shell-body .ui-select-popover.is-searchable .ui-select-search-status {
  padding: 0 2px;
  color: var(--muted);
  font-size: var(--type-caption);
  line-height: 1.25;
}

@media (max-width: 760px), (hover: none) and (pointer: coarse) {
  body.shell-body .ui-select-popover.is-searchable .ui-select-search input {
    height: 44px;
    min-height: 44px;
  }
}

/* Renewal coverage warning: show the full context from a compact, accessible indicator. */
body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-feedback] {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 0;
  margin: 0;
  line-height: 1.35;
}

body.shell-body #main-content .renewal-modal-form .renewal-end-label-row {
  position: relative;
  min-width: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
}

body.shell-body #main-content .renewal-modal-form .renewal-end-label-row > label {
  margin: 0;
}

body.shell-body #main-content .renewal-modal-form .renewal-end-label-row [data-renewal-coverage-feedback] {
  position: static;
  display: inline-flex;
  flex: 0 0 auto;
}

body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-feedback].is-warning {
  color: var(--warning);
}

body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-trigger] {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--warning);
  cursor: help;
  transition: color 160ms ease, transform 160ms ease;
}

body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-trigger]:hover {
  transform: scale(1.08);
}

body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-trigger]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--warning) 68%, transparent);
  outline-offset: 2px;
}

body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-message] {
  position: absolute;
  z-index: 5;
  left: 0;
  top: calc(100% + 5px);
  width: min(330px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--ui-edge));
  border-left: 2px solid var(--warning);
  border-radius: 0 8px 8px 8px;
  background: var(--ui-surface-raised, var(--ui-surface));
  color: var(--warning);
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}

body.shell-body #main-content .renewal-modal-form .renewal-end-label-row [data-renewal-coverage-feedback] {
  position: static;
}

body.shell-body #main-content .renewal-modal-form .renewal-end-label-row [data-renewal-coverage-message] {
  top: calc(100% + 53px);
}

body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-feedback].is-warning:hover [data-renewal-coverage-message],
body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-feedback].is-warning.is-expanded [data-renewal-coverage-message] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-feedback].is-invalid [data-renewal-coverage-message] {
  position: absolute;
  top: calc(100% + 53px);
  left: 0;
  display: block;
  color: var(--danger);
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
}

@media (max-width: 620px) {
  body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-trigger] {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
  }

  body.shell-body #main-content .renewal-modal-form [data-renewal-coverage-message] {
    max-width: min(290px, calc(100vw - 32px));
  }
}

/* Sale coverage warning: keep the form compact and reveal context on demand. */
body.shell-body #main-content .sale-modal-card .sale-end-date-field {
  position: relative;
  z-index: 2;
}

body.shell-body #main-content .sale-modal-card .sale-end-label-row {
  position: relative;
  min-width: 0;
  min-height: 24px;
  display: flex;
  align-items: center;
  gap: 5px;
}

body.shell-body #main-content .sale-modal-card .sale-end-label-row > label {
  margin: 0;
}

body.shell-body #main-content .sale-modal-card .sale-end-label-row [data-sale-coverage-feedback] {
  position: static;
  display: inline-flex;
  flex: 0 0 auto;
  min-height: 0;
  margin: 0;
  line-height: 1.35;
}

body.shell-body #main-content .sale-modal-card [data-sale-coverage-feedback].is-warning {
  color: var(--warning);
}

body.shell-body #main-content .sale-modal-card [data-sale-coverage-trigger] {
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--warning);
  cursor: help;
  transition: color 160ms ease, transform 160ms ease;
}

body.shell-body #main-content .sale-modal-card [data-sale-coverage-trigger]:hover {
  transform: scale(1.08);
}

body.shell-body #main-content .sale-modal-card [data-sale-coverage-trigger]:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--warning) 68%, transparent);
  outline-offset: 2px;
}

body.shell-body #main-content .sale-modal-card [data-sale-coverage-message] {
  position: absolute;
  z-index: 5;
  left: 0;
  top: calc(100% + 5px);
  width: min(330px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--warning) 34%, var(--ui-edge));
  border-left: 2px solid var(--warning);
  border-radius: 0 8px 8px 8px;
  background: var(--ui-surface-raised, var(--ui-surface));
  color: var(--warning);
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  pointer-events: none;
  transition: opacity 160ms ease, visibility 160ms ease, transform 160ms ease;
}

body.shell-body #main-content .sale-modal-card [data-sale-coverage-feedback].is-warning:hover [data-sale-coverage-message],
body.shell-body #main-content .sale-modal-card [data-sale-coverage-feedback].is-warning.is-expanded [data-sale-coverage-message] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

@media (max-width: 620px) {
  body.shell-body #main-content .sale-modal-card [data-sale-coverage-trigger] {
    width: 28px;
    min-width: 28px;
    height: 28px;
    min-height: 28px;
  }

  body.shell-body #main-content .sale-modal-card [data-sale-coverage-message] {
    left: auto;
    right: 0;
    max-width: min(290px, calc(100vw - 32px));
  }
}

/* Renewal choices remain a single compact row on phones. */
@media (max-width: 600px) {
  body.shell-body #main-content .renewal-modal-form .renewal-period-picker > div {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  body.shell-body #main-content .renewal-modal-form .renewal-period-picker button {
    min-width: 0;
    min-height: 50px;
    padding-inline: 4px;
  }
}

/* Nueva plantilla: preserve compact pairs and readable selection controls on mobile. */
@media (max-width: 760px) {
  .shell-body.area-admin .studio-editor-layout {
    gap: 10px;
  }

  .shell-body.area-admin .studio-editor-main {
    gap: 10px;
  }

  .shell-body.area-admin .studio-editor-panel > .panel-head {
    height: 56px;
    min-height: 56px;
    padding-inline: 14px;
  }

  .shell-body.area-admin .studio-editor-panel > .panel-body.form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px 8px;
    padding: 14px !important;
  }

  .shell-body.area-admin .studio-editor-panel > .panel-body.form-grid > .template-category-field {
    grid-column: 1 / -1;
  }

  .shell-body.area-admin .studio-editor-panel > .panel-body.form-grid > .template-dimension-field {
    grid-column: auto;
  }

  .shell-body.area-admin .studio-editor-panel .field-help {
    margin-top: 4px;
    line-height: 1.3;
  }

  .shell-body.area-admin .studio-media-grid[data-canva-preview-block] {
    gap: 12px !important;
  }

  .shell-body.area-admin .studio-media-fields {
    gap: 10px;
  }

  .shell-body.area-admin .publish-card .panel-head {
    height: 56px;
    min-height: 56px;
    padding-inline: 14px;
  }

  .shell-body.area-admin .publish-card .panel-body {
    gap: 10px;
    padding: 14px !important;
  }

  .shell-body.area-admin .publish-card .switch-row {
    min-height: 50px;
    padding-block: 8px;
  }

  .shell-body.area-admin .publish-actions {
    gap: 6px;
    padding: 10px;
  }
}

/* The editor selections are compact controls, placed beside the title instead of large cards. */
.shell-body.area-admin .studio-editor-identity-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(170px, .72fr) minmax(190px, .82fr);
  align-items: end;
  gap: 12px;
}
.shell-body.area-admin .studio-editor-identity-grid > .field {
  min-width: 0;
}
@media (max-width: 760px) {
  .shell-body.area-admin .studio-editor-identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }
  .shell-body.area-admin .studio-template-title-field {
    grid-column: 1 / -1;
  }
  .shell-body.area-admin .studio-template-select-field select {
    min-width: 0;
  }
}

@media (max-width: 360px) {
  .shell-body.area-admin .studio-editor-identity-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .shell-body.area-admin .studio-template-select-field {
    grid-column: 1 / -1;
  }
}

/* Nueva venta: Cuenta y Perfil permanecen emparejados en todos los anchos. */
body.shell-body #main-content .modal-body .form-grid.sale-service-grid.ui-dense-modal-grid > .field > label,
body.shell-body #main-content .modal-body .form-grid.sale-service-grid.ui-dense-modal-grid > .sale-scope-field > label {
  min-height: 24px;
  display: flex;
  align-items: center;
  margin: 0;
}

body.shell-body #main-content .modal-body .form-grid.sale-service-grid.ui-dense-modal-grid > .youtube-family-email-field {
  grid-column: auto !important;
}

/* Nueva cuenta: alinear las etiquetas simples con la misma altura compacta
 * del formulario de ventas; el encabezado del proveedor conserva su acción auxiliar. */
body.shell-body #main-content .account-builder-modal .modal-body .form-grid.ui-dense-modal-grid > .field > label {
  min-height: 24px;
  display: flex;
  align-items: center;
  margin: 0;
}

body.shell-body #main-content .sale-modal-card .sale-amount-field.is-price-locked .sale-price-input-wrap > [data-sale-price-input] {
  padding-right: 132px;
}

body.shell-body #main-content .sale-modal-card .sale-price-inline-action {
  top: 0;
  right: 0;
  height: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 0 9px 9px 0;
  transform: none;
}

body.shell-body #main-content .sale-modal-card .sale-price-inline-action:active {
  transform: scale(.98);
  transform-origin: right center;
}

@media (max-width: 760px) {
  body.shell-body #main-content .modal-body .form-grid.sale-service-grid.ui-dense-modal-grid--wide-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  body.shell-body #main-content .modal-body .form-grid.sale-service-grid.ui-dense-modal-grid--wide-fields > [data-sale-profile-field] {
    grid-column: auto !important;
  }
}

/* Tutorial editor: title, category and duration share one compact identity row. */
.shell-body.area-admin .tutorial-editor-identity-grid {
  grid-template-columns: minmax(0, 1.8fr) minmax(190px, .85fr) minmax(150px, .6fr);
}
.shell-body.area-admin .tutorial-format-select-field {
  margin-bottom: 18px;
}
.shell-body.area-admin .tutorial-format-select-field select {
  min-height: 44px;
}

@media (max-width: 760px) {
  .shell-body.area-admin .tutorial-editor-identity-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .shell-body.area-admin .tutorial-title-field {
    grid-column: 1 / -1;
  }
  .shell-body.area-admin .tutorial-format-select-field {
    margin-bottom: 14px;
  }
}

@media (max-width: 360px) {
  .shell-body.area-admin .tutorial-editor-identity-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .shell-body.area-admin .tutorial-category-field,
  .shell-body.area-admin .tutorial-duration-field {
    grid-column: 1 / -1;
  }
}

/* Global query bars: keep filters and operational counters together whenever
 * the available width can support them, and give the counter a clear visual
 * role instead of leaving it as loose helper text. */
body.shell-body .toolbar-meta {
  min-height: 36px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--ui-accent) 28%, var(--ui-edge));
  border-radius: 999px;
  background: color-mix(in srgb, var(--ui-accent) 7%, var(--ui-surface-raised));
  color: var(--text);
  font-size: var(--type-caption);
  font-weight: 650;
  line-height: 1.25;
}

body.shell-body .toolbar-meta strong {
  color: var(--ui-accent-content);
  font: 800 var(--type-label)/1 var(--font-mono, monospace);
  letter-spacing: -.01em;
}

@media (min-width: 481px) and (max-width: 760px) {
  body.shell-body .surface-toolbar:has(> .record-filter-controls) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
  }

  body.shell-body .surface-toolbar > .record-filter-controls {
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  body.shell-body .surface-toolbar > .record-filter-controls .search-field {
    width: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  body.shell-body .surface-toolbar > .record-filter-controls .record-filter-control {
    width: clamp(106px, 22vw, 132px) !important;
    min-width: 106px !important;
    flex: 0 1 132px !important;
  }

  body.shell-body .surface-toolbar > .toolbar-meta {
    width: auto !important;
    max-width: none !important;
    min-width: 0;
    justify-self: end;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  body.shell-body .surface-toolbar:has(> .record-filter-controls) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    row-gap: 8px !important;
  }

  body.shell-body .surface-toolbar > .record-filter-controls {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  body.shell-body .surface-toolbar > .record-filter-controls .search-field,
  body.shell-body .surface-toolbar > .record-filter-controls .record-filter-control {
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }

  body.shell-body .surface-toolbar > .toolbar-meta {
    grid-column: 1;
    width: fit-content !important;
    max-width: 100% !important;
    justify-self: start;
    white-space: normal;
  }
}

/* Keep the native corner handle available on every text area. Dedicated
 * expand/reduce controls remain the quick alternative for long messages. */
:where(.shell-body, .public-body, .admin-auth-body) textarea {
  resize: vertical !important;
}

/* Keep dense modal controls aligned even when one field has an auxiliary
 * action in its heading. The heading reserves the same vertical rhythm as
 * the compact action, while helper text remains below the control. */
body.shell-body #main-content .modal-body .form-grid.ui-dense-modal-grid > .field > :is(label, .field-label-row, .renewal-end-label-row) {
  min-height: 36px;
  box-sizing: border-box;
}

/* Dashboard renewal agenda: three priority records with a quiet full-list escape hatch. */
html body.shell-body.area-app .dashboard-agenda-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
  padding-top: 7px;
  border-top: 1px solid color-mix(in srgb, var(--dashboard-panel-accent) 10%, var(--ui-edge));
}

html body.shell-body.area-app .dashboard-agenda-view-all {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 8px;
  color: var(--muted);
  font-size: var(--type-caption);
  font-weight: 750;
  text-decoration: none;
  border-radius: 8px;
  transition: color .18s ease, background-color .18s ease;
}

html body.shell-body.area-app .dashboard-agenda-view-all:hover,
html body.shell-body.area-app .dashboard-agenda-view-all:focus-visible {
  color: var(--ui-cyan);
  background: color-mix(in srgb, var(--ui-cyan) 8%, transparent);
}

@media (max-width: 760px) {
  body.shell-body #main-content .modal-body .form-grid.ui-dense-modal-grid > .field > :is(label, .field-label-row, .renewal-end-label-row) {
    min-height: 44px;
  }
}

/* WhatsApp message editor: every flow uses one editable surface and one
 * background token, regardless of the module that opened the modal. */
body.shell-body .whatsapp-message-composer,
body.shell-body .renewal-reminder-message-wrap {
  background: var(--ui-control) !important;
}

body.shell-body :is(.whatsapp-message-editor, .renewal-reminder-message) {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border-color: var(--ui-edge) !important;
  background: var(--ui-control) !important;
  color: var(--text-body, var(--text)) !important;
  caret-color: var(--ui-accent-content, var(--cyan));
}

body.shell-body :is(.whatsapp-message-editor, .renewal-reminder-message):not([readonly]):hover {
  border-color: color-mix(in srgb, var(--ui-accent-content, var(--cyan)) 42%, var(--ui-edge)) !important;
}

body.shell-body :is(.whatsapp-message-editor, .renewal-reminder-message):focus {
  background: var(--ui-control) !important;
}

.whatsapp-message-label {
  display: block;
  margin: 9px 0 7px;
  color: var(--text-muted, var(--muted));
  font-size: var(--type-caption);
  font-weight: 700;
}

.whatsapp-message-helper {
  display: block;
  margin-top: 7px;
  color: var(--text-muted, var(--muted));
  font-size: var(--type-caption);
  line-height: 1.45;
}

.shell-body .provision-message-preview {
  background: var(--ui-control) !important;
}

.shell-body .provision-message-preview .whatsapp-message-editor {
  min-height: 170px;
  padding: 11px 12px;
  resize: vertical;
  font: 500 var(--type-caption) / 1.55 var(--mono);
}

.shell-body .delivery-message-label-row {
  align-items: baseline;
}

.shell-body .delivery-message-edit-status {
  color: var(--text-muted, var(--muted));
  font-size: var(--type-caption);
  white-space: nowrap;
}

.shell-body .delivery-message-field textarea.whatsapp-message-editor[readonly] {
  background: var(--ui-control) !important;
  color: var(--text-muted, var(--muted)) !important;
}

.shell-body .renewal-result-message .whatsapp-message-editor {
  min-height: 150px;
  height: 150px;
  resize: vertical;
}

/* Studio motion: reveal cards as they enter the viewport and softly settle after a density change. */
@media (prefers-reduced-motion: no-preference) {
  .shell-body.area-studio .studio-template-grid[data-motion-ready] > .studio-template-card {
    opacity: 0;
    translate: 0 14px;
    transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease, opacity .42s var(--ease-console), translate .42s var(--ease-console);
  }

  .shell-body.area-studio .studio-template-grid[data-motion-ready] > .studio-template-card.is-motion-visible {
    opacity: 1;
    translate: 0 0;
  }

  .shell-body.area-studio .studio-template-grid.is-density-changing > .studio-template-card.is-motion-visible {
    animation: studio-density-settle .32s var(--ease-console) both;
  }

  @keyframes studio-density-settle {
    from { opacity: .72; translate: 0 5px; }
    to { opacity: 1; translate: 0 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .shell-body.area-studio .studio-template-grid[data-motion-ready] > .studio-template-card {
    opacity: 1;
    translate: 0 0;
  }

  .shell-body.area-studio .studio-template-grid.is-density-changing > .studio-template-card {
    animation: none !important;
  }
}

@media (max-width: 620px) {
  .shell-body .delivery-message-label-row {
    align-items: stretch;
  }

  .shell-body .delivery-message-edit-status {
    white-space: normal;
  }
}