/* ════════════════════════════════════════════════════════════════════════════
 *  GOLDEN CHAT — golden-theme.css   (tema "Dark Luxury" compartido)
 *
 *  Se carga en TODAS las pantallas después del <style> propio de cada una.
 *  Sólo actúa con <html data-theme="golden"> (tema por defecto). Los temas
 *  Claro / Oscuro de cada pantalla siguen funcionando sin cambios.
 *
 *  Especificidad: los tokens van en `html[data-theme="golden"]:root` y los
 *  componentes con prefijo `html[data-theme="golden"]`, así ganan tanto a los
 *  estilos inline de cada página como a los que inyecta JS en tiempo de
 *  ejecución, sin usar !important salvo donde el original también lo hace.
 *
 *  Sólo estilos: no cambia HTML, IDs, clases ni comportamiento.
 * ════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Montserrat:wght@600;700;800&display=swap');

/* ── 1. Paleta y tokens ───────────────────────────────────────────────────── */
html[data-theme="golden"]:root {
  /* Oro metálico */
  --gold-1: #bf953f;
  --gold-2: #fcf6ba;
  --gold-3: #b38728;
  --gold-4: #fbf5b7;
  --gold-5: #aa771c;
  --gold: #d4af37;
  --gold-soft: #e6be5a;
  --gold-gradient: linear-gradient(135deg, var(--gold-1) 0%, var(--gold-2) 28%, var(--gold-3) 52%, var(--gold-4) 76%, var(--gold-5) 100%);
  --gold-gradient-hover: linear-gradient(135deg, #d0a64c 0%, #fffbd6 28%, #c99a33 52%, #fffad0 76%, #c08a26 100%);
  --gold-text: linear-gradient(180deg, #fff3c4 0%, #f2cf6b 45%, #b38728 100%);
  --gold-line: rgba(212, 175, 55, .30);
  --gold-line-strong: rgba(212, 175, 55, .55);
  --gold-glow: 0 0 0 1px rgba(212,175,55,.35), 0 0 18px rgba(212,175,55,.18);

  /* Obsidiana / carbón */
  --obsidian-0: #08080a;
  --obsidian-1: #0b0b0c;
  --obsidian-2: #121214;
  --charcoal: #151518;
  --charcoal-2: #1c1c20;
  --charcoal-3: #242429;
  --glass: rgba(21, 21, 24, .78);
  --glass-strong: rgba(18, 18, 21, .90);

  /* Tokens que consumen las pantallas existentes (mismos nombres) */
  --bg: var(--obsidian-1);
  --surface: var(--charcoal);
  --surface-2: var(--charcoal-2);
  --surface-3: var(--charcoal-3);
  --border: var(--gold-line);
  --text: #f5f1e6;
  --muted: #a0a0a0;
  --text-muted: #a0a0a0;
  --accent: var(--gold-soft);
  --accent-dim: var(--gold-3);
  --green: #3fbf7f;
  --amber: #e6be5a;
  --red: #e0576a;
  --blue: #7fa7d9;
  --violet: #c9a4e8;
  --bubble-op: #13151a;          /* operador (derecha) — carbón con borde dorado sutil */
  --bubble-op-t: #f5f1e6;
  --bubble-cl: #1d1d21;          /* cliente (izquierda) — carbón simple */
  --bubble-cl-t: #ece8dd;
  --bubble-out: linear-gradient(160deg, #17181d, #101114);
  --bubble-out-text: #f5f1e6;
  --bubble-in: rgba(30, 30, 34, .94);
  --bubble-in-text: #ece8dd;
  --input-bg: rgba(14, 14, 16, .92);
  --demo-bg: #1f1a0c; --demo-bd: #8a6d1f; --demo-txt: #e6be5a;
  --demo-badge-bg: #1f1a0c; --demo-badge-border: #8a6d1f; --demo-badge-text: #e6be5a;
  --shadow: 0 6px 22px rgba(0, 0, 0, .55);
  --theme-glow: rgba(212, 175, 55, .16);
  --theme-soft: rgba(212, 175, 55, .07);

  /* Tipografía */
  --font: "Inter", "Montserrat", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Montserrat", "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Textura: facetas geométricas muy sutiles (SVG inline, sin red) */
  --facets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23d4af37' stroke-opacity='0.045' stroke-width='1'%3E%3Cpath d='M0 52 30 0h60l30 52-30 52H30z'/%3E%3Cpath d='M30 0 60 52 30 104M90 0 60 52l30 52M0 52h120'/%3E%3C/g%3E%3C/svg%3E");
  --obsidian-bg:
    var(--facets),
    radial-gradient(1200px 700px at 50% -15%, rgba(212,175,55,.07), transparent 60%),
    radial-gradient(900px 700px at 100% 110%, #1a1a1e 0%, transparent 65%),
    radial-gradient(800px 600px at -10% 100%, #141417 0%, transparent 60%),
    linear-gradient(180deg, #0d0d0f 0%, #0b0b0c 100%);

  color-scheme: dark;
}

/* ── 2. Base: fondo obsidiana, tipografía, scrollbars ─────────────────────── */
html[data-theme="golden"] body {
  background: var(--obsidian-bg);
  background-attachment: fixed;
  font-family: var(--font);
  color: var(--text);
}
html[data-theme="golden"] ::selection { background: rgba(212,175,55,.35); color: #fff; }
html[data-theme="golden"] * { scrollbar-color: rgba(212,175,55,.28) transparent; }
html[data-theme="golden"] ::-webkit-scrollbar-thumb { background: rgba(212,175,55,.22); border-radius: 8px; }
html[data-theme="golden"] ::-webkit-scrollbar-thumb:hover { background: rgba(212,175,55,.40); }
html[data-theme="golden"] button:focus-visible,
html[data-theme="golden"] input:focus-visible,
html[data-theme="golden"] textarea:focus-visible,
html[data-theme="golden"] a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Texto dorado metálico para marcas y títulos destacados */
html[data-theme="golden"] .gold-text,
html[data-theme="golden"] .op-brand span,
html[data-theme="golden"] .brand-logo span,
html[data-theme="golden"] .op-login-brand span,
html[data-theme="golden"] .login-brand span,
html[data-theme="golden"] .brand span,
html[data-theme="golden"] h1 span,
html[data-theme="golden"] .login-logo span,
html[data-theme="golden"] .betx-splash-word span,
html[data-theme="golden"] .mark {
  background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
html[data-theme="golden"] .op-brand,
html[data-theme="golden"] .brand-logo,
html[data-theme="golden"] .op-login-brand,
html[data-theme="golden"] .login-brand,
html[data-theme="golden"] .brand,
html[data-theme="golden"] h1,
html[data-theme="golden"] .login-logo,
html[data-theme="golden"] .betx-splash-word {
  font-family: var(--font-display);
  letter-spacing: .06em;
  text-shadow: none;
}

/* ── 3. Componentes reutilizables (todas las pantallas) ───────────────────── */
/* Botón principal: gradiente oro brillante, texto negro en negrita, radio 6px */
html[data-theme="golden"] .btn-gold,
html[data-theme="golden"] .send-btn,
html[data-theme="golden"] .op-login-btn,
html[data-theme="golden"] .login-btn,
html[data-theme="golden"] .btn-primary,
html[data-theme="golden"] .btn-confirm:not(.danger),
html[data-theme="golden"] .cp-pay-btn,
html[data-theme="golden"] .notes-save-btn,
html[data-theme="golden"] .fortu-box button.primary {
  background: var(--gold-gradient);
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: #111 !important;
  font-weight: 700;
  border: 1px solid rgba(255, 236, 170, .55);
  border-radius: 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
  box-shadow: 0 2px 10px rgba(212,175,55,.22), inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(120,80,10,.35);
  transition: background-position .35s ease, box-shadow .2s ease, filter .2s ease, transform .12s ease;
}
html[data-theme="golden"] .btn-gold:hover:not(:disabled),
html[data-theme="golden"] .send-btn:not(:disabled):hover,
html[data-theme="golden"] .op-login-btn:not(:disabled):hover,
html[data-theme="golden"] .login-btn:not(:disabled):hover,
html[data-theme="golden"] .btn-primary:not(:disabled):hover,
html[data-theme="golden"] .btn-confirm:not(.danger):not(:disabled):hover,
html[data-theme="golden"] .cp-pay-btn:hover,
html[data-theme="golden"] .notes-save-btn:hover,
html[data-theme="golden"] .fortu-box button.primary:hover {
  background-position: 100% 50%;
  filter: brightness(1.08) saturate(1.05);
  box-shadow: 0 4px 20px rgba(212,175,55,.40), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(120,80,10,.35);
}
html[data-theme="golden"] .btn-gold:active,
html[data-theme="golden"] .send-btn:active,
html[data-theme="golden"] .cp-pay-btn:active,
html[data-theme="golden"] .fortu-box button.primary:active { transform: translateY(1px); }
html[data-theme="golden"] .send-btn:disabled,
html[data-theme="golden"] .op-login-btn:disabled,
html[data-theme="golden"] .login-btn:disabled,
html[data-theme="golden"] .btn-confirm:disabled { filter: grayscale(.55) brightness(.7); box-shadow: none; }
/* El botón de enviar es circular en las pantallas de chat */
html[data-theme="golden"] .send-btn { border-radius: 50%; }

/* Botón secundario: transparente, borde dorado sólido, texto dorado */
html[data-theme="golden"] .btn-gold-outline,
html[data-theme="golden"] .btn-cancel,
html[data-theme="golden"] .btn-ghost,
html[data-theme="golden"] .fortu-box button:not(.primary),
html[data-theme="golden"] .action-btn,
html[data-theme="golden"] .lnk {
  background: transparent;
  border: 1px solid var(--gold-line-strong);
  color: var(--gold-soft);
  border-radius: 6px;
  transition: background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
html[data-theme="golden"] .btn-gold-outline:hover,
html[data-theme="golden"] .btn-cancel:hover,
html[data-theme="golden"] .btn-ghost:hover,
html[data-theme="golden"] .fortu-box button:not(.primary):hover,
html[data-theme="golden"] .action-btn:hover,
html[data-theme="golden"] .lnk:hover {
  background: rgba(212,175,55,.08);
  border-color: var(--gold);
  color: #fff3c4;
  box-shadow: 0 0 14px rgba(212,175,55,.18);
}
html[data-theme="golden"] .action-btn.danger,
html[data-theme="golden"] .btn-confirm.danger { border-color: rgba(224,87,106,.6); color: #ffd7dc; background: rgba(224,87,106,.12); }

/* Inputs: carbón con contorno dorado fino */
html[data-theme="golden"] input[type="text"],
html[data-theme="golden"] input[type="email"],
html[data-theme="golden"] input[type="password"],
html[data-theme="golden"] input[type="tel"],
html[data-theme="golden"] input[type="search"],
html[data-theme="golden"] input[type="number"],
html[data-theme="golden"] textarea,
html[data-theme="golden"] select {
  border-color: var(--gold-line);
}
html[data-theme="golden"] input:focus,
html[data-theme="golden"] textarea:focus,
html[data-theme="golden"] select:focus { border-color: var(--gold) !important; box-shadow: 0 0 0 3px rgba(212,175,55,.12); outline: none; }

/* Tarjetas / modales: glassmorphism sutil + filete dorado */
html[data-theme="golden"] .modal,
html[data-theme="golden"] .modal-card,
html[data-theme="golden"] .login-card,
html[data-theme="golden"] .op-login-card,
html[data-theme="golden"] .card,
html[data-theme="golden"] a.card,
html[data-theme="golden"] .pc-card {
  background: linear-gradient(180deg, rgba(28,28,32,.88), rgba(18,18,21,.92));
  border: 1px solid var(--gold-line);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-theme="golden"] .modal-title,
html[data-theme="golden"] .card-h .t { font-family: var(--font-display); color: var(--gold-soft); letter-spacing: .03em; }
html[data-theme="golden"] .modal-overlay { background: rgba(4,4,5,.72); }
html[data-theme="golden"] .toast { background: var(--glass-strong); border: 1px solid var(--gold-line-strong); color: var(--text); box-shadow: 0 10px 30px rgba(0,0,0,.6); }

/* ── 4. PANEL OPERADOR — 3 columnas 25 / 50 / 25 ─────────────────────────── */
html[data-theme="golden"] #screenMain,
html[data-theme="golden"] .screen { background: transparent; }
html[data-theme="golden"] .screen.active { background: var(--obsidian-bg); }

html[data-theme="golden"] .op-header {
  background: linear-gradient(180deg, rgba(20,20,23,.92), rgba(12,12,14,.92));
  border-bottom: 1px solid var(--gold-line);
  box-shadow: 0 1px 0 rgba(212,175,55,.08), 0 8px 24px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-theme="golden"] .op-brand { font-size: 16px; font-weight: 800; text-transform: uppercase; }
html[data-theme="golden"] .op-brand::before { border-radius: 50%; box-shadow: 0 0 0 1px var(--gold-line-strong), 0 0 12px rgba(212,175,55,.25); }
html[data-theme="golden"] .op-context { border-color: var(--gold-line-strong); color: var(--gold-soft); }
html[data-theme="golden"] .stat-chip {
  background: rgba(20,20,23,.85);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
}
html[data-theme="golden"] .stat-chip.s-wait { border-color: rgba(230,190,90,.65); box-shadow: inset 0 0 0 1px rgba(230,190,90,.15); }
html[data-theme="golden"] .icon-btn:hover { background: rgba(212,175,55,.10); }

@media (min-width: 901px) {
  html[data-theme="golden"]:root { --sidebar-w: 25%; --panel-w: 25%; }
  html[data-theme="golden"] .sidebar { min-width: 260px; max-width: 460px; }
  html[data-theme="golden"] .client-panel { min-width: 260px; max-width: 460px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  /* Panel derecho oculto (comportamiento original): lista ~1/3, chat ~2/3 */
  html[data-theme="golden"]:root { --sidebar-w: 34%; }
  html[data-theme="golden"] .sidebar { min-width: 240px; }
}

html[data-theme="golden"] .sidebar,
html[data-theme="golden"] .client-panel {
  background: var(--glass);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
html[data-theme="golden"] .sidebar { border-right: 1px solid var(--gold-line); }
html[data-theme="golden"] .client-panel { border-left: 1px solid var(--gold-line); }
@media (max-width: 640px) {
  html[data-theme="golden"] .sidebar { background: var(--glass-strong); }
}

/* Columna izquierda */
html[data-theme="golden"] .search-input {
  background: rgba(10,10,12,.75);
  border: 1px solid var(--gold-line-strong);
  border-radius: 10px;
}
html[data-theme="golden"] .search-icon { color: var(--gold-soft); }
html[data-theme="golden"] .ftab { border-color: var(--gold-line); color: var(--muted); }
html[data-theme="golden"] .ftab:hover { color: var(--gold-soft); border-color: var(--gold-line-strong); }
html[data-theme="golden"] .ftab.active {
  background: var(--gold-gradient); color: #111; font-weight: 700; border-color: rgba(255,236,170,.6);
  box-shadow: 0 2px 10px rgba(212,175,55,.25);
}
html[data-theme="golden"] .cl-item { border-bottom: 1px solid rgba(212,175,55,.08); }
html[data-theme="golden"] .cl-item:hover { background: rgba(212,175,55,.05); }
html[data-theme="golden"] .cl-item.active {
  background: linear-gradient(90deg, rgba(212,175,55,.14), rgba(212,175,55,.03));
  box-shadow: inset 3px 0 0 var(--gold);
}
html[data-theme="golden"] .cl-avatar {
  background: radial-gradient(circle at 30% 25%, #2a2a30, #151518);
  color: var(--gold-soft);
  box-shadow: 0 0 0 1px rgba(212,175,55,.22);
}
html[data-theme="golden"] .cl-item.active .cl-avatar { box-shadow: 0 0 0 2px var(--gold), 0 0 14px rgba(212,175,55,.35); }
html[data-theme="golden"] .cl-name { color: var(--text); font-weight: 600; }
html[data-theme="golden"] .cl-badge { background: var(--gold-gradient); color: #111; font-weight: 800; }

/* Columna central */
html[data-theme="golden"] .conv-panel { background: transparent; }
html[data-theme="golden"] .conv-header {
  background: linear-gradient(180deg, rgba(20,20,23,.88), rgba(14,14,16,.82));
  border-bottom: 1px solid var(--gold-line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-theme="golden"] .conv-avatar { box-shadow: 0 0 0 1.5px var(--gold), 0 0 16px rgba(212,175,55,.28); }
html[data-theme="golden"] .conv-client-name { font-weight: 700; }
html[data-theme="golden"] .messages-area { background: transparent; }
html[data-theme="golden"] .day-sep span,
html[data-theme="golden"] .date-sep { background: rgba(20,20,23,.85); border: 1px solid var(--gold-line); color: var(--gold-soft); }
html[data-theme="golden"] .op .bubble {
  background: var(--bubble-op);
  color: var(--bubble-op-t);
  border: 1px solid rgba(212,175,55,.40);
  box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
html[data-theme="golden"] .cl .bubble {
  background: var(--bubble-cl);
  color: var(--bubble-cl-t);
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.30);
}
html[data-theme="golden"] .gc-staff-tag { color: var(--green); }
html[data-theme="golden"] .conv-input-bar {
  background: linear-gradient(180deg, rgba(16,16,18,.86), rgba(12,12,14,.94));
  border-top: 1px solid var(--gold-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-theme="golden"] .input-wrap { background: rgba(8,8,10,.8); border: 1px solid var(--gold-line); border-radius: 22px; }
html[data-theme="golden"] .input-wrap:focus-within { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(212,175,55,.10); }
html[data-theme="golden"] .attach-btn { color: var(--gold-soft); border: 1px solid var(--gold-line); background: rgba(20,20,23,.85); }
html[data-theme="golden"] .attach-btn:hover { border-color: var(--gold); background: rgba(212,175,55,.08); }
html[data-theme="golden"] .conv-input-bar .send-btn { width: auto; min-width: 44px; height: 40px; padding: 0 18px; border-radius: 22px; font-size: 16px; }
html[data-theme="golden"] .scroll-down-btn { background: var(--gold-gradient); color: #111; border: none; }
html[data-theme="golden"] .ops-menu,
html[data-theme="golden"] .cl-ctx-menu,
html[data-theme="golden"] .a11y-menu {
  background: var(--glass-strong); border: 1px solid var(--gold-line-strong);
  box-shadow: 0 16px 40px rgba(0,0,0,.6); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* Columna derecha: tarjetas con títulos dorados */
html[data-theme="golden"] .cp-section { border-bottom: 1px solid var(--gold-line); }
html[data-theme="golden"] .cp-title,
html[data-theme="golden"] .fortu-box .fortu-title {
  color: transparent;
  background: var(--gold-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: var(--font-display);
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
}
html[data-theme="golden"] .cp-avatar { box-shadow: 0 0 0 1.5px var(--gold), 0 0 14px rgba(212,175,55,.25); color: var(--gold-soft); }
html[data-theme="golden"] .cp-field-label { color: var(--muted); }
html[data-theme="golden"] .cp-field-val { color: var(--text); font-weight: 600; }
html[data-theme="golden"] .cp-acct {
  background: linear-gradient(180deg, rgba(30,30,34,.85), rgba(20,20,23,.85));
  border: 1px solid var(--gold-line);
  border-radius: 10px;
}
html[data-theme="golden"] .cp-acct-bank { color: var(--gold-soft); }
html[data-theme="golden"] .cp-pay { gap: 8px; }
html[data-theme="golden"] .cp-pay-btn { padding: 10px 12px; font-size: 13.5px; }
html[data-theme="golden"] .fortu-box .acc-sub { color: var(--gold-soft); opacity: .85; }
html[data-theme="golden"] .fortu-box .fortu-actions button { padding: 8px 8px; border-radius: 6px; font-size: 12px; }
html[data-theme="golden"] .tag-pill { border-color: var(--gold-line-strong); }
html[data-theme="golden"] .notes-textarea { background: rgba(8,8,10,.7); border: 1px solid var(--gold-line); }

/* Login / selector de PC del operador */
html[data-theme="golden"] .op-login-input,
html[data-theme="golden"] .login-input { background: rgba(8,8,10,.75); border: 1px solid var(--gold-line); }
html[data-theme="golden"] .pc-card:hover { border-color: var(--gold); box-shadow: var(--gold-glow); }
html[data-theme="golden"] .pc-card .pc-id { color: var(--gold-soft); }
html[data-theme="golden"] .op-login-brand::before,
html[data-theme="golden"] .brand-logo::before { width: 120px; height: 120px; border-radius: 50%; box-shadow: 0 0 0 1px var(--gold-line-strong), 0 10px 40px rgba(212,175,55,.18); background-size: cover; }

/* ── 5. CLIENTE (móvil/PWA) ───────────────────────────────────────────────── */
html[data-theme="golden"]:root { --theme-glow: rgba(212,175,55,.16); --theme-soft: rgba(212,175,55,.07); }
html[data-theme="golden"] #screenChat {
  border-color: var(--gold-line);
  box-shadow: 0 12px 45px rgba(0,0,0,.55), 0 0 26px rgba(212,175,55,.08);
}
html[data-theme="golden"] #screenChat .chat-header,
html[data-theme="golden"] #screenChat .stories-bar,
html[data-theme="golden"] #screenChat .chat-actions-bar,
html[data-theme="golden"] #screenChat .chat-input-bar {
  background: linear-gradient(180deg, rgba(24,24,28,.90), rgba(14,14,16,.92));
  border-color: var(--gold-line);
}
html[data-theme="golden"] #screenChat .chat-name {
  font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em;
  background: var(--gold-text); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; text-shadow: none;
}
html[data-theme="golden"] #chatAvatar { box-shadow: 0 0 0 1.5px var(--gold), 0 0 16px rgba(212,175,55,.30); }
html[data-theme="golden"] #screenChat .messages-area { background: var(--facets), radial-gradient(650px 500px at 95% 75%, rgba(212,175,55,.05), transparent 68%), transparent; }
html[data-theme="golden"] #screenChat .out .bubble {
  background: var(--bubble-out);
  color: var(--bubble-out-text);
  border: 1px solid rgba(212,175,55,.42);
  box-shadow: 0 5px 16px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.04);
}
html[data-theme="golden"] #screenChat .in .bubble {
  background: var(--bubble-in);
  color: var(--bubble-in-text);
  border: 1px solid rgba(255,255,255,.05);
  box-shadow: 0 4px 12px rgba(0,0,0,.30);
}
html[data-theme="golden"] #screenChat .chat-actions-bar button,
html[data-theme="golden"] #screenChat .chat-actions-bar .action-btn,
html[data-theme="golden"] #screenChat .chat-actions-bar [role="button"] {
  border: 1px solid var(--gold-line-strong);
  background: rgba(212,175,55,.06);
  color: var(--gold-soft);
  border-radius: 999px;
}
html[data-theme="golden"] #screenChat .chat-actions-bar button:hover { background: rgba(212,175,55,.12); border-color: var(--gold); }
html[data-theme="golden"] #screenChat .text-input-wrap { background: rgba(8,8,10,.82); border: 1px solid var(--gold-line); }
html[data-theme="golden"] #screenChat .text-input-wrap:focus-within { border-color: var(--gold); }
html[data-theme="golden"] #screenChat .attach-btn { background: rgba(20,20,23,.9); color: var(--gold-soft); border: 1px solid var(--gold-line-strong); }
html[data-theme="golden"] #screenChat .send-btn { color: #111; border: 1px solid rgba(255,236,170,.6); }
html[data-theme="golden"] #screenChat .story-ring { background: var(--gold-gradient); box-shadow: 0 0 14px rgba(212,175,55,.30); }
html[data-theme="golden"] #screenChat .msg-reaction-btn { background: rgba(20,20,23,.85); border-color: var(--gold-line); color: var(--gold-soft); }
html[data-theme="golden"] #screenChat .attach-menu,
html[data-theme="golden"] #screenChat .modal-card,
html[data-theme="golden"] #screenChat .sheet,
html[data-theme="golden"] #screenChat .popover { background: var(--glass-strong); border-color: var(--gold-line-strong); }
/* Login por SMS del cliente */
html[data-theme="golden"] .login-logo::before { border-radius: 50%; width: 132px; height: 132px; box-shadow: 0 0 0 1px var(--gold-line-strong), 0 12px 44px rgba(212,175,55,.20); background-size: cover; }

/* ── 6. Pantallas de gestión (PC Cuentas · Admin · Publicidad · Staff) ────── */
html[data-theme="golden"] .topbar,
html[data-theme="golden"] .top {
  background: linear-gradient(180deg, rgba(20,20,23,.94), rgba(12,12,14,.94));
  border-bottom: 1px solid var(--gold-line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
html[data-theme="golden"] .topbar .logo { border-radius: 50%; box-shadow: 0 0 0 1px var(--gold-line-strong); }
html[data-theme="golden"] .tab-btn.on,
html[data-theme="golden"] .tab.active,
html[data-theme="golden"] .tab.on { color: var(--gold-soft); border-color: var(--gold-line-strong); }
html[data-theme="golden"] .btn { background: var(--gold-gradient); color: #111; border: 1px solid rgba(255,236,170,.55); border-radius: 6px; font-weight: 700; }
html[data-theme="golden"] .btn:hover { filter: brightness(1.08); box-shadow: 0 3px 16px rgba(212,175,55,.35); }
html[data-theme="golden"] a.card:hover { border-color: var(--gold); box-shadow: var(--gold-glow), 0 18px 50px rgba(0,0,0,.55); }
html[data-theme="golden"] .brand-mark { border-radius: 50%; background-size: cover !important; width: 112px !important; height: 112px !important; margin-left: auto; margin-right: auto; box-shadow: 0 0 0 1px var(--gold-line-strong), 0 12px 44px rgba(212,175,55,.18); }

/* ── 7. Accesibilidad / movimiento ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="golden"] * { transition: none !important; }
}

/* Campos de texto embebidos en un contenedor con borde propio (compositor del
   chat): el contorno lo dibuja el contenedor, no el textarea. */
html[data-theme="golden"] .input-wrap textarea,
html[data-theme="golden"] .input-wrap input,
html[data-theme="golden"] .text-input-wrap textarea,
html[data-theme="golden"] .text-input-wrap input,
html[data-theme="golden"] .input-wrap textarea:focus,
html[data-theme="golden"] .text-input-wrap textarea:focus,
html[data-theme="golden"] .text-input-wrap input:focus {
  border-color: transparent !important;
  box-shadow: none !important;
  background: transparent;
}

/* Cliente: el compositor no debe desbordar en pantallas angostas (≈360–390px). */
html[data-theme="golden"] #screenChat .text-input-wrap { min-width: 0; }
html[data-theme="golden"] #screenChat .chat-input-bar { gap: 6px; }
@media (max-width: 400px) {
  html[data-theme="golden"] #screenChat .attach-btn,
  html[data-theme="golden"] #screenChat .send-btn { width: 44px; height: 44px; min-width: 44px; font-size: 22px; }
  html[data-theme="golden"] #screenChat .chat-input-bar { padding-left: 8px; padding-right: 8px; }
}
/* Nombre del soporte en el header del cliente: oro, sin mayúsculas forzadas (entra en 360px). */
html[data-theme="golden"] #screenChat .chat-name { text-transform: none; letter-spacing: .02em; }
/* Splash del cliente: logo circular (el arte tiene fondo negro). */
html[data-theme="golden"] .betx-splash-logo {
  width: 128px; height: 128px; border-radius: 50%;
  background-size: cover;
  box-shadow: 0 0 0 1px var(--gold-line-strong), 0 12px 44px rgba(212,175,55,.22);
  filter: none;
}

/* Operador en móvil: header compacto para que entren todas las acciones. */
@media (max-width: 640px) {
  html[data-theme="golden"] .op-header { padding: 8px 10px; gap: 8px; }
  html[data-theme="golden"] .op-brand { font-size: 13px; letter-spacing: .04em; }
  html[data-theme="golden"] .op-brand::before { width: 26px; height: 26px; margin-right: 6px; }
  html[data-theme="golden"] .op-header-actions { gap: 2px; margin-left: auto; }
  html[data-theme="golden"] .op-header .icon-btn { width: 30px; height: 30px; font-size: 15px; }
}
@media (max-width: 380px) {
  html[data-theme="golden"] .op-brand { font-size: 0; }               /* sólo el logo */
  html[data-theme="golden"] .op-brand::before { margin-right: 0; }
}