/*
 * Consola de Javexa — tokens de diseño sacados de la landing (javexa-landing/src/app/globals.css).
 * Fondo blanco y escala de grises para casi todo; un acento para lo que guía (iconos activos,
 * enlaces, barras). Botón principal negro en cápsula, tarjetas con borde fino y sombra suave,
 * radios de 12–16 px.
 * --accent es el color del tenant: /theme.css lo redefine después de esta hoja. Todo lo que
 * depende del acento se deriva de él con color-mix, y el texto en acento se oscurece
 * (--accent-ink) para mantener el contraste AA con cualquier color de tenant.
 */
@font-face {
  font-family:Geist;
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/geist-latin.f4634c3bc1fa.woff2") format("woff2")
}
@font-face {
  font-family:"Geist Mono";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("../fonts/geist-mono-latin.cd5b25781181.woff2") format("woff2")
}
@font-face {
  font-family:Quicksand;
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url("../fonts/quicksand-latin.068c503647ac.woff2") format("woff2")
}
:root {
  --accent:#5b5bf6;
  --accent-ink:color-mix(in srgb,var(--accent) 50%,#0b0b0f);
  --accent-soft:color-mix(in srgb,var(--accent) 8%,white);
  --accent-line:color-mix(in srgb,var(--accent) 20%,white);

  --ink:#0b0b0f;
  --ink-soft:#3f3f46;
  --muted:#6b6b74;
  --faint:#a1a1aa;
  --line:#e4e4e7;
  --line-soft:#f4f4f5;
  --mist:#fafafa;
  --surface:#fff;
  --bg:#fff;

  --pink:#e86bc8;
  --violet:#7c5cff;
  --blue:#4a6cf7;
  --cyan:#3cc8d8;
  --mint:#1fbf86;

  --ok-ink:#0f6e4c;
  --ok-soft:#e8f8f1;
  --warn-ink:#875510;
  --warn-soft:#fdf4e1;
  --danger-ink:#a32a3c;
  --danger-soft:#fdeef0;
  --info-ink:#44507e;
  --info-soft:#eff1f8;

  --accent-gradient:linear-gradient(100deg,#4a6cf7 0%,#6d5cff 45%,#a35cf0 100%);
  --brand-gradient:linear-gradient(100deg,var(--pink) 0%,var(--violet) 35%,var(--blue) 70%,var(--cyan) 100%);

  --shadow-card:0 1px 2px rgb(15 15 30 / .04),0 4px 16px -6px rgb(15 15 30 / .06);
  --shadow-lift:0 1px 2px rgb(15 15 30 / .04),0 18px 40px -16px rgb(40 40 90 / .18);
  --shadow-float:0 2px 4px rgb(15 15 30 / .04),0 40px 80px -32px rgb(50 40 140 / .28);
  --shadow-button:inset 0 1px 0 rgb(255 255 255 / .18),0 1px 2px rgb(0 0 0 / .2),0 10px 24px -10px rgb(40 40 120 / .55);

  --radius:16px;
  --radius-md:12px;
  --radius-sm:10px;
  --pill:999px;

  --font-sans:Geist,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Geist Mono",ui-monospace,SFMono-Regular,Consolas,monospace;
  --font-display:Quicksand,Geist,ui-sans-serif,sans-serif;

  /* Nombres heredados que usan otras hojas (reviews.css, beta/kpis.css). */
  --border:var(--line);
  --panel:var(--surface);
  --rail:var(--mist)
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  font:14px/1.55 var(--font-sans);
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -webkit-text-size-adjust:100%
}
::selection {
  background:rgb(124 92 255 / .16)
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button,a,input,select,textarea {
  touch-action:manipulation
}
button {
  cursor:pointer
}
h1,h2,h3,p {
  margin:0
}
h1 {
  font-size:30px;
  line-height:1.12;
  letter-spacing:-.04em;
  font-weight:600;
  text-wrap:balance
}
h2 {
  font-size:16px;
  letter-spacing:-.02em;
  font-weight:600
}
h3 {
  font-size:14px;
  font-weight:600;
  margin:18px 0 8px
}
small {
  font-size:12px;
  color:var(--muted)
}
svg.icon {
  width:18px;
  height:18px;
  flex:none;
  vertical-align:middle
}
img {
  max-width:100%
}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0
}
.skip {
  position:fixed;
  top:-100px;
  left:260px;
  background:white;
  padding:12px 16px;
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow-lift);
  z-index:20
}
.skip:focus {
  top:10px
}
.wordmark {
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--ink)
}
.text-gradient {
  background-image:var(--accent-gradient);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent
}

/* Barra lateral: clara, como el menú de la consola de ejemplo de la landing. */
.rail {
  width:240px;
  position:fixed;
  inset:0 auto 0 0;
  background:var(--mist);
  border-right:1px solid var(--line);
  color:var(--muted);
  display:flex;
  flex-direction:column;
  padding:24px 14px 0;
  z-index:10;
  overflow:auto
}
.brand {
  display:flex;
  gap:11px;
  align-items:center;
  margin:0 8px 28px;
  color:var(--ink);
  font-weight:600;
  font-size:15px;
  letter-spacing:-.01em
}
.brand small {
  display:block;
  font-size:12px;
  font-weight:400;
  letter-spacing:0;
  color:var(--muted);
  margin-top:1px
}
.brand-mark {
  width:38px;
  height:38px;
  border-radius:var(--radius-sm);
  display:grid;
  place-items:center;
  background:var(--accent);
  color:white;
  font-size:14px;
  box-shadow:inset 0 1px 0 rgb(255 255 255 / .2),var(--shadow-card);
  flex:none
}
.brand img {
  width:38px;
  height:38px;
  object-fit:contain
}
.nav-label {
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-weight:500;
  color:var(--muted);
  padding:0 11px;
  margin:22px 0 8px
}
.rail>.nav-label {
  margin-top:0
}
.rail nav a,.rail-bottom>a {
  display:flex;
  align-items:center;
  gap:11px;
  padding:8px 11px;
  border-radius:var(--radius-sm);
  margin:2px 0;
  font-size:14px;
  color:var(--ink-soft);
  transition:background-color .15s,color .15s
}
.rail nav a svg,.rail-bottom>a svg {
  color:var(--faint)
}
.rail nav a:hover,.rail-bottom>a:hover {
  background:var(--line-soft);
  color:var(--ink)
}
.rail nav a.selected,.rail-bottom>a.selected {
  color:var(--ink);
  font-weight:500;
  background:white;
  box-shadow:var(--shadow-card),0 0 0 1px var(--line)
}
.rail nav a.selected svg,.rail-bottom>a.selected svg {
  color:var(--accent)
}
/* Entries only Javexa staff see (internal tools, costs, access): violet, apart from the client's accent. */
.rail .nav-label.admin-only {
  color:#7c3aed
}
.rail nav a.admin-only {
  color:#6d28d9;
  background:rgb(124 58 237 / .06);
  box-shadow:inset 3px 0 0 #8b5cf6
}
.rail nav a.admin-only svg {
  color:#8b5cf6
}
.rail nav a.admin-only:hover {
  background:rgb(124 58 237 / .14);
  color:#5b21b6
}
.rail nav a.admin-only.selected {
  background:white;
  color:#5b21b6;
  box-shadow:inset 3px 0 0 #8b5cf6,var(--shadow-card),0 0 0 1px #c4b5fd
}
.rail nav a.admin-only.selected svg {
  color:#7c3aed
}
.rail-bottom {
  margin-top:auto;
  padding-top:36px
}
.partner {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:20px 0;
  font-size:12px;
  color:var(--muted)
}
.partner img {
  width:15px;
  height:20px
}
.partner strong {
  font-size:18px;
  line-height:1
}
.user {
  border-top:1px solid var(--line);
  margin:0 -14px;
  padding:14px;
  display:flex;
  gap:9px;
  align-items:center;
  min-height:72px;
  font-size:13px;
  color:var(--ink)
}
.user>span:nth-child(2) {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere
}
.user small {
  display:block;
  font-size:11px;
  color:var(--muted)
}
.avatar {
  border:1px solid var(--line);
  background:white;
  border-radius:50%;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:var(--ink-soft);
  flex:none;
  font-size:11px;
  font-weight:600
}
.shell {
  margin-left:240px
}
.topbar {
  position:sticky;
  top:0;
  z-index:5;
  height:60px;
  background:rgb(255 255 255 / .82);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid var(--line);
  display:flex;
  gap:14px;
  align-items:center;
  justify-content:space-between;
  padding:0 32px
}
.breadcrumb {
  color:var(--muted);
  font-size:13px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.breadcrumb span {
  margin:0 10px;
  color:var(--faint)
}
.breadcrumb strong {
  color:var(--ink);
  font-weight:500
}
.top-end {
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  color:var(--muted);
  white-space:nowrap
}
.live-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--mint);
  box-shadow:0 0 0 3px rgb(31 191 134 / .18);
  border-radius:50%;
  vertical-align:middle;
  margin-right:4px
}
.separator {
  color:var(--line);
  margin:0 6px
}
.mobile-menu {
  display:none!important
}
main {
  padding:28px 32px 20px;
  max-width:1560px;
  margin:auto
}
.demo-banner {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:flex-start;
  border:1px solid var(--accent-line);
  background:var(--accent-soft);
  border-radius:var(--radius-md);
  padding:9px 14px;
  color:var(--ink-soft);
  font-size:12px;
  margin-bottom:24px
}
.demo-banner strong {
  font-weight:600;
  color:var(--accent-ink)
}
.demo-banner a {
  margin-left:auto;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:12px;
  color:var(--accent-ink)
}
.page-heading {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:26px
}
/* Etiqueta de sección de la landing: cápsula con un punto de acento. */
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:fit-content;
  max-width:100%;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  color:var(--ink-soft);
  background:rgb(255 255 255 / .8);
  border:1px solid var(--line);
  border-radius:var(--pill);
  box-shadow:var(--shadow-card);
  padding:3px 11px;
  margin-bottom:12px
}
.eyebrow::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  flex:none
}
.subtitle {
  font-size:14px;
  color:var(--muted);
  margin-top:10px;
  text-wrap:pretty
}
.segment {
  display:flex;
  background:var(--line-soft);
  border:1px solid var(--line);
  padding:3px;
  border-radius:var(--pill);
  flex:none
}
.segment a {
  font-size:13px;
  padding:5px 14px;
  border-radius:var(--pill);
  color:var(--muted)
}
.segment a.active {
  background:white;
  color:var(--ink);
  font-weight:500;
  box-shadow:var(--shadow-card)
}
.card {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-card);
  min-width:0
}
.kpis {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:22px
}
.kpi {
  position:relative;
  container-type:inline-size;
  padding:20px 22px;
  min-height:141px
}
.kpi p {
  font-size:13px;
  font-weight:500;
  color:var(--ink-soft)
}
.kpi>strong {
  display:block;
  font-size:clamp(22px,14cqi,34px);
  line-height:1.2;
  letter-spacing:-.04em;
  font-weight:600;
  margin:10px 0 8px
}
.kpi>strong em {
  font-size:14px;
  font-style:normal;
  letter-spacing:0;
  font-weight:500;
  color:var(--muted)
}
.kpi>small,.kpi>a {
  font-size:12px;
  color:var(--muted)
}
.kpi>a {
  color:var(--accent-ink);
  font-weight:500
}
.kpi>a svg {
  width:12px;
  height:12px
}
.kpi>svg {
  position:absolute;
  top:18px;
  right:18px;
  width:30px;
  height:30px;
  padding:7px;
  border-radius:var(--radius-sm);
  background:var(--accent-soft);
  color:var(--accent)
}
.two-grid {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:20px
}
.charts {
  margin-bottom:22px
}
.card-heading {
  padding:20px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px
}
.card-heading p {
  font-size:12px;
  color:var(--muted);
  margin-top:4px
}
.card-heading>svg {
  color:var(--faint)
}
.card-body {
  padding:0 22px 22px
}
.bar-chart {
  height:165px;
  display:flex;
  gap:13px;
  align-items:stretch;
  margin:12px 24px 0;
  border-bottom:1px solid var(--line)
}
.bar-cell {
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:center;
  min-width:0
}
.bar-number {
  font-size:12px;
  color:var(--muted);
  margin-bottom:7px
}
.bar-track {
  display:flex;
  align-items:flex-end;
  height:120px;
  width:100%;
  max-width:47px
}
.bar {
  width:100%;
  min-height:2px;
  background:linear-gradient(0deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#a35cf0));
  opacity:.85;
  border-radius:6px 6px 2px 2px
}
.bar-label {
  font-size:11px;
  color:var(--muted);
  margin:10px 0
}
.chart-data {
  padding:15px 24px 19px;
  font-size:12px;
  color:var(--muted)
}
.chart-data span {
  display:inline-block;
  margin:7px 8px 0 0
}
.channel-list {
  padding:7px 24px 25px
}
.channel-row {
  margin:10px 0 18px
}
.channel-row>div:first-child {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:10px
}
.channel-row strong {
  font-size:17px;
  font-weight:600;
  letter-spacing:-.02em
}
.channel-row small {
  font-size:11px
}
.progress {
  height:6px;
  background:var(--line-soft);
  border-radius:var(--pill);
  margin-bottom:5px;
  overflow:hidden
}
.progress span {
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#a35cf0));
  border-radius:var(--pill)
}
.channel,.status,.tag {
  display:inline-flex;
  align-items:center;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  border-radius:var(--pill);
  padding:2px 9px;
  white-space:nowrap
}
.channel {
  background:var(--line-soft);
  color:var(--ink-soft)
}
.channel.email {
  background:var(--accent-soft);
  color:var(--accent-ink)
}
.channel.whatsapp {
  background:var(--ok-soft);
  color:var(--ok-ink)
}
.channel.voice {
  background:#ecf2ff;
  color:#2f56a6
}
.status.resolved,.status.completed {
  color:var(--ok-ink);
  background:var(--ok-soft)
}
.status.escalated,.status.queued {
  color:var(--warn-ink);
  background:var(--warn-soft)
}
.status.failed {
  color:var(--danger-ink);
  background:var(--danger-soft)
}
.status.new,.status.in_progress,.status.running {
  color:var(--info-ink);
  background:var(--info-soft)
}
.status.cancelled {
  background:var(--line-soft);
  color:var(--muted)
}
.tag {
  background:white;
  color:var(--ink-soft);
  border:1px solid var(--line);
  font-size:11px
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:14px
}
.table-scroll {
  position:relative;
  overflow-x:auto
}
table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
  font-size:13px
}
th {
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:500;
  color:var(--muted);
  background:var(--mist);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:11px 22px;
  white-space:nowrap
}
td {
  padding:15px 22px;
  border-bottom:1px solid var(--line-soft)
}
tbody th {
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  font-weight:500;
  color:var(--ink);
  background:none;
  border-top:0;
  border-bottom:1px solid var(--line-soft);
  padding-top:15px;
  padding-bottom:15px
}
tbody tr:last-child td,tbody tr:last-child th {
  border-bottom:0
}
tbody tr:hover {
  background:var(--mist)
}
td small {
  display:block;
  font-size:12px;
  margin-top:3px;
  max-width:260px;
  overflow-wrap:anywhere
}
.row-title {
  font-weight:500;
  font-size:13px
}
.row-title:hover {
  color:var(--accent-ink);
  text-decoration:underline;
  text-underline-offset:3px
}
.nowrap {
  white-space:nowrap
}
.muted {
  color:var(--muted)
}
.icon-button {
  border:0;
  background:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:var(--radius-sm);
  width:32px;
  height:32px;
  color:var(--ink-soft);
  padding:5px
}
.icon-button:hover {
  background:var(--line-soft);
  color:var(--ink)
}
.text-link {
  color:var(--accent-ink);
  font-size:13px;
  border:0;
  background:none;
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:0;
  font-weight:500;
  text-decoration:underline;
  text-decoration-color:var(--accent-line);
  text-underline-offset:4px;
  transition:text-decoration-color .2s
}
.text-link:hover {
  text-decoration-color:currentColor
}
.text-link svg {
  width:14px;
  height:14px
}
/* Botones de la landing: cápsula; el principal, negro con brillo interior. */
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-size:13px;
  line-height:1.4;
  padding:8px 16px;
  min-height:36px;
  border-radius:var(--pill);
  border:1px solid var(--line);
  font-weight:500;
  white-space:nowrap;
  background:white;
  color:var(--ink);
  box-shadow:var(--shadow-card);
  transition:background-color .2s,border-color .2s,box-shadow .2s,transform .2s
}
.button:hover {
  background:var(--mist);
  border-color:color-mix(in srgb,var(--faint) 70%,white)
}
.button:active {
  transform:translateY(1px)
}
.button.primary {
  background:var(--ink);
  color:white;
  border-color:var(--ink);
  box-shadow:var(--shadow-button)
}
.button.primary:hover {
  background:#1d1d27;
  border-color:#1d1d27
}
.button.subtle {
  color:var(--ink-soft)
}
.button.full {
  width:100%
}
.button[disabled],.button:disabled {
  opacity:.5;
  cursor:not-allowed;
  transform:none
}
.toolbar {
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap
}
.search-form {
  display:flex;
  align-items:center;
  gap:9px;
  flex:1;
  min-width:260px
}
.search-form svg {
  color:var(--faint);
  width:16px
}
.search-form input {
  flex:1;
  min-width:120px
}
.filters,.inline-form {
  display:flex;
  gap:8px;
  align-items:center
}
.filters select {
  font-size:13px;
  max-width:190px
}
input:not([type=checkbox]):not([type=hidden]):not([type=radio]),textarea,select {
  padding:9px 12px;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:#fff;
  color:var(--ink);
  width:100%;
  font-size:14px;
  box-shadow:0 1px 2px rgb(15 15 30 / .04);
  transition:border-color .15s,box-shadow .15s
}
input:not([type=checkbox]):not([type=hidden]):not([type=radio]):hover,textarea:hover,select:hover {
  border-color:color-mix(in srgb,var(--faint) 60%,white)
}
input:not([type=checkbox]):not([type=hidden]):not([type=radio]):focus,textarea:focus,select:focus {
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent)
}
input::placeholder,textarea::placeholder {
  color:#71717a
}
textarea {
  resize:vertical;
  line-height:1.65;
  overflow-wrap:anywhere
}
label:not(.sr-only) {
  display:block;
  font-size:13px;
  font-weight:500;
  margin:14px 0 6px;
  color:var(--ink-soft)
}
label:first-child {
  margin-top:0
}
.checkbox {
  display:flex!important;
  align-items:center;
  gap:8px
}
.checkbox input {
  accent-color:var(--accent);
  width:16px;
  height:16px
}
.card>.inline-form {
  padding:0 22px 22px;
  flex-wrap:wrap
}
.card>.inline-form>label:not(.checkbox) {
  margin:0;
  white-space:nowrap
}
.card>.inline-form>input {
  flex:1;
  min-width:120px;
  width:auto
}
.filters select,.inline-form select {
  width:auto
}
.inline-form .checkbox {
  margin:0;
  font-size:13px
}
.pagination {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  padding:15px 22px;
  border-top:1px solid var(--line);
  font-size:12px;
  color:var(--muted)
}
.pagination>div {
  display:flex;
  gap:7px
}
.empty {
  padding:40px 24px;
  text-align:center;
  color:var(--muted);
  font-size:14px
}
.empty strong {
  display:block;
  color:var(--ink);
  font-size:15px;
  font-weight:600;
  margin-bottom:6px
}
.empty p {
  max-width:470px;
  margin:auto
}
.page-footer {
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px;
  padding:24px 1px 0
}
.back {
  color:var(--muted);
  font-size:13px;
  display:inline-block;
  margin-bottom:15px
}
.back:hover {
  color:var(--ink)
}
.detail-grid,.editor-grid {
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(285px,1fr);
  gap:20px;
  align-items:start
}
.thread .card-heading {
  border-bottom:1px solid var(--line)
}
.detail-aside {
  display:grid;
  gap:18px;
  min-width:0
}
.messages {
  padding:26px 24px;
  display:flex;
  flex-direction:column;
  gap:18px;
  min-height:390px
}
.message {
  max-width:88%;
  min-width:90px;
  align-self:flex-start;
  background:var(--line-soft);
  border:1px solid var(--line);
  border-radius:4px 16px 16px 16px;
  padding:12px 16px
}
.message.agent,.message.operator {
  align-self:flex-end;
  background:var(--accent-soft);
  border-color:var(--accent-line);
  border-radius:16px 4px 16px 16px
}
.message.system {
  align-self:center;
  background:var(--mist);
  font-size:13px;
  color:var(--muted)
}
.message-meta {
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:11px;
  margin-bottom:6px;
  color:var(--muted)
}
.message-meta strong {
  font-weight:600;
  color:var(--ink-soft)
}
.message-body {
  font-size:14px;
  overflow-wrap:anywhere;
  white-space:normal
}
.delivery {
  font-size:11px;
  display:block;
  text-align:right;
  margin-top:8px
}
.email-thread .message {
  max-width:100%;
  width:100%;
  border-radius:var(--radius-md);
  background:white;
  border-color:var(--line);
  align-self:stretch
}
.email-thread .message.agent {
  border-left:3px solid var(--accent)
}
.audio-area {
  padding:15px 24px;
  border-bottom:1px solid var(--line);
  font-size:13px;
  color:var(--muted)
}
audio {
  width:100%;
  height:38px
}
.metadata {
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:9px;
  font-size:13px;
  margin:0
}
.metadata dt {
  color:var(--muted)
}
.metadata dd {
  margin:0;
  overflow-wrap:anywhere;
  text-align:right
}
.prose {
  color:var(--ink-soft);
  font-size:14px;
  line-height:1.75;
  overflow-wrap:anywhere
}
.detail-aside .primary {
  margin-top:15px
}
.internal-details {
  padding:17px 22px;
  font-size:13px;
  color:var(--muted)
}
.internal-details p {
  margin-top:12px;
  overflow-wrap:anywhere
}
.notice {
  padding:12px 16px;
  border-radius:var(--radius-md);
  margin-bottom:20px;
  background:var(--info-soft);
  border:1px solid color-mix(in srgb,var(--info-ink) 14%,white);
  color:var(--info-ink);
  font-size:13px
}
.notice.success {
  background:var(--ok-soft);
  border-color:color-mix(in srgb,var(--ok-ink) 16%,white);
  color:var(--ok-ink)
}
.notice.error {
  background:var(--danger-soft);
  border-color:color-mix(in srgb,var(--danger-ink) 16%,white);
  color:var(--danger-ink)
}
.inline-notice {
  background:var(--warn-soft);
  border:1px solid color-mix(in srgb,var(--warn-ink) 16%,white);
  color:var(--warn-ink);
  border-radius:var(--radius-sm);
  padding:11px 13px;
  margin-top:17px;
  font-size:13px
}
.section-gap {
  margin-top:22px
}
.task-list {
  display:grid;
  gap:18px
}
.attempts>a {
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 0;
  border-top:1px solid var(--line);
  font-size:14px
}
.attempts>a>span:nth-child(2) {
  flex:1
}
.attempts small {
  display:block;
  font-size:12px
}
.attempt-number {
  width:26px;
  height:26px;
  border:1px solid var(--line);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
  color:var(--muted)
}
.agent-card {
  padding:24px;
  display:block;
  transition:transform .3s,box-shadow .3s,border-color .3s
}
.agent-card:hover {
  transform:translateY(-2px);
  box-shadow:var(--shadow-lift);
  border-color:var(--accent-line)
}
.agent-icon {
  display:flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  color:var(--accent);
  border-radius:var(--radius-md);
  margin-bottom:18px
}
.agent-card p {
  font-size:13px;
  color:var(--muted);
  margin-top:7px
}
.agent-card-footer {
  display:flex;
  gap:10px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:16px;
  margin-top:24px;
  font-size:12px;
  color:var(--muted)
}
.agent-card-footer>span:first-child {
  flex:1
}
.agent-card-footer svg {
  width:14px
}
.context-editor,.context-text {
  font:13px/1.8 var(--font-mono)!important;
  background:var(--mist)!important;
  tab-size:2
}
.context-text {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0
}
.editor-actions {
  display:flex;
  gap:8px;
  margin-top:17px;
  flex-wrap:wrap
}
.hint {
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  margin-top:12px
}
.versions>div {
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:13px
}
.versions small {
  display:block;
  font-size:12px
}
.versions form {
  margin-top:8px
}
.knowledge-grid {
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:20px;
  align-items:start
}
.document-link {
  display:block;
  padding:15px 22px;
  border-top:1px solid var(--line);
  font-size:13px
}
.document-link:hover {
  background:var(--mist)
}
.document-link small {
  display:block;
  margin-top:4px;
  font-size:12px
}
.document-link.active {
  background:var(--accent-soft);
  border-left:3px solid var(--accent)
}
.guide-card {
  padding:24px
}
.guide-card p {
  font-size:14px;
  color:var(--muted);
  line-height:1.75;
  margin:14px 0
}
.step {
  font-size:12px;
  font-weight:600;
  color:var(--accent-ink);
  letter-spacing:.1em;
  display:block;
  margin-bottom:16px
}
.errorlist {
  font-size:13px;
  color:var(--danger-ink);
  padding-left:18px
}

/* Acceso y elegir tenant: el hero de la landing (cuadrícula, halo, titular con degradado). */
.access-page {
  position:relative;
  isolation:isolate;
  overflow-x:clip;
  display:flex;
  min-height:100svh;
  align-items:center;
  justify-content:center;
  padding:48px 24px;
  background:#fff
}
.access-backdrop {
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(closest-side,rgb(91 91 246 / .16),transparent) 50% 82% / 1100px 620px no-repeat,
    radial-gradient(closest-side,rgb(163 92 240 / .12),transparent) 62% 92% / 700px 420px no-repeat
}
.access-backdrop::before {
  content:"";
  position:absolute;
  inset:0;
  background-image:linear-gradient(to right,rgb(15 15 30 / .05) 1px,transparent 1px),linear-gradient(to bottom,rgb(15 15 30 / .05) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%);
  mask-image:radial-gradient(ellipse 70% 60% at 50% 30%,#000 30%,transparent 75%)
}
.access-card {
  width:100%;
  max-width:560px;
  text-align:center
}
.access-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:36px
}
.access-logo img {
  width:25px;
  height:34px
}
.access-logo .wordmark {
  font-size:24px;
  line-height:1
}
.access-card .eyebrow {
  display:flex;
  margin:0 auto 22px
}
.access-card h1 {
  font-size:56px;
  line-height:1;
  letter-spacing:-.055em;
  color:var(--ink)
}
.access-card>.subtitle {
  font-size:18px;
  line-height:1.6;
  margin:22px auto 30px;
  max-width:440px
}
.access-card>p {
  color:var(--muted)
}
.access-card>form,.access-card>.button {
  max-width:380px;
  margin:12px auto 0
}
.access-card>.button {
  display:flex
}
.access-card .button {
  min-height:46px;
  font-size:15px;
  padding:11px 24px
}
.access-card>small {
  display:block;
  text-align:center;
  margin-top:28px;
  font-size:13px
}
.access-card>.notice {
  text-align:left
}
/* Tarjeta de vidrio, como las piezas que flotan sobre el producto en la landing. */
.preview-access {
  text-align:left;
  max-width:420px;
  margin:34px auto 0;
  padding:24px;
  background:rgb(255 255 255 / .78);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-float);
  font-size:15px
}
.preview-access strong {
  font-weight:600
}
.preview-access p {
  font-size:14px;
  color:var(--muted);
  margin:6px 0 16px
}
.preview-access button {
  margin-top:8px
}

/* Páginas beta: beta/app.css se carga después; estas reglas ganan por especificidad. */
main .prototype-bar {
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:var(--mist);
  color:var(--ink-soft);
  font-size:13px
}
main .bubble {
  background:var(--accent-soft);
  border:1px solid var(--accent-line);
  border-radius:16px 16px 16px 4px
}
main .bubble.customer {
  background:var(--line-soft);
  border-color:var(--line);
  border-radius:16px 16px 4px 16px
}
main .bubble small {
  color:var(--ink-soft);
  font-weight:600
}
main .muted {
  color:var(--muted)
}
main .beta-filters select {
  border-radius:var(--radius-sm)
}
main .beta-heading h1+p {
  font-size:14px;
  color:var(--muted);
  margin-top:10px
}
main .beta-export {
  justify-content:flex-end
}
main .sample-kpi {
  border-left:3px solid var(--accent)
}

@media(min-width:1500px) {
  .bar-chart {
    height:180px
  }
  .bar-track {
    height:135px
  }
}
@media(max-width:1150px) {
  .rail {
    width:212px;
    padding-left:12px;
    padding-right:12px
  }
  .shell {
    margin-left:212px
  }
  .user {
    margin:0 -12px
  }
  .topbar {
    padding:0 24px
  }
  main {
    padding:25px 24px
  }
  .kpis {
    gap:12px
  }
  .kpi {
    padding:18px 16px
  }
  .kpi>svg {
    right:14px
  }
  .two-grid {
    grid-template-columns:1.2fr 1fr
  }
  .toolbar {
    gap:10px
  }
  .search-form {
    min-width:230px
  }
  .filters {
    flex:1
  }
  .filters select {
    max-width:none;
    flex:1
  }
  .detail-grid,.editor-grid {
    grid-template-columns:minmax(0,1.45fr) minmax(280px,1fr)
  }
  th,td {
    padding-left:17px;
    padding-right:17px
  }
  .top-end .separator {
    display:none
  }
  .top-end {
    max-width:210px
  }
  .breadcrumb {
    max-width:65%
  }
}
@media(max-width:900px) {
  .kpis {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .two-grid,.detail-grid,.editor-grid {
    grid-template-columns:1fr
  }
  .detail-aside {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .charts {
    grid-template-columns:1fr
  }
  .knowledge-grid {
    grid-template-columns:230px minmax(0,1fr)
  }
  .top-end {
    display:none
  }
  .breadcrumb {
    max-width:100%
  }
  .demo-banner {
    flex-wrap:wrap;
    gap:5px 10px
  }
  .demo-banner a {
    display:none
  }
  .table-scroll table {
    min-width:710px
  }
  .bar-chart {
    gap:10px
  }
  .internal-details {
    grid-column:1/-1
  }
}
@media(max-width:680px) {
  .rail {
    top:56px;
    transform:translateX(-100%);
    width:260px;
    padding-top:20px;
    transition:transform .2s
  }
  .nav-open .rail {
    transform:translateX(0);
    box-shadow:var(--shadow-float),8px 0 40px rgb(15 15 30 / .18)
  }
  .shell {
    margin-left:0
  }
  .topbar {
    height:56px;
    padding:0 16px;
    justify-content:flex-start;
    z-index:11
  }
  .mobile-menu {
    display:inline-flex!important
  }
  .breadcrumb {
    font-size:13px
  }
  .breadcrumb span {
    margin:0 6px
  }
  main {
    padding:18px 16px
  }
  .demo-banner {
    margin-bottom:18px;
    font-size:12px
  }
  .demo-banner>span {
    width:100%
  }
  .page-heading {
    align-items:flex-start;
    margin-bottom:20px;
    gap:12px
  }
  h1 {
    font-size:25px
  }
  .eyebrow {
    font-size:11px
  }
  .subtitle {
    font-size:13px;
    margin-top:7px
  }
  .segment {
    margin-top:20px
  }
  .segment a {
    font-size:12px;
    padding:5px 10px
  }
  .kpi {
    min-height:131px;
    padding:15px
  }
  .kpi p {
    font-size:12px;
    padding-right:30px
  }
  .kpi>strong {
    font-size:clamp(20px,14cqi,28px)
  }
  .kpi>small,.kpi>a {
    font-size:12px
  }
  .kpi>svg {
    width:26px;
    height:26px;
    padding:6px;
    right:11px;
    top:13px
  }
  .kpis {
    gap:10px;
    margin-bottom:17px
  }
  .card-heading {
    padding:17px
  }
  .card-heading h2 {
    font-size:15px
  }
  .card-heading p {
    font-size:12px
  }
  .card-body {
    padding:0 17px 17px
  }
  .two-grid {
    gap:16px
  }
  .bar-chart {
    margin:7px 17px 0;
    gap:9px
  }
  .bar-label {
    font-size:11px
  }
  .channel-list {
    padding:0 17px 17px
  }
  .chart-data {
    padding-left:17px
  }
  .detail-aside {
    grid-template-columns:1fr
  }
  .messages {
    padding:18px 16px;
    gap:16px;
    min-height:280px
  }
  .message {
    max-width:94%;
    padding:11px 14px
  }
  .page-footer {
    display:block
  }
  .page-footer span {
    display:block;
    margin-top:4px
  }
  .toolbar {
    padding:15px
  }
  .search-form {
    flex-basis:100%;
    min-width:0
  }
  .filters {
    width:100%;
    flex-wrap:wrap
  }
  .filters select {
    min-width:100px
  }
  .table-card .card-heading {
    flex-wrap:wrap
  }
  .knowledge-grid {
    grid-template-columns:1fr
  }
  .editor-actions .button {
    width:100%;
    white-space:normal
  }
  .context-editor {
    font-size:12px!important
  }
  .access-page {
    padding:36px 16px
  }
  .access-logo {
    margin-bottom:28px
  }
  .access-card h1 {
    font-size:40px
  }
  .access-card>.subtitle {
    font-size:16px
  }
  .preview-access {
    padding:20px
  }
  .task-list .status {
    font-size:11px
  }
  .attempts>a {
    flex-wrap:wrap
  }
  .attempts>a>span:nth-child(2) {
    min-width:150px
  }
  .bar-chart:has(.bar-cell:nth-child(8)) {
    gap:3px
  }
  .bar-chart:has(.bar-cell:nth-child(8)) .bar-label,.bar-chart:has(.bar-cell:nth-child(8)) .bar-number {
    font-size:9px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important
  }
  .agent-card:hover,.button:active {
    transform:none
  }
}
.button.tenant-choice {
  flex-direction:column;
  gap:2px;
  line-height:1.2
}
.button.tenant-choice small {
  font-size:12px;
  font-weight:400;
  opacity:.75
}