/* head.layout.css
   Branding DataToBe: fuente + header + botones/labels
*/

:root{
  --dtb-header-h: 56px;

  --dtb-blue: #0B1220;      /* header dark (como tu sitio) */
  --dtb-yellow: #F7B500;    /* amarillo acento */
  --dtb-ink: #0B1220;
  --dtb-muted: rgba(255,255,255,.85);
}

/* Fuente global */
html, body{
  font-family: "League Spartan", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
}

/* Header principal (chat) */
.dtb-header{
  background: var(--dtb-blue);
  font-size:16px;
  color: #fff;

  height: var(--dtb-header-h);
  display: flex;
  align-items: center;
}

/* Logo texto */
.dtb-logo{
  font-weight: 800;
  font-size: 18px;
  letter-spacing: .2px;
  line-height: 1;
  user-select: none;
}

/* Texto secundario en header */
.dtb-header-muted{
  color: var(--dtb-muted);
}

/* Botones del header (menu + reset) */
.dtb-header-btn{
  height: 34px;
  padding: 0 12px;
  border-radius: 10px;

  border: 1px solid rgba(255,255,255,.25);
  background: rgba(255,255,255,.08);
  color: #fff;

  transition: background .15s ease, border-color .15s ease, transform .05s ease;
}

.dtb-header-btn:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.35);
}

.dtb-header-btn:active{
  transform: scale(0.98);
}

/* Chip central (Agente) */
.dtb-agent-chip{
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 999px;

  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.20);
  font-weight: 700;
  font-size: 13px;
  white-space: nowrap;
}

/* Puntito amarillo */
.dtb-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--dtb-yellow);
  display: inline-block;
}