/* ============================================================
   TOKENS DE DISEÑO — identidad de marca y temas claro/oscuro
   Para cambiar la identidad visual, edita solo este archivo.
   ============================================================ */

:root {
  /* --- Marca (ajustable a colores corporativos) --- */
  --brand-primary: #0b5e55;        /* verde petróleo */
  --brand-primary-strong: #094c45;
  --brand-primary-soft: #e6f2f0;
  --brand-accent: #d4a017;         /* dorado */

  /* --- Superficies --- */
  --bg-app: #f0f2f5;
  --bg-panel: #ffffff;
  --bg-panel-2: #f7f8fa;
  --bg-chat: #efe7dc;
  --bg-input: #f0f2f5;
  --bg-hover: #f5f6f6;
  --bg-active: #e9edef;

  /* --- Burbujas --- */
  --bubble-in: #ffffff;
  --bubble-out: #d9f4ef;
  --bubble-system: #fdf3d7;
  --bubble-system-text: #8a6d1d;

  /* --- Texto --- */
  --text-primary: #111b21;
  --text-secondary: #667781;
  --text-on-brand: #ffffff;
  --text-link: #0b6e8a;

  /* --- Bordes y sombras --- */
  --border: #e4e8eb;
  --border-strong: #d1d7db;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.14);
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.18);

  /* --- Geometría --- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 24px;

  /* --- Tipografía --- */
  --font-sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;

  /* --- Misceláneos --- */
  --doodle-opacity: 0.40;
  --highlight: #ffe873;
  --danger: #dc3545;
  --scrollbar-thumb: rgba(17, 27, 33, 0.25);

  /* Avatares (paleta determinística, usada por ui.js) */
  --avatar-sat: 45%;
  --avatar-light: 45%;
}

/* ---------- TEMA OSCURO ---------- */
html[data-bs-theme="dark"] {
  --brand-primary: #0e7a6e;
  --brand-primary-strong: #0b5e55;
  --brand-primary-soft: #11332f;

  --bg-app: #0c1317;
  --bg-panel: #111b21;
  --bg-panel-2: #15222a;
  --bg-chat: #0b141a;
  --bg-input: #202c33;
  --bg-hover: #1c272e;
  --bg-active: #2a3942;

  --bubble-in: #202c33;
  --bubble-out: #134e46;
  --bubble-system: #1d2a32;
  --bubble-system-text: #c3a44a;

  --text-primary: #e9edef;
  --text-secondary: #8696a0;
  --text-link: #53bdeb;

  --border: #222d34;
  --border-strong: #2f3b43;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-menu: 0 8px 24px rgba(0, 0, 0, 0.6);

  --doodle-opacity: 0.06;
  --highlight: #8a7a1d;
  --scrollbar-thumb: rgba(233, 237, 239, 0.22);

  --avatar-sat: 40%;
  --avatar-light: 38%;
}

/* ---------- BASE GLOBAL ---------- */
body {
  font-family: var(--font-sans);
  color: var(--text-primary);
}

::selection { background: var(--brand-primary); color: var(--text-on-brand); }

/* Scrollbars finas */
* { scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* Respeto a usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}