/* Generated by scripts/build_tokens.mjs from /home/claude/logibrand-studio/design-tokens.json. Do not edit by hand. */
:root {
  --color-surface-page: #faf8f4;
  --color-surface-card: #ffffff;
  --color-surface-raised: #f2eee7;
  --color-surface-sunken: #f2eee7;
  --color-surface-brand-subtle: #eaf6f2;
  --color-surface-scrim: rgba(15, 14, 12, 0.55);
  --color-text-primary: #1c1a17;
  --color-text-secondary: #544f44;
  --color-text-tertiary: #6f695c;
  --color-text-on-action: #ffffff;
  --color-text-link: #1b6a53;
  --color-text-brand: #165644;
  --color-border-default: #e5dfd3;
  --color-border-strong: #6f695c;
  --color-action-primary: #1b6a53;
  --color-action-primary-hover: #165644;
  --color-action-primary-active: #124436;
  --color-action-danger: #c4301c;
  --color-action-danger-hover: #a02715;
  --color-feedback-success: #2a7a3b;
  --color-feedback-warning: #9a5a06;
  --color-feedback-error: #c4301c;
  --color-feedback-info: #1f5fae;
  --color-feedback-success-surface: #eaf6ec;
  --color-feedback-warning-surface: #fdf4de;
  --color-feedback-error-surface: #fdf0ee;
  --color-feedback-info-surface: #eaf1fb;
  --color-feedback-success-text: #1d5a2a;
  --color-feedback-warning-text: #7a4604;
  --color-feedback-error-text: #7f2012;
  --color-feedback-info-text: #163f73;
  --color-office-skin-1: #f2cfae;
  --color-office-skin-2: #d6a07a;
  --color-office-skin-3: #a8714c;
  --color-office-skin-4: #6f4630;
  --color-office-hair-dark: #2b211a;
  --color-office-hair-brown: #6b4426;
  --color-office-hair-light: #c89a52;
  --color-button-primary-bg: #1b6a53;
  --color-button-primary-bg-hover: #165644;
  --color-button-primary-bg-active: #124436;
  --color-button-primary-text: #ffffff;
  --color-button-destructive-bg: #c4301c;
  --color-button-destructive-bg-hover: #a02715;
  --color-button-destructive-text: #ffffff;
  --color-button-secondary-text: #1c1a17;
  --color-button-secondary-border: #6f695c;
  --color-input-bg: #ffffff;
  --color-input-border: #6f695c;
  --color-input-border-error: #c4301c;
  --color-input-text: #1c1a17;
  --color-input-placeholder: #6f695c;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-button: 0.5rem;
  --radius-card: 0.875rem;
  --radius-full: 9999px;
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.08);
  --shadow-md: 0 4px 14px rgba(28, 26, 23, 0.10);
  --shadow-lg: 0 16px 40px rgba(28, 26, 23, 0.16);
  --shadow-focus-ring: 0 0 0 2px #faf8f4, 0 0 0 4px #1b6a53;
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --size-control-sm: 2rem;
  --size-control-md: 2.5rem;
  --size-control-lg: 3rem;
  --size-icon-sm: 1rem;
  --size-icon-md: 1.25rem;
  --size-icon-lg: 1.5rem;
  --size-target-min: 1.5rem;
  --size-target-touch: 2.75rem;
  --size-sidebar: 15rem;
  --size-rail: 4.5rem;
  --size-tabbar: 4rem;
  --size-content-max: 72rem;
  --size-reading: 40rem;
  --size-detail: 26rem;
  --color-chart-1: #1b6a53;
  --color-chart-2: #b4561b;
  --color-chart-3: #2f6db0;
  --color-chart-4: #a8326e;
  --color-chart-5: #6d4fc2;
  --color-chart-6: #8a6a12;
  --color-chart-7: #0f7480;
  --color-chart-8: #56606e;
}
:root[data-theme="dark"] {
  --color-surface-page: #0f0e0c;
  --color-surface-card: #1c1a17;
  --color-surface-raised: #272520;
  --color-surface-sunken: #0f0e0c;
  --color-surface-brand-subtle: #07201a;
  --color-surface-scrim: rgba(0, 0, 0, 0.7);
  --color-text-primary: #faf8f4;
  --color-text-secondary: #cfc8b9;
  --color-text-tertiary: #a39c8d;
  --color-text-on-action: #ffffff;
  --color-text-link: #6fc0a6;
  --color-text-brand: #a2d9c7;
  --color-border-default: #272520;
  --color-border-strong: #6f695c;
  --color-action-primary: #1b6a53;
  --color-action-primary-hover: #165644;
  --color-action-primary-active: #124436;
  --color-action-danger: #c4301c;
  --color-action-danger-hover: #a02715;
  --color-feedback-success: #5cbc70;
  --color-feedback-warning: #f0b83a;
  --color-feedback-error: #ee8070;
  --color-feedback-info: #8db6ec;
  --color-feedback-success-surface: #0b2a12;
  --color-feedback-warning-surface: #33200a;
  --color-feedback-error-surface: #3a0f08;
  --color-feedback-info-surface: #0a1a30;
  --color-feedback-success-text: #8fd49d;
  --color-feedback-warning-text: #f6cf70;
  --color-feedback-error-text: #f5a89b;
  --color-feedback-info-text: #b9d2f3;
  --color-button-primary-bg: #1b6a53;
  --color-button-primary-bg-hover: #165644;
  --color-button-primary-bg-active: #124436;
  --color-button-primary-text: #ffffff;
  --color-button-destructive-bg: #c4301c;
  --color-button-destructive-bg-hover: #a02715;
  --color-button-destructive-text: #ffffff;
  --color-button-secondary-text: #faf8f4;
  --color-button-secondary-border: #6f695c;
  --color-input-bg: #1c1a17;
  --color-input-border: #6f695c;
  --color-input-border-error: #ee8070;
  --color-input-text: #faf8f4;
  --color-input-placeholder: #a39c8d;
  --shadow-sm: 0 1px 2px rgba(28, 26, 23, 0.08);
  --shadow-md: 0 4px 14px rgba(28, 26, 23, 0.10);
  --shadow-lg: 0 16px 40px rgba(28, 26, 23, 0.16);
  --shadow-focus-ring: 0 0 0 2px #0f0e0c, 0 0 0 4px #1b6a53;
}

/* Base: reset, tipografia, utilidades. Todo sale de los tokens (theme.css). Mobile first. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  overflow-wrap: anywhere;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-text-link); text-underline-offset: 0.2em; }
button, input, textarea { font: inherit; color: inherit; }
svg { display: block; flex-shrink: 0; }
img { max-inline-size: 100%; }
[hidden] { display: none !important; }

:focus-visible {
  outline: 0.125rem solid transparent;
  outline-offset: 0.125rem;
  box-shadow: var(--shadow-focus-ring);
}
:focus:not(:focus-visible) { outline: none; }
main:focus, h1:focus { outline: none; box-shadow: none; }

.sr-only {
  position: absolute; inline-size: 0.0625rem; block-size: 0.0625rem; margin: -0.0625rem; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; inset-inline-start: var(--space-4); inset-block-start: var(--space-2); z-index: 100;
  padding: var(--space-3) var(--space-4); border-radius: var(--radius-button);
  background: var(--color-button-primary-bg); color: var(--color-button-primary-text); font-weight: var(--weight-semibold);
  transform: translateY(-300%);
}
.skip-link:focus { transform: none; }

.muted { color: var(--color-text-secondary); }
.small { font-size: var(--text-sm); }
.eyebrow { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-semibold); letter-spacing: 0.02em; }
.plain-list { display: grid; gap: var(--space-2); }
.stack { display: grid; gap: var(--space-8); align-content: start; }
.stack-sm { display: grid; gap: var(--space-4); align-content: start; }

.icon { flex-shrink: 0; }
.icon-xs { inline-size: var(--text-sm); block-size: var(--text-sm); }
.icon-sm { inline-size: var(--size-icon-sm); block-size: var(--size-icon-sm); }
.icon-md { inline-size: var(--size-icon-md); block-size: var(--size-icon-md); }
.icon-lg { inline-size: var(--size-icon-lg); block-size: var(--size-icon-lg); }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { 0% { opacity: 0.55; } 50% { opacity: 1; } 100% { opacity: 0.55; } }
@keyframes slide-in { from { transform: translateX(100%); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Pilas verticales: la columna unica puede encogerse, asi un texto largo no ensancha la pagina. */
.stack, .stack-sm, .plain-list, .item-list, .alert-list, .team-list, .timeline, .agenda, .agenda-day, .section,
.lesson-list, .lesson-row, .mix-list, .mix-main, .mix-report-row, .sched-list, .sched-row, .sched-main, .sched-side, .conn-list, .conn-row, .radio-list, .check-list, .agent-grid, .agent-card, .layer-row, .office, .office-chat, .office-log, .office-compose, .campaign-list, .campaign-card, .campaign-title-wrap, .thread, .thread-item, .thread-form, .versions,
.layer, .kv, .form-grid, .fieldset, .field, .history, .finding-list, .queue-list-col, .queue-detail, .guardian,
.preview, .task-list, .chat, .chat-log, .chat-items, .detail-head, .brand-aside, .brand-check, .hero, .kpi, .stat {
  grid-template-columns: minmax(0, 1fr);
}

/* Componentes. Un rol de accion = una variante. Ocho estados en todo lo interactivo. */

/* ---------- boton */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--size-target-touch); padding-inline: var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius-button);
  font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: var(--leading-tight);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.btn-label { white-space: normal; text-align: center; }
.btn-primary { background: var(--color-button-primary-bg); color: var(--color-button-primary-text); }
.btn-primary:hover { background: var(--color-button-primary-bg-hover); }
.btn-primary:active { background: var(--color-button-primary-bg-active); }
.btn-secondary { background: var(--color-surface-card); color: var(--color-button-secondary-text); border-color: var(--color-button-secondary-border); }
.btn-secondary:hover { background: var(--color-surface-sunken); }
.btn-secondary:active { background: var(--color-surface-brand-subtle); }
.btn-ghost { background: transparent; color: var(--color-text-secondary); }
.btn-ghost:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
.btn-ghost:active { background: var(--color-surface-brand-subtle); }
.btn-danger { background: var(--color-button-destructive-bg); color: var(--color-button-destructive-text); }
.btn-danger:hover { background: var(--color-button-destructive-bg-hover); }
.btn-danger:active { background: var(--color-action-danger-hover); }
.btn-lg { min-block-size: var(--size-control-lg); padding-inline: var(--space-6); font-size: var(--text-base); }
.btn-sm { min-block-size: var(--size-target-min); padding-inline: var(--space-3); }
.btn-icon { padding: 0; min-inline-size: var(--size-target-touch); }
.btn-sm.btn-icon { min-inline-size: var(--size-target-min); }
.btn-full { inline-size: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { background: var(--color-surface-sunken); color: var(--color-text-tertiary); border-color: var(--color-border-default); cursor: not-allowed; }
.btn[aria-busy="true"] { cursor: progress; }
.spinner {
  inline-size: var(--size-icon-sm); block-size: var(--size-icon-sm); flex-shrink: 0;
  border: 0.125rem solid currentColor; border-inline-end-color: transparent; border-radius: var(--radius-full);
  animation: spin calc(var(--duration-normal) * 3) linear infinite;
}

/* ---------- insignias y chips (icono + texto, nunca solo color) */
.badge, .chip {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: var(--space-1) var(--space-2); border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: var(--leading-tight);
  border: 1px solid var(--color-border-default); background: var(--color-surface-sunken); color: var(--color-text-secondary);
  max-inline-size: 100%; text-align: start;
}
.badge-success, .chip-success { background: var(--color-feedback-success-surface); color: var(--color-feedback-success-text); border-color: var(--color-feedback-success); }
.badge-warning, .chip-warning { background: var(--color-feedback-warning-surface); color: var(--color-feedback-warning-text); border-color: var(--color-feedback-warning); }
.badge-danger, .chip-danger { background: var(--color-feedback-error-surface); color: var(--color-feedback-error-text); border-color: var(--color-feedback-error); }
.badge-info, .chip-info { background: var(--color-feedback-info-surface); color: var(--color-feedback-info-text); border-color: var(--color-feedback-info); }
.chip-mono { font-family: var(--font-mono); font-weight: var(--weight-regular); }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip-button { cursor: pointer; min-block-size: var(--size-target-min); background: var(--color-surface-card); white-space: normal; text-align: start; }
.chip-button:hover { background: var(--color-surface-sunken); }
.chip-removable { padding-inline-end: var(--space-1); }
.chip-x { display: inline-grid; place-items: center; min-inline-size: var(--size-target-min); min-block-size: var(--size-target-min); border: 0; background: transparent; border-radius: var(--radius-full); cursor: pointer; color: inherit; }
.chip-x:hover { background: var(--color-surface-raised); }

/* ---------- campos */
.field { display: grid; gap: var(--space-2); align-content: start; }
.field-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.field-hint { font-size: var(--text-sm); color: var(--color-text-secondary); }
.field-error-text { display: flex; gap: var(--space-1); align-items: center; font-size: var(--text-sm); color: var(--color-feedback-error-text); }
.input {
  inline-size: 100%; min-block-size: var(--size-target-touch); padding: var(--space-2) var(--space-3);
  background: var(--color-input-bg); color: var(--color-input-text);
  border: 1px solid var(--color-input-border); border-radius: var(--radius-md);
  transition: border-color var(--duration-fast) var(--ease-out);
}
.input::placeholder { color: var(--color-input-placeholder); }
.input:hover { border-color: var(--color-border-strong); }
.input:disabled { background: var(--color-surface-sunken); color: var(--color-text-tertiary); cursor: not-allowed; }
.input[aria-invalid="true"], .field-error .input { border-color: var(--color-input-border-error); }
.textarea { resize: vertical; line-height: var(--leading-normal); }
.fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: var(--space-3); min-inline-size: 0; }
.checkbox, .radio { inline-size: var(--size-icon-lg); block-size: var(--size-icon-lg); accent-color: var(--color-action-primary); margin: 0; cursor: pointer; }
.check-row { display: flex; gap: var(--space-3); align-items: center; }
.range { inline-size: 100%; min-block-size: var(--size-target-touch); accent-color: var(--color-action-primary); background: transparent; }
.tag-add { display: flex; gap: var(--space-2); }
.tag-add .input { flex: 1; min-inline-size: 0; }
.form-grid { display: grid; gap: var(--space-4); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-block-start: var(--space-4); }

/* ---------- select propio */
.select { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-1); min-inline-size: 0; }
.select-full { inline-size: 100%; }
.select-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); inline-size: 100%;
  min-block-size: var(--size-target-touch); min-inline-size: 0; padding: var(--space-2) var(--space-3); text-align: start; cursor: pointer;
  background: var(--color-input-bg); color: var(--color-input-text); border: 1px solid var(--color-input-border); border-radius: var(--radius-md);
}
.select-trigger:hover { border-color: var(--color-border-strong); }
.select-value { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-list {
  position: absolute; inset-inline: 0; inset-block-start: 100%; z-index: 30; margin-block-start: var(--space-1);
  max-block-size: 16rem; overflow: auto; padding: var(--space-1);
  background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-md);
}
.select-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-block-size: var(--size-target-touch); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); cursor: pointer; }
.select-option .icon { visibility: hidden; }
.select-option[aria-selected="true"] { font-weight: var(--weight-semibold); }
.select-option[aria-selected="true"] .icon { visibility: visible; }
.select-option.is-active, .select-option:hover { background: var(--color-surface-sunken); }
.select-trigger[aria-expanded="true"] { border-color: var(--color-action-primary); }

/* ---------- interruptor */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: var(--size-target-touch); }
.switch-label { font-size: var(--text-sm); }
.switch { display: inline-grid; place-items: center; min-inline-size: var(--size-target-touch); min-block-size: var(--size-target-touch); padding: 0; border: 0; background: transparent; cursor: pointer; flex-shrink: 0; }
.switch-track { display: block; inline-size: var(--space-10); block-size: var(--space-6); border-radius: var(--radius-full); background: var(--color-surface-sunken); border: 1px solid var(--color-border-strong); padding: var(--space-1); transition: background-color var(--duration-fast) var(--ease-out); }
.switch-thumb { display: block; inline-size: var(--space-4); block-size: var(--space-4); border-radius: var(--radius-full); background: var(--color-text-secondary); transition: transform var(--duration-fast) var(--ease-out); }
.switch[aria-checked="true"] .switch-track { background: var(--color-action-primary); border-color: var(--color-action-primary); }
.switch[aria-checked="true"] .switch-thumb { transform: translateX(var(--space-4)); background: var(--color-text-on-action); }
.switch:disabled { cursor: not-allowed; opacity: 0.6; }

/* ---------- medidor, segmentado */
.meter { block-size: var(--space-3); border-radius: var(--radius-full); background: var(--color-surface-sunken); border: 1px solid var(--color-border-default); overflow: hidden; }
.meter-fill { block-size: 100%; inline-size: var(--w, 0%); background: var(--color-action-primary); border-radius: var(--radius-full); }
.segmented { display: inline-flex; padding: var(--space-1); gap: var(--space-1); background: var(--color-surface-sunken); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
.segmented-item { position: relative; }
.segmented-input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segmented-label { display: grid; place-items: center; min-block-size: var(--size-control-sm); min-inline-size: var(--size-target-touch); padding-inline: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.segmented-input:checked + .segmented-label { background: var(--color-surface-card); color: var(--color-text-primary); font-weight: var(--weight-semibold); box-shadow: var(--shadow-sm); }
.segmented-input:focus-visible + .segmented-label { box-shadow: var(--shadow-focus-ring); }

/* ---------- estados de pantalla */
.empty { display: grid; gap: var(--space-2); justify-items: start; padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); }
.empty-title { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.empty-text { color: var(--color-text-secondary); max-inline-size: var(--size-reading); }
.state-error { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-4); border: 1px solid var(--color-feedback-error); border-radius: var(--radius-card); background: var(--color-feedback-error-surface); color: var(--color-feedback-error-text); }
.state-error > div { display: grid; gap: var(--space-2); justify-items: start; }
.state-error-title { font-weight: var(--weight-semibold); }
.state-error .muted { color: inherit; }
.skeleton-group { display: grid; gap: var(--space-3); }
.skeleton { block-size: var(--space-12); border-radius: var(--radius-md); background: var(--color-surface-sunken); animation: shimmer calc(var(--duration-normal) * 5) ease-in-out infinite; }
.callout { display: flex; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.callout > div { display: grid; gap: var(--space-2); justify-items: start; }
.callout-info { background: var(--color-feedback-info-surface); border-color: var(--color-feedback-info); color: var(--color-feedback-info-text); }
.callout-info .muted { color: inherit; }
.callout-title { font-weight: var(--weight-semibold); }

/* ---------- dialogo y panel lateral */
dialog { color: var(--color-text-primary); }
dialog::backdrop { background: var(--color-surface-scrim); }
.dialog { inline-size: min(calc(100% - var(--space-8)), 32rem); max-block-size: calc(100dvh - var(--space-8)); padding: 0; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-raised); box-shadow: var(--shadow-lg); overflow: auto; animation: fade-in var(--duration-fast) var(--ease-out); }
.dialog-sm { inline-size: min(calc(100% - var(--space-8)), 26rem); }
.dialog-head, .drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-4) 0 var(--space-5); }
.dialog-title, .drawer-title { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); font-family: var(--font-display); }
.dialog-desc { padding: var(--space-2) var(--space-5) 0; color: var(--color-text-secondary); }
.dialog-body { padding: var(--space-4) var(--space-5); }
.dialog-actions, .drawer-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-block-start: 1px solid var(--color-border-default); }
.dialog-actions-inline { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.drawer { margin-inline: auto 0; margin-block: 0; inline-size: min(100%, 36rem); block-size: 100dvh; max-block-size: 100dvh; padding: 0; border: 0; border-inline-start: 1px solid var(--color-border-default); background: var(--color-surface-raised); box-shadow: var(--shadow-lg); display: none; flex-direction: column; animation: slide-in var(--duration-normal) var(--ease-emphasized); }
.drawer[open] { display: flex; }
.drawer-body { flex: 1; overflow: auto; padding: var(--space-4) var(--space-5); }
.drawer-actions { background: var(--color-surface-raised); }

/* ---------- avisos */
.toasts { position: fixed; inset-inline: var(--space-4); inset-block-start: var(--space-4); z-index: 60; display: grid; gap: var(--space-2); justify-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); max-inline-size: 32rem; inline-size: 100%; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--color-surface-raised); box-shadow: var(--shadow-md); }
.toast-text { flex: 1; font-size: var(--text-sm); }
.toast-success { border-color: var(--color-feedback-success); }
.toast-danger { border-color: var(--color-feedback-error); background: var(--color-feedback-error-surface); color: var(--color-feedback-error-text); }

/* ---------- tablas */
.table-scroll { overflow-x: auto; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.data-table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.data-table th, .data-table td { padding: var(--space-3) var(--space-4); text-align: start; border-block-end: 1px solid var(--color-border-default); vertical-align: top; }
.data-table thead th { background: var(--color-surface-sunken); font-weight: var(--weight-semibold); color: var(--color-text-secondary); white-space: nowrap; }
.data-table tbody th { font-weight: var(--weight-semibold); }
.data-table tbody tr:last-child > * { border-block-end: 0; }
.data-table .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- listas clave-valor */
.kv { display: grid; gap: var(--space-2); }
.kv-row { display: grid; gap: var(--space-1); padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-default); }
.kv-row:last-child { border-block-end: 0; }
.kv dt { font-size: var(--text-sm); color: var(--color-text-secondary); }
.kv dd { margin: 0; }
.file-input { font: inherit; color: var(--color-text-secondary); max-inline-size: 100%; }
.file-input:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); border-radius: var(--radius-sm); }

/* Estructura de la aplicacion. Mobile first: barra inferior en celular, barra lateral desde 64rem. */

.app { min-block-size: 100dvh; display: block; }
.shell-main { min-inline-size: 0; display: flex; flex-direction: column; min-block-size: 100dvh; }
.main { flex: 1; min-inline-size: 0; padding-block-end: var(--space-8); }
.main:focus { outline: none; }

/* ---------- barra superior */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-surface-page); border-block-end: 1px solid var(--color-border-default); }
.topbar-brand .brand-mark { display: none; }
.topbar-brand { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; flex: 1; max-inline-size: 16rem; }
.topbar-ws { min-inline-size: 0; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.topbar-actions .select { flex: 1; min-inline-size: 0; }
.topbar-demo { flex-wrap: wrap; }
.topbar-demo .topbar-brand, .topbar-demo .topbar-actions { flex: 1 1 100%; max-inline-size: none; }
.topbar-actions .btn-label { display: none; }
.topbar-actions .btn:not(.btn-icon) { padding-inline: var(--space-3); }

.brand { display: flex; align-items: center; gap: var(--space-3); }
.brand-mark { display: inline-grid; place-items: center; inline-size: var(--size-control-md); block-size: var(--size-control-md); flex-shrink: 0; border-radius: var(--radius-md); background: var(--color-action-primary); color: var(--color-text-on-action); font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); }
.brand-name { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); letter-spacing: -0.01em; }

/* ---------- avisos de estado del sistema */
.banners { display: grid; }
.banner { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); border-block-end: 1px solid var(--color-border-default); }
.banner p { margin: 0; }
.banner .icon { margin-block-start: 0.125rem; }
.banner-info { background: var(--color-feedback-info-surface); color: var(--color-feedback-info-text); }
.banner-danger { background: var(--color-feedback-error-surface); color: var(--color-feedback-error-text); }
.login { display: grid; place-items: center; min-block-size: 100dvh; padding: var(--space-6) var(--space-4); background: var(--color-surface-page); }
.login-card { display: grid; gap: var(--space-6); inline-size: 100%; max-inline-size: 26rem; padding: var(--space-6); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); box-shadow: var(--shadow-md); }
.login-head { display: grid; gap: var(--space-2); justify-items: start; }
.login-head .page-title { margin: 0; }
.login-head p { margin: 0; }
.login-form, .login-form-fields { display: grid; gap: var(--space-4); }
.login-message { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-feedback-error-surface); color: var(--color-feedback-error-text); font-size: var(--text-sm); }
.login-message:empty { display: none; }
.login-foot { margin: 0; font-size: var(--text-sm); color: var(--color-text-secondary); }
@media (min-width: 40rem) { .login-card { padding: var(--space-10); } }
.boot-error { display: grid; place-items: center; min-block-size: 100dvh; padding: var(--space-6); }

/* ---------- barra lateral: solo en pantallas anchas */
.sidebar { display: none; }
.nav { display: grid; gap: var(--space-6); }
.nav-group-title { margin: 0 0 var(--space-2); padding-inline: var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-secondary); }
.nav-list { display: grid; gap: var(--space-1); }
.nav-link { position: relative; display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--size-control-md); padding-inline: var(--space-3); border-radius: var(--radius-md); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.nav-link:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
.nav-link:active { background: var(--color-surface-brand-subtle); }
.nav-link[aria-current="page"] { background: var(--color-surface-brand-subtle); color: var(--color-text-brand); font-weight: var(--weight-semibold); }
.nav-text { flex: 1; min-inline-size: 0; }
.nav-badge { display: inline-grid; place-items: center; min-inline-size: var(--size-icon-md); block-size: var(--size-icon-md); padding-inline: var(--space-1); border-radius: var(--radius-full); background: var(--color-action-primary); color: var(--color-text-on-action); font-size: var(--text-xs); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.ws-switch { display: grid; gap: var(--space-2); }
.sidebar-foot { margin-block-start: auto; padding: var(--space-3); border-block-start: 1px solid var(--color-border-default); }

/* ---------- franja de secciones: solo en celular y tableta. Se fija arriba al desplazarse. */
.tabbar { position: sticky; inset-block-start: 0; z-index: 20; display: flex; gap: var(--space-2); overflow-x: auto; padding: var(--space-2) var(--space-4); background: var(--color-surface-page); border-block-end: 1px solid var(--color-border-default); scrollbar-width: thin; }
.tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0; min-block-size: var(--size-target-touch); padding-inline: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-full); background: var(--color-surface-card); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; transition: background-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
.tab:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
.tab:active { background: var(--color-surface-brand-subtle); }
.tab[aria-current="page"] { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-text-on-action); font-weight: var(--weight-semibold); }
.tab[aria-current="page"] .nav-badge { background: var(--color-text-on-action); color: var(--color-action-primary); }

/* ---------- paginas */
.page { inline-size: 100%; max-inline-size: var(--size-content-max); margin-inline: auto; padding: var(--space-5) var(--space-4) var(--space-8); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-content: start; }
.page-wide { max-inline-size: calc(var(--size-content-max) + 18rem); }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.page-head-text { display: grid; gap: var(--space-2); min-inline-size: 0; max-inline-size: var(--size-reading); }
.page-title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -0.015em; }
.page-lead { color: var(--color-text-secondary); font-size: var(--text-lg); }
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.section { display: grid; gap: var(--space-4); align-content: start; min-inline-size: 0; }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.section-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.section-hint { max-inline-size: var(--size-reading); margin-block-start: calc(var(--space-2) * -1); }

.grid-asym, .grid-2, .grid-plan, .grid-brand { display: grid; gap: var(--space-8); align-items: start; }
.grid-asym > *, .grid-2 > *, .grid-plan > *, .grid-brand > * { min-inline-size: 0; }

.save-bar { position: sticky; inset-block-end: var(--space-4); z-index: 15; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); box-shadow: var(--shadow-md); }

/* ---------- tableta */
@media (min-width: 26rem) {
  .topbar-brand .brand-mark { display: inline-grid; }
}

@media (min-width: 48rem) {
  .topbar-actions .btn-label { display: inline; }
  .topbar-demo { flex-wrap: nowrap; }
  .topbar-demo .topbar-brand { flex: 1; max-inline-size: 16rem; }
  .topbar-demo .topbar-actions { flex: 0 0 auto; }
  .topbar-actions .select { flex: none; min-inline-size: 14rem; }
  .page { padding: var(--space-8) var(--space-8) var(--space-12); }
  .page-title { font-size: var(--text-4xl); }
}

/* ---------- escritorio: barra lateral fija, sin barra inferior */
@media (min-width: 64rem) {
  .app { display: grid; grid-template-columns: var(--size-sidebar) minmax(0, 1fr); }
  .sidebar { position: sticky; inset-block-start: 0; block-size: 100dvh; display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-5) var(--space-3); border-inline-end: 1px solid var(--color-border-default); background: var(--color-surface-card); overflow-y: auto; }
  .brand { padding-inline: var(--space-3); }
  .tabbar { display: none; }
  .topbar { position: sticky; inset-block-start: 0; z-index: 20; justify-content: flex-end; }
  .topbar-brand { display: none; }
  .toasts { inset-block-start: auto; inset-block-end: var(--space-4); inset-inline-start: calc(var(--size-sidebar) + var(--space-4)); inset-inline-end: auto; justify-items: start; }
  .grid-asym { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-plan { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); }
  .grid-brand { grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); }
}

/* Impresion y PDF: solo el contenido de la pagina, sin menus ni controles. */
@media print {
  .sidebar, .topbar, .tabbar, .banners, .skip-link, .toasts, .no-print { display: none !important; }
  .app { display: block; }
  body { background: none; }
  .main { padding: 0; }
}

/* Avisos */
.notify-btn { position: relative; }
.notify-count { position: absolute; inset-block-start: calc(var(--space-1) * -1); inset-inline-end: calc(var(--space-1) * -1); }
.notify-list { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.notify-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-2); align-items: start; padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-surface-card); color: var(--color-text-primary); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.notify-item:hover { background: var(--color-surface-sunken); border-color: var(--color-border-strong); }
.notify-item:active { background: var(--color-surface-raised); }
.notify-item > .muted { grid-column: 2; }
.notify-danger > svg { color: var(--color-feedback-error-text); }
.notify-success > svg { color: var(--color-feedback-success-text); }
.notify-warning > svg { color: var(--color-feedback-warning-text); }
.notify-info > svg { color: var(--color-feedback-info-text); }

/* Pantallas. Una cosa lidera por pantalla; lo demas se ordena por tamano, no por adornos. */

/* ---------- hero: lo que lidera */
.hero { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-6); border-radius: var(--radius-card); background: var(--color-surface-brand-subtle); border: 1px solid var(--color-border-default); }
.hero-number { display: flex; align-items: baseline; gap: var(--space-3); font-family: var(--font-display); line-height: var(--leading-tight); }
.hero-count { font-size: var(--text-5xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.hero-unit { font-size: var(--text-xl); font-weight: var(--weight-medium); color: var(--color-text-secondary); }
.hero-text { max-inline-size: var(--size-reading); font-size: var(--text-lg); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-block-start: var(--space-2); }
.hero-metric .hero-statement { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: -0.015em; max-inline-size: var(--size-reading); }

/* ---------- filas de piezas */
.item-list { display: grid; gap: var(--space-2); }
.item-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); color: var(--color-text-primary); text-decoration: none; transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out); }
.item-row:hover { background: var(--color-surface-sunken); border-color: var(--color-border-strong); }
.item-row:active { background: var(--color-surface-brand-subtle); }
.item-row.is-selected { background: var(--color-surface-brand-subtle); border-color: var(--color-action-primary); }
.item-channel { display: grid; place-items: center; inline-size: var(--size-control-md); block-size: var(--size-control-md); border-radius: var(--radius-md); background: var(--color-surface-sunken); color: var(--color-text-secondary); }
.item-main { display: grid; gap: var(--space-1); min-inline-size: 0; }
.item-title { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { font-size: var(--text-sm); color: var(--color-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-badges { grid-column: 2; display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Hoy */
.timeline { display: grid; gap: var(--space-2); }
.timeline-item { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-3); align-items: start; padding-block: var(--space-3); border-block-end: 1px solid var(--color-border-default); }
.timeline-item:last-child { border-block-end: 0; }
.timeline-day { font-weight: var(--weight-semibold); }
.timeline-what { display: inline-flex; align-items: center; min-block-size: var(--size-target-min); color: var(--color-text-link); }
.alert-list { display: grid; gap: var(--space-2); }
.alert-row { display: flex; align-items: center; gap: var(--space-3); min-block-size: var(--size-target-touch); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-card); color: var(--color-text-primary); text-decoration: none; }
.alert-row > span { flex: 1; min-inline-size: 0; }
.alert-row:hover { background: var(--color-surface-sunken); }
.alert-danger { background: var(--color-feedback-error-surface); border-color: var(--color-feedback-error); color: var(--color-feedback-error-text); }
.alert-warning { background: var(--color-feedback-warning-surface); border-color: var(--color-feedback-warning); color: var(--color-feedback-warning-text); }
.alert-info { background: var(--color-feedback-info-surface); border-color: var(--color-feedback-info); color: var(--color-feedback-info-text); }
.team-list { display: grid; }
.team-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--size-target-touch); border-block-end: 1px solid var(--color-border-default); }
.team-row:last-child { border-block-end: 0; }
.team-name { font-weight: var(--weight-medium); }
.plan-text { margin-block: var(--space-2); }

/* ---------- Aprobaciones */
.filter-bar { overflow-x: auto; margin-inline: calc(var(--space-4) * -1); padding-inline: var(--space-4); }
.tabs { display: flex; gap: var(--space-2); inline-size: max-content; }
.tab-link { display: inline-flex; align-items: center; min-block-size: var(--size-target-touch); padding-inline: var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--color-border-default); background: var(--color-surface-card); color: var(--color-text-secondary); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.tab-link:hover { background: var(--color-surface-sunken); color: var(--color-text-primary); }
.tab-link:active { background: var(--color-surface-brand-subtle); }
.tab-link[aria-current="page"] { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--color-text-on-action); font-weight: var(--weight-semibold); }
.queue { display: grid; gap: var(--space-4); align-items: start; margin-block-start: var(--space-4); }
.queue-list-col { display: grid; gap: var(--space-3); min-inline-size: 0; align-content: start; }
.queue-tools { max-inline-size: 16rem; }
.queue-detail { display: none; min-inline-size: 0; gap: var(--space-6); align-content: start; padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.queue-has-detail .queue-detail { display: grid; }
.queue-has-detail .queue-list-col { display: none; }
.detail-back { justify-self: start; }
.detail-head { display: grid; gap: var(--space-2); }
.detail-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); }
.detail-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.detail-empty { display: grid; justify-items: center; gap: var(--space-2); align-content: center; min-block-size: 16rem; padding: var(--space-6); text-align: center; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); color: var(--color-text-secondary); }
.preview { display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-raised); }
.preview-body { white-space: pre-wrap; font-size: var(--text-base); max-inline-size: var(--size-reading); }
.guardian { display: grid; gap: var(--space-3); justify-items: start; }
.finding-list { display: grid; gap: var(--space-2); inline-size: 100%; }
.finding { display: flex; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-md); border: 1px solid var(--color-border-default); background: var(--color-surface-sunken); }
.finding-block { background: var(--color-feedback-error-surface); border-color: var(--color-feedback-error); color: var(--color-feedback-error-text); }
.finding-warn { background: var(--color-feedback-warning-surface); border-color: var(--color-feedback-warning); color: var(--color-feedback-warning-text); }
.finding .muted { color: inherit; }
.finding-msg { font-weight: var(--weight-medium); }
.needs-row { display: flex; align-items: flex-start; gap: var(--space-2); }
.history { display: grid; }
.history li { padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-default); }
.history li:last-child { border-block-end: 0; }
.history-what { font-weight: var(--weight-medium); }
.action-bar { position: sticky; inset-block-end: 0; z-index: 10; display: grid; gap: var(--space-3); margin-inline: calc(var(--space-4) * -1); margin-block-end: calc(var(--space-4) * -1); padding: var(--space-3) var(--space-4); background: var(--color-surface-raised); border-block-start: 1px solid var(--color-border-default); border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }
.action-why { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--color-text-secondary); }
.action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.action-row > :first-child:not(:only-child) { grid-column: 1 / -1; }

/* ---------- Calendario */
.cal-nav { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.cal-month { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); flex: 1; text-align: center; }
.cal-month::first-letter, .agenda-title::first-letter { text-transform: uppercase; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); }
.legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend-inline { margin-block: var(--space-3); }
.cal-desktop { display: none; }
.agenda { display: grid; gap: var(--space-6); }
.agenda-day { display: grid; gap: var(--space-2); }
.agenda-title { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.cal-chip { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--size-target-touch); padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); border: 1px solid var(--color-border-default); background: var(--color-surface-card); color: var(--color-text-primary); text-decoration: none; font-size: var(--text-sm); min-inline-size: 0; }
.cal-chip:hover { background: var(--color-surface-sunken); }
.cal-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-chip-success { background: var(--color-feedback-success-surface); border-color: var(--color-feedback-success); color: var(--color-feedback-success-text); }
.cal-chip-warning { background: var(--color-feedback-warning-surface); border-color: var(--color-feedback-warning); color: var(--color-feedback-warning-text); }
.cal-chip-danger { background: var(--color-feedback-error-surface); border-color: var(--color-feedback-error); color: var(--color-feedback-error-text); }
.cal-chip-info { background: var(--color-feedback-info-surface); border-color: var(--color-feedback-info); color: var(--color-feedback-info-text); }

/* ---------- Plan */
.plan-form { display: grid; gap: var(--space-5); }
.reuse-list { display: grid; gap: var(--space-3); }
.reuse-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; padding-block-end: var(--space-3); border-block-end: 1px solid var(--color-border-default); }
.reuse-row > :not(.btn) { grid-column: 1; }
.reuse-row > .btn { grid-column: 2; grid-row: 1; }
.channel-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; min-block-size: var(--size-target-touch); }
.stepper { display: inline-flex; align-items: center; gap: var(--space-2); }
.mix-list { display: grid; gap: var(--space-3); }
.mix-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: end; }
.mix-main { display: grid; gap: var(--space-1); min-inline-size: 0; }
.mix-share { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.mix-share .input { inline-size: calc(var(--space-8) * 2); }
.mix-total { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-feedback-success-text); }
.mix-total-off { color: var(--color-feedback-warning-text); }
.mix-report-row { display: grid; gap: var(--space-1); }
.stepper-value { min-inline-size: var(--space-8); text-align: center; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.plan-progress { display: grid; gap: var(--space-2); }
.plan-group { display: grid; gap: var(--space-2); margin-block-start: var(--space-6); }
.plan-group-title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.task-list { display: grid; border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.task-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-1) var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border-default); }
.task-row:last-child { border-block-end: 0; }
.task-title { font-weight: var(--weight-medium); grid-column: 1 / -1; }

/* ---------- Rendimiento */
.kpi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.kpi-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi-row-3 { grid-template-columns: minmax(0, 1fr); }
.kpi { display: grid; gap: var(--space-2); align-content: start; padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.stat { display: grid; gap: var(--space-1); }
.stat-label { font-size: var(--text-sm); color: var(--color-text-secondary); font-weight: var(--weight-medium); }
.stat-value { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; }
.delta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.delta-good { color: var(--color-feedback-success-text); }
.delta-bad { color: var(--color-feedback-error-text); }
.delta-neutral, .delta-none { color: var(--color-text-secondary); }
.delta-ctx { font-weight: var(--weight-regular); color: var(--color-text-secondary); }
.kpi .delta-ctx { display: none; }
.hl-row { display: flex; align-items: center; gap: var(--space-2); }
.chart-fig { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.chart { inline-size: 100%; block-size: 14rem; overflow: visible; }
.chart-grid { stroke: var(--color-border-default); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart-line { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart-line-1 { stroke: var(--color-chart-1); }
.chart-line-2 { stroke: var(--color-chart-2); stroke-dasharray: 8 5; }
.legend-key { display: inline-block; inline-size: var(--space-6); block-size: var(--space-1); border-radius: var(--radius-full); }
.legend-key-1 { background: var(--color-chart-1); }
.legend-key-2 { background: repeating-linear-gradient(90deg, var(--color-chart-2) 0 0.5rem, transparent 0.5rem 0.75rem); }
.chart-details summary { display: inline-flex; align-items: center; min-block-size: var(--size-target-touch); cursor: pointer; color: var(--color-text-link); font-size: var(--text-sm); }
.chart-table { font-size: var(--text-sm); }

/* ---------- SEO y GEO */
.layer-row { display: grid; gap: var(--space-3); }
.layer { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.layer-name { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-bold); }

/* ---------- Agentes */
.agent-grid { display: grid; gap: var(--space-4); }
.agent-card { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-5); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.agent-card-lead { background: var(--color-surface-brand-subtle); }
.agent-card .btn { justify-self: start; }
.agent-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.agent-name { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-bold); }
.agent-card-lead .agent-name { font-size: var(--text-2xl); }
.agent-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.agent-stats dt { font-size: var(--text-xs); color: var(--color-text-secondary); }
.agent-stats dd { margin: 0; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.agent-warn { display: flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-feedback-warning-text); }
.radio-list { display: grid; gap: var(--space-2); }
.radio-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); }
.radio-row.is-off { opacity: 0.7; }
.radio-row label { display: grid; gap: var(--space-1); cursor: pointer; }
.radio-title { font-weight: var(--weight-semibold); }
.run-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.sched-list { display: grid; gap: var(--space-3); }
.sched-row { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.sched-main, .sched-side { display: grid; gap: var(--space-2); align-content: start; }
.sched-side .btn { justify-self: start; }

/* ---------- Aprendizaje */
.lesson-list { display: grid; gap: var(--space-3); }
.lesson-row { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.lesson-main { display: grid; gap: var(--space-1); }
.lesson-rule { font-size: var(--text-lg); font-weight: var(--weight-medium); max-inline-size: var(--size-reading); }
.lesson-eval { display: grid; gap: var(--space-2); justify-items: start; }
.lesson-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Marca */
.brand-aside { display: grid; gap: var(--space-3); align-content: start; padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.brand-check { display: grid; gap: var(--space-3); }
.brand-score { display: flex; align-items: baseline; gap: var(--space-1); font-family: var(--font-display); }
.brand-score .hero-count { font-size: var(--text-4xl); }
.check-list { display: grid; gap: var(--space-2); }
.check-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); }
.check-todo { display: grid; gap: var(--space-1); }
.check-todo > .btn { justify-self: start; padding-inline: 0; min-inline-size: 0; text-align: start; font-weight: var(--weight-semibold); }
.check-todo > .btn .btn-label { white-space: normal; }
.check-missing { display: grid; gap: var(--space-1); padding-inline-start: var(--space-6); font-size: var(--text-sm); color: var(--color-text-secondary); list-style: disc; }
.tone-row { display: grid; gap: var(--space-2); }
.tone-scale { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: var(--space-3); }
.tone-scale .range { grid-column: 1 / -1; grid-row: 1; }
.tone-scale > :nth-child(1) { grid-row: 2; grid-column: 1; }
.tone-scale > :nth-child(3) { grid-row: 2; grid-column: 3; text-align: end; }
.tone-value { grid-row: 2; grid-column: 2; font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }
.row-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-sunken); }
.row-grow { min-inline-size: 0; }
.swatch-field { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: end; }
.swatch-row { display: flex; align-items: center; gap: var(--space-3); }
.swatch { inline-size: var(--size-control-lg); block-size: var(--size-control-lg); border-radius: var(--radius-md); border: 1px solid var(--color-border-strong); background: var(--swatch, transparent); }

/* ---------- Conexiones */
.conn-list { display: grid; gap: var(--space-3); }
.conn-row { display: grid; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.conn-main { display: grid; gap: var(--space-1); }
.conn-name { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.conn-side { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* ---------- Pedir algo (panel) */
.chat { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: var(--space-4); min-block-size: 100%; }
.chat-log { display: grid; gap: var(--space-3); align-content: start; overflow-y: auto; }
.chat-empty { padding: var(--space-4); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-card); color: var(--color-text-secondary); }
.chat-msg { padding: var(--space-3) var(--space-4); border-radius: var(--radius-card); max-inline-size: 90%; display: grid; gap: var(--space-2); }
.chat-user { justify-self: end; background: var(--color-action-primary); color: var(--color-text-on-action); }
.chat-agent { justify-self: start; background: var(--color-surface-sunken); border: 1px solid var(--color-border-default); }
.chat-who { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.chat-items { display: grid; gap: var(--space-2); margin-block-start: var(--space-2); }
.chat-item { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-block-size: var(--size-target-touch); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-default); border-radius: var(--radius-md); background: var(--color-surface-card); color: var(--color-text-primary); text-decoration: none; }
.chat-item:hover { background: var(--color-surface-sunken); }
.chat-examples { display: grid; gap: var(--space-2); }
.chat-compose { display: grid; gap: var(--space-2); }
.chat-compose-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ---------- tableta */
@media (min-width: 48rem) {
  .kpi-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .layer-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agent-card-lead { grid-column: 1 / -1; }
  .lesson-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto; align-items: center; }
  .sched-row { grid-template-columns: minmax(0, 1fr) minmax(0, 16rem); align-items: start; }
  .conn-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .conn-side { justify-content: flex-end; }
  .hero { padding: var(--space-8); }
  .hero-count { font-size: var(--text-6xl); }
  .task-row { grid-template-columns: minmax(0, 2fr) auto auto auto; }
  .task-title { grid-column: auto; }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-metric .hero-statement { font-size: var(--text-4xl); }
}

/* ---------- escritorio */
@media (min-width: 40rem) {
  .report-controls { grid-template-columns: auto minmax(0, 1fr); }
  .report-margin { grid-template-columns: minmax(0, 24rem) auto; }
  .audit-form { grid-template-columns: minmax(0, 1fr) auto; }
  .kpi-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .kpi-row { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .kpi-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agent-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cal-desktop { display: block; }
  .cal-mobile { display: none; }
  .filter-bar { margin-inline: 0; padding-inline: 0; }
  .queue { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); gap: var(--space-6); }
  .queue-detail { display: grid; padding: var(--space-6); }
  .queue-has-detail .queue-list-col { display: grid; }
  .detail-back { display: none; }
  .action-row { display: flex; flex-wrap: wrap; }
  .action-row > :first-child:not(:only-child) { grid-column: auto; }
  .action-bar { inset-block-end: 0; margin-inline: calc(var(--space-6) * -1); margin-block-end: calc(var(--space-6) * -1); padding: var(--space-4) var(--space-6); }
  .cal-grid { border: 1px solid var(--color-border-default); border-radius: var(--radius-card); overflow: hidden; background: var(--color-surface-card); }
  .cal-head, .cal-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .cal-wd { padding: var(--space-2) var(--space-3); background: var(--color-surface-sunken); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
  .cal-cell { display: grid; align-content: start; gap: var(--space-1); min-block-size: 9rem; min-inline-size: 0; padding: var(--space-2); border-block-start: 1px solid var(--color-border-default); border-inline-start: 1px solid var(--color-border-default); }
  .cal-cell:first-child { border-inline-start: 0; }
  .cal-out { background: var(--color-surface-sunken); }
  .cal-today { background: var(--color-surface-brand-subtle); }
  .cal-day { font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--color-text-secondary); }
  .cal-today .cal-day { color: var(--color-text-brand); }
  .cal-items { display: grid; gap: var(--space-1); min-inline-size: 0; }
  .cal-chip { min-block-size: var(--size-target-min); }
  .cal-more { padding-inline: var(--space-2); }
}

.quote { margin: 0; padding-inline-start: var(--space-4); border-inline-start: 1px solid var(--color-border-strong); color: var(--color-text-secondary); font-style: italic; }

.cap-metrics { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); column-gap: var(--space-4); }
.cap-metrics .kv-row { border-block-end: 0; padding-block: var(--space-1); }

.agent-view { margin: 0; padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-sunken); white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: var(--text-sm); line-height: var(--leading-normal); max-block-size: 60vh; overflow: auto; }
.subhead { font-size: var(--text-base); font-weight: var(--weight-semibold); margin-block-end: var(--space-2); }
.report-controls { display: grid; gap: var(--space-4); align-items: end; }
.report-margin { display: grid; gap: var(--space-3); align-items: end; }
.verdict-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.verdict-card { display: grid; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.verdict-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }
.verdict-name { font-size: var(--text-lg); font-weight: var(--weight-semibold); }
.kv-list { display: grid; margin: 0; padding: 0; list-style: none; }
@media print {
  .no-print, .skip-link, .toasts, .page-actions { display: none !important; }
  .report .verdict-card, .report .kpi, .report .hero { break-inside: avoid; }
}
.diag-q { display: grid; gap: var(--space-2); padding-block-end: var(--space-3); border-block-end: 1px solid var(--color-border-default); }
.diag-q:last-child { border-block-end: 0; }
.diag-q-text { font-weight: var(--weight-medium); }
.diag-q .segmented { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
.diag-q .segmented-label { text-align: center; overflow-wrap: normal; word-break: normal; }
.diag-actions { display: grid; gap: var(--space-3); justify-items: start; }
.audit-form { display: grid; gap: var(--space-3); align-items: end; }
.audit-result:focus { outline: none; }
.audit-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.audit-score-n { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); font-variant-numeric: tabular-nums; }
.audit-priorities { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.audit-priorities li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border-default); border-radius: var(--radius-card); background: var(--color-surface-card); }
.audit-pri-title { font-weight: var(--weight-semibold); }
.audit-evidence { overflow-wrap: anywhere; }
.opp-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.opp-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); inline-size: 100%; }
.opp-tabs .segmented-label { text-align: center; overflow-wrap: normal; word-break: normal; }
@media (min-width: 40rem) {
  .opp-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: fit-content; }
}

@media (min-width: 40rem) {
  .diag-q .segmented { grid-template-columns: repeat(4, minmax(0, 1fr)); inline-size: fit-content; }
}

/* ---------- conversacion del equipo y versiones de una pieza */
.thread { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.thread-item { display: grid; gap: var(--space-1); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-sunken); border: 1px solid var(--color-border-default); justify-items: start; }
.thread-item.is-resolved { opacity: 0.75; }
.thread-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-2); }
.thread-who { font-weight: var(--weight-semibold); }
.thread-text { white-space: pre-wrap; }
.thread-form { display: grid; gap: var(--space-2); justify-items: start; }
.thread-form .field { inline-size: 100%; }
.versions { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.version { border: 1px solid var(--color-border-default); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); background: var(--color-surface-card); }
.version > summary { cursor: pointer; min-block-size: var(--size-target-touch); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1); }
.version > summary:hover .version-title { text-decoration: underline; }
.version[open] > summary { margin-block-end: var(--space-2); }
.version-title { font-weight: var(--weight-semibold); }
.version-plain { white-space: pre-wrap; }
.diff { white-space: pre-wrap; line-height: var(--leading-normal); }
.diff-add { background: var(--color-feedback-success-surface); color: var(--color-feedback-success-text); text-decoration: underline; text-decoration-thickness: 0.0625rem; border-radius: var(--radius-sm); }
.diff-del { background: var(--color-feedback-error-surface); color: var(--color-feedback-error-text); text-decoration: line-through; border-radius: var(--radius-sm); }

/* ---------- oficina: plano visto desde arriba, con el equipo como personajes */
.office { display: grid; gap: var(--space-5); align-items: start; }
.office-live { margin-block: calc(var(--space-2) * -1) var(--space-2); }
.office-plan { min-inline-size: 0; }

/* El plano: las paredes son el fondo y el espacio entre salas. Movil: una sala debajo de otra. */
.plan {
  position: relative; display: grid; gap: var(--space-1); padding: var(--space-1);
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "lead" "mesa" "floor" "cafe" "lounge";
  background: var(--color-border-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}
.room { position: relative; display: grid; gap: var(--space-3); align-content: start; min-inline-size: 0; padding: var(--space-10) var(--space-4) var(--space-4); border-radius: var(--radius-md); }
.room-label { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); padding: var(--space-1) var(--space-2); border-radius: var(--radius-full); background: var(--color-surface-card); border: 1px solid var(--color-border-default); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-secondary); }
.room-lead { grid-area: lead; background-color: var(--color-surface-brand-subtle); background-image: radial-gradient(var(--color-border-default) 0.0625rem, transparent 0.0625rem); background-size: 1rem 1rem; }
.room-mesa { grid-area: mesa; background: var(--color-surface-card); }
.room-floor { grid-area: floor; background-color: var(--color-surface-page); background-image: repeating-linear-gradient(90deg, transparent 0 3.5rem, var(--color-border-default) 3.5rem 3.5625rem); }
.room-cafe { grid-area: cafe; background-color: var(--color-surface-card); background-image: conic-gradient(var(--color-surface-raised) 25%, transparent 0 50%, var(--color-surface-raised) 0 75%, transparent 0); background-size: 2rem 2rem; }
.door { position: absolute; background: inherit; }
.door-lead { inset-block-end: calc(var(--space-1) * -1); inset-inline-start: 40%; inline-size: 3rem; block-size: var(--space-1); background: var(--color-surface-brand-subtle); }
.door-mesa { inset-block-end: calc(var(--space-1) * -1); inset-inline-end: 30%; inline-size: 3rem; block-size: var(--space-1); background: var(--color-surface-card); }
.plant { position: absolute; inline-size: 1.75rem; block-size: 1.75rem; border-radius: var(--radius-full); background: radial-gradient(circle at 35% 35%, var(--color-feedback-success-surface) 0 20%, var(--color-feedback-success) 21% 100%); box-shadow: 0 0 0 0.25rem var(--color-surface-raised), 0 0 0 0.3125rem var(--color-border-strong); pointer-events: none; }
.plant-a { inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }
.plant-b { inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }
.plant-c { inset-block-end: var(--space-3); inset-inline-start: var(--space-3); inline-size: 1.25rem; block-size: 1.25rem; }

/* Sala del lider: pizarra con la revision del dia y mesa de reuniones. */
.whiteboard { display: grid; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-card); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); }
.whiteboard-title { font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-secondary); }
.whiteboard-stats { overflow-wrap: normal; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
.whiteboard-stats dt { font-size: var(--text-xs); color: var(--color-text-secondary); }
.whiteboard-stats dd { font-size: var(--text-xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: var(--leading-tight); }
.meeting { position: relative; block-size: 9rem; display: grid; place-items: center; }
.meeting-table { inline-size: 9rem; block-size: 4.5rem; border-radius: var(--radius-full); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); display: grid; place-items: center; }
.meeting-papers { inline-size: 1.5rem; block-size: 1.125rem; border-radius: var(--radius-sm); background: var(--color-surface-card); border: 1px solid var(--color-border-default); transform: rotate(-8deg); }
.meeting .spot { position: absolute; }
.spot-n { inset-block-start: 1.5rem; inset-inline-start: 50%; }
.spot-s { inset-block-end: 0.5rem; inset-inline-start: 50%; }
.spot-e { inset-block-start: 55%; inset-inline-end: calc(50% - 6.5rem); }
.spot-w { inset-block-start: 55%; inset-inline-start: calc(50% - 6.5rem); }
.lead-desk { display: grid; justify-items: center; }

/* Tu mesa: el mostrador donde los agentes dejan lo que proponen. */
.counter { display: grid; gap: var(--space-4); }
.counter-tray { display: grid; gap: var(--space-1); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); }
.counter-count { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); }
.counter-number { font-size: var(--text-5xl); font-weight: var(--weight-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.counter-unit { font-size: var(--text-lg); color: var(--color-text-secondary); }
.counter-front { position: relative; display: flex; justify-content: space-around; block-size: 3.5rem; }
.counter-front .spot { position: relative; inset-block-start: 3rem; }
.counter-front [data-spot="visit:you"] { position: absolute; inset-inline-end: var(--space-2); inset-block-start: 3rem; }
.counter-action { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* Piso del equipo: un escritorio por especialista. */
.floor-desks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-3); }
.station {
  position: relative; display: grid; justify-items: center; gap: var(--space-1); min-inline-size: 0; inline-size: 100%;
  padding: var(--space-3) var(--space-2) var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--color-text-primary); cursor: pointer; text-align: center;
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.station:hover { background: var(--color-surface-card); border-color: var(--color-border-default); box-shadow: var(--shadow-sm); }
.station:active { background: var(--color-surface-raised); }
.station:focus-visible { box-shadow: var(--shadow-focus-ring); }
.station:disabled { cursor: not-allowed; opacity: 0.5; }
.station-desk { position: relative; z-index: 5; display: grid; place-items: center; inline-size: 100%; max-inline-size: 8.5rem; block-size: 3.25rem; border-radius: var(--radius-sm); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-sm); }
.station-monitor { display: grid; place-items: center; inline-size: 2.75rem; block-size: 1.75rem; border-radius: var(--radius-sm); background: var(--color-surface-sunken); border: 1px solid var(--color-border-strong); color: var(--color-text-secondary); transition: box-shadow var(--duration-normal) var(--ease-out), background-color var(--duration-normal) var(--ease-out); }
.station-working .station-monitor { background: var(--color-feedback-info-surface); border-color: var(--color-feedback-info); color: var(--color-feedback-info-text); box-shadow: 0 0 0.75rem var(--color-feedback-info); }
.station-stuck .station-monitor { background: var(--color-feedback-error-surface); border-color: var(--color-feedback-error); color: var(--color-feedback-error-text); }
.station-off .station-desk, .station-off .station-plate { opacity: 0.6; }
.station-papers { position: absolute; z-index: 1; inset-block-start: calc(var(--space-2) * -1); inset-inline-end: var(--space-2); display: grid; place-items: center; inline-size: 1.5rem; block-size: 1.75rem; border-radius: var(--radius-sm); background: var(--color-feedback-warning-surface); border: 1px solid var(--color-feedback-warning); box-shadow: 0.125rem 0.125rem 0 0 var(--color-surface-card), 0.1875rem 0.1875rem 0 0 var(--color-feedback-warning); }
.station-papers-count { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--color-feedback-warning-text); }
.station-mug { position: absolute; inset-block-end: var(--space-1); inset-inline-start: var(--space-2); inline-size: 0.625rem; block-size: 0.625rem; border-radius: var(--radius-full); background: var(--color-surface-card); border: 0.125rem solid var(--color-border-strong); }
.spot { display: block; inline-size: 0.5rem; block-size: 0.5rem; pointer-events: none; }
.spot-seat { inline-size: 1.75rem; block-size: 1.25rem; margin-block: var(--space-8) calc(var(--space-2) * -1); border-radius: var(--radius-md) var(--radius-md) var(--radius-sm) var(--radius-sm); background: var(--color-surface-sunken); border: 1px solid var(--color-border-strong); }
.spot-visit { position: absolute; inset-inline-end: 0; inset-block-start: 7.5rem; }
.station-plate { display: grid; gap: 0; inline-size: 100%; min-inline-size: 0; }
.station-name { font-weight: var(--weight-semibold); font-size: var(--text-sm); }
.station-status { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-inline-size: 0; font-size: var(--text-xs); color: var(--color-text-secondary); }
.station-status > :last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.station-working .station-status { color: var(--color-feedback-info-text); }
.station-waiting .station-status { color: var(--color-feedback-warning-text); }
.station-stuck .station-status { color: var(--color-feedback-error-text); }
.lead-desk .station { max-inline-size: 11rem; }

/* Cafe: barra, sofa y lugares para quien esta libre. */
.cafe { display: grid; gap: var(--space-3); }
.coffee-bar { display: flex; align-items: center; gap: var(--space-2); block-size: 2.5rem; padding-inline: var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); }
.coffee-machine { inline-size: 1.5rem; block-size: 1.75rem; border-radius: var(--radius-sm); background: var(--color-text-secondary); }
.coffee-cup { inline-size: 0.75rem; block-size: 0.75rem; border-radius: var(--radius-full); background: var(--color-surface-card); border: 0.125rem solid var(--color-border-strong); }
.cafe-spots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); block-size: 4rem; align-items: end; justify-items: center; }
.sofa { block-size: 1.5rem; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm); background: var(--color-chart-3); opacity: 0.35; }
.cafe-note { margin-block-start: var(--space-1); }

/* Sala de estar: ventana con la hora real, sofa, ping-pong y biblioteca. Es tiempo libre, no trabajo fingido. */
.room-lounge { grid-area: lounge; background-color: var(--color-surface-card); background-image: repeating-linear-gradient(0deg, transparent 0 1.75rem, var(--color-border-default) 1.75rem 1.8125rem); }
.lounge { position: relative; display: grid; gap: var(--space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "window clock" "sofa sofa" "pingpong reading"; align-items: center; }
.lounge-window { grid-area: window; position: relative; display: grid; justify-items: center; }
.window-sky { position: relative; display: block; inline-size: 100%; max-inline-size: 8rem; block-size: 4.5rem; overflow: hidden; border-radius: var(--radius-sm); border: 0.25rem solid var(--color-surface-raised); box-shadow: 0 0 0 1px var(--color-border-strong); background: var(--color-feedback-info-surface); transition: background-color calc(var(--duration-normal) * 2) var(--ease-out); }
.window-sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent calc(50% - 0.125rem), var(--color-surface-raised) calc(50% - 0.125rem) calc(50% + 0.125rem), transparent calc(50% + 0.125rem)); }
.window-sun { position: absolute; inset-block-start: 0.75rem; inset-inline-end: 1rem; inline-size: 1.25rem; block-size: 1.25rem; border-radius: var(--radius-full); background: var(--color-feedback-warning); box-shadow: 0 0 0.75rem var(--color-feedback-warning); }
.window-cloud { position: absolute; inset-block-start: 1.75rem; inset-inline-start: -2.5rem; inline-size: 2.5rem; block-size: 0.75rem; border-radius: var(--radius-full); background: var(--color-surface-card); opacity: 0.9; animation: cloud-drift calc(var(--duration-normal) * 80) linear infinite; }
.window-cloud-b { inset-block-start: 0.75rem; inline-size: 1.75rem; animation-delay: calc(var(--duration-normal) * -40); }
.plan[data-sky="dusk"] .window-sky { background: var(--color-feedback-warning-surface); }
.plan[data-sky="dusk"] .window-sun { inset-block-start: 2.5rem; background: var(--color-action-danger); box-shadow: 0 0 0.75rem var(--color-action-danger); }
.plan[data-sky="night"] .window-sky { background: var(--color-text-primary); }
.plan[data-sky="night"] .window-sun { background: var(--color-surface-card); box-shadow: 0 0 0.5rem var(--color-surface-card); inline-size: 0.875rem; block-size: 0.875rem; }
.plan[data-sky="night"] .window-cloud { opacity: 0.25; }
.spot-window { position: absolute; inset-block-end: -1.75rem; inset-inline-start: 50%; }
.lounge-clock { grid-area: clock; display: grid; justify-items: center; gap: var(--space-1); }
.clock-face { position: relative; display: block; inline-size: 3rem; block-size: 3rem; border-radius: var(--radius-full); background: var(--color-surface-raised); border: 0.1875rem solid var(--color-border-strong); box-shadow: var(--shadow-sm); }
.clock-hand { position: absolute; inset-block-end: 50%; inset-inline-start: calc(50% - 0.0625rem); inline-size: 0.125rem; border-radius: var(--radius-full); background: var(--color-text-primary); transform-origin: bottom center; }
.clock-hour { block-size: 0.8125rem; transform: rotate(var(--clock-h, 0deg)); }
.clock-min { block-size: 1.125rem; background: var(--color-action-primary); transform: rotate(var(--clock-m, 0deg)); }
.clock-text { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.lounge-sofa { grid-area: sofa; position: relative; display: grid; justify-items: center; gap: var(--space-2); padding-block: var(--space-6) var(--space-2); }
.rug { position: absolute; inset: var(--space-2) 10% 0; border-radius: var(--radius-full); background: repeating-radial-gradient(circle, var(--color-surface-brand-subtle) 0 0.5rem, var(--color-surface-raised) 0.5rem 1rem); opacity: 0.8; }
.sofa-big { position: relative; display: flex; justify-content: space-around; align-items: end; inline-size: min(100%, 13rem); block-size: 2.25rem; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm); background: var(--color-chart-3); box-shadow: inset 0 0.5rem 0 0 var(--color-surface-scrim), var(--shadow-sm); }
.sofa-big::before, .sofa-big::after { content: ""; position: absolute; inset-block-end: 0; inline-size: 0.75rem; block-size: 2.75rem; border-radius: var(--radius-md); background: var(--color-chart-3); filter: brightness(0.85); }
.sofa-big::before { inset-inline-start: -0.5rem; }
.sofa-big::after { inset-inline-end: -0.5rem; }
.spot-sofa { position: relative; inset-block-end: 0.5rem; }
.coffee-table { position: relative; display: grid; place-items: center; inline-size: 4rem; block-size: 1.5rem; border-radius: var(--radius-md); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); }
.coffee-table-cup { inline-size: 0.625rem; block-size: 0.625rem; border-radius: var(--radius-full); background: var(--color-surface-card); border: 0.125rem solid var(--color-border-strong); }
.pingpong { grid-area: pingpong; display: flex; align-items: center; justify-content: center; gap: var(--space-3); block-size: 5rem; }
.pp-table { position: relative; display: block; inline-size: 5.5rem; block-size: 3rem; border-radius: var(--radius-sm); background: var(--color-feedback-success); border: 0.125rem solid var(--color-surface-card); box-shadow: var(--shadow-sm); }
.pp-net { position: absolute; inset-block: -0.125rem; inset-inline-start: calc(50% - 0.0625rem); inline-size: 0.125rem; background: var(--color-surface-card); }
.pp-ball { position: absolute; inset-block-start: calc(50% - 0.1875rem); inset-inline-start: 0.25rem; inline-size: 0.375rem; block-size: 0.375rem; border-radius: var(--radius-full); background: var(--color-surface-card); opacity: 0; }
.pingpong.is-playing .pp-ball { opacity: 1; animation: pp-rally calc(var(--duration-normal) * 5) var(--ease-in) infinite alternate; }
.reading { grid-area: reading; position: relative; display: flex; align-items: end; justify-content: center; gap: var(--space-3); block-size: 5rem; }
.bookshelf { display: grid; grid-template-columns: repeat(7, 0.375rem); align-items: end; gap: 0.0625rem; padding: var(--space-1); block-size: 3.5rem; border-radius: var(--radius-sm); background: var(--color-surface-raised); border: 1px solid var(--color-border-strong); box-shadow: inset 0 -0.125rem 0 var(--color-border-strong); }
.book { block-size: 85%; border-radius: 0.0625rem; background: var(--color-chart-1); }
.book-2 { block-size: 70%; background: var(--color-chart-2); }
.book-3 { background: var(--color-chart-4); }
.book-4 { block-size: 60%; background: var(--color-chart-5); transform: rotate(12deg); transform-origin: bottom left; }
.book-5 { block-size: 90%; background: var(--color-chart-6); }
.book-6 { block-size: 75%; background: var(--color-chart-7); }
.book-7 { background: var(--color-chart-8); }
.spot-book { position: absolute; inset-block-end: 0; inset-inline-start: 30%; }
.armchair { position: relative; display: grid; justify-items: center; align-items: end; inline-size: 2.25rem; block-size: 2rem; border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm); background: var(--color-chart-5); box-shadow: inset 0 0.375rem 0 0 var(--color-surface-scrim); }
.lamp { position: relative; inline-size: 0.25rem; block-size: 3rem; background: var(--color-border-strong); }
.lamp::before { content: ""; position: absolute; inset-block-start: -0.5rem; inset-inline-start: -0.625rem; inline-size: 1.5rem; block-size: 0.75rem; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--color-feedback-warning-surface); border: 1px solid var(--color-feedback-warning); box-shadow: 0 0.5rem 1rem var(--color-feedback-warning-surface); }
.plan[data-sky="night"] .lamp::before { background: var(--color-feedback-warning); box-shadow: 0 0.75rem 1.5rem var(--color-feedback-warning); }
.plant-d { inset-block-start: var(--space-3); inset-inline-end: var(--space-3); }
.plant { animation: plant-sway calc(var(--duration-normal) * 24) var(--ease-in) infinite alternate; transform-origin: bottom center; }

/* Vapor del cafe. */
.coffee-machine { position: relative; }
.coffee-machine::before, .coffee-machine::after { content: ""; position: absolute; inset-block-end: 100%; inset-inline-start: 30%; inline-size: 0.3125rem; block-size: 0.75rem; border-radius: var(--radius-full); background: var(--color-surface-sunken); opacity: 0; animation: steam calc(var(--duration-normal) * 10) var(--ease-out) infinite; }
.coffee-machine::after { inset-inline-start: 60%; animation-delay: calc(var(--duration-normal) * 5); }

/* Accesorios segun lo que hace el personaje en su tiempo libre. */
.sim-prop { position: absolute; inset-block-start: 1.75rem; inset-inline-end: -0.375rem; display: none; }
.sim[data-act="coffee"] .sim-prop { display: block; inline-size: 0.5rem; block-size: 0.5625rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-surface-card); border: 0.125rem solid var(--color-border-strong); }
.sim[data-act="read"] .sim-prop { display: block; inset-inline-end: auto; inset-inline-start: 50%; margin-inline-start: -0.5rem; inline-size: 1rem; block-size: 0.75rem; border-radius: 0.0625rem; background: linear-gradient(90deg, var(--color-chart-2) 0 48%, var(--color-surface-card) 48% 52%, var(--color-chart-2) 52%); }
.sim[data-act="play"] .sim-prop { display: block; inline-size: 0.625rem; block-size: 0.625rem; border-radius: var(--radius-full); background: var(--color-action-danger); box-shadow: 0 0.375rem 0 -0.125rem var(--color-office-hair-dark); }
.sim.face-left .sim-prop { inset-inline-end: auto; inset-inline-start: -0.375rem; }
.sim[data-act="play"] .sim-figure { animation: sim-play calc(var(--duration-normal) * 5) var(--ease-in) infinite alternate; }
.sim[data-act="look"] .sim-head { transform: translateY(-0.0625rem); }
.sim[data-act="coffee"] .sim-figure { animation: sim-sip calc(var(--duration-normal) * 16) var(--ease-in) infinite; }

/* Papel que vuela del escritorio a tu mesa cuando llega una pieza nueva. */
.paper-fly { position: absolute; z-index: 8; inset-inline-start: 0; inset-block-start: 0; inline-size: 1rem; block-size: 1.25rem; border-radius: 0.125rem; background: var(--color-feedback-warning-surface); border: 1px solid var(--color-feedback-warning); box-shadow: var(--shadow-md); transform: translate(calc(var(--x, -100rem) - 50%), calc(var(--y, -100rem) - 50%)) rotate(-10deg); pointer-events: none; }
.paper-fly.is-flying { transition: transform calc(var(--duration-normal) * 6) var(--ease-emphasized), opacity calc(var(--duration-normal) * 6) var(--ease-in); transform: translate(calc(var(--x, -100rem) - 50%), calc(var(--y, -100rem) - 50%)) rotate(350deg) scale(0.6); opacity: 0.2; }

@keyframes cloud-drift { from { transform: translateX(0); } to { transform: translateX(12rem); } }
@keyframes pp-rally { from { transform: translateX(0) translateY(0); } 50% { transform: translateX(2.5rem) translateY(-0.5rem); } to { transform: translateX(4.75rem) translateY(0); } }
@keyframes plant-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes steam { 0% { opacity: 0; transform: translateY(0) scaleY(0.6); } 30% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-1rem) scaleY(1.2); } }
@keyframes sim-play { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-0.125rem) rotate(2deg); } }
@keyframes sim-sip { 0%, 80%, 100% { transform: rotate(0); } 88% { transform: rotate(-4deg); } }

/* Personajes. Se ubican con --x/--y (los calcula la pantalla segun el plano) y caminan con una transicion. */
.sims-layer { position: absolute; inset: 0; pointer-events: none; }
.sim { position: absolute; z-index: 4; inset-inline-start: 0; inset-block-start: 0; inline-size: 2rem; display: grid; justify-items: center; transform: translate(calc(var(--x, -100rem) - 50%), calc(var(--y, -100rem) - 100%)); transition: transform calc(var(--duration-normal) * 5.6) var(--ease-emphasized); }
.sim.no-move { transition: none; }
/* Sentado: el escritorio tapa de la cintura para abajo. */
.sim.is-seated { transform: translate(calc(var(--x, -100rem) - 50%), calc(var(--y, -100rem) - 100% + 1.375rem)); }
.sim.is-seated .sim-legs, .sim.is-seated .sim-shadow { visibility: hidden; }
.sim.is-talking { z-index: 7; }
.sim-figure { position: relative; display: grid; justify-items: center; }
.sim-head { position: relative; z-index: 1; inline-size: 1.375rem; block-size: 1.375rem; border-radius: var(--radius-full); background: var(--sim-skin, var(--color-office-skin-1)); box-shadow: inset 0 -0.125rem 0 0 var(--color-surface-scrim); }
.sim-hair { position: absolute; inset-inline: -0.0625rem; inset-block-start: -0.125rem; block-size: 55%; border-radius: var(--radius-full) var(--radius-full) var(--radius-sm) var(--radius-sm); background: var(--sim-hair, var(--color-office-hair-dark)); }
.hair-long .sim-hair { block-size: 85%; inset-inline: -0.125rem; border-radius: var(--radius-full) var(--radius-full) var(--radius-md) var(--radius-md); clip-path: polygon(0 0, 100% 0, 100% 100%, 82% 100%, 82% 45%, 18% 45%, 18% 100%, 0 100%); }
.hair-bun .sim-hair::after { content: ""; position: absolute; inset-block-start: -0.375rem; inset-inline-start: 50%; inline-size: 0.625rem; block-size: 0.625rem; margin-inline-start: -0.3125rem; border-radius: var(--radius-full); background: var(--sim-hair, var(--color-office-hair-dark)); }
.hair-curly .sim-hair { box-shadow: -0.25rem 0.1875rem 0 -0.0625rem var(--sim-hair, var(--color-office-hair-dark)), 0.25rem 0.1875rem 0 -0.0625rem var(--sim-hair, var(--color-office-hair-dark)); }
.sim-eyes { position: absolute; inset-block-start: 62%; inset-inline-start: 50%; inline-size: 0.625rem; block-size: 0.1875rem; margin-inline-start: -0.3125rem; background: radial-gradient(circle, var(--color-office-hair-dark) 0 0.09rem, transparent 0.1rem) 0 0 / 50% 100% repeat-x; }
.sim-body { display: grid; place-items: center; inline-size: 1.75rem; block-size: 1.375rem; margin-block-start: calc(var(--space-1) * -0.5); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-sm); background: var(--sim-shirt, var(--color-chart-1)); color: var(--color-text-on-action); box-shadow: var(--shadow-sm); }
.sim-legs { display: flex; gap: 0.1875rem; }
.sim-legs span { inline-size: 0.375rem; block-size: 0.4375rem; border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--color-office-hair-dark); }
.sim-shadow { inline-size: 1.75rem; block-size: 0.375rem; margin-block-start: calc(var(--space-1) * -0.5); border-radius: var(--radius-full); background: var(--color-surface-scrim); opacity: 0.35; }
/* El rombo de estado sobre la cabeza. El estado tambien va en texto en el escritorio y en el chat. */
.sim-gem { inline-size: 0.625rem; block-size: 0.625rem; margin-block-end: var(--space-1); transform: rotate(45deg); border-radius: 0.125rem; background: var(--color-feedback-success); box-shadow: 0 0 0.5rem var(--color-feedback-success); animation: gem-float calc(var(--duration-normal) * 8) var(--ease-in) infinite alternate; }
.state-working .sim-gem { background: var(--color-feedback-info); box-shadow: 0 0 0.5rem var(--color-feedback-info); }
.state-waiting .sim-gem { background: var(--color-feedback-warning); box-shadow: 0 0 0.5rem var(--color-feedback-warning); }
.state-stuck .sim-gem { background: var(--color-feedback-error); box-shadow: 0 0 0.5rem var(--color-feedback-error); }
.state-working .sim-figure { animation: sim-type calc(var(--duration-normal) * 1.6) var(--ease-out) infinite alternate; }
.state-idle .sim-figure { animation: sim-sway calc(var(--duration-normal) * 12) var(--ease-in) infinite alternate; }
.state-stuck .sim-head { animation: sim-shake calc(var(--duration-normal) * 12) var(--ease-out) infinite; }
.sim.is-walking .sim-figure { animation: sim-walk calc(var(--duration-normal) * 1.4) linear infinite; }
.sim.is-walking .sim-legs span:first-child { animation: sim-step calc(var(--duration-normal) * 1.4) linear infinite; }
.sim.is-walking .sim-legs span:last-child { animation: sim-step calc(var(--duration-normal) * 1.4) linear infinite reverse; }
@keyframes gem-float { from { transform: translateY(0) rotate(45deg); } to { transform: translateY(-0.25rem) rotate(45deg); } }
@keyframes sim-type { from { transform: translateY(0); } to { transform: translateY(-0.0625rem); } }
@keyframes sim-sway { from { transform: translateX(-0.0625rem); } to { transform: translateX(0.0625rem); } }
@keyframes sim-walk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.1875rem); } }
@keyframes sim-step { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }
@keyframes sim-shake { 0%, 84%, 100% { transform: rotate(0); } 88% { transform: rotate(-10deg); } 92% { transform: rotate(10deg); } 96% { transform: rotate(-6deg); } }

/* Globo de dialogo. Lo mismo esta escrito en el chat del equipo. */
.sim-bubble { position: absolute; inset-block-end: calc(100% + var(--space-1)); inset-inline-start: 50%; inline-size: max-content; max-inline-size: min(14rem, 70vw); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg); background: var(--color-surface-card); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-md); color: var(--color-text-primary); font-size: var(--text-sm); line-height: var(--leading-tight); text-align: start; white-space: normal; opacity: 0; transform: translate(-50%, var(--space-2)) scale(0.92); transform-origin: bottom center; transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out); }
.sim-bubble::after { content: ""; position: absolute; inset-block-end: -0.375rem; inset-inline-start: calc(50% - 0.3125rem); inline-size: 0.625rem; block-size: 0.625rem; background: var(--color-surface-card); border-inline-end: 1px solid var(--color-border-strong); border-block-end: 1px solid var(--color-border-strong); transform: rotate(45deg); }
.sim.is-talking .sim-bubble { opacity: 1; transform: translate(-50%, 0) scale(1); }
.sim.bubble-left .sim-bubble { inset-inline-start: auto; inset-inline-end: calc(var(--space-2) * -1); transform: translate(0, var(--space-2)) scale(0.92); transform-origin: bottom right; }
.sim.bubble-left.is-talking .sim-bubble { transform: none; }
.sim.bubble-left .sim-bubble::after { inset-inline-start: auto; inset-inline-end: 0.75rem; }
.sim.bubble-right .sim-bubble { inset-inline-start: calc(var(--space-2) * -1); transform: translate(0, var(--space-2)) scale(0.92); transform-origin: bottom left; }
.sim.bubble-right.is-talking .sim-bubble { transform: none; }
.sim.bubble-right .sim-bubble::after { inset-inline-start: 0.75rem; }

.typing { display: inline-flex; gap: var(--space-1); align-items: center; flex-shrink: 0; }
.typing span { inline-size: 0.3125rem; block-size: 0.3125rem; border-radius: var(--radius-full); background: currentColor; animation: typing calc(var(--duration-normal) * 5) var(--ease-out) infinite; }
.typing span:nth-child(2) { animation-delay: var(--duration-fast); }
.typing span:nth-child(3) { animation-delay: calc(var(--duration-fast) * 2); }
@keyframes typing { 0%, 60%, 100% { opacity: 0.3; transform: none; } 30% { opacity: 1; transform: translateY(-0.125rem); } }

/* Chat del equipo. */
.office-chat { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-card); background: var(--color-surface-card); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-sm); min-inline-size: 0; }
.office-chat-head { display: grid; gap: var(--space-1); }
.office-chat-title { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.office-chat-log { display: grid; gap: var(--space-3); grid-template-columns: minmax(0, 1fr); align-content: start; max-block-size: 26rem; overflow-y: auto; padding: var(--space-1); scrollbar-width: thin; }
.msg { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); align-items: end; }
.msg-you { grid-template-columns: minmax(0, 1fr) auto; }
.msg-you .chat-avatar { order: 2; }
.msg-bubble { display: grid; gap: var(--space-1); padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) var(--radius-sm); background: var(--color-surface-sunken); border: 1px solid var(--color-border-default); transition: border-color var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out); }
.msg-you .msg-bubble { border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg); background: var(--color-surface-brand-subtle); }
.msg.is-now .msg-bubble { border-color: var(--color-action-primary); box-shadow: var(--shadow-sm); }
.msg-who { font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.msg-text { font-size: var(--text-sm); }
.msg-stuck .msg-bubble { background: var(--color-feedback-error-surface); border-color: var(--color-feedback-error); }
.msg-review .msg-bubble { background: var(--color-surface-brand-subtle); }
.msg-items { display: grid; gap: var(--space-1); margin-block-start: var(--space-1); }
.chat-avatar { position: relative; display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-full); background: var(--sim-shirt, var(--color-chart-1)); overflow: hidden; flex-shrink: 0; }
.chat-avatar-face { position: absolute; inset-block-start: 0.25rem; inline-size: 1.125rem; block-size: 1.125rem; border-radius: var(--radius-full); background: var(--sim-skin, var(--color-office-skin-1)); box-shadow: inset 0 0.3125rem 0 0 var(--sim-hair, var(--color-office-hair-dark)); }
.chat-avatar-you { background: var(--color-action-primary); color: var(--color-text-on-action); }
.msg-empty { padding: var(--space-4); }
.office-compose { display: grid; gap: var(--space-2); }
.office-compose .textarea { inline-size: 100%; min-inline-size: 0; }
.office-compose-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* Bitacora. */
.office-log { display: grid; gap: var(--space-5); margin-block-start: var(--space-6); }
.office-feed { display: grid; gap: var(--space-2); grid-template-columns: minmax(0, 1fr); }
.office-feed-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-1) var(--space-2); align-items: start; padding-block: var(--space-2); border-block-end: 1px solid var(--color-border-default); color: var(--color-text-secondary); }
.office-feed-item > .muted { grid-column: 2; }
.office-feed-text { color: var(--color-text-primary); }
.feed-fail { color: var(--color-feedback-error-text); }
.feed-done { color: var(--color-feedback-success-text); }
.feed-human { color: var(--color-text-brand); }

@media (min-width: 40rem) {
  .plan { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "lead mesa" "floor floor" "cafe lounge"; }
  .floor-desks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .office-log { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); align-items: start; }
}
@media (min-width: 64rem) {
  .office { grid-template-columns: minmax(0, 1fr) minmax(18rem, 22rem); }
  .office-chat { position: sticky; inset-block-start: var(--space-4); }
  .office-chat-log { max-block-size: 30rem; }
}
@media (min-width: 90rem) {
  .plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-areas: "lead floor" "mesa floor" "cafe floor" "lounge lounge"; }
  .lounge { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "window sofa pingpong reading" "clock sofa pingpong reading"; }
  .floor-desks { gap: var(--space-6) var(--space-4); }
}

/* ---------- campanas */
.campaign-list { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
.campaign-card { display: grid; gap: var(--space-4); padding: var(--space-5); border-radius: var(--radius-card); background: var(--color-surface-card); border: 1px solid var(--color-border-default); box-shadow: var(--shadow-sm); min-inline-size: 0; }
.campaign-card.is-lead { border-color: var(--color-action-primary); box-shadow: var(--shadow-md); }
.campaign-head { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.campaign-title-wrap { display: grid; gap: var(--space-1); min-inline-size: 0; }
.campaign-title { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.campaign-card.is-lead .campaign-title { font-size: var(--text-3xl); }
.campaign-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.campaign-facts dt { font-size: var(--text-xs); color: var(--color-text-secondary); }
.campaign-facts dd { font-weight: var(--weight-medium); }
.campaign-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.mono-utm { font-family: var(--font-mono); }
@media (min-width: 48rem) {
  .campaign-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}