/* Kōdo directo. Tokens: https://branding.nuevauno.com/ui-tokens.json (Urbanist 400, radio 0, un acento). */
:root {
  --accent: #FE4A23;
  --accent-hover: #e53d18;
  --accent-soft: #fff1ec;
  --ink: #11183a;
  --muted: #6b7080;
  --faint: #9a9ca8;
  --bg: #f4f4f1;
  --surface: #ffffff;
  --border: #e8e6e0;
  --divider: #efede8;
  --online: #2f9e5b;
}

* { box-sizing: border-box; border-radius: 0; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Urbanist", system-ui, sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, b, strong, button, input, textarea { font-weight: 400; font-family: inherit; }
h1 { font-size: 40px; line-height: 1.15; margin: 8px 0 16px; }
h2 { font-size: 20px; margin: 0; }
[hidden] { display: none !important; }

.sys {
  font-family: "Ubuntu Mono", ui-monospace, monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  margin: 0;
}
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* El cursor naranja ya vive en el logo animado: nunca dos a la vez. "Trabajando" late en el cuadrado. */
@keyframes blink { 50% { opacity: 0; } }

/* Barra superior */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; }
.logo { height: 28px; width: auto; display: block; }
.brand-label { color: var(--muted); padding-left: 12px; border-left: 1px solid var(--border); }
.who { display: flex; align-items: center; gap: 16px; min-width: 0; }
.who-name { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.who form { margin: 0; }

/* Botones */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn:disabled { opacity: 0.5; cursor: default; }
.link {
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  color: var(--accent);
  font-size: 15px;
  cursor: pointer;
}

/* Vistas */
main { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: 40px 24px; display: flex; flex-direction: column; }
.view { display: flex; flex-direction: column; }
.entry { max-width: 640px; padding-top: 6vh; }
.entry-icon { width: 48px; height: 48px; margin-bottom: 16px; }
.lead { font-size: 20px; color: var(--muted); margin: 0 0 32px; }
.entry .btn { align-self: flex-start; }

.notice {
  margin: 0 0 16px;
  padding: 12px 16px;
  border: 1px solid var(--accent);
  border-left-width: 2px;
  background: var(--accent-soft);
}
.notice.soft { border-color: var(--border); border-left-color: var(--accent); background: var(--surface); color: var(--muted); }

/* Empresas */
.list-label { margin: 24px 0 8px; }
.companies {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
}
.companies button {
  width: 100%;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  background: var(--surface);
  border: 0;
  color: var(--ink);
  font-size: 17px;
  text-align: left;
  cursor: pointer;
}
.companies button:hover { background: var(--accent-soft); }
.companies .name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.companies .state { width: 8px; height: 8px; background: var(--online); flex: none; }
.companies .state.off { background: var(--faint); }
.companies .state.alert { background: var(--accent); }
.companies .meta { color: var(--muted); flex: none; }
.companies .go { color: var(--accent); flex: none; }
.empty { color: var(--muted); margin: 0; padding: 16px; background: var(--surface); border: 1px solid var(--border); }

/* Chat */
.chat { flex: 1; min-height: 0; }
.chat-head { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; }
.chat-title { min-width: 0; }
.chat-title h2 { overflow-wrap: anywhere; }
.messages { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.msg { max-width: 760px; padding: 12px 16px; border: 1px solid var(--border); background: var(--surface); }
.msg .sys { margin-bottom: 4px; color: var(--faint); }
.msg.kodo .sys { color: var(--accent); }
.msg.user { align-self: flex-end; background: var(--ink); border-color: var(--ink); color: #fff; }
.msg.user .sys { color: var(--faint); }
.msg .text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.msg-empty { color: var(--muted); }
.working { display: flex; align-items: center; gap: 8px; color: var(--muted); margin: 0 0 16px; }
.working .dot { width: 8px; height: 8px; background: var(--accent); animation: blink 1.05s steps(1, end) infinite; }

.composer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--border);
}
.composer textarea {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  max-height: 40vh;
  padding: 16px;
  border: 0;
  resize: vertical;
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  outline: none;
}
.composer textarea:focus-visible { box-shadow: inset 2px 0 0 var(--accent); }
.composer .btn { min-height: 56px; border: 0; }

@media (max-width: 767px) {
  .top { padding: 10px 16px; }
  .brand-label { display: none; }
  main { padding: 24px 16px; }
  h1 { font-size: 30px; }
  .lead { font-size: 17px; }
  .entry .btn { align-self: stretch; }
  .chat-head { gap: 12px; flex-wrap: wrap; }
  .msg { max-width: 100%; }
  .composer { flex-direction: column; }
  .composer .btn { width: 100%; }
}