:root {
    --ground:    #F3F6F6;
    --surface:   #FFFFFF;
    --surface-2: #E9EFEF;
    --ink:       #131E1D;
    --muted:     #566765;
    --line:      #CBD8D7;
    --line-soft: #DFE8E7;
    --accent:    #1E4F58;
    --accent-2:  #2A6A75;
    --accent-soft:#D7E6E7;
    --ok:        #2F6647;
    --ok-soft:   #DFEDE4;
    --risk:      #8C2F39;
    --risk-soft: #F2DEE0;
    --shadow: 0 1px 2px rgba(19,30,29,.06), 0 10px 30px -18px rgba(19,30,29,.3);
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --ground: #0E1615; --surface: #16201F; --surface-2: #1E2A29;
      --ink: #E4ECEA; --muted: #93A5A3; --line: #2C3A39; --line-soft: #222E2D;
      --accent: #6FB6BF; --accent-2: #57A3AD; --accent-soft: #1B3739;
      --ok: #74B891; --ok-soft: #1C3125; --risk: #D98891; --risk-soft: #33201F;
      --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
    }
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body { margin: 0; background: var(--ground); color: var(--ink);
         font-family: var(--sans); font-size: 15.5px; line-height: 1.55; }

  /* ------- estructura ------- */
  #app { display: flex; flex-direction: column; height: 100dvh; }
  header {
    display: flex; align-items: center; gap: 14px; padding: 10px 18px;
    background: #FFFFFF !important; border-bottom: 1px solid #E2E8F0 !important; color: #0F172A !important; flex: none;
  }
  .marca { font-family: var(--serif); font-size: 1.12rem; letter-spacing: -.01em; color: #0F172A !important; }
  .marca b { color: #047857 !important; font-weight: 600; }
  .beta { font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
          text-transform: uppercase; color: #047857 !important; border: 1px solid #A7F3D0 !important;
          background: #ECFDF5 !important; border-radius: 4px; padding: 2px 6px; }
  header .sep { flex: 1; }
  .user-menu {
    display: inline-flex; align-items: center; gap: 8px;
    background: #F8FAFC; border: 1px solid #E2E8F0;
    border-radius: 8px; padding: 3px 6px 3px 10px;
  }
  .usuario-badge {
    font-family: var(--mono); font-size: 11.5px; color: #475569;
    max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .btn-salir {
    font-size: 12px; padding: 4px 8px; border-radius: 6px;
    border: 1px solid #CBD5E1; background: #FFFFFF; color: #475569;
    cursor: pointer; transition: all 0.15s ease;
  }
  .btn-salir:hover {
    background: #FEF2F2; border-color: #FECACA; color: #DC2626;
  }
  .btn {
    font: inherit; font-size: 13.5px; padding: 7px 14px; border-radius: 7px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink);
    cursor: pointer; white-space: nowrap;
  }
  .btn:hover { border-color: var(--muted); }
  .btn.primario { background: var(--accent); border-color: var(--accent); color: var(--ground); font-weight: 600; }
  .btn:focus-visible, textarea:focus-visible, .cite:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  main { flex: 1; display: flex; min-height: 0; }
  #colchat { flex: 1; display: flex; flex-direction: column; min-width: 0; }