:root { color-scheme: dark; --acento:#d97757; --fondo:#171412; --panel:#201c19; --borde:#2c2723; --texto:#ece7e2; --tenue:#a49b92; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin:0; background:var(--fondo); color:var(--texto); font-family:"Segoe UI",system-ui,sans-serif; }
header { padding:14px 16px; border-bottom:1px solid var(--borde); display:flex; align-items:center; gap:10px; }
header h1 { font-size:17px; margin:0; flex:1; }
.yo { display:flex; align-items:center; gap:8px; font-size:14px; }
.avatar { width:34px; height:34px; border-radius:50%; background:var(--panel); display:grid; place-items:center; font-size:19px; }
nav { display:flex; border-bottom:1px solid var(--borde); }
nav button { flex:1; background:none; border:none; color:var(--tenue); padding:13px 6px; font-size:14px; font-weight:600; }
nav button.activo { color:var(--acento); box-shadow: inset 0 -2px 0 var(--acento); }
main { padding:14px 14px 90px; }
.oculto { display:none !important; }
.tarjeta { background:var(--panel); border:1px solid var(--borde); border-radius:14px; padding:14px; margin-bottom:12px; }
input, textarea, select { width:100%; background:#15110f; border:1px solid var(--borde); color:var(--texto);
  border-radius:10px; padding:12px; font-size:15px; font-family:inherit; margin-bottom:10px; }
textarea { min-height:90px; resize:vertical; }
.principal { display:block; text-align:center; cursor:pointer; width:100%; background:var(--acento);
  color:#1a1512; border:none; border-radius:10px; padding:14px; font-size:15px; font-weight:700; }
.principal:active { opacity:.85; }
button.sec { background:none; border:1px solid var(--borde); color:var(--texto); border-radius:10px; padding:10px 14px; font-size:14px; }
.fila { display:flex; gap:8px; flex-wrap:wrap; }
.avatares { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin-bottom:12px; }
.avatares button { font-size:22px; padding:8px 0; background:#15110f; border:2px solid transparent; border-radius:10px; }
.avatares button.sel { border-color:var(--acento); }
.msg { max-width:88%; padding:11px 13px; border-radius:14px; margin-bottom:10px; font-size:15px; line-height:1.45; white-space:pre-wrap; }
.msg.yo { margin-left:auto; background:var(--acento); color:#1a1512; border-bottom-right-radius:4px; }
.msg.ia { background:var(--panel); border:1px solid var(--borde); border-bottom-left-radius:4px; }
.tenue { color:var(--tenue); font-size:13px; }
.error { color:#e07a6a; font-size:14px; margin-bottom:10px; }
.trabajo h3 { margin:0 0 4px; font-size:15px; }
.chip { display:inline-block; font-size:11px; background:#2b2521; color:var(--tenue); padding:3px 8px; border-radius:999px; margin-right:6px; }
.enviar { position:fixed; left:0; right:0; bottom:0; padding:10px 14px 16px; background:linear-gradient(transparent, var(--fondo) 28%); display:flex; gap:8px; }
.enviar input { margin:0; flex:1; }
.enviar button { background:var(--acento); color:#1a1512; border:none; border-radius:10px; padding:0 18px; font-weight:700; }