:root{
	--bg:#212121;
	--surface:#2B2B2B;
	--surface-hover:#343434;
	--ink:#ECECEC;
	--muted:#93938D;
	--border:#3A3A38;
	--accent:#ECECEC;
	--accent-contrast:#1A1A19;
	--radius-lg:16px;
	--radius-md:12px;
	--radius-sm:8px;
	--sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
	background:var(--bg);
	color:var(--ink);
	font-family:var(--sans);
	line-height:1.6;
	-webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px;margin:0 auto;padding:2.75rem 1.25rem 8rem}

header{margin-bottom:2rem}
.eyebrow{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
h1{font-family:var(--sans);font-weight:700;font-size:1.6rem;margin:.4rem 0 .3rem;letter-spacing:-.02em;color:var(--ink)}
.sub{color:var(--muted);font-size:.92rem}

.label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.65rem}

/* Selector de asistente: control segmentado */
.tabs{
	display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:1.75rem;
	background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
	padding:.3rem;
}
.tab{
	font-family:var(--sans);font-size:.86rem;font-weight:500;
	background:transparent;border:0;
	color:var(--muted);padding:.5rem .85rem;border-radius:var(--radius-sm);
	cursor:pointer;transition:background .15s, color .15s;
}
.tab:hover{color:var(--ink);background:var(--surface-hover)}
.tab[aria-pressed="true"]{background:var(--bg);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06);font-weight:600}
.tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tabs .placeholder{color:var(--muted);font-size:.86rem;padding:.5rem .4rem}

/* Caja de consulta fija abajo, estilo ChatGPT */
.composer-dock{
	position:fixed;left:0;right:0;bottom:0;
	background:linear-gradient(to top, var(--bg) 55%, transparent);
	padding:1.5rem 1.25rem 1.75rem;
}
.composer{
	max-width:720px;margin:0 auto;
	background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
	padding:.75rem .75rem .75rem 1.1rem;
	display:flex;align-items:flex-end;gap:.6rem;
	box-shadow:0 4px 18px rgba(0,0,0,.28);
}
textarea{
	flex:1;min-width:0;border:0;resize:none;min-height:24px;max-height:160px;background:transparent;
	font-family:var(--sans);font-size:.96rem;color:var(--ink);line-height:1.5;padding:.4rem 0;
}
textarea:focus{outline:none}
textarea::placeholder{color:#B4B0A4}
button.send,button.clear,button.save{
	flex-shrink:0;width:34px;height:34px;border-radius:50%;border:0;
	cursor:pointer;transition:opacity .15s, transform .1s, background .15s;
	display:flex;align-items:center;justify-content:center;
}
button.send svg,button.clear svg,button.save svg{width:16px;height:16px}
button.send{background:var(--accent);color:var(--accent-contrast)}
button.send:hover:not(:disabled){opacity:.85}
button.send:active:not(:disabled){transform:scale(.94)}
button.send:disabled{opacity:.25;cursor:default}
button.clear,button.save{background:transparent;color:var(--muted)}
button.clear:hover:not(:disabled),button.save:hover:not(:disabled){background:var(--surface-hover);color:var(--ink)}
button.clear:active:not(:disabled),button.save:active:not(:disabled){transform:scale(.94)}
button.clear:disabled,button.save:disabled{opacity:.25;cursor:default}
button.send:focus-visible,button.clear:focus-visible,button.save:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hint{font-size:.72rem;color:var(--muted);text-align:center;margin-top:.6rem}

/* Hilo de consultas */
.thread{display:flex;flex-direction:column-reverse;gap:0}
.exchange{padding:1.6rem 0;border-top:1px solid var(--border)}
.exchange:first-child{border-top:0}

.q-row{display:flex;justify-content:flex-end;margin-bottom:1.1rem}
.q{
	background:var(--surface);border-radius:18px 18px 4px 18px;
	padding:.65rem 1rem;max-width:82%;
	font-family:var(--sans);font-size:.95rem;color:var(--ink);
}

.a-row{display:flex;gap:.7rem;align-items:flex-start}
.avatar{
	flex-shrink:0;width:26px;height:26px;border-radius:50%;
	background:var(--ink);color:#fff;font-size:.68rem;font-weight:700;
	display:flex;align-items:center;justify-content:center;margin-top:.15rem;
}
.a-col{flex:1;min-width:0}
.from{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.35rem}
.a{font-family:var(--sans);font-size:.96rem;color:var(--ink);white-space:pre-wrap}

/* Markdown renderizado */
.a.markdown{white-space:normal}
.a.markdown p{margin:.5rem 0}
.a.markdown p:first-child{margin-top:0}
.a.markdown p:last-child{margin-bottom:0}
.a.markdown h1,.a.markdown h2,.a.markdown h3,.a.markdown h4{font-weight:600;letter-spacing:-.01em;margin:1rem 0 .35rem;color:var(--ink)}
.a.markdown h1{font-size:1.2rem}
.a.markdown h2{font-size:1.05rem}
.a.markdown h3,.a.markdown h4{font-size:.95rem}
.a.markdown ul,.a.markdown ol{padding-left:1.4rem;margin:.4rem 0}
.a.markdown li{margin:.2rem 0}
.a.markdown code{font-family:"SFMono-Regular",Consolas,monospace;font-size:.85em;background:var(--bg);border:1px solid var(--border);border-radius:4px;padding:.1em .35em}
.a.markdown pre{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.75rem 1rem;overflow-x:auto;margin:.6rem 0}
.a.markdown pre code{background:none;border:none;padding:0;font-size:.88rem}
.a.markdown blockquote{border-left:3px solid var(--border);margin:.5rem 0;padding:.2rem .75rem;color:var(--muted)}
.a.markdown strong{font-weight:600;color:var(--ink)}
.a.markdown em{font-style:italic}
.a.markdown hr{border:none;border-top:1px solid var(--border);margin:.75rem 0}
.a.markdown a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.a.markdown table{border-collapse:collapse;width:100%;margin:.6rem 0;font-size:.9rem}
.a.markdown th,.a.markdown td{border:1px solid var(--border);padding:.35rem .6rem;text-align:left}
.a.markdown th{background:var(--surface);font-weight:600}

/* Citas / fuentes */
.cites{margin-top:1.1rem;display:flex;flex-direction:column;gap:.5rem}
.cites-title{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.1rem}
.cite{display:block;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .75rem;color:inherit;text-decoration:none}
a.cite{cursor:pointer}
a.cite:hover{border-color:var(--ink)}
.cite-name{font-weight:600;font-size:.88rem;color:var(--ink)}
.cite-meta{margin-top:.4rem;display:flex;flex-wrap:wrap;gap:.35rem}
.chip{font-size:.72rem;background:var(--bg);border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:.15rem .55rem}
.chip b{font-weight:600;color:var(--ink)}
.chip a{color:inherit;text-decoration:none}
.cite-empty{font-size:.76rem;color:var(--muted);font-style:italic}

.status{font-size:.9rem;color:var(--muted);padding:.1rem 0;display:flex;align-items:center;gap:.5rem}
.dot{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.25}50%{opacity:1}}
.error{color:#E5847A;font-size:.88rem;padding:.4rem 0;font-weight:500}
.success{color:#7AE5A0;font-size:.88rem;padding:.4rem 0;font-weight:500}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.topdiv {
	display: flex;
	justify-content: space-around;
	align-items: center; /* Opcional: alinea los textos verticalmente al centro */
	width: 100%;        /* Asegúrate de que el div tenga un ancho definido */
}

.title {
	font-size:0.9rem;
	letter-spacing:.08em;
	text-transform:uppercase;
	color:var(--muted);
	font-weight:600
}

.logout{margin:0}
.logout button{
	font-family:var(--sans);font-size:.8rem;font-weight:600;letter-spacing:.04em;
	background:transparent;color:var(--muted);
	border:1px solid var(--border);border-radius:var(--radius-sm);
	padding:.35rem .75rem;cursor:pointer;transition:background .15s, color .15s;
}
.logout button:hover{background:var(--surface-hover);color:var(--ink)}
.logout button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.empty {text-align: center;margin-top:10%;}
.empty a {color: #ff0000;text-decoration: none;}