/* Selia Marketing · capa base de la aplicación sobre la guía de diseño.
   Se carga la última (después de tokens.css y selia-ui.css). Todo lo que pinta la app sale de los
   tokens de live/ui/tokens.css y vale igual en claro y en oscuro. Las hojas heredadas (styles.css,
   pages-*.css, analytics.css, live/skin.css…) ya usan estos tokens con el valor antiguo solo como
   respaldo; aquí se alinean el aspecto y la estructura con SidebarNav, Button, Card, Chip, Table,
   TextField y Modal de la guía. Cada página que se rehaga puede ir quitando reglas de aquí. */

/* ==========================================================================
   1. Variables heredadas → tokens
   (--ink y --border ya son tokens: tokens.css se carga después de las hojas heredadas)
   ========================================================================== */
:root {
  --bg: var(--surface-page); --surface: var(--surface-card); --muted: var(--ink-muted); --faint: var(--surface-muted);
  --blue: var(--accent); --blue-dark: var(--accent-strong); --blue-soft: var(--accent-soft); --navy: var(--ink);
  --green: var(--positive-ink); --green-soft: var(--positive-soft); --amber: var(--caution-ink); --amber-soft: var(--caution-soft);
  --red: var(--danger-ink); --red-soft: var(--danger-soft); --focus: var(--focus-ring); --shadow: none;
  --mint: var(--positive-soft); --lavender: var(--info-soft); --sand: var(--caution-soft);
  --radius: var(--radius-md); --sidebar: var(--sidebar-width);
}

/* ==========================================================================
   2. Base
   ========================================================================== */
html { scroll-behavior: auto; }
body {
  margin: 0; background: var(--surface-page); color: var(--ink);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500; line-height: 1.55;
}
::selection { background: var(--accent-soft); color: var(--accent-strong); }
button, input, select, textarea { font-family: inherit; }
a { color: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
summary:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
* { scrollbar-color: var(--border-strong) transparent; }
.skip-link { background: var(--surface-card); color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-weight: 700; }
h1, h2, h3, h4 { color: var(--ink); }
strong, b { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Tipografía de página */
h1 { font-size: 36px; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 8px; }
.page-heading p { font-size: 14px; line-height: 1.55; font-weight: 500; color: var(--ink-secondary); max-width: 760px; margin: 0; }
.eyebrow { color: var(--ink-muted); text-transform: uppercase; }
@media (max-width: 760px) { h1 { font-size: 30px; } body { font-size: 14px; } }

/* ==========================================================================
   3. Estructura: barra lateral + contenido
   ========================================================================== */
.sidebar {
  width: var(--sidebar-width); padding: 24px var(--space-4) var(--space-5);
  background: var(--surface-card); border-right: 1px solid var(--border); overflow: hidden; z-index: 30;
}
.brand { gap: var(--space-3); padding: 0 var(--space-3); margin: 0 0 var(--space-6); align-items: center; }
.brand .sm-sidebar__symbol { flex: none; width: 32px; height: 32px; object-fit: contain; }
.brand .sm-sidebar__wordmark { margin: 0; }

.workspace-switch {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; min-height: var(--control-height); margin: 0 0 var(--space-5);
  padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface-sunken); color: var(--ink); font-size: 13px; font-weight: 700; text-align: left;
  transition: background-color .14s ease, border-color .14s ease;
}
.workspace-switch:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.workspace-switch small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; color: var(--ink-muted); }
.workspace-icon {
  display: inline-grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--surface-card); border: 1px solid var(--border); color: var(--accent-strong); font-size: 0;
}

.sidebar nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: -4px; padding: 4px; scrollbar-width: none; }
.nav-label {
  margin: 0 var(--space-3) var(--space-2); font-size: 11px; line-height: 1.3; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted);
}
.nav-label.spaced { margin-top: var(--space-5); }
.nav-item {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; height: auto; min-height: var(--control-height); margin: 2px 0;
  padding: 0 var(--space-3); border-radius: var(--radius-sm); background: transparent; box-shadow: none;
  color: var(--ink-secondary); font-size: 14px; font-weight: 600; line-height: 1.3; text-align: left; text-decoration: none;
  transition: background-color .14s ease, color .14s ease;
}
.nav-item:hover { background: var(--surface-hover); color: var(--ink); }
.nav-item.active, .nav-item[aria-current="page"] { background: var(--accent-soft); color: var(--accent-strong); font-weight: 700; box-shadow: none; border: 0; }
.nav-item.active:hover, .nav-item[aria-current="page"]:hover { background: var(--accent-soft); color: var(--accent-pressed); }
/* Pantallas en beta (solo Dirección, menu-model.js › BETA): etiqueta a la derecha del nombre. */
.nav-beta {
  margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong);
  font-size: 10px; font-weight: 700; letter-spacing: .4px; line-height: 16px; text-transform: uppercase;
}
.nav-item.active .nav-beta, .nav-item[aria-current="page"] .nav-beta { background: var(--surface, #fff); }
.live-nav-symbol { display: flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; }
.live-nav-symbol svg { width: 20px; height: 20px; }

.sidebar-bottom { background: transparent; padding-top: var(--space-4); }
.demo-note { padding: var(--space-2) var(--space-3) var(--space-3); font-size: 12px; font-weight: 700; color: var(--ink-secondary); }
.demo-note small { display: block; margin-top: 2px; font-size: 12px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); }
.demo-dot { background: var(--positive-ink); }
.profile {
  display: flex; align-items: center; gap: var(--space-3); width: 100%; margin: 0 0 var(--space-3); padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-sunken); color: inherit; text-align: left;
  transition: background-color .14s ease, border-color .14s ease;
}
.profile:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--border-strong); }
.profile > span:last-child { min-width: 0; }
.profile strong { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.profile small { display: block; font-size: 13px; font-weight: 500; line-height: 1.35; color: var(--ink-muted); }
.avatar { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; font-size: 13px; font-weight: 700; border: 0; }
.avatar-blue { background: var(--accent-soft); color: var(--accent-strong); }
.sidebar-scrim { display: none; }
.sidebar-scrim.open { display: block; position: fixed; inset: 0; z-index: 25; background: var(--scrim); }

.shell { margin-left: var(--sidebar-width); min-width: 0; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 72px; padding: 0 var(--space-7);
  background: color-mix(in srgb, var(--surface-card) 94%, transparent); border-bottom: 1px solid var(--border);
  backdrop-filter: saturate(1.2) blur(8px);
}
.breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 600; min-width: 0; }
.breadcrumb-parent { color: var(--ink-muted); }
.breadcrumb strong { font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breadcrumb-sep { flex: none; color: var(--ink-muted); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }
main { max-width: var(--content-max); margin: 0 auto; padding: var(--space-6) var(--space-7) 0; }
.page-heading { align-items: flex-end; gap: var(--space-5); margin-bottom: var(--space-6); }

@media (max-width: 760px) {
  .sidebar { width: min(86vw, var(--sidebar-width)); padding: 24px var(--space-4) var(--space-5); box-shadow: var(--shadow-modal); }
  .sidebar:not(.open) { box-shadow: none; }
  .shell { margin-left: 0; }
  .topbar { height: 64px; padding: 0 var(--space-4); gap: var(--space-2); }
  .breadcrumb-parent, .breadcrumb-sep { display: none; }
  .topbar-actions { gap: var(--space-2); }
  .topbar-actions > .secondary { display: none; }
  .topbar #breadcrumb { display: none; }
  main { padding: var(--space-5) var(--space-4) 0; }
  .page-heading { align-items: flex-start; margin-bottom: var(--space-5); }
}
.icon-button.mobile-menu { display: none; }
@media (max-width: 760px) { .icon-button.mobile-menu { display: inline-flex; } }

/* ==========================================================================
   4. Botones (Button: sm-btn)
   ========================================================================== */
.button, .icon-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control-height); padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--ink); box-shadow: none;
  font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: none; }
.button.primary:hover:not(:disabled) { background: var(--accent-strong); border-color: var(--accent-strong); }
.button.primary:active:not(:disabled) { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.button.secondary, .icon-button { background: var(--surface-card); border-color: var(--border-strong); color: var(--ink-secondary); }
.button.secondary:hover:not(:disabled), .icon-button:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
.button.secondary:active:not(:disabled), .icon-button:active:not(:disabled) { background: var(--surface-muted); color: var(--ink); }
.button:disabled, .icon-button:disabled, .button[aria-disabled="true"] {
  background: var(--surface-muted); border-color: var(--border); color: var(--ink-muted); opacity: 1; cursor: not-allowed;
}
.icon-button { width: var(--control-height); min-width: var(--control-height); padding: 0; font-size: 20px; line-height: 1; }
.icon-button svg { width: 20px; height: 20px; }
.dialog-top .icon-button { background: transparent; border-color: transparent; color: var(--ink-secondary); }
.dialog-top .icon-button:hover:not(:disabled) { background: var(--surface-hover); color: var(--ink); }
.text-button {
  display: inline; min-height: 0; padding: 0; background: none; border: 0; color: var(--accent-strong);
  font-size: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.text-button:hover:not(:disabled) { color: var(--accent-pressed); }
.text-button:disabled { color: var(--ink-muted); cursor: not-allowed; }
.live-work-actions .text-button, .live-app-foot .text-button { min-height: var(--control-height); display: inline-flex; align-items: center; }
@media (max-width: 760px) {
  .topbar .button { padding: 0 12px; font-size: 13px; }
}

/* ==========================================================================
   5. Tarjetas, avisos, vacíos y errores
   ========================================================================== */
.card { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: none; color: var(--ink); }
.card h2, .live-auth-card h2, .live-work-card h2 { font-size: 19px; line-height: 1.3; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.card-head { padding: var(--space-5) var(--space-5) var(--space-4); }
.card-head p, .live-source-note, .live-plans, .live-note-box { font-size: 14px; line-height: 1.55; font-weight: 500; color: var(--ink-muted); }
.live-note-box { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); }
.live-empty {
  padding: var(--space-7) var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg);
  background: var(--surface-card); color: var(--ink); box-shadow: none;
}
.live-empty h2 { font-size: 19px; line-height: 1.3; font-weight: 800; color: var(--ink); }
.live-empty p { font-size: 14px; line-height: 1.55; color: var(--ink-muted); }
.live-error {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border: 1px solid var(--danger-ink); border-radius: var(--radius-md); background: var(--danger-soft); color: var(--danger-ink);
  font-size: 14px; font-weight: 600; line-height: 1.5;
}
.live-error .text-button, .live-error .button { color: var(--danger-ink); }
.live-inline-error:not(:empty) { background: var(--danger-soft); color: var(--danger-ink); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.live-progress:not(:empty) { background: var(--info-soft); color: var(--info-ink); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; }
.live-status { font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.live-app-foot { font-size: 13px; color: var(--ink-muted); }
.live-app-foot a { color: var(--accent-strong); font-weight: 700; }
.live-provider-grid .live-auth-card { border-top: 1px solid var(--border); }

/* Indicadores sueltos de las páginas heredadas: tarjeta con borde, sin tinte ni rayas de color */
.live-kpi-grid > div { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.live-kpi-grid > div:nth-child(n) { background: var(--surface-card); border-color: var(--border); }
.live-kpi-grid > div:after, .live-kpi-grid > div:nth-child(n):after { display: none; }
.live-kpi-grid small { font-size: 13px; font-weight: 700; color: var(--ink-secondary); }
.live-kpi-grid strong { font-size: 24px; font-weight: 800; letter-spacing: -.015em; color: var(--ink); }

/* ==========================================================================
   6. Chips y estados (Chip: sm-chip)
   ========================================================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--surface-muted); color: var(--ink-secondary); font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.badge.green { background: var(--positive-soft); color: var(--positive-ink); }
.badge.amber { background: var(--caution-soft); color: var(--caution-ink); }
.badge.pink { background: var(--danger-soft); color: var(--danger-ink); }
.badge.blue { background: var(--accent-soft); color: var(--accent-strong); }
.badge.neutral { background: var(--surface-muted); color: var(--ink-secondary); }
.live-chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height-sm); padding: 0 14px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--ink-secondary);
  font-size: 13px; font-weight: 700; transition: background-color .14s ease, border-color .14s ease, color .14s ease;
}
.live-chip:hover { background: var(--surface-hover); color: var(--ink); }
.live-chip.selected { background: var(--accent-soft); border-color: var(--accent-muted); color: var(--accent-strong); }
.live-led { background: var(--border-control); }
.live-led.ok { background: var(--positive-ink); }
.live-led.error { background: var(--danger-ink); }

/* Pestañas de la app: control segmentado (Segmented) */
@media (max-width: 760px) { .live-tabs { display: flex; width: 100%; } .live-tabs button { flex: 1 1 0; min-height: var(--control-height); padding: 0 10px; } }

/* ==========================================================================
   7. Tablas (Table: sm-table)
   ========================================================================== */
.table-wrap { overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.table-wrap:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--radius-xs); }
.route-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-weight: 500; line-height: 1.45; color: var(--ink); }
.route-table th, .route-table td { padding: var(--space-3); text-align: left; vertical-align: middle; border-bottom: 1px solid var(--surface-muted); font-variant-numeric: tabular-nums; }
.route-table th {
  background: var(--surface-sunken); border-bottom: 1px solid var(--border); color: var(--ink-secondary);
  font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.route-table th.numeric, .route-table td.numeric { text-align: right; }
.live-table-card .route-table td { font-size: 14px; line-height: 1.45; padding: var(--space-3); }
.live-table-card .route-table td small, .route-table td small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--ink-muted); }
.route-table tbody tr, .route-table tbody tr:nth-child(even) { background: transparent; }
.route-table tbody tr:hover, .route-table tbody tr:hover td { background: var(--surface-hover); }
.route-table tbody tr:last-child td { border-bottom: 0; }

/* ==========================================================================
   8. Formularios (TextField / Select / DatePicker)
   ========================================================================== */
.live-form label, .create-dialog label { display: block; margin: var(--space-4) 0; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.4; }
.live-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.sm-date__input):not(.sm-select__input), .live-form textarea, .live-form select, .create-dialog input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.sm-date__input):not(.sm-select__input), .create-dialog textarea, .create-dialog select, .live-filter input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.sm-date__input):not(.sm-select__input), .xt-period input {
  display: block; width: 100%; min-height: var(--control-height); margin-top: 6px; padding: 0 14px;
  border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink);
  font-size: 15px; font-weight: 500; line-height: 1.4; appearance: none; box-shadow: none;
  transition: border-color .14s ease, background-color .14s ease;
}
.live-form textarea, .create-dialog textarea { padding: var(--space-3) 14px; min-height: 112px; line-height: 1.5; resize: vertical; }
.live-form input:not([type=checkbox]):hover, .live-form textarea:hover, .live-filter input:hover { border-color: var(--ink-muted); }
.live-form input:not([type=checkbox]):focus, .live-form textarea:focus, .live-filter input:focus, .create-dialog input:focus, .create-dialog textarea:focus {
  background: var(--surface-card); border-color: var(--accent); outline: 3px solid var(--focus-ring); outline-offset: 2px;
}
.live-form input::placeholder, .live-form textarea::placeholder, .live-filter input::placeholder { color: var(--ink-muted); opacity: 1; }
.live-form input:disabled, .live-form textarea:disabled, .live-filter input:disabled { background: var(--surface-muted); color: var(--ink-muted); border-color: var(--border); cursor: not-allowed; -webkit-text-fill-color: var(--ink-muted); }
.live-form input[type=file], .create-dialog input[type=file] {
  display: block; width: 100%; padding: var(--space-4); border: 1px dashed var(--border-control); border-radius: var(--radius-sm);
  background: var(--surface-sunken); color: var(--ink-secondary); font-size: 14px; font-weight: 500; margin-top: 6px;
}
.live-form input[type=file]::file-selector-button {
  margin-right: var(--space-3); min-height: var(--control-height-sm); padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface-card); color: var(--ink-secondary); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.live-form small, .create-dialog small { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--ink-muted); }
.live-fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); }
.live-fieldset legend { font-size: 13px; font-weight: 700; color: var(--ink-secondary); }
.live-select-field label { margin: 0 0 6px; }
.live-select-field { margin: var(--space-4) 0; }
.live-form .form-row .live-select-field { margin: 0; }
.live-form .dialog-actions { background: var(--surface-card); border-top: 1px solid var(--surface-muted); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.live-form .dialog-actions .button { margin-top: 0; }

/* Filtros */
.live-filter { gap: var(--space-4); align-items: flex-end; }
.live-filter label, .xt-period label { font-size: 13px; font-weight: 700; color: var(--ink-secondary); display: block; margin: 0; }
.live-filter > label > .sm-native-host, .live-filter > label > input { margin-top: 6px; }
.live-filter .sm-native-host { min-width: 200px; }
.live-search { flex: 1 1 220px; }
.live-search input { margin-top: 6px; }

/* Controles nativos sustituidos por SeliaUI: el original queda oculto y sin hueco */
select.sm-native--hidden, input.sm-native--hidden {
  min-height: 0 !important; height: 1px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; width: 100% !important;
  background: transparent !important; outline: 0 !important;
}
.sm-native-host { margin-top: 6px; }
.live-select-field .sm-native-host, .form-row .sm-native-host { margin-top: 0; }
.sm-native-host .sm-select, .sm-native-host .sm-date { width: 100%; }
label > .sm-native-host { font-weight: 500; }

/* Casillas sueltas (Checkbox: sm-checkbox, marcado mínimo) */
input.sm-checkbox-native {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; flex: none; width: 20px; height: 20px; min-height: 0;
  margin: 0 var(--space-2) 0 0; padding: 0; border: 2px solid var(--border-control); border-radius: 6px; background: var(--surface-card); color: var(--on-accent);
  vertical-align: middle; cursor: pointer; transition: background-color .14s ease, border-color .14s ease;
}
input.sm-checkbox-native::before {
  content: ""; width: 10px; height: 5px; margin-top: -2px; border: solid currentColor; border-width: 0 0 2.4px 2.4px;
  transform: rotate(-45deg) scale(0); transition: transform .12s ease;
}
input.sm-checkbox-native:hover:not(:disabled) { border-color: var(--accent); }
input.sm-checkbox-native:checked { background: var(--accent); border-color: var(--accent); }
input.sm-checkbox-native:checked::before { transform: rotate(-45deg) scale(1); }
input.sm-checkbox-native:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
input.sm-checkbox-native:disabled { background: var(--surface-muted); border-color: var(--border-strong); cursor: not-allowed; }
.live-form label > input.sm-checkbox-native { margin-right: 0; margin-top: 0; }
td input.sm-checkbox-native, th input.sm-checkbox-native { margin: 0; }

/* Interruptores (xt-switch) */

/* ==========================================================================
   9. Modal (#modal) y paneles flotantes (el aviso emergente es SeliaUI.Toast)
   ========================================================================== */
dialog {
  border: 1px solid var(--border); background: var(--surface-card); color: var(--ink); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal); padding: 0;
}
dialog::backdrop { background: var(--scrim); backdrop-filter: none; }
.live-dialog { width: 650px; max-width: calc(100vw - 32px); max-height: 90dvh; padding: var(--space-5); }
.live-dialog h2, .create-dialog h2 { font-size: 22px; line-height: 1.25; font-weight: 800; letter-spacing: -.015em; margin: 0 0 var(--space-3); }
.live-dialog .dialog-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.live-dialog h3 { font-size: 15px; font-weight: 700; color: var(--ink); }
.live-dialog p { color: var(--ink-secondary); }
@media (max-width: 760px) { .live-dialog { padding: var(--space-4); width: calc(100vw - 24px); } }


.xt-bell-panel, .popover { background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); color: var(--ink); }
.xt-bell-count { background: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--surface-card); }
.xt-bell[aria-expanded=true] { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent-muted); }

/* Menú de SeliaUI: opciones sin icono alineadas con las que lo llevan */
.sm-menu__item:not(:has(.sm-menu__ico)) { padding-left: calc(var(--space-3) + 18px + var(--space-3)); }
.theme-toggle { color: var(--ink-secondary); }

/* ==========================================================================
   10. Gráfico de gasto del panel heredado (SVG con clases en lugar de colores fijos)
   ========================================================================== */
.live-spend-stop { stop-color: var(--accent); }
.live-spend-grid { stroke: var(--surface-muted); }
.live-spend-line { stroke: var(--accent); }
.live-spend-dot { fill: var(--accent); }

/* ==========================================================================
   11. SeliaUI dentro de formularios y filtros heredados
   Los campos internos de Select y DatePicker recuperan su aspecto: las reglas de formulario de
   arriba y de las hojas heredadas son de la etiqueta input y no deben pintarles borde ni fondo.
   ========================================================================== */
.sm-date .sm-date__input {
  display: block; flex: 1 1 auto; width: auto; min-width: 0; height: 42px; min-height: 0; margin: 0; padding: 0 14px;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; font-size: 15px; font-weight: 500;
}
.sm-select__search .sm-select__input {
  display: block; flex: 1 1 auto; width: auto; min-width: 0; height: 38px; min-height: 0; margin: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; font-size: 14px; font-weight: 500;
}
.sm-date .sm-date__input:focus, .sm-select__search .sm-select__input:focus { border: 0; background: transparent; outline: 0; }
.sm-ui-pop button, .sm-ui-pop label { font-family: var(--font-sans); }

/* ==========================================================================
   12. Suelo tipográfico de las páginas heredadas (Resumen ya sigue la guía y se queda como está)
   Botones 14, notas y pies 13, etiquetas y estados 12.
   ========================================================================== */
#screen > :not(.rs-page) .button, #screen > :not(.rs-page) .live-work-card .button, .live-work-actions .button, .page-actions .button, dialog .button { font-size: 14px; min-height: var(--control-height); padding: 0 18px; }

#screen > :not(.rs-page) small, dialog small, .live-work-card small, .live-table-card small, .live-auth-card small { font-size: 13px !important; }
.live-source-note, .live-view-record p, .live-forms p, .live-work-card p, .live-auth-card p, .xt-sub, .live-file-line, .live-avatar-choice .live-look label, .live-fieldset legend { font-size: 13px; }
.badge, .card .badge, .task-end .badge { font-size: 12px !important; }
.nav-label, .eyebrow { font-size: 11px; }

@media (max-width: 760px) {
  .live-filter { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .live-filter label, .live-filter .live-search { flex: 0 0 auto; width: 100%; min-width: 0; }
  .live-filter .sm-native-host, .live-filter label:has(input[type=date]) .sm-native-host, .xt-period .sm-native-host { min-width: 0; width: 100%; }
  .live-filter .button, .live-filter .live-chip { width: 100%; }
  .xt-period { flex-direction: column; align-items: stretch; }
}

.page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--space-3); flex: 0 1 auto; }
.page-heading > div:first-child { flex: 1 1 320px; min-width: 0; }
@media (max-width: 760px) { .page-actions { justify-content: flex-start; width: 100%; } }

/* Pantallas bajas: la barra lateral se compacta para que quepan todas las secciones sin desplazar */
@media (min-width: 761px) and (max-height: 900px) {
  .sidebar { padding-top: 18px; padding-bottom: var(--space-4); }
  .brand { margin-bottom: var(--space-4); }
  .workspace-switch { margin-bottom: var(--space-3); padding-top: 6px; padding-bottom: 6px; }
  .nav-label.spaced { margin-top: var(--space-3); }
  .nav-item { min-height: 42px; margin: 1px 0; }
  .sidebar-bottom { padding-top: var(--space-3); }
  .profile { margin-bottom: 0; padding: var(--space-2) var(--space-3); }
}
.button.danger{ background: var(--surface-card); border-color: var(--danger-ink); color: var(--danger-ink); }
.button.danger:hover:not(:disabled){ background: var(--danger-soft); border-color: var(--danger-ink); color: var(--danger-ink); }
.live-section-title{ font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.live-form input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.sm-date__input):not(.sm-select__input),.live-form textarea,.live-form select,.create-dialog input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=hidden]):not(.sm-date__input):not(.sm-select__input),.create-dialog textarea,.create-dialog select,.live-filter input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not(.sm-date__input):not(.sm-select__input),.r-field input,.r-condition input{
  display: block; width: 100%; min-height: var(--control-height); margin-top: 6px; padding: 0 14px;
  border: 1px solid var(--border-control); border-radius: var(--radius-sm); background: var(--surface-sunken); color: var(--ink);
  font-size: 15px; font-weight: 500; line-height: 1.4; appearance: none; box-shadow: none;
  transition: border-color .14s ease, background-color .14s ease;
}
.live-filter label,.live-channel-filter{ font-size: 13px; font-weight: 700; color: var(--ink-secondary); display: block; margin: 0; }
.live-filter label:has(input[type=date]) .sm-native-host{ min-width: 170px; }
.live-form label:has(> input.sm-checkbox-native){ display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); margin: 0; font-weight: 600; }
.live-source-note,.live-view-record p,.live-forms p,.live-work-card p,.live-auth-card p,.live-pagination,.live-fieldset legend{ font-size: 13px; }