@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   Tutor IA · tarjeta de fragmento, visualizador PDF, «Antes de
   preguntar» y diseño de escritorio. Prefijo tc-. Usa los tokens del
   app y respeta html[data-theme="dark"].
   ══════════════════════════════════════════════════════════════════ */
:root {
  --tc-rec: #047857; --tc-rec-bd: #10B981; --tc-evi: #1E3A8A; --tc-evi-bd: #3B82F6;
  --tc-pbp: #9A3412; --tc-pbp-bd: #FB923C; --tc-nar: #3F3F46; --tc-nar-bd: #A1A1AA;
  --tc-mark: rgba(250,204,21,.55);
}
html[data-theme="dark"] { --tc-rec: #6EE7B7; --tc-evi: #93C5FD; --tc-pbp: #FDBA74; --tc-nar: #D4D4D8; --tc-mark: rgba(250,204,21,.32); }

/* ── Tarjeta de fragmento (dentro de la respuesta del Tutor) ─────── */
.rich-card.tc-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px 14px 10px 16px; margin: 10px 0; font-size: 13.5px; line-height: 1.5; box-shadow: var(--shadow-sm);
}
.rich-card.tc-card::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tc-nar-bd); }
.tc-card.tc-recomendacion::before { background: var(--tc-rec-bd); }
.tc-card.tc-evidencia::before { background: var(--tc-evi-bd); }
.tc-card.tc-pbp::before { background: var(--tc-pbp-bd); }
.tc-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tc-tipo { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; color: #fff; background: var(--tc-nar-bd); font-family: 'Inter', sans-serif; }
.tc-recomendacion .tc-tipo, .tc-tipo.tc-recomendacion { background: var(--tc-rec-bd); }
.tc-evidencia .tc-tipo, .tc-tipo.tc-evidencia { background: var(--tc-evi-bd); }
.tc-pbp .tc-tipo, .tc-tipo.tc-pbp { background: var(--tc-pbp-bd); }
.tc-grado { font-size: 12px; font-weight: 700; color: var(--tc-nar); }
.tc-recomendacion .tc-grado { color: var(--tc-rec); } .tc-evidencia .tc-grado { color: var(--tc-evi); } .tc-pbp .tc-grado { color: var(--tc-pbp); }
.tc-right { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.tc-pag {
  font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 11.5px; color: var(--text-main); text-decoration: none;
  border: 1px solid var(--border); border-radius: 6px; padding: 3px 8px; background: var(--bg-card); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; cursor: default;
}
.tc-pag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); flex-shrink: 0; }
/* página del catálogo sin geometría certificada: se ve igual que la certificada (el visor localiza el párrafo) */
.tc-pag.legacy { border-style: solid; color: var(--text-main); } .tc-pag.legacy .dot { background: var(--emerald); }
.tc-pag.none { border-style: dashed; color: var(--text-muted); }
.tc-pag.html { color: #611232; border-color: rgba(97,18,50,.35); } .tc-pag.html .dot { background: #9d2449; }
a.tc-act { text-decoration: none; }
.tc-texto { margin: 8px 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--text-main); }
.tc-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.tc-ed { display: inline-flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; min-width: 0; font-size: 12px; color: var(--text-muted); }
.tc-ed .tc-pag { font-size: 11px; padding: 2px 7px; }
.tc-ed b { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-main); }
.tc-ed .tc-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 46ch; }
.tc-vig { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 100px; }
.tc-vig.old { background: var(--warning-bg); color: var(--warning); }
.tc-vig.note { background: var(--surface-2); color: var(--text-muted); font-weight: 700; }
.tc-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
.tc-act { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); font: inherit; font-weight: 600; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.tc-act:hover { border-color: var(--emerald); color: var(--emerald-dark); }
.tc-act.primary { background: var(--emerald-bg); border-color: rgba(16,185,129,.35); color: var(--emerald-dark); font-weight: 700; }
.tc-act.primary:hover { background: var(--emerald); color: #09090B; }
.tc-act.rep { width: 30px; padding: 0; justify-content: center; color: var(--text-muted); border-color: transparent; }
.tc-act.rep:hover { color: var(--error); background: var(--error-bg); border-color: transparent; }
.tc-act svg, .tc-ib svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-ctx { margin-top: 10px; padding: 9px 12px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; color: var(--text-muted); line-height: 1.55; }
.tc-ctx b { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.tc-prenote { font-size: 12px; color: var(--emerald-dark); background: var(--emerald-bg); border-radius: 8px; padding: 6px 10px; margin: 0 0 10px; }
.tc-prenote.warn { color: var(--warning); background: var(--warning-bg); }
.tc-typing-note { font-size: 12px; color: var(--text-muted); margin-top: 6px; }

/* ── «¿Cuál guía?» con datos (reutiliza .clarification-box del app) ── */
.tc-ask.done { padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.tc-ask.done .tc-ask-t { margin: 0; font-size: 13px; color: var(--text-muted); }
.tc-clarbox .clar-option.tc-clar { display: flex; align-items: center; gap: 12px; text-align: left; }
.tc-clarbox .clar-option-body { flex: 1; min-width: 0; }
.tc-clarbox .clar-option-title { font-size: 14px; font-weight: 700; line-height: 1.3; }
.tc-clarbox .clar-option.tc-clar-main { background: var(--emerald-bg); border: 1px solid rgba(16,185,129,.4); }
.tc-clarbox .clar-option.tc-clar-main .clar-option-title { color: var(--emerald-dark); }
.tc-clarbox .clar-option-arrow { flex-shrink: 0; color: var(--text-muted); }
.tc-clar.rel .clar-option-title { font-weight: 600; color: var(--text-muted); }
.tc-clar-rel { margin: 4px 0; }
.tc-clar-rel > summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-muted); padding: 8px 4px; list-style: none; }
.tc-clar-rel > summary::before { content: "\25B8  "; }
.tc-clar-rel[open] > summary::before { content: "\25BE  "; }
.tc-clarbox .clar-all { border-style: solid; background: var(--emerald-bg); }

/* ── Visualizador del fragmento sobre el PDF ─────────────────────── */
#tc-viewer { position: fixed; inset: 0; z-index: 950; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(9,9,11,.62); backdrop-filter: blur(3px); }
#tc-viewer.open { display: flex; }
.tc-modal { position: relative; width: min(1320px, 100%); height: min(100%, 1100px); background: var(--bg-app); color: var(--text-main); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 30px 80px rgba(0,0,0,.35); font-family: 'Inter', -apple-system, system-ui, sans-serif; }
.tc-vh { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--bg-card); }
.tc-vh .who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tc-vh .who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-vh .who span { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-ib { height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.tc-ib:hover { background: var(--surface); }
.tc-solo-movil { display: none; }
/* el PDF manda: ocupa todo el alto con desplazamiento continuo; el texto del fragmento va a la derecha */
.tc-vbody { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 340px; }
.tc-vmain { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.tc-vside { border-left: 1px solid var(--border); padding: 16px; overflow-y: auto; background: var(--bg-card); }
.tc-vtexto { margin: 10px 0 12px; font-size: 14px; line-height: 1.6; }
.tc-vstatus { margin-top: 12px; font-size: 12px; color: var(--text-muted); line-height: 1.6; }
.tc-vstatus .ok { color: var(--emerald-dark); font-weight: 700; } .tc-vstatus .bad { color: var(--error); font-weight: 700; } .tc-vstatus .warn { color: var(--warning); font-weight: 700; }
.tc-vtools { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--border); background: var(--surface); }
.tc-vtools .tc-html-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-ir { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid #A7F3D0; background: var(--emerald-bg); color: var(--emerald-dark); font: 700 12px/1 'Inter', sans-serif; cursor: pointer; white-space: nowrap; }
.tc-ir:hover { background: #D1FAE5; }
.tc-vtools .pages { display: inline-flex; align-items: center; gap: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--text-muted); }
.tc-vtools .pages button { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); cursor: pointer; display: grid; place-items: center; }
.tc-vtools .pages button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.tc-vtools .pages button:disabled { opacity: .35; cursor: default; }
.tc-stage { flex: 1; min-height: 0; overflow: auto; background: #D9DBE0; padding: 16px; position: relative; overscroll-behavior: contain; }
.tc-pages { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.tc-page { position: relative; width: min(100%, 940px); background: #fff; box-shadow: 0 2px 10px rgba(9,9,11,.14); border-radius: 3px; overflow: hidden; }
.tc-page canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tc-page.objetivo { box-shadow: 0 0 0 2px rgba(16,185,129,.55), 0 10px 28px rgba(4,120,87,.14); }
.tc-page-n { position: absolute; right: 8px; bottom: 6px; font: 600 10.5px/1 ui-monospace, Menlo, monospace; color: #71717a; background: rgba(255,255,255,.78); padding: 3px 6px; border-radius: 4px; pointer-events: none; }
/* Resaltado del fragmento (2026-09-22, el mismo de la app): verde menta ligero por renglón, sin bordes, barra
   fina al margen del párrafo y un pulso suave al llegar. Igual para la geometría verificada y el texto localizado. */
.tc-hl { position: absolute; border-radius: 3px; background: linear-gradient(180deg, rgba(110,231,183,.5), rgba(52,211,153,.38)); mix-blend-mode: multiply; pointer-events: none; animation: tcHlAparece .5s ease-out var(--d, 0ms) both; }
.tc-hl::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(52,211,153,.3); opacity: 0; }
.tc-page.pulso .tc-hl::after { animation: tcHlPulso 1.3s ease-in-out calc(var(--d, 0ms) + .3s) 2; }
.tc-hl-barra { position: absolute; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #6EE7B7, #34D399); pointer-events: none; transform-origin: 50% 0; animation: tcHlBarra .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes tcHlAparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes tcHlBarra { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
@keyframes tcHlPulso { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
/* Cuando solo se conoce la hoja (escaneada o texto no localizado) la hoja destella unos segundos con «Página citada». */
.tc-page.destello::after, .tc-html.destello::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; animation: tcDestello 3.2s ease-in-out both; }
@keyframes tcDestello { 0% { box-shadow: inset 0 0 0 0 rgba(16,185,129,0); background: rgba(16,185,129,0); } 14%, 44%, 74% { box-shadow: inset 0 0 0 4px rgba(16,185,129,.9); background: rgba(16,185,129,.1); } 29%, 59% { box-shadow: inset 0 0 0 3px rgba(16,185,129,.45); background: rgba(16,185,129,.04); } 100% { box-shadow: inset 0 0 0 0 rgba(16,185,129,0); background: rgba(16,185,129,0); } }
.tc-aviso-hoja { position: absolute; top: 14px; left: 50%; z-index: 3; display: flex; align-items: center; gap: 7px; background: #047857; color: #fff; font: 600 13px/1 -apple-system, system-ui, sans-serif; padding: 8px 13px; border-radius: 999px; box-shadow: 0 8px 22px rgba(4,120,87,.32); pointer-events: none; white-space: nowrap; transform: translateX(-50%); animation: tcAviso 3.4s cubic-bezier(.22,1,.36,1) both; }
.tc-aviso-hoja::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6EE7B7; }
@keyframes tcAviso { 0% { opacity: 0; transform: translate(-50%, -6px); } 10%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -4px); } }
@media (prefers-reduced-motion: reduce) { .tc-hl, .tc-hl-barra, .tc-aviso-hoja, .tc-html .tc-html-hit::after, .tc-page.pulso .tc-hl::after { animation: none; } .tc-page.destello::after, .tc-html.destello::after { animation: none; box-shadow: inset 0 0 0 3px rgba(16,185,129,.8); } }
.tc-msg { padding: 24px; text-align: center; color: var(--text-muted); font-size: 13px; }
.tc-msg b { display: block; color: var(--text-main); margin-bottom: 4px; }
.tc-msg.bad b { color: var(--error); }

/* La hoja de reporte debe quedar sobre el visualizador */
#report-chunk-sheet.active { z-index: 1100; }

/* ── Escritorio: el Tutor usa el ancho de la ventana ─────────────── */
@media (min-width: 1024px) {
  body[data-route="ai"] .chat-msgs { padding: 20px max(24px, calc((100% - 860px) / 2)) 12px; }
  body[data-route="ai"] .msg-body { max-width: calc(100% - 44px); }
  body[data-route="ai"] .chat-mode-toggle .cmt-segmented { max-width: 420px; }
  body[data-route="ai"] .chat-input-wrap, body[data-route="ai"] .chat-suggestions { margin-left: max(24px, calc((100% - 860px) / 2)); margin-right: max(24px, calc((100% - 860px) / 2)); }
  body[data-route="ai"] .rich-card.tc-card { padding: 14px 18px 12px 20px; }
  body[data-route="ai"] .tc-texto { font-size: 15px; }
}

/* ── Móvil ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tc-vbody { grid-template-columns: minmax(0, 1fr); }
  .tc-vside { display: none; position: absolute; left: 0; right: 0; bottom: 0; max-height: 48%; border-left: 0; border-top: 1px solid var(--border); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 30px rgba(0,0,0,.18); z-index: 2; padding: 12px 14px; }
  .tc-modal.texto-abierto .tc-vside { display: block; }
  .tc-solo-movil { display: inline-flex; }
  .tc-vtexto { font-size: 13.5px; margin: 8px 0; }
}
@media (max-width: 640px) {
  #tc-viewer { padding: 0; }
  .tc-modal { border-radius: 0; height: 100%; }
  .tc-vh { padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); }
  .tc-ib span { display: none; }
  .tc-stage { padding: 8px; }
  .rich-card.tc-card { padding: 11px 12px 9px 14px; }
  .tc-texto { font-size: 14px; }
  .tc-ed .tc-tit { max-width: 28ch; }
  .tc-acts { margin-left: 0; width: 100%; justify-content: flex-start; }
  .tc-ask-row { grid-template-columns: 1fr; gap: 4px; }
  .tc-ask-k { padding-top: 0; }
}

/* ── Bloque «Respuesta» (síntesis en streaming) — estilo documento ── */
/* Sin recuadro: la respuesta es la voz del Tutor; las tarjetas de abajo son sus fuentes.
   Variante con caja disponible añadiendo la clase .boxed a .tc-sint. */
.tc-sint { margin: 2px 0 18px; animation: tc-in .3s ease-out both; }
.tc-sint.boxed { border-radius: 12px; background: var(--bg-card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.tc-sint.boxed .tc-sint-h { padding: 11px 18px 8px; border-bottom: 1px solid var(--border); } .tc-sint.boxed .tc-sint-b { padding: 12px 18px 14px; }
.tc-sint-h { display: flex; align-items: baseline; gap: 10px; padding: 0 0 8px; }
.tc-sint-t { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--emerald-dark); }
.tc-sint-s { font-size: 11.5px; color: var(--text-muted); display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.tc-sint-s::before { content: "·"; color: var(--border); }
.tc-sint.bad .tc-sint-t { color: var(--warning); }
.tc-sint-b { padding: 0; font-size: 15px; line-height: 1.7; color: var(--text-main); }
.tc-sint-b p { margin: 0 0 9px; } .tc-sint-b p:last-child { margin-bottom: 0; }
.tc-sint-b p.tc-sub { margin: 12px 0 5px; font-weight: 700; font-size: 13px; letter-spacing: .02em; color: var(--text-main); }
.tc-sint-b ul { margin: 2px 0 10px; padding-left: 22px; } .tc-sint-b li { margin: 3px 0; padding-left: 2px; }
.tc-sint-b li::marker { color: var(--text-muted); }
.tc-sint-b b { font-weight: 700; } .tc-sint-b i { font-style: italic; }
.tc-sint-err { color: var(--warning); font-size: 13.5px; }
.tc-cites { display: inline-flex; gap: 3px; line-height: 0; vertical-align: 3px; margin: 0 1px 0 3px; white-space: nowrap; }
/* esmeralda ligero (emerald-400 del logo) con número oscuro: contraste ≈ 7:1, distinto del verde oscuro de etiquetas y botones */
.tc-cite { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #34D399; color: #064E3B; font-size: 10px; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s, box-shadow .15s; }
.tc-cite:hover { background: #10B981; transform: translateY(-1px); box-shadow: 0 2px 5px rgba(16,185,129,.35); }
html[data-theme="dark"] .tc-cite { background: #34D399; color: #052e22; }
.tc-cite-sep { display: none; }
.tc-nw { white-space: nowrap; }
.tc-caret { display: inline-block; width: 13px; height: 13px; margin-left: 3px; vertical-align: -1px; animation: tcCursor 1.6s linear infinite; }
@keyframes tcCursor { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(90deg) scale(.8); } 100% { transform: rotate(180deg) scale(1); } }
.tc-dots { display: inline-flex; gap: 3px; } .tc-dots b { width: 5px; height: 5px; border-radius: 50%; background: var(--text-muted); animation: tc-bounce 1s infinite ease-in-out; }
.tc-dots b:nth-child(2) { animation-delay: .15s; } .tc-dots b:nth-child(3) { animation-delay: .3s; }
.tc-skel { display: grid; gap: 10px; padding: 4px 0 2px; } .tc-skel i { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface) 50%, var(--surface-2) 75%); background-size: 200% 100%; animation: tc-shimmer 1.2s infinite; }
.tc-fuentes-h { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 2px; padding-top: 12px; border-top: 1px solid var(--border); }
.tc-fuentes-h span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.tc-fuentes-h small { font-size: 11.5px; color: var(--text-muted); }
.tc-card.tc-in { animation: tc-in .35s ease-out both; animation-delay: calc(var(--i, 0) * 55ms); }
.tc-card.tc-flash { box-shadow: 0 0 0 3px var(--emerald); transition: box-shadow .3s; }
.tc-card.tc-peek { border-color: var(--emerald); }
@keyframes tc-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes tc-blink { to { visibility: hidden; } }
@keyframes tc-bounce { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-3px); opacity: 1; } }
@keyframes tc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .tc-sint, .tc-card.tc-in { animation: none; } .tc-caret, .tc-dots b, .tc-skel i { animation: none; } }

/* ── Visor en modo fuente HTML (estilo del portal DDIMBE) ───────── */
.tc-html-lbl { font-size: 12px; color: var(--text-muted); }
.tc-html { max-width: 860px; margin: 0 auto; background: #fff; color: #404041; border: 1px solid var(--border); border-radius: 8px; padding: 22px 28px; font: 300 15px/1.6 "Noto Sans", Inter, -apple-system, sans-serif; text-align: justify; }
.tc-html h2 { font-size: 20px; font-weight: 700; color: #611232; margin: 0 0 6px; text-align: left; }
.tc-html hr, .tc-html hr.red { border: 0; border-top: 2px solid #7f1d1d; margin: 6px 0 14px; }
.tc-html h3, .tc-html h4 { color: #611232; font-weight: 600; text-align: left; }
.tc-html p { margin: 0 0 10px; }
.tc-html .separador { text-align: center; font-weight: 700; margin: 1.5em 0; border-bottom: 1px dashed #ccc; }
.tc-html ul, .tc-html ol { padding-left: 2em; }
.tc-html img { max-width: 100%; height: auto; display: block; margin: 12px auto; }
.tc-html table { border-collapse: collapse; width: 100%; font-size: 13px; }
.tc-html td, .tc-html th { border: 1px solid #e4e4e7; padding: 4px 6px; vertical-align: top; }
.tc-html a { color: #1d4ed8; }
.tc-html { position: relative; }
.tc-html .tc-html-hit { position: relative; background-color: rgba(110,231,183,.3) !important; background-image: none !important; box-shadow: inset 3px 0 0 #34D399; border-radius: 6px; padding: 6px 10px 6px 14px; }
.tc-html .tc-html-hit::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: rgba(52,211,153,.22); opacity: 0; pointer-events: none; animation: tcHlPulso 1.3s ease-in-out .3s 2; }
html[data-theme="dark"] .tc-html { background: #fff; color: #404041; }

/* ── «Fuentes consultadas» como carrusel (una fila con desplazamiento) ── */
.msg-row.ai .sources-list { display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important; gap: 10px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.msg-row.ai .sources-list::-webkit-scrollbar { height: 6px; } .msg-row.ai .sources-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
.msg-row.ai .sources-list .source-card { flex: 0 0 auto; width: 236px; scroll-snap-align: start; }
.msg-row.ai .sources-list .source-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) { .msg-row.ai .sources-list .source-card { width: 78vw; max-width: 260px; } }

@media (max-width: 640px) { .tc-clarbox .clar-option.tc-clar { gap: 8px; padding: 10px 12px; } .tc-clarbox .clar-option-title { font-size: 13.5px; } }

/* ── «¿Tratamiento de qué?» ─────────────────────────────────────── */
.tc-ask { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: var(--bg-card); }
.tc-ask.done { opacity: .6; }
.tc-ask .tc-ask-t { margin: 0 0 8px; font-size: 14px; line-height: 1.5; }
.tc-ask .tc-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-ask .tc-chip { height: 30px; padding: 0 11px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); font: inherit; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.tc-ask .tc-chip:hover { border-color: var(--emerald); color: var(--emerald-dark); }

/* ── historial de consultas, nueva consulta, guía fijada (2.2.0) ─────────────── */
.chat-welcome .chat-welcome-ctx { margin-top: 12px; font-size: 12.5px; color: #065F46; background: #ECFDF5; border: 1px solid #A7F3D0; border-radius: 999px; display: inline-block; padding: 6px 12px; }
.chat-welcome .chat-welcome-ctx a { color: #047857; font-weight: 600; text-decoration: none; margin-left: 2px; }
/* guía o documento fijado: barra persistente sobre el campo de texto (se quita con «Quitar») */
.chat-fija { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 7px 20px; background: var(--emerald-bg); border-top: 1px solid var(--border); color: var(--emerald-dark); font-size: 12.5px; line-height: 1.35; }
.chat-fija .chat-fija-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-fija .chat-fija-t b { font-weight: 600; }
.chat-fija .chat-fija-x { flex-shrink: 0; height: 28px; padding: 0 12px; border-radius: 100px; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }
.chat-fija .chat-fija-x:hover { background: var(--bg-card); }
.chat-fija + .chat-input-wrap { border-top: 0; }
.tc-recientes-vacio { font-size: 13.5px; color: var(--text-muted, #71717a); line-height: 1.5; padding: 18px 4px; text-align: center; }
.tc-reciente { cursor: pointer; }
.tc-reciente .t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-recientes-borrar { display: block; margin: 12px auto 4px; background: none; border: 0; color: var(--text-muted, #71717a); font: 600 12.5px/1 'Inter', system-ui, sans-serif; cursor: pointer; padding: 8px 12px; }
.tc-recientes-borrar:hover { color: #B91C1C; }
/* 2.7.3 (2026-09-23, igual que la app): consultas guardadas con el marcador de la barra; en Recientes llevan su marcador y
   en Guardadas van arriba de las guías */
.tc-reciente-marca { width: 14px; height: 14px; flex: none; color: var(--emerald, #10B981); }
.cq-ico[aria-pressed="true"] { color: var(--emerald-dark, #047857); }
.gd-sec { margin: 6px 2px 8px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted, #71717a); }
.gd-consultas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-bottom: 18px; }
.gd-consultas .tc-reciente .info { flex: 1; min-width: 0; }
.tc-sheet .tc-sheet-x { background: var(--surface, #f4f4f5); border: 0; width: 32px; height: 32px; border-radius: 50%; font-size: 20px; line-height: 1; cursor: pointer; color: var(--text-main, #18181b); }
.tc-sheet #recientes-list { max-height: 60vh; overflow: auto; }

/* ── hub de la guía (pantalla concepto, 2.2.0) ─────────────────────────────── */
.hub-desc { font-size: 13.5px; line-height: 1.55; color: var(--text-muted, #52525b); margin: 10px 0 4px; }
button.hub-card.hub-ask { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; margin: 14px 0 6px; border: 1px solid #A7F3D0; background: #ECFDF5; }
button.hub-card.hub-ask:hover { background: #D1FAE5; }
button.hub-card.hub-ask .hub-icon { background: #10B981; color: #fff; }
button.hub-card.hub-ask .hub-icon svg { color: #fff; }
.hub-ed { cursor: default; }
.hub-ed:hover { transform: none; }
.hub-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.hub-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; border: 1px solid #A7F3D0; background: #fff; color: #047857; font: 600 12.5px/1 'Inter', system-ui, sans-serif; cursor: pointer; text-decoration: none; }
.hub-link:hover { background: #ECFDF5; }
.hub-link .ico { width: 14px; height: 14px; }
.hub-link.hub-link-sec { border-color: var(--border, #e4e4e7); color: var(--text-muted, #52525b); }
.hub-link.hub-link-sec:hover { background: var(--surface, #f4f4f5); }
.hub-nota { font-size: 12px; color: var(--text-muted, #71717a); padding: 6px 0; }

/* ── barra de dos pestañas, marca y avatar arriba, cabecera del chat, filtros de biblioteca (2.2.3) ── */
#bottom-nav.nav-2 { justify-content: center; gap: 14px; padding: 10px 16px calc(12px + env(safe-area-inset-bottom)); }
#bottom-nav.nav-2 .nav-item { flex: 0 0 auto; flex-direction: row; gap: 8px; height: 44px; padding: 0 22px; border-radius: 14px; font-size: 13px; font-weight: 700; color: var(--text-muted, #71717a); }
#bottom-nav.nav-2 .nav-item .ico { width: 20px; height: 20px; }
#bottom-nav.nav-2 .nav-item.active { background: #ECFDF5; color: #047857; }
#bottom-nav.nav-2 .nav-item.active .ico { animation: none; }
.topbar .brand { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.topbar .brand-logo { width: 32px; height: 32px; border-radius: 9px; background: #10B981; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
.topbar .brand-logo svg { width: 18px; height: 18px; fill: currentColor; }
.topbar .brand-name { font: 800 19px/1 'Inter', system-ui, sans-serif; letter-spacing: -0.4px; color: var(--text-main, #18181b); }
.topbar .avatar-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border, #e4e4e7); background: var(--surface, #f4f4f5); color: var(--text-main, #18181b); font: 700 12px/1 'Inter', system-ui, sans-serif; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; }
.topbar .avatar-btn:hover { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.chat-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px 4px; flex-shrink: 0; }
.chat-head h1 { margin: 0; font: 800 22px/1.2 'Inter', system-ui, sans-serif; letter-spacing: -0.3px; color: var(--text-main, #18181b); }
.chat-head-tools { display: flex; gap: 2px; }
.chat-head-tools button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted, #52525b); cursor: pointer; display: grid; place-items: center; }
.chat-head-tools button:hover { background: var(--surface, #f4f4f5); color: var(--text-main, #18181b); }
.chat-head-tools .ico { width: 20px; height: 20px; }
.bib-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.bib-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border, #e4e4e7); background: #fff; color: var(--text-main, #18181b); font: 600 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
.bib-chip:hover { border-color: #A7F3D0; background: #F0FDF4; }
.bib-chip.active { background: #ECFDF5; border-color: #A7F3D0; color: #047857; }
.bib-chip .ico { width: 15px; height: 15px; }
.bib-chip .n { color: var(--text-muted, #71717a); font-weight: 600; font-size: 11.5px; }

/* ── «¿cuál guía?» limpia (2.2.3): título, clave · año · institución, aviso de edición ── */
.tc-clarbox .clar-option.tc-clar { padding: 13px 14px; border-radius: 14px; border: 1px solid var(--border, #e4e4e7); background: #fff; gap: 12px; }
.tc-clarbox .clar-option.tc-clar:hover { border-color: #A7F3D0; background: #F8FFFB; }
.tc-clarbox .clar-option-title { font-size: 14.5px; font-weight: 700; line-height: 1.3; color: var(--text-main, #18181b); }
.tc-clar-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 7px; font-size: 12px; color: var(--text-muted, #71717a); }
.tc-clar-clave { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px; letter-spacing: .01em; background: var(--surface, #f4f4f5); border-radius: 6px; padding: 3px 7px; color: var(--text-main, #18181b); }
.tc-clar-aviso { color: #92400E; background: #FEF3C7; border-radius: 6px; padding: 3px 7px; font-weight: 600; }
.tc-clar-sub { font-size: 12px; color: #047857; margin-top: 4px; font-weight: 500; }
.tc-clarbox .clar-option.tc-clar-main { background: #ECFDF5; border-color: #A7F3D0; }
.tc-clarbox .clar-option.tc-clar-main .clar-option-title { color: #065F46; }
.tc-clarbox .clar-option-arrow { color: var(--text-muted, #a1a1aa); display: grid; place-items: center; }
.tc-clarbox .clar-option.tc-clar:hover .clar-option-arrow { color: #047857; transform: none; }
.tc-clar.rel .clar-option-title { font-weight: 600; color: var(--text-muted, #52525b); }

/* ── escritorio primero (2.2.4): sin barra de estado falsa, marco más ancho y columna de lectura ── */
@media (min-width: 481px) { #app::before { display: none !important; } }
@media (min-width: 760px) {
  body { padding: 20px 0; }
  #app { max-width: 920px; max-height: calc(100dvh - 40px); height: calc(100dvh - 40px); border-radius: 22px; }
  .topbar { padding: 0 28px; }
  .chat-head { padding: 18px 40px 6px; max-width: 860px; margin: 0 auto; width: 100%; box-sizing: border-box; }
  /* columna de lectura: se centra con el relleno del contenedor (las filas siguen estiradas; con márgenes auto
     en un flex-column se encogían a su contenido y desbordaban) */
  .chat-msgs { padding-left: max(20px, calc((100% - 780px) / 2)); padding-right: max(20px, calc((100% - 780px) / 2)); }
  .chat-suggestions, .chat-input-wrap { max-width: 820px; width: 100%; margin-left: auto !important; margin-right: auto !important; }
  .chat-suggestions { padding: 0 20px; box-sizing: border-box; justify-content: center; }
  .chat-input-wrap { box-sizing: border-box; }
  #s-gpcs .esp-hero, #esp-list-cont, #s-esp-gpcs > *, #concepto-cont, #s-guardadas > *, #s-institucional > *, #s-news > *, #s-yo > *, #s-settings > *, #s-edit-profile > *, #s-ai-history > * { max-width: 780px; margin-left: auto; margin-right: auto; }
  #bottom-nav.nav-2 .nav-item { padding: 0 30px; }
}
/* burbuja de la persona: se ajusta a su texto, alineada a la derecha (no ocupa todo el ancho) */
.msg-row.user .msg-body { flex: 0 1 auto; max-width: 82%; }
.msg-row.user .bubble-user { display: inline-block; max-width: 100%; }

/* ── hub de la guía (2.2.9): cabecera con pastillas, acción principal sólida, ediciones como filas ── */
.gh { display: flex; flex-direction: column; gap: 14px; }
.gh-hero { position: relative; overflow: hidden; border-radius: 18px; padding: 22px 22px 18px; background: linear-gradient(135deg, #F0FDF4 0%, #FFFFFF 58%); border: 1px solid #D1FAE5; box-shadow: 0 1px 3px rgba(9,9,11,.05); }
.gh-hero::after { content: ""; position: absolute; right: -70px; top: -70px; width: 240px; height: 240px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.16), transparent 70%); pointer-events: none; }
.gh-kicker { font: 800 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: #047857; }
.gh-title { margin: 10px 0 12px; font: 800 22px/1.25 'Inter', system-ui, sans-serif; letter-spacing: -.3px; color: var(--text-main, #09090B); text-wrap: pretty; position: relative; }
.gh-pills { display: flex; flex-wrap: wrap; gap: 8px; position: relative; }
.gh-pill { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px solid var(--border, #E4E4E7); font: 600 12.5px/1 'Inter', system-ui, sans-serif; color: var(--text-main, #09090B); }
.gh-pill b { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #71717A); }
.gh-pill.mono { font-family: ui-monospace, Menlo, monospace; color: #047857; }
.gh-pill.ok { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; } .gh-pill.ok b { color: #047857; }
.gh-desc { margin: 12px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-muted, #52525B); position: relative; }
.gh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; position: relative; }
.gh-cta { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px; border-radius: 13px; border: 0; background: #10B981; color: #fff; font: 700 14px/1 'Inter', system-ui, sans-serif; cursor: pointer; box-shadow: 0 6px 16px rgba(16,185,129,.28); transition: transform .15s, box-shadow .15s, background .15s; }
.gh-cta:hover { background: #059669; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(16,185,129,.32); }
.gh-cta .ico { width: 18px; height: 18px; fill: currentColor; }
.gh-sec { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 13px; border: 1px solid var(--border, #E4E4E7); background: #fff; color: var(--text-main, #09090B); font: 600 13.5px/1 'Inter', system-ui, sans-serif; cursor: pointer; transition: border-color .15s, background .15s; }
.gh-sec:hover { border-color: #A7F3D0; background: #F0FDF4; }
.gh-hint { margin-top: 10px; font-size: 12px; color: var(--text-muted, #71717A); position: relative; }
.gh-sec-title { font: 800 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted, #71717A); margin: 6px 0 -4px 4px; }
/* Ediciones como filas (2026-09-17, decisión del usuario): sin marco por tarjeta, una línea fina entre ellas, botones en una sola fila */
.gh-eds { display: flex; flex-direction: column; gap: 0; }
.gh-ed { border: 0; border-top: 1px solid var(--border, #E4E4E7); border-radius: 0; padding: 12px 2px; background: transparent; box-shadow: none; }
.gh-ed:first-child { border-top: 0; padding-top: 2px; }
/* 2026-09-16: la edición vigente ya no lleva barra ni contorno verde; la distingue solo el chip «Vigente» */
.gh-ed.vig { border-color: var(--border, #E4E4E7); box-shadow: none; }
.gh-ed { display: flex; gap: 12px; align-items: flex-start; }
.gh-ed-cuerpo { flex: 1 1 auto; min-width: 0; }
/* portada de la edición (miniatura del GER; si no existe, el <img> se quita solo) */
.gh-ed-portada { display: block; width: 56px; height: 79px; object-fit: cover; object-position: top; border-radius: 6px; border: 1px solid var(--border, #E4E4E7); background: #F4F4F5; box-shadow: 0 1px 2px rgba(9,9,11,.06); }
.gh-ed-portada-btn, .gh-ed-portada-link { flex: 0 0 auto; display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; border-radius: 6px; transition: transform .15s, box-shadow .15s; }
.gh-ed-portada-btn:hover, .gh-ed-portada-link:hover { transform: translateY(-1px); }
.gh-ed-portada-btn:hover .gh-ed-portada, .gh-ed-portada-link:hover .gh-ed-portada { box-shadow: 0 4px 10px rgba(9,9,11,.14); border-color: #A7F3D0; }
.gh-ed-portada-btn:focus-visible, .gh-ed-portada-link:focus-visible { outline: 2px solid #10B981; outline-offset: 2px; }
@media (max-width: 520px) { .gh-ed-portada { width: 48px; height: 68px; } }
.gh-ed-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.gh-ed-id { font: 700 13px/1 ui-monospace, Menlo, monospace; color: var(--text-main, #09090B); }
.gh-ed-meta { font-size: 12.5px; color: var(--text-muted, #71717A); }
.gh-ed-title { margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--text-muted, #52525B); }
.gh-ed .hub-links { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.gh-ed .hub-link { width: auto; flex: 0 0 auto; height: 30px; padding: 0 10px; font-size: 12px; border-radius: 8px; }
.gh-ed .hub-link .ico { width: 13px; height: 13px; }
.gh-ed:not(.vig) .hub-link { border-color: var(--border, #E4E4E7); color: var(--text-main, #09090B); }
.gh-ed:not(.vig) .hub-link:hover { background: var(--surface, #F8FAFC); }
@media (max-width: 640px) { .gh-hero { padding: 18px 16px 16px; border-radius: 16px; } .gh-title { font-size: 19px; } .gh-cta, .gh-sec { height: 44px; width: 100%; justify-content: center; } }

/* ── chat con movimiento (2.2.9): entradas suaves, pulso en la marca, ejemplos en rejilla ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes tc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,.30); } 60% { box-shadow: 0 0 0 16px rgba(16,185,129,0); } }
  .screen.active > * { animation: tc-rise .32s ease-out both; }
  .chat-welcome .logo-circle { animation: tc-pulse 2.6s ease-out infinite; }
  .chat-msgs .msg-row { animation: tc-rise .32s cubic-bezier(.2,.7,.2,1) both; }
  #chat-suggestions .chat-suggestion { animation: tc-rise .4s ease-out both; }
  #chat-suggestions .chat-suggestion:nth-child(2) { animation-delay: .07s; } #chat-suggestions .chat-suggestion:nth-child(3) { animation-delay: .14s; } #chat-suggestions .chat-suggestion:nth-child(4) { animation-delay: .21s; }
  .chat-send { transition: transform .15s, background .15s; } .chat-send:hover { transform: scale(1.06); }
  .chat-suggestion, .bib-chip, .gpc-card, .esp-list-row, .tc-card, .gh-ed { transition: transform .15s, border-color .15s, background .15s, box-shadow .15s; }
  .chat-suggestion:hover, .gpc-card:hover { transform: translateY(-1px); }
  .tc-card:hover { box-shadow: 0 4px 14px rgba(9,9,11,.08); }
}
.chat-welcome .logo-circle { background: linear-gradient(135deg, #D1FAE5, #ECFDF5); }
.chat-welcome h2 { font-size: 24px; letter-spacing: -.4px; }
#chat-suggestions { gap: 8px; }
#chat-suggestions .chat-suggestion { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; font-weight: 600; }
#chat-suggestions .chat-suggestion::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34D399; flex-shrink: 0; }
@media (min-width: 760px) {
  #chat-suggestions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
  #chat-suggestions .chat-suggestion { justify-content: flex-start; min-height: 52px; font-size: 13.5px; }
}

/* ── ajustes 2.3.0: bienvenida centrada con ejemplos dentro; estado de edición como pastilla en el hub ── */
.chat-msgs .chat-welcome { margin: auto 0; padding: 24px 10px 18px; }
.chat-welcome-sug { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 560px; margin: 18px auto 0; text-align: left; }
.chat-welcome-sug .chat-suggestion { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border, #E4E4E7); background: #fff; font-weight: 500; font-size: 13.5px; line-height: 1.35; text-align: left; color: var(--text-main, #09090B); cursor: pointer; min-height: 48px; }
/* Sin punto verde (2026-09-16): texto alineado a la izquierda y una flecha discreta al final */
.chat-welcome-sug .chat-suggestion::after { content: "›"; flex-shrink: 0; color: var(--text-muted, #71717A); font-size: 18px; line-height: 1; margin-left: 6px; }
.chat-welcome-sug .chat-suggestion:hover { border-color: #A7F3D0; background: #F8FFFB; }
@media (min-width: 640px) { .chat-welcome-sug { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: no-preference) {
  .chat-welcome-sug .chat-suggestion { animation: tc-rise .4s ease-out both; }
  .chat-welcome-sug .chat-suggestion:nth-child(2) { animation-delay: .07s; } .chat-welcome-sug .chat-suggestion:nth-child(3) { animation-delay: .14s; } .chat-welcome-sug .chat-suggestion:nth-child(4) { animation-delay: .21s; }
}
.gh-ed .ed-status-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; color: #047857; background: #ECFDF5; border: 1px solid #A7F3D0; padding: 3px 9px; border-radius: 999px; }
.gh-ed .ed-status-inline.derogada { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; }

/* ── pie de la tarjeta (2.3.1): una sola línea de texto «clave · año · GRR · p. N · título», sin chip ── */
.tc-ed { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; font-size: 12px; color: var(--text-muted, #71717A); }
.tc-ed b { font-family: ui-monospace, Menlo, monospace; font-size: 12px; font-weight: 600; color: var(--text-main, #09090B); }
.tc-ed .tc-pag, .tc-ed .tc-pag.legacy, .tc-ed .tc-pag.html, .tc-ed .tc-pag.none { display: inline; border: 0; padding: 0; background: transparent; border-radius: 0; font-family: inherit; font-size: 12px; font-weight: 500; color: var(--text-muted, #71717A); }
.tc-ed .tc-pag .dot { display: none; }
.tc-ed .tc-pag::before, .tc-ed .tc-tit::before { content: "·"; margin-right: 6px; color: #A1A1AA; }
.tc-ed .tc-tit { max-width: 100%; white-space: normal; }

.tc-sint-h { padding-bottom: 6px; }

/* ── escritorio de verdad (2.3.4): barra lateral con consultas recientes, navegación y perfil; la app ocupa
   toda la ventana. Por debajo de 1024 px nada cambia (marco móvil, barra inferior). ── */
.sidebar { display: none; }
@media (min-width: 1024px) {
  body { padding: 0; background: var(--bg-app, #fff); }
  #app, body[data-route="ai"] #app { display: grid; grid-template-columns: 280px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); max-width: none; width: 100%; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; border: 0; padding-top: 0; }
  .sidebar { display: flex; flex-direction: column; grid-row: 1 / span 2; grid-column: 1; min-height: 0; background: #FAFAFA; border-right: 1px solid var(--border, #e4e4e7); padding: 18px 14px 14px; gap: 10px; box-sizing: border-box; }
  .topbar { grid-row: 1; grid-column: 2; height: 52px; padding: 0 24px; }
  .topbar:has(.brand) { display: none !important; }        /* la marca y el perfil viven en la barra lateral */
  #bottom-nav { display: none !important; }
  .screens-wrap { grid-row: 2; grid-column: 2; min-height: 0; }
  .screen { padding-top: 22px; padding-bottom: 28px; }
  .chat-head { padding-top: 8px; max-width: 900px; }
  .chat-head-tools { display: none; }   /* «Recientes» y «Nueva consulta» ya viven en la barra lateral */
  #app.sb-colapsada .chat-head-tools { display: flex; }   /* con el carril de iconos, las recientes vuelven al encabezado */
  #app.sb-colapsada .chat-head-tools button[title="Nueva consulta"] { display: none; }
  .chat-msgs { padding-left: max(24px, calc((100% - 820px) / 2)); padding-right: max(24px, calc((100% - 820px) / 2)); }
  .chat-suggestions, .chat-input-wrap { max-width: 860px; }
  #s-gpcs .esp-hero, #esp-list-cont, #s-esp-gpcs > *, #concepto-cont, #s-guardadas > *, #s-institucional > *, #s-news > *, #s-yo > *, #s-settings > *, #s-edit-profile > *, #s-ai-history > * { max-width: 860px; }

  .sb-brand { display: flex; align-items: center; gap: 10px; padding: 2px 4px 8px 8px; }
  .sb-brand .brand-name { flex: 1; }
  .sb-toggle { width: 32px; height: 32px; border-radius: 9px; border: 0; background: transparent; color: var(--text-muted, #71717a); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; }
  .sb-toggle:hover { background: #F4F4F5; color: var(--text-main, #18181b); }
  .sb-toggle .ico { width: 18px; height: 18px; transition: transform .2s; }
  .sb-nueva .sb-txt, .sb-link .sb-txt { white-space: nowrap; }
  .sb-brand .brand-logo { width: 32px; height: 32px; border-radius: 9px; background: #10B981; color: #fff; display: grid; place-items: center; flex-shrink: 0; }
  .sb-brand .brand-logo svg { width: 18px; height: 18px; fill: currentColor; }
  .sb-brand .brand-name { font: 800 19px/1 'Inter', system-ui, sans-serif; letter-spacing: -.4px; color: var(--text-main, #18181b); }
  .sb-nueva { display: flex; align-items: center; justify-content: center; gap: 8px; height: 42px; border-radius: 12px; border: 1px solid #A7F3D0; background: #ECFDF5; color: #047857; font: 700 13.5px 'Inter', system-ui, sans-serif; cursor: pointer; }
  .sb-nueva:hover { background: #D1FAE5; }
  .sb-nueva .ico { width: 18px; height: 18px; }
  .sb-nav { display: flex; flex-direction: column; gap: 2px; }
  .sb-link { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: var(--text-muted, #52525b); font: 600 13.5px 'Inter', system-ui, sans-serif; cursor: pointer; text-align: left; width: 100%; }
  .sb-link .ico { width: 18px; height: 18px; flex-shrink: 0; }
  .sb-link:hover { background: #F4F4F5; color: var(--text-main, #18181b); }
  .sb-link.active { background: #fff; color: #047857; box-shadow: 0 1px 2px rgba(9,9,11,.06); }
  .sb-sec { margin: 8px 8px 0; font: 800 10.5px/1 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, #a1a1aa); }
  .sb-recientes { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding-right: 2px; }
  .sb-recientes .tc-reciente { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; cursor: pointer; background: transparent; border: 0; box-shadow: none; margin: 0; }
  .sb-recientes .tc-reciente:hover, .sb-recientes .tc-reciente:focus-visible { background: #F4F4F5; outline: none; }
  .sb-recientes .tc-reciente.activa { background: #fff; box-shadow: 0 1px 2px rgba(9,9,11,.06); }
  .sb-recientes .tc-reciente.activa .info .t { color: #047857; }
  .sb-recientes .tc-reciente .ico-box, .sb-recientes .tc-reciente .arrow { display: none; }
  .sb-recientes .tc-reciente .info .t { font-size: 13px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-recientes .tc-reciente .info .s { font-size: 11.5px; margin-top: 1px; }
  .sb-recientes .tc-recientes-vacio { font-size: 12.5px; color: var(--text-muted, #71717a); padding: 6px 10px; line-height: 1.45; margin: 0; }
  .sb-recientes .tc-recientes-borrar { margin: 6px 10px 0; align-self: flex-start; border: 0; background: none; color: var(--text-muted, #71717a); font: 600 12px 'Inter', system-ui, sans-serif; cursor: pointer; padding: 4px 0; }
  .sb-recientes .tc-recientes-borrar:hover { color: #b91c1c; }
  .sb-foot { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border, #e4e4e7); }
  .sb-user { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; border: 0; background: transparent; padding: 6px 8px; border-radius: 10px; cursor: pointer; text-align: left; }
  .sb-user:hover { background: #F4F4F5; }
  .sb-user .avatar-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border, #e4e4e7); background: #fff; display: grid; place-items: center; font: 700 12px/1 'Inter', system-ui, sans-serif; color: var(--text-main, #18181b); flex-shrink: 0; }
  .sb-user-name { font: 600 13px 'Inter', system-ui, sans-serif; color: var(--text-main, #18181b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sb-bell { position: relative; width: 36px; height: 36px; border-radius: 10px; border: 0; background: transparent; display: grid; place-items: center; cursor: pointer; color: var(--text-main, #18181b); flex-shrink: 0; }
  .sb-bell:hover { background: #F4F4F5; }
  .sb-bell .ico { width: 20px; height: 20px; }
  .sb-bell .notif-dot { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: #10B981; border: 2px solid #FAFAFA; }
}

/* carril de iconos (barra lateral contraída) */
@media (min-width: 1024px) {
  #app.sb-colapsada, body[data-route] #app.sb-colapsada { grid-template-columns: 72px minmax(0, 1fr); }   /* gana a body[data-route="ai"] #app */
  #app.sb-colapsada .sidebar { padding: 14px 12px 12px; align-items: center; }
  #app.sb-colapsada .sb-txt, #app.sb-colapsada .sb-sec, #app.sb-colapsada .sb-recientes { display: none; }
  #app.sb-colapsada .sb-brand { flex-direction: column; gap: 8px; padding: 0 0 6px; }
  #app.sb-colapsada .sb-toggle .ico { transform: rotate(180deg); }
  #app.sb-colapsada .sb-nueva, #app.sb-colapsada .sb-link { width: 44px; height: 44px; padding: 0; justify-content: center; gap: 0; }
  #app.sb-colapsada .sb-nav { flex: 1; }
  #app.sb-colapsada .sb-foot { flex-direction: column; gap: 6px; width: 100%; align-items: center; }
  #app.sb-colapsada .sb-user { flex: 0 0 auto; padding: 4px; }
}

/* ── Movimiento (2026-09-16): entradas suaves, respuesta al pasar y al pulsar. Todo desactivado si el sistema pide menos movimiento. ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tc-show { to { opacity: 1; } }
  /* Entrada de cada pantalla: sus bloques suben 6 px con fundido */
  .screen.active > * { animation: tc-in .28s ease-out both; }
  .screen.active > *:nth-child(2) { animation-delay: .05s; }
  .screen.active > *:nth-child(3) { animation-delay: .10s; }
  /* Listas y tarjetas: aparición escalonada (las primeras ocho) */
  .esp-list-row, .gpc-card, .gh-ed, .relacionada-card, .gh-hero { animation: tc-in .32s ease-out both; }
  .esp-list-row:nth-child(2), .gpc-card:nth-child(2), .gh-ed:nth-child(2), .relacionada-card:nth-child(2) { animation-delay: .04s; }
  .esp-list-row:nth-child(3), .gpc-card:nth-child(3), .gh-ed:nth-child(3), .relacionada-card:nth-child(3) { animation-delay: .08s; }
  .esp-list-row:nth-child(4), .gpc-card:nth-child(4), .gh-ed:nth-child(4), .relacionada-card:nth-child(4) { animation-delay: .12s; }
  .esp-list-row:nth-child(5), .gpc-card:nth-child(5), .gh-ed:nth-child(5), .relacionada-card:nth-child(5) { animation-delay: .16s; }
  .esp-list-row:nth-child(6), .gpc-card:nth-child(6) { animation-delay: .20s; }
  .esp-list-row:nth-child(7), .gpc-card:nth-child(7) { animation-delay: .24s; }
  .esp-list-row:nth-child(8), .gpc-card:nth-child(8) { animation-delay: .28s; }
  /* Respuesta al pasar y al pulsar */
  .gh-ed, .gpc-card, .hub-link, .bib-chip, .gh-pill, .chat-welcome-sug .chat-suggestion, .gh-cta, .chat-send, .nav-item, .search-bar, .relacionadas-more-btn { transition: background .18s ease, border-color .18s ease, box-shadow .22s ease, transform .16s ease, color .15s ease; }
  .gpc-card:hover { border-color: #A7F3D0; box-shadow: 0 8px 20px rgba(9,9,11,.08); transform: translateY(-1px); }
  .gh-ed:hover { background: var(--surface, #F8FAFC); }
  .hub-link:hover, .bib-chip:hover, .chat-welcome-sug .chat-suggestion:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(9,9,11,.06); }
  .hub-link:active, .bib-chip:active, .chat-welcome-sug .chat-suggestion:active, .gh-cta:active, .chat-send:active, .nav-item:active, .relacionadas-more-btn:active { transform: scale(.97); }
  .gh-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(16,185,129,.34); }
  .esp-list-row .arrow, .relacionada-card .arrow { transition: transform .18s ease, color .18s ease; }
  .esp-list-row:hover .arrow, .relacionada-card:hover .arrow { transform: translateX(3px); color: var(--emerald-dark, #047857); }
  .esp-list-row .icon-sm { transition: transform .2s ease; }
  .esp-list-row:hover .icon-sm { transform: scale(1.06); }
  .search-bar:focus { border-color: #A7F3D0; box-shadow: 0 0 0 4px rgba(16,185,129,.12); outline: none; }
  /* Portadas: aparecen con fundido al cargar (y se muestran de todos modos a los 1.6 s por si la carga no avisa) */
  .gh-ed-portada { transition: opacity .45s ease, transform .45s ease, box-shadow .2s ease; }
  .gh-ed-portada:not(.lista) { opacity: 0; transform: translateY(4px); animation: tc-show 0s linear 1.6s forwards; }
  .gh-ed-portada.lista { opacity: 1; transform: none; }
  .gh-ed-portada-btn:hover .gh-ed-portada, .gh-ed-portada-link:hover .gh-ed-portada { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 18px rgba(9,9,11,.16); }
}

/* ── Auditoría 2026-09-16: estado vacío con acción y separación del encabezado del chat en escritorio ── */
.lc-vacio { text-align: center; padding: 44px 20px 30px; color: var(--text-muted, #71717A); font-size: 13.5px; line-height: 1.5; }
.lc-vacio .ico { display: block; width: 34px; height: 34px; margin: 0 auto 12px; color: #A1A1AA; fill: none; stroke: currentColor; stroke-width: 1.8; }
.lc-vacio p { margin: 0; }
.lc-vacio button { margin-top: 18px; height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--border, #E4E4E7); background: #fff; font: 600 13.5px/1 'Inter', system-ui, sans-serif; color: var(--text-main, #09090B); cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.lc-vacio button:hover { border-color: #A7F3D0; background: #F0FDF4; color: #047857; }
.lc-vacio button:active { transform: scale(.97); }
@media (min-width: 1024px) {
  .chat-head { border-bottom: 1px solid var(--border, #E4E4E7); padding-bottom: 10px; background: var(--bg-app, #fff); position: relative; z-index: 2; }
}

/* ── Pestañas de la Biblioteca (2026-09-16): sustituyen a los chips que parecían filtros y cambiaban de pantalla ── */
.bib-seg { display: flex; gap: 3px; padding: 3px; margin-top: 14px; border-radius: 12px; background: #F4F4F5; }
.bib-seg-btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: var(--text-muted, #71717A); font: 700 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.bib-seg-btn .ico { width: 15px; height: 15px; flex: none; }
.bib-seg-btn .n { font-weight: 600; font-size: 11.5px; color: #A1A1AA; }
.bib-seg-btn .n:empty { display: none; }
.bib-seg-btn.active { background: #fff; color: var(--text-main, #09090B); box-shadow: 0 1px 2px rgba(9,9,11,.08); }
.bib-seg-btn.active .n { color: var(--emerald-dark, #047857); }
.bib-seg-btn[hidden] { display: none; }
.notifs-news { display: block; width: 100%; margin-top: 8px; padding: 12px; border: 0; border-top: 1px solid var(--border, #E4E4E7); background: transparent; color: var(--emerald-dark, #047857); font: 600 13.5px/1 'Inter', system-ui, sans-serif; cursor: pointer; text-align: center; }
.notifs-news:hover { background: #F0FDF4; }

/* Tres pestañas abajo (2026-09-16): Consulta IA · Biblioteca · Guardadas */
#bottom-nav.nav-3 .nav-item { padding: 0 14px; gap: 6px; font-size: 12.5px; }
@media (min-width: 420px) { #bottom-nav.nav-3 .nav-item { padding: 0 18px; } }
.bib-seg[hidden] { display: none; }

/* Institucional (2026-09-17): misma lista que Guías; las filas sin enlace no invitan a tocar */
.esp-list-row.sin-enlace { cursor: default; }
.esp-list-row.sin-enlace:hover, .esp-list-row.sin-enlace:active { background: transparent; }

/* Documentos institucionales sin enlace todavía (2026-09-17): misma tarjeta que una GPC, sin marcador ni clic; pills en gris */
.gpc-card.sin-enlace { cursor: default; }
.gpc-card.sin-enlace:hover, .gpc-card.sin-enlace:active { border-color: var(--border, #E4E4E7); box-shadow: none; transform: none; }
#s-inst-lista .gpc-card .num-pill, #s-inst-lista .gpc-card .cie-pill { background: var(--surface-2, #F1F5F9) !important; color: var(--text-muted, #52525B) !important; }
#s-inst-lista .esp-detail-header .esp-icon-lg { background: var(--surface-2, #F1F5F9) !important; color: var(--text-muted, #52525B) !important; }

/* Portada del documento institucional en su tarjeta (2026-09-17): aparece sola cuando exista gpc-covers/INST-NNN.webp; si no, la tarjeta queda como hoy */
#s-inst-lista .gpc-card { display: flex; align-items: flex-start; gap: 12px; }
#s-inst-lista .gpc-card .gpc-row1 { flex: 1 1 auto; min-width: 0; }
#s-inst-lista .gpc-card .inst-portada { width: 48px; height: 68px; flex: none; }
#s-inst-lista .gpc-card .inst-portada:not(.lista) { display: none; animation: none; }   /* nada de cuadros grises mientras no exista la portada */

/* ── Institucional (2026-09-17): hub del documento igual al de una guía, en gris; «Vigente» conserva el verde porque es estatus ── */
#s-inst-doc .gh-hero { background: linear-gradient(135deg, #F8FAFC 0%, #FFFFFF 58%); border-color: var(--border, #E4E4E7); }
#s-inst-doc .gh-hero::after { background: radial-gradient(circle, rgba(113,113,122,.12), transparent 70%); }
#s-inst-doc .gh-pill.mono { color: var(--text-main, #09090B); }
.gh-pill.bad { background: #FEF2F2; border-color: #FECACA; color: #991B1B; } .gh-pill.bad b { color: #B91C1C; }
#s-inst-doc .hub-link, #s-inst-doc .gh-ed.vig .hub-link { border-color: var(--border, #E4E4E7); color: var(--text-main, #09090B); background: #fff; }
#s-inst-doc .hub-link:hover { background: var(--surface, #F8FAFC); border-color: #A1A1AA; }
#s-inst-doc .gh-ed-portada-btn:hover .gh-ed-portada, #s-inst-doc .gh-ed-portada-link:hover .gh-ed-portada { border-color: #A1A1AA; }
#s-inst-doc .gh-ed-portada-btn:focus-visible, #s-inst-doc .gh-ed-portada-link:focus-visible { outline-color: #52525B; }
#s-inst-doc .ed-status-inline.proyecto { color: #92400E; background: #FFFBEB; border-color: #FDE68A; }
#s-inst-doc .relacionada-card:hover, #s-inst-doc .relacionada-card:hover .rel-titulo { color: var(--text-main, #09090B); }
#s-inst-doc .relacionada-card .rel-clave { font: 500 11.5px/1 ui-monospace, Menlo, monospace; color: var(--text-muted, #71717A); margin-left: 6px; white-space: nowrap; }
#s-inst-doc .relacionadas-more-btn { color: var(--text-main, #09090B); } #s-inst-doc .relacionadas-more-btn:hover { background: var(--surface, #F8FAFC); border-color: #A1A1AA; }
#s-inst-doc .hub-nota { font-size: 12px; color: var(--text-muted, #71717A); }
.gpc-card.inst .num-pill { background: var(--surface-2, #F1F5F9) !important; color: var(--text-muted, #52525B) !important; }

/* ── Carril institucional (2026-09-17): bloque aparte tras las guías, acento gris ── */
.tc-inst-h { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 2px; padding-top: 12px; border-top: 1px solid var(--border); }
.tc-inst-h span { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); }
.tc-inst-h small { font-size: 11.5px; color: var(--text-muted); }
.tc-card.tc-inst .tc-tipo { background: #52525B; }
.tc-card.tc-inst.tc-contexto .tc-tipo { background: #A1A1AA; }
.tc-card.tc-inst .tc-pag .dot { background: #52525B; }
#s-inst-doc .gh-cta { background: #52525B; box-shadow: 0 6px 16px rgba(82,82,91,.26); } #s-inst-doc .gh-cta:hover { background: #3F3F46; box-shadow: 0 8px 20px rgba(82,82,91,.30); }
/* móvil: la etiqueta «Citado en la respuesta» en una línea y el desglose debajo cuando no cabe */
.tc-fuentes-h, .tc-inst-h { flex-wrap: wrap; row-gap: 2px; } .tc-fuentes-h span, .tc-inst-h span { white-space: nowrap; }
/* fuente institucional en el carrusel «Fuentes consultadas»: acento gris, abre el hub del documento */
.sources-list .source-card.inst .source-code { color: #52525B; }
/* citas institucionales en la síntesis (gris) y enlaces citados dentro del texto de una norma */
/* Citas más sutiles (2026-09-17, pedido de Edwin): relleno claro con borde fino; verde para guías, gris para normas y documentos */
.tc-cite { background: #ECFDF5; color: #047857; border: 1px solid #A7F3D0; box-sizing: border-box; }
.tc-cite:hover { background: #D1FAE5; color: #065F46; transform: translateY(-1px); box-shadow: none; }
html[data-theme="dark"] .tc-cite { background: rgba(52,211,153,.16); color: #6EE7B7; border-color: rgba(52,211,153,.35); }
.tc-cites .tc-cite.inst, .tc-cite.inst { background: #F4F4F5; color: #52525B; border-color: #D4D4D8; }
.tc-cite.inst:hover { background: #E4E4E7; color: #3F3F46; }
html[data-theme="dark"] .tc-cite.inst { background: rgba(161,161,170,.16); color: #D4D4D8; border-color: rgba(161,161,170,.35); }
/* etiqueta de tipo de las tarjetas institucionales: gris claro con texto oscuro, no bloque sólido */
.tc-card.tc-inst .tc-tipo { background: #E4E4E7; color: #3F3F46; }
.tc-card.tc-inst.tc-contexto .tc-tipo { background: #F4F4F5; color: #52525B; }
.tc-card.tc-inst.tc-tabla .tc-tipo { background: #E4E4E7; color: #3F3F46; }
.tc-url { color: var(--text-muted, #52525B); text-decoration: underline dotted; text-underline-offset: 2px; word-break: break-all; }
.tc-url::after { content: " ↗"; font-size: .85em; }

/* ── «Respondo con <guía>» + chips «¿Otra guía?» (2026-09-17): sustituye a la pregunta «¿cuál guía?» cuando una guía domina ── */
.clarification-box.tc-guia { background: var(--surface, #F8FAFC); border: 1px solid var(--border, #E4E4E7); border-radius: 12px; padding: 10px 12px; margin: 8px 0; box-shadow: none; }
.tc-guia .tc-ask-t { margin: 0; font-size: 13px; line-height: 1.5; color: var(--text-muted, #52525B); }
.tc-guia .tc-ask-t b { color: var(--text-main, #09090B); font-weight: 600; }
.tc-guia .tc-ask-t .tc-clar-clave { margin-left: 2px; }
.tc-guia .tc-otras { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.tc-guia .tc-otras > span { font-size: 12px; color: var(--text-muted, #71717A); margin-right: 2px; }
.tc-guia .tc-chip { height: 28px; max-width: 100%; padding: 0 10px; border-radius: 100px; border: 1px solid var(--border, #E4E4E7); background: #fff; color: var(--text-main, #09090B); font: 500 12px/1 'Inter', system-ui, sans-serif; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: border-color .15s, color .15s, background .15s; }
.tc-guia .tc-chip:hover { border-color: #A7F3D0; color: #047857; background: #F8FFFB; }

/* ── Algoritmo: título + pasos numerados (2026-09-17) ── */
.tc-card .tc-alg-t { font-weight: 600; margin-bottom: 4px; }
.tc-card .tc-pasos { margin: 0 0 6px 0; padding-left: 22px; font-size: 13.5px; line-height: 1.5; color: #18181B; }
.tc-card .tc-pasos li { margin: 2px 0; }
.tc-card .tc-pasos li::marker { color: #71717A; font-variant-numeric: tabular-nums; }
/* pregunta sin guía dedicada que sí aparece dentro de otras guías (feocromocitoma → Crisis hipertensivas) */
.tc-sint .tc-sint-aviso { margin: 4px 0 10px; padding: 8px 11px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); color: var(--text-main); font-size: 13px; line-height: 1.45; }
/* botones de los avisos con títulos largos: en teléfono ocupan dos renglones sin salirse de la píldora */
.tc-ask .tc-chip { height: auto; min-height: 30px; padding: 5px 11px; line-height: 1.3; text-align: left; border-radius: 16px; }

/* ── chat limpio (2026-09-22, igual que la app; aprobado por Edwin: «Si buen ajuste») ──────────────────────────────
   1 · una sola barra arriba en teléfono · 2 · respuesta sin avatar ni fila «GPC.AI» · 5 · tarjeta compacta · 6 · bienvenida mínima */
.topbar .tb-tool { width: 38px; height: 38px; border-radius: 50%; border: 0; background: transparent; color: var(--text-muted, #71717a); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; padding: 0; }
.topbar .tb-tool:hover { background: var(--surface, #f4f4f5); color: var(--text-main, #18181b); }
.topbar .tb-tool .ico { width: 21px; height: 21px; }
.topbar .brand + .tb-tool { margin-left: auto; }
.topbar .tb-tool + .tb-tool { margin-left: -8px; }
@media (max-width: 1023.98px) { #s-ai .chat-head { display: none; } }

.chat-msgs .msg-row.ai > .msg-avatar { display: none; }
.chat-msgs .msg-row.ai .msg-body, body[data-route="ai"] .chat-msgs .msg-row.ai .msg-body { max-width: 100%; }
.tc-sint-h { align-items: center; }
.tc-sint-rep { margin-left: auto; width: 26px; height: 26px; border: 0; border-radius: 50%; background: transparent; color: var(--text-muted, #71717a); display: grid; place-items: center; cursor: pointer; padding: 0; flex-shrink: 0; }
.tc-sint-rep:hover { color: var(--error, #dc2626); background: var(--error-bg, #fee2e2); }
.tc-sint-rep svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-typing-note { display: flex; align-items: center; gap: 7px; }
.tc-wait-star { width: 14px; height: 14px; flex-shrink: 0; color: var(--emerald, #10b981); fill: currentColor; transform-origin: 50% 50%; animation: gm-pensar 2.6s cubic-bezier(.45,0,.55,1) infinite; }
@media (prefers-reduced-motion: reduce) { .tc-wait-star { animation: none; } }
#typing-row:has(.tc-typing-note) .typing-dots { display: none; }

.tc-card .tc-texto.tc-clamp { display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; }
.tc-card .tc-texto.tc-clamp.abierto { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
/* Tablas literales (2.7.1, 2026-09-23): el texto es un renglón impreso por línea, con las columnas unidas por «  |  ». */
.tc-card.tc-tabla_clinica .tc-texto { white-space: pre-line; }
.tc-card .tc-pasos:not(.abierto) li:nth-child(n+4) { display: none; }
.tc-mas { display: block; border: 0; background: none; padding: 0; margin: 0 0 8px; font: 700 12.5px/1.3 'Inter', system-ui, sans-serif; color: var(--emerald-dark, #047857); cursor: pointer; }
.tc-mas[hidden] { display: none; }
.tc-card.tc-inst .tc-mas { color: #52525B; }
.tc-card .tc-foot.tc-foot-c { display: flex; flex-wrap: nowrap; align-items: center; gap: 12px; min-width: 0; }
.tc-pie { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; white-space: nowrap; font: 500 12px/1.4 'Inter', system-ui, sans-serif; color: var(--text-muted, #71717a); }
.tc-pie b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; font-weight: 600; color: var(--text-main, #18181b); }
.tc-pie-resto { flex-shrink: 0; white-space: pre; }
.tc-aviso { color: var(--warning, #d97706); font-weight: 600; }
.tc-ver { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 4px 0; font: 700 12.5px/1 'Inter', system-ui, sans-serif; color: var(--emerald-dark, #047857); cursor: pointer; text-decoration: none; }
.tc-ver:hover { text-decoration: underline; }
.tc-ver svg, .tc-rep svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-card.tc-inst .tc-ver { color: #52525B; }
.tc-rep { flex-shrink: 0; width: 26px; height: 26px; border: 0; border-radius: 50%; background: none; color: var(--text-muted, #71717a); display: grid; place-items: center; cursor: pointer; padding: 0; margin-left: -6px; }
.tc-rep:hover { color: var(--error, #dc2626); background: var(--error-bg, #fee2e2); }

.chat-welcome-temas { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 420px; margin: 18px auto 0; }
.chat-tema { height: 36px; border-radius: 18px; border: 1px solid var(--border, #e4e4e7); background: var(--bg-card, #fff); color: var(--text-main, #18181b); padding: 0 16px; font: 600 13.5px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
.chat-tema:hover { border-color: #A7F3D0; background: #F0FDF4; color: #047857; }

/* ── Pantalla por consulta (2.4.0, 2026-09-22, como la app y MediSearch; aprobado por Edwin) ───────────────────────
   Cada pregunta abre su pantalla: barra «←» / compartir, la pregunta de título, la respuesta, fuentes abajo con la
   portada en pequeño, 👍/👎, «Elegir guías», preguntas sugeridas y la hoja de la cita. #s-ai[data-vista] dice qué se ve:
   el inicio (#chat-inicio), la consulta viva (#chat-msgs) o una anterior congelada mientras otra responde (#chat-previa). */
#s-ai[data-vista="inicio"] #chat-msgs, #s-ai[data-vista="inicio"] #chat-previa,
#s-ai[data-vista="viva"] #chat-inicio, #s-ai[data-vista="viva"] #chat-previa,
#s-ai[data-vista="previa"] #chat-inicio, #s-ai[data-vista="previa"] #chat-msgs { display: none; }
#s-ai .cq-barra { display: none; }
#s-ai[data-vista="viva"] .cq-barra, #s-ai[data-vista="previa"] .cq-barra { display: flex; }
#s-ai[data-vista="viva"] .chat-head, #s-ai[data-vista="previa"] .chat-head { display: none; }
/* en la consulta la barra de la marca y la inferior se van: la única barra es «←» / compartir (como la app) */
@media (max-width: 1023.98px) {
  body[data-route="ai"][data-consulta="1"] #topbar, body[data-route="ai"][data-consulta="1"] #bottom-nav { display: none !important; }
}
.cq-barra { flex-shrink: 0; align-items: center; gap: 4px; height: 52px; padding: 0 10px; background: var(--bg-app); }
.cq-barra-sp { flex: 1; }
.cq-ico { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--text-main); display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s; }
.cq-ico[hidden] { display: none; }
.cq-ico:hover { background: var(--surface-2); }
.cq-ico:active { background: #E4E4E7; }
.cq-ico .ico { width: 22px; height: 22px; }
.cq-ico svg:not(.ico) { width: 20px; height: 20px; fill: none; stroke: #52525B; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#s-ai .chat-msgs { gap: 12px; }
#s-ai #chat-msgs, #s-ai #chat-previa { padding-top: 4px; padding-bottom: 28px; }

/* la pregunta es el título (MediSearch: el mismo tamaño en las secciones que siguen) */
#s-ai .chat-msgs .msg-row.user { justify-content: flex-start; }
#s-ai .chat-msgs .msg-row.user .msg-avatar { display: none; }
#s-ai .chat-msgs .msg-row.user .msg-body { flex: 1 1 auto; max-width: 100%; }
#s-ai .chat-msgs .msg-row.user .bubble-user { display: block; background: none; padding: 0; border-radius: 0; font: 700 24px/30px 'Inter', system-ui, sans-serif; letter-spacing: -.4px; color: var(--text-main); text-wrap: pretty; overflow-wrap: anywhere; }
#s-ai .chat-msgs .msg-row.user ~ .msg-row.user { margin-top: 18px; padding-top: 22px; border-top: 1px solid var(--border); }
@media (min-width: 760px) { #s-ai .chat-msgs .msg-row.user .bubble-user { font-size: 28px; line-height: 35px; letter-spacing: -.5px; } }

/* sin «Según» arriba: la nota «Respondo con…» se oculta (sus guías pasan a «Elegir guías»), la respuesta va sin encabezado
   y las tarjetas de texto solo se ven si la síntesis falla (Edwin: «¿los 8 textos citados valen la pena?») */
#s-ai .chat-msgs .msg-row.ai:has(.tc-guia) { display: none; }
#s-ai .tc-sint-h { display: none; }
#s-ai .tc-sint { margin: 0 0 2px; }
#s-ai .tc-sint:not(.bad) ~ .tc-textos { display: none; }
#s-ai .tc-sint.bad ~ .tc-textos { margin-top: 14px; }
#s-ai .msg-body:has(.tc-cq) > .sources-block { display: none; }

/* espera medida en MediSearch: cuatro barras (100/92/97/80.5 %) que aparecen a los 200 ms con 300 ms de fundido y laten de
   opacidad 1 ↔ 0.5 cada segundo; «inmediata» (dentro de la respuesta) sigue a la de la búsqueda sin parpadear */
.tc-espera { display: grid; gap: 12px; padding: 6px 0 8px; opacity: 0; animation: tcEsperaEntra .3s cubic-bezier(.25,.1,.35,1) .2s forwards; }
.tc-espera.inmediata { opacity: 1; animation: none; }
/* 2.7.3 (2026-09-23, igual que la app; Edwin: «mejor las barras verdes, pero pasa la estrella como si las escribiera», «un verde más
   bajo»): la estrella del logo escribe cada barra en 0.62 s, descansa 0.45 s y se borra todo en 0.25 s (ciclo de 3.2 s) */
.tc-espera-barras { position: relative; display: grid; gap: 12px; }
.tc-espera-barras i { display: block; height: 16px; border-radius: 4px; background: #DEFBED; transform: scaleX(0); transform-origin: left center; animation: 3.2s linear infinite; }
.tc-espera-barras i:nth-child(1) { width: 100%; animation-name: tcBarra0; } .tc-espera-barras i:nth-child(2) { width: 92%; animation-name: tcBarra1; }
.tc-espera-barras i:nth-child(3) { width: 97%; animation-name: tcBarra2; } .tc-espera-barras i:nth-child(4) { width: 80.5%; animation-name: tcBarra3; }
@keyframes tcBarra0 { 0% { transform: scaleX(0); opacity: 1; } 19.4% { transform: scaleX(1); } 91.6% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tcBarra1 { 0%, 19.4% { transform: scaleX(0); opacity: 1; } 38.8% { transform: scaleX(1); } 91.6% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tcBarra2 { 0%, 38.8% { transform: scaleX(0); opacity: 1; } 58.1% { transform: scaleX(1); } 91.6% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes tcBarra3 { 0%, 58.1% { transform: scaleX(0); opacity: 1; } 77.5% { transform: scaleX(1); } 91.6% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.tc-pluma { position: absolute; left: 0; top: 8px; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none; animation: tcPluma 3.2s linear infinite; }
.tc-pluma svg, .tc-caret svg { display: block; width: 100%; height: 100%; fill: var(--emerald, #10B981); }
@keyframes tcPluma {
  0% { left: 0; top: 8px; transform: rotate(0); opacity: 1; }
  19.37% { left: 100%; top: 8px; } 19.38% { left: 0; top: 36px; }
  38.75% { left: 92%; top: 36px; } 38.76% { left: 0; top: 64px; }
  58.12% { left: 97%; top: 64px; } 58.13% { left: 0; top: 92px; }
  77.5% { left: 80.5%; top: 92px; transform: rotate(360deg); }
  91.6% { left: 80.5%; top: 92px; transform: rotate(360deg); opacity: 1; }
  100% { left: 80.5%; top: 92px; transform: rotate(360deg); opacity: 0; }
}
/* bajo la respuesta: de cuántas guías sale y cuántas citas tienen la página verificada */
.tc-cierre { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; font-size: 13px; line-height: 18px; color: var(--emerald-dark, #047857); }
.tc-cierre .ico { width: 14px; height: 14px; flex: none; }
/* 2.7.2 (2026-09-23, igual que la app 527ff651d): la nota es la línea de la etapa, arriba de las barras y con un punto que late
   («Buscando en las guías…» → «Leyendo 8 textos de la guía «X»»); vacía no se ve */
.tc-espera-nota { order: -1; display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 13px; line-height: 18px; font-weight: 500; color: var(--text-muted); }
.tc-espera-nota::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--emerald); animation: tcLatido 1s ease-in-out infinite alternate; }
.tc-espera-nota.tc-entra { animation: tcLineaEntra .26s cubic-bezier(.25,.1,.35,1); }
@keyframes tcLineaEntra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.tc-espera-nota:empty { display: none; }
@keyframes tcEsperaEntra { to { opacity: 1; } }
@keyframes tcLatido { from { opacity: 1; } to { opacity: .5; } }
html[data-theme="dark"] .tc-espera-barras i { background: rgba(52,211,153,.14); }
html[data-theme="dark"] .tc-cierre { color: #34D399; }
#typing-row .msg-body { max-width: 100%; }

/* pie de la respuesta: «Fuentes» 👍 👎 … reportar, tarjetas de las fuentes y «Elegir guías» */
@keyframes tcSubePie { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tc-cq { margin-top: 16px; animation: tcSubePie .32s cubic-bezier(.22,1,.36,1) both; }
.tc-cq-fila { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--border); }
.tc-cq-lbl { margin-right: 4px; font: 700 13px/1 'Inter', system-ui, sans-serif; color: var(--text-muted); }
.tc-pulgar { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg-card); color: #52525B; display: grid; place-items: center; cursor: pointer; padding: 0; transition: transform .15s, background .15s, border-color .15s, color .15s; }
.tc-pulgar svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tc-pulgar:hover { border-color: #A7F3D0; color: #047857; }
.tc-pulgar:active { transform: scale(.86); }
.tc-pulgar.activo[data-v="up"] { background: rgba(16,185,129,.10); border-color: #A7F3D0; color: #047857; }
.tc-pulgar.activo[data-v="down"] { background: #F4F4F5; border-color: #A1A1AA; color: var(--text-main); }
.tc-pulgar.activo svg { fill: currentColor; }
.tc-cq-sp { flex: 1; }
.tc-cq-rep { width: 34px; height: 34px; border-radius: 50%; border: 0; background: transparent; color: #A1A1AA; display: grid; place-items: center; cursor: pointer; padding: 0; }
.tc-cq-rep svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-cq-rep:hover { color: var(--error, #dc2626); background: var(--error-bg, #fee2e2); }
.tc-ftes { display: flex; gap: 10px; overflow-x: auto; overflow-y: hidden; padding: 12px 2px 4px; margin: 0 -2px; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.tc-ftes::-webkit-scrollbar { display: none; }
.tc-fte { flex: 0 0 272px; width: 272px; scroll-snap-align: start; display: flex; align-items: center; gap: 11px; padding: 10px 12px 10px 10px; border-radius: 14px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); text-align: left; font: inherit; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; }
.tc-ftes.una .tc-fte { flex: 1 1 auto; width: 100%; }
.tc-fte:hover { border-color: #A7F3D0; box-shadow: 0 4px 12px rgba(9,9,11,.06); }
.tc-fte:active { transform: scale(.98); }
.tc-fte.inst:hover { border-color: #A1A1AA; }
.tc-fte-ico { flex: 0 0 auto; display: grid; place-items: center; min-width: 34px; }
/* la portada en pequeño (389×550 → 34×48, radio 4), con borde fino como las de la Biblioteca */
.tc-fte-img { display: block; width: 34px; height: 48px; object-fit: cover; object-position: top; border-radius: 4px; border: 1px solid var(--border); background: #F4F4F5; }
.tc-fte-sigla { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(16,185,129,.10); border: 1px solid #A7F3D0; color: #047857; font: 800 11px/1 'Inter', system-ui, sans-serif; letter-spacing: .2px; }
.tc-fte-sigla.chica { font-size: 9px; }
.tc-fte.inst .tc-fte-sigla { background: #F4F4F5; border-color: var(--border); color: #52525B; }
.tc-fte-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tc-fte-t { font: 600 13px/17px 'Inter', system-ui, sans-serif; color: var(--text-main); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tc-fte-m { font: 500 11px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-fte-ir { flex: 0 0 auto; display: grid; place-items: center; }
.tc-fte-ir svg { width: 12px; height: 12px; fill: none; stroke: #A1A1AA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-elegir { width: 100%; margin-top: 10px; display: flex; align-items: center; gap: 8px; padding: 11px 14px; border-radius: 12px; border: 1px solid #A7F3D0; background: rgba(16,185,129,.10); color: #047857; font: 700 13.5px/1.2 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; transition: background .15s, transform .15s; }
.tc-elegir svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tc-elegir-tx { flex: 1; }
.tc-elegir-n { min-width: 20px; padding: 3px 6px; border-radius: 10px; background: var(--bg-app); font-size: 11px; font-weight: 800; text-align: center; }
.tc-elegir:hover { background: #D1FAE5; }
.tc-elegir:active { transform: scale(.98); }
/* preguntas sugeridas (solo en la última respuesta): cada una se suma aquí abajo (2.5.0) */
.tc-sug { margin-top: 18px; animation: tcSubePie .32s cubic-bezier(.22,1,.36,1) .12s both; }
.tc-sug-h { margin-bottom: 8px; font: 800 11px/1 'Inter', system-ui, sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--text-muted); }
.tc-sug-f { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); font: 500 14px/19px 'Inter', system-ui, sans-serif; text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.tc-sug-f span { flex: 1; }
.tc-sug-f svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: #047857; stroke-width: 2; stroke-linecap: round; }
.tc-sug-f:hover, .tc-sug-f:active { border-color: #A7F3D0; background: rgba(16,185,129,.10); }
@media (prefers-reduced-motion: reduce) { .tc-espera { opacity: 1; animation: none; } .tc-espera-barras i { animation: none; transform: none; } .tc-pluma { display: none; } .tc-cq, .tc-sug, .tc-espera-nota::before, .tc-espera-nota.tc-entra { animation: none; } }

/* buscador: una caja única, flotante, con la lupa dentro (gris vacía, esmeralda con texto, rueda mientras responde) */
#s-ai .chat-input-wrap { background: var(--bg-app); border-top: 0; padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px)); transition: opacity .22s ease, transform .22s ease, visibility 0s; }
#s-ai .chat-input-wrap:focus-within { box-shadow: none; }
.chat-fija + .chat-input-wrap { padding-top: 8px; }
#s-ai .chat-caja { flex: 1; display: flex; align-items: center; min-height: 54px; padding: 0 6px 0 18px; border-radius: 27px; border: 1.5px solid var(--border); background: var(--bg-card, #fff); box-shadow: 0 3px 12px rgba(15,23,42,.07); transition: border-color .15s; }
#s-ai .chat-caja:focus-within { border-color: var(--emerald); }
#s-ai .chat-caja input { flex: 1; min-width: 0; padding: 12px 8px 12px 0; border: 0; border-radius: 0; background: transparent; font: 400 16px/1.3 'Inter', system-ui, sans-serif; color: var(--text-main); text-overflow: ellipsis; }
#s-ai .chat-caja input:focus, #s-ai .chat-caja input:focus-visible { outline: none; border: 0; background: transparent; }
#s-ai .chat-caja input::placeholder { color: #A1A1AA; }
#s-ai .chat-send { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: #F1F5F9; color: #A1A1AA; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .16s, color .16s, transform .15s cubic-bezier(.34,1.4,.64,1); }
#s-ai .chat-send .ico { width: 19px; height: 19px; stroke-width: 2.4; }
#s-ai .chat-caja.con-texto .chat-send { background: var(--emerald); color: #fff; }
#s-ai .chat-caja:not(.con-texto) .chat-send::after { display: none; }
#s-ai .chat-caja:not(.con-texto) .chat-send:hover { transform: none; box-shadow: none; }
#s-ai .chat-send:active { transform: scale(.88); }
#s-ai .chat-send.ocupado { background: var(--emerald); color: #fff; opacity: .85; cursor: default; }
#s-ai .chat-send.ocupado .ico { display: none; }
#s-ai .chat-rueda { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: tcGira .8s linear infinite; }
#s-ai .chat-send.ocupado .chat-rueda { display: block; }
@keyframes tcGira { to { transform: rotate(360deg); } }
/* mientras busca y redacta el campo se oculta (MediSearch) y vuelve al terminar; en una consulta congelada no hay campo */
#s-ai[data-vista="viva"].cq-ocupado .chat-input-wrap, #s-ai[data-vista="previa"] .chat-input-wrap { opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden; transition: opacity .22s ease, transform .22s ease, visibility 0s .22s; }
.cq-encurso { flex-shrink: 0; align-self: center; margin: 4px 16px 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid #A7F3D0; background: #ECFDF5; color: #047857; font: 700 13px/1 'Inter', system-ui, sans-serif; cursor: pointer; box-shadow: 0 4px 12px rgba(4,120,87,.12); animation: tcSubePie .3s cubic-bezier(.22,1,.36,1) both; }
.cq-encurso[hidden] { display: none; }
@media (min-width: 1024px) {
  .cq-barra { height: 56px; padding: 0 max(14px, calc((100% - 880px) / 2)); }
  #s-ai .chat-input-wrap { padding-bottom: 16px; }
}

/* hoja inferior medida en MediSearch (vaul): 0.5 s con cubic-bezier(0.32, 0.72, 0, 1), velo negro al 50 %, radio 24, hasta
   el 95 % del alto; se arrastra para cerrar. En pantallas anchas va centrada con ancho de lectura. */
.tc-hoja { position: fixed; inset: 0; z-index: 900; visibility: hidden; pointer-events: none; transition: visibility 0s linear .5s; }
.tc-hoja.abierta { visibility: visible; pointer-events: auto; transition: visibility 0s; }
.tc-hoja-velo { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .5s cubic-bezier(.32,.72,0,1); }
.tc-hoja.abierta .tc-hoja-velo { opacity: .5; }
.tc-hoja-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 95dvh; display: flex; flex-direction: column; background: var(--bg-app); color: var(--text-main); border-radius: 24px 24px 0 0; box-shadow: 0 -10px 40px rgba(0,0,0,.18); padding-bottom: env(safe-area-inset-bottom, 0px); transform: translate3d(0, 100%, 0); transition: transform .5s cubic-bezier(.32,.72,0,1); }
.tc-hoja.abierta .tc-hoja-panel { transform: translate3d(0, var(--dy, 0px), 0); }
.tc-hoja-panel.arrastre { transition: none; }
.tc-hoja-cabeza { flex-shrink: 0; padding: 8px 20px 4px; touch-action: none; cursor: grab; }
.tc-hoja-asa { width: 40px; height: 5px; margin: 0 auto 8px; border-radius: 3px; background: var(--border); }
.tc-hoja-fila { display: flex; align-items: center; gap: 10px; min-height: 32px; }
.tc-hoja-t { flex: 1; margin: 0; font: 700 15px/1.3 'Inter', system-ui, sans-serif; letter-spacing: 0; color: var(--text-main); }
.tc-hoja-x { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 0; background: #F4F4F5; color: #52525B; display: grid; place-items: center; cursor: pointer; padding: 0; }
.tc-hoja-x:hover { background: #E4E4E7; }
.tc-hoja-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.tc-hoja-cuerpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 20px 18px; }
.tc-hoja-pie { flex-shrink: 0; padding: 10px 20px 14px; border-top: 1px solid var(--border); }
.tc-hoja-pie[hidden] { display: none; }
@media (min-width: 760px) {
  .tc-hoja-panel { left: 50%; right: auto; width: min(680px, calc(100% - 32px)); transform: translate3d(-50%, 100%, 0); }
  .tc-hoja.abierta .tc-hoja-panel { transform: translate3d(-50%, var(--dy, 0px), 0); }
}
@media (prefers-reduced-motion: reduce) { .tc-hoja-panel, .tc-hoja-velo { transition-duration: .01ms; } }
html[data-theme="dark"] .tc-hoja-x { background: var(--surface-2); color: var(--text-main); }
/* la cita completa en la hoja: sin recorte de renglones ni «Ver más» */
.tc-hoja-card .rich-card.tc-card { margin: 4px 0 6px; box-shadow: none; }
.tc-hoja-card .tc-card .tc-texto.tc-clamp { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; }
.tc-hoja-card .tc-card .tc-pasos:not(.abierto) li:nth-child(n+4) { display: list-item; }
.tc-hoja-card .tc-mas { display: none; }
/* «Citados en la respuesta» y «También consultados» (gris punteado) */
.tc-otras-citas { margin-top: 14px; }
.tc-otras-lbl { margin-bottom: 8px; font: 600 12px/1.3 'Inter', system-ui, sans-serif; color: var(--text-muted); }
.tc-otras-fila { display: flex; flex-wrap: wrap; gap: 8px; }
.tc-otra { width: 32px; height: 32px; border-radius: 50%; border: 1px solid #A7F3D0; background: rgba(16,185,129,.10); color: #047857; font: 800 12.5px/1 'Inter', system-ui, sans-serif; display: grid; place-items: center; cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
.tc-otra:active { transform: scale(.92); }
.tc-otra.inst { border-color: var(--border); background: #F4F4F5; color: #52525B; }
.tc-otra.sin-citar { border-style: dashed; border-color: #A1A1AA; background: var(--bg-app); color: #71717A; }
.tc-otra.activa { border-style: solid; border-color: #10B981; background: #10B981; color: #fff; }
.tc-otra.inst.activa { border-color: #52525B; background: #52525B; color: #fff; }
/* «Elegir guías»: casillas y botón fijo abajo */
.tc-elegir-nota { margin: 0 0 12px; font-size: 12.5px; line-height: 18px; color: var(--text-muted); }
.tc-elegir-fila { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); text-align: left; font: inherit; cursor: pointer; transition: background .15s, border-color .15s; }
.tc-elegir-fila:hover { background: var(--surface); }
.tc-elegir-fila.marcada { border-color: #A7F3D0; background: rgba(16,185,129,.10); }
.tc-casilla { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #A1A1AA; display: grid; place-items: center; color: transparent; transition: background .15s, border-color .15s; }
.tc-casilla svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.tc-elegir-fila.marcada .tc-casilla { border-color: #10B981; background: #10B981; color: #fff; }
.tc-elegir-c { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tc-elegir-t { font: 600 14px/19px 'Inter', system-ui, sans-serif; }
.tc-elegir-k { font: 500 11.5px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--text-muted); white-space: pre-wrap; }
.tc-responder { width: 100%; height: 48px; border-radius: 14px; border: 0; background: #10B981; color: #fff; font: 700 15px/1 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .15s, transform .15s; }
.tc-responder:hover:not(:disabled) { background: #059669; }
.tc-responder:active:not(:disabled) { transform: scale(.98); }
.tc-responder:disabled { background: #F1F5F9; color: #71717A; cursor: default; }
/* hoja de la cita (2026-09-22, igual que la app): el tipo pasa al título en su color («Recomendación · Cita 5»); dentro, la tarjeta
   incrustada con su barra, grado, texto, «clave · p. N», Ver PDF y bandera, sin chip ni número, sobre gris claro */
.tc-hoja-tipo { color: var(--tc-nar); }
.tc-hoja-tipo.tc-recomendacion { color: var(--tc-rec); }
.tc-hoja-tipo.tc-evidencia { color: var(--tc-evi); }
.tc-hoja-tipo.tc-pbp { color: var(--tc-pbp); }
.tc-hoja-tipo.inst { color: #52525B; }
.tc-hoja-card .rich-card.tc-card { background: var(--surface); padding-top: 13px; padding-bottom: 11px; }
.tc-hoja-card .tc-card .tc-tipo { display: none; }
.tc-hoja-card .tc-card .tc-row:not(:has(.tc-grado)) { display: none; }
.tc-hoja-card .tc-card .tc-texto { font-size: 15px; line-height: 23px; }
.tc-hoja-card .tc-card .tc-row:not(:has(.tc-grado)) + .tc-texto { margin-top: 0; }
/* el carrusel viejo «Fuentes consultadas» no se ve en una respuesta con síntesis: sus fuentes van abajo, con portada */
#s-ai .msg-body:has(.tc-sint) > .sources-block { display: none; }
.tc-elegir-e { font: 500 12px/1.35 'Inter', system-ui, sans-serif; color: #047857; white-space: nowrap; }
.tc-elegir-e.aviso { color: var(--warning, #d97706); }
/* 2.4.1 (2026-09-22, igual que la app): el título de la consulta y las consultas recientes con mayúscula inicial */
#s-ai .chat-msgs .msg-row.user .bubble-user::first-letter, .tc-reciente .info .t::first-letter { text-transform: uppercase; }
/* 2.5.0 (2026-09-22, igual que la app c0d97fd73 y bdf720fbf): la pregunta de seguimiento se suma en la misma consulta y la
   última sección mide al menos el alto visible (--cq-relleno lo calcula lib/tutor-chunks.js; el margen negativo quita el hueco
   del gap cuando no hay relleno); «Reintentar» cuando la respuesta falló o se interrumpió */
#s-ai #chat-msgs::after { content: ''; flex: 0 0 var(--cq-relleno, 0px); margin-top: -12px; pointer-events: none; }
.tc-sint-errcaja { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.tc-sint-err.claro { margin: 0; font-size: 13.5px; line-height: 20px; }
.tc-reintentar { padding: 7px 14px; border-radius: 100px; border: 1px solid #A7F3D0; background: rgba(16,185,129,.10); color: #047857; font: 700 13px/1.2 'Inter', system-ui, sans-serif; cursor: pointer; transition: background .15s, transform .15s; }
.tc-reintentar:hover { background: rgba(16,185,129,.16); }
.tc-reintentar:active { transform: scale(.96); }
html[data-theme="dark"] .tc-reintentar { color: #6EE7B7; border-color: rgba(110,231,183,.35); }
#chat-previa .tc-reintentar { display: none; }   /* una consulta congelada no se vuelve a redactar */
/* 2.6.0 (2026-09-22, igual que la app ab0a89f25; Edwin: «haz que esto se sienta moderno»): la bienvenida lleva una esfera de luz
   verde que respira detrás de la estrella, el título grande, una píldora de confianza (guías y normas contadas del catálogo) y,
   justo encima del campo, tarjetas de preguntas en fila deslizable que reemplazan a las píldoras de temas. Sin tarjetas con guía
   fijada (no se pintan) ni con una consulta en curso o lista (la píldora «Ver ›» ocupa su lugar). Quieto con menos movimiento. */
#s-ai .cq-bienvenida { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 8px 0 16px; }
@media (max-width: 1023.98px) { #s-ai #chat-inicio { padding-left: 16px; padding-right: 16px; } }   /* la píldora cabe en una línea a 375 px */
.cq-orbe { position: relative; width: 140px; height: 140px; display: grid; place-items: center; margin: 0 auto 2px; }
.cq-halo { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, rgba(16,185,129,.42) 0%, rgba(52,211,153,.20) 45%, rgba(167,243,208,0) 100%); animation: cqHalo 3.2s cubic-bezier(.37,0,.63,1) infinite; }
.cq-disco { position: relative; width: 64px; height: 64px; box-sizing: border-box; border-radius: 50%; background: #ECFDF5; border: 1px solid #fff; display: grid; place-items: center; color: #047857; box-shadow: 0 6px 14px rgba(4,120,87,.18); animation: cqDisco .75s cubic-bezier(.34,1.4,.64,1) backwards; }
.cq-disco .ico { width: 30px; height: 30px; animation: cqEstrella 5s cubic-bezier(.37,0,.63,1) 1s infinite; }
@keyframes cqHalo { 0%, 100% { transform: scale(.9); opacity: .75; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes cqDisco { from { opacity: 0; transform: scale(.6) rotate(-25deg); } to { opacity: 1; transform: none; } }
@keyframes cqEstrella { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.055); } }
@keyframes cqAparece { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes cqApareceCorto { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#s-ai .cq-bienvenida .cq-bv-t { margin: 0; font: 800 28px/34px 'Inter', system-ui, sans-serif; letter-spacing: -.8px; color: var(--text-main); animation: cqAparece .48s cubic-bezier(.22,1,.36,1) .12s backwards; }
#s-ai .cq-bienvenida .cq-bv-s { margin: 8px auto 0; max-width: 300px; font: 400 15px/21px 'Inter', system-ui, sans-serif; color: var(--text-muted); animation: cqAparece .48s cubic-bezier(.22,1,.36,1) .2s backwards; }
.cq-confianza { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 100px; background: rgba(16,185,129,.10); color: #047857; font: 600 12.5px/1.3 'Inter', system-ui, sans-serif; white-space: nowrap; max-width: calc(100vw - 20px); box-sizing: border-box; animation: cqApareceCorto .42s cubic-bezier(.22,1,.36,1) .3s backwards; }
.cq-confianza span { overflow: hidden; text-overflow: ellipsis; }
.cq-confianza[hidden] { display: none; }
.cq-confianza .ico { width: 13px; height: 13px; stroke-width: 3; }
/* 2.7.3 (2026-09-23, igual que la app dbcfbcb0d; Edwin eligió la «propuesta A» del inicio): el logo de verdad en vez de la esfera, cuya
   estrella escribe sus tres renglones al abrir (1.9 s tras 0.25 s; una vez por carga: .visto), y las preguntas en rejilla de 2 × 3 */
.cq-logo { display: block; width: 64px; height: 64px; margin: 0 auto 10px; overflow: visible; }
.cq-logo-doc { fill: none; stroke: #A1A1AA; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cq-renglon { fill: none; stroke: #A1A1AA; stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.cq-renglon.r1 { animation: cqTinta .27s linear .5s forwards; } .cq-renglon.r2 { animation: cqTinta .34s linear .86s forwards; } .cq-renglon.r3 { animation: cqTinta .46s linear 1.28s forwards; }
.cq-logo-estrella { fill: var(--emerald, #10B981); transform-box: fill-box; transform-origin: center; animation: cqPluma 1.9s linear .25s both; }
.cq-logo.visto .cq-renglon { stroke-dashoffset: 0; animation: none; } .cq-logo.visto .cq-logo-estrella { animation: none; }
@keyframes cqTinta { to { stroke-dashoffset: 0; } }
@keyframes cqPluma {
  0% { transform: translate(0, 0) rotate(0) scale(1); }
  13% { transform: translate(-17.25px, 8.02px) rotate(47deg) scale(.3); }
  27% { transform: translate(-10.31px, 8.02px) rotate(97deg) scale(.3); }
  32% { transform: translate(-17.25px, 12.44px) rotate(115deg) scale(.3); }
  50% { transform: translate(-5.54px, 12.44px) rotate(180deg) scale(.3); }
  54% { transform: translate(-17.25px, 16.86px) rotate(194deg) scale(.3); }
  78% { transform: translate(2.71px, 16.86px) rotate(281deg) scale(.3); }
  93% { transform: translate(0, 0) rotate(335deg) scale(1.12); }
  100% { transform: translate(0, 0) rotate(360deg) scale(1); }
}
.cq-empieza { max-width: 560px; margin: 20px auto 10px; padding: 0 2px; text-align: left; font: 800 11px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--text-subtle, #A1A1AA); }
.cq-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 560px; margin: 0 auto; text-align: left; }
.cq-rejilla .cq-tarjeta { max-width: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; }
.cq-rejilla .cq-tarjeta-ico { margin-bottom: 4px; }
.cq-rejilla .cq-tarjeta-tx { min-width: 0; max-width: 100%; }
.cq-bienvenida .cq-empieza, .cq-bienvenida .cq-rejilla { align-self: stretch; width: 100%; box-sizing: border-box; }
/* «tarjetas con etiquetas» (Edwin, 2026-09-23: «más moderno, sin iconos»; «ese tono de verde no me gusta» → «gris neutro»): gris sin
   borde ni sombra, la etiqueta (qué parte de la guía) en verde, la flecha gris y el tema; cambian cada vez que se entra al inicio
   (index.html pintarTarjetasInicio, PREGUNTAS_ROTAN) */
.cq-rejilla .cq-tarjeta { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "et flecha" "tema tema"; align-items: center; align-content: start; row-gap: 6px; min-height: 84px; padding: 12px 13px; border: 0; border-radius: 16px; background: #F4F4F5; box-shadow: none; }
.cq-rejilla .cq-tarjeta:hover { background: #E4E4E7; border-color: transparent; }
.cq-et { grid-area: et; font: 800 10.5px/1.2 'Inter', system-ui, sans-serif; letter-spacing: .09em; text-transform: uppercase; color: #047857; }
.cq-flecha { grid-area: flecha; width: 14px; height: 14px; fill: none; stroke: #A1A1AA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cq-tema { grid-area: tema; font: 700 15px/19px 'Inter', system-ui, sans-serif; letter-spacing: -.2px; color: var(--text-main, #09090B); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html[data-theme="dark"] .cq-rejilla .cq-tarjeta { background: rgba(255,255,255,.06); }
html[data-theme="dark"] .cq-et { color: #6EE7B7; } html[data-theme="dark"] .cq-flecha { stroke: #71717A; }
@media (min-width: 1024px) { .cq-rejilla, .cq-empieza { max-width: 760px; } .cq-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .cq-renglon { stroke-dashoffset: 0; animation: none; } .cq-logo-estrella { animation: none; } }
/* 2.7.4 (2026-09-23, igual que la app 32a1af363): «Empieza con» en píldoras grises centradas, sin tarjetas, iconos ni etiqueta (Edwin: la
   rejilla «no se ve tan limpia como creí; mejor los chips»); texto corto y la pregunta completa en data-q */
.cq-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 560px; margin: 20px auto 0; padding: 0 4px; }
.cq-chip { padding: 9px 14px; border: 0; border-radius: 100px; background: #F4F4F5; color: #52525B; font: 600 14px/1.2 'Inter', system-ui, sans-serif; cursor: pointer; animation: cqTarjeta .34s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(260ms + var(--i, 0) * 40ms); transition: background .15s, transform .12s; }
.cq-chip:hover { background: #E4E4E7; } .cq-chip:active { transform: scale(.96); }
.cq-chip:focus-visible { outline: 2px solid #10B981; outline-offset: 2px; }
html[data-theme="dark"] .cq-chip { background: rgba(255,255,255,.07); color: #D4D4D8; }
@media (prefers-reduced-motion: reduce) { .cq-chip { animation: none; } }
.cq-tarjetas { display: none; }
#s-ai[data-vista="inicio"] .cq-tarjetas:not(:empty) { display: flex; flex-shrink: 0; gap: 10px; overflow-x: auto; padding: 4px 16px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scroll-padding-inline: 16px; }
.cq-tarjetas::-webkit-scrollbar { display: none; }
#s-ai:has(#cq-encurso:not([hidden])) .cq-tarjetas { display: none !important; }
.cq-tarjeta { flex: 0 0 auto; max-width: 250px; display: flex; align-items: center; gap: 11px; padding: 12px; border-radius: 16px; border: 1px solid var(--border, #E4E4E7); background: var(--bg-app, #fff); box-shadow: 0 2px 8px rgba(15,23,42,.05); color: var(--text-main); font: inherit; text-align: left; cursor: pointer; animation: cqTarjeta .42s cubic-bezier(.22,1,.36,1) backwards; animation-delay: calc(260ms + var(--i, 0) * 60ms); transition: transform .15s, border-color .15s; }
.cq-tarjeta:hover { border-color: #A7F3D0; }
.cq-tarjeta:active { transform: scale(.97); }
.cq-tarjeta-ico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; background: rgba(16,185,129,.10); color: #047857; display: grid; place-items: center; }
.cq-tarjeta-ico .ico { width: 17px; height: 17px; }
.cq-tarjeta-tx { min-width: 0; display: flex; flex-direction: column; padding-right: 4px; }
.cq-tarjeta-t { font: 700 14px/18px 'Inter', system-ui, sans-serif; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cq-tarjeta-s { margin-top: 2px; font: 400 12px/16px 'Inter', system-ui, sans-serif; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes cqTarjeta { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@media (min-width: 1024px) { #s-ai[data-vista="inicio"] .cq-tarjetas:not(:empty) { max-width: 860px; width: 100%; margin: 0 auto; box-sizing: border-box; padding: 4px 12px 10px; } }
html[data-theme="dark"] .cq-disco { background: #064E3B; border-color: rgba(255,255,255,.08); color: #6EE7B7; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
html[data-theme="dark"] .cq-confianza, html[data-theme="dark"] .cq-tarjeta-ico { color: #6EE7B7; background: rgba(16,185,129,.16); }
@media (prefers-reduced-motion: reduce) {
  .cq-halo, .cq-disco, .cq-disco .ico, #s-ai .cq-bienvenida .cq-bv-t, #s-ai .cq-bienvenida .cq-bv-s, .cq-confianza, .cq-tarjeta { animation: none !important; }
}
/* 2.7.0 (2026-09-22, igual que la app 8e8514ad4 y ad9afcefd): cada tarjeta de «Fuentes» lleva los números de cita de esa guía
   (como el carrusel numerado de MediSearch) y la flecha ↗ aparte, que abre la página de la guía o del documento; tocar la tarjeta
   abre sus textos. («Citar» se quitó en 2.7.3: Edwin, «no me gusta».) */
.tc-fte-caja { position: relative; flex: 0 0 272px; width: 272px; scroll-snap-align: start; }
.tc-ftes.una .tc-fte-caja { flex: 1 1 auto; width: 100%; }
.tc-fte-caja .tc-fte { width: 100%; box-sizing: border-box; padding-right: 50px; }
.tc-fte-abrir { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 30px; height: 30px; padding: 0; border-radius: 50%; border: 0; background: rgba(16,185,129,.10); color: #047857; display: grid; place-items: center; cursor: pointer; transition: background .15s, transform .15s; }
.tc-fte-abrir svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tc-fte-abrir:hover { background: rgba(16,185,129,.18); }
.tc-fte-abrir:active { transform: translateY(-50%) scale(.9); }
.tc-fte-caja.inst .tc-fte-abrir { background: #F4F4F5; color: #52525B; }
.tc-fte-fila { display: flex; align-items: center; gap: 8px; min-width: 0; }
.tc-fte-fila .tc-fte-m { flex: 0 1 auto; min-width: 0; }
.tc-fte-nums { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.tc-fte-num { min-width: 17px; height: 17px; box-sizing: border-box; padding: 0 4px; border-radius: 9px; display: inline-grid; place-items: center; background: #ECFDF5; border: 1px solid #A7F3D0; color: #047857; font: 800 9.5px/1 'Inter', system-ui, sans-serif; }
.tc-fte-nums.inst .tc-fte-num { background: #F4F4F5; border-color: #D4D4D8; color: #52525B; }
.tc-fte-mas { font: 700 10.5px/1 'Inter', system-ui, sans-serif; color: var(--text-muted); }
html[data-theme="dark"] .tc-fte-num { background: rgba(52,211,153,.16); color: #6EE7B7; border-color: rgba(52,211,153,.35); }
html[data-theme="dark"] .tc-fte-abrir { color: #6EE7B7; background: rgba(16,185,129,.16); }
/* 2.8.0 (2026-09-24, prototipo local; Edwin: «énfasis a escalas y clasificaciones, para ubicarlas y que se muestren EXACTAMENTE como
   son»): tarjeta de la escala (lib/tutor-chunks.js 1.18.0). Mismo molde que la tarjeta de cita (borde, barra a la izquierda,
   etiqueta del tipo, pie «clave · p. N» con «Ver PDF») en violeta, el color que no usa ningún otro tipo. Dentro: nombre, lo que mide,
   el cuadro impreso (recorte del PDF certificado, sin marco propio: se ve como en la guía), «Texto literal» por celdas, la guía y
   «También en». La pequeña (pregunta clínica que solo la nombra) es una fila que abre la hoja. «¿Cuál escala?» usa el molde de
   «¿Con cuál sigo?». */
:root { --tc-esc: #6D28D9; --tc-esc-bd: #8B5CF6; --tc-esc-bg: #F5F3FF; --tc-esc-bd2: #DDD6FE; }
html[data-theme="dark"] { --tc-esc: #C4B5FD; --tc-esc-bg: rgba(139,92,246,.14); --tc-esc-bd2: rgba(196,181,253,.35); }
.tc-esc { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px 12px 16px; margin: 4px 0 10px; font-size: 13.5px; line-height: 1.5; box-shadow: var(--shadow-sm); animation: tc-in .35s ease-out both; }
.tc-esc::before { content: ""; position: absolute; left: -1px; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--tc-esc-bd); }
.tc-esc .tc-tipo.tc-esc-tipo, .tc-esc-tipo { background: var(--tc-esc-bd); color: #fff; }
.tc-esc-area { font: 500 12px/1.3 'Inter', system-ui, sans-serif; color: var(--text-muted); }
.tc-esc-n { margin: 8px 0 0; font: 700 16px/1.3 'Inter', system-ui, sans-serif; letter-spacing: -.1px; color: var(--text-main); }
.tc-esc-m { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-muted); }
.tc-esc-aviso { margin: 10px 0 0; padding: 8px 10px; border-radius: 10px; background: #FFFBEB; border: 1px solid #FDE68A; color: #78350F; font-size: 13px; line-height: 1.45; }
.tc-esc-nota { color: #92400E; }
.tc-esc-fig { margin: 10px 0 0; }
.tc-esc-img { display: block; width: 100%; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: #fff; overflow: hidden; cursor: zoom-in; transition: border-color .15s, box-shadow .15s; }
.tc-esc-img:hover { border-color: var(--tc-esc-bd2); box-shadow: 0 2px 10px rgba(109,40,217,.08); }
.tc-esc-img img { display: block; width: 100%; height: auto; }
.tc-esc-litb { display: inline-flex; align-items: center; gap: 4px; margin: 8px 0 0; padding: 4px 0; border: 0; background: none; font: 700 12.5px/1 'Inter', system-ui, sans-serif; color: var(--tc-esc); cursor: pointer; }
.tc-esc-litb svg, .tc-esc-ir svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
.tc-esc-litb.abierto svg { transform: rotate(90deg); }
.tc-esc-lit { margin-top: 8px; }
.tc-esc-lit[hidden] { display: none; }
.tc-esc-tablaw { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: 10px; }
.tc-esc-tabla { width: 100%; border-collapse: collapse; font-size: 12.5px; line-height: 1.45; color: var(--text-main); }
.tc-esc-tabla td { padding: 5px 9px; border-bottom: 1px solid var(--border); vertical-align: top; }
.tc-esc-tabla tr:last-child td { border-bottom: 0; }
.tc-esc-tabla td + td { border-left: 1px solid var(--border); }
.tc-esc-tabla tr:first-child td { font-weight: 700; background: var(--surface); }
.tc-esc-parrafo, .tc-esc-cita-t { margin: 10px 0 0; white-space: pre-line; font-size: 13.5px; line-height: 1.5; color: var(--text-main); }
.tc-esc-cita-t.tc-clamp { display: -webkit-box; -webkit-line-clamp: 5; line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.tc-esc-cita { margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--border); }
.tc-esc-guia { display: block; margin-bottom: 2px; font: 500 12.5px/1.35 'Inter', system-ui, sans-serif; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-esc .tc-ver { color: var(--tc-esc); }
.tc-esc-tambien { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.tc-esc-lbl { font: 600 12px/1.3 'Inter', system-ui, sans-serif; color: var(--text-muted); margin-right: 2px; }
.tc-esc-g { height: 26px; padding: 0 9px; border-radius: 100px; border: 1px solid var(--tc-esc-bd2); background: var(--tc-esc-bg); color: var(--tc-esc); font: 600 11.5px/1 ui-monospace, SFMono-Regular, Menlo, monospace; cursor: pointer; white-space: nowrap; transition: background .15s, transform .12s; }
.tc-esc-g:hover { background: #EDE9FE; } .tc-esc-g:active { transform: scale(.96); }
.tc-esc-g.menc { border-color: var(--border); background: var(--bg-card); color: var(--text-main); font-weight: 500; }
.tc-esc-g.menc:hover { background: var(--surface); }
.tc-esc-mas { padding: 4px 2px; border: 0; background: none; font: 600 12px/1.3 'Inter', system-ui, sans-serif; color: var(--text-muted); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.tc-esc-menc { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.tc-esc-menc[hidden] { display: none; }
.tc-esc .tc-esc-var { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.tc-esc .tc-esc-var > span { font-size: 12px; color: var(--text-muted); margin-right: 2px; }
.tc-esc .tc-esc-var .tc-chip { height: 28px; max-width: 100%; padding: 0 11px; border-radius: 100px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-main); font: 500 12px/1 'Inter', system-ui, sans-serif; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.tc-esc .tc-esc-var .tc-chip:hover { border-color: var(--tc-esc-bd2); color: var(--tc-esc); background: var(--tc-esc-bg); }
.tc-esc.tc-esc-cambio { animation: tc-esc-cambio .45s ease-out; }
@keyframes tc-esc-cambio { from { box-shadow: 0 0 0 3px var(--tc-esc-bd2); } to { box-shadow: var(--shadow-sm); } }
/* la pequeña: una fila que abre la hoja con la tarjeta completa */
.tc-esc.tc-esc-compacta { padding: 0; }
.tc-esc-abrir { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 14px; border: 0; background: none; text-align: left; font: inherit; color: inherit; cursor: pointer; border-radius: 14px; }
.tc-esc-abrir:hover { background: var(--tc-esc-bg); }
.tc-esc-cn { flex: 1; min-width: 0; font: 600 14px/1.35 'Inter', system-ui, sans-serif; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-esc-ir { flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; font: 700 12.5px/1 'Inter', system-ui, sans-serif; color: var(--tc-esc); }
/* en la hoja de la cita: la misma tarjeta, sin sombra */
.tc-hoja-esc .tc-esc { box-shadow: none; margin: 4px 0 6px; animation: none; }
.tc-hoja-tipo.tc-escala { color: var(--tc-esc); }
/* «¿Cuál escala?» (molde de «¿Con cuál sigo?») */
.tc-escbox .tc-clar-clave { background: var(--tc-esc-bg); color: var(--tc-esc); }
@media (max-width: 640px) {
  .tc-esc { padding: 11px 12px 11px 14px; }
  .tc-esc-n { font-size: 15.5px; }
  .tc-esc-tabla { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tc-esc, .tc-esc.tc-esc-cambio { animation: none; } }
html[data-theme="dark"] .tc-esc-aviso { background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color: #FDE68A; }
html[data-theme="dark"] .tc-esc-img { background: #fff; }

/* ── Algoritmo citado: imagen del diagrama y «Ver pasos» (2.8.1, 2026-10-06; opción B de
   artifacts/coordinacion/ALGORITMOS-VISTA-2026-10-06.md). La imagen va a lo ancho de la tarjeta; si el diagrama es muy alto se
   achica (nunca se recorta) y al tocarla se abre el visor con zoom. Los pasos quedan cerrados. ── */
.tc-card .tc-alg-fig { margin: 6px 0 2px; }
.tc-card .tc-alg-img { display: block; width: 100%; padding: 0; border: 1px solid var(--border, #E4E4E7); border-radius: 10px; background: #fff; overflow: hidden; cursor: zoom-in; }
.tc-card .tc-alg-img img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; background: #fff; }
.tc-card .tc-alg-fig figcaption { margin-top: 4px; font: 500 11.5px/1.3 'Inter', system-ui, sans-serif; color: var(--text-muted, #71717a); }
.tc-card .tc-alg-ver { display: block; border: 0; background: none; padding: 2px 0; margin: 6px 0 6px; font: 700 12.5px/1.3 'Inter', system-ui, sans-serif; color: var(--emerald-dark, #047857); cursor: pointer; }
.tc-card .tc-alg-pasos { margin: 0 0 8px; padding-left: 20px; font-size: 13px; line-height: 1.45; color: var(--text-main, #18181B); }
.tc-card .tc-alg-pasos[hidden] { display: none; }
.tc-card .tc-alg-pasos > li { margin: 6px 0; }
.tc-card .tc-alg-pasos > li::marker { color: var(--text-muted, #71717A); font-variant-numeric: tabular-nums; }
.tc-card .tc-alg-pasos ul { margin: 3px 0 0; padding-left: 0; list-style: none; }
.tc-card .tc-alg-pasos ul li { margin: 2px 0; }
.tc-card .tc-alg-q { font-weight: 600; }
.tc-card .tc-alg-pasos b.si { color: #047857; }
.tc-card .tc-alg-pasos b.no { color: #B91C1C; }
html[data-theme="dark"] .tc-card .tc-alg-pasos b.si { color: #6EE7B7; }
html[data-theme="dark"] .tc-card .tc-alg-pasos b.no { color: #FCA5A5; }
#tc-algv { position: fixed; inset: 0; z-index: 960; display: none; flex-direction: column; background: rgba(9,9,11,.95); }
#tc-algv.open { display: flex; }
#tc-algv .tc-algv-h { display: flex; align-items: center; gap: 6px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--bg-card, #fff); color: var(--text-main, #18181B); border-bottom: 1px solid var(--border, #E4E4E7); }
#tc-algv .tc-algv-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
#tc-algv .tc-algv-who b { font: 600 12.5px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; }
#tc-algv .tc-algv-who span { font: 500 13px/1.3 'Inter', system-ui, sans-serif; color: var(--text-muted, #71717a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#tc-algv .tc-ib { flex-shrink: 0; min-width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 9px; border: 1px solid var(--border, #E4E4E7); border-radius: 9px; background: var(--bg-card, #fff); color: var(--text-main, #18181B); font: 600 15px/1 'Inter', system-ui, sans-serif; cursor: pointer; }
#tc-algv .tc-ib span { font-size: 12.5px; }
#tc-algv .tc-ib:disabled { opacity: .4; cursor: default; }
#tc-algv .tc-ib svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#tc-algv .tc-algv-scroll { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px; }
#tc-algv .tc-algv-scroll img { display: block; width: calc(var(--z, 1) * 100%); max-width: none; height: auto; margin: 0 auto; background: #fff; border-radius: 6px; cursor: zoom-in; }
@media (min-width: 1024px) { #tc-algv .tc-algv-scroll img { width: calc(var(--z, 1) * min(100%, 980px)); } }
@media (max-width: 600px) { #tc-algv .tc-ib span { display: none; } #tc-algv .tc-algv-scroll { padding: 6px; } }