/* ===========================================================
   OneDesk-lite — lenguaje visual del Design System v2 de OneDesk.

   Portado (no copiado entero) de `OneDesk/django/static/transversal/css/`
   (`tailwind.css` :root, `theme_dark.css`, `shell.css`, `clean_table.css`) y
   `tickets/css/{detail,agent_activity}.css`: mismos tokens (paleta teal/naranja,
   grises oklch, escala tipográfica, radios, sombras), menú lateral + topbar,
   tabla limpia y estados. Solo lo que usan las cinco pantallas del lite.
   Todo por tokens: el tema oscuro grafito cambia solo los tokens.
   Sin estilos en línea (CSP `style-src 'self'`).
   =========================================================== */

/* -----------------------------------------------------------
   0. Tokens
   ----------------------------------------------------------- */
:root {
  color-scheme: light;
  --brand-orange: #f7a730;
  --brand-orange-dark: #be5826;
  --brand-orange-soft: #f7a73018;
  --brand-teal: #008aab;
  --brand-teal-light: #00bed6;
  --brand-teal-dark: #00758d;
  --brand-teal-darker: #006277;
  --brand-cyan-soft: #00bed618;

  --gray-50: oklch(98.5% .002 264);
  --gray-100: oklch(96.8% .002 264);
  --gray-150: oklch(94.5% .003 264);
  --gray-200: oklch(92% .004 264);
  --gray-300: oklch(87.5% .005 264);
  --gray-400: oklch(78% .006 264);
  --gray-500: oklch(63% .008 264);
  --gray-600: oklch(50.5% .01 264);
  --gray-700: oklch(40% .01 264);
  --gray-800: oklch(28% .01 264);
  --gray-900: oklch(20.5% .01 264);
  --gray-1000: oklch(8.5% .012 264);

  --bg: #fff;
  --bg-subtle: var(--gray-50);
  --bg-muted: var(--gray-100);
  --bg-elevated: #fff;
  --fg: #54585a;
  --fg-strong: oklch(28% .01 264);
  --fg-muted: #5f6368;
  --fg-subtle: #676c72;
  --border: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-subtle: color-mix(in oklab, var(--border), transparent 40%);
  --border-focus: var(--gray-1000);
  --nav-active-fg: var(--brand-teal-dark);

  --success: oklch(62% .14 152);
  --success-bg: oklch(62% .14 152 / .1);
  --success-fg: oklch(38% .1 152);
  --warning: oklch(72% .15 75);
  --warning-bg: oklch(72% .15 75 / .12);
  --warning-fg: oklch(40% .1 65);
  --danger: oklch(58% .2 25);
  --danger-bg: oklch(58% .2 25 / .1);
  --danger-fg: oklch(38% .13 25);
  --info: oklch(58% .16 240);
  --info-bg: oklch(58% .16 240 / .1);
  --info-fg: oklch(38% .12 240);

  /* Estados del ticket (mismos que OneDesk). */
  --state-open: var(--info);
  --state-queue: var(--brand-teal-light);
  --state-in-process: var(--warning);
  --state-stopped: var(--gray-500);
  --state-closed: var(--success);
  --state-closed-na: var(--gray-400);

  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --fs-2xs: .6875rem;
  --fs-xs: .8125rem;
  --fs-sm: .875rem;
  --fs-base: .9375rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.3125rem;
  --fs-2xl: 1.5625rem;
  --fw-medium: 500;
  --fw-semibold: 600;
  --sp-1: .25rem;
  --sp-2: .5rem;
  --sp-3: .75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-card: 12px;
  --r-full: 9999px;
  --shadow-sm: 0 1px 2px 0 #0000000a, 0 0 0 1px #0000000a;
  --shadow-md: 0 4px 8px -2px #0000000f, 0 0 0 1px #0000000a;
  --shadow-lg: 0 12px 24px -6px #0000001a, 0 0 0 1px #0000000a;
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--brand-teal);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --t-fast: .12s;
  --t-base: .18s;

  --sidebar-w: 260px;
  --topbar-h: 52px;
  --content-max: 1400px;
  --control-h: 36px;
}

/* Tema oscuro grafito (theme_dark.css de OneDesk). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: oklch(17% .012 264);
  --bg-subtle: oklch(20% .011 264);
  --bg-elevated: oklch(21.5% .011 264);
  --bg-muted: oklch(25% .010 264);
  --fg: var(--gray-50);
  --fg-strong: #fff;
  --fg-muted: var(--gray-400);
  --fg-subtle: var(--gray-500);
  --border: oklch(29% .010 264);
  --border-strong: oklch(36% .010 264);
  --border-subtle: oklch(25% .010 264);
  --border-focus: var(--gray-50);
  --nav-active-fg: #00bed6;
  --success-fg: oklch(80% .12 152);
  --warning-fg: oklch(80% .12 65);
  --danger-fg: oklch(80% .15 25);
  --info-fg: oklch(80% .14 240);
  --shadow-sm: 0 1px 2px 0 #0006, 0 0 0 1px #ffffff0f;
  --shadow-md: 0 4px 8px -2px #00000080, 0 0 0 1px #ffffff0f;
  --shadow-lg: 0 12px 24px -6px #0009, 0 0 0 1px #ffffff0f;
}

/* -----------------------------------------------------------
   1. Base
   ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.5;
  letter-spacing: -.003em;
  color: var(--fg);
  background: var(--bg-subtle);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3 { color: var(--fg-strong); margin: 0; letter-spacing: -.011em; }
p { margin: 0 0 var(--sp-3); }
a { color: var(--brand-teal-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
:root[data-theme="dark"] a { color: var(--brand-teal-light); }
code { font-family: var(--font-mono); font-size: .85em; background: var(--bg-muted); padding: 1px 5px; border-radius: var(--r-md); }
small { font-size: var(--fs-xs); }
.muted { color: var(--fg-subtle); }
.stack { display: flex; flex-direction: column; gap: var(--sp-4); }
:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); border-radius: var(--r-md); }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--fg) 14%, transparent); border-radius: var(--r-full); }
:hover::-webkit-scrollbar-thumb { background: color-mix(in oklab, var(--fg) 28%, transparent); }

/* -----------------------------------------------------------
   2. Shell: menú lateral + topbar
   ----------------------------------------------------------- */
.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  display: flex;
  flex-direction: column;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-subtle);
  z-index: 1040;
}
.sidebar-header {
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  border-bottom: 1px solid var(--border-subtle);
}
.sidebar-brand { display: flex; align-items: center; gap: var(--sp-2); color: var(--fg-strong); }
.sidebar-brand:hover { text-decoration: none; }
.sidebar-brand__mark { width: 26px; height: 26px; }
.sidebar-brand__word { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--fg-strong); letter-spacing: -.02em; }
.sidebar-brand__word span { color: var(--brand-orange-dark); font-weight: var(--fw-medium); }
:root[data-theme="dark"] .sidebar-brand__word span { color: var(--brand-orange); }
.sidebar-content { flex: 1; overflow-y: auto; padding: var(--sp-4) var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-1); }
.sidebar-cta { width: 100%; justify-content: center; margin-bottom: var(--sp-3); }
.navlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sidebar-section {
  margin: var(--sp-4) var(--sp-3) var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.sidebar-link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  border-radius: var(--r-md);
  color: var(--fg-muted);
  font-size: var(--fs-sm);
  transition: background var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
:root[data-theme="dark"] .sidebar-link { color: var(--fg-muted); }
.sidebar-link:hover { background: var(--bg-muted); color: var(--fg); text-decoration: none; }
.sidebar-link.active {
  background: color-mix(in oklab, var(--brand-teal-dark) 12%, transparent);
  color: var(--nav-active-fg);
  font-weight: var(--fw-medium);
}
.sidebar-link .bi { width: 20px; font-size: var(--fs-md); display: inline-flex; justify-content: center; }
.sidebar-link__text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-footer {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--border-subtle);
}
.sidebar-profile__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sidebar-profile__text strong { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-strong); }
.sidebar-profile__text small { color: var(--fg-subtle); }

.topbar {
  position: fixed;
  top: 0;
  right: 0;
  left: var(--sidebar-w);
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-6);
  background: var(--bg);
  border-bottom: 1px solid var(--border-subtle);
  z-index: 1030;
}
.crumbs { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--fg-subtle); min-width: 0; }
.crumbs a { color: var(--fg-muted); }
.crumbs > span:last-child { color: var(--fg-strong); font-weight: var(--fw-medium); }
.crumbs .bi { font-size: .7rem; }
.topbar-actions { display: flex; align-items: center; gap: var(--sp-2); }
.topbar-actions form { margin: 0; }

.main { padding: var(--sp-6); max-width: calc(var(--content-max) + var(--sp-6) * 2); }
.has-shell .main { margin-left: var(--sidebar-w); padding-top: calc(var(--topbar-h) + var(--sp-6)); }

/* -----------------------------------------------------------
   3. Componentes
   ----------------------------------------------------------- */
.btn {
  --btn-bg: var(--bg-elevated);
  --btn-fg: var(--fg);
  --btn-border: var(--border);
  --btn-bg-hover: var(--bg-muted);
  --btn-border-hover: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--control-h);
  padding: 0 var(--sp-4);
  border: 1px solid var(--btn-border);
  border-radius: var(--r-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-border-hover); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: none; }
a.btn { color: var(--btn-fg); }
.btn--primary { --btn-bg: var(--brand-teal-dark); --btn-fg: #fff; --btn-border: var(--brand-teal-dark); --btn-bg-hover: var(--brand-teal-darker); --btn-border-hover: var(--brand-teal-darker); }
.btn--secondary { --btn-bg: var(--bg-subtle); --btn-fg: var(--fg-muted); }
.btn--danger { --btn-bg: var(--danger); --btn-fg: #fff; --btn-border: var(--danger); --btn-bg-hover: oklch(50% .2 25); --btn-border-hover: oklch(50% .2 25); }
.btn--ghost { --btn-bg: transparent; --btn-border: transparent; --btn-fg: var(--fg-muted); --btn-border-hover: transparent; }
.btn--sm { height: 30px; padding: 0 var(--sp-3); font-size: var(--fs-xs); }
.btn--icon { width: var(--control-h); padding: 0; }
.btn--block { width: 100%; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg-muted);
  color: var(--fg-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  vertical-align: middle;
}
.badge--brand { background: var(--brand-orange-soft); border-color: color-mix(in oklab, var(--brand-orange) 45%, transparent); color: var(--brand-orange-dark); }
:root[data-theme="dark"] .badge--brand { color: var(--brand-orange); }
.badge--success { background: var(--success-bg); border-color: transparent; color: var(--success-fg); }
.badge--warning { background: var(--warning-bg); border-color: transparent; color: var(--warning-fg); }
.badge--danger { background: var(--danger-bg); border-color: transparent; color: var(--danger-fg); }

/* Estado del ticket: punto de color + texto, como en las listas de OneDesk. */
.state {
  --st: var(--state-open);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 9px 0 8px;
  border-radius: var(--r-full);
  background: color-mix(in oklab, var(--st) 12%, transparent);
  color: var(--fg-strong);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  white-space: nowrap;
}
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--st); flex: none; }
.state--open { --st: var(--state-open); }
.state--queue { --st: var(--state-queue); }
.state--progress { --st: var(--state-in-process); }
.state--stopped { --st: var(--state-stopped); }
.state--closed { --st: var(--state-closed); }
.state--closed-na { --st: var(--state-closed-na); }

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--brand-teal) 16%, var(--bg-elevated));
  color: var(--brand-teal-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
:root[data-theme="dark"] .avatar { color: var(--brand-teal-light); }
.avatar--sm { width: 22px; height: 22px; font-size: var(--fs-2xs); vertical-align: middle; margin-right: 4px; }
.avatar--agent { background: var(--brand-orange-soft); color: var(--brand-orange-dark); }

.alert {
  padding: var(--sp-3) var(--sp-4);
  margin-bottom: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elevated);
  font-size: var(--fs-sm);
}
.alert--success { background: var(--success-bg); color: var(--success-fg); border-color: var(--success); }
.alert--danger { background: var(--danger-bg); color: var(--danger-fg); border-color: var(--danger); }
.alert--warning { background: var(--warning-bg); color: var(--warning-fg); border-color: var(--warning); }
.alert--info { background: var(--info-bg); color: var(--info-fg); border-color: var(--info); }
.alert ul { margin: 0; padding-left: var(--sp-4); }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  overflow: hidden;
}
.card--pad { padding: var(--sp-6); }
.card-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.card-header .bi { color: var(--fg-subtle); }
.card-header .count { margin-left: auto; color: var(--fg-subtle); font-weight: var(--fw-medium); }
.card-body { padding: var(--sp-5); margin: 0; }
.card-title { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); margin-bottom: var(--sp-3); }
.card--accent { border-color: color-mix(in oklab, var(--brand-orange) 55%, var(--border)); box-shadow: 0 0 0 3px var(--brand-orange-soft); }
.card--accent .card-header { background: var(--brand-orange-soft); }
.card--accent .card-header .bi { color: var(--brand-orange-dark); }
.card--danger { border-color: color-mix(in oklab, var(--danger) 35%, var(--border)); }
.card--danger .card-header .bi { color: var(--danger); }

/* Formularios: los widgets de Django llegan sin clase; se estilan por contexto. */
.form-label, .field > label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--fg-muted);
}
.req { color: var(--danger); }
.form-control,
.form-select,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea,
.card-body textarea,
.card-body select,
.card-body input[type="text"] {
  display: block;
  width: 100%;
  min-height: var(--control-h);
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-sm);
  transition: border-color var(--t-fast) var(--ease-out), box-shadow var(--t-fast) var(--ease-out);
}
textarea { resize: vertical; min-height: 88px; }
.field input[type="file"] { padding: 5px; background: var(--bg-subtle); }
.form-control:focus, .form-select:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.card-body textarea:focus, .card-body select:focus, .card-body input[type="text"]:focus {
  outline: none;
  border-color: var(--brand-teal);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-teal), transparent 82%);
}
.has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
.hint { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--fg-subtle); }
.error { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--danger-fg); }
.errorlist { margin: 0; padding: 0; list-style: none; }
.form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap; }
.row-form { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin: 0; }
.row-form > .form-control, .row-form > .form-select { flex: 1; min-width: 10rem; width: auto; }
.row-form form { margin: 0; }
.check { display: inline-flex; align-items: center; gap: var(--sp-2); margin-right: auto; font-size: var(--fs-sm); color: var(--fg-muted); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-teal-dark); width: 16px; height: 16px; margin: 0; }

/* Segmentado (filtros de la bandeja). */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-lg); background: var(--bg-muted); }
.seg__item { padding: 4px var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--fg-muted); }
.seg__item:hover { text-decoration: none; color: var(--fg); }
.seg__item.active { background: var(--bg-elevated); color: var(--fg-strong); box-shadow: var(--shadow-sm); }

/* -----------------------------------------------------------
   4. Páginas
   ----------------------------------------------------------- */
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-6); flex-wrap: wrap; }
.page-title { font-size: var(--fs-2xl); font-weight: var(--fw-semibold); line-height: 1.2; }
.page-subtitle { margin: var(--sp-1) 0 0; color: var(--fg-subtle); font-size: var(--fs-sm); }
.eyebrow { display: block; margin-bottom: var(--sp-1); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--brand-teal-dark); }
.layout-2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sp-5); align-items: start; }
.layout-2--wide-side { grid-template-columns: minmax(0, 1fr) 400px; }
.empty { grid-column: 1 / -1; padding: var(--sp-8); text-align: center; color: var(--fg-subtle); }
.empty .bi { font-size: 2rem; }

/* Catálogo. */
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sp-4); }
.service {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  color: var(--fg);
  transition: border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
}
.service:hover { text-decoration: none; border-color: color-mix(in oklab, var(--brand-teal) 50%, var(--border)); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.service__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; margin-bottom: var(--sp-2);
  border-radius: var(--r-xl);
  background: var(--brand-cyan-soft); color: var(--brand-teal-dark); font-size: 1.25rem;
}
.service__team { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle); }
.service__name { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: 1.35; }
.service__desc { flex: 1; font-size: var(--fs-sm); color: var(--fg-muted); }
.service__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* Tabla limpia (clean_table.css de OneDesk). */
.ct-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; }
.ct-scroll { overflow-x: auto; }
.ct { width: 100%; min-width: 56rem; table-layout: fixed; border-collapse: collapse; font-size: var(--fs-xs); color: var(--fg); }
.ct th, .ct td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; text-align: left; }
.ct thead th {
  height: 2.25rem; padding: 0 var(--sp-2);
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase;
}
.ct tbody td { height: 2.75rem; padding: 0 var(--sp-2); border-bottom: 1px solid var(--border-subtle); }
.ct tbody tr:last-child td { border-bottom: 0; }
.ct th:first-child, .ct td:first-child { padding-left: var(--sp-4); }
.ct th:last-child, .ct td:last-child { padding-right: var(--sp-4); }
.ct-row { transition: background var(--t-fast) var(--ease-out); }
.ct-row:hover { background: var(--bg-subtle); }
.ct-code { font-family: var(--font-mono); font-weight: var(--fw-medium); color: var(--brand-teal-dark); }
.ct-title { color: var(--fg-strong); font-weight: var(--fw-medium); }
.ct-empty { text-align: center; color: var(--fg-subtle); height: 5rem !important; }
.ct-w-code { width: 6rem; }
.ct-w-p20 { width: 20%; }
.ct-w-state { width: 9.5rem; }
.ct-w-md { width: 8.5rem; }
.ct-w-lg { width: 10rem; }
.ct-w-xl { width: 12rem; }

/* Nueva solicitud. */
.checklist { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); font-size: var(--fs-sm); }
.checklist li { display: flex; gap: var(--sp-2); }
.checklist .bi { color: var(--brand-teal-dark); margin-top: 2px; }
.what-happens { position: sticky; top: calc(var(--topbar-h) + var(--sp-6)); }
.what-happens p { font-size: var(--fs-sm); color: var(--fg-muted); }

/* Detalle del ticket. */
.td-head { margin-bottom: var(--sp-6); }
.td-head__top { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-2); }
.td-code { font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--brand-teal-dark); }
.td-props { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-8); margin: var(--sp-4) 0 0; }
.td-props div { display: flex; flex-direction: column; }
.td-props dt { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle); }
.td-props dd { margin: 0; font-size: var(--fs-sm); color: var(--fg-strong); }
.prose { font-size: var(--fs-sm); line-height: 1.6; overflow-wrap: anywhere; }
.prose p:last-child { margin-bottom: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-3) var(--sp-5); margin: var(--sp-4) 0; }
.fields dt { font-size: var(--fs-xs); color: var(--fg-subtle); }
.fields dd { margin: 0; font-size: var(--fs-sm); color: var(--fg-strong); font-weight: var(--fw-medium); }
.attachment {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4); margin-top: var(--sp-2);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--bg-subtle); color: var(--fg);
}
.attachment:hover { text-decoration: none; border-color: var(--brand-teal); }
.attachment > .bi:first-child { font-size: 1.5rem; color: var(--success); }
.attachment span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.attachment strong { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-strong); }
.attachment small { color: var(--fg-subtle); }

.q { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.q__title { font-weight: var(--fw-semibold); color: var(--fg-strong); margin-bottom: var(--sp-1); }
.option {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border); border-radius: var(--r-xl);
  background: var(--bg-elevated); cursor: pointer;
  transition: border-color var(--t-fast) var(--ease-out), background var(--t-fast) var(--ease-out);
}
.option:hover { border-color: var(--brand-teal); }
.option:has(input:checked) { border-color: var(--brand-teal-dark); background: var(--brand-cyan-soft); }
.option input[type="radio"], .option input[type="checkbox"] { margin-top: 3px; }
.option__body { display: flex; flex-direction: column; gap: 2px; flex: 1; font-size: var(--fs-sm); }
.option__label { color: var(--fg-strong); font-weight: var(--fw-medium); }
.option__body small { color: var(--fg-subtle); }
.option__body .form-control { margin-top: var(--sp-2); }
.option.is-disabled { opacity: .55; cursor: not-allowed; }

.thread { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.comment { display: flex; gap: var(--sp-3); }
.comment__main { flex: 1; min-width: 0; }
.comment__head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); margin-bottom: 4px; }
.comment__head strong { color: var(--fg-strong); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.comment__body { padding: var(--sp-3) var(--sp-4); border-radius: 0 var(--r-xl) var(--r-xl) var(--r-xl); background: var(--bg-subtle); border: 1px solid var(--border-subtle); }
.comment--internal .comment__body { background: var(--warning-bg); border-color: color-mix(in oklab, var(--warning) 40%, transparent); }
.composer { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--sp-3); }

.legs { list-style: none; padding: var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); }
.legs li { display: grid; grid-template-columns: 4.5rem 1fr auto; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); }
.legs__dur { font-variant-numeric: tabular-nums; color: var(--fg-strong); }

/* Pestaña «Agente» (agent_activity.css de OneDesk: fases con color categórico). */
.aa {
  --aa-ph-read: oklch(55% .03 255);
  --aa-ph-datahub: oklch(52% .15 295);
  --aa-ph-ask: oklch(60% .13 70);
  --aa-ph-dev: var(--brand-teal);
  --aa-ph-validate: oklch(52% .12 150);
  --aa-ph-report: oklch(54% .12 240);
  --aa-ph-pr: oklch(50% .17 268);
  --aa-ph-close: oklch(48% .02 255);
}
.aa .card-header .bi { color: var(--brand-orange-dark); }
.aa-status {
  margin-left: auto; padding: 1px 9px; border-radius: var(--r-full);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: .04em;
  background: var(--bg-muted); color: var(--fg-muted);
}
.aa-status--running { background: var(--info-bg); color: var(--info-fg); }
.aa-status--running::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--info); vertical-align: middle; animation: aa-pulse 1.4s infinite; }
.aa-status--waiting { background: var(--warning-bg); color: var(--warning-fg); }
.aa-status--finished { background: var(--success-bg); color: var(--success-fg); }
.aa-status--failed, .aa-status--stopped { background: var(--danger-bg); color: var(--danger-fg); }
.aa-status--escalated { background: var(--brand-orange-soft); color: var(--brand-orange-dark); }
@keyframes aa-pulse { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) { .aa-status--running::before { animation: none; } }

.aa-phases { list-style: none; margin: 0 0 var(--sp-4); padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.aa-phase { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.aa-phase__dot { height: 6px; border-radius: var(--r-full); background: var(--bg-muted); }
.aa-phase__label { font-size: .625rem; color: var(--fg-subtle); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa-phase--ok .aa-phase__dot, .aa-phase--info .aa-phase__dot { background: var(--success); }
.aa-phase--warn .aa-phase__dot { background: var(--warning); }
.aa-phase--err .aa-phase__dot { background: var(--danger); }
.aa-phase.is-current .aa-phase__dot { box-shadow: 0 0 0 2px var(--bg-elevated), 0 0 0 3px var(--brand-teal); }
.aa-phase.is-current .aa-phase__label { color: var(--fg-strong); font-weight: var(--fw-semibold); }
.aa-links { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.aa-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 var(--sp-4); border: 1px solid var(--border-subtle); border-radius: var(--r-xl); overflow: hidden; background: var(--border-subtle); }
.aa-metrics div { padding: var(--sp-2) var(--sp-3); background: var(--bg-elevated); }
.aa-metrics dt { font-size: var(--fs-2xs); color: var(--fg-subtle); }
.aa-metrics dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--fg-strong); font-variant-numeric: tabular-nums; }
.aa-subtitle { font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--fg-subtle); margin: var(--sp-4) 0 var(--sp-2); }
.aa-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-1); font-size: var(--fs-xs); }
.aa-findings .aa-ev--warn .bi { color: var(--warning); }
.aa-findings .aa-ev--err .bi { color: var(--danger); }
.aa-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--sp-3); border-left: 2px solid var(--border-subtle); display: flex; flex-direction: column; gap: var(--sp-3); max-height: 26rem; overflow-y: auto; }
.aa-ev { position: relative; display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-xs); }
.aa-ev::before { content: ""; position: absolute; left: calc(-1 * var(--sp-3) - 6px); top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--gray-400); }
.aa-ev--ok::before { border-color: var(--success); }
.aa-ev--warn::before { border-color: var(--warning); }
.aa-ev--err::before { border-color: var(--danger); background: var(--danger); }
.aa-ev.is-milestone::before { background: var(--brand-teal); border-color: var(--brand-teal); }
.aa-ev__meta { display: flex; align-items: center; gap: var(--sp-2); }
.aa-ev__meta time { font-family: var(--font-mono); color: var(--fg-subtle); }
.aa-ev__text { color: var(--fg-strong); }
.aa-tag { --ph: var(--gray-500); padding: 0 6px; border-radius: var(--r-sm); font-size: .625rem; font-weight: var(--fw-semibold); background: color-mix(in oklab, var(--ph) 14%, transparent); color: var(--ph); }
.aa-tag--read { --ph: var(--aa-ph-read); }
.aa-tag--datahub { --ph: var(--aa-ph-datahub); }
.aa-tag--ask { --ph: var(--aa-ph-ask); }
.aa-tag--dev { --ph: var(--aa-ph-dev); }
.aa-tag--validate { --ph: var(--aa-ph-validate); }
.aa-tag--report { --ph: var(--aa-ph-report); }
.aa-tag--pr { --ph: var(--aa-ph-pr); }
.aa-tag--close { --ph: var(--aa-ph-close); }

/* Login. */
.no-shell .main { max-width: none; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 10% -10%, var(--brand-cyan-soft), transparent 60%), radial-gradient(900px 500px at 110% 110%, var(--brand-orange-soft), transparent 60%); }
.login { width: 100%; max-width: 400px; }
.login__brand { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.login__mark { width: 36px; height: 36px; }
.login .sidebar-brand__word { font-size: var(--fs-xl); }
.login .card { box-shadow: var(--shadow-lg); }
.login__title { font-size: var(--fs-xl); }

/* -----------------------------------------------------------
   5. Responsive
   ----------------------------------------------------------- */
@media (max-width: 1100px) {
  .layout-2, .layout-2--wide-side { grid-template-columns: minmax(0, 1fr); }
  .what-happens { position: static; }
}
@media (max-width: 860px) {
  .sidebar { position: static; width: auto; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .sidebar-content { flex-direction: row; flex-wrap: wrap; align-items: center; padding: var(--sp-2) var(--sp-3); }
  .sidebar-content .navlist { flex-direction: row; flex-wrap: wrap; }
  .sidebar-cta { width: auto; margin: 0; }
  .sidebar-section, .sidebar-footer { display: none; }
  .topbar { position: static; padding: 0 var(--sp-4); }
  .has-shell .main { margin-left: 0; padding: var(--sp-4); }
  .aa-metrics { grid-template-columns: repeat(2, 1fr); }
}