/* Adiut 2.0 — componentes (en el repositorio: frontend/adiut2.css)
   Un solo lugar para btn, chip, badge, tbl, card, dot, nav, tree, cite y la estructura de pantalla.
   Todo valor sale de tokens.css (var(--…)); los valores de reserva son los mismos tokens. */

/* ---------- base ---------- */
.a2, .a2 * { box-sizing: border-box; }
.a2 {
  background: var(--bg, #f6f5f1);
  color: var(--ink, #1c1f24);
  font: 400 14px/22px var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.a2 a { color: var(--accent-ink, #1f5c42); }
.a2 a:hover { color: var(--accent-hover, #174632); }
.a2 input, .a2 textarea, .a2 button { font-family: inherit; }
.a2 :focus-visible { outline: 2px solid var(--focus, #2e7d5b); outline-offset: 2px; }

/* ---------- logotipo (misma animación que style.css hoy) ---------- */
.adiut-orbit .orbit-group { transform-box: view-box; transform-origin: center center; animation: adiut-orbit-spin 16s linear infinite; }
.adiut-orbit .orbit-moon { transform-box: fill-box; transform-origin: center center; animation: adiut-orbit-counter 16s linear infinite; }
.adiut-orbit.static .orbit-group, .adiut-orbit.static .orbit-moon { animation: none; }
@keyframes adiut-orbit-spin { to { transform: rotate(360deg); } }
@keyframes adiut-orbit-counter { to { transform: rotate(-360deg); } }
@media (prefers-reduced-motion: reduce) { .adiut-orbit .orbit-group, .adiut-orbit .orbit-moon { animation: none; } }

/* ---------- texto ---------- */
.a2 .h1, .a2 .h2 { margin: 0; font-family: var(--font-serif, "Source Serif 4", Georgia, serif); font-weight: 600; }
.a2 .h1 { font-size: 40px; line-height: 48px; }
.a2 .h2 { font-size: 26px; line-height: 32px; }
.a2 .h3 { margin: 0; font-family: var(--font-serif, "Source Serif 4", Georgia, serif); font-weight: 600; font-size: 17px; line-height: 24px; }
.a2 .sec { margin: 0; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-2, #5b6068); letter-spacing: .04em; text-transform: uppercase; }
.a2 .muted { color: var(--ink-2, #5b6068); }
.a2 .row { display: flex; align-items: center; gap: 10px; }
.a2 .ico { width: var(--icon, 18px); height: var(--icon, 18px); flex-shrink: 0; }

/* ---------- botones ---------- */
.a2 .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, 8px);
  height: var(--control, 36px); padding: 0 14px;
  border-radius: var(--radius-control, 8px); border: var(--hairline, 1px) solid var(--control-line, #d9d7cf);
  background: var(--surface, #fff); color: var(--ink, #1c1f24);
  font: 500 13.5px/1 var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.a2 .btn:hover { border-color: var(--ink-2, #5b6068); }
.a2 .btn.pri { background: var(--accent, #2e7d5b); border-color: var(--accent, #2e7d5b); color: var(--surface, #fff); }
.a2 .btn.pri:hover { background: var(--accent-ink, #1f5c42); border-color: var(--accent-ink, #1f5c42); }
.a2 .btn.sm { height: var(--control-sm, 30px); padding: 0 10px; font-size: 12.5px; }
.a2 .btn.xs { height: var(--control-xs, 26px); padding: 0 8px; font-size: 12px; }
.a2 .btn.icon { width: var(--control, 36px); padding: 0; }
.a2 .btn.sm.icon { width: var(--control-sm, 30px); }
.a2 .btn.block { width: 100%; justify-content: flex-start; }
.a2 .btn[aria-pressed="true"] .ico { color: var(--accent-ink, #1f5c42); }

/* ---------- chips ---------- */
.a2 .chip {
  display: inline-flex; align-items: center; gap: 6px; height: var(--control-sm, 30px); padding: 0 12px;
  border-radius: var(--radius-pill, 999px); border: var(--hairline, 1px) solid var(--control-line, #d9d7cf);
  background: var(--surface, #fff); color: var(--ink, #1c1f24);
  font: 500 13px/1 var(--font-sans, "IBM Plex Sans", system-ui, sans-serif);
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
.a2 .chip:hover { border-color: var(--ink-2, #5b6068); }
.a2 .chip.on { background: var(--ink, #1c1f24); border-color: var(--ink, #1c1f24); color: var(--surface, #fff); }
.a2 .chip.next { border-color: var(--accent, #2e7d5b); color: var(--accent-ink, #1f5c42); background: var(--next-tint, #f3f9f5); }
.a2 .chip.xs { height: var(--control-xs, 26px); padding: 0 10px; font-size: 12px; }

/* ---------- marcas (badge) ---------- */
.a2 .badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px;
  border-radius: var(--radius-pill, 999px); font-size: 12px; font-weight: 600; line-height: 18px; white-space: nowrap;
}
.a2 .badge.ok   { background: var(--accent-tint, #e6f2ec);  color: var(--accent-ink, #1f5c42); }
.a2 .badge.warn { background: var(--warn-tint, #fbf1dc);    color: var(--warn-ink, #7a5410); }
.a2 .badge.bad  { background: var(--crit-tint, #fbe7e4);    color: var(--crit-ink, #8e2e24); }
.a2 .badge.mute { background: var(--neutral-tint, #eeede8); color: var(--neutral-ink, #4d525a); }
.a2 .badge.own  { background: var(--own-tint, #e8edf7);     color: var(--own-ink, #2f4a7a); }

/* ---------- cita en línea ---------- */
.a2 .cite {
  padding: 0 3px; border-radius: var(--radius-cite, 4px); background: var(--cite-bg, #eef6f1); color: var(--ink, #1c1f24);
  text-decoration: underline; text-decoration-color: var(--accent, #2e7d5b); text-underline-offset: 3px;
}
.a2 .v { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--accent-ink, #1f5c42); vertical-align: 1px; }

/* ---------- puntos de severidad ---------- */
.a2 .dot { display: inline-block; width: var(--dot, 9px); height: var(--dot, 9px); border-radius: var(--radius-pill, 999px); flex-shrink: 0; background: var(--dot-neutro, #9aa0a8); }
.a2 .dot.ok    { background: var(--dot-ok, #2e7d5b); }
.a2 .dot.medio { background: var(--dot-medio, #b7791f); }
.a2 .dot.alto  { background: var(--dot-alto, #b03a2e); }
.a2 .dot.own   { background: var(--own-ink, #2f4a7a); }
.a2 .dot.lg    { width: 11px; height: 11px; }

/* ---------- tarjetas y listas ---------- */
.a2 .card { background: var(--surface, #fff); border: var(--hairline, 1px) solid var(--line, #e3e1da); border-radius: var(--radius-card, 12px); }
.a2 .card.next { border-color: var(--next-line, #cfe3d8); background: var(--next-bg, #f7fbf8); }
.a2 .card.pending { border-color: var(--dot-medio, #b7791f); background: var(--pending-bg, #fffdf7); }
.a2 .item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-top: var(--hairline, 1px) solid var(--line-2, #eeede8); text-decoration: none; color: var(--ink, #1c1f24); }
.a2 .item:first-child { border-top: 0; }
.a2 .item:hover { background: var(--bg, #f6f5f1); }
.a2 .src { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: var(--hairline, 1px) solid var(--line-2, #eeede8); }
.a2 .src:first-child { border-top: 0; padding-top: 0; }
.a2 .kv { display: grid; grid-template-columns: 110px 1fr; gap: 6px 10px; font-size: 13px; line-height: 18px; }
.a2 .risk { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--radius-control, 8px); border: var(--hairline, 1px) solid var(--line-2, #eeede8); }

/* ---------- tabla ---------- */
.a2 .tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.a2 .tbl th { text-align: left; font-weight: 600; color: var(--ink-2, #5b6068); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; padding: 8px 12px; border-bottom: var(--hairline, 1px) solid var(--line, #e3e1da); }
.a2 .tbl td { padding: 11px 12px; border-bottom: var(--hairline, 1px) solid var(--line-2, #eeede8); vertical-align: middle; line-height: 18px; }
.a2 .tbl tr.sel td { background: var(--bg, #f6f5f1); }
.a2 .tbl.dense { font-size: 13px; }
.a2 .tbl.dense th { padding: 8px 10px; }
.a2 .tbl.dense td { padding: 10px; vertical-align: top; }

/* ---------- navegación y árbol ---------- */
.a2 .nav { display: flex; flex-direction: column; gap: 2px; }
.a2 .nav a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-control, 8px); color: var(--ink, #1c1f24); text-decoration: none; font-size: 14px; font-weight: 500; line-height: 20px; }
.a2 .nav a:hover { background: var(--bg, #f6f5f1); }
.a2 .nav a.on { background: var(--accent-tint, #e6f2ec); color: var(--accent-ink, #1f5c42); }
.a2 .nav svg { width: var(--icon, 18px); height: var(--icon, 18px); flex-shrink: 0; }
.a2 .tree a { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--radius-control, 8px); color: var(--ink, #1c1f24); text-decoration: none; font-size: 13.5px; line-height: 18px; }
.a2 .tree a.on { background: var(--neutral-tint, #eeede8); font-weight: 500; }
.a2 .tree svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-2, #5b6068); }

/* ---------- respuesta del asistente ---------- */
.a2 .ans p { margin: 0; font-size: 14.5px; line-height: 23px; }
.a2 .ans h3 { margin: 0; font-size: 14px; font-weight: 600; line-height: 20px; }
.a2 .ans ul { margin: 0; padding-left: 18px; font-size: 14px; line-height: 22px; display: flex; flex-direction: column; gap: 4px; }
.a2 .jur { display: grid; grid-template-columns: 150px 1fr auto; gap: 6px 12px; align-items: start; padding: 8px 0; border-top: var(--hairline, 1px) solid var(--line-2, #eeede8); font-size: 13.5px; line-height: 19px; }
.a2 .jur:first-child { border-top: 0; }
.a2 .bubble { background: var(--user-bubble, #e9e7e0); border-radius: 14px 14px var(--radius-cite, 4px) 14px; padding: 12px 16px; font-size: 14.5px; line-height: 22px; }

/* ---------- flujos ---------- */
.a2 .flow { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--surface, #fff); border: var(--hairline, 1px) solid var(--line, #e3e1da); border-radius: var(--radius-card, 12px); min-height: 150px; }
.a2 .flow h3 { margin: 0; font-size: 15px; font-weight: 600; line-height: 20px; }
.a2 .flow p { margin: 0; font-size: 12.5px; line-height: 18px; color: var(--ink-2, #5b6068); flex-grow: 1; }
.a2 .step { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; }
.a2 .num { width: 22px; height: 22px; flex-shrink: 0; border-radius: var(--radius-pill, 999px); display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 600; background: var(--neutral-tint, #eeede8); color: var(--neutral-ink, #4d525a); }
.a2 .num.done { background: var(--accent, #2e7d5b); color: var(--surface, #fff); }
.a2 .num.wait { background: var(--warn-tint, #fbf1dc); color: var(--warn-ink, #7a5410); }

/* ---------- ayuda ---------- */
.a2 .todo { display: flex; align-items: center; gap: 10px; font-size: 13.5px; line-height: 18px; padding: 6px 0; }
.a2 .tick { width: 20px; height: 20px; flex-shrink: 0; border-radius: var(--radius-pill, 999px); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; border: 1.5px solid var(--control-line, #d9d7cf); }
.a2 .tick.done { background: var(--accent, #2e7d5b); border-color: var(--accent, #2e7d5b); color: var(--surface, #fff); }
.a2 .tab { height: 34px; padding: 0 12px; border: 0; background: transparent; font: 500 13px/1 var(--font-sans, "IBM Plex Sans", system-ui, sans-serif); color: var(--ink-2, #5b6068); border-bottom: 2px solid transparent; cursor: pointer; }
.a2 .tab.on { color: var(--ink, #1c1f24); border-bottom-color: var(--accent, #2e7d5b); }

/* ---------- historial ---------- */
.a2 .ent { display: grid; grid-template-columns: 72px 28px 1fr 200px 210px 110px; align-items: center; gap: 12px; padding: 12px 16px; border-top: var(--hairline, 1px) solid var(--line-2, #eeede8); text-decoration: none; color: var(--ink, #1c1f24); }
.a2 .ent:first-child { border-top: 0; }
.a2 .ent:hover { background: var(--bg, #f6f5f1); }
.a2 .ent.sel { background: var(--bg, #f6f5f1); }
.a2 .ent svg { width: var(--icon, 18px); height: var(--icon, 18px); color: var(--ink-2, #5b6068); }
.a2 .ent .badge { justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* ---------- biblioteca ---------- */
.a2 .req { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: var(--hairline, 1px) solid var(--line-2, #eeede8); }
.a2 .req:first-child { border-top: 0; padding-top: 0; }
.a2 .votes { width: 44px; height: 44px; flex-shrink: 0; border-radius: var(--radius-control, 8px); border: var(--hairline, 1px) solid var(--line, #e3e1da); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; line-height: 16px; }
.a2 .votes small { font-size: 10px; font-weight: 500; color: var(--ink-2, #5b6068); }

/* ---------- ayuda ---------- */
.a2 .art { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: var(--hairline, 1px) solid var(--line-2, #eeede8); font-size: 13.5px; text-decoration: none; color: var(--ink, #1c1f24); }
.a2 .art:first-of-type { border-top: 0; }
.a2 .art > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a2 .art > .muted { white-space: nowrap; flex-shrink: 0; }
.a2 .vid { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink, #1c1f24); }
.a2 .thumb { height: 56px; border-radius: var(--radius-control, 8px); background: var(--ink, #1c1f24); display: flex; align-items: center; justify-content: center; }
.a2-help { position: absolute; top: 0; right: 0; width: 440px; height: 100%; background: var(--surface, #fff); border-left: var(--hairline, 1px) solid var(--line, #e3e1da); box-shadow: var(--shadow-panel, -8px 0 24px rgba(28,31,36,.08)); display: flex; flex-direction: column; overflow: hidden; }
.a2 .progress { height: 6px; border-radius: var(--radius-pill, 999px); background: var(--line-2, #eeede8); overflow: hidden; }
.a2 .progress > span { display: block; height: 100%; background: var(--accent, #2e7d5b); }

/* ---------- estructura de pantalla ---------- */
.a2-shell { position: relative; display: flex; background: var(--bg, #f6f5f1); overflow: hidden; }
.a2-sidebar { width: var(--sidebar, 232px); flex-shrink: 0; background: var(--surface, #fff); border-right: var(--hairline, 1px) solid var(--line, #e3e1da); display: flex; flex-direction: column; padding: 16px 12px; gap: 10px; }
.a2-brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 12px; }
.a2-brand svg { flex-shrink: 0; }
.a2 .a2-wordmark { display: block; flex-shrink: 0; }
.a2-main { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; }
.a2-header { height: var(--header, 56px); flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 24px; border-bottom: var(--hairline, 1px) solid var(--line, #e3e1da); }
.a2-search { flex-grow: 1; max-width: 520px; display: flex; align-items: center; gap: 8px; height: var(--control, 36px); padding: 0 12px; border: var(--hairline, 1px) solid var(--control-line, #d9d7cf); border-radius: var(--radius-control, 8px); background: var(--surface, #fff); }
.a2-search input { border: 0; outline: 0; flex-grow: 1; font-size: 13.5px; background: transparent; color: var(--ink, #1c1f24); min-width: 0; }
.a2-search input::placeholder { color: var(--ink-2, #5b6068); }
.a2-panel { width: var(--panel, 372px); flex-shrink: 0; border-left: var(--hairline, 1px) solid var(--line, #e3e1da); background: var(--surface, #fff); display: flex; flex-direction: column; padding: 20px; gap: 14px; overflow: hidden; }
.a2-panel.flujos { width: var(--panel-flujos, 420px); }
.a2-user { display: flex; align-items: center; gap: 10px; padding: 10px 8px 4px; border-top: var(--hairline, 1px) solid var(--line-2, #eeede8); }
.a2-avatar { width: 32px; height: 32px; border-radius: var(--radius-pill, 999px); background: var(--accent-tint, #e6f2ec); color: var(--accent-ink, #1f5c42); display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex-shrink: 0; }

/* composer */
.a2-composer { background: var(--surface, #fff); border: var(--hairline, 1px) solid var(--line, #e3e1da); border-radius: var(--radius-card, 12px); box-shadow: var(--shadow-card, 0 1px 2px rgba(28,31,36,.04)); padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.a2-composer textarea { border: 0; outline: 0; resize: none; min-height: 84px; font-size: 15.5px; line-height: 24px; color: var(--ink, #1c1f24); background: transparent; width: 100%; }
.a2-composer textarea::placeholder, .a2-composer input::placeholder { color: var(--ink-2, #5b6068); }
.a2-composer .sep { width: 1px; height: 22px; background: var(--line, #e3e1da); margin: 0 4px; }
.a2-composer.inline { flex-direction: row; align-items: center; gap: 10px; padding: 8px 8px 8px 16px; box-shadow: none; }
.a2-composer.inline input { flex-grow: 1; border: 0; outline: 0; font-size: 14.5px; background: transparent; color: var(--ink, #1c1f24); min-width: 0; }

@media (max-width: 768px) {
  .a2-sidebar { display: none; }
  .a2-panel { width: 100%; border-left: 0; }
}