/* ============================================================ BOAZ · PRO UPGRADE — capa visual global (solo estética) Se carga al final del en todas las salas para refinar tipografía, botones, bordes, encabezados, menús e íconos sin tocar ningún selector de lógica/JS. Solo color, tipografía, sombra, radio y transición. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&family=Public+Sans:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* ---------- Tokens de marca (sobrescriben los definidos en cada sala) ---------- */ :root { --font: 'Public Sans', system-ui, sans-serif; --heading: 'Inter', system-ui, sans-serif; --mono: 'IBM Plex Mono', monospace; --boaz-font: 'Public Sans', system-ui, sans-serif; --boaz-heading: 'Inter', system-ui, sans-serif; --boaz-mono: 'IBM Plex Mono', monospace; --olive: #6E7B3A; --olive-soft: rgba(110,123,58,.10); --red: #B3261E; --red-soft: rgba(179,38,30,.08); /* Azul/navy de marca — mismo valor en las 45 salas, sin excepción */ --navy: #173F77; --navy2: #102F5E; --navy3: #0F2D5E; --blue: #1956B4; --blue2: #2E6FD4; --boaz-navy: #173F77; --boaz-blue: #1956B4; } /* ---------- Tipografía base ---------- */ body { font-family: var(--font) !important; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, .header-title, .panel-title, .prospect-name, .brand h1, .brand b, .hero h2, .stat-value, .number, .item h3, .panel h2, .demo-section-title, .header-brand-name, .slx-logo-word { font-family: var(--heading) !important; font-weight: 800; letter-spacing: -.02em; } .eyebrow, .slx-auth-error, .slx-pin-label, code, .mono, [class*="mono"] { font-family: var(--mono) !important; } /* Rol y estado del usuario: misma fuente del cuerpo, no mono, para reducir mezcla tipográfica */ .slx-urole, .slx-user-status, .user-role, .panel-sub { font-family: var(--font) !important; } /* ---------- Íconos compartidos ---------- */ input[type="password"], .slx-pin-input { background-image: url('assets/img/icons/icon-lock.png'); background-repeat: no-repeat; background-position: 14px center; background-size: 18px; padding-left: 42px !important; } .btn-call, [href^="tel:"], .prospect-tag.phone { background-image: url('assets/img/icons/icon-phone.png'); background-repeat: no-repeat; background-position: 10px center; background-size: 15px; padding-left: 30px !important; } .bc-launcher { background-image: url('assets/img/icons/icon-chat.gif') !important; background-size: cover !important; background-position: center !important; } .bc-launcher svg, .bc-launcher span { display: none; } .user-pill, .session-badge, .slx-uname, .user-name { position: relative; padding-left: 22px !important; } .user-pill::before, .session-badge::before { content: ""; position: absolute; left: 6px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: url('assets/img/icons/icon-user.gif') center/cover no-repeat; } /* Avatares con iniciales (DA, JC, etc.) → ícono de usuario en todas las salas */ .slx-avatar, .session-card-avatar, .di-avatar, .prospect-avatar, .resp-avatar, .avatar, .cc-avatar { color: transparent !important; font-size: 0 !important; background-image: url('assets/img/icons/icon-user.gif') !important; background-size: cover !important; background-position: center !important; background-color: transparent !important; } /* ---------- Encabezados / barras superiores ---------- */ .header, .topbar, .mission-header, .header-inner { box-shadow: 0 1px 0 rgba(17, 24, 39, .04), 0 6px 20px -14px rgba(17, 24, 39, .35); } .header, .topbar { backdrop-filter: saturate(140%) blur(6px); } .header-title, .topbar-title, .panel-title, h1, h2, h3 { letter-spacing: -.01em; } /* Chip / pastilla de usuario (donde aparece el nombre) */ .user-pill, .session-badge, .slx-uname, .user-name { border-radius: 999px !important; font-weight: 700; } .user-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px !important; background: linear-gradient(135deg, rgba(23,63,119,.10), rgba(25,86,180,.06)) !important; border: 1px solid rgba(23,63,119,.18) !important; color: #173F77 !important; } /* ---------- Botones (todas las variantes usadas en las salas) ---------- */ .btn, button.btn, .tab-btn, .filter-btn, .period-btn, .ops-btn, .df-btn, .goal-btn, .pin-btn { border-radius: 10px; transition: transform .12s ease, box-shadow .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease; box-shadow: 0 1px 2px rgba(17,24,39,.06); } .btn:hover, button.btn:hover, .tab-btn:hover, .filter-btn:hover, .ops-btn:hover, .goal-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(17,24,39,.35); } .btn:active, button.btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(17,24,39,.08) inset; } .btn:focus-visible, button.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid rgba(25,86,180,.45); outline-offset: 2px; } /* Primario */ .btn-primary, .btn.primary, .btn-blue, .btn.blue { background: linear-gradient(135deg, #173F77, #1956B4) !important; border-color: #123362 !important; color: #fff !important; } .btn-primary:hover, .btn.primary:hover, .btn-blue:hover, .btn.blue:hover { filter: brightness(1.06); } /* Secundario / claro / ghost */ .btn-light, .btn.light, .btn-secondary { background: #F6F8FB !important; border: 1px solid #E1E6EE !important; color: #1F2937 !important; } .btn-light:hover, .btn.light:hover, .btn-secondary:hover { background: #EEF3FA !important; border-color: #C9D4E3 !important; } .btn-ghost, .btn.ghost { background: transparent !important; border: 1px solid #E1E6EE !important; color: #4B5563 !important; box-shadow: none; } .btn-ghost:hover, .btn.ghost:hover { border-color: #1956B4 !important; color: #173F77 !important; background: rgba(25,86,180,.06) !important; } /* Estados */ .btn-danger { background: #FDEDED !important; border-color: rgba(220,38,38,.25) !important; color: #B91C1C !important; } .btn-danger:hover { background: #FBDCDC !important; } .btn-green { background: #E9F8F1 !important; border-color: rgba(5,150,105,.28) !important; color: #067A57 !important; } .btn-green:hover { background: #DBF3E7 !important; } .btn-gold, .btn.orange { background: #FEF3E2 !important; border-color: rgba(245,158,11,.3) !important; color: #B45309 !important; } .btn-gold:hover, .btn.orange:hover { background: #FCE8C8 !important; } /* Pestañas activas */ .tab-btn.active, .period-btn.active, .filter-btn.active { background: #173F77 !important; border-color: #173F77 !important; color: #fff !important; box-shadow: 0 4px 12px -6px rgba(23,63,119,.55); } /* ---------- Bordes / tarjetas / paneles ---------- */ .panel, .card, .prospect-hero, .load-bar, .msg-panel, .history-panel, .user-card, table, .table-wrap { border-radius: 12px; } .panel, .card, .msg-panel, .history-panel, .user-card { box-shadow: 0 1px 2px rgba(17,24,39,.04); } /* ---------- Campos de formulario ---------- */ input, select, textarea { border-radius: 10px !important; transition: border-color .15s, box-shadow .15s, background-color .15s; } input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(25,86,180,.12); } /* ---------- Scrollbar (detalle premium, no funcional) ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: rgba(23,63,119,.25); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: rgba(23,63,119,.4); background-clip: content-box; }