/* app.css - the XT Hub web app.
   Tokens are the same ones app/public/design.css defines for the desktop product,
   so the web surface and the installable one read as one thing. Warm near-black,
   one amber accent used sparingly, line icons only, no emojis, no em-dashes. */

:root{
  --bg-0:#08080c; --bg-1:#0e0e15; --bg-2:#15151e; --bg-3:#1c1c27; --bg-hover:#20202c;
  --text:#ececf1; --text-dim:#9a9aab; --text-faint:#6b6b7a; --text-on-accent:#0a0a0f;
  --line:#22222e; --line-strong:#33333f;
  --accent:#f59e0b; --accent-press:#d97706; --accent-soft:rgba(245,158,11,.10);
  --good:#22c55e; --good-soft:rgba(34,197,94,.12);
  --bad:#ef4444; --bad-soft:rgba(239,68,68,.12);
  --focus:rgba(245,158,11,.45);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Consolas,monospace;
  --r-sm:8px; --r-md:11px; --r-lg:14px; --r-xl:20px; --r-pill:999px;
  --sh-2:0 6px 24px rgba(0,0,0,.45); --sh-3:0 20px 60px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.6,.2,1); --dur-fast:120ms; --dur:200ms;
  --side-w:270px; --read:46rem;
}

*{box-sizing:border-box}
html,body{height:100%}

/* The browser's own [hidden] rule is display:none at UA specificity, which ANY
   class that sets display beats. The modal host, the detail drawer and the
   reviewer nav item all set display in their class, so without this they render
   on top of the app while still carrying hidden. It cost a full-screen dark
   overlay and a drawer covering a third of the window before it was caught. */
[hidden]{display:none!important}
body{
  margin:0; background:var(--bg-0); color:var(--text); font-family:var(--font);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:none;padding:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:0 0 0 3px var(--focus);border-radius:var(--r-sm)}
.ic{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ic-sm{width:15px;height:15px}
.ic-lg{width:22px;height:22px}

/* ---------- shell ---------- */
.app{display:grid;grid-template-columns:var(--side-w) 1fr;height:100dvh;overflow:hidden}

.side{
  display:flex;flex-direction:column;min-height:0;
  background:var(--bg-1);border-right:1px solid var(--line);padding:14px 12px;gap:12px;
}
.side-brand{display:flex;align-items:center;gap:10px;padding:4px 6px 2px}
.brand-mark{color:var(--accent);display:flex}
.brand-name{font-weight:700;letter-spacing:-.01em;font-size:16px}

.new-chat{
  display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-size:14px;font-weight:600;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.new-chat:hover{background:var(--bg-hover);border-color:var(--accent)}

.side-nav{display:flex;flex-direction:column;gap:2px}
.nav-item{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 11px;border-radius:var(--r-md);
  color:var(--text-dim);font-size:14px;font-weight:500;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.nav-item span{flex:1;text-align:left}
.nav-item:hover{background:var(--bg-2);color:var(--text)}
.nav-item.is-active{background:var(--bg-3);color:var(--text)}
.nav-item.is-active .ic{color:var(--accent)}
.nav-count{
  flex:none!important;min-width:20px;text-align:center;font-size:11px;font-weight:700;
  background:var(--accent-soft);color:var(--accent);border-radius:var(--r-pill);padding:1px 7px;
}

.side-scroll{flex:1;min-height:0;overflow-y:auto;margin-top:4px}
.side-label{
  margin:6px 8px 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
}
.conv-list{display:flex;flex-direction:column;gap:1px}
.conv{
  display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:var(--r-sm);
  color:var(--text-dim);font-size:13.5px;transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.conv:hover{background:var(--bg-2);color:var(--text)}
.conv.is-active{background:var(--bg-3);color:var(--text)}
.conv-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.conv-del{opacity:0;color:var(--text-faint);transition:opacity var(--dur-fast) var(--ease)}
.conv:hover .conv-del{opacity:1}
.conv-del:hover{color:var(--bad)}
.side-empty{padding:8px 10px;font-size:13px;color:var(--text-faint)}
.side-ayuda{padding:6px 10px 0;margin:0;font-size:12px}
.side-ayuda a{color:var(--text-faint)}
.side-ayuda a:hover{color:var(--accent)}

.side-foot{border-top:1px solid var(--line);padding-top:10px}
.user-chip{
  display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border-radius:var(--r-md);
  transition:background var(--dur-fast) var(--ease);text-align:left;
}
.user-chip:hover{background:var(--bg-2)}
.avatar{
  width:30px;height:30px;flex:none;border-radius:var(--r-pill);object-fit:cover;
  background:var(--bg-3);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--accent);
}
.user-meta{flex:1;min-width:0}
.user-name{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.user-sub{font-size:11.5px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn-signin{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 12px;
  background:var(--accent);color:var(--text-on-accent);border-radius:var(--r-md);font-size:14px;font-weight:700;
  transition:background var(--dur-fast) var(--ease);
}
.btn-signin:hover{background:var(--accent-press)}

/* ---------- stage ---------- */
.stage{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-0)}
.topbar{
  display:flex;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--line);
  min-height:60px;background:var(--bg-0);
}
.xt-chip{display:flex;align-items:center;gap:11px;min-width:0}
.xt-avatar{
  width:34px;height:34px;flex:none;border-radius:10px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;font-weight:800;font-size:13px;border:1px solid rgba(245,158,11,.25);
}
.xt-meta{min-width:0}
.xt-name{font-size:14.5px;font-weight:700;display:flex;align-items:center;gap:8px}
.xt-sub{font-size:12px;color:var(--text-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;border-radius:5px;padding:2.5px 7px;
}
.badge-official{background:var(--accent);color:var(--text-on-accent)}
.badge-certified{background:var(--good-soft);color:var(--good);border:1px solid rgba(34,197,94,.3)}
.badge-private{background:var(--bg-3);color:var(--text-dim);border:1px solid var(--line-strong)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:8px 13px;
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-size:13px;font-weight:600;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease);
}
.btn:hover{background:var(--bg-hover)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.btn-primary:hover{background:var(--accent-press);border-color:var(--accent-press)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--bg-2)}
.btn-sm{padding:6px 10px;font-size:12px}
.btn-block{width:100%}

.views{flex:1;min-height:0;position:relative}
.view{display:none;position:absolute;inset:0;flex-direction:column;min-height:0}
.view.is-active{display:flex}

/* ---------- chat ---------- */
.thread{flex:1;overflow-y:auto;padding:28px 20px 8px;scroll-behavior:smooth}
.msg,.hero{max-width:var(--read);margin-inline:auto}

.hero{padding:36px 0 8px;text-align:left}
.hero-mark{
  width:52px;height:52px;border-radius:16px;background:var(--accent-soft);color:var(--accent);
  display:grid;place-items:center;border:1px solid rgba(245,158,11,.25);margin-bottom:18px;
}
.hero h1{margin:0 0 8px;font-size:29px;line-height:1.2;letter-spacing:-.02em;font-weight:700}
.hero p{margin:0 0 20px;color:var(--text-dim);font-size:15.5px;max-width:38rem}
.hero-facts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.fact{
  display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--text-dim);
  background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;
}
.fact b{color:var(--text);font-weight:600}
.chips{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.chip{
  text-align:left;padding:13px 15px;background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-lg);font-size:13.5px;color:var(--text-dim);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.chip:hover{border-color:var(--line-strong);background:var(--bg-2);color:var(--text);transform:translateY(-1px)}
.chip b{display:block;color:var(--text);font-weight:600;margin-bottom:2px}

.msg{display:flex;gap:14px;padding:16px 0}
.msg-avatar{
  width:28px;height:28px;flex:none;border-radius:8px;display:grid;place-items:center;
  font-size:11px;font-weight:800;
}
.msg-user .msg-avatar{background:var(--bg-3);color:var(--text-dim)}
.msg-expert .msg-avatar{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(245,158,11,.25)}
.msg-body{flex:1;min-width:0}
.msg-who{font-size:12px;font-weight:700;color:var(--text-faint);margin-bottom:4px;letter-spacing:.02em}
/* El mensaje de quien pregunta sigue siendo texto plano y conserva sus saltos de
   linea. El del Expert ahora llega como HTML desde md(), asi que pre-wrap le
   agregaria una linea en blanco por cada salto del original: se apaga. */
.msg-text{word-wrap:break-word;font-size:15px;line-height:1.65}
.msg-user .msg-text{color:var(--text);white-space:pre-wrap}

/* Markdown renderado. Antes esto no existia y la respuesta se leia con los
   asteriscos literales: "**Hemorragia grave**". El titulo del procedimiento y los
   pasos numerados son la estructura del contenido, no decoracion. */
.msg-expert .msg-text > *:first-child{margin-top:0}
.msg-expert .msg-text > *:last-child{margin-bottom:0}
.msg-expert .msg-text p{margin:0 0 10px}
.md-h{font-size:16px;font-weight:700;color:var(--text);margin:16px 0 10px;letter-spacing:-.01em}
.msg-expert .msg-text ol,
.msg-expert .msg-text ul{margin:0 0 12px;padding-left:1.35em;display:flex;flex-direction:column;gap:10px}
.msg-expert .msg-text li{padding-left:2px}
.msg-expert .msg-text li::marker{color:var(--accent);font-weight:700}
.msg-expert .msg-text strong{color:var(--text);font-weight:650}
/* El detalle y la advertencia de cada paso: subordinados al paso, no otro paso. */
.md-detail{display:block;margin-top:3px;color:var(--text-dim);font-size:14px;line-height:1.55}
/* La advertencia de un paso ("Cuidado: soltar la presion puede reiniciar la
   hemorragia") no puede leerse igual que el detalle: es lo que evita empeorar la
   situacion. El color la separa sin gritar. */
.md-detail.is-aviso{color:var(--accent);font-weight:550}

/* El aviso legal que acompana a un procedimiento. Va al pie y en voz baja: es
   importante, pero no puede competir con los pasos que hay que seguir. */
.msg-aviso{
  margin:12px 0 0;padding:8px 11px;font-size:12px;line-height:1.5;color:var(--text-dim);
  background:var(--bg-1);border-left:2px solid var(--line-strong);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
}

.sources{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.sources-h{
  display:flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-faint);margin-bottom:7px;
}
/* La fuente es un boton: se abre para copiar la cita. Se ve igual que antes, pero
   ahora responde, y ese gesto es el que mide si la promesa del producto llego.
   Hereda tipografia y color porque un <button> no lo hace solo. */
.source{
  display:flex;gap:9px;align-items:flex-start;padding:8px 11px;background:var(--bg-1);
  border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:6px;font-size:12.5px;
  width:100%;text-align:left;font-family:inherit;color:inherit;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.source:hover{border-color:var(--line-strong);background:var(--bg-2)}
.source:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Un documento propio se distingue de una fuente oficial por el borde, antes de
   leer la etiqueta. Confundirlos romperia la promesa del producto. */
.source-tuyo{border-left:2px solid var(--good)}
.origen{
  display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border-radius:var(--r-pill);padding:1px 7px;margin-right:6px;vertical-align:1px;
}
.origen-oficial{background:var(--accent-soft);color:var(--accent)}
.origen-tuyo{background:var(--good-soft);color:var(--good)}

/* ---------- anadir conocimiento ---------- */
.modal-ancho{max-width:560px;width:min(560px,calc(100vw - 32px))}
.soltar{
  display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;
  padding:26px 18px;margin:14px 0 10px;border:1.5px dashed var(--line-strong);border-radius:var(--r-lg);
  background:var(--bg-1);transition:border-color var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.soltar:hover,.soltar.is-sobre{border-color:var(--accent);background:var(--accent-soft)}
.soltar b{font-size:14.5px}
.soltar span{font-size:12.5px;color:var(--text-dim)}
.soltar-icono{color:var(--accent)}
.soltar-nota{font-size:11.5px;color:var(--text-faint);margin-top:6px;line-height:1.5}
.subida-estado{min-height:20px;font-size:13px;margin-bottom:8px}
.subida-estado .procesando{color:var(--text-dim)}
.subida-estado .listo{color:var(--good);display:inline-flex;align-items:center;gap:5px}
.subida-estado .fallo{color:var(--accent)}
.rows-sm .row{padding:8px 10px}
.rows-sm .row-t{font-size:13px;display:inline-flex;align-items:center;gap:6px}
.row-mal{color:var(--text-dim)}
.source .ic{color:var(--accent);margin-top:1px}
.source-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.source-t{font-weight:600}
.source-c{color:var(--text-dim);font-family:var(--mono);font-size:11.5px;word-break:break-word}
/* Jurisdiccion, version y vigencia. Solo se dibuja lo que el Expert manda: una
   etiqueta con un guion adentro es ruido, no transparencia. */
.source-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.source-m{
  display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--text-faint);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 8px;
}
/* Una fuente que ya no rige tiene que verse distinto SIN leer la etiqueta: quien
   consulta una norma derogada y no lo nota toma una decision equivocada. */
.source-m.is-historico{color:var(--accent);background:var(--accent-soft);border-color:rgba(245,158,11,.3)}
.source-m.is-historico .ic{width:13px;height:13px}

/* ESTADO DE UN EXPERT, en la tarjeta y en el detalle. Reemplaza al "Examen 8/11"
   y al boton "Obtener" sobre algo que la puerta de calidad rechaza. */
.estado{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:650;
  border-radius:var(--r-pill);padding:3px 10px;border:1px solid transparent;white-space:nowrap;
}
.estado-listo{color:var(--good);background:var(--good-soft);border-color:rgba(34,197,94,.3)}
.estado-en-revision{color:var(--accent);background:var(--accent-soft);border-color:rgba(245,158,11,.3)}
.estado-proximamente{color:var(--text-dim);background:var(--bg-3);border-color:var(--line-strong)}
/* Cuando ocupa el lugar del boton, se alinea con el: no es un boton deshabilitado
   disfrazado, es la ausencia deliberada de una accion. */
.estado-cta{padding:7px 12px;font-size:12.5px}
.card-nota{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:var(--text-dim)}
.hero-cue{font-size:13px;color:var(--text-faint);margin:0 0 12px}
.detail-p{font-size:13px;color:var(--text-dim);margin:0 0 10px;line-height:1.55}

.route-tag{
  display:inline-flex;align-items:center;gap:5px;margin-top:10px;font-size:11px;
  color:var(--text-faint);background:var(--bg-1);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px 10px;font-weight:600;
}
.route-tag.is-tool{color:var(--good);border-color:rgba(34,197,94,.3);background:var(--good-soft)}
.route-tag.is-down{color:var(--accent);border-color:rgba(245,158,11,.3);background:var(--accent-soft)}
.route-tag.is-tuyo{color:var(--good);border-color:rgba(34,197,94,.3);background:var(--good-soft)}

.typing{display:flex;gap:4px;padding:6px 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--text-faint);animation:blink 1.2s var(--ease) infinite}
.typing i:nth-child(2){animation-delay:.18s}
.typing i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,60%,100%{opacity:.25}30%{opacity:1}}

.composer-wrap{padding:10px 20px 18px;background:linear-gradient(to top,var(--bg-0) 60%,transparent)}
.composer{
  max-width:var(--read);margin-inline:auto;display:flex;align-items:flex-end;gap:8px;
  background:var(--bg-1);border:1px solid var(--line-strong);border-radius:var(--r-xl);padding:8px 8px 8px 16px;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.composer:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.composer-input{
  flex:1;background:none;border:none;resize:none;padding:9px 0;max-height:200px;
  font-size:15px;line-height:1.5;outline:none;
}
.composer-input::placeholder{color:var(--text-faint)}
.send{
  width:36px;height:36px;flex:none;border-radius:var(--r-pill);background:var(--accent);color:var(--text-on-accent);
  display:grid;place-items:center;transition:background var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
}
.send:hover{background:var(--accent-press)}
.send[disabled]{opacity:.4;cursor:not-allowed}
.composer-note{
  max-width:var(--read);margin:8px auto 0;font-size:11.5px;color:var(--text-faint);text-align:center;
}

/* ---------- pages ---------- */
.page{flex:1;overflow-y:auto;padding:28px 24px 40px}
.page-inner{max-width:1080px;margin-inline:auto}
.page-head{margin-bottom:22px}
.page-head h2{margin:0 0 6px;font-size:24px;font-weight:700;letter-spacing:-.02em}
.page-head p{margin:0;color:var(--text-dim);font-size:14.5px;max-width:44rem}

.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:18px 0 20px}
.search{
  display:flex;align-items:center;gap:8px;flex:1;min-width:220px;background:var(--bg-1);
  border:1px solid var(--line-strong);border-radius:var(--r-md);padding:9px 12px;
}
.search .ic{color:var(--text-faint)}
.search input{flex:1;background:none;border:none;outline:none;font-size:14px}
.search input::placeholder{color:var(--text-faint)}
.seg{display:inline-flex;background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.seg button{
  padding:6px 14px;border-radius:var(--r-pill);font-size:12.5px;font-weight:600;color:var(--text-dim);
  transition:all var(--dur-fast) var(--ease);
}
.seg button.is-active{background:var(--accent);color:var(--text-on-accent)}

.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{
  display:flex;flex-direction:column;gap:11px;padding:17px;background:var(--bg-1);
  border:1px solid var(--line);border-radius:var(--r-lg);text-align:left;
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}
.card:hover{border-color:var(--line-strong);background:var(--bg-2);transform:translateY(-2px)}
.card-head{display:flex;align-items:flex-start;gap:11px}
.card-title{flex:1;min-width:0}
.card-title h3{margin:0 0 3px;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.card-creator{font-size:12px;color:var(--text-faint);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Los packs de la biblioteca declaran licencia y vigencia, que son frases, no
   etiquetas cortas. Sin esto la fila de datos empuja la tarjeta a lo alto. */
.card-stats .stat{max-width:100%}
.grid{align-items:start}
.card-tag{font-size:13.5px;color:var(--text-dim);line-height:1.5}
.card-stats{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:4px}
.stat{
  display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-dim);
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 9px;
}
.stat b{color:var(--text);font-weight:600}
.card-foot{display:flex;align-items:center;gap:8px;padding-top:11px;border-top:1px solid var(--line)}

.empty{
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;
  padding:48px 24px;background:var(--bg-1);border:1px dashed var(--line-strong);border-radius:var(--r-lg);
}
.empty .ic{width:26px;height:26px;color:var(--text-faint)}
.empty h3{margin:0;font-size:16px;font-weight:700}
.empty p{margin:0;color:var(--text-dim);font-size:14px;max-width:34rem}

.notice{
  display:flex;gap:11px;align-items:flex-start;padding:13px 15px;border-radius:var(--r-md);
  font-size:13.5px;line-height:1.55;margin-bottom:18px;
}
.notice .ic{flex:none;margin-top:1px}
.notice-warn{background:var(--accent-soft);border:1px solid rgba(245,158,11,.28);color:var(--text)}
.notice-warn .ic{color:var(--accent)}
.notice-good{background:var(--good-soft);border:1px solid rgba(34,197,94,.28)}
.notice-good .ic{color:var(--good)}
.notice b{font-weight:700}

.rows{display:flex;flex-direction:column;gap:9px}
.row{
  display:flex;align-items:center;gap:13px;padding:14px 16px;background:var(--bg-1);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.row-main{flex:1;min-width:0}
.row-t{font-size:14.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.row-s{font-size:12.5px;color:var(--text-faint);margin-top:2px}
.row-actions{display:flex;gap:7px;flex:none}

.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 18px;font-size:13.5px}
.kv dt{color:var(--text-faint)}
.kv dd{margin:0;font-weight:500}

/* ---------- detail drawer ---------- */
.detail{
  position:fixed;top:0;right:0;bottom:0;width:min(460px,100vw);z-index:60;
  background:var(--bg-1);border-left:1px solid var(--line-strong);box-shadow:var(--sh-3);
  display:flex;flex-direction:column;animation:slidein var(--dur) var(--ease);
}
@keyframes slidein{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
.detail-hd{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line)}
.detail-hd h3{flex:1;margin:0;font-size:16px;font-weight:700}
.detail-bd{flex:1;overflow-y:auto;padding:18px}
.detail-ft{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:9px}
.detail-sec{margin-bottom:22px}
.detail-sec h4{
  margin:0 0 9px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
}
.detail-sec p{margin:0;font-size:14px;color:var(--text-dim);line-height:1.6}
.list-tight{margin:0;padding-left:18px;font-size:13.5px;color:var(--text-dim);line-height:1.7}

.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:55;animation:fade var(--dur) var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- modal ---------- */
.modal-host{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:20px;background:rgba(0,0,0,.62)}
.modal{
  width:min(420px,100%);background:var(--bg-1);border:1px solid var(--line-strong);
  border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:26px;animation:pop var(--dur) var(--ease);
}
@keyframes pop{from{transform:scale(.97);opacity:0}to{transform:none;opacity:1}}
.modal h3{margin:0 0 7px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.modal p{margin:0 0 20px;color:var(--text-dim);font-size:14px}
.provider{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:12px;
  background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-size:14.5px;font-weight:600;margin-bottom:9px;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.provider:hover{background:var(--bg-hover);border-color:var(--accent)}
.provider svg{width:19px;height:19px;flex:none}
.modal-alt{
  display:block;width:100%;text-align:center;padding:11px;color:var(--text-dim);font-size:13.5px;
  border-radius:var(--r-md);transition:background var(--dur-fast) var(--ease);
}
.modal-alt:hover{background:var(--bg-2);color:var(--text)}
.field{
  width:100%;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:var(--r-md);
  padding:11px 13px;font-size:14.5px;outline:none;margin-bottom:12px;
}
.field:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- toasts ---------- */
.toasts{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px}
.toast{
  display:flex;align-items:center;gap:9px;padding:11px 16px;background:var(--bg-3);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);box-shadow:var(--sh-2);
  font-size:13.5px;animation:rise var(--dur) var(--ease);
}
@keyframes rise{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
.toast-good .ic{color:var(--good)}
.toast-bad .ic{color:var(--bad)}

/* ---------- stars ---------- */
.stars{display:flex;gap:3px}
.stars button{color:var(--text-faint);transition:color var(--dur-fast) var(--ease)}
.stars button.on{color:var(--accent)}
.stars button.on .ic{fill:var(--accent)}

/* ---------- responsive ---------- */
.side-toggle{display:none}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{
    position:fixed;inset:0 auto 0 0;width:var(--side-w);z-index:70;transform:translateX(-100%);
    transition:transform var(--dur) var(--ease);
  }
  .app.side-open .side{transform:none}
  .side-toggle{display:inline-flex}
  /* El nombre del Expert mas su insignia mas el subtitulo no entran en una barra
     de 390px: el nombre se partia en tres lineas y el subtitulo se salia del
     borde. En un telefono el nombre solo ya es el contexto que importa; el resto
     esta a un toque, en "Que sabe". */
  .topbar{padding:10px 14px;gap:8px}
  .xt-chip{flex:1;min-width:0}
  .xt-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
  .xt-name .badge,.xt-sub{display:none}
  .thread{padding:20px 16px 8px}
  .composer-wrap{padding:8px 14px 14px}
  .page{padding:22px 16px 32px}
  .detail{width:100vw}
  .hero h1{font-size:25px}

  /* El pie de la tarjeta lleva ahora dos elementos que pueden ser largos ("Ver
     detalle" y "En revision"): en 390px se montaban uno sobre otro. Se apilan y
     ocupan el ancho, que ademas da un area de toque decente. */
  .card-foot{flex-wrap:wrap;gap:8px}
  .card-foot .btn,.card-foot .estado-cta{flex:1 1 auto;justify-content:center}

  /* Las etiquetas de una fuente se parten en varias lineas antes que desbordar. */
  .source{padding:9px 10px}
  .source-meta{gap:5px}

  /* Los pasos numerados necesitan menos sangria en pantalla angosta, o el texto
     del detalle queda en una columna de tres palabras. */
  .msg-expert .msg-text ol,
  .msg-expert .msg-text ul{padding-left:1.15em}
  .md-detail{font-size:13.5px}

  /* Ninguna tabla ni bloque ancho puede empujar el ancho del cuerpo. */
  .page-inner,.thread{max-width:100%}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* Consola de revision: la fila crece para alojar la decision. */
.row-rev{align-items:flex-start;flex-wrap:wrap;gap:10px}
.rev-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.rev-acts .field-sm{padding:6px 9px;font-size:12.5px;min-width:15rem;flex:1 1 15rem}
@media (max-width:640px){.rev-acts{width:100%;margin-left:0}}