/* Navegación (menú lateral y barra inferior), calendario de citas, resumen, vistas de Sistema, hojas y diálogos.
   Todo valor sale de canon-tokens.css; los componentes (botón, chip, estado, etiqueta, tarjeta, campo) son los de canon-components.css.
   Prefijos: nav-, sidebar-, cal-, setup-, overview-, sheet-, care-. */

/* ===== Menú lateral (aprobado: colores de SpeedGas, día y noche) ===== */
.app-shell { display: grid; min-height: 100dvh; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); }
.app-shell.nav-rail { grid-template-columns: var(--rail-w) minmax(0, 1fr); }
.sidebar {
  position: sticky; top: 0; display: flex; height: 100dvh; flex-direction: column; overflow-y: auto;
  padding: calc(var(--sp-8) + var(--sp-3)) var(--sp-4) var(--sp-4);
  border-right: var(--border-w) solid var(--border-default); background: var(--surface-sidebar); color: var(--text-strong);
}
.sidebar nav { display: grid; gap: var(--sp-3); margin-top: var(--sp-2); }
.nav-section { display: grid; gap: 2px; }
.nav-section-title { margin: 0 0 var(--sp-1); padding: 0 var(--sp-3); color: var(--nav-ink); font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.nav-item {
  position: relative; display: flex; min-height: var(--ctl-lg); align-items: center; gap: var(--sp-3); padding: 0 var(--pad-x-lg);
  border: var(--border-w) solid transparent; border-radius: var(--r-md); background: transparent; color: var(--nav-ink);
  font-size: var(--fs-body); font-weight: var(--fw-medium); text-align: left; cursor: pointer;
}
.nav-item .ui-icon, .nav-item svg { width: var(--icon-lg); height: var(--icon-lg); flex: none; }
.nav-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--surface-hover); color: var(--text-strong); }
.nav-item.active { border-color: color-mix(in srgb, var(--brand) 46%, transparent); background: var(--surface-selected); color: var(--nav-title); }
.nav-badge, .unread-badge { display: inline-grid; min-width: calc(var(--fs-micro) * 2); height: calc(var(--fs-micro) * 2); padding: 0 var(--sp-1); place-items: center; border-radius: var(--r-full); background: var(--brand); color: var(--on-brand); font-size: var(--fs-micro); font-weight: var(--fw-bold); font-style: normal; font-variant-numeric: tabular-nums; }
.nav-item .nav-badge { margin-left: auto; }
.sidebar-footer { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-4); border-top: var(--border-w) solid var(--border-default); }
.user-chip { display: flex; min-width: 0; align-items: center; gap: var(--sp-3); }
.user-chip > span:last-child { min-width: 0; }
.user-chip strong, .user-chip small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip strong { color: var(--text-strong); font-size: var(--fs-body); }
.user-chip small { color: var(--nav-ink); font-size: var(--fs-meta); text-transform: capitalize; }
/* Menú de usuario del pie: el chip es un botón; el menú se ancla con position fixed junto al avatar (también con el menú plegado). */
.user-chip-button { width: 100%; padding: var(--sp-1); border: var(--border-w) solid transparent; border-radius: var(--r-md); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.user-chip-button:hover, .user-chip-button[aria-expanded="true"] { background: var(--surface-hover); }
.user-chip-button:focus-visible { outline: var(--focus-w, 2px) solid var(--brand); outline-offset: 2px; }
.user-menu-pop { position: fixed; z-index: 50; display: grid; min-width: 220px; gap: var(--sp-1); padding: var(--sp-2); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-strong); box-shadow: var(--shadow-2); }
.user-menu-head { display: grid; padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-default); }
.user-menu-head strong { font-size: var(--fs-body); }
.user-menu-head small { color: var(--text-muted); font-size: var(--fs-meta); text-transform: capitalize; }
.user-menu-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-md); background: transparent; color: var(--text-strong); font: inherit; text-align: left; cursor: pointer; }
.user-menu-item:hover, .user-menu-item:focus-visible { background: var(--surface-hover); outline: none; }
.footer-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); min-width: 0; }
.footer-actions .ui-theme { flex: 1 1 auto; width: auto; min-width: 0; }
.sidebar .ui-iconbtn { border-color: var(--border-default); background: transparent; color: var(--nav-ink); }
.sidebar .ui-iconbtn:hover { background: var(--surface-hover); color: var(--text-strong); }
.sidebar .nav-toggle { position: absolute; z-index: 2; top: var(--sp-2); right: var(--sp-3); }
.sidebar .nav-toggle.active { border-color: color-mix(in srgb, var(--brand) 46%, transparent); background: var(--surface-selected); color: var(--nav-title); }
.sidebar .nav-toggle svg { transition: transform var(--dur-fast) var(--ease); }
.sidebar .nav-toggle.active svg { transform: rotate(45deg); }
/* Marca del menú: nombre del negocio en UNA línea; 21 px hasta 20 letras y desde ahí se achica en proporción (nunca menos de 12 px); si no cabe, «…». */
.sidebar .brand { display: block; min-width: 0; height: calc(var(--head-h) - var(--sp-1)); margin-bottom: var(--sp-2); text-align: center; white-space: nowrap; }
.sidebar .brand > div { width: 100%; min-width: 0; overflow: hidden; }
.sidebar .brand strong { display: block; overflow: hidden; color: var(--nav-title); text-overflow: ellipsis; white-space: nowrap; line-height: var(--lh-tight);
  font-size: clamp(11px, calc(21px * 16 / max(16, var(--brand-name-length, 16))), 21px); } /* lint-ok: tamaño del nombre del negocio proporcional a su largo (aprobado, como SpeedGas) */
.sidebar .brand small { display: block; margin-top: var(--sp-1); overflow: hidden; color: var(--nav-sub); font-size: var(--fs-title); font-weight: var(--fw-bold); text-overflow: ellipsis; white-space: nowrap; }
/* Con logo propio: la imagen va a la izquierda del nombre, sin círculo de fondo; el nombre sigue ajustándose igual. */
.sidebar .brand.has-brand-logo { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); text-align: left; }
.sidebar .brand.has-brand-logo > div { width: auto; flex: 1 1 0; }
.brand-logo { flex: none; width: var(--avatar-md); height: var(--avatar-md); object-fit: contain; }
.brand-mark { display: flex; align-items: end; gap: 3px; width: var(--avatar-md); height: var(--avatar-md); padding: var(--sp-2); border-radius: var(--r-full); background: var(--brand); }
.brand-mark span { width: var(--sp-1); border-radius: var(--r-sm); background: var(--on-brand); }
.brand-mark span:nth-child(1) { height: var(--dot); }
.brand-mark span:nth-child(2) { height: var(--sp-3); }
.brand-mark span:nth-child(3) { height: var(--sp-2); }
.brand-mark.has-logo { display: grid; place-items: center; padding: 0; overflow: hidden; color: var(--on-brand); font-size: var(--fs-title); font-weight: var(--fw-bold); letter-spacing: 0; }
.brand-mark.has-logo img { width: 100%; height: 100%; object-fit: cover; }
/* Sonido de mensaje nuevo (como SpeedGas): con el menú abierto lleva etiqueta e interruptor; plegado, solo el icono con el estado. */
.sound-toggle-button { width: 100%; min-width: 0; }
.sound-toggle-button { gap: var(--sp-1); padding-inline: var(--sp-1); }
.sound-toggle-button > span { min-width: 0; flex: 1 1 auto; overflow: visible; text-overflow: clip; white-space: normal; line-height: 1.2; }
.sound-toggle-button .ui-icon, .sound-toggle-button svg { width: var(--icon-md, 18px); height: var(--icon-md, 18px); }
.sound-toggle-button .sound-switch { margin-left: auto; }
.sound-toggle-button.is-off { color: var(--text-muted); }
.sound-rail-button { display: none; width: 100%; }
.nav-rail .sidebar .sound-rail-button { display: flex; }
.nav-rail .sidebar .sound-toggle-button { display: none; }

/* Menú plegado (como SpeedGas): solo se quita el texto. Cada icono queda EXACTAMENTE a la misma altura que con el menú abierto:
   lo que se oculta conserva su espacio con visibility. */
.nav-rail .sidebar { padding-right: var(--sp-3); padding-left: var(--sp-3); overflow: hidden; }
.nav-rail .sidebar .brand, .nav-rail .nav-section-title { overflow: hidden; visibility: hidden; white-space: nowrap; }
.nav-rail .sidebar nav { scrollbar-width: none; }
.nav-rail .sidebar .nav-item { justify-content: center; padding: 0; }
.nav-rail .sidebar .nav-item span:not(.nav-badge) { display: none; }
/* Contador con el menú plegado: pequeño, en la esquina superior derecha y desplazado hacia fuera del icono (sobresale hacia el margen del menú),
   con un aro del color del fondo del menú que lo separa del icono. Con muchos dígitos ya viene como «99+». */
.nav-rail .sidebar .nav-item .nav-badge { position: absolute; z-index: 1; top: calc(var(--sp-1) * -1); right: calc(var(--sp-2) * -1); min-width: calc(var(--fs-micro) * 1.6); height: calc(var(--fs-micro) * 1.6); margin: 0; padding: 0 var(--sp-1); font-size: var(--fs-micro); line-height: 1; box-shadow: 0 0 0 calc(var(--border-w) * 2) var(--surface-sidebar); }
/* Menú plegado en verde: fondo de marca, iconos claros, activo con blanco translúcido, separadores y botones coherentes. */
.nav-rail .sidebar { border-right-color: var(--rail-bg); background: var(--rail-bg); color: var(--rail-ink); }
.nav-rail .sidebar .nav-item, .nav-rail .sidebar .ui-iconbtn { color: var(--rail-ink); }
.nav-rail .sidebar .nav-item:hover, .nav-rail .sidebar .ui-iconbtn:hover { background: var(--rail-hover-bg); color: var(--rail-on); }
.nav-rail .sidebar .nav-item.active, .nav-rail .sidebar .nav-toggle.active { border-color: transparent; background: var(--rail-active-bg); color: var(--rail-on); }
.nav-rail .sidebar .ui-iconbtn { border-color: var(--rail-line); background: transparent; }
.nav-rail .sidebar .ui-iconbtn.is-off { color: var(--rail-ink); }
/* Contraste de los iconos sobre el verde claro (fondo intacto): blanco pleno (≈3,2:1) y una sombra sutil que los separa del fondo. */
.nav-rail .sidebar .nav-item, .nav-rail .sidebar .ui-iconbtn, .nav-rail .sidebar .user-chip-button { color: var(--rail-on); }
.nav-rail .sidebar .nav-item svg, .nav-rail .sidebar .ui-iconbtn svg { filter: drop-shadow(0 1px 1px rgba(6, 60, 34, .45)); }
.nav-rail .sidebar .nav-item .nav-badge { background: var(--rail-badge-bg); color: var(--rail-badge-ink); box-shadow: 0 0 0 calc(var(--border-w) * 2) var(--rail-bg); }
.nav-rail .sidebar .nav-item .nav-badge.notice-badge { background: var(--rail-badge-alert-bg); color: var(--rail-badge-alert-ink); }
.nav-rail .sidebar .nav-item .nav-badge.notice-badge.is-calm { background: var(--notice-calm-bg); color: var(--notice-calm-ink); }
.nav-rail .sidebar .sidebar-footer, .nav-rail .nav-section + .nav-section { border-top-color: var(--rail-line); }
.nav-rail .sidebar .ui-avatar { background: var(--rail-on); color: var(--rail-avatar-ink); }
.nav-rail .sidebar .sound-switch { display: none; }
.nav-rail .sidebar .nav-toggle { right: auto; left: 50%; transform: translateX(-50%); }
.nav-rail .user-chip { justify-content: center; }
.nav-rail .user-chip > span:last-child { display: none; }
.nav-rail .sidebar .footer-actions { flex-direction: column; align-items: center; gap: 2px; }
.nav-rail .nav-section + .nav-section { border-top: var(--border-w) solid var(--rail-line); }

.mobile-bar { display: none; }
.flip { display: inline-grid; transform: scaleX(-1); }
.field-hint { color: var(--text-subtle); font-size: var(--fs-meta); font-weight: var(--fw-regular); }
.field-error { color: var(--danger-ink); flex-basis: 100%; }
.checkbox-row { display: flex; align-items: center; gap: var(--sp-3); }
.drawer-inline-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-3); }

/* ===== Resumen ===== */
.metric-action { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; transition: border-color var(--dur-fast) var(--ease); }
.metric-action:hover:not(:disabled) { border-color: var(--brand); }
.metric-action:disabled { cursor: default; }
.metric-action.warning strong { color: var(--warning-ink); }
.overview-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-4); }
.overview-panel { min-height: 0; }
.overview-list { display: grid; gap: 0; margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.overview-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: var(--border-w) solid var(--border-soft); }
.overview-list li:first-child { border-top: 0; }
.overview-list time { min-width: 70px; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.overview-list strong, .overview-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.overview-list small { color: var(--text-muted); font-size: var(--fs-meta); }
.overview-empty { margin: var(--sp-4) 0 0; }
.setup-card { margin-bottom: var(--sp-3); border-color: color-mix(in srgb, var(--brand) 30%, var(--border-default)); }
.setup-progress { height: var(--sp-2); margin: var(--sp-5) 0 var(--sp-2); overflow: hidden; border-radius: var(--r-full); background: var(--surface-3); }
.setup-progress span { display: block; height: 100%; border-radius: inherit; background: var(--brand); }
.setup-list { display: grid; gap: 0; margin: var(--sp-2) 0 0; padding: 0; list-style: none; }
.setup-list li { display: grid; grid-template-columns: var(--ctl-md) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: var(--border-w) solid var(--border-soft); }
.setup-list li:first-child { border-top: 0; }
.setup-list strong { font-size: var(--fs-body); }
.setup-list em { color: var(--warning-ink); font-size: var(--fs-meta); font-style: normal; }
.setup-list p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-body); }
.setup-mark { display: grid; width: var(--ctl-sm); height: var(--ctl-sm); place-items: center; border: 2px solid var(--border-strong); border-radius: var(--r-full); color: var(--warning-ink); font-weight: var(--fw-bold); }
.setup-list .done .setup-mark { border-color: var(--success-solid); background: var(--success-solid); color: var(--surface-1); }
.setup-list .warning .setup-mark { border-color: var(--warning-solid); background: var(--warning-soft); }

/* ===== Calendario ===== */
.cal-title { margin: 0; }
.cal-filters-wrap { margin-bottom: var(--sp-2); }
.cal-filters-wrap > summary { display: none; }
.cal-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.cal-filters .ui-field { min-width: 150px; }
.cal-filters .ui-field-inline { min-width: 0; margin: 0 0 var(--sp-2); font-weight: var(--fw-medium); }
.cal-check input:not(.ui-switch) { width: var(--sp-5); height: var(--sp-5); accent-color: var(--brand); }
.cal-summary { margin: 0 0 var(--sp-3); color: var(--text-muted); font-size: var(--fs-meta); }
.cal-panel { padding: var(--sp-4); }
.cal-legend { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin: var(--sp-4) 0 0; padding: var(--sp-3) 0 0; border-top: var(--border-w) solid var(--border-soft); list-style: none; color: var(--text-muted); font-size: var(--fs-meta); }
.cal-legend li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cal-swatch { width: var(--sp-3); height: var(--sp-3); border-radius: var(--r-sm); background: var(--cal-event, var(--brand)); }
.cal-swatch.scheduled, .cal-event.scheduled, .cal-list-row.scheduled { --cal-event: var(--warning-solid); }
.cal-swatch.confirmed, .cal-event.confirmed, .cal-list-row.confirmed { --cal-event: var(--success-solid); }
.cal-swatch.completed, .cal-event.completed, .cal-list-row.completed { --cal-event: var(--info-solid); }
.cal-swatch.cancelled, .cal-event.cancelled, .cal-list-row.cancelled { --cal-event: var(--danger-solid); }
.cal-swatch.no-show, .cal-event.no-show, .cal-list-row.no-show { --cal-event: var(--neutral-solid); }
.cal-swatch.off { background: repeating-linear-gradient(135deg, var(--surface-3), var(--surface-3) 3px, transparent 3px, transparent 6px); border: var(--border-w) solid var(--border-default); }
.cal-swatch.closure { background: var(--danger-soft); border: var(--border-w) solid color-mix(in srgb, var(--danger-solid) 40%, transparent); }
.cal-swatch.busy { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-muted) 45%, transparent) 0 3px, transparent 3px 6px); border: var(--border-w) dashed var(--text-muted); }
/* Estado de la cita (cápsula canon con el tono de cada estado) */
.ui-status.cal-status.is-scheduled, .ui-status.cal-status.is-pending_payment { background: var(--warning-soft); color: var(--warning-ink); } .ui-status.cal-status.is-scheduled::before, .ui-status.cal-status.is-pending_payment::before { background: var(--warning-solid); }
.ui-status.cal-status.is-confirmed { background: var(--success-soft); color: var(--success-ink); } .ui-status.cal-status.is-confirmed::before { background: var(--success-solid); }
.ui-status.cal-status.is-completed { background: var(--info-soft); color: var(--info-ink); } .ui-status.cal-status.is-completed::before { background: var(--info-solid); }
.ui-status.cal-status.is-cancelled { background: var(--danger-soft); color: var(--danger-ink); } .ui-status.cal-status.is-cancelled::before { background: var(--danger-solid); }

.cal-grid { min-width: 0; overflow-x: auto; }
.cal-grid.week .cal-grid-head, .cal-grid.week .cal-grid-body { min-width: 760px; }
.cal-grid-head, .cal-grid-body { display: grid; grid-template-columns: 52px repeat(var(--cal-days), minmax(0, 1fr)); }
.cal-grid-head { position: sticky; top: 0; z-index: 2; padding-bottom: var(--sp-2); background: var(--surface-1); }
.cal-day-head { display: grid; gap: 1px; padding: var(--sp-2); border-radius: var(--r-sm); text-align: center; }
.cal-day-head strong { font-size: var(--fs-body); text-transform: capitalize; }
.cal-day-head small { color: var(--text-muted); font-size: var(--fs-meta); }
.cal-day-head small.closure, .cal-month-cell small.closure { color: var(--danger-ink); font-weight: var(--fw-medium); }
.cal-day-head.today { background: var(--brand-soft); color: var(--brand-strong); }
.cal-grid-body { position: relative; }
.cal-hours { position: relative; }
.cal-hours span { position: absolute; right: var(--sp-2); transform: translateY(-50%); color: var(--text-subtle); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.cal-hours span:first-child { transform: none; }
.cal-day-col { position: relative; border-left: var(--border-w) solid var(--border-soft); background-image: linear-gradient(var(--border-soft) 1px, transparent 1px); background-size: 100% 56px; cursor: cell; }
.cal-day-col.today { background-color: color-mix(in srgb, var(--brand-soft) 35%, transparent); }
.cal-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--surface-3) 85%, transparent), color-mix(in srgb, var(--surface-3) 85%, transparent) 4px, transparent 4px, transparent 9px); pointer-events: none; }
.cal-closure { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: var(--sp-2); background: color-mix(in srgb, var(--danger-soft) 80%, transparent); pointer-events: none; }
.cal-closure em { color: var(--danger-ink); font-size: var(--fs-meta); font-style: normal; font-weight: var(--fw-bold); text-align: center; }
.cal-slot { position: absolute; z-index: 1; display: flex; }
.cal-event { display: grid; width: 100%; min-width: 0; align-content: start; gap: 1px; padding: var(--sp-1) var(--sp-2); overflow: hidden; border: var(--border-w) solid color-mix(in srgb, var(--cal-event) 45%, transparent); border-left: 4px solid var(--cal-event); border-radius: var(--r-sm); background: color-mix(in srgb, var(--cal-event) 14%, var(--surface-1)); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.cal-event:hover { background: color-mix(in srgb, var(--cal-event) 24%, var(--surface-1)); }
.cal-event strong, .cal-event span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event strong { font-size: var(--fs-meta); }
.cal-event span { color: var(--text-muted); font-size: var(--fs-micro); }
.cal-event.cancelled, .cal-event.no-show { opacity: .7; }
.cal-event.cancelled strong { text-decoration: line-through; }
.cal-event.compact { padding: 2px var(--sp-2); }
.cal-busy { position: absolute; left: 0; right: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: var(--sp-1); pointer-events: none; background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--text-muted) 22%, transparent) 0 6px, color-mix(in srgb, var(--text-muted) 8%, transparent) 6px 12px); border-block: var(--border-w) dashed color-mix(in srgb, var(--text-muted) 55%, transparent); }
.cal-busy em { color: var(--text-muted); font-size: var(--fs-meta); font-style: normal; font-weight: var(--fw-bold); text-align: center; padding-inline: var(--sp-1); }
.cal-busy-note { display: block; color: var(--text-muted); font-size: var(--fs-meta); }

.cal-month { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-1); }
.cal-month-head { padding: var(--sp-1) var(--sp-2); color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-bold); text-align: center; }
.cal-month-cell { display: grid; min-height: calc(var(--row-h) * 2); align-content: start; gap: 3px; padding: var(--sp-1); border: var(--border-w) solid var(--border-soft); border-radius: var(--r-sm); background: var(--surface-1); }
.cal-month-cell.outside { opacity: .45; }
.cal-month-cell.closed { background: repeating-linear-gradient(135deg, var(--surface-3), var(--surface-3) 4px, var(--surface-1) 4px, var(--surface-1) 9px); }
.cal-month-cell.today { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.cal-month-day { justify-self: start; min-width: var(--ctl-md); min-height: var(--ctl-sm); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-full); background: transparent; font-weight: var(--fw-bold); cursor: pointer; }
.cal-month-day:hover { background: var(--surface-hover); }
.cal-more { border: 0; background: transparent; color: var(--brand-strong); font-size: var(--fs-meta); font-weight: var(--fw-bold); text-align: left; cursor: pointer; }

.cal-list { display: grid; gap: var(--sp-5); }
.cal-list-day header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.cal-list-day h3 { margin: 0; font-size: var(--fs-title); }
.cal-list-day ul { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.cal-list-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--border-soft); border-left: 4px solid var(--cal-event, var(--border-strong)); border-radius: var(--r-md); background: var(--surface-1); }
.cal-list-main { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: var(--sp-3); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.cal-list-main time { font-size: var(--fs-body); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cal-list-main strong, .cal-list-main small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-list-main small { color: var(--text-muted); font-size: var(--fs-meta); }

.cal-detail { display: grid; gap: 0; margin: var(--sp-5) 0; }
.cal-detail div { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-top: var(--border-w) solid var(--border-soft); }
.cal-detail dt { color: var(--text-muted); font-size: var(--fs-body); }
.cal-detail dd { margin: 0; font-size: var(--fs-body); font-weight: var(--fw-medium); }
.cal-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.cal-confirm, .cal-reschedule { margin: var(--sp-3) 0; padding: var(--sp-4); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-2); }
.cal-confirm p { margin: 0; font-size: var(--fs-body); }
.cal-slots { display: grid; gap: var(--sp-3); }
.cal-slot-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); max-height: calc(var(--row-h) * 4); overflow-y: auto; }
.cal-slot-list .ui-chip { font-variant-numeric: tabular-nums; }
.cal-person-results { display: grid; gap: var(--sp-1); margin: 0 0 var(--sp-3); padding: 0; list-style: none; }
.cal-person-results button { width: 100%; min-height: var(--ctl-lg); padding: 0 var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-primary); font: inherit; text-align: left; cursor: pointer; }
.cal-person-results button:hover { border-color: var(--brand); }
.cal-picked { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--brand-soft); }
.cal-manual { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ===== Sistema: usuarios y alertas ===== */
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.data-table th { padding: var(--sp-2) var(--sp-3); border-bottom: var(--border-w) solid var(--border-strong); background: var(--surface-2); color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-align: left; text-transform: uppercase; }
.data-table td { padding: var(--sp-3); border-bottom: var(--border-w) solid var(--border-soft); vertical-align: middle; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { color: var(--text-muted); font-size: var(--fs-meta); }
.data-table tr.inactive td { color: var(--text-subtle); }
.row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-2); }
.role-picker { display: grid; gap: var(--sp-2); }
.role-option { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-3); margin: 0; padding: var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); cursor: pointer; }
.role-option.active { border-color: var(--brand); background: var(--surface-selected); }
.role-option input { width: var(--sp-5); height: var(--sp-5); margin-top: 2px; accent-color: var(--brand); }
.role-option strong, .role-option small { display: block; }
.role-option strong { color: var(--text-strong); }
.role-option small { color: var(--text-muted); font-weight: var(--fw-regular); }
.secret-notice { display: grid; gap: var(--sp-2); padding: var(--sp-4); border: var(--border-w) dashed var(--brand); border-radius: var(--r-lg); background: var(--brand-soft); }
.secret-notice p { margin: 0; }
.secret-notice code { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface-1); font-family: var(--font-mono); font-size: var(--fs-title); letter-spacing: var(--tracking-caps); user-select: all; }
.alert-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.alert-item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: var(--sp-3); padding: var(--sp-4); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); }
.alert-item .status-dot { margin-top: var(--sp-2); }
.alert-item p { margin: 3px 0; color: var(--text-muted); font-size: var(--fs-body); }
.alert-item small { color: var(--text-subtle); font-size: var(--fs-meta); }

/* ===== Hoja «Más» (móvil) ===== */
.sheet-backdrop { align-items: flex-end; justify-content: stretch; }
.sheet { width: 100%; max-height: 86dvh; padding: var(--sp-4) var(--sp-4) var(--sp-6); overflow-y: auto; border-radius: var(--r-lg) var(--r-lg) 0 0; background: var(--surface-1); animation: slide-up var(--dur-base) var(--ease) both; }
.sheet > header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-4); }
.sheet .nav-section { margin-bottom: var(--sp-4); }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.sheet-grid .nav-item { border: var(--border-w) solid var(--border-default); }
.sheet-actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); }
.sheet-actions .nav-item { justify-content: flex-start; border-color: var(--border-strong); background: var(--surface-1); color: var(--text-strong); }
@keyframes slide-up { from { transform: translateY(40px); opacity: .6; } }

@media (max-width: 1100px) {
  .overview-columns { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .app-shell { grid-template-columns: 78px minmax(0, 1fr); }
  .nav-section-title { display: none; }
  .nav-section + .nav-section { padding-top: var(--sp-3); border-top: var(--border-w) solid var(--border-default); }
  .sidebar { padding-inline: var(--sp-3); }
  .sidebar .brand > div, .nav-item span, .user-chip > span:last-child, .sound-toggle-button .sound-switch { display: none; }
  .sidebar .brand { justify-content: center; }
  .nav-item { justify-content: center; padding: 0; }
  .user-chip { justify-content: center; }
  .footer-actions { flex-direction: column; align-items: center; }
  .sheet .nav-item span, .sheet .user-chip > span:last-child, .mobile-bar .nav-item span, .sheet .nav-section-title { display: block; }
  .sheet .nav-item { justify-content: flex-start; padding: 0 var(--sp-3); }
  .sheet .nav-section + .nav-section { padding-top: 0; border-top: 0; }
  .sheet .sound-switch { display: block; }
}
@media (max-width: 660px) {
  .app-shell { display: block; padding-bottom: calc(var(--row-h) + var(--sp-5)); }
  .sidebar { display: none; }
  .mobile-bar { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: var(--sp-2) var(--sp-2) calc(var(--sp-2) + env(safe-area-inset-bottom)); border-top: var(--border-w) solid var(--border-default); background: var(--surface-sidebar); }
  .mobile-bar .nav-item { display: grid; width: auto; min-height: var(--row-h); flex: none; justify-items: center; align-content: center; gap: 3px; padding: 0 2px; }
  .mobile-bar .nav-item span { display: block; max-width: 100%; font-size: var(--fs-micro); }
  .mobile-bar .nav-item .nav-badge { position: absolute; top: var(--sp-1); right: 12%; margin: 0; }
  .sheet .nav-item { width: auto; flex: none; justify-content: flex-start; padding: 0 var(--sp-3); }
  .cal-filters .ui-field { min-width: calc(50% - 5px); flex: 1 1 calc(50% - 5px); }
  .cal-filters-wrap > summary { display: list-item; margin-bottom: var(--sp-3); color: var(--brand-strong); font-size: var(--fs-body); font-weight: var(--fw-bold); cursor: pointer; }
  .cal-month-cell { min-height: var(--row-h); }
  .cal-month-cell .cal-event, .cal-month-cell .cal-event span { font-size: var(--fs-micro); }
  .cal-list-row { grid-template-columns: minmax(0, 1fr) auto; }
  .cal-list-row > .ui-btn { grid-column: 1 / -1; }
  .cal-list-main { grid-template-columns: 72px minmax(0, 1fr); }
  .cal-list-main time { font-size: var(--fs-meta); }
  .cal-detail div { grid-template-columns: 90px minmax(0, 1fr); }
  .setup-list li { grid-template-columns: var(--ctl-md) minmax(0, 1fr); }
  .setup-list li > .ui-btn { grid-column: 2; justify-self: start; }
  .overview-list li { grid-template-columns: auto minmax(0, 1fr); }
  .overview-list li > :last-child { grid-column: 2; justify-self: start; }
  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { padding: var(--sp-3) 0; border-bottom: var(--border-w) solid var(--border-soft); }
  .data-table td { padding: var(--sp-1) 0; border: 0; }
  .row-actions { justify-content: flex-start; }
}

/* ===== Ficha de persona, asignación de derivaciones y edición de canal ===== */
.handoff-assign { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.handoff-assign.compact { margin-top: 0; }
.person-contacts, .person-history, .person-conversations, .person-notes, .person-history-actions { margin-top: var(--sp-4); }
/* Historial de conversación: las dos acciones separadas, una junto a la otra (en el teléfono, una debajo de la otra). */
.person-history-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-4); }
.person-history-option { display: grid; align-content: start; gap: var(--sp-2); }
.person-history-option h3, .person-history-option p { margin: 0; }
.person-history-option .ui-btn { justify-self: start; }
/* Datos de contacto y conversaciones de la ficha: una fila por dato, con separadores legibles (sin ids internos). */
.person-contact-list, .person-convo-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.person-contact-list li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.person-contact-kind { color: var(--text-subtle); font-size: var(--fs-meta); }
.person-contact-value { overflow-wrap: anywhere; }
.person-convo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.person-convo-copy { min-width: 0; flex: 1 1 260px; display: grid; gap: var(--sp-1); }
.person-convo-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1); color: var(--text-subtle); font-size: var(--fs-meta); }
.person-convo-top strong { color: var(--text); }
.person-convo-text { color: var(--text); overflow-wrap: anywhere; min-width: 0; }
.person-note-list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-3); }
.person-note-list p { margin: 0 0 var(--sp-1); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ===== Etiquetas: gestor y selector (la etiqueta es ui-tag) ===== */
.label-picker { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0 0; }
.label-menu > .label-menu-btn { list-style: none; cursor: pointer; }
.label-menu { position: relative; }
.label-menu-panel { position: absolute; z-index: 5; top: calc(100% + var(--sp-1)); left: 0; box-sizing: border-box; display: grid; min-width: min(220px, 90vw); max-height: calc(var(--row-h) * 7); gap: 0; padding: var(--sp-1); overflow-y: auto; border: var(--border-w) solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--shadow-2); }
.label-option { display: flex; width: 100%; min-width: 0; align-items: center; gap: var(--sp-2); cursor: pointer; text-align: left; }
.label-option-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-option-check { flex: none; color: var(--brand); font-weight: var(--fw-bold); }
.label-error { color: var(--danger-ink); }
.label-manager { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); padding: var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-2); }
.label-manager header { display: flex; align-items: center; justify-content: space-between; }
.label-manager h3 { margin: 0; font-size: var(--fs-title); }
.label-edit-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.label-edit-row input { min-width: 0; flex: 1 1 110px; }

/* ===== Tratamientos: diálogos de iniciar, confirmar y evaluación atendida; lista en la ficha ===== */
.care-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: var(--sp-4); background: var(--overlay); animation: fade var(--dur-fast) both; }
.care-dialog { width: min(100%, 460px); max-height: 100%; overflow: auto; padding: var(--sp-6); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-1); box-shadow: var(--shadow-3); }
.care-dialog h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-title); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.care-lead { margin: 0 0 var(--sp-4); color: var(--text-muted); font-size: var(--fs-body); line-height: var(--lh-body); }
.care-choices { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; border: 0; }
.care-choices legend { padding: 0; margin-bottom: var(--sp-2); color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
.care-choice { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--ctl-lg); padding: 0 var(--sp-3); border: var(--border-w) solid var(--border-default); border-radius: var(--r-md); background: var(--surface-1); cursor: pointer; font-size: var(--fs-body); }
.care-choice:hover, .care-choice.selected { border-color: var(--brand); }
.care-choice.selected { background: var(--surface-selected); }
.care-actions { position: sticky; bottom: calc(var(--sp-6) * -1); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--sp-3); margin: var(--sp-5) calc(var(--sp-6) * -1) calc(var(--sp-6) * -1); padding: var(--sp-4) var(--sp-6); border-top: var(--border-w) solid var(--border-default); background: var(--surface-1); }
.care-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.care-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: var(--border-w) solid var(--border-default); border-radius: var(--r-lg); background: var(--surface-2); }
.care-row-copy { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.care-row-copy small { color: var(--text-muted); }
.care-row-actions { display: flex; gap: var(--sp-2); }
.care-evaluations { margin-top: var(--sp-4); }
.care-evaluations h3 { margin: 0 0 var(--sp-2); color: var(--text-muted); font-size: var(--fs-meta); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-transform: uppercase; }
@media (max-width: 520px) { .care-dialog { padding: var(--sp-5); } .care-actions { margin: var(--sp-5) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1); padding: var(--sp-4) var(--sp-5); bottom: calc(var(--sp-5) * -1); } .care-actions .ui-btn { flex: 1 1 100%; } }
.nav-rail .sidebar { overflow-y: auto; scrollbar-width: none; }
.nav-rail .sidebar::-webkit-scrollbar { display: none; }
/* Selector de tema: con el menú abierto, las dos opciones; plegado (rail), solo el botón de icono que alterna. */
.sidebar .ui-theme { margin-bottom: var(--sp-1); }
.app-shell:not(.nav-rail) .theme-compact { display: none; }
.nav-rail .sidebar .ui-theme { display: none; }
@media (max-width: 900px) { .sidebar .ui-theme { display: none; } .app-shell:not(.nav-rail) .theme-compact { display: inline-grid; } }

/* ===== Menú con grupos (como el «Configuración» de SpeedGas): primer nivel corto y un submenú plegable ===== */
.nav-section { gap: 2px; }
.nav-tree { display: grid; gap: 2px; }
.nav-group-toggle { width: 100%; }
.nav-group-toggle .nav-chevron { width: var(--dot); height: var(--dot); margin-left: auto; flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--dur-fast) var(--ease); }
.nav-tree.open > .nav-group-toggle .nav-chevron { transform: translateY(1px) rotate(-135deg); }
/* La pantalla activa está dentro del grupo: el grupo queda resaltado aunque esté cerrado. */
.nav-tree.has-active > .nav-group-toggle { border-color: color-mix(in srgb, var(--brand) 46%, transparent); background: var(--surface-selected); color: var(--brand-strong); }
.nav-tree.open.has-active > .nav-group-toggle { background: transparent; }
/* Jerarquía del submenú (de un vistazo): 1 grupo = icono + nombre (como las demás entradas) · 2 subsección = rótulo en versalitas, tenue, plegable,
   con una línea divisoria arriba · 3 pantalla = sangrada bajo su subsección, con guía vertical, letra más chica; la activa se resalta sin perder la sangría. */
.nav-subtree { display: grid; gap: 0; margin: var(--sp-1) 0 var(--sp-2); }
.nav-subgroup { display: grid; gap: 0; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: var(--border-w) solid var(--border-default); }
.nav-subgroup:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.nav-subgroup-toggle { display: flex; width: 100%; align-items: center; gap: var(--sp-2); min-height: var(--ctl-sm); padding: 0 var(--sp-3); border: 0; border-radius: var(--r-sm); background: transparent; color: color-mix(in srgb, var(--brand-strong) 55%, var(--text-subtle)); font: inherit; font-size: var(--fs-micro); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); text-align: left; text-transform: uppercase; cursor: pointer; }
.nav-subgroup-toggle:hover { background: var(--surface-hover); color: var(--text-strong); }
.nav-subgroup-toggle .nav-chevron { width: var(--sp-1); height: var(--sp-1); flex: none; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-1px) rotate(-45deg); transition: transform var(--dur-fast) var(--ease); }
.nav-subgroup.open > .nav-subgroup-toggle .nav-chevron { transform: translateY(-1px) rotate(45deg); }
.nav-subgroup.has-active > .nav-subgroup-toggle { color: var(--brand-strong); }
.nav-subitems { display: grid; gap: 2px; margin: var(--sp-1) 0 0 var(--sp-4); padding-left: var(--sp-3); border-left: 2px solid var(--border-default); }
.nav-subgroup.has-active .nav-subitems { border-left-color: color-mix(in srgb, var(--brand) 40%, var(--border-default)); }
.nav-subitem { display: flex; min-height: var(--ctl-md); align-items: center; padding: 0 var(--pad-x-md); border: var(--border-w) solid transparent; border-radius: var(--r-md); background: transparent; color: var(--nav-ink); font-size: var(--fs-meta); font-weight: var(--fw-medium); text-align: left; cursor: pointer; }
.nav-subitem span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-subitem:hover { background: var(--surface-hover); color: var(--text-strong); }
.nav-subitem.active { border-color: color-mix(in srgb, var(--brand) 46%, transparent); background: var(--surface-selected); color: var(--brand-strong); font-weight: var(--fw-bold); }
/* Plegado (rail): solo el icono del grupo; el submenú reaparece cuando el menú se expande con el hover de 1,5 s. */
.nav-rail .nav-tree > .nav-subtree, .nav-rail .nav-group-toggle .nav-chevron { display: none; }
.nav-rail .nav-group-toggle { justify-content: center; }
/* Tableta (menú de iconos): el submenú se muestra compacto bajo el icono del grupo. */
@media (max-width: 900px) {
  .nav-group-toggle .nav-chevron { display: none; }
  .nav-subgroup { margin-top: var(--sp-1); padding-top: var(--sp-1); }
  .nav-subgroup-toggle { justify-content: center; padding: 0; }
  .nav-subgroup-toggle .nav-chevron { display: none; }
  .nav-subitems { margin: 0; padding: 0; border-left: 0; }
  .nav-subitem { justify-content: center; padding: 0 2px; font-size: var(--fs-micro); }
}
/* Hoja «Más» del teléfono: la misma jerarquía (grupo, subsección plegable, pantallas con guía) en una cuadrícula */
.sheet .nav-subgroup-toggle { padding-inline: var(--sp-1); justify-content: flex-start; }
.sheet .nav-subgroup-toggle .nav-chevron { display: inline-block; }
.sheet .nav-subitems { margin-left: var(--sp-2); padding: 0 0 0 var(--sp-3); border-left: 2px solid var(--border-default); }
.sheet .nav-subitems.sheet-grid { display: grid; }
.sheet .nav-subitem { min-height: var(--ctl-lg); justify-content: flex-start; border-color: var(--border-default); font-size: var(--fs-meta); }
.sheet .nav-subitem span { white-space: normal; line-height: var(--lh-snug); }
.sheet-grid .nav-item { min-height: var(--ctl-lg); height: auto; padding-block: var(--sp-1); }
.sheet-grid .nav-item span { white-space: normal; line-height: var(--lh-snug); }
@media (max-width: 420px) { .sheet-grid { grid-template-columns: 1fr; } .sheet .nav-subitems.sheet-grid { grid-template-columns: 1fr; } }

/* Modo revisión del asistente: franja informativa (no es una alarma) arriba en todo el panel y en el celular. */
.review-banner { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); min-height: var(--head-h); padding: var(--sp-2) var(--sp-5); border-bottom: 2px solid var(--warn-border); background: var(--warn-bg); color: var(--warn-text); font-size: var(--fs-body); line-height: var(--lh-snug); }
.review-banner-msg { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; flex: 0 1 auto; }
.review-banner-msg > svg { flex: none; }
.review-sign polygon { fill: var(--warn-sign-fill); stroke: var(--warn-sign-ink); stroke-width: 1.8; stroke-linejoin: round; }
.review-sign path { fill: none; stroke: var(--warn-sign-ink); stroke-width: 2.4; stroke-linecap: round; }
.review-sign circle { fill: var(--warn-sign-ink); }
.review-banner-text { flex: 0 1 auto; min-width: 0; }
.review-banner-text strong { font-weight: var(--fw-bold, 700); color: var(--warn-strong); }
.review-banner-actions { display: inline-flex; flex-wrap: wrap; gap: var(--sp-2); }
/* Botón normal del panel (color primario) con relieve sutil: degradado leve, sombra inferior marcada y brillo interior; al presionar se hunde. */
.review-banner-actions > .ui-btn {
  --relief-base: var(--btn-primary-bg, var(--brand));
  --relief-edge: color-mix(in srgb, var(--relief-base) 62%, black);
  --relief-shadow: 0 2px 0 var(--relief-edge), 0 4px 8px color-mix(in srgb, black 22%, transparent), inset 0 1px 0 color-mix(in srgb, var(--on-brand) 25%, transparent);
  --ctl-h: var(--ctl-md); min-height: var(--ctl-md); padding: var(--sp-1) var(--sp-3); gap: var(--sp-2);
  border: 0; border-radius: var(--r-full); /* Excepción a la regla de 8 px, solo para estos botones: la píldora los distingue de los botones del dashboard. */ color: var(--on-brand); font-weight: var(--fw-medium);
  background: linear-gradient(180deg, color-mix(in srgb, var(--relief-base) 91%, var(--on-brand)), var(--relief-base));
  box-shadow: var(--relief-shadow); transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.review-banner-actions > .ui-btn:hover:not(:disabled) { background: linear-gradient(180deg, color-mix(in srgb, var(--relief-base) 86%, var(--on-brand)), color-mix(in srgb, var(--relief-base) 94%, var(--on-brand))); color: var(--on-brand); }
.review-banner-actions > .ui-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--relief-edge), inset 0 1px 2px color-mix(in srgb, black 25%, transparent); }
.review-banner-actions > .ui-btn:focus-visible { outline: 2px solid var(--warn-text); outline-offset: 2px; }
.m-app > .review-banner { flex: none; padding: var(--sp-2) var(--app-gutter); }
@media (max-width: 759px) { .review-banner { padding: var(--sp-2) var(--sp-4); } }
.review-consent { margin: var(--sp-3) 0; align-items: flex-start; }
.review-error { margin: 0; color: var(--danger-ink); font-size: var(--fs-meta); }
.review-block { max-width: var(--layout-readable); }
/* ⓘ de la franja y su ayuda (aparece con hover, foco o toque) */
.review-banner { position: relative; }
.review-banner-msg { gap: var(--sp-3); }
.review-banner { column-gap: var(--sp-6); }
.review-info { display: inline; margin-left: var(--sp-1); }
.review-nowrap { white-space: nowrap; }
.review-info-btn { display: inline-flex; align-items: center; justify-content: center; vertical-align: text-bottom; width: var(--icon-lg); height: var(--icon-lg); padding: 0; border: 0; border-radius: var(--r-full); background: transparent; color: inherit; cursor: pointer; }
.review-info-btn:hover, .review-info.is-open .review-info-btn { opacity: 1; background: color-mix(in srgb, var(--warn-border) 35%, transparent); }
.review-info-btn:focus-visible { outline: 2px solid var(--warn-text); outline-offset: 2px; opacity: 1; }
.review-tip { white-space: normal; display: none; position: absolute; top: 100%; left: var(--sp-5); z-index: 30; box-sizing: border-box; max-width: min(24rem, calc(100% - var(--sp-8))); margin-top: var(--sp-1); padding: var(--sp-3) var(--sp-4); border: var(--border-w) solid var(--warn-border); border-radius: var(--r-md); background: var(--surface-1); color: var(--text-strong); font-size: var(--fs-meta); line-height: var(--lh-snug); box-shadow: 0 6px 16px color-mix(in srgb, black 18%, transparent); }
.review-info:hover .review-tip, .review-info:focus-within .review-tip, .review-info.is-open .review-tip { display: block; }
.review-banner-actions > .ui-btn { gap: var(--sp-3); }
.review-help { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.review-help .review-help-dot { fill: currentColor; stroke-width: 1.6; }
.test-phones-demo { margin: 0 0 var(--sp-3); }
.review-demo-number { font-weight: var(--fw-medium); white-space: nowrap; }
/* Casilla de conformidad sin marcar al pulsar «Activar asistente»: contorno azul tranquilo (sin sacudida ni tonos de alarma). */
.review-consent.is-needed-a, .review-consent.is-needed-b { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); background: var(--info-soft); outline: 2px solid var(--info-solid); }
.review-consent-hint { margin: 0; color: var(--info-ink); font-size: var(--fs-meta); font-weight: var(--fw-medium); }
/* Diálogo «Antes de activar tu asistente»: título con aviso ámbar, caja de revisión, qué pasará y casilla */
.review-dialog-title { display: inline-flex; align-items: center; gap: var(--sp-2); }
.review-dialog-title > svg { color: var(--info-solid); flex: none; }
.review-notice { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); border-left: var(--sp-1) solid var(--info-solid); border-radius: var(--r-md); background: var(--info-soft); color: var(--text-strong); }
.review-notice strong { display: block; margin-bottom: var(--sp-1); color: var(--info-ink); }
.review-notice p { margin: 0; }
.review-dialog-sub { margin: 0 0 var(--sp-2); font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--text-strong); }
.review-after { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-4); padding: 0; list-style: none; }
.review-after li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.review-after li > svg { flex: none; margin-top: 2px; color: var(--info-solid); }
.review-check { flex: none; width: var(--icon-lg); height: var(--icon-lg); margin: 0; accent-color: var(--brand); cursor: pointer; }
/* Aviso emergente en el celular: ancho completo y por encima de la barra inferior (no se aprieta ni tapa el menú). */
@media (max-width: 759px) { .ui-toast { left: var(--sp-4); right: var(--sp-4); transform: none; max-width: none; bottom: calc(var(--row-h) + var(--sp-5)); flex-wrap: wrap; justify-content: space-between; } }