@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); /* ============================================================ OPENYM CHATCENTER THEMES Tema activo: Light es el tema base. Dark y Mixer solo cambian variables. ============================================================ */ :root, html[data-theme="light"] { --oc-bg: #f5f7fb; --oc-bg2: #ffffff; --oc-bg3: #eef1f7; --oc-bg4: #e4e9f2; --oc-line: #e2e7f0; --oc-line2: #d0d7e6; --oc-line3: #b8c2d6; --oc-txt: #0f1923; --oc-txt2: #3d4f61; --oc-txt3: #7a8aaa; --oc-txt4: #b0bcce; --oc-blue: #2563eb; --oc-blue2: #dbeafe; --oc-blue3: #eff6ff; --oc-teal: #0d9488; --oc-teal2: #ccfbf1; --oc-grn: #16a34a; --oc-grn2: #dcfce7; --oc-grn3: #f0fdf4; --oc-amb: #d97706; --oc-amb2: #fef3c7; --oc-amb3: #fffbeb; --oc-red: #dc2626; --oc-red2: #fee2e2; --oc-red3: #fff5f5; --oc-pur: #7c3aed; --oc-pur2: #ede9fe; --oc-pur3: #f5f3ff; --oc-rail: #0f1923; --oc-shadow: rgba(15, 25, 35, .12); --oc-r: 12px; --oc-r2: 8px; --oc-font: 'Inter', sans-serif; --oc-mono: 'JetBrains Mono', monospace; color-scheme: light; } html[data-theme="dark"] { --oc-bg: #0b1220; --oc-bg2: #111827; --oc-bg3: #182235; --oc-bg4: #223047; --oc-line: #263244; --oc-line2: #334155; --oc-line3: #475569; --oc-txt: #f8fafc; --oc-txt2: #cbd5e1; --oc-txt3: #94a3b8; --oc-txt4: #64748b; --oc-blue: #3b82f6; --oc-blue2: rgba(59, 130, 246, .20); --oc-blue3: rgba(59, 130, 246, .10); --oc-teal: #2dd4bf; --oc-teal2: rgba(45, 212, 191, .16); --oc-grn: #22c55e; --oc-grn2: rgba(34, 197, 94, .16); --oc-grn3: rgba(34, 197, 94, .08); --oc-amb: #f59e0b; --oc-amb2: rgba(245, 158, 11, .17); --oc-amb3: rgba(245, 158, 11, .08); --oc-red: #ef4444; --oc-red2: rgba(239, 68, 68, .17); --oc-red3: rgba(239, 68, 68, .08); --oc-pur: #a78bfa; --oc-pur2: rgba(167, 139, 250, .18); --oc-pur3: rgba(167, 139, 250, .09); --oc-rail: #020617; --oc-shadow: rgba(0, 0, 0, .34); color-scheme: dark; } html[data-theme="mixer"] { --oc-bg: #edf4ff; --oc-bg2: #ffffff; --oc-bg3: #e3edfb; --oc-bg4: #d4e2f4; --oc-line: #c8d6eb; --oc-line2: #afc2dc; --oc-line3: #8ea6c6; --oc-txt: #102033; --oc-txt2: #334b66; --oc-txt3: #687d98; --oc-txt4: #9aacc0; --oc-blue: #2563eb; --oc-blue2: #dbeafe; --oc-blue3: #eff6ff; --oc-teal: #0f9f92; --oc-teal2: #d5fbf4; --oc-grn: #16a34a; --oc-grn2: #dcfce7; --oc-grn3: #f0fdf4; --oc-amb: #d97706; --oc-amb2: #fef3c7; --oc-amb3: #fffbeb; --oc-red: #dc2626; --oc-red2: #fee2e2; --oc-red3: #fff5f5; --oc-pur: #7c3aed; --oc-pur2: #ede9fe; --oc-pur3: #f5f3ff; --oc-rail: #101b27; --oc-shadow: rgba(16, 32, 51, .14); color-scheme: light; } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; font-family: var(--oc-font) !important; background: var(--oc-bg) !important; } .layout-wrapper, .layout-container, .layout-page, .content-wrapper, .layout-content-navbar, .container-fluid, .container-xxl { all: unset !important; display: block !important; } .layout-navbar, .layout-menu, .layout-overlay, .buy-now, .sidebar-header, hr.container-m-nx { display: none !important; } /* SHELL */ .oc-shell { position: absolute; top: 0; left: 0; right: 0; bottom: 32px; display: flex; flex-direction: row; overflow: hidden; background: var(--oc-bg); font-family: var(--oc-font); } /* RAIL */ .oc-rail { width: 58px; min-width: 58px; height: 100%; background: var(--oc-rail); display: flex; flex-direction: column; align-items: center; padding: 14px 0 12px; gap: 2px; overflow: hidden; flex-shrink: 0; } .oc-rail-logo { width: 36px; height: 36px; border-radius: 10px; background: var(--oc-blue); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; flex-shrink: 0; cursor: pointer; } .oc-rail-logo i { font-size: 18px; color: white; } .oc-ri { width: 40px; height: 40px; border-radius: 10px; border: none; background: transparent; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.35); cursor: pointer; transition: all 0.15s; position: relative; flex-shrink: 0; } .oc-ri i { font-size: 20px; } /*.oc-ri:hover { background: rgba(255,255,255,0.10); color: rgba(255,255,255,0.80); } */ .oc-ri:hover { background: rgba(37, 99, 235, .15); color: #93c5fd; } .oc-ri--active, .oc-ri.active { background: var(--oc-blue); color: #fff; box-shadow: 0 4px 12px rgba(37, 99, 235, .35); } .oc-ri--active i, .oc-ri.active i { color: #fff; } .oc-ri-pip { position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; background: #f97316; border-radius: 50%; border: 2px solid var(--oc-rail); } .oc-rail-spacer { flex: 1; } /* MAIN */ .oc-main, #mainContentWrapper { flex: 1; height: 100%; overflow: hidden; display: flex; flex-direction: column; min-width: 0; position: relative; } #layoutContainer { flex: 1; height: 100%; overflow: hidden; display: flex; flex-direction: row; min-width: 0; position: relative; } /* FOOTER */ .oc-footer { position: fixed; left: 0; right: 0; bottom: 0; height: 38px; background: linear-gradient(180deg, #101b27 0%, #0b1420 100%); border-top: 1px solid rgba(255,255,255,.07); display: grid; grid-template-columns: 430px 1fr 310px; align-items: center; padding: 0 14px; z-index: 1000; font-family: var(--oc-font); box-shadow: 0 -8px 24px rgba(0,0,0,.18); } .oc-shell { bottom: 38px; } .oc-footer-zone { display: flex; align-items: center; min-width: 0; } .oc-footer-zone--left { justify-content: flex-start; } .oc-footer-zone--center { justify-content: center; gap: 8px; overflow: hidden; } .oc-footer-zone--right { justify-content: flex-end; gap: 10px; } /* Agent line */ .oc-agent-line { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; } .oc-agent-name { color: #fff; font-size: 11px; font-weight: 700; margin-right: 4px; } .oc-agent-label { color: rgba(255,255,255,.42); font-size: 10.5px; } .oc-agent-pill { height: 22px; display: inline-flex; align-items: center; gap: 6px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); } .oc-agent-mini-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .oc-agent-pill--dept { color: #cbd5e1; } /* Status colors */ .oc-agent-status--ok { color: #22c55e !important; } .oc-agent-status--busy { color: #f59e0b !important; } .oc-agent-status--away { color: #f97316 !important; } .oc-agent-status--lunch { color: #3b82f6 !important; } .oc-agent-status--break { color: #6b7280 !important; } .oc-agent-status--chat { color: #06b6d4 !important; } .oc-agent-status--off { color: #dc2626 !important; } .chat-filter-hidden { display: none !important; } /* Stats */ .oc-stat { height: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.55); font-size: 11px; white-space: nowrap; } .oc-stat i { font-size: 13px; color: rgba(147,197,253,.7); } .oc-stat span { color: rgba(255,255,255,.48); } .oc-stat strong { color: #fff; font-size: 11px; font-weight: 700; } .oc-stat-total, .oc-stat small { color: rgba(255,255,255,.42); font-size: 10px; } .oc-up { color: #4ade80; font-size: 10px; font-style: normal; font-weight: 700; } /* WebSocket */ .oc-ws-pill { height: 24px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 0 11px; font-size: 11px; font-weight: 600; border: 1px solid; white-space: nowrap; } .oc-ws-pill--ok { background: rgba(34,197,94,.10); border-color: #22c55e; color: #22c55e; } .oc-ws-pill--error { background: rgba(239,68,68,.10); border-color: #ef4444; color: #ef4444; } .oc-ws-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .oc-event-detail-tags { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .oc-event-detail-tag { min-width: 0; height: 34px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid var(--oc-line); color: var(--oc-txt2); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 6px; } .oc-event-detail-tag span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-event-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .oc-event-action-btn { height: 38px; border-radius: 11px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-txt2); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; } .oc-event-action-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } .oc-event-action-btn--success { background: var(--oc-grn2); color: var(--oc-grn); border-color: var(--oc-grn2); } .oc-event-action-btn--danger { background: var(--oc-red2); color: var(--oc-red); border-color: var(--oc-red2); } /* Brand */ .oc-footer-brand { height: 24px; display: inline-flex; align-items: center; gap: 7px; padding: 0 10px; border-radius: 999px; background: rgba(37,99,235,.14); border: 1px solid rgba(96,165,250,.22); white-space: nowrap; } .oc-footer-brand strong { color: #dbeafe; font-size: 11px; font-weight: 800; letter-spacing: .14em; } .oc-footer-brand small { color: rgba(219,234,254,.55); font-size: 10px; } /* SIDEBAR */ .oc-side { width: 268px; min-width: 268px; height: 100%; display: flex; flex-direction: column; border-right: 1px solid var(--oc-line); background: var(--oc-bg2); overflow: hidden; flex-shrink: 0; } .oc-side-top { padding: 14px 14px 10px; flex-shrink: 0; border-bottom: 1px solid var(--oc-line); } .oc-side-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .oc-side-h { font-size: 15px; font-weight: 600; color: var(--oc-txt); } .oc-compose { width: 28px; height: 28px; border-radius: 7px; background: var(--oc-blue3); border: 1px solid var(--oc-blue2); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--oc-blue); font-size: 15px; } .oc-compose:hover { background: var(--oc-blue2); } .oc-srch { display: flex; align-items: center; gap: 8px; background: var(--oc-bg3); border: 1px solid var(--oc-line); border-radius: 10px; padding: 8px 12px; transition: border-color 0.15s; } .oc-srch:focus-within { border-color: var(--oc-blue); background: var(--oc-bg2); } .oc-srch > i { font-size: 15px; color: var(--oc-txt3); flex-shrink: 0; } .oc-srch input, .oc-srch .chat-search-input { background: transparent; border: none; outline: none; color: var(--oc-txt); font-size: 14px; width: 100%; font-family: var(--oc-font); box-shadow: none; padding: 0; } .oc-srch input::placeholder, .oc-srch .chat-search-input::placeholder { color: var(--oc-txt4); } /* KPI styles moved to tabs — see oc-tab-row below */ /* Lista */ .oc-clist, #chat-list, #contact-list { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 6px 8px; min-height: 0; } .oc-clist::-webkit-scrollbar, #chat-list::-webkit-scrollbar { width: 3px; } .oc-clist::-webkit-scrollbar-thumb, #chat-list::-webkit-scrollbar-thumb { background: var(--oc-line2); border-radius: 3px; } .oc-sec, .chat-contact-list-item-title { font-size: 11px !important; font-weight: 600 !important; color: var(--oc-txt3) !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; padding: 8px 6px 4px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; list-style: none !important; } .chat-contact-list-item, .oc-ci { display: flex !important; align-items: center !important; gap: 9px !important; padding: 8px !important; border-radius: 10px !important; cursor: pointer !important; transition: background 0.12s !important; border: 1px solid transparent !important; text-decoration: none !important; color: inherit !important; margin-bottom: 2px !important; list-style: none !important; background: transparent !important; } .chat-contact-list-item:hover, .oc-ci:hover { background: var(--oc-bg3) !important; } .chat-contact-list-item.active, .oc-ci.active { background: var(--oc-blue3) !important; border-color: var(--oc-blue2) !important; } .chat-contact-list-item.chat-new { background: var(--oc-grn3) !important; border-color: var(--oc-grn2) !important; } .chat-contact-list-item.chat-inactive { opacity: 0.55 !important; } .chat-contact-list-item .avatar, .oc-ci-av { width: 40px !important; height: 40px !important; min-width: 40px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 700 !important; flex-shrink: 0 !important; font-family: var(--oc-font) !important; } .oc-ci-av--t { background: var(--oc-teal2); color: var(--oc-teal); } .oc-ci-av--b { background: var(--oc-blue2); color: var(--oc-blue); } .oc-ci-av--a { background: var(--oc-amb2); color: var(--oc-amb); } .oc-ci-av--p { background: var(--oc-pur2); color: var(--oc-pur); } .oc-ci-av--r { background: var(--oc-red2); color: var(--oc-red); } .oc-ci-av--g { background: var(--oc-grn2); color: var(--oc-grn); } .oc-ci-body, .chat-contact-list-item .chat-contact-info { flex: 1; min-width: 0; } .oc-ci-name, .chat-contact-list-item .chat-contact-name { font-size: 13.5px !important; font-weight: 500 !important; color: var(--oc-txt) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .oc-ci-prev, .chat-contact-list-item #previewtext { font-size: 12px !important; color: var(--oc-txt3) !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin-top: 1px !important; } .oc-ci-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; } .oc-ci-time, .chat-contact-list-item #current_time { font-size: 11px !important; color: var(--oc-txt3) !important; font-family: var(--oc-mono) !important; } .oc-ci-badge { background: var(--oc-red); color: white; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 6px; min-width: 16px; text-align: center; } /* HISTORY */ .oc-history { flex: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden; min-width: 0; position: relative; background: var(--oc-bg); } #chatpanel { flex: 1; height: 100%; display: flex; flex-direction: column; overflow: hidden; min-width: 0; } #no-chat-selected-message, .oc-no-chat { position: absolute !important; top: 0; left: 0; right: 0; bottom: 0; display: flex !important; flex-direction: column; align-items: center; justify-content: center; background: var(--oc-bg); gap: 8px; z-index: 1; } #no-chat-selected-message.d-none, .oc-no-chat.d-none { display: none !important; } #no-chat-selected-message i, .oc-no-chat i { font-size: 52px; color: var(--oc-txt4); } #no-chat-selected-message p, .oc-no-chat p { font-size: 15px; color: var(--oc-txt3); margin: 0; } .oc-no-chat span { font-size: 13px; color: var(--oc-txt3); } /* CHAT PANEL */ .oc-chat-panel { flex: 1; display: flex; flex-direction: column; height: 100%; overflow: hidden; min-width: 0; background: var(--oc-bg); } /* HEADER */ .oc-ch { height: 62px; min-height: 62px; padding: 0 16px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; } .oc-ch-av { width: 40px; height: 40px; border-radius: 50%; background: var(--oc-blue2); color: var(--oc-blue); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; border: 1.5px solid var(--oc-blue3); } .oc-ch-av--img { object-fit: cover; background: none; } .oc-ch-info { flex: 1; min-width: 0; cursor: pointer; } .oc-ch-name { font-size: 15px; font-weight: 600; color: var(--oc-txt); display: flex; align-items: center; gap: 6px; } .oc-ch-sub { font-size: 12px; color: var(--oc-txt3); margin-top: 2px; } .oc-ch-sub2 { font-size: 12px; color: var(--oc-txt3); font-weight: 400; } .oc-ch-acts { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .oc-hb { width: 36px; height: 36px; border-radius: 8px; background: transparent; border: 1px solid var(--oc-line); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--oc-txt3); transition: all 0.15s; flex-shrink: 0; } .oc-hb i { font-size: 18px; } .oc-hb:hover { background: var(--oc-bg3); color: var(--oc-txt); border-color: var(--oc-line2); } .oc-hb--danger { color: var(--oc-red); border-color: #fca5a5; background: var(--oc-red2); } .oc-hb--danger:hover { background: #fecaca; } /* TAGS BAR */ .oc-tags { height: 36px; min-height: 36px; padding: 0 16px; display: flex; align-items: center; gap: 6px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; overflow: hidden; } .oc-tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 500; border: 1px solid; white-space: nowrap; } .oc-tag i { font-size: 12px; } .oc-tag--blue { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } .oc-tag--grn { background: var(--oc-grn3); color: var(--oc-grn); border-color: var(--oc-grn2); } .oc-tag--amb { background: var(--oc-amb3); color: var(--oc-amb); border-color: var(--oc-amb2); } .oc-tag--red { background: var(--oc-red3); color: var(--oc-red); border-color: var(--oc-red2); } .oc-tag--pur { background: var(--oc-pur3); color: var(--oc-pur); border-color: var(--oc-pur2); } .oc-tag--coral { background: #FAECE7; color: #993C1D; border-color: #F5C4B3; } .oc-tag--gray { background: var(--oc-bg3); color: var(--oc-txt3); border-color: var(--oc-line); } /* MENSAJES */ .oc-msgs, .chat-history-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 20px 24px 10px; display: flex; flex-direction: column; gap: 0; background: var(--oc-bg); min-height: 0; } .oc-msgs::-webkit-scrollbar, .chat-history-body::-webkit-scrollbar { width: 3px; } .oc-msgs::-webkit-scrollbar-thumb, .chat-history-body::-webkit-scrollbar-thumb { background: var(--oc-line2); border-radius: 3px; } .oc-msgs-list, #chat-messages-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .oc-msgs-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 60px 0; color: var(--oc-txt4); } .oc-msgs-empty i { font-size: 44px; } .oc-msgs-empty span { font-size: 14px; } /* Separador fecha */ .oc-dsep { display: flex; align-items: center; gap: 10px; margin: 10px 0; list-style: none; font-size: 11.5px; color: var(--oc-txt3); font-family: var(--oc-mono); } .oc-dsep::before, .oc-dsep::after { content: ''; flex: 1; height: 1px; background: var(--oc-line2); } .oc-dsep span { padding: 0 4px; white-space: nowrap; } /* Filas */ .oc-mrow { display: flex; align-items: flex-end; gap: 8px; list-style: none; } .oc-mrow--out { display: flex !important; flex-direction: row !important; justify-content: flex-end !important; align-items: flex-end !important; gap: 8px !important; } /* Avatares mensajes */ .oc-mav { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; font-size: 13px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; align-self: flex-end !important; } .oc-mav--client { background: var(--oc-blue2); color: var(--oc-blue); } .oc-mav--agent { background: var(--oc-teal2); color: var(--oc-teal); } .oc-mav--img { object-fit: cover; background: none !important; border-radius: 50% !important; } .oc-mwrap { max-width: 65%; display: flex; flex-direction: column; gap: 3px; } .oc-mwrap--out { align-items: flex-end; } /* Burbujas */ .oc-bub { padding: 10px 16px !important; font-size: 14.5px !important; line-height: 1.6 !important; word-break: break-word !important; border-radius: 16px !important; font-family: var(--oc-font) !important; } .oc-bub--in { background: #ffffff !important; color: var(--oc-txt) !important; border: 1px solid var(--oc-line2) !important; border-bottom-left-radius: 4px !important; box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important; } .oc-bub--out { background: var(--oc-blue) !important; color: white !important; border-bottom-right-radius: 4px !important; border: none !important; } .oc-bub--media { padding: 6px !important; } .oc-msg-img { max-width: 240px; max-height: 240px; border-radius: 12px; display: block; object-fit: cover; } .oc-bub--doc { display: flex; align-items: center; gap: 8px; font-size: 13px; } .oc-bub--doc i { font-size: 20px; } /* Tiempo */ .oc-mt { font-size: 11px !important; color: var(--oc-txt3) !important; padding: 0 2px !important; font-family: var(--oc-mono) !important; } .oc-mt--out { text-align: right; } /* Typing */ .oc-tbub { background: var(--oc-bg2); border: 1px solid var(--oc-line); border-radius: 16px; border-bottom-left-radius: 4px; padding: 12px 16px; display: flex; gap: 4px; align-items: center; } .oc-da { width: 6px; height: 6px; border-radius: 50%; background: var(--oc-txt4); animation: oc-bop 0.8s ease infinite; } .oc-da:nth-child(2) { animation-delay: 0.13s; } .oc-da:nth-child(3) { animation-delay: 0.26s; } @keyframes oc-bop { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-5px); opacity: 1; } } /* Audio */ .oc-player, .custom-player { display: flex; align-items: center; gap: 10px; min-width: 260px; max-width: 360px; background: transparent !important; padding: 0 !important; } .oc-play-btn, .playPause { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; color: white; font-size: 14px; transition: all 0.15s; } .oc-bub--in .oc-play-btn, .oc-bub--in .playPause { background: var(--oc-bg3); border-color: var(--oc-line2); color: var(--oc-txt2); } .oc-player-track { flex: 1; display: flex; align-items: center; gap: 8px; } .oc-progress-bar, .progress-container { flex: 1; height: 4px !important; background: rgba(255,255,255,0.25); border-radius: 4px; overflow: hidden; cursor: pointer; } .oc-bub--in .oc-progress-bar, .oc-bub--in .progress-container { background: var(--oc-line2); } .oc-progress-fill, .progress { height: 100% !important; background: white; border-radius: 4px; transition: width 0.1s; } .oc-bub--in .oc-progress-fill, .oc-bub--in .progress { background: var(--oc-blue); } .oc-player-time, .time { font-size: 11px; color: rgba(255,255,255,0.75); font-family: var(--oc-mono); white-space: nowrap; min-width: 80px; text-align: right; } .oc-bub--in .oc-player-time, .oc-bub--in .time { color: var(--oc-txt3); } /* INPUT FOOTER */ .oc-foot, .chat-history-footer { min-height: 66px; border-top: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; position: relative; height: auto !important; } oc-form, .form-send-message { display: flex; align-items: flex-end; gap: 8px; padding: 10px 16px; /* padding vertical en lugar de height fijo */ height: auto !important; /* elimina el height fijo */ min-height: 66px; background: transparent; border: none; box-shadow: none !important; border-radius: 0 !important; } #previewFileWrapper, .oc-preview-wrap { position: absolute; bottom: 100%; left: 0; right: 0; background: var(--oc-bg2); border-top: 1px solid var(--oc-line); z-index: 20; max-height: 160px; overflow-y: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 6px; } .oc-fi { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: var(--oc-txt3); cursor: pointer; transition: all 0.15s; flex-shrink: 0; background: transparent; border: none; padding: 0; } .oc-fi:hover { background: var(--oc-bg3); color: var(--oc-txt); } .oc-fi i { font-size: 20px; } .oc-minp, .message-input, #sendtext { flex: 1 !important; padding: 9px 16px !important; border: 1px solid var(--oc-line) !important; border-radius: 24px !important; font-size: 14px !important; color: var(--oc-txt) !important; background: var(--oc-bg3) !important; outline: none !important; font-family: var(--oc-font) !important; box-shadow: none !important; width: 100% !important; resize: none !important; overflow-y: hidden !important; min-height: 38px !important; max-height: 150px !important; line-height: 1.5 !important; box-sizing: border-box !important; word-break: break-word !important; display: block !important; /* ← clave para que no rompa el flex */ } .oc-minp:focus, .message-input:focus, #sendtext:focus { border-color: var(--oc-blue) !important; background: var(--oc-bg2) !important; } .oc-minp::placeholder, .message-input::placeholder, #sendtext::placeholder { color: var(--oc-txt4) !important; font-size: 14px !important; } .oc-input-wrap { flex: 1; position: relative; } .oc-emoji-picker, #emojiPicker { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 100; max-width: 300px; max-height: 240px; overflow-y: auto; background: var(--oc-bg2); border: 1px solid var(--oc-line2); border-radius: var(--oc-r); padding: 10px; } /* Botón enviar — siempre azul */ .oc-sbtn, .send-msg-btn, #sendButton { width: 40px !important; height: 40px !important; border-radius: 50% !important; background: var(--oc-blue) !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer; border: none !important; transition: background 0.15s !important; flex-shrink: 0; color: white !important; } .oc-sbtn i, .send-msg-btn i, #sendButton i { font-size: 18px; color: white !important; } .oc-sbtn:hover:not(:disabled), .send-msg-btn:hover:not(:disabled) { background: #1d4ed8 !important; } .send-msg-btn:disabled, #sendButton:disabled { background: var(--oc-blue) !important; opacity: 0.4 !important; cursor: not-allowed !important; } /* Animación nuevo mensaje */ .oc-msgs-list li:last-child, #chat-messages-list li:last-child { animation: oc-fadein 0.18s ease-out; } @keyframes oc-fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* SCROLLBAR */ ::-webkit-scrollbar { width: 3px; height: 3px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--oc-line2); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--oc-line3); } /* UTILIDADES */ button.disabled, .btn.disabled { opacity: 0.45 !important; cursor: not-allowed !important; pointer-events: none !important; } .oc-loading { display: flex; align-items: center; justify-content: center; height: 100%; background: var(--oc-bg); } /* RAIL AGENT */ .oc-rail-agent { position: relative; flex-shrink: 0; margin-top: 4px; } .oc-rail-agent-btn { width: 34px; height: 34px; border-radius: 50%; background: var(--oc-teal2); color: var(--oc-teal); font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 2px solid var(--oc-teal); position: relative; font-family: var(--oc-font); transition: border-color 0.15s; } .oc-rail-agent-btn:hover { border-color: white; } .oc-rail-agent-initials { color: var(--oc-teal); font-size: 11px; font-weight: 700; line-height: 1; } .oc-rail-agent-dot { position: absolute; bottom: 0; right: 0; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--oc-rail); transition: background 0.2s; } .oc-rail-agent .dropdown-menu { position: fixed !important; left: 66px !important; bottom: 44px !important; top: auto !important; transform: none !important; min-width: 190px; background: var(--oc-bg2); border: 1px solid var(--oc-line2); border-radius: var(--oc-r); padding: 6px 0; box-shadow: 0 8px 24px rgba(0,0,0,0.15); font-family: var(--oc-font); z-index: 9999; display: none; } .oc-rail-agent .dropdown-menu.show { display: block; } .oc-agent-menu-header { padding: 10px 14px 8px; } .oc-agent-menu-name { font-size: 13px; font-weight: 600; color: var(--oc-txt); } .oc-agent-menu-role { font-size: 11px; color: var(--oc-txt3); margin-top: 2px; } .oc-agent-menu-divider { margin: 4px 0; border-color: var(--oc-line); opacity: 1; } .oc-agent-dd-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; font-size: 13px; color: var(--oc-txt); text-decoration: none; transition: background 0.1s; cursor: pointer; } .oc-agent-dd-item:hover { background: var(--oc-bg3); color: var(--oc-txt); text-decoration: none; } .oc-status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; } .oc-logout-btn { width: 100%; padding: 7px 10px; font-size: 12px; border-radius: var(--oc-r2); border: 1px solid var(--oc-line2); background: transparent; color: var(--oc-txt2); cursor: pointer; display: flex; align-items: center; gap: 6px; font-family: var(--oc-font); transition: all 0.15s; } .oc-logout-btn:hover { background: var(--oc-red2); color: var(--oc-red); border-color: var(--oc-red); } /* MODALES — asegurar que aparecen encima del shell */ .modal { z-index: 1055 !important; } .modal-backdrop { z-index: 1050 !important; } .offcanvas { z-index: 1060 !important; } .offcanvas-backdrop { z-index: 1055 !important; } /* GETCHATS */ /* GETCHATS */ .oc-chat-ul, #getchats { list-style: none; padding: 0; margin: 0; flex: 1 1 auto; min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden; } .oc-ci-empty { text-align: center; font-size: 13px; color: var(--oc-txt3); padding: 20px 10px; list-style: none; } #chat-list .chat-contact-list-item-title, #chat-list .input-group, #chat-list h5 { display: none !important; } .oc-ch-tag { font-size: 10px; padding: 1px 6px; border-radius: 999px; font-weight: 500; white-space: nowrap; } /* ============================================================ MODALES Y OFFCANVAS ============================================================ */ /* Offcanvas contacto */ .oc-offcanvas { width: 320px !important; font-family: var(--oc-font); border: none !important; } .oc-offcanvas-header { padding: 16px 20px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); display: flex; align-items: center; justify-content: space-between; } .oc-offcanvas-title { font-size: 14px; font-weight: 600; color: var(--oc-txt); } .oc-offcanvas-close { background: none; border: none; cursor: pointer; color: var(--oc-txt3); font-size: 18px; line-height: 1; padding: 0; display: flex; align-items: center; } .oc-offcanvas-body { overflow-y: auto; height: 100%; padding: 20px; display: flex; flex-direction: column; gap: 16px; background: var(--oc-bg); } /* Hero contacto */ .oc-contact-hero { text-align: center; padding: 8px 0; } .oc-contact-av { width: 64px; height: 64px; border-radius: 50%; background: var(--oc-blue2); color: var(--oc-blue); font-size: 22px; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; border: 2px solid var(--oc-blue3); } .oc-contact-name { font-size: 15px; font-weight: 600; color: var(--oc-txt); } .oc-contact-since { font-size: 12px; color: var(--oc-txt3); margin-top: 4px; } /* Card genérica */ .oc-card { background: var(--oc-bg2); border: 1px solid var(--oc-line); border-radius: 12px; padding: 16px; } .oc-card-title { font-size: 10px; font-weight: 600; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; } /* Info list */ .oc-info-list { display: flex; flex-direction: column; gap: 10px; } .oc-info-row { display: flex; align-items: center; gap: 10px; } .oc-info-row span { font-size: 13px; color: var(--oc-txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-info-icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; } .oc-info-icon--blue { background: var(--oc-blue3); color: var(--oc-blue); } .oc-info-icon--grn { background: var(--oc-grn2); color: var(--oc-grn); } .oc-info-icon--red { background: var(--oc-red2); color: var(--oc-red); } .oc-info-icon--amb { background: var(--oc-amb2); color: var(--oc-amb); } .oc-info-icon--pur { background: var(--oc-pur2); color: var(--oc-pur); } /* Media grid */ .oc-media-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; } .oc-media-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; } /* Opciones offcanvas */ .oc-opt-btn { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; border: none; background: transparent; cursor: pointer; width: 100%; font-family: var(--oc-font); font-size: 13px; color: var(--oc-txt); transition: background .12s; } .oc-opt-btn:hover { background: var(--oc-bg3); } .oc-opt-btn--danger { color: var(--oc-red); } .oc-opt-btn--danger:hover { background: var(--oc-red2); } .oc-txt-amb { color: var(--oc-amb); } /* Modal base */ .oc-modal-dialog { max-width: 680px; width: 95vw; } .oc-modal-dialog--lg { max-width: 1100px; width: 95vw; } .oc-modal-content { border: none; border-radius: 16px; overflow: visible; font-family: var(--oc-font); box-shadow: 0 20px 60px rgba(0,0,0,0.15); } .oc-modal-header { padding: 22px 28px 18px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); display: flex; align-items: center; justify-content: space-between; } .oc-modal-title { font-size: 16px; font-weight: 700; color: var(--oc-txt); } .oc-modal-subtitle { font-size: 12px; color: var(--oc-txt3); margin-top: 2px; } .oc-modal-close { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--oc-line); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--oc-txt3); font-size: 16px; } .oc-modal-close:hover { background: var(--oc-bg3); } .oc-modal-body { padding: 24px 28px; background: var(--oc-bg); max-height: 80vh; overflow-y: auto; } .oc-modal-body--scroll { max-height: 80vh; overflow-y: auto; } .oc-modal-footer { display: flex; gap: 10px; justify-content: flex-end; margin-top: 24px; } /* Appointment client card */ .oc-appt-client { background: var(--oc-blue3); border: 1px solid var(--oc-blue2); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; } .oc-appt-client-label { font-size: 11px; color: var(--oc-blue); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .oc-appt-client-name { font-size: 14px; font-weight: 600; color: var(--oc-txt); margin-top: 2px; } /* Form elements */ .oc-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .oc-form-group { display: flex; flex-direction: column; gap: 6px; } .oc-form-group--full { grid-column: 1 / -1; } .oc-label { font-size: 12px; font-weight: 600; color: var(--oc-txt2); } .oc-input { padding: 10px 14px; border: 1px solid var(--oc-line); border-radius: 10px; font-size: 13px; background: var(--oc-bg2); color: var(--oc-txt); outline: none; font-family: var(--oc-font); width: 100%; transition: border-color .15s; } .oc-input:focus { border-color: var(--oc-blue); } .oc-select { padding: 10px 14px; border: 1px solid var(--oc-line); border-radius: 10px; font-size: 13px; background: var(--oc-bg2); color: var(--oc-txt); outline: none; font-family: var(--oc-font); width: 100%; } .oc-textarea { padding: 10px 14px; border: 1px solid var(--oc-line); border-radius: 10px; font-size: 13px; background: var(--oc-bg2); color: var(--oc-txt); outline: none; font-family: var(--oc-font); width: 100%; resize: vertical; } .oc-textarea:focus, .oc-input:focus { border-color: var(--oc-blue); } /* Botones */ .oc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 22px; border-radius: 10px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--oc-font); transition: all .15s; } .oc-btn--primary { background: var(--oc-blue); color: white; } .oc-btn--primary:hover { background: #1d4ed8; } .oc-btn--secondary { background: transparent; border: 1px solid var(--oc-line); color: var(--oc-txt2); } .oc-btn--secondary:hover { background: var(--oc-bg3); } .oc-btn--danger { background: var(--oc-red); color: white; } .oc-btn--danger:hover { background: #b91c1c; } /* Disposiciones */ .oc-disp-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 20px; } @media (min-width: 900px) { .oc-disp-grid { grid-template-columns: repeat(5,1fr); } } .oc-disp-label { cursor: pointer; display: block; } .oc-disp-radio { display: none; } .oc-disp-card { padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--oc-line); background: var(--oc-bg2); transition: all .15s; height: 100%; } .oc-disp-card:hover { background: var(--oc-bg3); border-color: var(--oc-line2); } .oc-disp-card--selected { border-color: var(--oc-blue) !important; background: var(--oc-blue3) !important; } .oc-disp-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .oc-disp-icon { width: 28px; height: 28px; border-radius: 7px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .oc-disp--positive .oc-disp-icon { background: var(--oc-grn2); color: var(--oc-grn); } .oc-disp--negative .oc-disp-icon { background: var(--oc-red2); color: var(--oc-red); } .oc-disp--neutral .oc-disp-icon { background: var(--oc-amb2); color: var(--oc-amb); } .oc-disp-name { font-size: 12.5px; font-weight: 600; color: var(--oc-txt); } .oc-disp-desc { font-size: 11px; color: var(--oc-txt3); line-height: 1.4; padding-left: 36px; } /* Follow-up */ .oc-followup { background: var(--oc-blue3); border: 1px solid var(--oc-blue2); border-radius: 10px; padding: 16px; margin-bottom: 16px; } .oc-followup-title { font-size: 12px; font-weight: 600; color: var(--oc-blue); margin-bottom: 12px; display: flex; align-items: center; gap: 6px; } /* ============================================================ MODAL TRANSFER ============================================================ */ .oc-transfer-search { display: flex; align-items: center; gap: 8px; background: var(--oc-bg3); border: 1px solid var(--oc-line); border-radius: 10px; padding: 9px 14px; margin-bottom: 20px; } .oc-transfer-search i { font-size: 15px; color: var(--oc-txt3); flex-shrink: 0; } .oc-transfer-search-input { background: transparent; border: none; outline: none; font-size: 13px; color: var(--oc-txt); font-family: var(--oc-font); width: 100%; } .oc-transfer-section { margin-bottom: 24px; } .oc-transfer-section-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; } .oc-transfer-section-title i { font-size: 14px; } .oc-transfer-scroll { display: flex; flex-direction: column; gap: 8px; } .oc-transfer-empty { font-size: 13px; color: var(--oc-txt3); padding: 8px 0; } .oc-transfer-card { background: var(--oc-bg2); border: 1px solid var(--oc-line); border-radius: 12px; padding: 14px 16px; display: flex; align-items: center; gap: 14px; transition: border-color .15s; } .oc-transfer-card:hover { border-color: var(--oc-line2); background: var(--oc-bg3); } .oc-transfer-card--agent { gap: 12px; } .oc-transfer-card-top { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; } .oc-transfer-card-name { font-size: 13.5px; font-weight: 600; color: var(--oc-txt); } .oc-transfer-card-sub { font-size: 11.5px; color: var(--oc-txt3); margin-top: 2px; } .oc-transfer-agent-info { flex: 1; min-width: 0; } .oc-transfer-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; } .oc-transfer-icon--blue { background: var(--oc-blue3); color: var(--oc-blue); } .oc-transfer-icon--pur { background: var(--oc-pur2); color: var(--oc-pur); } .oc-transfer-avatars { display: flex; align-items: center; gap: 4px; flex-shrink: 0; } .oc-transfer-count { font-size: 11px; color: var(--oc-txt3); margin-left: 4px; white-space: nowrap; } .oc-transfer-av { width: 28px; height: 28px; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid var(--oc-bg2); } .oc-transfer-av--lg { width: 44px; height: 44px; font-size: 15px; border: none; } .oc-transfer-av--amb { background: var(--oc-amb2); color: var(--oc-amb); } .oc-transfer-av--teal { background: var(--oc-teal2); color: var(--oc-teal); } .oc-transfer-btn { flex-shrink: 0; white-space: nowrap; } /* Modal XL para transfer */ .oc-modal-dialog--xl { max-width: 1200px; width: 96vw; } /* Transfer grid layout */ .oc-transfer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .oc-transfer-grid .oc-transfer-card { flex-direction: column; align-items: flex-start; } .oc-transfer-grid .oc-transfer-card-top { width: 100%; } .oc-transfer-grid .oc-transfer-btn { width: 100%; justify-content: center; margin-top: 8px; } .oc-transfer-grid .oc-transfer-avatars { margin-top: 8px; } .oc-transfer-grid .oc-transfer-agent-info { flex: 1; } /* ============================================================ TEMPLATE ITEMS — cards dentro de #loadpredefindtexts ============================================================ */ #loadpredefindtexts .col-md-12 { margin-bottom: 8px; } #loadpredefindtexts .card { border: 1px solid var(--oc-line) !important; border-radius: 12px !important; box-shadow: none !important; background: var(--oc-bg2) !important; transition: border-color .15s, box-shadow .15s !important; cursor: pointer !important; overflow: hidden !important; } #loadpredefindtexts .card:hover { border-color: var(--oc-blue) !important; box-shadow: 0 2px 8px rgba(37,99,235,0.10) !important; } #loadpredefindtexts .card-header { background: var(--oc-bg3) !important; border-bottom: 1px solid var(--oc-line) !important; padding: 10px 14px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; } #loadpredefindtexts .card-header span { font-size: 13px !important; font-weight: 600 !important; color: var(--oc-txt) !important; font-family: var(--oc-font) !important; } #loadpredefindtexts .card-body { padding: 10px 14px !important; } #loadpredefindtexts .card-text { font-size: 13px !important; color: var(--oc-txt2) !important; line-height: 1.55 !important; font-family: var(--oc-font) !important; margin: 0 !important; } #loadpredefindtexts .card-footer { background: transparent !important; border-top: 1px solid var(--oc-line) !important; padding: 8px 14px !important; display: flex !important; gap: 6px !important; justify-content: flex-end !important; } /* Botones dentro de los items */ #loadpredefindtexts .btn-sm { padding: 4px 12px !important; font-size: 12px !important; font-weight: 500 !important; border-radius: 8px !important; font-family: var(--oc-font) !important; } #loadpredefindtexts .btn-primary { background: var(--oc-blue) !important; border-color: var(--oc-blue) !important; color: white !important; } #loadpredefindtexts .btn-danger { background: var(--oc-red2) !important; border-color: var(--oc-red2) !important; color: var(--oc-red) !important; } #loadpredefindtexts .btn-danger:hover { background: var(--oc-red) !important; color: white !important; } /* Sin resultados */ #noResultsMessage { text-align: center; padding: 32px 16px; color: var(--oc-txt3); font-size: 13px; } /* ============================================================ TEMPLATE CARDS ============================================================ */ .oc-tpl-card { border-radius: 14px; border: 1.5px solid var(--oc-line); background: var(--oc-bg2); cursor: pointer; overflow: hidden; transition: all .18s; box-shadow: 0 1px 4px rgba(0,0,0,.04); } .oc-tpl-card:hover { border-color: var(--oc-blue); box-shadow: 0 4px 16px rgba(37,99,235,.12); transform: translateY(-2px); } .oc-tpl-card--pub:hover { border-color: var(--oc-blue); } .oc-tpl-card--priv:hover { border-color: var(--oc-amb); box-shadow: 0 4px 16px rgba(217,119,6,.12); } /* Top row */ .oc-tpl-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px 10px; } .oc-tpl-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .oc-tpl-icon--pub { background: var(--oc-blue3); color: var(--oc-blue); } .oc-tpl-icon--priv { background: var(--oc-amb2); color: var(--oc-amb); } .oc-tpl-title { flex: 1; font-size: 13.5px; font-weight: 700; color: var(--oc-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-tpl-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .oc-tpl-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; } .oc-tpl-pill--pub { background: var(--oc-blue3); color: var(--oc-blue); border: 1px solid var(--oc-blue2); } .oc-tpl-pill--priv { background: var(--oc-amb2); color: var(--oc-amb); border: 1px solid var(--oc-amb2); } .oc-tpl-del { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--oc-red2); background: var(--oc-red2); color: var(--oc-red); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; padding: 0; transition: all .15s; } .oc-tpl-del:hover { background: var(--oc-red); color: white; border-color: var(--oc-red); } /* Divider */ .oc-tpl-divider { height: 1px; background: var(--oc-line); margin: 0 14px; } /* Body */ .oc-tpl-body { padding: 10px 14px; font-size: 12.5px; color: var(--oc-txt2); line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Footer */ .oc-tpl-footer { display: flex; align-items: center; justify-content: space-between; padding: 7px 14px 10px; } .oc-tpl-hint { font-size: 10.5px; color: var(--oc-txt4); display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .15s; } .oc-tpl-card:hover .oc-tpl-hint { opacity: 1; color: var(--oc-blue); } /* ============================================================ CLIENT CARD — modal-add-appointment ============================================================ */ .oc-client-card { border-radius: 14px; border: 1.5px solid var(--oc-blue2); background: var(--oc-bg2); overflow: hidden; box-shadow: 0 1px 4px rgba(37,99,235,.06); } .oc-client-card-top { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--oc-blue3); } .oc-client-av { width: 44px; height: 44px; border-radius: 50%; background: var(--oc-blue); color: white; font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid rgba(255,255,255,.5); } .oc-client-info { flex: 1; min-width: 0; } .oc-client-name { font-size: 14px; font-weight: 700; color: var(--oc-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-client-sub { font-size: 11.5px; color: var(--oc-txt3); margin-top: 2px; display: flex; align-items: center; gap: 4px; } .oc-client-stats { display: flex; flex-direction: column; gap: 0; } .oc-client-stat { display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-size: 12px; color: var(--oc-txt2); border-bottom: 1px solid var(--oc-line); } .oc-client-stat:last-child { border-bottom: none; } .oc-client-stat i { font-size: 14px; color: var(--oc-txt3); flex-shrink: 0; } /* ============================================================ FIX MODAL TRANSFER — scroll y estructura ============================================================ */ #transfer .modal-content { border-radius: 16px !important; overflow: hidden !important; max-height: 90vh !important; display: flex !important; flex-direction: column !important; border: none !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; } #transfer .modal-body { flex: 1 !important; overflow-y: auto !important; padding: 24px 28px !important; background: var(--oc-bg) !important; min-height: 0 !important; } #transfer .oc-modal-header { flex-shrink: 0 !important; } #transfer .modal-footer-fix { flex-shrink: 0 !important; padding: 14px 28px !important; border-top: 1px solid var(--oc-line) !important; background: var(--oc-bg2) !important; display: flex !important; justify-content: flex-end !important; } /* ============================================================ TRANSFER CARDS ============================================================ */ .oc-tr-card { border-radius: 12px; border: 1.5px solid var(--oc-line); background: var(--oc-bg2); overflow: hidden; transition: all .15s; display: flex; box-shadow: 0 1px 4px rgba(0,0,0,.04); } .oc-tr-card:hover { border-color: var(--oc-blue); box-shadow: 0 4px 14px rgba(37,99,235,.10); transform: translateY(-2px); } .oc-tr-card--agent:hover { border-color: var(--oc-teal); box-shadow: 0 4px 14px rgba(13,148,136,.10); } .oc-tr-card-accent { width: 4px; flex-shrink: 0; } .oc-tr-card-accent--blue { background: var(--oc-blue); } .oc-tr-card-accent--pur { background: var(--oc-pur); } .oc-tr-card-body { flex: 1; padding: 14px; display: flex; flex-direction: column; } .oc-tr-card-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-bottom: 10px; flex-shrink: 0; } .oc-tr-card-icon--blue { background: var(--oc-blue3); color: var(--oc-blue); } .oc-tr-card-icon--pur { background: var(--oc-pur2); color: var(--oc-pur); } .oc-tr-card-name { font-size: 13.5px; font-weight: 700; color: var(--oc-txt); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-tr-card-sub { font-size: 11.5px; color: var(--oc-txt3); margin-bottom: 6px; } /* Avatares en equipos */ .oc-tr-av { width: 28px; height: 28px; border-radius: 50%; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid var(--oc-bg2); } .oc-tr-av--lg { width: 46px; height: 46px; font-size: 16px; border: none; } .oc-tr-av--amb { background: var(--oc-amb2); color: var(--oc-amb); } .oc-tr-av--teal { background: var(--oc-teal2); color: var(--oc-teal); } .oc-tr-av--gray { background: var(--oc-bg3); color: var(--oc-txt3); } /* Botón transferir */ .oc-tr-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: none; background: var(--oc-blue); color: white; font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: var(--oc-font); transition: background .15s; margin-top: auto; } .oc-tr-btn:hover { background: #1d4ed8; } .oc-tr-btn--pur { background: var(--oc-pur); } .oc-tr-btn--pur:hover { background: #6d28d9; } .oc-tr-btn--disabled { background: var(--oc-bg3); color: var(--oc-txt3); cursor: not-allowed; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--oc-line); font-size: 12.5px; font-weight: 600; font-family: var(--oc-font); margin-top: auto; } /* Outline buttons */ .oc-btn--outline { background: transparent; border: 1.5px solid var(--oc-blue); color: var(--oc-blue); } .oc-btn--outline:hover { background: var(--oc-blue3); } .oc-btn--outline-pur { background: transparent; border: 1.5px solid var(--oc-pur); color: var(--oc-pur); } .oc-btn--outline-pur:hover { background: var(--oc-pur3); } .oc-global-chat-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #dc2626; color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; border: 2px solid #0f1923; z-index: 10; } .oc-system-row{ display:flex; justify-content:center; margin:12px 0; } .oc-system-msg{ background:#f8fafc; color:#64748b; border:1px solid #e2e8f0; border-radius:20px; padding:8px 14px; font-size:12px; display:flex; align-items:center; gap:6px; } .oc-file-action { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-decoration: none; border: 1px solid var(--oc-line2); background: #ffffff; color: var(--oc-txt2); } .oc-file-action:hover { background: var(--oc-blue3); border-color: var(--oc-blue2); color: var(--oc-blue); } .oc-file-action--view { color: var(--oc-blue); border-color: var(--oc-blue2); } .oc-file-action--download { color: var(--oc-teal); border-color: var(--oc-teal2); } .oc-file-action i { font-size: 14px; } .oc-out-file-preview { display: flex; flex-direction: column; gap: 6px; } .oc-file-fallback { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12); border-radius: 10px; padding: 8px 10px; color: #fff; } .oc-mav-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } .oc-rail-agent-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; } /* FIX sidebar conversaciones hasta abajo */ #layoutContainer { overflow: hidden !important; } #app-chat-contacts, .oc-side { height: 100% !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; } #chat-list, .oc-clist, #contact-list { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; } #getchats, .oc-chat-ul { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow-y: auto !important; overflow-x: hidden !important; padding-bottom: 12px !important; } .oc-ci-prev { display: flex !important; align-items: center !important; gap: 4px !important; min-width: 0 !important; } .oc-channel-dot { width: 14px; height: 14px; min-width: 14px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 9px; } .oc-channel-dot i { font-size: 9px; } .oc-channel-icon { background: transparent !important; border: 0 !important; padding: 0 !important; font-size: 13px !important; width: 10px !important; min-width: 10px !important; height: 10px !important; display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; } .oc-channel--wa, .oc-channel--gupshup { color: #16a34a !important; } .oc-channel--ig { color: #db2777 !important; } .oc-channel--fb { color: #2563eb !important; } .oc-channel--web { color: #64748b !important; } .oc-channel--default { color: #94a3b8 !important; } .oc-ch-channel-icon { font-size: 20px !important; flex-shrink: 0; line-height: 1; margin-left: 2px; } .oc-ch-channel-icon--whatsapp, .oc-ch-channel-icon--gupshup { color: #16a34a !important; } .oc-ch-channel-icon--instagram { color: #db2777 !important; } .oc-ch-channel-icon--facebook { color: #2563eb !important; } .oc-ch-channel-icon--webchat { color: #7c3aed !important; } .oc-ch-channel-icon--sms { color: #64748b !important; } .oc-ch-channel-icon--default { color: #94a3b8 !important; } .oc-contact-line { display: flex; align-items: center; gap: 7px; min-width: 0; } .oc-contact-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-contact-status { font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; flex-shrink: 0; } .oc-contact-status--client { background: rgba(34,197,94,.12); color: #16a34a; } .oc-contact-status--lead { background: rgba(245,158,11,.14); color: #d97706; } .oc-contact-status--default { background: rgba(148,163,184,.12); color: #64748b; } /* ========================= OPENYM CALENDAR CLEAN ========================= */ .oc-calendar-page { height: 100%; width: 100%; display: flex; background: var(--oc-bg); overflow: hidden; } .oc-calendar-sidebar { width: 300px; min-width: 300px; height: 100%; background: #fff; border-right: 1px solid var(--oc-line); padding: 14px; overflow-y: auto; } .oc-calendar-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; background: #fff; overflow: hidden; } .oc-calendar-top { height: 68px; flex-shrink: 0; background: #fff; border-bottom: 1px solid var(--oc-line); display: flex; align-items: center; justify-content: space-between; padding: 0 22px; } .oc-calendar-top h4 { margin: 0; font-size: 18px; font-weight: 800; color: var(--oc-txt); } .oc-calendar-top span { font-size: 12px; color: var(--oc-txt3); } .oc-calendar-summary { display: flex; gap: 8px; } .oc-calendar-summary div { min-width: 82px; height: 40px; border-radius: 12px; background: var(--oc-bg3); border: 1px solid var(--oc-line); display: flex; flex-direction: column; align-items: center; justify-content: center; } .oc-calendar-summary strong { font-size: 14px; font-weight: 800; color: var(--oc-txt); } .oc-calendar-summary span { font-size: 10px; color: var(--oc-txt3); } /* Sidebar */ .oc-cal-add { width: 100%; height: 42px; border: 0; border-radius: 12px; background: var(--oc-blue); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; } .oc-cal-card { border: 1px solid var(--oc-line); border-radius: 14px; background: #fff; padding: 14px; margin-bottom: 14px; overflow: hidden; } .oc-cal-card-title { font-size: 11px; font-weight: 800; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; } .oc-cal-mini-stat { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 12px; color: var(--oc-txt3); border-bottom: 1px solid rgba(148, 163, 184, .18); } .oc-cal-mini-stat:last-child { border-bottom: 0; } .oc-cal-mini-stat strong { color: var(--oc-txt); font-weight: 800; } .oc-cal-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--oc-txt2); margin-bottom: 9px; } /* Próximos eventos */ .oc-cal-next-list { display: flex; flex-direction: column; gap: 8px; } .oc-cal-next-empty { min-height: 90px; border-radius: 12px; background: var(--oc-bg3); border: 1px dashed var(--oc-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--oc-txt3); font-size: 12px; } .oc-cal-next-empty i { font-size: 24px; color: var(--oc-blue); opacity: .75; } /* Calendar container */ .oc-calendar-box { flex: 1; min-height: 0; width: 100%; background: #fff; overflow: hidden; } #calendar { height: 100%; width: 100%; padding: 0; } /* FullCalendar */ .oc-calendar-box .fc { height: 100%; width: 100%; background: #fff; color: var(--oc-txt2); font-family: var(--oc-font); } .oc-calendar-box .fc .fc-toolbar { height: 58px; padding: 0 22px !important; margin: 0 !important; border-bottom: 1px solid var(--oc-line); } .oc-calendar-box .fc .fc-toolbar-title { font-size: 18px !important; font-weight: 800 !important; color: var(--oc-txt) !important; } .oc-calendar-box .fc .fc-toolbar-chunk { display: flex; align-items: center; gap: 6px; } .oc-calendar-box .fc .fc-button { height: 32px !important; min-width: 34px !important; padding: 0 12px !important; border-radius: 10px !important; border: 1px solid var(--oc-line) !important; background: #fff !important; color: var(--oc-txt2) !important; box-shadow: none !important; font-size: 12px !important; font-weight: 700 !important; text-transform: none !important; } .oc-calendar-box .fc .fc-button:hover { background: var(--oc-bg3) !important; color: var(--oc-blue) !important; border-color: rgba(37, 99, 235, .25) !important; } .oc-calendar-box .fc .fc-button-primary:not(:disabled).fc-button-active, .oc-calendar-box .fc .fc-button-primary:not(:disabled):active { background: var(--oc-blue) !important; border-color: var(--oc-blue) !important; color: #fff !important; } .oc-calendar-box .fc .fc-today-button { background: rgba(37, 99, 235, .08) !important; color: var(--oc-blue) !important; border-color: rgba(37, 99, 235, .18) !important; } .oc-calendar-box .fc .fc-prev-button, .oc-calendar-box .fc .fc-next-button { width: 32px !important; padding: 0 !important; border-radius: 50% !important; } .oc-calendar-box .fc .fc-button-group { gap: 6px !important; } .oc-calendar-box .fc .fc-button-group > .fc-button { margin-left: 0 !important; border-radius: 10px !important; } /* FullCalendar layout fix */ .oc-calendar-box .fc .fc-view-harness { margin: 0 !important; min-height: 0 !important; height: calc(100% - 58px) !important; } .oc-calendar-box .fc .fc-view-harness-active > .fc-view { inset: 0 !important; } .oc-calendar-box .fc-theme-standard .fc-scrollgrid { border: 0 !important; width: 100% !important; } .oc-calendar-box .fc-theme-standard td, .oc-calendar-box .fc-theme-standard th { border-color: rgba(148, 163, 184, .18) !important; } /* Month grid */ .oc-calendar-box .fc .fc-col-header-cell { height: 34px !important; background: #fff !important; } .oc-calendar-box .fc .fc-col-header-cell-cushion { font-size: 12px; font-weight: 800; color: var(--oc-txt3); text-decoration: none; } .oc-calendar-box .fc .fc-daygrid-day { background: #fff !important; } .oc-calendar-box .fc .fc-daygrid-day:hover { background: rgba(37, 99, 235, .025) !important; } .oc-calendar-box .fc .fc-daygrid-day-frame { padding: 10px 12px !important; } .oc-calendar-box .fc .fc-day-today { background: linear-gradient(180deg, rgba(37,99,235,.07), rgba(37,99,235,.025)) !important; } .oc-calendar-box .fc .fc-daygrid-day-number { width: 24px; height: 24px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--oc-txt2) !important; font-size: 12px !important; font-weight: 700 !important; text-decoration: none; } .oc-calendar-box .fc .fc-day-today .fc-daygrid-day-number { background: var(--oc-blue); color: #fff !important; } .oc-calendar-box .fc .fc-day-other .fc-daygrid-day-number { color: rgba(100, 116, 139, .35) !important; } /* Week / Day view */ .oc-calendar-box .fc .fc-timegrid-axis, .oc-calendar-box .fc .fc-timegrid-slot-label, .oc-calendar-box .fc .fc-scrollgrid-shrink { width: 78px !important; min-width: 78px !important; max-width: 78px !important; } .oc-calendar-box .fc .fc-timegrid-axis-cushion, .oc-calendar-box .fc .fc-timegrid-slot-label-cushion, .oc-calendar-box .fc .fc-scrollgrid-shrink-cushion { width: 78px !important; max-width: 78px !important; padding: 0 12px 0 8px !important; text-align: right !important; white-space: nowrap !important; overflow: visible !important; display: block !important; } .oc-calendar-box .fc .fc-timegrid-axis-frame { min-width: 78px !important; justify-content: flex-end !important; } .oc-calendar-box .fc .fc-timegrid-slot { height: 42px !important; } .oc-calendar-box .fc .fc-timegrid-col.fc-day-today { background: rgba(37, 99, 235, .035) !important; } /* Events */ .oc-calendar-box .fc .fc-event { border: 0 !important; border-radius: 8px !important; padding: 2px 6px !important; font-size: 11px !important; font-weight: 700 !important; } /* Calendar filter chips */ .oc-filter-chips { display: flex; flex-wrap: wrap; gap: 7px; } .oc-filter-chip { height: 28px; border: 1px solid var(--oc-line); background: var(--oc-bg3); color: var(--oc-txt2); border-radius: 999px; padding: 0 10px; font-size: 12px; font-weight: 700; font-family: var(--oc-font); display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: all .15s ease; } .oc-filter-chip i { font-size: 14px; } .oc-filter-chip:hover { background: var(--oc-blue3); border-color: var(--oc-blue2); color: var(--oc-blue); } .oc-filter-chip.active { background: var(--oc-blue); border-color: var(--oc-blue); color: #fff; box-shadow: 0 4px 10px rgba(37, 99, 235, .18); } /* Event badges */ .oc-calendar-box .fc .fc-event { border: 0 !important; border-radius: 10px !important; padding: 0 !important; overflow: hidden !important; box-shadow: none !important; } .oc-fc-event-inner { display: flex; align-items: center; gap: 5px; padding: 5px 8px; font-size: 11px; font-weight: 700; line-height: 1.2; overflow: hidden; } .oc-fc-event-type { font-size: 9px; font-weight: 800; text-transform: uppercase; opacity: .85; } .oc-fc-event-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Colors */ .oc-calendar-box .fc .oc-event-appointment { background: #dbeafe !important; color: #1d4ed8 !important; } .oc-calendar-box .fc .oc-event-followup { background: #dcfce7 !important; color: #15803d !important; } .oc-calendar-box .fc .oc-event-call { background: #fef3c7 !important; color: #b45309 !important; } .oc-calendar-box .fc .oc-event-task { background: #ede9fe !important; color: #6d28d9 !important; } .oc-cal-legend { display: flex; flex-direction: column; gap: 8px; } .oc-cal-legend span { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--oc-txt2); } .oc-lg { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .oc-lg--appointment { background: #2563eb; } .oc-lg--followup { background: #16a34a; } .oc-lg--call { background: #d97706; } .oc-lg--task { background: #7c3aed; } .oc-lg--meeting { background: #db2777; } .oc-lg--reminder { background: #0891b2; } .oc-calendar-box .fc .oc-event-meeting { background: #fce7f3 !important; color: #be185d !important; } .oc-calendar-box .fc .oc-event-reminder { background: #cffafe !important; color: #0e7490 !important; } /* Event detail modal */ .oc-event-modal-dialog { max-width: 560px; } .oc-event-modal { border: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 70px rgba(15, 25, 35, .22); font-family: var(--oc-font); } .oc-event-modal-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: #fff; border-bottom: 1px solid var(--oc-line); } .oc-event-modal-icon { width: 46px; height: 46px; border-radius: 14px; background: var(--oc-blue3); color: var(--oc-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-event-modal-icon i { font-size: 24px; } .oc-event-modal-icon--appointment { background: #dbeafe; color: #1d4ed8; } .oc-event-modal-icon--followup { background: #dcfce7; color: #15803d; } .oc-event-modal-icon--call { background: #fef3c7; color: #b45309; } .oc-event-modal-icon--task { background: #ede9fe; color: #6d28d9; } .oc-event-modal-icon--meeting { background: #fce7f3; color: #be185d; } .oc-event-modal-icon--reminder { background: #cffafe; color: #0e7490; } .oc-event-modal-title-wrap { flex: 1; min-width: 0; } .oc-event-modal-kicker { font-size: 11px; font-weight: 800; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 2px; } .oc-event-modal-title-wrap h5 { margin: 0; font-size: 17px; font-weight: 800; color: var(--oc-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-event-modal-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-txt3); display: flex; align-items: center; justify-content: center; cursor: pointer; } .oc-event-modal-close:hover { background: var(--oc-bg3); color: var(--oc-txt); } .oc-event-modal-body { padding: 18px 20px; background: var(--oc-bg); } .oc-event-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .oc-event-info-item { background: #fff; border: 1px solid var(--oc-line); border-radius: 13px; padding: 12px; } .oc-event-info-item span { display: block; font-size: 11px; color: var(--oc-txt3); margin-bottom: 4px; } .oc-event-info-item strong { font-size: 13px; font-weight: 800; color: var(--oc-txt); } .oc-event-section { margin-top: 16px; } .oc-event-section-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--oc-txt3); margin-bottom: 8px; } .oc-event-contact { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--oc-line); border-radius: 14px; padding: 12px; } .oc-event-contact-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--oc-blue2); color: var(--oc-blue); display: flex; align-items: center; justify-content: center; font-weight: 800; flex-shrink: 0; } .oc-event-contact-body { min-width: 0; } .oc-event-contact-body strong { display: block; font-size: 14px; color: var(--oc-txt); } .oc-event-contact-body span { display: block; font-size: 12px; color: var(--oc-txt3); margin-top: 2px; } .oc-event-tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; width: 100%; } .oc-event-tag { min-width: 0; width: 100%; height: 34px; padding: 0 8px; border-radius: 999px; background: #fff; border: 1px solid var(--oc-line); color: var(--oc-txt2); font-size: 12px; font-weight: 700; } .oc-assign-option i { flex: 0 0 auto; font-size: 16px; } .oc-assign-switch { display: flex; width: 100%; background: #fff; border: 1px solid var(--oc-line); border-radius: 14px; padding: 4px; gap: 4px; } .oc-assign-switch-item { flex: 1; height: 34px; border-radius: 11px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 800; color: var(--oc-txt2); cursor: pointer; margin: 0; } .oc-assign-switch-item input { display: none; } .oc-assign-switch-item i { font-size: 16px; } .oc-assign-switch-item.active { background: var(--oc-blue); color: #fff; box-shadow: 0 6px 14px rgba(37, 99, 235, .18); } .oc-assign-option { display: flex; align-items: center; justify-content: center; gap: 5px; cursor: pointer; white-space: nowrap; } .oc-assign-option span { min-width: 0; font-size: 12px; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-event-note { background: #fff; border: 1px solid var(--oc-line); border-radius: 14px; padding: 12px; font-size: 13px; color: var(--oc-txt2); line-height: 1.5; margin: 0; } .oc-event-modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; background: #fff; border-top: 1px solid var(--oc-line); } /* Event detail side panel */ .oc-event-detail-panel { width: 420px !important; border-left: 1px solid var(--oc-line) !important; background: var(--oc-bg) !important; box-shadow: -14px 0 40px rgba(15, 25, 35, .14) !important; font-family: var(--oc-font); z-index: 1080 !important; } .oc-event-panel-head { height: 82px; padding: 16px 18px; background: #fff; border-bottom: 1px solid var(--oc-line); display: flex; align-items: center; gap: 12px; } .oc-event-panel-body { height: calc(100% - 148px); overflow-y: auto; padding: 16px; background: var(--oc-bg); } .oc-event-panel-foot { height: 66px; padding: 12px 16px; background: #fff; border-top: 1px solid var(--oc-line); display: flex; justify-content: flex-end; gap: 10px; } /* Evita que Bootstrap oscurezca/bloquee el calendario */ .offcanvas-backdrop { display: none !important; } /* Para que el popover de "+ more" quede visible y encima del calendario */ .fc-popover { z-index: 1070 !important; } /* Para que el panel quede por encima del popover si se cruzan */ .oc-event-detail-panel.show { z-index: 1080 !important; } /* Calendar detail panel behavior */ .oc-event-detail-panel { width: 420px !important; border-left: 1px solid var(--oc-line) !important; background: var(--oc-bg) !important; box-shadow: -14px 0 40px rgba(15, 25, 35, .14) !important; font-family: var(--oc-font); z-index: 1080 !important; } .oc-event-detail-panel.show { visibility: visible !important; } .offcanvas-backdrop { display: none !important; } .fc-popover { z-index: 1075 !important; } .fc-popover { z-index: 1070 !important; max-width: 300px !important; border-radius: 12px !important; overflow: hidden !important; box-shadow: 0 14px 35px rgba(15, 25, 35, .18) !important; } .oc-tasks-page { flex: 1; width: 100%; height: 100%; overflow-y: auto; padding: 22px; background: var(--oc-bg); } .oc-tasks-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .oc-tasks-header h5 { margin: 0; font-size: 20px; font-weight: 800; color: var(--oc-txt); } .oc-tasks-header p { margin: 4px 0 0; color: var(--oc-txt3); font-size: 13px; } .oc-task-new-btn { background: var(--oc-blue); color: #fff; border: none; border-radius: 10px; padding: 9px 14px; font-size: 13px; font-weight: 700; } .oc-task-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; } .oc-task-stat { background: #fff; border: 1px solid var(--oc-line); border-radius: 14px; padding: 14px; } .oc-task-stat span { font-size: 12px; color: var(--oc-txt3); } .oc-task-stat strong { display: block; margin-top: 6px; font-size: 24px; color: var(--oc-txt); } .oc-task-toolbar { display: flex; gap: 10px; margin-bottom: 16px; } .oc-task-search { flex: 1; display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--oc-line); border-radius: 12px; padding: 10px 12px; } .oc-task-search input, .oc-task-toolbar select { border: none; outline: none; background: transparent; width: 100%; font-size: 13px; } .oc-task-toolbar select { width: 180px; background: #fff; border: 1px solid var(--oc-line); border-radius: 12px; padding: 10px 12px; } .oc-task-columns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .oc-task-column { background: #f8fafc; border: 1px solid var(--oc-line); border-radius: 16px; padding: 12px; min-height: 400px; } .oc-task-column-title { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 13px; font-weight: 800; color: var(--oc-txt); } .oc-task-column-title strong { background: var(--oc-bg3); border-radius: 999px; padding: 2px 8px; font-size: 11px; } .oc-task-card { background: #fff; border: 1px solid var(--oc-line); border-radius: 14px; padding: 14px; margin-bottom: 10px; box-shadow: 0 6px 18px rgba(15,25,35,.05); } .oc-task-card--overdue { border-color: #fecaca; background: #fffafa; } .oc-task-top { display: flex; justify-content: space-between; margin-bottom: 8px; } .oc-task-badge { font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; } .oc-task-badge--high { background: #fee2e2; color: #dc2626; } .oc-task-badge--medium { background: #fef3c7; color: #d97706; } .oc-task-badge--low { background: #dbeafe; color: var(--oc-blue); } .oc-task-time { font-size: 11px; color: var(--oc-txt3); } .oc-task-title { font-size: 14px; font-weight: 800; color: var(--oc-txt); margin-bottom: 8px; } .oc-task-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--oc-txt3); margin-bottom: 12px; } .oc-task-actions { display: flex; gap: 8px; } .oc-task-actions button { border: 1px solid var(--oc-line); background: var(--oc-bg3); border-radius: 8px; padding: 6px 10px; font-size: 12px; } .oc-task-action-primary { background: var(--oc-blue) !important; color: #fff !important; border-color: var(--oc-blue) !important; } /* ============================================================ OPENYM TASK CENTER - EXTRA UI ============================================================ */ .oc-task-page-local { height: 100%; overflow-y: auto; overflow-x: hidden; } /* Top status cards + filters */ .oc-task-board-head { background: #fff; border: 1px solid var(--oc-line); border-radius: 16px; overflow: hidden; margin-bottom: 16px; } .oc-task-status-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--oc-line); } .oc-task-status-card { min-height: 86px; padding: 14px 16px; border: none; border-right: 1px solid var(--oc-line); background: #fff; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; transition: all .15s ease; font-family: var(--oc-font); } .oc-task-status-card:last-child { border-right: none; } .oc-task-status-card:hover { background: var(--oc-bg3); } .oc-task-status-card.active { background: linear-gradient(180deg, #fff 0%, var(--oc-blue3) 100%); box-shadow: inset 0 -3px 0 var(--oc-blue); } .oc-task-status-icon { width: 38px; height: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-task-status-icon i { font-size: 20px; } .oc-task-status-info { min-width: 0; } .oc-task-status-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--oc-txt); margin-bottom: 4px; } .oc-task-status-title span { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--oc-bg3); color: var(--oc-txt2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; } .oc-task-status-card.active .oc-task-status-title { color: var(--oc-blue); } .oc-task-status-card.active .oc-task-status-title span { background: var(--oc-blue); color: #fff; } .oc-task-status-info p { margin: 0; font-size: 11.5px; color: var(--oc-txt3); line-height: 1.35; } /* Filters */ .oc-task-filter-box { padding: 14px 16px 16px; background: #fff; } .oc-task-filter-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .oc-task-filter-title strong { display: block; font-size: 13px; font-weight: 900; color: var(--oc-txt); } .oc-task-filter-title span { display: block; margin-top: 2px; font-size: 12px; color: var(--oc-txt3); } .oc-task-clear-btn { border: none; background: transparent; color: var(--oc-blue); font-size: 12px; font-weight: 800; cursor: pointer; } .oc-task-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)) 110px; gap: 10px; } .oc-task-filter-grid select, .oc-task-date-btn { height: 40px; border: 1px solid var(--oc-line); background: var(--oc-bg2); color: var(--oc-txt2); border-radius: 11px; padding: 0 12px; font-size: 13px; font-family: var(--oc-font); outline: none; } .oc-task-filter-grid select:focus, .oc-task-date-btn:focus { border-color: var(--oc-blue); } .oc-task-date-btn { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; cursor: pointer; } .oc-task-date-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* 4 columns board */ .oc-task-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(245px, 1fr)); gap: 14px; align-items: start; } /* Small labels */ .oc-task-mini-label { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid var(--oc-line); background: var(--oc-bg3); color: var(--oc-txt2); } .oc-task-mini-label--blue { background: var(--oc-blue3); border-color: var(--oc-blue2); color: var(--oc-blue); } .oc-task-mini-label--green { background: var(--oc-grn2); border-color: var(--oc-grn2); color: var(--oc-grn); } .oc-task-mini-label--red { background: var(--oc-red2); border-color: var(--oc-red2); color: var(--oc-red); } /* Task detail side panel */ .oc-task-detail-panel { width: 460px !important; background: var(--oc-bg) !important; border-left: 1px solid var(--oc-line) !important; font-family: var(--oc-font); box-shadow: -18px 0 50px rgba(15, 25, 35, .16); z-index: 1080 !important; } .oc-task-detail-head { height: 78px; background: #fff; border-bottom: 1px solid var(--oc-line); padding: 16px 18px; display: flex; align-items: center; gap: 12px; } .oc-task-detail-body { height: calc(100% - 78px); overflow-y: auto; padding: 16px; } .oc-detail-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--oc-blue3); color: var(--oc-blue); flex-shrink: 0; } .oc-detail-icon i { font-size: 22px; } .oc-detail-title { font-size: 15px; font-weight: 900; color: var(--oc-txt); margin: 0; } .oc-detail-sub { font-size: 12px; color: var(--oc-txt3); margin-top: 2px; } .oc-detail-close { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-txt3); display: flex; align-items: center; justify-content: center; margin-left: auto; cursor: pointer; } .oc-detail-card { background: #fff; border: 1px solid var(--oc-line); border-radius: 14px; padding: 14px; margin-bottom: 12px; } .oc-detail-card-title { font-size: 11px; font-weight: 900; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; } .oc-detail-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--oc-line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; } .oc-detail-tab { height: 38px; border: none; background: #fff; border-right: 1px solid var(--oc-line); color: var(--oc-txt3); font-size: 12px; font-weight: 800; cursor: pointer; font-family: var(--oc-font); } .oc-detail-tab:last-child { border-right: none; } .oc-detail-tab.active { background: var(--oc-blue3); color: var(--oc-blue); } /* Timeline */ .oc-timeline { display: flex; flex-direction: column; gap: 10px; } .oc-timeline-item { display: flex; gap: 10px; position: relative; } .oc-timeline-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-timeline-icon i { font-size: 16px; } .oc-timeline-body { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--oc-line); border-radius: 12px; padding: 10px 12px; } .oc-timeline-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; } .oc-timeline-title { font-size: 13px; font-weight: 900; color: var(--oc-txt); } .oc-timeline-time { font-size: 11px; color: var(--oc-txt3); font-family: var(--oc-mono); white-space: nowrap; } .oc-timeline-desc { font-size: 12px; color: var(--oc-txt3); line-height: 1.45; } /* Bot actions in task detail */ .oc-bot-action-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--oc-line); } .oc-bot-action-row:last-child { border-bottom: none; padding-bottom: 0; } .oc-bot-avatar { width: 34px; height: 34px; border-radius: 11px; background: #cffafe; color: #0e7490; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-bot-action-title { font-size: 13px; font-weight: 900; color: var(--oc-txt); } .oc-bot-action-meta { font-size: 12px; color: var(--oc-txt3); margin-top: 2px; line-height: 1.4; } /* Responsive */ @media (max-width: 1300px) { .oc-task-grid-4 { grid-template-columns: repeat(2, minmax(260px, 1fr)); } .oc-task-status-grid { grid-template-columns: repeat(2, 1fr); } .oc-task-filter-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } } /* ============================================================ OPENYM TASK CENTER - BOARD UI ============================================================ */ .oc-task-page-local { height: 100%; overflow-y: auto; overflow-x: hidden; } /* Header status cards */ .oc-task-board-head { background: #fff; border: 1px solid var(--oc-line); border-radius: 16px; overflow: hidden; margin-bottom: 16px; } .oc-task-status-grid { display: grid; grid-template-columns: repeat(5, 1fr); border-bottom: 1px solid var(--oc-line); } .oc-task-status-card { min-height: 86px; padding: 14px 16px; border: none; border-right: 1px solid var(--oc-line); background: #fff; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer; transition: all .15s ease; font-family: var(--oc-font); } .oc-task-status-card:last-child { border-right: none; } .oc-task-status-card:hover { background: var(--oc-bg3); } .oc-task-status-card.active { background: linear-gradient(180deg, #fff 0%, var(--oc-blue3) 100%); box-shadow: inset 0 -3px 0 var(--oc-blue); } .oc-task-status-icon { width: 38px; height: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-task-status-icon i { font-size: 20px; } .oc-task-status-icon--blue { background: var(--oc-blue3); color: var(--oc-blue); } .oc-task-status-icon--purple { background: var(--oc-pur2); color: var(--oc-pur); } .oc-task-status-icon--red { background: var(--oc-red2); color: var(--oc-red); } .oc-task-status-icon--green { background: var(--oc-grn2); color: var(--oc-grn); } .oc-task-status-icon--amber { background: var(--oc-amb2); color: var(--oc-amb); } .oc-task-status-info { min-width: 0; } .oc-task-status-title { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 900; color: var(--oc-txt); margin-bottom: 4px; } .oc-task-status-title span { min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; background: var(--oc-bg3); color: var(--oc-txt2); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; } .oc-task-status-card.active .oc-task-status-title { color: var(--oc-blue); } .oc-task-status-card.active .oc-task-status-title span { background: var(--oc-blue); color: #fff; } .oc-task-status-info p { margin: 0; font-size: 11.5px; color: var(--oc-txt3); line-height: 1.35; } /* Filters */ .oc-task-filter-box { padding: 14px 16px 16px; background: #fff; } .oc-task-filter-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .oc-task-filter-title strong { display: block; font-size: 13px; font-weight: 900; color: var(--oc-txt); } .oc-task-filter-title span { display: block; margin-top: 2px; font-size: 12px; color: var(--oc-txt3); } .oc-task-clear-btn { border: none; background: transparent; color: var(--oc-blue); font-size: 12px; font-weight: 800; cursor: pointer; } .oc-task-filter-grid { display: grid; grid-template-columns: repeat(5, minmax(150px, 1fr)) 110px; gap: 10px; } .oc-task-filter-grid select, .oc-task-date-btn { height: 40px; border: 1px solid var(--oc-line); background: var(--oc-bg2); color: var(--oc-txt2); border-radius: 11px; padding: 0 12px; font-size: 13px; font-family: var(--oc-font); outline: none; } .oc-task-date-btn { display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 800; cursor: pointer; } .oc-task-date-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* Board */ .oc-task-board-4 { display: grid; grid-template-columns: repeat(4, minmax(245px, 1fr)); gap: 14px; align-items: start; } .oc-task-full-list { display: grid; grid-template-columns: repeat(3, minmax(280px, 1fr)); gap: 14px; align-items: start; } /* Small labels */ .oc-task-mini-label { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 11px; font-weight: 800; border: 1px solid var(--oc-line); background: var(--oc-bg3); color: var(--oc-txt2); } .oc-task-mini-label--blue { background: var(--oc-blue3); border-color: var(--oc-blue2); color: var(--oc-blue); } .oc-task-mini-label--green { background: var(--oc-grn2); border-color: var(--oc-grn2); color: var(--oc-grn); } .oc-task-mini-label--red { background: var(--oc-red2); border-color: var(--oc-red2); color: var(--oc-red); } .oc-task-mini-label--purple { background: var(--oc-pur2); border-color: var(--oc-pur2); color: var(--oc-pur); } /* Card helpers */ .oc-task-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; } .oc-task-card-icon { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-task-card-icon--blue { background: var(--oc-blue3); color: var(--oc-blue); } .oc-task-card-icon--purple { background: var(--oc-pur2); color: var(--oc-pur); } .oc-task-card-icon--red { background: var(--oc-red2); color: var(--oc-red); } .oc-task-card-icon--green { background: var(--oc-grn2); color: var(--oc-grn); } .oc-task-message-box { background: var(--oc-bg3); border: 1px solid var(--oc-line); border-radius: 10px; padding: 9px 10px; margin-bottom: 10px; } .oc-task-message-label { font-size: 11px; color: var(--oc-txt3); font-weight: 800; margin-bottom: 4px; } .oc-task-message-text { font-size: 12px; color: var(--oc-txt2); line-height: 1.5; } .oc-task-due-box { display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--oc-line); border-radius: 10px; padding: 8px 10px; margin-bottom: 12px; } .oc-task-due-box span { font-size: 12px; color: var(--oc-txt3); font-weight: 800; } .oc-task-due-box strong { font-size: 12px; color: var(--oc-txt); } .oc-task-due-box--red { background: var(--oc-red3); border-color: var(--oc-red2); } .oc-task-due-box--red span, .oc-task-due-box--red strong { color: var(--oc-red); } .oc-task-open-chat-btn { width: 100%; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-blue); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 800; } /* Detail offcanvas */ .oc-task-detail-panel { width: 460px !important; background: var(--oc-bg) !important; border-left: 1px solid var(--oc-line) !important; font-family: var(--oc-font); box-shadow: -18px 0 50px rgba(15, 25, 35, .16); z-index: 1080 !important; } .oc-task-detail-head { height: 78px; background: #fff; border-bottom: 1px solid var(--oc-line); padding: 16px 18px; display: flex; align-items: center; gap: 12px; } .oc-task-detail-body { height: calc(100% - 78px); overflow-y: auto; padding: 16px; } .oc-detail-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--oc-blue3); color: var(--oc-blue); flex-shrink: 0; } .oc-detail-icon i { font-size: 22px; } .oc-detail-title { font-size: 15px; font-weight: 900; color: var(--oc-txt); margin: 0; } .oc-detail-sub { font-size: 12px; color: var(--oc-txt3); margin-top: 2px; } .oc-detail-close { width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-txt3); display: flex; align-items: center; justify-content: center; margin-left: auto; cursor: pointer; } .oc-detail-card { background: #fff; border: 1px solid var(--oc-line); border-radius: 14px; padding: 14px; margin-bottom: 12px; } .oc-detail-card-title { font-size: 11px; font-weight: 900; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 10px; } .oc-detail-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: #fff; border: 1px solid var(--oc-line); border-radius: 12px; overflow: hidden; margin-bottom: 12px; } .oc-detail-tab { height: 38px; border: none; background: #fff; border-right: 1px solid var(--oc-line); color: var(--oc-txt3); font-size: 12px; font-weight: 800; cursor: pointer; font-family: var(--oc-font); } .oc-detail-tab:last-child { border-right: none; } .oc-detail-tab.active { background: var(--oc-blue3); color: var(--oc-blue); } .oc-detail-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .oc-detail-info-box { background: var(--oc-bg3); border-radius: 10px; padding: 10px; } .oc-detail-info-box span { display: block; font-size: 11px; color: var(--oc-txt3); font-weight: 800; } .oc-detail-info-box strong { display: block; font-size: 13px; font-weight: 900; color: var(--oc-txt); margin-top: 3px; } /* Timeline */ .oc-timeline { display: flex; flex-direction: column; gap: 10px; } .oc-timeline-item { display: flex; gap: 10px; position: relative; } .oc-timeline-icon { width: 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-timeline-icon i { font-size: 16px; } .oc-timeline-body { flex: 1; min-width: 0; background: #fff; border: 1px solid var(--oc-line); border-radius: 12px; padding: 10px 12px; } .oc-timeline-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; } .oc-timeline-title { font-size: 13px; font-weight: 900; color: var(--oc-txt); } .oc-timeline-time { font-size: 11px; color: var(--oc-txt3); font-family: var(--oc-mono); white-space: nowrap; } .oc-timeline-desc { font-size: 12px; color: var(--oc-txt3); line-height: 1.45; } /* Bot actions in detail only */ .oc-bot-action-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--oc-line); } .oc-bot-action-row:last-child { border-bottom: none; padding-bottom: 0; } .oc-bot-avatar { width: 34px; height: 34px; border-radius: 11px; background: #cffafe; color: #0e7490; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-bot-action-title { font-size: 13px; font-weight: 900; color: var(--oc-txt); } .oc-bot-action-meta { font-size: 12px; color: var(--oc-txt3); margin-top: 2px; line-height: 1.4; } /* Responsive */ @media (max-width: 1300px) { .oc-task-board-4 { grid-template-columns: repeat(2, minmax(260px, 1fr)); } .oc-task-full-list { grid-template-columns: repeat(2, minmax(260px, 1fr)); } .oc-task-status-grid { grid-template-columns: repeat(2, 1fr); } .oc-task-filter-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); } } .oc-task-detail-panel.show { visibility: visible !important; transform: none !important; } body.oc-task-panel-open .oc-task-detail-panel { visibility: visible !important; } .oc-detail-close { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-txt); display: flex; align-items: center; justify-content: center; margin-left: auto; cursor: pointer; font-size: 24px; font-weight: 700; line-height: 1; } .oc-detail-close:hover { background: var(--oc-red2); color: var(--oc-red); border-color: var(--oc-red2); } .oc-task-detail-panel { transition: transform .18s ease, visibility .18s ease; } .oc-task-detail-panel:not(.show) { transform: translateX(100%) !important; visibility: hidden !important; } .oc-task-detail-panel.show { transform: translateX(0) !important; visibility: visible !important; } .oc-cal-next-item { display: flex; gap: 10px; padding: 10px; border-radius: 12px; background: var(--oc-bg3); border: 1px solid var(--oc-line); } .oc-cal-next-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--oc-blue); } .oc-cal-next-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .oc-cal-next-body strong { font-size: 12.5px; color: var(--oc-txt); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-cal-next-body span { font-size: 11.5px; color: var(--oc-txt3); } .oc-cal-next-body small { font-size: 10.5px; color: var(--oc-txt2); font-weight: 700; } .oc-cal-next-item--appointment .oc-cal-next-dot { background: #2563eb; } .oc-cal-next-item--followup .oc-cal-next-dot { background: #16a34a; } .oc-cal-next-item--call .oc-cal-next-dot { background: #d97706; } .oc-cal-next-item--task .oc-cal-next-dot { background: #7c3aed; } .oc-cal-next-item--meeting .oc-cal-next-dot { background: #db2777; } .oc-cal-next-item--reminder .oc-cal-next-dot { background: #0891b2; } .oc-filter-chip b, .oc-cal-legend b { margin-left: auto; font-size: 10px; font-weight: 800; opacity: .75; } .oc-cal-legend span { justify-content: space-between; } .oc-event-detail-panel { height: 100vh; display: flex; flex-direction: column; background: #f4f6fb; } .oc-event-detail-panel form.event-form { height: 100%; display: flex; flex-direction: column; min-height: 0; } .oc-event-panel-head { flex: 0 0 auto; } .oc-event-panel-body { flex: 1 1 auto; overflow-y: auto; padding-bottom: 20px; } .oc-event-panel-foot { flex: 0 0 auto; position: sticky; bottom: 0; z-index: 20; background: #ffffff; border-top: 1px solid #e5e7eb; padding: 14px 16px; } .oc-contact-search-results { position: absolute; top: 44px; left: 0; right: 0; background: #fff; border: 1px solid #dbe1ea; border-radius: 14px; box-shadow: 0 16px 34px rgba(15, 23, 42, .12); z-index: 30; overflow: hidden; } .oc-contact-result-item { padding: 10px 12px; cursor: pointer; display: flex; gap: 10px; align-items: center; } .oc-contact-result-item:hover { background: #f3f6ff; } .oc-contact-result-avatar { width: 34px; height: 34px; border-radius: 50%; background: #dbeafe; display: flex; align-items: center; justify-content: center; font-weight: 700; color: #2563eb; } .oc-contact-result-body strong { display: block; font-size: 13px; } .oc-contact-result-body span { display: block; font-size: 12px; color: #64748b; } /* ============================================================ TABS TODOS / SIN LEER ============================================================ */ .oc-tab-row { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--oc-line); } .oc-tab { flex: 1; padding: 9px 4px 7px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; border: none; background: transparent; border-bottom: 2px solid transparent; transition: all 0.12s; font-family: var(--oc-font); } .oc-tab:hover { background: var(--oc-bg3); } .oc-tab.active { border-bottom-color: var(--oc-blue); background: var(--oc-bg3); } .oc-tab-val { font-size: 13px; font-weight: 400; font-family: var(--oc-font); letter-spacing: 0.01em; color: var(--oc-txt3); line-height: 1; } .oc-tab.active .oc-tab-val { color: var(--oc-txt); font-weight: 500; } .oc-tab-val--red { color: var(--oc-red); } .oc-tab-lbl { font-size: 9px; color: var(--oc-txt4); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; } .oc-tab.active .oc-tab-lbl { color: var(--oc-blue); } /* ============================================================ PUNTO SLA EN CONVERSACIONES ============================================================ */ .oc-sla-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; align-self: center; } .oc-sla-dot--ok { background: var(--oc-grn); } .oc-sla-dot--warn { background: var(--oc-amb); } .oc-sla-dot--danger { background: var(--oc-red); } /* ============================================================ VIDEO THUMBNAIL — no carga hasta click ============================================================ */ .oc-video-thumb { width: 240px; height: 160px; background: var(--oc-bg4); border-radius: 12px; display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; overflow: hidden; } .oc-video-thumb:hover .oc-video-play-btn { transform: scale(1.1); } .oc-video-play-btn { width: 48px; height: 48px; border-radius: 50%; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; transition: transform 0.15s; } .oc-video-play-btn i { color: #fff; font-size: 20px; margin-left: 2px; } .oc-video-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; } /* ============================================================ OPENYM CONTACT DIRECTORY ============================================================ */ .oc-dir-page { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) 390px; background: #fff; overflow: hidden; font-family: var(--oc-font); } /* MAIN */ .oc-dir-main { height: 100%; min-width: 0; overflow-y: auto; padding: 22px 28px; border-right: 1px solid var(--oc-line); background: #fff; } .oc-dir-main::-webkit-scrollbar, .oc-dir-detail-body::-webkit-scrollbar { width: 4px; } .oc-dir-main::-webkit-scrollbar-thumb, .oc-dir-detail-body::-webkit-scrollbar-thumb { background: var(--oc-line2); border-radius: 999px; } /* HEADER */ .oc-dir-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; } .oc-dir-header h4 { margin: 0; font-size: 25px; font-weight: 900; color: var(--oc-txt); letter-spacing: -0.03em; } .oc-dir-header p { margin: 5px 0 0; font-size: 13px; color: var(--oc-txt3); } .oc-dir-header-actions { display: flex; gap: 10px; } .oc-dir-outline-btn, .oc-dir-primary-btn { height: 42px; border-radius: 11px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 900; font-family: var(--oc-font); cursor: pointer; transition: all .15s ease; } .oc-dir-outline-btn { border: 1px solid var(--oc-line); background: #fff; color: var(--oc-txt2); } .oc-dir-outline-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } .oc-dir-primary-btn { border: 0; background: var(--oc-blue); color: #fff; box-shadow: 0 10px 20px rgba(37, 99, 235, .18); } .oc-dir-primary-btn:hover { background: #1d4ed8; } /* SEARCH */ .oc-dir-search-row { display: flex; justify-content: center; margin-bottom: 18px; } .oc-dir-search { width: min(620px, 100%); height: 44px; border: 1px solid var(--oc-line); border-radius: 13px; display: flex; align-items: center; gap: 9px; padding: 0 13px; background: #fff; } .oc-dir-search:focus-within { border-color: var(--oc-blue); box-shadow: 0 0 0 .15rem rgba(37, 99, 235, .08); } .oc-dir-search i { color: var(--oc-txt3); font-size: 17px; } .oc-dir-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--oc-txt); font-size: 13px; font-family: var(--oc-font); } .oc-dir-search span { min-width: 36px; height: 24px; border-radius: 7px; background: var(--oc-bg3); color: var(--oc-txt3); font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; justify-content: center; } /* CHIPS */ .oc-dir-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .oc-dir-chip, .oc-dir-more-filter { height: 38px; border: 1px solid var(--oc-line); border-radius: 10px; background: #fff; color: var(--oc-txt2); padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 900; font-family: var(--oc-font); cursor: pointer; transition: all .15s ease; } .oc-dir-chip:hover, .oc-dir-more-filter:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } .oc-dir-chip.active { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } .oc-dir-chip b { color: inherit; font-weight: 900; } .oc-dir-chip-separator { width: 1px; height: 28px; background: var(--oc-line); margin: 0 4px; } .oc-dir-more-filter { margin-left: auto; } /* LIST HEAD */ .oc-dir-list-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .oc-dir-list-head > span { font-size: 13px; font-weight: 800; color: var(--oc-txt2); } .oc-dir-list-tools { display: flex; align-items: center; gap: 8px; } .oc-dir-order-select { height: 38px; border: 1px solid var(--oc-line); border-radius: 10px; background: #fff; padding: 0 12px; color: var(--oc-txt2); font-size: 12px; font-weight: 800; font-family: var(--oc-font); } .oc-dir-view-btn { width: 38px; height: 38px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-txt3); border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .oc-dir-view-btn.active { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* GRID */ .oc-dir-grid { display: grid; grid-template-columns: repeat(4, minmax(220px, 1fr)); gap: 14px; padding-bottom: 28px; } .oc-dir-card { min-height: 225px; border: 1px solid var(--oc-line); border-radius: 17px; background: #fff; padding: 16px; position: relative; cursor: pointer; transition: all .15s ease; } .oc-dir-card:hover, .oc-dir-card.active { border-color: var(--oc-blue2); box-shadow: 0 14px 32px rgba(15, 25, 35, .08); transform: translateY(-1px); } .oc-dir-card.active { outline: 2px solid rgba(37, 99, 235, .2); } .oc-dir-card-menu { position: absolute; right: 10px; top: 10px; width: 28px; height: 28px; border: 0; background: transparent; color: var(--oc-txt3); display: flex; align-items: center; justify-content: center; cursor: pointer; } .oc-dir-card-menu:hover { color: var(--oc-blue); } .oc-dir-card-top { display: flex; align-items: flex-start; gap: 13px; padding-right: 24px; } .oc-dir-avatar { width: 54px; height: 54px; border-radius: 50%; background: var(--oc-blue2); color: var(--oc-blue); font-size: 15px; font-weight: 900; display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } .oc-dir-channel-badge { position: absolute; left: -2px; bottom: -2px; width: 22px; height: 22px; border: 3px solid #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; } .oc-dir-channel-badge i { font-size: 12px; } .oc-dir-channel-badge--whatsapp, .oc-dir-channel-badge--gupshup { background: var(--oc-grn); } .oc-dir-channel-badge--instagram { background: #db2777; } .oc-dir-channel-badge--facebook { background: var(--oc-blue); } .oc-dir-channel-badge--webchat { background: var(--oc-pur); } .oc-dir-channel-badge--email { background: var(--oc-blue); } .oc-dir-card-name { min-width: 0; } .oc-dir-card-name strong { display: block; color: var(--oc-txt); font-size: 15px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-dir-card-name span { margin-top: 5px; color: var(--oc-txt2); font-size: 12.5px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; } .oc-dir-card-contact { margin-top: 12px; color: var(--oc-txt2); font-size: 12.5px; font-weight: 700; min-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-dir-card-status-row { margin-top: 12px; } .oc-dir-status { height: 24px; border-radius: 999px; padding: 0 9px; font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; white-space: nowrap; } .oc-dir-status--lead { background: var(--oc-amb2); color: var(--oc-amb); } .oc-dir-status--prospect { background: var(--oc-pur2); color: var(--oc-pur); } .oc-dir-status--client { background: var(--oc-grn2); color: var(--oc-grn); } .oc-dir-status--inactive { background: var(--oc-bg3); color: var(--oc-txt3); } .oc-dir-status--lost { background: var(--oc-red2); color: var(--oc-red); } .oc-dir-card-divider { height: 1px; background: var(--oc-line); margin: 16px 0 12px; } .oc-dir-card-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .oc-dir-card-meta div { min-width: 0; } .oc-dir-card-meta span { display: block; color: var(--oc-txt3); font-size: 11px; font-weight: 800; } .oc-dir-card-meta strong { display: block; margin-top: 4px; color: var(--oc-txt); font-size: 12.5px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-dir-card-actions { display: flex; justify-content: center; gap: 10px; margin-top: 14px; } .oc-dir-card-action { width: 38px; height: 34px; border-radius: 10px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-txt2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .oc-dir-card-action:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* DETAIL */ .oc-dir-detail { height: 100%; background: #fff; display: flex; flex-direction: column; overflow: hidden; position: relative; } .oc-dir-detail-close { position: absolute; right: 18px; top: 18px; width: 32px; height: 32px; border: 0; background: transparent; color: var(--oc-txt2); display: flex; align-items: center; justify-content: center; cursor: pointer; } .oc-dir-detail-close:hover { color: var(--oc-red); } .oc-dir-detail-head { padding: 34px 26px 18px; display: flex; align-items: flex-start; gap: 16px; border-bottom: 1px solid var(--oc-line); } .oc-dir-detail-avatar { width: 76px; height: 76px; border-radius: 50%; background: var(--oc-blue2); color: var(--oc-blue); font-size: 22px; font-weight: 900; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-dir-detail-info { min-width: 0; } .oc-dir-detail-info h5 { margin: 0; color: var(--oc-txt); font-size: 18px; font-weight: 900; } .oc-dir-detail-info > span:not(.oc-dir-status) { margin-top: 5px; color: var(--oc-txt3); font-size: 13px; font-weight: 800; display: inline-flex; align-items: center; gap: 5px; } .oc-dir-detail-channel-icons { margin-top: 10px; display: flex; align-items: center; gap: 7px; } .oc-dir-detail-channel-icons i, .oc-dir-detail-channel-icons span { width: 24px; height: 24px; border-radius: 50%; background: var(--oc-bg3); color: var(--oc-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 900; } /* DETAIL TABS */ .oc-dir-detail-tabs { height: 54px; border-bottom: 1px solid var(--oc-line); display: grid; grid-template-columns: repeat(4, 1fr); } .oc-dir-detail-tabs button { border: 0; background: #fff; color: var(--oc-txt3); border-bottom: 3px solid transparent; font-size: 12px; font-weight: 900; font-family: var(--oc-font); cursor: pointer; } .oc-dir-detail-tabs button:hover { background: var(--oc-bg3); color: var(--oc-blue); } .oc-dir-detail-tabs button.active { color: var(--oc-blue); border-bottom-color: var(--oc-blue); } .oc-dir-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 22px; } .oc-dir-tab { display: none; } .oc-dir-tab.active { display: block; } .oc-dir-detail-section { padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--oc-line); } .oc-dir-detail-title { color: var(--oc-txt); font-size: 14px; font-weight: 900; margin-bottom: 13px; } /* INFO LIST */ .oc-dir-info-list, .oc-dir-channel-list { display: flex; flex-direction: column; gap: 11px; } .oc-dir-info-list div, .oc-dir-channel-list div { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .oc-dir-info-list span, .oc-dir-channel-list span { color: var(--oc-txt3); font-size: 12px; font-weight: 800; display: inline-flex; align-items: center; gap: 7px; } .oc-dir-info-list strong, .oc-dir-channel-list strong { color: var(--oc-txt2); font-size: 12.5px; font-weight: 900; text-align: right; min-width: 0; } .oc-dir-mini-tag { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--oc-blue3); color: var(--oc-blue); font-size: 10.5px; font-weight: 900; display: inline-flex; align-items: center; margin-left: 3px; } .oc-dir-view-all-channels { height: 34px; border: 1px solid var(--oc-line); background: #fff; color: var(--oc-txt2); border-radius: 10px; font-size: 12px; font-weight: 900; font-family: var(--oc-font); cursor: pointer; } .oc-dir-view-all-channels:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* LAST CHAT */ .oc-dir-last-chat { border: 1px solid var(--oc-line); border-radius: 14px; background: var(--oc-bg3); padding: 12px; display: flex; gap: 11px; } .oc-dir-last-chat > div:first-child { width: 34px; height: 34px; border-radius: 50%; background: var(--oc-grn2); color: var(--oc-grn); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-dir-last-chat strong { color: var(--oc-txt2); font-size: 12.5px; font-weight: 900; } .oc-dir-last-chat p { margin: 5px 0 8px; color: var(--oc-txt2); font-size: 12px; line-height: 1.4; } .oc-dir-last-chat button { width: 100%; height: 32px; border: 1px solid var(--oc-line); border-radius: 9px; background: #fff; color: var(--oc-blue); font-size: 12px; font-weight: 900; cursor: pointer; } /* ACTIVITY */ .oc-dir-activity-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .oc-dir-activity-grid div { border: 1px solid var(--oc-line); border-radius: 13px; padding: 12px; background: #fff; } .oc-dir-activity-grid span { display: block; color: var(--oc-txt3); font-size: 11.5px; font-weight: 800; } .oc-dir-activity-grid strong { display: block; margin-top: 6px; color: var(--oc-txt); font-size: 20px; font-weight: 900; } .oc-dir-activity-grid small { display: block; margin-top: 3px; color: var(--oc-txt4); font-size: 10.5px; } /* ACTIONS */ .oc-dir-detail-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .oc-dir-detail-primary, .oc-dir-detail-secondary { height: 42px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; font-weight: 900; font-family: var(--oc-font); cursor: pointer; } .oc-dir-detail-primary { border: 0; background: var(--oc-blue); color: #fff; } .oc-dir-detail-primary:hover { background: #1d4ed8; } .oc-dir-detail-secondary { border: 1px solid var(--oc-blue); background: #fff; color: var(--oc-blue); } .oc-dir-detail-secondary:hover { background: var(--oc-blue3); } /* EMPTY / NOTE */ .oc-dir-empty { min-height: 280px; border: 1px dashed var(--oc-line2); border-radius: 16px; background: var(--oc-bg3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; color: var(--oc-txt3); padding: 24px; } .oc-dir-empty i { font-size: 40px; color: var(--oc-blue); } .oc-dir-empty strong { color: var(--oc-txt); font-size: 15px; font-weight: 900; } .oc-dir-empty span { max-width: 280px; font-size: 13px; line-height: 1.45; } .oc-dir-note-box { border: 1px solid var(--oc-line); border-radius: 15px; padding: 14px; background: #fff; } .oc-dir-note-box textarea { border-radius: 12px; border-color: var(--oc-line); resize: none; font-size: 13px; } .oc-dir-note-box textarea:focus { border-color: var(--oc-blue); box-shadow: 0 0 0 .15rem rgba(37, 99, 235, .12); } /* RESPONSIVE */ @media (max-width: 1600px) { .oc-dir-grid { grid-template-columns: repeat(3, minmax(220px, 1fr)); } } @media (max-width: 1300px) { .oc-dir-page { grid-template-columns: minmax(0, 1fr) 360px; } .oc-dir-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } } @media (max-width: 1100px) { .oc-dir-page { grid-template-columns: 1fr; } .oc-dir-detail { display: none; } .oc-dir-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); } } @media (max-width: 760px) { .oc-dir-main { padding: 16px; } .oc-dir-header { flex-direction: column; } .oc-dir-header-actions { width: 100%; } .oc-dir-outline-btn, .oc-dir-primary-btn { flex: 1; } .oc-dir-search-row { justify-content: stretch; } .oc-dir-grid { grid-template-columns: 1fr; } .oc-dir-more-filter { margin-left: 0; } } .oc-dir-loading { grid-column: 1 / -1; min-height: 260px; border: 1px dashed var(--oc-line2); border-radius: 16px; background: var(--oc-bg3); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: var(--oc-txt3); font-size: 13px; font-weight: 800; } .oc-dir-loading i { font-size: 32px; color: var(--oc-blue); animation: ocSpin 1s linear infinite; } @keyframes ocSpin { to { transform: rotate(360deg); } } .oc-dir-load-more-wrap { display: flex; justify-content: center; padding: 8px 0 30px; } .oc-dir-load-more { height: 40px; border: 1px solid var(--oc-line); border-radius: 12px; background: #fff; color: var(--oc-txt2); padding: 0 18px; font-size: 13px; font-weight: 900; font-family: var(--oc-font); cursor: pointer; } .oc-dir-load-more:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* ============================================================ CONTACT DIRECTORY - CONVERSATIONS TAB ============================================================ */ .oc-dir-conversations-list { display: flex; flex-direction: column; gap: 10px; } .oc-dir-conversation-item { border: 1px solid var(--oc-line); border-radius: 14px; background: #fff; padding: 12px; display: grid; grid-template-columns: 38px minmax(0, 1fr) 44px; align-items: center; gap: 10px; transition: all .15s ease; } .oc-dir-conversation-item:hover { border-color: var(--oc-blue2); box-shadow: 0 10px 22px rgba(15, 25, 35, .06); } .oc-dir-conversation-icon { width: 38px; height: 38px; border-radius: 50%; background: var(--oc-blue3); color: var(--oc-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-dir-conversation-icon i { font-size: 18px; } .oc-dir-conversation-icon--whatsapp, .oc-dir-conversation-icon--gupshup { background: var(--oc-grn2); color: var(--oc-grn); } .oc-dir-conversation-icon--instagram { background: #fce7f3; color: #db2777; } .oc-dir-conversation-icon--facebook { background: var(--oc-blue3); color: var(--oc-blue); } .oc-dir-conversation-icon--tiktok { background: #f1f5f9; color: #0f172a; } .oc-dir-conversation-icon--webchat { background: var(--oc-pur2); color: var(--oc-pur); } .oc-dir-conversation-icon--email { background: var(--oc-blue3); color: var(--oc-blue); } .oc-dir-conversation-icon--sms { background: var(--oc-amb2); color: var(--oc-amb); } .oc-dir-conversation-body { min-width: 0; } .oc-dir-conversation-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; } .oc-dir-conversation-head strong { font-size: 13px; font-weight: 900; color: var(--oc-txt); white-space: nowrap; } .oc-dir-conversation-head span { font-size: 11px; font-weight: 700; color: var(--oc-txt3); white-space: nowrap; } .oc-dir-conversation-body p { margin: 4px 0 0; font-size: 12px; color: var(--oc-txt2); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-dir-conversation-meta { margin-top: 6px; } .oc-dir-conversation-meta span { height: 21px; border-radius: 999px; background: var(--oc-bg3); color: var(--oc-txt3); padding: 0 8px; font-size: 10.5px; font-weight: 900; display: inline-flex; align-items: center; } .oc-dir-conversation-open { height: 32px; border: 1px solid var(--oc-line); border-radius: 9px; background: #fff; color: var(--oc-blue); font-size: 12px; font-weight: 900; font-family: var(--oc-font); cursor: pointer; transition: all .15s ease; } .oc-dir-conversation-open:hover { background: var(--oc-blue3); border-color: var(--oc-blue2); } /* Cuando la lista de conversaciones esté vacía */ #dirConversationsEmpty { min-height: 260px; } /* Ajuste para pantallas pequeñas */ @media (max-width: 760px) { .oc-dir-conversation-item { grid-template-columns: 34px minmax(0, 1fr); } .oc-dir-conversation-open { grid-column: 2 / -1; width: max-content; padding: 0 14px; } .oc-dir-conversation-icon { width: 34px; height: 34px; } } /* ============================================================ REPORTES — agregar al final de app-chat-custom.css ============================================================ */ .oc-rp-page { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; background: var(--oc-bg); padding: 22px 28px; font-family: var(--oc-font); display: flex; flex-direction: column; gap: 20px; } .oc-rp-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .oc-rp-header h4 { font-size: 18px; font-weight: 700; color: var(--oc-txt); margin: 0; } .oc-rp-header p { font-size: 13px; color: var(--oc-txt3); margin: 2px 0 0; } .oc-rp-filters { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .oc-rp-select { height: 34px; padding: 0 12px; font-size: 12px; font-family: var(--oc-font); border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg2); color: var(--oc-txt); cursor: pointer; } /* KPIs */ .oc-rp-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .oc-rp-kpi { background: var(--oc-bg2); border: 1px solid var(--oc-line); border-radius: 14px; padding: 16px; display: flex; align-items: flex-start; gap: 14px; } .oc-rp-kpi-icon { width: 42px; height: 42px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .oc-rp-kpi-icon--blue { background: var(--oc-blue3); color: var(--oc-blue); } .oc-rp-kpi-icon--orange { background: var(--oc-amb2); color: var(--oc-amb); } .oc-rp-kpi-icon--green { background: var(--oc-grn2); color: var(--oc-grn); } .oc-rp-kpi-icon--purple { background: var(--oc-pur2); color: var(--oc-pur); } .oc-rp-kpi > div > span { font-size: 12px; color: var(--oc-txt3); display: block; margin-bottom: 4px; } .oc-rp-kpi > div > strong { font-size: 24px; font-weight: 700; color: var(--oc-txt); display: block; line-height: 1.1; } .oc-rp-kpi > div > small { font-size: 11px; display: block; margin-top: 4px; } /* Historial */ .oc-rp-history { flex: 1; display: flex; flex-direction: column; gap: 12px; min-height: 0; } .oc-rp-history-search { display: flex; align-items: center; gap: 10px; } .oc-rp-search-box { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid var(--oc-line); border-radius: 10px; padding: 0 12px; height: 36px; background: var(--oc-bg2); color: var(--oc-txt3); font-size: 15px; } .oc-rp-search-box input { flex: 1; border: none; background: transparent; font-size: 13px; color: var(--oc-txt); font-family: var(--oc-font); outline: none; } .oc-rp-search-box input::placeholder { color: var(--oc-txt4); } /* Layout lista + detalle */ .oc-rp-history-layout { flex: 1; display: grid; grid-template-columns: 320px 1fr; gap: 0; border: 1px solid var(--oc-line); border-radius: 14px; overflow: hidden; min-height: 400px; background: var(--oc-bg2); } /* Lista conversaciones */ .oc-rp-conv-list { border-right: 1px solid var(--oc-line); overflow-y: auto; background: var(--oc-bg2); } .oc-rp-conv-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--oc-line); cursor: pointer; transition: background .1s; } .oc-rp-conv-item:hover { background: var(--oc-bg3); } .oc-rp-conv-item.active { background: var(--oc-blue3); } .oc-rp-conv-item--closed { opacity: .75; } .oc-rp-conv-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--oc-blue2); color: var(--oc-blue); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; flex-shrink: 0; position: relative; } .oc-rp-conv-ch-badge { position: absolute; bottom: 0; right: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--oc-bg2); border: 1.5px solid var(--oc-bg2); display: flex; align-items: center; justify-content: center; font-size: 9px; } .oc-rp-ch--whatsapp,.oc-rp-ch--gupshup { color: #16a34a; } .oc-rp-ch--instagram { color: #db2777; } .oc-rp-ch--facebook { color: #2563eb; } .oc-rp-ch--webchat { color: #7c3aed; } .oc-rp-conv-info { flex: 1; min-width: 0; } .oc-rp-conv-name-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 2px; } .oc-rp-conv-name-row strong { font-size: 13px; font-weight: 600; color: var(--oc-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-rp-conv-name-row span { font-size: 10px; color: var(--oc-txt4); flex-shrink: 0; } .oc-rp-conv-info p { font-size: 12px; color: var(--oc-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 0 0 4px; } .oc-rp-conv-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; color: var(--oc-txt4); } .oc-rp-conv-status { padding: 1px 6px; border-radius: 20px; font-size: 10px; font-weight: 500; } .oc-rp-conv-status--active { background: var(--oc-grn2); color: var(--oc-grn); } .oc-rp-conv-status--closed { background: var(--oc-bg3); color: var(--oc-txt3); } .oc-rp-conv-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 20px; color: var(--oc-txt3); font-size: 13px; } .oc-rp-conv-empty i { font-size: 32px; opacity: .3; } /* Panel de mensajes */ .oc-rp-msg-panel { display: flex; flex-direction: column; background: var(--oc-bg); overflow: hidden; } .oc-rp-msg-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--oc-txt3); padding: 40px; } .oc-rp-msg-empty i { font-size: 40px; opacity: .3; } .oc-rp-msg-empty strong { font-size: 14px; color: var(--oc-txt2); } .oc-rp-msg-empty span { font-size: 12px; } .oc-rp-msg-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); } .oc-rp-msg-head strong { font-size: 14px; font-weight: 600; color: var(--oc-txt); display: block; } .oc-rp-msg-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .oc-rp-msg-loading { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 20px; font-size: 13px; color: var(--oc-txt3); } /* Mensajes individuales */ .oc-rp-msg-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .oc-rp-msg-row--out { align-items: flex-end; } .oc-rp-msg-who { font-size: 10px; font-weight: 600; color: var(--oc-txt3); padding: 0 4px; } .oc-rp-msg-bubble { max-width: 75%; padding: 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.5; word-break: break-word; } .oc-rp-msg-bubble--in { background: var(--oc-bg2); color: var(--oc-txt); border-bottom-left-radius: 3px; border: 1px solid var(--oc-line); } .oc-rp-msg-bubble--out { background: var(--oc-blue); color: #fff; border-bottom-right-radius: 3px; } .oc-rp-msg-time { font-size: 10px; color: var(--oc-txt4); padding: 0 4px; } @media (max-width: 960px) { .oc-rp-kpi-grid { grid-template-columns: repeat(2,1fr); } .oc-rp-history-layout { grid-template-columns: 1fr; } } /* ============================================================ OPENYMCHAT — AGENT REPORTS ============================================================ */ .oc-agent-report-page { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; background: radial-gradient(circle at top left, rgba(37, 99, 235, .08), transparent 32%), linear-gradient(180deg, #f8fbff 0%, #f6f8fb 100%); padding: 24px 30px 34px; font-family: var(--oc-font); color: var(--oc-txt); display: flex; flex-direction: column; gap: 18px; } /* HERO */ .oc-agent-report-hero { background: linear-gradient(135deg, #ffffff 0%, #f8fbff 58%, #eef5ff 100%); border: 1px solid rgba(203, 213, 225, .85); border-radius: 22px; padding: 22px 24px; box-shadow: 0 18px 42px rgba(15, 23, 42, .06); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .oc-agent-report-kicker { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px; border-radius: 999px; background: rgba(37, 99, 235, .08); color: var(--oc-blue); font-size: 12px; font-weight: 900; margin-bottom: 10px; } .oc-agent-report-hero h4 { margin: 0; font-size: 24px; font-weight: 950; letter-spacing: -.04em; color: #0f172a; } .oc-agent-report-hero p { margin: 6px 0 0; font-size: 13px; line-height: 1.45; color: #64748b; } .oc-agent-report-hero p strong { color: #1e293b; font-weight: 900; } .oc-agent-report-hero-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; } /* FORM / BUTTONS */ .oc-agent-report-select { height: 38px; border: 1px solid #dbe3ef; border-radius: 11px; background: #fff; color: #1e293b; padding: 0 12px; font-size: 12.5px; font-weight: 800; font-family: var(--oc-font); outline: none; cursor: pointer; } .oc-agent-report-select:focus { border-color: rgba(37, 99, 235, .45); box-shadow: 0 0 0 4px rgba(37, 99, 235, .08); } .oc-agent-report-btn { height: 38px; border-radius: 11px; border: 1px solid transparent; padding: 0 13px; font-size: 12.5px; font-weight: 900; font-family: var(--oc-font); display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: all .16s ease; white-space: nowrap; } .oc-agent-report-btn--primary { background: var(--oc-blue); color: #fff; box-shadow: 0 12px 22px rgba(37, 99, 235, .18); } .oc-agent-report-btn--primary:hover { filter: brightness(.96); transform: translateY(-1px); } .oc-agent-report-btn--ghost { background: #fff; color: #334155; border-color: #dbe3ef; } .oc-agent-report-btn--ghost:hover { background: #f8fafc; border-color: #cbd5e1; } /* KPIS */ .oc-agent-report-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .oc-agent-report-kpi-grid--compact { margin-bottom: 2px; } .oc-agent-report-kpi { position: relative; min-height: 116px; background: rgba(255, 255, 255, .92); border: 1px solid rgba(203, 213, 225, .88); border-radius: 19px; padding: 17px; box-shadow: 0 14px 34px rgba(15, 23, 42, .045); display: flex; align-items: flex-start; gap: 13px; overflow: hidden; } .oc-agent-report-kpi::after { content: ""; position: absolute; right: -30px; top: -30px; width: 92px; height: 92px; border-radius: 50%; background: rgba(37, 99, 235, .06); } .oc-agent-report-kpi-icon { width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 21px; flex-shrink: 0; position: relative; z-index: 1; } .oc-agent-report-kpi-icon--blue { background: rgba(37, 99, 235, .10); color: #2563eb; } .oc-agent-report-kpi-icon--green { background: rgba(22, 163, 74, .10); color: #16a34a; } .oc-agent-report-kpi-icon--orange { background: rgba(245, 158, 11, .13); color: #d97706; } .oc-agent-report-kpi-icon--purple { background: rgba(124, 58, 237, .10); color: #7c3aed; } .oc-agent-report-kpi-icon--red { background: rgba(220, 38, 38, .10); color: #dc2626; } .oc-agent-report-kpi-body { min-width: 0; position: relative; z-index: 1; } .oc-agent-report-kpi-body span { display: block; color: #64748b; font-size: 12px; font-weight: 850; margin-bottom: 6px; } .oc-agent-report-kpi-body strong { display: block; color: #0f172a; font-size: 28px; font-weight: 950; line-height: 1; letter-spacing: -.04em; } .oc-agent-report-kpi-body small { display: block; margin-top: 7px; color: #94a3b8; font-size: 11.5px; font-weight: 750; } .oc-agent-report-kpi-badge { position: absolute; right: 14px; top: 14px; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 950; display: inline-flex; align-items: center; z-index: 2; } .oc-agent-report-kpi-badge.is-up { background: rgba(22, 163, 74, .10); color: #16a34a; } .oc-agent-report-kpi-badge.is-neutral { background: rgba(100, 116, 139, .10); color: #64748b; } .oc-agent-report-kpi-badge.is-warn { background: rgba(245, 158, 11, .12); color: #d97706; } /* INSIGHTS */ .oc-agent-report-insights { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .oc-agent-report-insight { background: rgba(255, 255, 255, .78); border: 1px solid rgba(203, 213, 225, .78); border-radius: 16px; padding: 13px; display: flex; align-items: center; gap: 11px; } .oc-agent-report-insight-icon { width: 38px; height: 38px; border-radius: 13px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .oc-agent-report-insight-icon.is-blue { background: rgba(37, 99, 235, .10); color: #2563eb; } .oc-agent-report-insight-icon.is-green { background: rgba(22, 163, 74, .10); color: #16a34a; } .oc-agent-report-insight-icon.is-orange { background: rgba(245, 158, 11, .12); color: #d97706; } .oc-agent-report-insight-icon.is-red { background: rgba(220, 38, 38, .10); color: #dc2626; } .oc-agent-report-insight strong { display: block; color: #0f172a; font-size: 13px; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-agent-report-insight small { display: block; color: #64748b; font-size: 11.3px; font-weight: 750; margin-top: 2px; } /* TABS */ .oc-agent-report-tabs { height: 52px; background: #fff; border: 1px solid rgba(203, 213, 225, .85); border-radius: 17px; padding: 5px; display: flex; align-items: center; gap: 5px; box-shadow: 0 10px 24px rgba(15, 23, 42, .035); } .oc-agent-report-tab { height: 40px; border: none; background: transparent; border-radius: 12px; padding: 0 15px; font-size: 12.5px; font-weight: 900; font-family: var(--oc-font); color: #64748b; display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: all .14s ease; } .oc-agent-report-tab:hover { color: #1e293b; background: #f8fafc; } .oc-agent-report-tab.active { background: var(--oc-blue); color: #fff; box-shadow: 0 10px 18px rgba(37, 99, 235, .18); } /* PANELS */ .oc-agent-report-panel { display: flex; flex-direction: column; gap: 16px; } .oc-agent-report-panel.d-none { display: none !important; } /* CARDS / GRIDS */ .oc-agent-report-grid-main { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(310px, .75fr); gap: 16px; } .oc-agent-report-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .oc-agent-report-card { background: rgba(255, 255, 255, .94); border: 1px solid rgba(203, 213, 225, .86); border-radius: 20px; padding: 18px; box-shadow: 0 14px 34px rgba(15, 23, 42, .045); } .oc-agent-report-card--large { min-height: 340px; } .oc-agent-report-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .oc-agent-report-card-head strong { display: block; color: #0f172a; font-size: 14px; font-weight: 950; } .oc-agent-report-card-head span { display: block; margin-top: 3px; color: #64748b; font-size: 11.8px; font-weight: 750; } .oc-agent-report-pill { height: 27px; padding: 0 10px; border-radius: 999px; background: #f1f5f9; color: #475569; font-size: 11px; font-weight: 900; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .oc-agent-report-chart { min-height: 260px; } .oc-agent-report-chart--activity { min-height: 285px; } .oc-agent-report-chart--donut { min-height: 230px; } /* LEGEND */ .oc-agent-report-legend { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 10px; } .oc-agent-report-legend span { height: 26px; padding: 0 9px; border-radius: 999px; background: #f8fafc; border: 1px solid #e2e8f0; display: inline-flex; align-items: center; gap: 6px; color: #64748b; font-size: 11px; font-weight: 850; } .oc-agent-report-legend span i { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } .oc-agent-report-legend span i.is-green { background: #16a34a; } .oc-agent-report-legend span i.is-orange { background: #f59e0b; } .oc-agent-report-legend span i.is-red { background: #dc2626; } .oc-agent-report-legend span strong { color: #0f172a; font-weight: 950; } /* SUMMARY */ .oc-agent-report-summary-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; } .oc-agent-report-summary-list div { border: 1px solid #e2e8f0; background: #f8fafc; border-radius: 15px; padding: 14px; } .oc-agent-report-summary-list span { display: block; color: #64748b; font-size: 11.5px; font-weight: 850; } .oc-agent-report-summary-list strong { display: block; color: #0f172a; font-size: 24px; font-weight: 950; margin-top: 6px; letter-spacing: -.03em; } .oc-agent-report-advice { min-height: 138px; border: 1px solid rgba(37, 99, 235, .16); background: linear-gradient(135deg, rgba(37, 99, 235, .07), rgba(255,255,255,.92)); border-radius: 17px; padding: 16px; display: flex; align-items: flex-start; gap: 13px; } .oc-agent-report-advice-icon { width: 42px; height: 42px; border-radius: 15px; background: rgba(37, 99, 235, .10); color: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; } .oc-agent-report-advice strong { display: block; color: #0f172a; font-size: 14px; font-weight: 950; } .oc-agent-report-advice p { margin: 6px 0 0; color: #64748b; font-size: 12.5px; line-height: 1.55; } /* TOOLBAR */ .oc-agent-report-toolbar { background: #fff; border: 1px solid rgba(203, 213, 225, .85); border-radius: 17px; padding: 12px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; box-shadow: 0 10px 24px rgba(15, 23, 42, .035); } .oc-agent-report-search { flex: 1; min-width: 260px; height: 38px; border: 1px solid #dbe3ef; border-radius: 12px; background: #f8fafc; padding: 0 12px; display: flex; align-items: center; gap: 9px; color: #64748b; } .oc-agent-report-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 12.5px; font-weight: 750; color: #0f172a; font-family: var(--oc-font); } /* HISTORY */ .oc-agent-report-history { display: grid; grid-template-columns: minmax(520px, 1.1fr) minmax(360px, .9fr); gap: 16px; min-height: 540px; } .oc-agent-report-conv-list { background: #fff; border: 1px solid rgba(203, 213, 225, .85); border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgba(15, 23, 42, .045); max-height: 620px; overflow-y: auto; } .oc-agent-report-conv-row { display: grid; grid-template-columns: minmax(190px, .85fr) minmax(220px, 1fr) 145px 50px; align-items: center; gap: 12px; padding: 14px 15px; border-bottom: 1px solid #eef2f7; cursor: pointer; transition: all .14s ease; } .oc-agent-report-conv-row:hover { background: #f8fbff; } .oc-agent-report-conv-row.active { background: rgba(37, 99, 235, .075); box-shadow: inset 3px 0 0 var(--oc-blue); } .oc-agent-report-conv-row.d-none { display: none !important; } .oc-agent-report-conv-client { min-width: 0; display: flex; align-items: center; gap: 11px; } .oc-agent-report-avatar { width: 42px; height: 42px; border-radius: 15px; background: #dbeafe; color: #2563eb; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 950; flex-shrink: 0; position: relative; } .oc-agent-report-channel-dot { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; border-radius: 50%; background: #fff; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; } .oc-agent-report-channel-dot--whatsapp, .oc-agent-report-channel-dot--gupshup { color: #16a34a; } .oc-agent-report-channel-dot--instagram { color: #db2777; } .oc-agent-report-channel-dot--facebook { color: #2563eb; } .oc-agent-report-channel-dot--webchat { color: #7c3aed; } .oc-agent-report-conv-client strong { display: block; color: #0f172a; font-size: 13px; font-weight: 950; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-agent-report-conv-client span { display: block; margin-top: 3px; color: #64748b; font-size: 11.3px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-agent-report-conv-message { min-width: 0; } .oc-agent-report-conv-message strong { display: block; color: #334155; font-size: 12.3px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-agent-report-conv-message span { display: inline-flex; margin-top: 5px; height: 22px; align-items: center; padding: 0 8px; border-radius: 999px; background: #f1f5f9; color: #64748b; font-size: 10.5px; font-weight: 900; } .oc-agent-report-conv-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .oc-agent-report-status { height: 23px; padding: 0 9px; border-radius: 999px; font-size: 10.5px; font-weight: 950; display: inline-flex; align-items: center; } .oc-agent-report-status.is-active { background: rgba(22, 163, 74, .10); color: #16a34a; } .oc-agent-report-status.is-closed { background: #f1f5f9; color: #64748b; } .oc-agent-report-conv-meta small { color: #94a3b8; font-size: 10.5px; font-weight: 800; white-space: nowrap; } .oc-agent-report-row-action { height: 32px; border-radius: 10px; border: 1px solid #dbe3ef; background: #fff; color: var(--oc-blue); font-size: 12px; font-weight: 950; font-family: var(--oc-font); cursor: pointer; } .oc-agent-report-row-action:hover { background: rgba(37, 99, 235, .07); border-color: rgba(37, 99, 235, .24); } /* MESSAGE PANEL */ .oc-agent-report-msg-panel { background: #fff; border: 1px solid rgba(203, 213, 225, .85); border-radius: 20px; overflow: hidden; box-shadow: 0 14px 34px rgba(15, 23, 42, .045); min-height: 540px; display: flex; flex-direction: column; } .oc-agent-report-msg-empty { flex: 1; min-height: 540px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; text-align: center; padding: 34px; color: #64748b; } .oc-agent-report-msg-empty i { width: 62px; height: 62px; border-radius: 22px; background: #f1f5f9; color: #94a3b8; display: flex; align-items: center; justify-content: center; font-size: 30px; } .oc-agent-report-msg-empty strong { color: #0f172a; font-size: 15px; font-weight: 950; } .oc-agent-report-msg-empty span { color: #64748b; font-size: 12.5px; font-weight: 750; } .oc-agent-report-msg-head { min-height: 68px; padding: 13px 15px; border-bottom: 1px solid #eef2f7; background: #fff; display: flex; align-items: center; gap: 11px; } .oc-agent-report-msg-head strong { display: block; color: #0f172a; font-size: 14px; font-weight: 950; } .oc-agent-report-msg-head span { display: block; color: #64748b; font-size: 11.5px; font-weight: 800; margin-top: 3px; } .oc-agent-report-msg-body { flex: 1; background: radial-gradient(circle at top right, rgba(37,99,235,.045), transparent 32%), #f8fafc; padding: 16px; overflow-y: auto; max-height: 540px; } .oc-agent-report-msg-loading { text-align: center; padding: 18px; color: #64748b; font-size: 12.5px; font-weight: 850; } .oc-agent-report-msg-loading i { animation: ocReportSpin 1s linear infinite; } @keyframes ocReportSpin { to { transform: rotate(360deg); } } .oc-agent-report-msg-row { display: flex; margin-bottom: 8px; } .oc-agent-report-msg-row.is-in { justify-content: flex-start; } .oc-agent-report-msg-row.is-out { justify-content: flex-end; } .oc-agent-report-msg-bubble { max-width: 76%; padding: 9px 13px; border-radius: 15px; font-size: 12.8px; line-height: 1.5; word-break: break-word; } .oc-agent-report-msg-bubble.is-in { background: #fff; color: #1e293b; border: 1px solid #e2e8f0; border-bottom-left-radius: 5px; } .oc-agent-report-msg-bubble.is-out { background: var(--oc-blue); color: #fff; border-bottom-right-radius: 5px; } .oc-agent-report-msg-notice { min-height: 240px; border: 1px dashed #cbd5e1; border-radius: 17px; background: rgba(255,255,255,.66); color: #64748b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; padding: 28px; } .oc-agent-report-msg-notice i { font-size: 30px; color: #94a3b8; } .oc-agent-report-msg-notice strong { color: #0f172a; font-size: 14px; font-weight: 950; } .oc-agent-report-msg-notice span { font-size: 12px; font-weight: 750; } /* FOLLOW SUMMARY */ .oc-agent-report-follow-summary { display: grid; grid-template-columns: 1fr; gap: 10px; } .oc-agent-report-follow-summary div { border: 1px solid #e2e8f0; border-radius: 15px; background: #f8fafc; padding: 13px 14px; display: flex; align-items: center; justify-content: space-between; } .oc-agent-report-follow-summary span { color: #64748b; font-size: 12px; font-weight: 850; } .oc-agent-report-follow-summary strong { color: #0f172a; font-size: 20px; font-weight: 950; } /* BARS */ .oc-agent-report-bars { display: flex; flex-direction: column; gap: 12px; } .oc-agent-report-bar-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 34px; align-items: center; gap: 11px; } .oc-agent-report-bar-row span { color: #334155; font-size: 12.2px; font-weight: 850; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-agent-report-bar-track { height: 8px; border-radius: 999px; background: #eef2f7; overflow: hidden; } .oc-agent-report-bar-fill { height: 100%; border-radius: 999px; } .oc-agent-report-bar-fill.is-green { background: #16a34a; } .oc-agent-report-bar-fill.is-red { background: #dc2626; } .oc-agent-report-bar-row strong { color: #0f172a; font-size: 12px; font-weight: 950; text-align: right; } /* EMPTY */ .oc-agent-report-empty { min-height: 220px; padding: 34px; color: #64748b; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center; } .oc-agent-report-empty.is-small { min-height: 80px; } .oc-agent-report-empty i { font-size: 34px; color: #cbd5e1; } .oc-agent-report-empty strong { color: #0f172a; font-size: 14px; font-weight: 950; } .oc-agent-report-empty span { font-size: 12px; font-weight: 750; } /* UTILITIES */ .text-success { color: #16a34a; } .text-danger { color: #dc2626; } .ms-auto { margin-left: auto; } /* RESPONSIVE */ @media (max-width: 1240px) { .oc-agent-report-kpi-grid, .oc-agent-report-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oc-agent-report-grid-main, .oc-agent-report-history { grid-template-columns: 1fr; } .oc-agent-report-conv-list { max-height: 520px; } } @media (max-width: 820px) { .oc-agent-report-page { padding: 18px; } .oc-agent-report-hero { flex-direction: column; } .oc-agent-report-hero-actions { width: 100%; justify-content: flex-start; } .oc-agent-report-kpi-grid, .oc-agent-report-insights, .oc-agent-report-grid-2 { grid-template-columns: 1fr; } .oc-agent-report-tabs { overflow-x: auto; justify-content: flex-start; } .oc-agent-report-tab { flex-shrink: 0; } .oc-agent-report-toolbar { align-items: stretch; } .oc-agent-report-search { min-width: 100%; } .oc-agent-report-select { width: 100%; } .oc-agent-report-conv-row { grid-template-columns: 1fr; gap: 9px; } .oc-agent-report-conv-meta { align-items: flex-start; } .oc-agent-report-row-action { width: max-content; padding: 0 14px; } .oc-agent-report-bar-row { grid-template-columns: 1fr; gap: 6px; } } /* ============================================================ CONTACTOS — Modal de detalle + botón Ver detalles Agregar a app-chat-custom.css ============================================================ */ /* ── Page full-width (sin columna lateral fija) ──────────── */ .oc-dir-page--full { display: block !important; grid-template-columns: unset !important; } .oc-dir-main--full { border-right: none !important; max-width: 100% !important; } /* ── Botón "Ver detalles" en cada card ───────────────────── */ .oc-dir-card { position: relative; padding-bottom: 44px !important; /* espacio para el botón */ } .oc-dir-card-detail-btn { position: absolute; bottom: 0; left: 0; right: 0; height: 36px; border: none; border-top: 1px solid var(--oc-line); background: transparent; font-size: 12px; font-weight: 600; color: var(--oc-txt3); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--oc-font); border-radius: 0 0 var(--oc-r) var(--oc-r); transition: all .15s; } .oc-dir-card-detail-btn i { font-size: 14px; } .oc-dir-card-detail-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-top-color: var(--oc-blue2); } /* Quitar el botón de 3 puntos si quedara */ .oc-dir-card-menu { display: none !important; } /* ── Modal overlay ───────────────────────────────────────── */ .oc-contact-modal-overlay { position: fixed; inset: 0; background: rgba(15,25,35,.5); z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); } .oc-contact-modal-overlay.d-none { display: none !important; } /* ── Modal container ─────────────────────────────────────── */ .oc-contact-modal { background: var(--oc-bg2); border-radius: 16px; width: 100%; max-width: 680px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.18); } /* ── Modal header ────────────────────────────────────────── */ .oc-cm-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 16px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; } .oc-cm-avatar { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; background: var(--oc-blue3); color: var(--oc-blue); } .oc-cm-avatar--whatsapp, .oc-cm-avatar--gupshup { background: #dcfce7; color: #166534; } .oc-cm-avatar--instagram { background: #fce7f3; color: #9d174d; } .oc-cm-avatar--facebook { background: #dbeafe; color: #1e40af; } .oc-cm-avatar--webchat { background: var(--oc-pur2); color: var(--oc-pur); } .oc-cm-head-info { flex: 1; min-width: 0; } .oc-cm-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; } .oc-cm-name-row h5 { margin: 0; font-size: 17px; font-weight: 700; color: var(--oc-txt); } .oc-cm-meta { font-size: 12.5px; color: var(--oc-txt3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .oc-cm-meta i { font-size: 13px; } .oc-cm-since { font-size: 11px; color: var(--oc-txt4); margin-top: 3px; } .oc-cm-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .oc-cm-action-btn { height: 34px; padding: 0 14px; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); font-size: 12.5px; font-weight: 600; color: var(--oc-txt2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--oc-font); transition: all .12s; } .oc-cm-action-btn:hover { background: var(--oc-bg3); } .oc-cm-action-btn--primary { background: var(--oc-blue); color: #fff; border-color: var(--oc-blue); } .oc-cm-action-btn--primary:hover { filter: brightness(1.08); } .oc-cm-close { width: 32px; height: 32px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--oc-txt3); font-family: var(--oc-font); transition: all .12s; flex-shrink: 0; } .oc-cm-close:hover { background: var(--oc-red2); color: var(--oc-red); border-color: var(--oc-red2); } /* ── Tabs ────────────────────────────────────────────────── */ .oc-cm-tabs { display: flex; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; padding: 0 20px; gap: 0; overflow-x: auto; scrollbar-width: none; } .oc-cm-tabs::-webkit-scrollbar { display: none; } .oc-cm-tab { height: 42px; padding: 0 14px; border: none; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--oc-txt3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--oc-font); border-bottom: 2px solid transparent; white-space: nowrap; transition: all .12s; } .oc-cm-tab i { font-size: 14px; } .oc-cm-tab:hover { color: var(--oc-txt2); } .oc-cm-tab.active { color: var(--oc-blue); border-bottom-color: var(--oc-blue); } /* ── Body scrollable ─────────────────────────────────────── */ .oc-cm-body { flex: 1; overflow: hidden; background: var(--oc-bg); min-height: 380px; position: relative; } /* Tabs ocultos por defecto */ .oc-cm-tab-pane { display: none; height: 100%; } /* Tab activo visible */ .oc-cm-tab-pane.active { display: block; overflow-y: auto; padding: 18px 20px; height: 380px; } .oc-cm-tab-pane.active::-webkit-scrollbar { width: 3px; } .oc-cm-tab-pane.active::-webkit-scrollbar-thumb { background: var(--oc-line); border-radius: 2px; } /* Tab chats — sin padding, con layout propio */ #cm-tab-chats.active { display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden; } /* ── Secciones ───────────────────────────────────────────── */ .oc-cm-section { margin-bottom: 20px; } .oc-cm-section:last-child { margin-bottom: 0; } .oc-cm-section-title { font-size: 10px; font-weight: 700; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; } /* Info grid del resumen */ .oc-cm-info-grid { display: flex; flex-direction: column; gap: 1px; } .oc-cm-info-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--oc-bg2); border-radius: 8px; font-size: 12.5px; gap: 10px; } .oc-cm-info-row span { color: var(--oc-txt3); display: flex; align-items: center; gap: 6px; } .oc-cm-info-row span i { font-size: 14px; } .oc-cm-info-row strong { color: var(--oc-txt); font-weight: 600; text-align: right; } /* Canales */ .oc-cm-channels { display: flex; flex-direction: column; gap: 4px; } .oc-cm-channel-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--oc-bg2); border-radius: 8px; font-size: 12.5px; } .oc-cm-channel-item i { font-size: 16px; color: var(--oc-txt3); flex-shrink: 0; } .oc-cm-channel-item span { flex: 1; color: var(--oc-txt3); } .oc-cm-channel-item strong { color: var(--oc-txt); font-weight: 600; } /* ── Tab Seguimientos ────────────────────────────────────── */ .oc-cm-followups-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 12.5px; color: var(--oc-txt3); } .oc-cm-followup-item { background: var(--oc-bg2); border: 1px solid var(--oc-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; } .oc-cm-fu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .oc-cm-fu-top strong { font-size: 13px; font-weight: 600; color: var(--oc-txt); } .oc-cm-fu-risk { font-size: 11px; font-weight: 700; } .oc-cm-fu-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--oc-txt3); margin-bottom: 4px; } .oc-cm-fu-next { font-size: 11px; color: var(--oc-blue); display: flex; align-items: center; gap: 4px; } /* ── Tab Chats ───────────────────────────────────────────── */ .oc-cm-chat-item { background: var(--oc-bg2); border: 1px solid var(--oc-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; } .oc-cm-chat-ch { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .oc-cm-chat-info { flex: 1; } .oc-cm-chat-info strong { font-size: 12.5px; font-weight: 600; color: var(--oc-txt); display: block; } .oc-cm-chat-info span { font-size: 11px; color: var(--oc-txt3); } .oc-cm-chat-preview { font-size: 12px; color: var(--oc-txt3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── Tab Notas ───────────────────────────────────────────── */ .oc-cm-note-input { width: 100%; border: 1px solid var(--oc-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--oc-txt); background: var(--oc-bg2); font-family: var(--oc-font); resize: none; outline: none; margin-bottom: 8px; transition: border-color .12s; } .oc-cm-note-input:focus { border-color: var(--oc-blue2); } .oc-cm-save-note-btn { width: 100%; height: 36px; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); font-size: 12.5px; font-weight: 600; color: var(--oc-txt2); cursor: pointer; font-family: var(--oc-font); display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; transition: all .12s; } .oc-cm-save-note-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } .oc-cm-notes-list { display: flex; flex-direction: column; gap: 8px; } .oc-cm-empty-text { font-size: 12px; color: var(--oc-txt3); } /* ── Tab Editar ──────────────────────────────────────────── */ .oc-cm-form { display: flex; flex-direction: column; gap: 12px; } .oc-cm-field { display: flex; flex-direction: column; gap: 4px; } .oc-cm-field label { font-size: 12px; font-weight: 600; color: var(--oc-txt2); } .oc-cm-field small { font-size: 10.5px; color: var(--oc-txt3); font-weight: 400; } .oc-cm-save-btn { height: 40px; padding: 0 20px; border: none; border-radius: 10px; background: var(--oc-blue); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--oc-font); margin-top: 4px; transition: all .12s; } .oc-cm-save-btn:hover { filter: brightness(1.08); } /* ── Shared: empty state + mini btn ─────────────────────── */ .oc-cm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 30px 16px; color: var(--oc-txt3); text-align: center; } .oc-cm-empty i { font-size: 32px; color: var(--oc-line); } .oc-cm-empty span { font-size: 12px; } .oc-cm-loading { display: flex; align-items: center; justify-content: center; padding: 30px; } .oc-cm-loading i { font-size: 24px; color: var(--oc-txt4); animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .oc-cm-mini-btn { height: 28px; padding: 0 10px; border: 1px solid var(--oc-line); border-radius: 7px; background: var(--oc-bg2); font-size: 11.5px; font-weight: 600; color: var(--oc-txt2); cursor: pointer; font-family: var(--oc-font); display: inline-flex; align-items: center; gap: 4px; transition: all .12s; } .oc-cm-mini-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* ── Tab Chats — mensajes de la conversación ─────────────── */ #cm-tab-chats { padding: 0 !important; /* sin padding exterior, el chat ocupa todo */ display: flex; flex-direction: column; height: 380px; } .oc-cm-chat-agent { font-size: 11.5px; color: var(--oc-txt3); padding: 10px 16px 6px; display: flex; align-items: center; gap: 5px; border-bottom: 1px solid var(--oc-line); flex-shrink: 0; background: var(--oc-bg2); } .oc-cm-chat-agent strong { color: var(--oc-txt2); font-weight: 600; } #cmChatsList { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--oc-bg3); } #cmChatsList::-webkit-scrollbar { width: 3px; } #cmChatsList::-webkit-scrollbar-thumb { background: var(--oc-line); border-radius: 2px; } .oc-cm-msg-row { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .oc-cm-msg-row--out { align-items: flex-end; } .oc-cm-msg-who { font-size: 10px; color: var(--oc-txt3); font-weight: 700; padding: 0 4px; text-transform: uppercase; letter-spacing: .04em; } .oc-cm-msg-bubble { max-width: 75%; padding: 8px 12px; font-size: 13px; line-height: 1.45; word-break: break-word; } .oc-cm-msg-bubble--in { background: var(--oc-bg2); border: 1px solid var(--oc-line); color: var(--oc-txt); border-radius: 4px 14px 14px 14px; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .oc-cm-msg-bubble--out { background: var(--oc-blue3); border: 1px solid var(--oc-blue2); color: var(--oc-txt); border-radius: 14px 14px 4px 14px; } .oc-cm-msg-time { font-size: 10px; color: var(--oc-txt4); padding: 0 4px; } /* ============================================================ CONTACTOS — Modal de detalle + botón Ver detalles ============================================================ */ /* ── Page full-width ─────────────────────────────────────── */ .oc-dir-page--full { display: block !important; grid-template-columns: unset !important; } .oc-dir-main--full { border-right: none !important; max-width: 100% !important; } /* ── Botón "Ver detalles" en cada card ───────────────────── */ .oc-dir-card { position: relative; padding-bottom: 44px !important; } .oc-dir-card-detail-btn { position: absolute; bottom: 0; left: 0; right: 0; height: 36px; border: none; border-top: 1px solid var(--oc-line); background: transparent; font-size: 12px; font-weight: 600; color: var(--oc-txt3); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--oc-font); border-radius: 0 0 var(--oc-r) var(--oc-r); transition: all .15s; } .oc-dir-card-detail-btn i { font-size: 14px; } .oc-dir-card-detail-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-top-color: var(--oc-blue2); } .oc-dir-card-menu { display: none !important; } /* ── Modal overlay ───────────────────────────────────────── */ .oc-contact-modal-overlay { position: fixed; inset: 0; background: rgba(15,25,35,.5); z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(2px); } .oc-contact-modal-overlay.d-none { display: none !important; } /* ── Modal container ─────────────────────────────────────── */ .oc-contact-modal { background: var(--oc-bg2); border-radius: 16px; width: 100%; max-width: 680px; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.18); } /* ── Header ──────────────────────────────────────────────── */ .oc-cm-head { display: flex; align-items: flex-start; gap: 14px; padding: 20px 20px 16px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; } .oc-cm-avatar { width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; background: var(--oc-blue3); color: var(--oc-blue); } .oc-cm-avatar--whatsapp, .oc-cm-avatar--gupshup { background: #dcfce7; color: #166534; } .oc-cm-avatar--instagram { background: #fce7f3; color: #9d174d; } .oc-cm-avatar--facebook { background: #dbeafe; color: #1e40af; } .oc-cm-avatar--webchat { background: var(--oc-pur2); color: var(--oc-pur); } .oc-cm-head-info { flex: 1; min-width: 0; } .oc-cm-name-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 4px; } .oc-cm-name-row h5 { margin: 0; font-size: 17px; font-weight: 700; color: var(--oc-txt); } .oc-cm-meta { font-size: 12.5px; color: var(--oc-txt3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 2px; } .oc-cm-meta i { font-size: 13px; } .oc-cm-since { font-size: 11px; color: var(--oc-txt4); margin-top: 3px; } .oc-cm-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .oc-cm-action-btn { height: 34px; padding: 0 14px; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); font-size: 12.5px; font-weight: 600; color: var(--oc-txt2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--oc-font); transition: all .12s; } .oc-cm-action-btn:hover { background: var(--oc-bg3); } .oc-cm-action-btn--primary { background: var(--oc-blue); color: #fff; border-color: var(--oc-blue); } .oc-cm-action-btn--primary:hover { filter: brightness(1.08); } .oc-cm-close { width: 32px; height: 32px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; color: var(--oc-txt3); font-family: var(--oc-font); transition: all .12s; flex-shrink: 0; } .oc-cm-close:hover { background: var(--oc-red2); color: var(--oc-red); border-color: var(--oc-red2); } /* ── Tabs ────────────────────────────────────────────────── */ .oc-cm-tabs { display: flex; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; padding: 0 20px; overflow-x: auto; scrollbar-width: none; } .oc-cm-tabs::-webkit-scrollbar { display: none; } .oc-cm-tab { height: 42px; padding: 0 14px; border: none; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--oc-txt3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--oc-font); border-bottom: 2px solid transparent; white-space: nowrap; transition: all .12s; } .oc-cm-tab i { font-size: 14px; } .oc-cm-tab:hover { color: var(--oc-txt2); } .oc-cm-tab.active { color: var(--oc-blue); border-bottom-color: var(--oc-blue); } /* ── Body del modal ──────────────────────────────────────── */ .oc-cm-body { flex: 1; overflow: hidden; background: var(--oc-bg); min-height: 380px; } /* REGLA BASE: todos los tabs ocultos — !important para ganar contra cualquier ID */ .oc-cm-tab-pane { display: none !important; } /* Tab activo — mayor especificidad para ganar contra display:none !important */ .oc-cm-body .oc-cm-tab-pane.active { display: block !important; height: 380px; overflow-y: auto; padding: 18px 20px; } .oc-cm-tab-pane.active::-webkit-scrollbar { width: 3px; } .oc-cm-tab-pane.active::-webkit-scrollbar-thumb { background: var(--oc-line); border-radius: 2px; } /* Tab chats — excepción: layout de chat sin padding */ .oc-cm-body #cm-tab-chats.active { display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden; height: 380px; } /* ── Secciones (tabs resumen, seguimientos, notas, editar) ─ */ .oc-cm-section { margin-bottom: 20px; } .oc-cm-section:last-child { margin-bottom: 0; } .oc-cm-section-title { font-size: 10px; font-weight: 700; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px; } /* Info grid resumen */ .oc-cm-info-grid { display: flex; flex-direction: column; gap: 1px; } .oc-cm-info-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; background: var(--oc-bg2); border-radius: 8px; font-size: 12.5px; gap: 10px; } .oc-cm-info-row span { color: var(--oc-txt3); display: flex; align-items: center; gap: 6px; } .oc-cm-info-row span i { font-size: 14px; } .oc-cm-info-row strong { color: var(--oc-txt); font-weight: 600; text-align: right; } /* Canales */ .oc-cm-channels { display: flex; flex-direction: column; gap: 4px; } .oc-cm-channel-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--oc-bg2); border-radius: 8px; font-size: 12.5px; } .oc-cm-channel-item i { font-size: 16px; color: var(--oc-txt3); flex-shrink: 0; } .oc-cm-channel-item span { flex: 1; color: var(--oc-txt3); } .oc-cm-channel-item strong { color: var(--oc-txt); font-weight: 600; } /* ── Tab Seguimientos ────────────────────────────────────── */ .oc-cm-followups-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 12.5px; color: var(--oc-txt3); } .oc-cm-followup-item { background: var(--oc-bg2); border: 1px solid var(--oc-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; } .oc-cm-fu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; } .oc-cm-fu-top strong { font-size: 13px; font-weight: 600; color: var(--oc-txt); } .oc-cm-fu-risk { font-size: 11px; font-weight: 700; } .oc-cm-fu-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--oc-txt3); margin-bottom: 4px; } .oc-cm-fu-next { font-size: 11px; color: var(--oc-blue); display: flex; align-items: center; gap: 4px; } /* ── Tab Chats — layout ──────────────────────────────────── */ /* El tab usa flex column (controlado por JS) */ /* Header agente — fijo arriba */ .oc-cm-chat-header { flex-shrink: 0; display: flex; align-items: center; gap: 7px; padding: 10px 16px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); font-size: 12px; color: var(--oc-txt3); } .oc-cm-chat-header i { font-size: 14px; } .oc-cm-chat-header strong { color: var(--oc-txt2); font-weight: 600; } /* Área de mensajes — scroll interno, fondo gris */ .oc-cm-messages-area { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--oc-bg3); min-height: 0; } .oc-cm-messages-area::-webkit-scrollbar { width: 3px; } .oc-cm-messages-area::-webkit-scrollbar-thumb { background: var(--oc-line2); border-radius: 2px; } /* Burbujas */ .oc-cm-msg-row { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } .oc-cm-msg-row--out { align-items: flex-end; } .oc-cm-msg-who { font-size: 10.5px; color: var(--oc-txt3); font-weight: 600; padding: 0 4px; } .oc-cm-msg-bubble { max-width: 72%; padding: 9px 13px; font-size: 13px; line-height: 1.5; word-break: break-word; } .oc-cm-msg-bubble--in { background: var(--oc-bg2); border: 1px solid var(--oc-line); color: var(--oc-txt); border-radius: 4px 14px 14px 14px; } .oc-cm-msg-bubble--out { background: var(--oc-blue3); border: 1px solid var(--oc-blue2); color: var(--oc-txt); border-radius: 14px 14px 4px 14px; } .oc-cm-msg-time { font-size: 10px; color: var(--oc-txt4); padding: 1px 4px 0; } /* ── Tab Notas ───────────────────────────────────────────── */ .oc-cm-note-input { width: 100%; border: 1px solid var(--oc-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--oc-txt); background: var(--oc-bg2); font-family: var(--oc-font); resize: none; outline: none; margin-bottom: 8px; transition: border-color .12s; } .oc-cm-note-input:focus { border-color: var(--oc-blue2); } .oc-cm-save-note-btn { width: 100%; height: 36px; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); font-size: 12.5px; font-weight: 600; color: var(--oc-txt2); cursor: pointer; font-family: var(--oc-font); display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 14px; transition: all .12s; } .oc-cm-save-note-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } .oc-cm-notes-list { display: flex; flex-direction: column; gap: 8px; } .oc-cm-empty-text { font-size: 12px; color: var(--oc-txt3); } /* ── Tab Editar ──────────────────────────────────────────── */ .oc-cm-form { display: flex; flex-direction: column; gap: 12px; } .oc-cm-field { display: flex; flex-direction: column; gap: 4px; } .oc-cm-field label { font-size: 12px; font-weight: 600; color: var(--oc-txt2); } .oc-cm-field small { font-size: 10.5px; color: var(--oc-txt3); font-weight: 400; } .oc-cm-save-btn { height: 40px; padding: 0 20px; border: none; border-radius: 10px; background: var(--oc-blue); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--oc-font); margin-top: 4px; transition: all .12s; } .oc-cm-save-btn:hover { filter: brightness(1.08); } /* ── Shared ──────────────────────────────────────────────── */ .oc-cm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 16px; color: var(--oc-txt3); text-align: center; } .oc-cm-empty i { font-size: 32px; color: var(--oc-line); } .oc-cm-empty span { font-size: 12px; } .oc-cm-loading { display: flex; align-items: center; justify-content: center; padding: 40px; } .oc-cm-loading i { font-size: 24px; color: var(--oc-txt4); animation: cm-spin 1s linear infinite; } @keyframes cm-spin { to { transform: rotate(360deg); } } .oc-cm-mini-btn { height: 28px; padding: 0 10px; border: 1px solid var(--oc-line); border-radius: 7px; background: var(--oc-bg2); font-size: 11.5px; font-weight: 600; color: var(--oc-txt2); cursor: pointer; font-family: var(--oc-font); display: inline-flex; align-items: center; gap: 4px; transition: all .12s; } .oc-cm-mini-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* ============================================================ CONTACTOS — Modal de detalle v3 ============================================================ */ /* ── Page full-width ─────────────────────────────────────── */ .oc-dir-page--full { display: block !important; grid-template-columns: unset !important; } .oc-dir-main--full { border-right: none !important; max-width: 100% !important; } /* ── Botón Ver detalles ──────────────────────────────────── */ .oc-dir-card { position: relative; padding-bottom: 44px !important; } .oc-dir-card-menu { display: none !important; } .oc-dir-card-detail-btn { position: absolute; bottom: 0; left: 0; right: 0; height: 36px; border: none; border-top: 1px solid var(--oc-line); background: transparent; font-size: 12px; font-weight: 600; color: var(--oc-txt3); cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--oc-font); border-radius: 0 0 var(--oc-r) var(--oc-r); transition: all .15s; } .oc-dir-card-detail-btn i { font-size: 14px; } .oc-dir-card-detail-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-top-color: var(--oc-blue2); } /* ── Overlay ─────────────────────────────────────────────── */ .oc-contact-modal-overlay { position: fixed; inset: 0; background: rgba(10,18,28,.55); z-index: 1060; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(4px); } .oc-contact-modal-overlay.d-none { display: none !important; } /* ── Modal ───────────────────────────────────────────────── */ .oc-contact-modal { background: var(--oc-bg2); border-radius: 20px; width: 100%; max-width: 700px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 32px 80px rgba(0,0,0,.22), 0 0 0 1px rgba(255,255,255,.06); } /* ── Header ──────────────────────────────────────────────── */ .oc-cm-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; } .oc-cm-avatar { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; background: var(--oc-blue3); color: var(--oc-blue); } .oc-cm-avatar--whatsapp, .oc-cm-avatar--gupshup { background: #dcfce7; color: #166534; } .oc-cm-avatar--instagram { background: #fce7f3; color: #9d174d; } .oc-cm-avatar--facebook { background: #dbeafe; color: #1e40af; } .oc-cm-avatar--webchat { background: var(--oc-pur2); color: var(--oc-pur); } .oc-cm-head-info { flex: 1; min-width: 0; } .oc-cm-name-row { display: flex; align-items: center; gap: 9px; margin-bottom: 3px; } .oc-cm-name-row h5 { margin: 0; font-size: 16px; font-weight: 700; color: var(--oc-txt); } .oc-cm-meta { font-size: 12px; color: var(--oc-txt3); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .oc-cm-meta i { font-size: 12px; } .oc-cm-since { font-size: 10.5px; color: var(--oc-txt4); margin-top: 2px; } .oc-cm-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .oc-cm-action-btn { height: 32px; padding: 0 13px; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); font-size: 12px; font-weight: 600; color: var(--oc-txt2); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: var(--oc-font); transition: all .12s; } .oc-cm-action-btn i { font-size: 14px; } .oc-cm-action-btn:hover { background: var(--oc-bg3); } .oc-cm-action-btn--primary { background: var(--oc-blue); color: #fff; border-color: var(--oc-blue); } .oc-cm-action-btn--primary:hover { filter: brightness(1.08); } .oc-cm-close { width: 30px; height: 30px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--oc-txt3); font-family: var(--oc-font); transition: all .12s; flex-shrink: 0; } .oc-cm-close:hover { background: var(--oc-red2); color: var(--oc-red); border-color: var(--oc-red2); } /* ── Tabs ────────────────────────────────────────────────── */ .oc-cm-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); padding: 0 20px; overflow-x: auto; scrollbar-width: none; } .oc-cm-tabs::-webkit-scrollbar { display: none; } .oc-cm-tab { height: 40px; padding: 0 14px; border: none; background: transparent; font-size: 12.5px; font-weight: 600; color: var(--oc-txt3); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: var(--oc-font); border-bottom: 2px solid transparent; white-space: nowrap; transition: all .12s; } .oc-cm-tab i { font-size: 14px; } .oc-cm-tab:hover { color: var(--oc-txt2); } .oc-cm-tab.active { color: var(--oc-blue); border-bottom-color: var(--oc-blue); } /* ── Body ────────────────────────────────────────────────── */ .oc-cm-body { flex: 1; overflow: hidden; background: var(--oc-bg); } /* Todos los tabs ocultos */ .oc-cm-tab-pane { display: none !important; } /* Tab activo genérico */ .oc-cm-body .oc-cm-tab-pane.active { display: block !important; height: 420px; overflow-y: auto; padding: 20px; } .oc-cm-body .oc-cm-tab-pane.active::-webkit-scrollbar { width: 3px; } .oc-cm-body .oc-cm-tab-pane.active::-webkit-scrollbar-thumb { background: var(--oc-line); border-radius: 2px; } /* Tab chats — flex sin padding */ .oc-cm-body #cm-tab-chats.active { display: flex !important; flex-direction: column; padding: 0 !important; overflow: hidden; height: 420px; } /* ── Secciones ───────────────────────────────────────────── */ .oc-cm-section { margin-bottom: 18px; } .oc-cm-section:last-child { margin-bottom: 0; } .oc-cm-section-title { font-size: 9.5px; font-weight: 700; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; } /* Info rows */ .oc-cm-info-grid { display: flex; flex-direction: column; gap: 1px; border-radius: 10px; overflow: hidden; } .oc-cm-info-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: var(--oc-bg2); font-size: 12.5px; gap: 10px; } .oc-cm-info-row:first-child { border-radius: 10px 10px 0 0; } .oc-cm-info-row:last-child { border-radius: 0 0 10px 10px; } .oc-cm-info-row:only-child { border-radius: 10px; } .oc-cm-info-row span { color: var(--oc-txt3); display: flex; align-items: center; gap: 7px; } .oc-cm-info-row span i { font-size: 14px; color: var(--oc-txt4); } .oc-cm-info-row strong { color: var(--oc-txt); font-weight: 600; text-align: right; } /* Canales */ .oc-cm-channels { display: flex; flex-direction: column; gap: 4px; } .oc-cm-channel-item { display: flex; align-items: center; gap: 9px; padding: 9px 12px; background: var(--oc-bg2); border-radius: 10px; font-size: 12.5px; } .oc-cm-channel-item i { font-size: 17px; color: var(--oc-txt3); flex-shrink: 0; } .oc-cm-channel-item span { flex: 1; color: var(--oc-txt3); } .oc-cm-channel-item strong { color: var(--oc-txt); font-weight: 600; } /* ── Seguimientos ────────────────────────────────────────── */ .oc-cm-followups-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; font-size: 12px; color: var(--oc-txt3); } .oc-cm-followup-item { background: var(--oc-bg2); border: 1px solid var(--oc-line); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; } .oc-cm-fu-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .oc-cm-fu-top strong { font-size: 13px; font-weight: 600; color: var(--oc-txt); } .oc-cm-fu-risk { font-size: 11px; font-weight: 700; } .oc-cm-fu-meta { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--oc-txt3); margin-bottom: 4px; } .oc-cm-fu-next { font-size: 11px; color: var(--oc-blue); display: flex; align-items: center; gap: 4px; } /* ── Tab Chats ───────────────────────────────────────────── */ .oc-cm-chat-topbar { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); } .oc-cm-chat-topbar-info { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--oc-txt3); } .oc-cm-chat-topbar-info i { font-size: 14px; } .oc-cm-chat-topbar-info strong { color: var(--oc-txt2); font-weight: 600; } .oc-cm-chat-open-btn { height: 28px; padding: 0 12px; border: 1px solid var(--oc-blue2); border-radius: 8px; background: var(--oc-blue3); color: var(--oc-blue); font-size: 11.5px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font-family: var(--oc-font); transition: all .12s; } .oc-cm-chat-open-btn:hover { background: var(--oc-blue); color: #fff; } /* Área de mensajes */ .oc-cm-messages-area { flex: 1; overflow-y: auto; padding: 16px 16px 12px; background: #f0f4f8; min-height: 0; } .oc-cm-messages-area::-webkit-scrollbar { width: 3px; } .oc-cm-messages-area::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 2px; } /* ── Notas ───────────────────────────────────────────────── */ .oc-cm-note-input { width: 100%; border: 1px solid var(--oc-line); border-radius: 10px; padding: 10px 12px; font-size: 13px; color: var(--oc-txt); background: var(--oc-bg2); font-family: var(--oc-font); resize: none; outline: none; margin-bottom: 8px; transition: border-color .12s; } .oc-cm-note-input:focus { border-color: var(--oc-blue2); } .oc-cm-save-note-btn { width: 100%; height: 36px; border: 1px solid var(--oc-blue2); border-radius: 9px; background: var(--oc-blue3); font-size: 12.5px; font-weight: 600; color: var(--oc-blue); cursor: pointer; font-family: var(--oc-font); display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 16px; transition: all .12s; } .oc-cm-save-note-btn:hover { background: var(--oc-blue); color: #fff; } .oc-cm-notes-list { display: flex; flex-direction: column; gap: 8px; } .oc-cm-empty-text { font-size: 12px; color: var(--oc-txt3); } /* ── Editar ──────────────────────────────────────────────── */ .oc-cm-form { display: flex; flex-direction: column; gap: 12px; } .oc-cm-field { display: flex; flex-direction: column; gap: 4px; } .oc-cm-field label { font-size: 12px; font-weight: 600; color: var(--oc-txt2); } .oc-cm-save-btn { height: 40px; border: none; border-radius: 10px; background: var(--oc-blue); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--oc-font); margin-top: 4px; } .oc-cm-save-btn:hover { filter: brightness(1.08); } /* ── Empty state ─────────────────────────────────────────── */ .oc-cm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 50px 20px; color: var(--oc-txt3); text-align: center; height: 100%; } .oc-cm-empty i { font-size: 40px; color: var(--oc-line); } .oc-cm-empty strong { font-size: 13.5px; font-weight: 700; color: var(--oc-txt2); } .oc-cm-empty span { font-size: 12px; max-width: 220px; line-height: 1.5; } .oc-cm-empty-text { font-size: 12px; color: var(--oc-txt3); } /* ── Shared ──────────────────────────────────────────────── */ .oc-cm-loading { display: flex; align-items: center; justify-content: center; padding: 40px; } .oc-cm-loading i { font-size: 24px; color: var(--oc-txt4); animation: cm-spin 1s linear infinite; } @keyframes cm-spin { to { transform: rotate(360deg); } } .oc-cm-mini-btn { height: 28px; padding: 0 10px; border: 1px solid var(--oc-line); border-radius: 7px; background: var(--oc-bg2); font-size: 11.5px; font-weight: 600; color: var(--oc-txt2); cursor: pointer; font-family: var(--oc-font); display: inline-flex; align-items: center; gap: 4px; transition: all .12s; } .oc-cm-mini-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* ============================================================ CHAT CENTER — Header full-width estilo Follow-up Center ============================================================ */ /* Wrapper page — flex column para header encima + body abajo */ .oc-chat-page { display: flex; flex-direction: column; height: 100%; width: 100%; overflow: hidden; } /* ── Header full-width ───────────────────────────────────── */ .oc-chat-page-header { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px 12px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; } /* Fila 1: título + botón */ .oc-chat-page-header-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .oc-chat-page-header-left { flex-shrink: 0; } .oc-chat-page-header-left h4 { font-size: 25px; font-weight: 900; color: var(--oc-txt); margin: 0 0 3px; letter-spacing: -0.03em; line-height: 1.1; } .oc-chat-page-header-left p { font-size: 12px; color: var(--oc-txt3); margin: 0; } /* Fila 2: chips de canal */ .oc-chat-page-chips { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; align-items: center; padding-bottom: 2px; } .oc-chat-page-chips::-webkit-scrollbar { display: none; } .oc-chat-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 13px; border: 1px solid var(--oc-line); border-radius: 999px; background: transparent; font-size: 12px; font-weight: 600; color: var(--oc-txt3); cursor: pointer; white-space: nowrap; font-family: var(--oc-font); transition: all .12s; flex-shrink: 0; } .oc-chat-chip i { font-size: 13px; } .oc-chat-chip:hover { background: var(--oc-bg3); color: var(--oc-txt2); } .oc-chat-chip.active { background: var(--oc-blue3); border-color: var(--oc-blue2); color: var(--oc-blue); font-weight: 700; } .oc-chat-shortcuts-btn { height: 38px; padding: 0 16px; border: none; border-radius: 11px; background: var(--oc-blue); font-size: 13px; font-weight: 900; color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: var(--oc-font); box-shadow: 0 8px 20px rgba(37,99,235,.2); transition: all .15s; } .oc-chat-shortcuts-btn i { font-size: 15px; } .oc-chat-shortcuts-btn:hover { filter: brightness(1.08); } /* ── Body: sidebar + chat area en fila ───────────────────── */ .oc-chat-page-body { display: flex; flex-direction: row; flex: 1; min-height: 0; overflow: hidden; } /* El oc-side y oc-history ya tienen sus estilos — solo aseguramos que funcionen dentro del nuevo wrapper */ .oc-chat-page-body .oc-side { height: 100%; } .oc-chat-page-body .oc-history { flex: 1; height: 100%; } /* ── Sidebar search — sin el título viejo ────────────────── */ .oc-side-top { padding: 10px 12px !important; } /* ══════════════════════════════════════════════════════════ MODAL SHORTCUTS ══════════════════════════════════════════════════════════ */ .oc-shortcuts-overlay { position: fixed; inset: 0; background: rgba(10,18,28,.5); z-index: 1070; display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); } .oc-shortcuts-overlay.d-none { display: none !important; } .oc-shortcuts-modal { background: var(--oc-bg2); border-radius: 16px; width: 100%; max-width: 520px; max-height: 85vh; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.2); } .oc-shortcuts-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--oc-line); flex-shrink: 0; } .oc-shortcuts-head-left { display: flex; align-items: center; gap: 12px; } .oc-shortcuts-head-left > i { font-size: 20px; color: var(--oc-blue); background: var(--oc-blue3); border: 1px solid var(--oc-blue2); border-radius: 10px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .oc-shortcuts-head-left strong { font-size: 15px; font-weight: 700; color: var(--oc-txt); display: block; } .oc-shortcuts-head-left span { font-size: 12px; color: var(--oc-txt3); } .oc-shortcuts-close { width: 30px; height: 30px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg2); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; color: var(--oc-txt3); font-family: var(--oc-font); transition: all .12s; } .oc-shortcuts-close:hover { background: var(--oc-red2); color: var(--oc-red); border-color: var(--oc-red2); } .oc-shortcuts-body { flex: 1; overflow-y: auto; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 20px; } .oc-shortcuts-body::-webkit-scrollbar { width: 3px; } .oc-shortcuts-body::-webkit-scrollbar-thumb { background: var(--oc-line); border-radius: 2px; } .oc-shortcuts-group {} .oc-shortcuts-group-title { font-size: 9.5px; font-weight: 700; color: var(--oc-txt3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--oc-line); } .oc-shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--oc-line); font-size: 13px; color: var(--oc-txt2); } .oc-shortcut-row:last-child { border-bottom: none; } .oc-shortcut-keys { display: flex; align-items: center; gap: 4px; } kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; background: var(--oc-bg3); border: 1px solid var(--oc-line); border-bottom: 2px solid var(--oc-line2); border-radius: 5px; font-size: 11px; font-weight: 600; color: var(--oc-txt2); font-family: var(--oc-font); } /* ============================================================ SETTINGS PAGE ============================================================ */ .oc-settings-page { height: 100%; width: 100%; display: flex; flex-direction: column; overflow: hidden; background: var(--oc-bg); } /* Header */ .oc-settings-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 22px 28px 18px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); flex-shrink: 0; } .oc-settings-header h4 { margin: 0 0 4px; font-size: 25px; font-weight: 900; color: var(--oc-txt); letter-spacing: -0.03em; } .oc-settings-header p { margin: 0; font-size: 13px; color: var(--oc-txt3); } /* Form */ #settingsForm { flex: 1; min-height: 0; display: flex; overflow: hidden; } /* Body */ .oc-settings-body { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; overflow-y: auto; overflow-x: hidden; padding: 24px 28px; align-items: start; } .oc-settings-body::-webkit-scrollbar { width: 4px; } .oc-settings-body::-webkit-scrollbar-thumb { background: var(--oc-line); border-radius: 999px; } /* Columns */ .oc-settings-col { min-width: 0; display: flex; flex-direction: column; gap: 16px; } /* Card */ .oc-settings-card { background: var(--oc-bg2); border: 1px solid var(--oc-line); border-radius: 14px; padding: 16px; } .oc-settings-card-title { margin-bottom: 14px; display: flex; align-items: center; gap: 7px; color: var(--oc-txt2); font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .oc-settings-card-title i { color: var(--oc-blue); font-size: 15px; } /* Perfil */ .oc-settings-avatar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px; background: var(--oc-bg3); border-radius: 12px; } .oc-settings-avatar { width: 46px; height: 46px; min-width: 46px; border-radius: 50%; background: var(--oc-blue3); color: var(--oc-blue); font-size: 15px; font-weight: 800; display: flex; align-items: center; justify-content: center; overflow: hidden; } .oc-settings-avatar-img, .oc-settings-avatar img { width: 100%; height: 100%; object-fit: cover; } .oc-settings-avatar-name { font-size: 13.5px; font-weight: 800; color: var(--oc-txt); } .oc-settings-avatar-role { margin-top: 2px; color: var(--oc-txt3); font-size: 11.5px; } /* Fields */ .oc-settings-fields { display: flex; flex-direction: column; gap: 14px; } .oc-settings-field { display: flex; flex-direction: column; gap: 7px; } .oc-settings-field label { font-size: 11.5px; font-weight: 800; color: var(--oc-txt2); } .oc-settings-card .form-control, .oc-settings-card .form-select { min-height: 40px; border-radius: 10px; border-color: var(--oc-line); color: var(--oc-txt2); font-size: 13px; box-shadow: none; } .oc-settings-card .form-control:focus, .oc-settings-card .form-select:focus { border-color: var(--oc-blue); box-shadow: 0 0 0 .15rem rgba(37, 99, 235, .10); } .oc-settings-card .form-control:disabled { background: var(--oc-bg3); color: var(--oc-txt3); } .oc-settings-field-hint { margin-top: 2px; color: var(--oc-txt3); font-size: 11px; line-height: 1.4; display: flex; align-items: flex-start; gap: 5px; } .oc-settings-field-hint i { margin-top: 1px; font-size: 13px; flex-shrink: 0; } /* Seguridad y avatar */ .oc-settings-security-card { overflow: hidden; } .oc-settings-avatar-upload-box { display: flex; align-items: center; gap: 18px; padding: 16px; margin-bottom: 16px; border: 1px solid var(--oc-line); border-radius: 16px; background: radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 35%), linear-gradient(135deg, var(--oc-blue3), #fff); } .oc-settings-avatar-lg { width: 86px; height: 86px; min-width: 86px; border-radius: 50%; background: linear-gradient(135deg, var(--oc-blue), var(--oc-teal)); color: #fff; font-size: 26px; font-weight: 900; display: flex; align-items: center; justify-content: center; overflow: hidden; } .oc-settings-avatar-lg img { width: 100%; height: 100%; object-fit: cover; } .oc-settings-avatar-upload-info { flex: 1; min-width: 0; } .oc-settings-avatar-upload-info h6 { margin: 0 0 4px; color: var(--oc-txt); font-size: 14px; font-weight: 900; } .oc-settings-avatar-upload-info p { margin: 0 0 12px; color: var(--oc-txt3); font-size: 12px; line-height: 1.4; } .oc-settings-upload-btn { width: max-content; height: 34px; padding: 0 14px; border: 1px solid var(--oc-blue2); border-radius: 999px; background: var(--oc-blue3); color: var(--oc-blue); font-size: 12px; font-weight: 900; display: inline-flex; align-items: center; gap: 7px; cursor: pointer; transition: all .15s ease; } .oc-settings-upload-btn:hover { background: var(--oc-blue); color: #fff; border-color: var(--oc-blue); } .oc-settings-password-box { padding-top: 16px; border-top: 1px solid var(--oc-line); } .oc-settings-password-title { margin-bottom: 18px; color: var(--oc-txt); font-size: 13px; font-weight: 900; display: flex; align-items: center; gap: 7px; } .oc-settings-password-title i { color: var(--oc-blue); font-size: 16px; } .oc-settings-password-box .oc-settings-field { margin-bottom: 16px; gap: 9px; } .oc-settings-password-box .oc-settings-field:last-of-type { margin-bottom: 10px; } /* Toggle rows */ .oc-settings-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--oc-line); } .oc-settings-toggle-row:last-child { border-bottom: none; } .oc-settings-toggle-label { display: block; margin-bottom: 2px; color: var(--oc-txt); font-size: 13px; font-weight: 700; } .oc-settings-toggle-desc { display: block; color: var(--oc-txt3); font-size: 11px; } /* Toggle switch */ .oc-settings-toggle { width: 38px; height: 22px; border-radius: 999px; background: var(--oc-line2); position: relative; cursor: pointer; flex-shrink: 0; transition: background .2s; } .oc-settings-toggle.on { background: var(--oc-blue); } .oc-settings-toggle::after { content: ''; position: absolute; top: 2.5px; left: 2.5px; width: 17px; height: 17px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 4px rgba(0,0,0,.15); } .oc-settings-toggle.on::after { left: 18.5px; } /* Sonidos */ .oc-settings-sound-section { padding: 10px 0; border-bottom: 1px solid var(--oc-line); } .oc-settings-sound-section:last-of-type { border-bottom: none; } .oc-settings-sound-label { margin-bottom: 7px; color: var(--oc-txt2); font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 6px; } .oc-settings-sound-label i { color: var(--oc-txt3); font-size: 14px; } .oc-settings-sound-row { display: flex; align-items: center; gap: 7px; } .oc-settings-sound-row .form-select { flex: 1; } .oc-settings-preview-btn { width: 34px; height: 34px; flex-shrink: 0; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg3); color: var(--oc-txt2); font-size: 14px; font-family: var(--oc-font); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .12s ease; } .oc-settings-preview-btn:hover { background: var(--oc-blue3); color: var(--oc-blue); border-color: var(--oc-blue2); } /* Volumen */ .oc-settings-volume-row { margin-top: 4px; display: flex; align-items: center; gap: 10px; } .oc-settings-volume-row i { color: var(--oc-txt3); font-size: 16px; flex-shrink: 0; } .oc-settings-volume-row input[type="range"] { flex: 1; height: 4px; border-radius: 2px; background: var(--oc-line); outline: none; cursor: pointer; -webkit-appearance: none; } .oc-settings-volume-row input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--oc-blue); cursor: pointer; box-shadow: 0 1px 4px rgba(37,99,235,.3); -webkit-appearance: none; } .oc-settings-volume-row span { min-width: 32px; color: var(--oc-txt3); font-size: 12px; font-weight: 700; text-align: right; } /* Tema */ .oc-settings-theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px; } .oc-settings-theme-card { border: 1.5px solid var(--oc-line); border-radius: 12px; padding: 10px; cursor: pointer; transition: all .12s ease; } .oc-settings-theme-card.active { border-color: var(--oc-blue); } .oc-settings-theme-preview { height: 52px; margin-bottom: 8px; border: 1px solid var(--oc-line); border-radius: 8px; overflow: hidden; display: flex; } .oc-settings-theme-preview--light .oc-settings-theme-sidebar { background: #1e293b; } .oc-settings-theme-preview--light .oc-settings-theme-main { background: #f8fafc; } .oc-settings-theme-preview--light .oc-settings-theme-bar { background: #e2e8f0; } .oc-settings-theme-preview--dark .oc-settings-theme-sidebar { background: #0f172a; } .oc-settings-theme-preview--dark .oc-settings-theme-main { background: #1e293b; } .oc-settings-theme-preview--dark .oc-settings-theme-bar { background: #334155; } .oc-settings-theme-sidebar { width: 28%; flex-shrink: 0; } .oc-settings-theme-main { flex: 1; padding: 5px 7px; display: flex; flex-direction: column; gap: 4px; } .oc-settings-theme-bar { width: 100%; height: 5px; border-radius: 2px; } .oc-settings-theme-bar.short { width: 60%; } .oc-settings-theme-label { display: flex; align-items: center; justify-content: space-between; color: var(--oc-txt); font-size: 12.5px; font-weight: 700; } .oc-settings-theme-check { color: var(--oc-blue); font-size: 14px; } /* Estado */ .oc-settings-status-grid { display: flex; flex-direction: column; gap: 5px; } .oc-settings-status-btn { height: 36px; padding: 0 12px; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg3); color: var(--oc-txt2); font-size: 12.5px; font-weight: 700; font-family: var(--oc-font); cursor: pointer; display: flex; align-items: center; gap: 9px; transition: all .12s ease; } .oc-settings-status-btn:hover { background: var(--oc-bg2); color: var(--oc-txt); } .oc-settings-status-btn.active { background: var(--oc-bg2); border-color: var(--oc-line2); color: var(--oc-txt); } .oc-settings-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } /* Responsive */ @media (max-width: 1100px) { .oc-settings-body { grid-template-columns: 1fr 1fr; } .oc-settings-col:last-child { grid-column: 1 / -1; } } @media (max-width: 700px) { .oc-settings-header { flex-direction: column; } .oc-settings-body { grid-template-columns: 1fr; padding: 16px; } .oc-settings-avatar-upload-box { flex-direction: column; align-items: flex-start; } } /* ============================================================ THEME COMPATIBILITY OVERRIDES Estas reglas corrigen bloques antiguos con colores fijos (#fff, #f8fafc) para que Dark y Mixer respondan al mismo sistema de variables. ============================================================ */ html[data-theme="dark"] body, html[data-theme="dark"] .oc-shell, html[data-theme="dark"] .oc-history, html[data-theme="dark"] .oc-chat-panel, html[data-theme="dark"] .oc-calendar-page, html[data-theme="dark"] .fu-page, html[data-theme="dark"] .oc-settings-page, html[data-theme="dark"] .oc-dir-page, html[data-theme="dark"] .oc-dashboard-page, html[data-theme="dark"] .oc-reports-page { background: var(--oc-bg) !important; color: var(--oc-txt) !important; } html[data-theme="dark"] .oc-side, html[data-theme="dark"] .oc-side-top, html[data-theme="dark"] .oc-ch, html[data-theme="dark"] .oc-tags, html[data-theme="dark"] .oc-foot, html[data-theme="dark"] .chat-history-footer, html[data-theme="dark"] .oc-card, html[data-theme="dark"] .oc-modal-content, html[data-theme="dark"] .oc-modal-header, html[data-theme="dark"] .oc-modal-footer, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .offcanvas, html[data-theme="dark"] .oc-offcanvas-header, html[data-theme="dark"] .oc-calendar-sidebar, html[data-theme="dark"] .oc-calendar-main, html[data-theme="dark"] .oc-calendar-top, html[data-theme="dark"] .oc-calendar-box, html[data-theme="dark"] .oc-calendar-box .fc, html[data-theme="dark"] .oc-cal-card, html[data-theme="dark"] .oc-event-modal, html[data-theme="dark"] .oc-event-modal-head, html[data-theme="dark"] .oc-event-modal-foot, html[data-theme="dark"] .oc-event-panel-head, html[data-theme="dark"] .oc-event-panel-foot, html[data-theme="dark"] .oc-event-info-item, html[data-theme="dark"] .oc-event-contact, html[data-theme="dark"] .oc-event-note, html[data-theme="dark"] .oc-event-tag, html[data-theme="dark"] .oc-assign-switch, html[data-theme="dark"] .oc-file-action, html[data-theme="dark"] .oc-input, html[data-theme="dark"] .oc-select, html[data-theme="dark"] .oc-textarea, html[data-theme="dark"] .oc-disp-card, html[data-theme="dark"] .oc-tpl-card, html[data-theme="dark"] .oc-client-card, html[data-theme="dark"] .oc-tr-card, html[data-theme="dark"] .oc-transfer-card, html[data-theme="dark"] .oc-calendar-box .fc .fc-button, html[data-theme="dark"] .oc-calendar-box .fc .fc-col-header-cell, html[data-theme="dark"] .oc-calendar-box .fc .fc-daygrid-day, html[data-theme="dark"] .oc-event-modal-close { background: var(--oc-bg2) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme="dark"] .oc-modal-body, html[data-theme="dark"] .oc-offcanvas-body, html[data-theme="dark"] .oc-event-modal-body, html[data-theme="dark"] .oc-event-detail-panel, html[data-theme="dark"] .chat-history-body, html[data-theme="dark"] .oc-msgs, html[data-theme="dark"] .oc-calendar-box .fc .fc-view-harness, html[data-theme="dark"] .oc-cal-next-empty, html[data-theme="dark"] .oc-srch, html[data-theme="dark"] .oc-transfer-search, html[data-theme="dark"] .oc-minp, html[data-theme="dark"] .message-input, html[data-theme="dark"] #sendtext, html[data-theme="dark"] .oc-system-msg { background: var(--oc-bg3) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme="dark"] .oc-bub--in, html[data-theme="dark"] .oc-tbub, html[data-theme="dark"] #previewFileWrapper, html[data-theme="dark"] .oc-preview-wrap, html[data-theme="dark"] .oc-emoji-picker { background: var(--oc-bg2) !important; color: var(--oc-txt) !important; border-color: var(--oc-line2) !important; box-shadow: 0 1px 8px var(--oc-shadow) !important; } html[data-theme="dark"] .oc-ci:hover, html[data-theme="dark"] .chat-contact-list-item:hover, html[data-theme="dark"] .oc-hb:hover, html[data-theme="dark"] .oc-opt-btn:hover, html[data-theme="dark"] .oc-compose:hover, html[data-theme="dark"] .oc-calendar-box .fc .fc-button:hover, html[data-theme="dark"] .oc-calendar-box .fc .fc-daygrid-day:hover { background: var(--oc-bg4) !important; } html[data-theme="dark"] .chat-contact-list-item.active, html[data-theme="dark"] .oc-ci.active, html[data-theme="dark"] .oc-disp-card--selected, html[data-theme="dark"] .oc-filter-chip.active, html[data-theme="dark"] .oc-assign-switch-item.active { background: var(--oc-blue3) !important; border-color: var(--oc-blue) !important; color: var(--oc-blue) !important; } html[data-theme="dark"] .oc-calendar-box .fc-theme-standard td, html[data-theme="dark"] .oc-calendar-box .fc-theme-standard th, html[data-theme="dark"] .oc-calendar-box .fc .fc-toolbar, html[data-theme="dark"] .oc-calendar-box .fc-theme-standard .fc-scrollgrid { border-color: var(--oc-line) !important; } html[data-theme="dark"] .oc-calendar-box .fc .fc-toolbar-title, html[data-theme="dark"] .oc-calendar-top h4, html[data-theme="dark"] .oc-side-h, html[data-theme="dark"] .oc-ch-name, html[data-theme="dark"] .oc-modal-title, html[data-theme="dark"] .oc-event-modal-title-wrap h5, html[data-theme="dark"] .oc-ci-name, html[data-theme="dark"] .chat-contact-list-item .chat-contact-name { color: var(--oc-txt) !important; } html[data-theme="dark"] .oc-calendar-box .fc .fc-col-header-cell-cushion, html[data-theme="dark"] .oc-calendar-box .fc .fc-daygrid-day-number, html[data-theme="dark"] .oc-ch-sub, html[data-theme="dark"] .oc-ch-sub2, html[data-theme="dark"] .oc-ci-prev, html[data-theme="dark"] .chat-contact-list-item #previewtext, html[data-theme="dark"] .oc-ci-time, html[data-theme="dark"] .chat-contact-list-item #current_time, html[data-theme="dark"] .oc-card-title, html[data-theme="dark"] .oc-event-section-title, html[data-theme="dark"] .oc-event-info-item span { color: var(--oc-txt3) !important; } html[data-theme="dark"] .oc-calendar-box .fc .fc-day-today, html[data-theme="dark"] .oc-calendar-box .fc .fc-timegrid-col.fc-day-today { background: rgba(59, 130, 246, .12) !important; } html[data-theme="dark"] .oc-file-fallback { background: rgba(255,255,255,.08) !important; color: var(--oc-txt) !important; } html[data-theme="dark"] img, html[data-theme="dark"] video { color-scheme: normal; } /* Mixer: fondo suave con paneles claros y rail oscuro */ html[data-theme="mixer"] .oc-shell, html[data-theme="mixer"] .oc-calendar-page, html[data-theme="mixer"] .fu-page, html[data-theme="mixer"] .oc-settings-page, html[data-theme="mixer"] .oc-dir-page, html[data-theme="mixer"] .oc-dashboard-page, html[data-theme="mixer"] .oc-reports-page { background: linear-gradient(135deg, #edf4ff 0%, #f7fbff 48%, #eef7ff 100%) !important; } html[data-theme="mixer"] .oc-side, html[data-theme="mixer"] .oc-ch, html[data-theme="mixer"] .oc-tags, html[data-theme="mixer"] .oc-foot, html[data-theme="mixer"] .chat-history-footer, html[data-theme="mixer"] .oc-calendar-sidebar, html[data-theme="mixer"] .oc-calendar-main, html[data-theme="mixer"] .oc-calendar-top, html[data-theme="mixer"] .oc-calendar-box, html[data-theme="mixer"] .oc-card, html[data-theme="mixer"] .oc-modal-content, html[data-theme="mixer"] .offcanvas { box-shadow: 0 8px 24px rgba(16, 32, 51, .05); } /* Settings preview para la tercera tarjeta */ .oc-settings-theme-preview--mixer { background: linear-gradient(135deg, #101b27 0 26%, #edf4ff 26% 100%) !important; } .oc-settings-theme-preview--mixer .oc-settings-theme-sidebar { background: #101b27 !important; } .oc-settings-theme-preview--mixer .oc-settings-theme-main { background: #edf4ff !important; } .oc-settings-theme-preview--mixer .oc-settings-theme-bar { background: #2563eb !important; } .oc-settings-theme-preview--mixer .oc-settings-theme-bar.short { background: #c8d6eb !important; } /* ============================================================ THEME PATCH v2 - Settings / Contacts / Reports Corrige rail claro, fondos hardcoded y textos en Dark/Mixer. ============================================================ */ /* LIGHT: rail claro real */ html[data-theme="light"] { --oc-rail: #ffffff; --oc-rail-icon: #64748b; --oc-rail-icon-hover: #2563eb; --oc-rail-hover: #eff6ff; --oc-rail-border: #e2e7f0; --oc-rail-badge-border: #ffffff; } html[data-theme="mixer"] { --oc-rail-icon: rgba(255,255,255,.48); --oc-rail-icon-hover: #93c5fd; --oc-rail-hover: rgba(37,99,235,.18); --oc-rail-border: rgba(255,255,255,.08); --oc-rail-badge-border: #101b27; } html[data-theme="dark"] { --oc-rail-icon: rgba(255,255,255,.48); --oc-rail-icon-hover: #93c5fd; --oc-rail-hover: rgba(37,99,235,.18); --oc-rail-border: rgba(255,255,255,.08); --oc-rail-badge-border: #020617; } html[data-theme="light"] .oc-rail { background: var(--oc-rail) !important; border-right: 1px solid var(--oc-rail-border) !important; box-shadow: 8px 0 24px rgba(15,25,35,.04) !important; } html[data-theme="light"] .oc-ri { color: var(--oc-rail-icon) !important; } html[data-theme="light"] .oc-ri:hover { background: var(--oc-rail-hover) !important; color: var(--oc-rail-icon-hover) !important; } html[data-theme="light"] .oc-ri--active, html[data-theme="light"] .oc-ri.active { background: var(--oc-blue) !important; color: #fff !important; } html[data-theme="light"] .oc-ri--active i, html[data-theme="light"] .oc-ri.active i { color: #fff !important; } html[data-theme="light"] .oc-ri-pip, html[data-theme="light"] .oc-global-chat-badge, html[data-theme="light"] .oc-rail-agent-dot { border-color: var(--oc-rail-badge-border) !important; } html[data-theme="light"] .oc-rail-logo { box-shadow: 0 8px 18px rgba(37,99,235,.18) !important; } html[data-theme="dark"] .oc-rail, html[data-theme="mixer"] .oc-rail { background: var(--oc-rail) !important; border-right: 1px solid var(--oc-rail-border) !important; } html[data-theme="dark"] .oc-ri, html[data-theme="mixer"] .oc-ri { color: var(--oc-rail-icon) !important; } html[data-theme="dark"] .oc-ri:hover, html[data-theme="mixer"] .oc-ri:hover { background: var(--oc-rail-hover) !important; color: var(--oc-rail-icon-hover) !important; } html[data-theme="dark"] .oc-ri-pip, html[data-theme="dark"] .oc-global-chat-badge, html[data-theme="dark"] .oc-rail-agent-dot, html[data-theme="mixer"] .oc-ri-pip, html[data-theme="mixer"] .oc-global-chat-badge, html[data-theme="mixer"] .oc-rail-agent-dot { border-color: var(--oc-rail-badge-border) !important; } /* Aplica variables a wrappers que a veces vienen del template */ html[data-theme="dark"] .layout-wrapper, html[data-theme="dark"] .layout-container, html[data-theme="dark"] .layout-page, html[data-theme="dark"] .content-wrapper, html[data-theme="dark"] .layout-content-navbar, html[data-theme="dark"] .container-fluid, html[data-theme="dark"] .container-xxl, html[data-theme="mixer"] .layout-wrapper, html[data-theme="mixer"] .layout-container, html[data-theme="mixer"] .layout-page, html[data-theme="mixer"] .content-wrapper, html[data-theme="mixer"] .layout-content-navbar, html[data-theme="mixer"] .container-fluid, html[data-theme="mixer"] .container-xxl, html[data-theme="light"] .layout-wrapper, html[data-theme="light"] .layout-container, html[data-theme="light"] .layout-page, html[data-theme="light"] .content-wrapper, html[data-theme="light"] .layout-content-navbar, html[data-theme="light"] .container-fluid, html[data-theme="light"] .container-xxl { background: var(--oc-bg) !important; color: var(--oc-txt) !important; } /* DARK: páginas completas */ html[data-theme="dark"] .oc-settings-page, html[data-theme="dark"] .oc-dir-page, html[data-theme="dark"] .oc-agent-report-page, html[data-theme="dark"] .oc-reports-page { background: var(--oc-bg) !important; color: var(--oc-txt) !important; } /* DARK: Settings */ html[data-theme="dark"] .oc-settings-header, html[data-theme="dark"] .oc-settings-card, html[data-theme="dark"] .oc-settings-theme-card, html[data-theme="dark"] .oc-settings-status-btn.active, html[data-theme="dark"] .oc-settings-card .form-control, html[data-theme="dark"] .oc-settings-card .form-select, html[data-theme="dark"] .oc-settings-preview-btn { background: var(--oc-bg2) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme="dark"] .oc-settings-avatar-row, html[data-theme="dark"] .oc-settings-status-btn, html[data-theme="dark"] .oc-settings-card .form-control:disabled, html[data-theme="dark"] .oc-settings-theme-preview, html[data-theme="dark"] .oc-settings-preview-btn:hover { background: var(--oc-bg3) !important; color: var(--oc-txt2) !important; border-color: var(--oc-line) !important; } html[data-theme="dark"] .oc-settings-avatar-upload-box { background: radial-gradient(circle at top left, rgba(59,130,246,.22), transparent 38%), linear-gradient(135deg, var(--oc-bg3), var(--oc-bg2)) !important; border-color: var(--oc-line) !important; } html[data-theme="dark"] .oc-settings-header h4, html[data-theme="dark"] .oc-settings-avatar-name, html[data-theme="dark"] .oc-settings-avatar-upload-info h6, html[data-theme="dark"] .oc-settings-password-title, html[data-theme="dark"] .oc-settings-toggle-label, html[data-theme="dark"] .oc-settings-theme-label { color: var(--oc-txt) !important; } html[data-theme="dark"] .oc-settings-header p, html[data-theme="dark"] .oc-settings-avatar-role, html[data-theme="dark"] .oc-settings-avatar-upload-info p, html[data-theme="dark"] .oc-settings-toggle-desc, html[data-theme="dark"] .oc-settings-field-hint, html[data-theme="dark"] .oc-settings-volume-row span { color: var(--oc-txt3) !important; } html[data-theme="dark"] .oc-settings-card-title, html[data-theme="dark"] .oc-settings-field label, html[data-theme="dark"] .oc-settings-sound-label { color: var(--oc-txt2) !important; } html[data-theme="dark"] .oc-settings-theme-card.active { background: var(--oc-blue3) !important; border-color: var(--oc-blue) !important; } /* DARK: Contactos */ html[data-theme="dark"] .oc-dir-header, html[data-theme="dark"] .oc-dir-card, html[data-theme="dark"] .oc-dir-detail, html[data-theme="dark"] .oc-cm-modal, html[data-theme="dark"] .oc-cm-card, html[data-theme="dark"] .oc-cm-info-row, html[data-theme="dark"] .oc-cm-channel-item, html[data-theme="dark"] .oc-cm-followup-item, html[data-theme="dark"] .oc-cm-note-item, html[data-theme="dark"] .oc-dir-card-detail-btn, html[data-theme="dark"] .oc-dir-order-select, html[data-theme="dark"] .oc-dir-view-btn, html[data-theme="dark"] .oc-dir-outline-btn, html[data-theme="dark"] .oc-dir-search, html[data-theme="dark"] .oc-dir-chip, html[data-theme="dark"] .oc-dir-more-filter { background: var(--oc-bg2) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme="dark"] .oc-dir-card:hover, html[data-theme="dark"] .oc-dir-card.active, html[data-theme="dark"] .oc-dir-view-btn.active, html[data-theme="dark"] .oc-dir-chip.active, html[data-theme="dark"] .oc-dir-card-detail-btn:hover, html[data-theme="dark"] .oc-cm-tab.active { background: var(--oc-blue3) !important; color: var(--oc-blue) !important; border-color: var(--oc-blue) !important; } html[data-theme="dark"] .oc-dir-search input, html[data-theme="dark"] .oc-dir-card-name strong, html[data-theme="dark"] .oc-dir-card-meta strong, html[data-theme="dark"] .oc-cm-info-row strong, html[data-theme="dark"] .oc-cm-channel-item strong, html[data-theme="dark"] .oc-cm-followup-item strong, html[data-theme="dark"] .oc-dir-header h4, html[data-theme="dark"] .oc-cm-title, html[data-theme="dark"] #cmName { color: var(--oc-txt) !important; } html[data-theme="dark"] .oc-dir-header p, html[data-theme="dark"] .oc-dir-list-head, html[data-theme="dark"] .oc-dir-list-head > span, html[data-theme="dark"] .oc-dir-card-name span, html[data-theme="dark"] .oc-dir-card-contact, html[data-theme="dark"] .oc-dir-card-meta span, html[data-theme="dark"] .oc-dir-card-meta strong, html[data-theme="dark"] .oc-cm-info-row span, html[data-theme="dark"] .oc-cm-channel-item span, html[data-theme="dark"] .oc-cm-empty, html[data-theme="dark"] .oc-dir-search input::placeholder { color: var(--oc-txt3) !important; } html[data-theme="dark"] .oc-dir-card-divider, html[data-theme="dark"] .oc-dir-card-actions, html[data-theme="dark"] .oc-cm-divider { border-color: var(--oc-line) !important; background: var(--oc-line) !important; } /* DARK: Reportes */ html[data-theme="dark"] .oc-agent-report-page, html[data-theme="dark"] .oc-agent-report-hero, html[data-theme="dark"] .oc-agent-report-kpi, html[data-theme="dark"] .oc-agent-report-mini, html[data-theme="dark"] .oc-agent-report-tabs, html[data-theme="dark"] .oc-agent-report-panel, html[data-theme="dark"] .oc-agent-report-card, html[data-theme="dark"] .oc-agent-report-chart, html[data-theme="dark"] .oc-agent-report-history, html[data-theme="dark"] .oc-agent-report-msg-panel, html[data-theme="dark"] .oc-agent-report-msg-head, html[data-theme="dark"] .oc-agent-report-toolbar, html[data-theme="dark"] .oc-agent-report-select, html[data-theme="dark"] .oc-agent-report-search, html[data-theme="dark"] .oc-agent-report-conv-row, html[data-theme="dark"] .oc-agent-report-empty { background: var(--oc-bg2) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme="dark"] .oc-agent-report-tab.active, html[data-theme="dark"] .oc-agent-report-conv-row:hover, html[data-theme="dark"] .oc-agent-report-conv-row.active { background: var(--oc-blue3) !important; color: var(--oc-blue) !important; border-color: var(--oc-blue) !important; } html[data-theme="dark"] .oc-agent-report-hero h4, html[data-theme="dark"] .oc-agent-report-hero h5, html[data-theme="dark"] .oc-agent-report-kpi strong, html[data-theme="dark"] .oc-agent-report-kpi-value, html[data-theme="dark"] .oc-agent-report-panel-title, html[data-theme="dark"] .oc-agent-report-conv-client strong, html[data-theme="dark"] .oc-agent-report-msg-head strong, html[data-theme="dark"] .oc-agent-report-empty strong { color: var(--oc-txt) !important; } html[data-theme="dark"] .oc-agent-report-hero p, html[data-theme="dark"] .oc-agent-report-kpi span, html[data-theme="dark"] .oc-agent-report-kpi small, html[data-theme="dark"] .oc-agent-report-mini span, html[data-theme="dark"] .oc-agent-report-conv-client span, html[data-theme="dark"] .oc-agent-report-conv-message span, html[data-theme="dark"] .oc-agent-report-conv-meta small, html[data-theme="dark"] .oc-agent-report-msg-head span, html[data-theme="dark"] .oc-agent-report-empty span, html[data-theme="dark"] .oc-agent-report-search input::placeholder { color: var(--oc-txt3) !important; } html[data-theme="dark"] .oc-agent-report-search input, html[data-theme="dark"] .oc-agent-report-select { color: var(--oc-txt) !important; } html[data-theme="dark"] .oc-agent-report-msg-body { background: var(--oc-bg3) !important; } html[data-theme="dark"] .oc-agent-report-msg-bubble.is-in { background: var(--oc-bg2) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } /* MIXER: asegurar consistencia en settings, contactos y reportes */ html[data-theme="mixer"] .oc-settings-header, html[data-theme="mixer"] .oc-settings-card, html[data-theme="mixer"] .oc-dir-header, html[data-theme="mixer"] .oc-dir-card, html[data-theme="mixer"] .oc-dir-detail, html[data-theme="mixer"] .oc-agent-report-hero, html[data-theme="mixer"] .oc-agent-report-kpi, html[data-theme="mixer"] .oc-agent-report-mini, html[data-theme="mixer"] .oc-agent-report-tabs, html[data-theme="mixer"] .oc-agent-report-panel, html[data-theme="mixer"] .oc-agent-report-card, html[data-theme="mixer"] .oc-agent-report-chart, html[data-theme="mixer"] .oc-agent-report-history, html[data-theme="mixer"] .oc-agent-report-msg-panel { background: rgba(255,255,255,.92) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; box-shadow: 0 10px 26px rgba(16,32,51,.06) !important; } html[data-theme="mixer"] .oc-settings-avatar-row, html[data-theme="mixer"] .oc-dir-search, html[data-theme="mixer"] .oc-dir-chip, html[data-theme="mixer"] .oc-dir-more-filter, html[data-theme="mixer"] .oc-agent-report-search, html[data-theme="mixer"] .oc-agent-report-select { background: var(--oc-bg3) !important; color: var(--oc-txt2) !important; border-color: var(--oc-line) !important; } /* Texto general de módulos */ html[data-theme="dark"] .oc-settings-page *, html[data-theme="dark"] .oc-dir-page *, html[data-theme="dark"] .oc-agent-report-page * { text-shadow: none !important; } /* ============================================================ THEME PATCH V4 — Footer, Contactos, Follow-up, Reportes, Settings Este bloque debe quedar al final del archivo. ============================================================ */ /* Variables extendidas por tema */ :root, html[data-theme="light"] { --oc-card: #ffffff; --oc-card2: #f8fbff; --oc-input-bg: #ffffff; --oc-hover: #f1f5f9; --oc-footer-bg: #ffffff; --oc-footer-txt: #334155; --oc-footer-muted: #7a8aaa; --oc-rail: #ffffff; --oc-rail-line: #e2e7f0; --oc-rail-icon: #64748b; --oc-rail-icon-hover: #2563eb; --oc-rail-active-bg: #2563eb; --oc-rail-active-txt: #ffffff; --oc-page-gradient: linear-gradient(180deg, #f8fbff 0%, #f5f7fb 100%); } html[data-theme="dark"] { --oc-card: #111827; --oc-card2: #0f172a; --oc-input-bg: #0f172a; --oc-hover: #182235; --oc-footer-bg: linear-gradient(180deg, #101b27 0%, #0b1420 100%); --oc-footer-txt: #e5edf8; --oc-footer-muted: #94a3b8; --oc-rail: #020617; --oc-rail-line: #182235; --oc-rail-icon: #8aa0bd; --oc-rail-icon-hover: #93c5fd; --oc-rail-active-bg: #2563eb; --oc-rail-active-txt: #ffffff; --oc-page-gradient: linear-gradient(180deg, #0b1220 0%, #0f172a 100%); } html[data-theme="mixer"] { --oc-card: #ffffff; --oc-card2: #f8fbff; --oc-input-bg: #ffffff; --oc-hover: #eaf2ff; --oc-footer-bg: linear-gradient(180deg, #101b27 0%, #0b1420 100%); --oc-footer-txt: #eaf2ff; --oc-footer-muted: #9fb4d1; --oc-rail: #101b27; --oc-rail-line: rgba(255,255,255,.08); --oc-rail-icon: rgba(255,255,255,.48); --oc-rail-icon-hover: #93c5fd; --oc-rail-active-bg: #2563eb; --oc-rail-active-txt: #ffffff; --oc-page-gradient: linear-gradient(180deg, #eef4ff 0%, #f8fbff 100%); } /* Base */ html[data-theme] body, html[data-theme] .oc-shell, html[data-theme] .oc-history, html[data-theme] .oc-chat-panel, html[data-theme] .oc-calendar-page, html[data-theme] .fu-page, html[data-theme] .oc-settings-page, html[data-theme] .oc-agent-report-page, html[data-theme] .oc-dir-page { background: var(--oc-bg) !important; color: var(--oc-txt) !important; } /* Rail lateral */ html[data-theme] .oc-rail { background: var(--oc-rail) !important; border-right: 1px solid var(--oc-rail-line) !important; } html[data-theme] .oc-ri { color: var(--oc-rail-icon) !important; } html[data-theme] .oc-ri:hover { background: var(--oc-blue3) !important; color: var(--oc-rail-icon-hover) !important; } html[data-theme] .oc-ri.active, html[data-theme] .oc-ri--active { background: var(--oc-rail-active-bg) !important; color: var(--oc-rail-active-txt) !important; } html[data-theme] .oc-ri.active i, html[data-theme] .oc-ri--active i { color: var(--oc-rail-active-txt) !important; } html[data-theme="light"] .oc-global-chat-badge { border-color: #ffffff !important; } html[data-theme="dark"] .oc-global-chat-badge, html[data-theme="mixer"] .oc-global-chat-badge { border-color: #020617 !important; } /* Footer inferior */ html[data-theme] .oc-footer { background: var(--oc-footer-bg) !important; border-top: 1px solid var(--oc-line) !important; color: var(--oc-footer-txt) !important; } html[data-theme="light"] .oc-footer { box-shadow: 0 -3px 12px rgba(15,23,42,.06) !important; } html[data-theme] .oc-footer .oc-agent-name, html[data-theme] .oc-footer .oc-stat strong, html[data-theme] .oc-footer .oc-agent-pill, html[data-theme] .oc-footer .oc-footer-zone, html[data-theme] .oc-footer .oc-footer-zone *:not(.oc-ws-pill):not(.oc-ws-pill *) { color: var(--oc-footer-txt) !important; } html[data-theme] .oc-footer .oc-agent-label, html[data-theme] .oc-footer .oc-stat, html[data-theme] .oc-footer .oc-stat span, html[data-theme] .oc-footer .oc-stat small, html[data-theme] .oc-footer .oc-stat-total { color: var(--oc-footer-muted) !important; } html[data-theme="light"] .oc-footer .oc-agent-pill, html[data-theme="light"] .oc-footer .oc-stat, html[data-theme="light"] .oc-footer .oc-footer-brand { background: #f8fafc !important; border-color: var(--oc-line) !important; } html[data-theme="light"] .oc-footer-brand strong { color: var(--oc-blue) !important; } html[data-theme="light"] .oc-footer-brand small { color: var(--oc-txt3) !important; } html[data-theme="light"] .oc-ws-pill--ok { background: rgba(34,197,94,.10) !important; color: #16a34a !important; border-color: #22c55e !important; } html[data-theme="light"] .oc-ws-pill--error { background: rgba(239,68,68,.10) !important; color: #dc2626 !important; border-color: #ef4444 !important; } /* Elementos comunes */ html[data-theme] .oc-side, html[data-theme] .oc-side-top, html[data-theme] .oc-ch, html[data-theme] .oc-tags, html[data-theme] .oc-foot, html[data-theme] .chat-history-footer, html[data-theme] .oc-card, html[data-theme] .oc-modal-content, html[data-theme] .oc-modal-header, html[data-theme] .oc-offcanvas-header, html[data-theme] .oc-offcanvas-body, html[data-theme] .offcanvas, html[data-theme] .modal-content { background: var(--oc-card) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-srch, html[data-theme] .oc-minp, html[data-theme] .message-input, html[data-theme] #sendtext, html[data-theme] .oc-input, html[data-theme] .oc-select, html[data-theme] .oc-textarea, html[data-theme] .form-control, html[data-theme] .form-select { background: var(--oc-input-bg) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-bub--in, html[data-theme] .oc-tbub, html[data-theme] .oc-system-msg { background: var(--oc-card) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-hb, html[data-theme] .oc-fi, html[data-theme] .oc-compose, html[data-theme] .oc-btn--secondary, html[data-theme] .oc-file-action, html[data-theme] .oc-event-action-btn { background: var(--oc-card) !important; color: var(--oc-txt2) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-hb:hover, html[data-theme] .oc-fi:hover, html[data-theme] .oc-btn--secondary:hover, html[data-theme] .oc-file-action:hover, html[data-theme] .oc-event-action-btn:hover { background: var(--oc-hover) !important; color: var(--oc-blue) !important; } /* CONTACTOS */ html[data-theme] .oc-dir-page, html[data-theme] .oc-dir-main, html[data-theme] .oc-dir-detail { background: var(--oc-bg) !important; color: var(--oc-txt) !important; } html[data-theme] .oc-dir-header { background: var(--oc-card) !important; border: 1px solid var(--oc-line) !important; border-radius: 18px !important; padding: 18px 20px !important; box-shadow: 0 10px 26px rgba(15,23,42,.035) !important; } html[data-theme="dark"] .oc-dir-header, html[data-theme="dark"] .oc-dir-card, html[data-theme="dark"] .oc-dir-search, html[data-theme="dark"] .oc-dir-chip, html[data-theme="dark"] .oc-dir-more-filter, html[data-theme="dark"] .oc-dir-order-select, html[data-theme="dark"] .oc-dir-view-btn, html[data-theme="dark"] .oc-dir-card-detail-btn, html[data-theme="dark"] .oc-dir-card-action, html[data-theme="dark"] .oc-dir-detail-tabs button, html[data-theme="dark"] .oc-dir-view-all-channels { background: #111827 !important; color: var(--oc-txt) !important; border-color: #263244 !important; } html[data-theme="light"] .oc-dir-header, html[data-theme="light"] .oc-dir-card, html[data-theme="light"] .oc-dir-search, html[data-theme="light"] .oc-dir-chip, html[data-theme="light"] .oc-dir-more-filter, html[data-theme="light"] .oc-dir-order-select, html[data-theme="light"] .oc-dir-view-btn, html[data-theme="light"] .oc-dir-card-detail-btn, html[data-theme="light"] .oc-dir-card-action, html[data-theme="light"] .oc-dir-detail-tabs button, html[data-theme="light"] .oc-dir-view-all-channels { background: #ffffff !important; color: var(--oc-txt2) !important; border-color: var(--oc-line) !important; } html[data-theme="mixer"] .oc-dir-header, html[data-theme="mixer"] .oc-dir-card, html[data-theme="mixer"] .oc-dir-search, html[data-theme="mixer"] .oc-dir-chip, html[data-theme="mixer"] .oc-dir-more-filter, html[data-theme="mixer"] .oc-dir-order-select, html[data-theme="mixer"] .oc-dir-view-btn, html[data-theme="mixer"] .oc-dir-card-detail-btn, html[data-theme="mixer"] .oc-dir-card-action, html[data-theme="mixer"] .oc-dir-detail-tabs button, html[data-theme="mixer"] .oc-dir-view-all-channels { background: #ffffff !important; color: var(--oc-txt2) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-dir-chip.active, html[data-theme] .oc-dir-view-btn.active { background: var(--oc-blue3) !important; color: var(--oc-blue) !important; border-color: var(--oc-blue2) !important; } html[data-theme] .oc-dir-card:hover, html[data-theme] .oc-dir-card.active { border-color: var(--oc-blue2) !important; box-shadow: 0 14px 32px rgba(15,25,35,.10) !important; } html[data-theme] .oc-dir-card-name strong, html[data-theme] .oc-dir-card-meta strong, html[data-theme] .oc-dir-detail-info h5, html[data-theme] .oc-dir-detail-title, html[data-theme] .oc-dir-header h4 { color: var(--oc-txt) !important; } html[data-theme] .oc-dir-card-name span, html[data-theme] .oc-dir-card-contact, html[data-theme] .oc-dir-info-list strong, html[data-theme] .oc-dir-channel-list strong, html[data-theme] .oc-dir-header p, html[data-theme] .oc-dir-detail-info > span:not(.oc-dir-status) { color: var(--oc-txt2) !important; } html[data-theme] .oc-dir-card-meta span, html[data-theme] .oc-dir-list-head > span, html[data-theme] .oc-dir-search i, html[data-theme] .oc-dir-search input::placeholder { color: var(--oc-txt3) !important; } html[data-theme] .oc-dir-card-divider, html[data-theme] .oc-dir-detail-head, html[data-theme] .oc-dir-detail-tabs, html[data-theme] .oc-dir-detail-section { border-color: var(--oc-line) !important; } html[data-theme] .oc-dir-channel-badge { border-color: var(--oc-card) !important; } html[data-theme] .oc-dir-last-chat, html[data-theme] .oc-dir-mini-tag, html[data-theme] .oc-cm-tab-pane, html[data-theme] .oc-cm-info-row, html[data-theme] .oc-cm-channel-item, html[data-theme] .oc-cm-followup-item, html[data-theme] .oc-cm-empty { background: var(--oc-card2) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme="dark"] #cmChatsList { background: #0b1220 !important; } html[data-theme="light"] #cmChatsList, html[data-theme="mixer"] #cmChatsList { background: #f8fafc !important; } /* REPORTES */ html[data-theme] .oc-agent-report-page { background: var(--oc-page-gradient) !important; color: var(--oc-txt) !important; } html[data-theme] .oc-agent-report-hero, html[data-theme] .oc-agent-report-kpi, html[data-theme] .oc-agent-report-tabs, html[data-theme] .oc-agent-report-card, html[data-theme] .oc-agent-report-insight, html[data-theme] .oc-agent-report-select, html[data-theme] .oc-agent-report-btn, html[data-theme] .oc-agent-report-search, html[data-theme] .oc-agent-report-conv-row, html[data-theme] .oc-agent-report-advice, html[data-theme] .oc-agent-report-summary-list div { background: var(--oc-card) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-agent-report-hero h4, html[data-theme] .oc-agent-report-kpi-body strong, html[data-theme] .oc-agent-report-card-head strong, html[data-theme] .oc-agent-report-insight strong, html[data-theme] .oc-agent-report-summary-list strong, html[data-theme] .oc-agent-report-advice strong, html[data-theme] .oc-agent-report-conv-client strong, html[data-theme] .oc-agent-report-conv-message strong { color: var(--oc-txt) !important; } html[data-theme] .oc-agent-report-hero p, html[data-theme] .oc-agent-report-kpi-body span, html[data-theme] .oc-agent-report-kpi-body small, html[data-theme] .oc-agent-report-card-head span, html[data-theme] .oc-agent-report-insight small, html[data-theme] .oc-agent-report-summary-list span, html[data-theme] .oc-agent-report-advice p, html[data-theme] .oc-agent-report-tab, html[data-theme] .oc-agent-report-search input, html[data-theme] .oc-agent-report-conv-client span, html[data-theme] .oc-agent-report-conv-message span, html[data-theme] .oc-agent-report-conv-meta small { color: var(--oc-txt3) !important; } html[data-theme] .oc-agent-report-tab.active { color: #fff !important; background: var(--oc-blue) !important; } html[data-theme] .oc-agent-report-tab:hover { background: var(--oc-hover) !important; color: var(--oc-txt) !important; } html[data-theme] .oc-agent-report-chart, html[data-theme] .oc-agent-report-chart--activity, html[data-theme] .oc-agent-report-chart--donut { background: var(--oc-card) !important; border-color: var(--oc-line) !important; } /* SETTINGS */ html[data-theme] .oc-settings-page, html[data-theme] .oc-settings-body { background: var(--oc-bg) !important; color: var(--oc-txt) !important; } html[data-theme] .oc-settings-header, html[data-theme] .oc-settings-card, html[data-theme] .oc-settings-avatar-row, html[data-theme] .oc-settings-security-card, html[data-theme] .oc-settings-avatar-upload-box, html[data-theme] .oc-settings-password-box, html[data-theme] .oc-settings-theme-card, html[data-theme] .oc-settings-theme-preview, html[data-theme] .oc-settings-sound-section, html[data-theme] .oc-settings-toggle-row { background: var(--oc-card) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-settings-header h4, html[data-theme] .oc-settings-card-title, html[data-theme] .oc-settings-avatar-name, html[data-theme] .oc-settings-avatar-upload-info h6, html[data-theme] .oc-settings-password-title, html[data-theme] .oc-settings-toggle-label, html[data-theme] .oc-settings-field label, html[data-theme] .oc-settings-theme-label span { color: var(--oc-txt) !important; } html[data-theme] .oc-settings-header p, html[data-theme] .oc-settings-avatar-role, html[data-theme] .oc-settings-avatar-upload-info p, html[data-theme] .oc-settings-toggle-desc, html[data-theme] .oc-settings-field-hint, html[data-theme] .oc-settings-sound-label, html[data-theme] .oc-settings-card .form-control::placeholder, html[data-theme] .oc-settings-card .form-select { color: var(--oc-txt3) !important; } html[data-theme] .oc-settings-card .form-control, html[data-theme] .oc-settings-card .form-select { background: var(--oc-input-bg) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-settings-card .form-control:disabled { background: var(--oc-bg3) !important; color: var(--oc-txt3) !important; } html[data-theme] .oc-settings-theme-card.active { border-color: var(--oc-blue) !important; box-shadow: 0 0 0 2px var(--oc-blue3) !important; } /* CALENDAR / FULLCALENDAR hardcoded backgrounds */ html[data-theme] .oc-calendar-sidebar, html[data-theme] .oc-calendar-main, html[data-theme] .oc-calendar-top, html[data-theme] .oc-calendar-box, html[data-theme] #calendar, html[data-theme] .oc-calendar-box .fc, html[data-theme] .oc-calendar-box .fc .fc-col-header-cell, html[data-theme] .oc-calendar-box .fc .fc-daygrid-day, html[data-theme] .oc-cal-card, html[data-theme] .oc-event-modal-head, html[data-theme] .oc-event-modal-foot, html[data-theme] .oc-event-info-item, html[data-theme] .oc-event-contact, html[data-theme] .oc-event-note, html[data-theme] .oc-assign-switch, html[data-theme] .oc-event-tag { background: var(--oc-card) !important; color: var(--oc-txt) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-calendar-box .fc .fc-button, html[data-theme] .oc-calendar-summary div, html[data-theme] .oc-cal-next-empty { background: var(--oc-card2) !important; color: var(--oc-txt2) !important; border-color: var(--oc-line) !important; } html[data-theme] .oc-event-modal-body, html[data-theme] .oc-event-detail-panel { background: var(--oc-bg) !important; } html[data-theme] .oc-calendar-top h4, html[data-theme] .oc-calendar-summary strong, html[data-theme] .oc-event-modal-title-wrap h5, html[data-theme] .oc-event-info-item strong, html[data-theme] .oc-event-contact-body strong { color: var(--oc-txt) !important; } html[data-theme] .oc-calendar-top span, html[data-theme] .oc-calendar-summary span, html[data-theme] .oc-cal-card-title, html[data-theme] .oc-event-modal-kicker, html[data-theme] .oc-event-info-item span, html[data-theme] .oc-event-section-title, html[data-theme] .oc-event-contact-body span { color: var(--oc-txt3) !important; } /* Forzar textos que quedaron muy claros en dark */ html[data-theme="dark"] .text-muted, html[data-theme="dark"] small, html[data-theme="dark"] .small { color: var(--oc-txt3) !important; } html[data-theme="dark"] a:not(.btn):not(.oc-btn):not(.oc-dir-primary-btn):not(.fu-btn-primary) { color: #93c5fd; } .oc-login-shell { position: relative; } .oc-admin-language-select-wrap { position: absolute; top: 1.25rem; right: 1.25rem; z-index: 50; } .oc-admin-language-select { min-width: 150px; height: 42px; padding: 0 2.2rem 0 0.85rem; border: 1px solid rgba(125, 145, 170, 0.24); border-radius: 12px; background-color: rgba(255, 255, 255, 0.96); color: #53657a; font-size: 0.8rem; font-weight: 600; cursor: pointer; box-shadow: 0 6px 18px rgba(34, 54, 83, 0.08); outline: none; } .oc-admin-language-select:focus { border-color: rgba(11, 124, 255, 0.45); box-shadow: 0 0 0 0.2rem rgba(11, 124, 255, 0.10); } @media (max-width: 575.98px) { .oc-admin-language-select-wrap { top: 0.85rem; right: 0.85rem; } .oc-admin-language-select { min-width: 118px; height: 38px; font-size: 0.75rem; } } .oc-channel-icon { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; font-size: 18px; line-height: 1; background: transparent !important; border: 0 !important; box-shadow: none !important; width: auto; height: auto; } .oc-channel-icon i { font-size: 18px; line-height: 1; } /* SVG de Messenger */ .oc-channel-icon-svg { width: 18px; height: 18px; display: block; } /* Colores por canal */ .oc-channel-icon--messenger { color: #0084ff; } .oc-channel-icon--messenger { width: 21px; height: 19px; margin-left: 4px; overflow: visible; flex: 0 0 24px; } .oc-channel-icon--messenger .oc-channel-icon-svg { width: 18px; height: 18px; display: block; transform: scale(1.45) translateY(-1px); transform-origin: center; } .oc-channel-icon--instagram { color: #e1306c; } .oc-channel-icon--whatsapp, .oc-channel-icon--gupshup { color: #25d366; } .oc-channel-icon--facebook { color: #1877f2; } .oc-channel-icon--webchat { color: #7c3aed; } .oc-channel-icon--sms, .oc-channel-icon--default { color: #64748b; } .oc-ci-prev .oc-channel-icon--messenger { width: 11px; height: 11px; margin-left: 0; margin-right: 1px; flex: 0 0 16px; overflow: visible; } .oc-ci-prev .oc-channel-icon--messenger .oc-channel-icon-svg { width: 13px; height: 13px; transform: scale(1.2); transform-origin: center; } /* ========================================================================== FOLLOW-UP CENTER — REDISEÑO PROFESIONAL COMPACTO Hoja única. Reutiliza las variables globales --oc-*. ========================================================================== */ .oc-fu-page, .oc-fu-page * { box-sizing: border-box; } .oc-fu-page { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; color: var(--oc-txt); background: var(--oc-bg); font-family: var(--oc-font); } /* Header */ .oc-fu-page-header { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 20px 12px; } .oc-fu-page-title { margin: 0; color: var(--oc-txt); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; } .oc-fu-page-subtitle { margin: 5px 0 0; color: var(--oc-txt3); font-size: 12px; } .oc-fu-page-actions, .oc-fu-card-meta, .oc-fu-card-foot, .oc-fu-detail-contact-line, .oc-fu-detail-head-actions { display: flex; align-items: center; } .oc-fu-page-actions { gap: 9px; } .oc-fu-page .oc-btn { min-height: 36px; padding: 8px 14px; border-radius: 9px; white-space: nowrap; } .oc-fu-page .oc-btn--secondary { color: var(--oc-txt2); background: var(--oc-bg2); border: 1px solid var(--oc-line); } /* KPI */ .oc-fu-stat-grid { flex: 0 0 auto; display: grid; grid-template-columns: repeat(6, minmax(166px, 1fr)); gap: 9px; padding: 0 20px 11px; overflow-x: auto; scrollbar-width: thin; } .oc-fu-stat-card { min-width: 166px; min-height: 76px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--oc-line); border-radius: 12px; background: var(--oc-bg2); text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .oc-fu-stat-card:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(15, 25, 35, .06); } .oc-fu-stat-card.active { border-color: var(--oc-blue); box-shadow: 0 0 0 2px rgba(37, 99, 235, .08); } .oc-fu-stat-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; font-size: 17px; } .oc-fu-stat-copy { min-width: 0; display: flex; flex-direction: column; } .oc-fu-stat-copy small, .oc-fu-stat-copy span { color: var(--oc-txt3); font-size: 9.5px; } .oc-fu-stat-copy strong { margin: 2px 0; color: var(--oc-txt); font-size: 19px; line-height: 1; } .oc-fu-stat-card--blue { border-color: rgba(37, 99, 235, .20); } .oc-fu-stat-card--blue .oc-fu-stat-icon { color: var(--oc-blue); background: var(--oc-blue3); } .oc-fu-stat-card--amber { border-color: rgba(217, 119, 6, .28); } .oc-fu-stat-card--amber .oc-fu-stat-icon { color: var(--oc-amb); background: var(--oc-amb2); } .oc-fu-stat-card--red { border-color: rgba(220, 38, 38, .22); } .oc-fu-stat-card--red .oc-fu-stat-icon { color: var(--oc-red); background: var(--oc-red2); } .oc-fu-stat-card--purple { border-color: rgba(124, 58, 237, .20); } .oc-fu-stat-card--purple .oc-fu-stat-icon { color: var(--oc-pur); background: var(--oc-pur2); } .oc-fu-stat-card--green { border-color: rgba(22, 163, 74, .22); } .oc-fu-stat-card--green .oc-fu-stat-icon { color: var(--oc-grn); background: var(--oc-grn2); } /* Tabs */ .oc-fu-tabs { flex: 0 0 40px; margin: 0 20px; padding: 0 2px; display: flex; align-items: center; gap: 22px; border-block: 1px solid var(--oc-line); overflow-x: auto; scrollbar-width: none; } .oc-fu-tabs::-webkit-scrollbar { display: none; } .oc-fu-tab { align-self: stretch; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; border-bottom: 2px solid transparent; color: var(--oc-txt3); background: transparent; font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: pointer; } .oc-fu-tab > span { min-width: 20px; height: 19px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: var(--oc-txt3); background: var(--oc-bg3); font-size: 9.5px; } .oc-fu-tab.active { color: var(--oc-blue); border-bottom-color: var(--oc-blue); } .oc-fu-tab.active > span { color: #fff; background: var(--oc-blue); } /* Toolbar */ .oc-fu-toolbar { flex: 0 0 auto; display: grid; grid-template-columns: minmax(260px, 1fr) auto 150px 190px; gap: 9px; padding: 10px 20px; } .oc-fu-search { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); } .oc-fu-search:focus-within { border-color: var(--oc-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .07); } .oc-fu-search i { color: var(--oc-txt3); } .oc-fu-search input { width: 100%; border: 0; outline: 0; color: var(--oc-txt); background: transparent; font-size: 11.5px; } .oc-fu-filter-btn, .oc-fu-select { height: 34px; border: 1px solid var(--oc-line); border-radius: 9px; color: var(--oc-txt2); background: var(--oc-bg2); font-size: 11.5px; } .oc-fu-filter-btn { padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; } .oc-fu-select { width: 100%; padding: 0 10px; } /* Workspace */ .oc-fu-workspace { flex: 1 1 auto; min-height: 0; margin: 0 20px 12px; display: grid; grid-template-columns: minmax(430px, 39%) minmax(0, 61%); overflow: hidden; border: 1px solid var(--oc-line); border-radius: 13px; background: var(--oc-bg2); } .oc-fu-list-panel, .oc-fu-detail-panel, .oc-fu-server-panel, .oc-fu-detail { min-height: 0; overflow: hidden; } .oc-fu-list-panel { display: flex; flex-direction: column; border-right: 1px solid var(--oc-line); } .oc-fu-server-panel { display: none; height: 100%; flex-direction: column; } .oc-fu-server-panel.is-active { display: flex; } .oc-fu-list-header, .oc-fu-pagination { flex: 0 0 38px; min-height: 38px; padding: 0 12px; display: flex; align-items: center; background: var(--oc-bg2); } .oc-fu-list-header { justify-content: space-between; border-bottom: 1px solid var(--oc-line); } .oc-fu-list-header strong { font-size: 11px; } .oc-fu-list-header span, .oc-fu-pagination { color: var(--oc-txt3); font-size: 9.5px; } .oc-fu-pagination { border-top: 1px solid var(--oc-line); } .oc-fu-list, .oc-fu-detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--oc-line2) transparent; } .oc-fu-list::-webkit-scrollbar, .oc-fu-detail-scroll::-webkit-scrollbar { width: 6px; } .oc-fu-list::-webkit-scrollbar-thumb, .oc-fu-detail-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--oc-line2); } /* Lista compacta profesional */ .oc-fu-followup-card { width: 100%; min-height: 82px; padding: 9px 12px 9px 13px; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); cursor: pointer; transition: background .15s ease, box-shadow .15s ease; } .oc-fu-followup-card:hover { background: var(--oc-bg3); } .oc-fu-followup-card.active { background: var(--oc-blue3); box-shadow: inset 3px 0 0 var(--oc-blue); } .oc-fu-avatar, .oc-fu-detail-avatar { display: grid; place-items: center; border-radius: 50%; color: var(--oc-blue); background: var(--oc-blue2); font-weight: 800; } .oc-fu-avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 10.5px; } .oc-fu-card-main, .oc-fu-card-identity { min-width: 0; } .oc-fu-card-main { flex: 1; } .oc-fu-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .oc-fu-card-head strong { display: block; color: var(--oc-txt); font-size: 12px; font-weight: 800; line-height: 1.2; } .oc-fu-card-head time { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--oc-blue); font-size: 9.5px; font-weight: 700; white-space: nowrap; } .oc-fu-card-meta { gap: 6px; margin-top: 4px; } .oc-fu-card-bottom { min-width: 0; margin-top: 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; } .oc-fu-card-reason { min-width: 0; margin: 0; color: var(--oc-txt3); font-size: 9.8px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-fu-card-foot { justify-content: flex-end; gap: 5px; margin: 0; } .oc-fu-channel { display: inline-flex; align-items: center; gap: 4px; color: var(--oc-txt3); font-size: 9.5px; } /* Badges */ .oc-fu-type, .oc-fu-priority, .oc-fu-status { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font-size: 8.8px; font-weight: 800; line-height: 1; white-space: nowrap; } .oc-fu-type--task { color: var(--oc-blue); background: var(--oc-blue3); } .oc-fu-type--appointment { color: var(--oc-pur); background: var(--oc-pur2); } .oc-fu-type--call { color: var(--oc-amb); background: var(--oc-amb2); } .oc-fu-type--automatic { color: #0f766e; background: #ccfbf1; } .oc-fu-priority--urgent, .oc-fu-priority--high, .oc-fu-status--cancelled, .oc-fu-status--overdue { color: var(--oc-red); background: var(--oc-red2); } .oc-fu-priority--medium, .oc-fu-status--waiting { color: var(--oc-amb); background: var(--oc-amb2); } .oc-fu-priority--normal, .oc-fu-status--scheduled, .oc-fu-status--pending { color: var(--oc-blue); background: var(--oc-blue3); } .oc-fu-priority--low { color: var(--oc-txt3); background: var(--oc-bg3); } .oc-fu-status--progress { color: #0369a1; background: #e0f2fe; } .oc-fu-status--completed { color: var(--oc-grn); background: var(--oc-grn2); } /* Panel derecho */ .oc-fu-detail-panel { background: var(--oc-bg); } .oc-fu-detail, .oc-fu-detail-empty { width: 100%; height: 100%; } .oc-fu-detail { display: flex; flex-direction: column; } .oc-fu-detail-empty { padding: 28px; display: grid; place-content: center; justify-items: center; text-align: center; } .oc-fu-detail-empty > span { width: 54px; height: 54px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 16px; color: var(--oc-blue); background: var(--oc-blue3); font-size: 21px; } .oc-fu-detail-empty strong { font-size: 14px; } .oc-fu-detail-empty p { max-width: 390px; margin: 6px 0 0; color: var(--oc-txt3); font-size: 12px; } .oc-fu-detail-header { flex: 0 0 68px; min-height: 68px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); } .oc-fu-detail-profile { min-width: 0; display: flex; align-items: center; gap: 11px; } .oc-fu-detail-avatar { width: 42px; height: 42px; flex: 0 0 42px; font-size: 12px; } .oc-fu-detail-profile-copy h4 { margin: 0; font-size: 16px; font-weight: 800; } .oc-fu-detail-contact-line { gap: 6px; margin-top: 4px; color: var(--oc-txt3); font-size: 10px; } .oc-fu-detail-separator { color: var(--oc-line2); } .oc-fu-detail-head-actions { justify-content: flex-end; flex-wrap: wrap; gap: 6px; } .oc-fu-detail-menu-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--oc-line); border-radius: 8px; color: var(--oc-txt2); background: var(--oc-bg2); cursor: pointer; } .oc-fu-detail-scroll { padding: 10px; } .oc-fu-info-card { margin-bottom: 9px; padding: 11px; border: 1px solid var(--oc-line); border-radius: 11px; background: var(--oc-bg2); } .oc-fu-summary-card { padding: 10px 11px 11px; } .oc-fu-info-card-head { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 12px; } .oc-fu-info-card-head small { display: block; color: var(--oc-blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } .oc-fu-info-card-head strong { display: block; margin-top: 2px; color: var(--oc-txt3); font-size: 9.5px; font-weight: 600; } .oc-fu-info-card-head > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--oc-blue); background: var(--oc-blue3); } .oc-fu-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .oc-fu-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oc-fu-info-item { min-width: 0; padding: 8px 9px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg3); } .oc-fu-info-item--wide { grid-column: 1 / -1; } .oc-fu-info-item--double { grid-column: span 2; } .oc-fu-info-item span, .oc-fu-info-list span { color: var(--oc-txt3); font-size: 9px; font-weight: 700; } .oc-fu-info-item strong { display: block; margin-top: 3px; color: var(--oc-txt); font-size: 10.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } .oc-fu-detail-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .oc-fu-info-list > div { min-height: 28px; padding: 6px 0; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--oc-line); } .oc-fu-info-list > div:last-child { border-bottom: 0; } .oc-fu-info-list strong { color: var(--oc-txt2); font-size: 9.8px; text-align: right; overflow-wrap: anywhere; } .oc-fu-info-list-message { flex-direction: column; } .oc-fu-info-list-message strong { width: 100%; text-align: left; } /* Tabs e historial */ .oc-fu-detail-tabs { min-height: 38px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--oc-line); overflow-x: auto; scrollbar-width: none; } .oc-fu-detail-tabs::-webkit-scrollbar { display: none; } .oc-fu-detail-tabs button { align-self: stretch; padding: 0 3px; border: 0; border-bottom: 2px solid transparent; color: var(--oc-txt3); background: transparent; font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; } .oc-fu-detail-tabs button.active { color: var(--oc-blue); border-bottom-color: var(--oc-blue); } .oc-fu-detail-tab-panel { padding: 10px 2px 2px; } .oc-fu-timeline { display: flex; flex-direction: column; } .oc-fu-timeline-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding-bottom: 11px; } .oc-fu-timeline-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--oc-blue); background: var(--oc-blue3); z-index: 1; } .oc-fu-timeline-item:not(:last-child)::before { content: ""; position: absolute; top: 25px; bottom: 0; left: 13px; width: 1px; background: var(--oc-line); } .oc-fu-timeline-item strong { display: block; font-size: 10.5px; } .oc-fu-timeline-item p { margin: 3px 0 0; color: var(--oc-txt3); font-size: 9.8px; } .oc-fu-timeline-item small { display: block; margin-top: 3px; color: var(--oc-txt4); font-size: 9px; } .oc-fu-timeline-empty, .oc-fu-panel-empty { min-height: 120px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--oc-txt3); text-align: center; } .oc-fu-timeline-empty { border: 1px dashed var(--oc-line2); border-radius: 11px; background: var(--oc-bg3); } .oc-fu-empty-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--oc-blue); background: var(--oc-blue3); font-size: 19px; } /* Footer */ .oc-fu-detail-footer { flex: 0 0 auto; min-height: 52px; padding: 8px 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--oc-line); background: var(--oc-bg2); } .oc-fu-action { min-height: 32px; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid transparent; border-radius: 8px; font-size: 9.5px; font-weight: 800; white-space: nowrap; cursor: pointer; } .oc-fu-action--success { color: var(--oc-grn); border-color: var(--oc-grn2); background: var(--oc-grn3); } .oc-fu-action--warning { color: var(--oc-amb); border-color: var(--oc-amb2); background: var(--oc-amb3); } .oc-fu-action--primary { color: var(--oc-blue); border-color: var(--oc-blue2); background: var(--oc-blue3); } .oc-fu-action--danger { color: var(--oc-red); border-color: var(--oc-red2); background: var(--oc-red3); } /* Offcanvas */ #addFollowupSidebar { width: min(460px, 100vw); } #fuContactSearchResults { position: relative; z-index: 20; max-height: 260px; margin-top: 6px; overflow-y: auto; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); box-shadow: 0 12px 28px rgba(15, 25, 35, .10); } /* Helpers */ .oc-fu-followup-card.d-none, .oc-fu-panel-empty.d-none, #fuContactSearchResults.d-none { display: none !important; } .oc-fu-link { padding: 0; border: 0; color: var(--oc-blue); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; } /* Responsive */ @media (max-width: 1250px) { .oc-fu-stat-grid { grid-template-columns: repeat(6, 176px); } .oc-fu-workspace { grid-template-columns: minmax(390px, 41%) minmax(0, 59%); } .oc-fu-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oc-fu-info-item--double { grid-column: span 1; } } @media (max-width: 980px) { .oc-fu-toolbar { grid-template-columns: minmax(240px, 1fr) auto 150px; } .oc-fu-toolbar .oc-fu-select:last-child { grid-column: 1 / -1; } .oc-fu-detail-two-columns { grid-template-columns: 1fr; } } @media (max-width: 860px) { .oc-fu-page { overflow-y: auto; } .oc-fu-page-header { flex-direction: column; } .oc-fu-workspace { min-height: 760px; grid-template-columns: 1fr; overflow: visible; } .oc-fu-list-panel { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--oc-line); } .oc-fu-detail-panel { min-height: 580px; } } @media (max-width: 560px) { .oc-fu-page-header, .oc-fu-stat-grid, .oc-fu-toolbar { padding-inline: 12px; } .oc-fu-tabs, .oc-fu-workspace { margin-inline: 12px; } .oc-fu-toolbar { grid-template-columns: 1fr; } .oc-fu-detail-header { align-items: flex-start; flex-direction: column; } .oc-fu-detail-head-actions { width: 100%; justify-content: flex-start; } .oc-fu-summary-grid, .oc-fu-info-grid { grid-template-columns: 1fr; } .oc-fu-info-item--double, .oc-fu-info-item--wide { grid-column: auto; } .oc-fu-action { flex: 1 1 calc(50% - 6px); } } /* ========================================================================== FOLLOW-UP CENTER — REDISEÑO PROFESIONAL COMPACTO Hoja única. Reutiliza las variables globales --oc-*. ========================================================================== */ .oc-fu-page, .oc-fu-page * { box-sizing: border-box; } .oc-fu-page { width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; color: var(--oc-txt); background: var(--oc-bg); font-family: var(--oc-font); } /* Header */ .oc-fu-page-header { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 16px 20px 12px; } .oc-fu-page-title { margin: 0; color: var(--oc-txt); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -.02em; } .oc-fu-page-subtitle { margin: 5px 0 0; color: var(--oc-txt3); font-size: 12px; } .oc-fu-page-actions, .oc-fu-card-meta, .oc-fu-card-foot, .oc-fu-detail-contact-line, .oc-fu-detail-head-actions { display: flex; align-items: center; } .oc-fu-page-actions { gap: 9px; } .oc-fu-page .oc-btn { min-height: 36px; padding: 8px 14px; border-radius: 9px; white-space: nowrap; } .oc-fu-page .oc-btn--secondary { color: var(--oc-txt2); background: var(--oc-bg2); border: 1px solid var(--oc-line); } /* KPI */ .oc-fu-stat-grid { flex: 0 0 auto; display: grid; grid-template-columns: repeat(6, minmax(166px, 1fr)); gap: 9px; padding: 0 20px 11px; overflow-x: auto; scrollbar-width: thin; } .oc-fu-stat-card { min-width: 166px; min-height: 76px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--oc-line); border-radius: 12px; background: var(--oc-bg2); text-align: left; cursor: pointer; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .oc-fu-stat-card:hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(15, 25, 35, .06); } .oc-fu-stat-card.active { border-color: var(--oc-blue); box-shadow: 0 0 0 2px rgba(37, 99, 235, .08); } .oc-fu-stat-icon { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 11px; font-size: 17px; } .oc-fu-stat-copy { min-width: 0; display: flex; flex-direction: column; } .oc-fu-stat-copy small, .oc-fu-stat-copy span { color: var(--oc-txt3); font-size: 9.5px; } .oc-fu-stat-copy strong { margin: 2px 0; color: var(--oc-txt); font-size: 19px; line-height: 1; } .oc-fu-stat-card--blue { border-color: rgba(37, 99, 235, .20); } .oc-fu-stat-card--blue .oc-fu-stat-icon { color: var(--oc-blue); background: var(--oc-blue3); } .oc-fu-stat-card--amber { border-color: rgba(217, 119, 6, .28); } .oc-fu-stat-card--amber .oc-fu-stat-icon { color: var(--oc-amb); background: var(--oc-amb2); } .oc-fu-stat-card--red { border-color: rgba(220, 38, 38, .22); } .oc-fu-stat-card--red .oc-fu-stat-icon { color: var(--oc-red); background: var(--oc-red2); } .oc-fu-stat-card--purple { border-color: rgba(124, 58, 237, .20); } .oc-fu-stat-card--purple .oc-fu-stat-icon { color: var(--oc-pur); background: var(--oc-pur2); } .oc-fu-stat-card--green { border-color: rgba(22, 163, 74, .22); } .oc-fu-stat-card--green .oc-fu-stat-icon { color: var(--oc-grn); background: var(--oc-grn2); } /* Tabs */ .oc-fu-tabs { flex: 0 0 40px; margin: 0 20px; padding: 0 2px; display: flex; align-items: center; gap: 22px; border-block: 1px solid var(--oc-line); overflow-x: auto; scrollbar-width: none; } .oc-fu-tabs::-webkit-scrollbar { display: none; } .oc-fu-tab { align-self: stretch; display: inline-flex; align-items: center; gap: 7px; padding: 0; border: 0; border-bottom: 2px solid transparent; color: var(--oc-txt3); background: transparent; font-size: 11.5px; font-weight: 700; white-space: nowrap; cursor: pointer; } .oc-fu-tab > span { min-width: 20px; height: 19px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; color: var(--oc-txt3); background: var(--oc-bg3); font-size: 9.5px; } .oc-fu-tab.active { color: var(--oc-blue); border-bottom-color: var(--oc-blue); } .oc-fu-tab.active > span { color: #fff; background: var(--oc-blue); } /* Toolbar */ .oc-fu-toolbar { flex: 0 0 auto; display: grid; grid-template-columns: minmax(260px, 1fr) auto 150px 190px; gap: 9px; padding: 10px 20px; } .oc-fu-search { height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); } .oc-fu-search:focus-within { border-color: var(--oc-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .07); } .oc-fu-search i { color: var(--oc-txt3); } .oc-fu-search input { width: 100%; border: 0; outline: 0; color: var(--oc-txt); background: transparent; font-size: 11.5px; } .oc-fu-filter-btn, .oc-fu-select { height: 34px; border: 1px solid var(--oc-line); border-radius: 9px; color: var(--oc-txt2); background: var(--oc-bg2); font-size: 11.5px; } .oc-fu-filter-btn { padding: 0 13px; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; } .oc-fu-select { width: 100%; padding: 0 10px; } /* Workspace */ .oc-fu-workspace { flex: 1 1 auto; min-height: 0; margin: 0 20px 12px; display: grid; grid-template-columns: minmax(430px, 39%) minmax(0, 61%); overflow: hidden; border: 1px solid var(--oc-line); border-radius: 13px; background: var(--oc-bg2); } .oc-fu-list-panel, .oc-fu-detail-panel, .oc-fu-server-panel, .oc-fu-detail { min-height: 0; overflow: hidden; } .oc-fu-list-panel { display: flex; flex-direction: column; border-right: 1px solid var(--oc-line); } .oc-fu-server-panel { display: none; height: 100%; flex-direction: column; } .oc-fu-server-panel.is-active { display: flex; } .oc-fu-list-header, .oc-fu-pagination { flex: 0 0 38px; min-height: 38px; padding: 0 12px; display: flex; align-items: center; background: var(--oc-bg2); } .oc-fu-list-header { justify-content: space-between; border-bottom: 1px solid var(--oc-line); } .oc-fu-list-header strong { font-size: 11px; } .oc-fu-list-header span, .oc-fu-pagination { color: var(--oc-txt3); font-size: 9.5px; } .oc-fu-pagination { border-top: 1px solid var(--oc-line); } .oc-fu-list, .oc-fu-detail-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--oc-line2) transparent; } .oc-fu-list::-webkit-scrollbar, .oc-fu-detail-scroll::-webkit-scrollbar { width: 6px; } .oc-fu-list::-webkit-scrollbar-thumb, .oc-fu-detail-scroll::-webkit-scrollbar-thumb { border-radius: 999px; background: var(--oc-line2); } /* Lista compacta profesional */ .oc-fu-followup-card { width: 100%; min-height: 82px; padding: 9px 12px 9px 13px; display: flex; align-items: flex-start; gap: 10px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); cursor: pointer; transition: background .15s ease, box-shadow .15s ease; } .oc-fu-followup-card:hover { background: var(--oc-bg3); } .oc-fu-followup-card.active { background: var(--oc-blue3); box-shadow: inset 3px 0 0 var(--oc-blue); } .oc-fu-avatar, .oc-fu-detail-avatar { display: grid; place-items: center; border-radius: 50%; color: var(--oc-blue); background: var(--oc-blue2); font-weight: 800; } .oc-fu-avatar { width: 36px; height: 36px; flex: 0 0 36px; font-size: 10.5px; } .oc-fu-card-main, .oc-fu-card-identity { min-width: 0; } .oc-fu-card-main { flex: 1; } .oc-fu-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .oc-fu-card-head strong { display: block; color: var(--oc-txt); font-size: 12px; font-weight: 800; line-height: 1.2; } .oc-fu-card-head time { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; color: var(--oc-blue); font-size: 9.5px; font-weight: 700; white-space: nowrap; } .oc-fu-card-meta { gap: 6px; margin-top: 4px; } .oc-fu-card-bottom { min-width: 0; margin-top: 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; } .oc-fu-card-reason { min-width: 0; margin: 0; color: var(--oc-txt3); font-size: 9.8px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-fu-card-foot { justify-content: flex-end; gap: 5px; margin: 0; } .oc-fu-channel { display: inline-flex; align-items: center; gap: 4px; color: var(--oc-txt3); font-size: 9.5px; } /* Badges */ .oc-fu-type, .oc-fu-priority, .oc-fu-status { display: inline-flex; align-items: center; justify-content: center; gap: 4px; padding: 3px 7px; border-radius: 999px; font-size: 8.8px; font-weight: 800; line-height: 1; white-space: nowrap; } .oc-fu-type--task { color: var(--oc-blue); background: var(--oc-blue3); } .oc-fu-type--appointment { color: var(--oc-pur); background: var(--oc-pur2); } .oc-fu-type--call { color: var(--oc-amb); background: var(--oc-amb2); } .oc-fu-type--automatic { color: #0f766e; background: #ccfbf1; } .oc-fu-priority--urgent, .oc-fu-priority--high, .oc-fu-status--cancelled, .oc-fu-status--overdue { color: var(--oc-red); background: var(--oc-red2); } .oc-fu-priority--medium, .oc-fu-status--waiting { color: var(--oc-amb); background: var(--oc-amb2); } .oc-fu-priority--normal, .oc-fu-status--scheduled, .oc-fu-status--pending { color: var(--oc-blue); background: var(--oc-blue3); } .oc-fu-priority--low { color: var(--oc-txt3); background: var(--oc-bg3); } .oc-fu-status--progress { color: #0369a1; background: #e0f2fe; } .oc-fu-status--completed { color: var(--oc-grn); background: var(--oc-grn2); } /* Panel derecho */ .oc-fu-detail-panel { background: var(--oc-bg); } .oc-fu-detail, .oc-fu-detail-empty { width: 100%; height: 100%; } .oc-fu-detail { display: flex; flex-direction: column; } .oc-fu-detail-empty { padding: 28px; display: grid; place-content: center; justify-items: center; text-align: center; } .oc-fu-detail-empty > span { width: 54px; height: 54px; margin-bottom: 12px; display: grid; place-items: center; border-radius: 16px; color: var(--oc-blue); background: var(--oc-blue3); font-size: 21px; } .oc-fu-detail-empty strong { font-size: 14px; } .oc-fu-detail-empty p { max-width: 390px; margin: 6px 0 0; color: var(--oc-txt3); font-size: 12px; } .oc-fu-detail-header { flex: 0 0 68px; min-height: 68px; padding: 10px 15px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--oc-line); background: var(--oc-bg2); } .oc-fu-detail-profile { min-width: 0; display: flex; align-items: center; gap: 11px; } .oc-fu-detail-avatar { width: 42px; height: 42px; flex: 0 0 42px; font-size: 12px; } .oc-fu-detail-profile-copy h4 { margin: 0; font-size: 16px; font-weight: 800; } .oc-fu-detail-contact-line { gap: 6px; margin-top: 4px; color: var(--oc-txt3); font-size: 10px; } .oc-fu-detail-separator { color: var(--oc-line2); } .oc-fu-detail-head-actions { justify-content: flex-end; flex-wrap: wrap; gap: 6px; } .oc-fu-detail-menu-btn { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--oc-line); border-radius: 8px; color: var(--oc-txt2); background: var(--oc-bg2); cursor: pointer; } .oc-fu-detail-scroll { padding: 10px; } .oc-fu-info-card { margin-bottom: 9px; padding: 11px; border: 1px solid var(--oc-line); border-radius: 11px; background: var(--oc-bg2); } .oc-fu-summary-card { padding: 10px 11px 11px; } .oc-fu-info-card-head { margin-bottom: 9px; display: flex; justify-content: space-between; gap: 12px; } .oc-fu-info-card-head small { display: block; color: var(--oc-blue); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } .oc-fu-info-card-head strong { display: block; margin-top: 2px; color: var(--oc-txt3); font-size: 9.5px; font-weight: 600; } .oc-fu-info-card-head > i { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; color: var(--oc-blue); background: var(--oc-blue3); } .oc-fu-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; } .oc-fu-summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .oc-fu-info-item { min-width: 0; padding: 8px 9px; border: 1px solid var(--oc-line); border-radius: 8px; background: var(--oc-bg3); } .oc-fu-info-item--wide { grid-column: 1 / -1; } .oc-fu-info-item--double { grid-column: span 2; } .oc-fu-info-item span, .oc-fu-info-list span { color: var(--oc-txt3); font-size: 9px; font-weight: 700; } .oc-fu-info-item strong { display: block; margin-top: 3px; color: var(--oc-txt); font-size: 10.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; } .oc-fu-detail-two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .oc-fu-info-list > div { min-height: 28px; padding: 6px 0; display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--oc-line); } .oc-fu-info-list > div:last-child { border-bottom: 0; } .oc-fu-info-list strong { color: var(--oc-txt2); font-size: 9.8px; text-align: right; overflow-wrap: anywhere; } .oc-fu-info-list-message { flex-direction: column; } .oc-fu-info-list-message strong { width: 100%; text-align: left; } /* Tabs e historial */ .oc-fu-detail-tabs { min-height: 38px; display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--oc-line); overflow-x: auto; scrollbar-width: none; } .oc-fu-detail-tabs::-webkit-scrollbar { display: none; } .oc-fu-detail-tabs button { align-self: stretch; padding: 0 3px; border: 0; border-bottom: 2px solid transparent; color: var(--oc-txt3); background: transparent; font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; } .oc-fu-detail-tabs button.active { color: var(--oc-blue); border-bottom-color: var(--oc-blue); } .oc-fu-detail-tab-panel { padding: 10px 2px 2px; } .oc-fu-timeline { display: flex; flex-direction: column; } .oc-fu-timeline-item { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 9px; padding-bottom: 11px; } .oc-fu-timeline-icon { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--oc-blue); background: var(--oc-blue3); z-index: 1; } .oc-fu-timeline-item:not(:last-child)::before { content: ""; position: absolute; top: 25px; bottom: 0; left: 13px; width: 1px; background: var(--oc-line); } .oc-fu-timeline-item strong { display: block; font-size: 10.5px; } .oc-fu-timeline-item p { margin: 3px 0 0; color: var(--oc-txt3); font-size: 9.8px; } .oc-fu-timeline-item small { display: block; margin-top: 3px; color: var(--oc-txt4); font-size: 9px; } .oc-fu-timeline-empty, .oc-fu-panel-empty { min-height: 120px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--oc-txt3); text-align: center; } .oc-fu-timeline-empty { border: 1px dashed var(--oc-line2); border-radius: 11px; background: var(--oc-bg3); } .oc-fu-empty-icon { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; color: var(--oc-blue); background: var(--oc-blue3); font-size: 19px; } /* Footer */ .oc-fu-detail-footer { flex: 0 0 auto; min-height: 52px; padding: 8px 10px; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; border-top: 1px solid var(--oc-line); background: var(--oc-bg2); } .oc-fu-action { min-height: 32px; padding: 6px 9px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; border: 1px solid transparent; border-radius: 8px; font-size: 9.5px; font-weight: 800; white-space: nowrap; cursor: pointer; } .oc-fu-action--success { color: var(--oc-grn); border-color: var(--oc-grn2); background: var(--oc-grn3); } .oc-fu-action--warning { color: var(--oc-amb); border-color: var(--oc-amb2); background: var(--oc-amb3); } .oc-fu-action--primary { color: var(--oc-blue); border-color: var(--oc-blue2); background: var(--oc-blue3); } .oc-fu-action--danger { color: var(--oc-red); border-color: var(--oc-red2); background: var(--oc-red3); } /* Offcanvas */ #addFollowupSidebar { width: min(460px, 100vw); } #fuContactSearchResults { position: relative; z-index: 20; max-height: 260px; margin-top: 6px; overflow-y: auto; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); box-shadow: 0 12px 28px rgba(15, 25, 35, .10); } /* Helpers */ .oc-fu-followup-card.d-none, .oc-fu-panel-empty.d-none, #fuContactSearchResults.d-none { display: none !important; } .oc-fu-link { padding: 0; border: 0; color: var(--oc-blue); background: transparent; font-size: 10px; font-weight: 800; cursor: pointer; } /* Responsive */ @media (max-width: 1250px) { .oc-fu-stat-grid { grid-template-columns: repeat(6, 176px); } .oc-fu-workspace { grid-template-columns: minmax(390px, 41%) minmax(0, 59%); } .oc-fu-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .oc-fu-info-item--double { grid-column: span 1; } } @media (max-width: 980px) { .oc-fu-toolbar { grid-template-columns: minmax(240px, 1fr) auto 150px; } .oc-fu-toolbar .oc-fu-select:last-child { grid-column: 1 / -1; } .oc-fu-detail-two-columns { grid-template-columns: 1fr; } } @media (max-width: 860px) { .oc-fu-page { overflow-y: auto; } .oc-fu-page-header { flex-direction: column; } .oc-fu-workspace { min-height: 760px; grid-template-columns: 1fr; overflow: visible; } .oc-fu-list-panel { min-height: 390px; border-right: 0; border-bottom: 1px solid var(--oc-line); } .oc-fu-detail-panel { min-height: 580px; } } @media (max-width: 560px) { .oc-fu-page-header, .oc-fu-stat-grid, .oc-fu-toolbar { padding-inline: 12px; } .oc-fu-tabs, .oc-fu-workspace { margin-inline: 12px; } .oc-fu-toolbar { grid-template-columns: 1fr; } .oc-fu-detail-header { align-items: flex-start; flex-direction: column; } .oc-fu-detail-head-actions { width: 100%; justify-content: flex-start; } .oc-fu-summary-grid, .oc-fu-info-grid { grid-template-columns: 1fr; } .oc-fu-info-item--double, .oc-fu-info-item--wide { grid-column: auto; } .oc-fu-action { flex: 1 1 calc(50% - 6px); } } /* ============================================================ CARD PROFESIONAL + HEADER DE DETALLE ============================================================ */ .oc-fu-followup-card { min-height: 104px; padding: 12px 14px; gap: 12px; align-items: flex-start; background: var(--oc-bg2); } .oc-fu-followup-card:hover { background: #fbfdff; } .oc-fu-followup-card.active { background: linear-gradient( 90deg, rgba(37, 99, 235, .10) 0%, rgba(37, 99, 235, .035) 100% ); box-shadow: inset 3px 0 0 var(--oc-blue), inset 0 0 0 1px rgba(37, 99, 235, .08); } .oc-fu-avatar-wrap { position: relative; flex: 0 0 auto; } .oc-fu-avatar { width: 42px; height: 42px; font-size: 11px; border: 2px solid var(--oc-bg2); box-shadow: 0 0 0 1px var(--oc-line); } .oc-fu-avatar-channel { position: absolute; right: -3px; bottom: -3px; width: 19px; height: 19px; display: inline-flex; align-items: center; justify-content: center; border: 3px solid var(--oc-bg2); border-radius: 50%; color: #fff; font-size: 9px; } .oc-fu-avatar-channel i { font-size: 9px; } .oc-fu-avatar-channel--instagram { background: #db2777; } .oc-fu-avatar-channel--whatsapp, .oc-fu-avatar-channel--gupshup { background: var(--oc-grn); } .oc-fu-avatar-channel--facebook, .oc-fu-avatar-channel--messenger { background: var(--oc-blue); } .oc-fu-avatar-channel--webchat { background: var(--oc-pur); } .oc-fu-avatar-channel--email, .oc-fu-avatar-channel--sms, .oc-fu-avatar-channel--phone { background: #64748b; } .oc-fu-card-main { min-width: 0; flex: 1 1 auto; } .oc-fu-card-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .oc-fu-card-person { min-width: 0; } .oc-fu-card-name { display: block; max-width: 100%; overflow: hidden; color: var(--oc-txt); font-size: 13px; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .oc-fu-card-context { margin-top: 6px; display: flex; align-items: center; flex-wrap: wrap; gap: 7px; } .oc-fu-card-channel { display: inline-flex; align-items: center; gap: 4px; color: var(--oc-txt3); font-size: 10px; font-weight: 600; } .oc-fu-card-channel i { font-size: 12px; } .oc-fu-type { min-height: 23px; padding: 0 9px; border: 1px solid transparent; font-size: 9.5px; } .oc-fu-type--task { border-color: var(--oc-blue2); } .oc-fu-type--appointment { border-color: var(--oc-pur2); } .oc-fu-type--call { border-color: var(--oc-amb2); } .oc-fu-date-chip { min-height: 28px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--oc-blue2); border-radius: 9px; background: var(--oc-blue3); color: var(--oc-blue); font-size: 9.5px; font-weight: 800; white-space: nowrap; } .oc-fu-date-chip i { font-size: 13px; } .oc-fu-card-action-row { margin-top: 10px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; } .oc-fu-card-action-copy { min-width: 0; } .oc-fu-card-action-copy small { display: block; margin-bottom: 2px; color: var(--oc-txt4); font-size: 8.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } .oc-fu-card-action-copy span { display: block; overflow: hidden; color: var(--oc-txt2); font-size: 10.5px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .oc-fu-card-state-group { display: flex; align-items: center; gap: 6px; } .oc-fu-meta-pill { min-width: 74px; min-height: 34px; padding: 5px 8px; display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; border: 1px solid transparent; border-radius: 9px; line-height: 1; } .oc-fu-meta-pill small { margin-bottom: 3px; font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; opacity: .72; } .oc-fu-meta-pill strong { font-size: 9px; font-weight: 900; } .oc-fu-meta-pill.oc-fu-priority--normal { color: var(--oc-blue); border-color: var(--oc-blue2); background: var(--oc-blue3); } .oc-fu-meta-pill.oc-fu-priority--high, .oc-fu-meta-pill.oc-fu-priority--urgent { color: var(--oc-red); border-color: var(--oc-red2); background: var(--oc-red3); } .oc-fu-meta-pill.oc-fu-priority--medium { color: var(--oc-amb); border-color: var(--oc-amb2); background: var(--oc-amb3); } .oc-fu-meta-pill.oc-fu-priority--low { color: var(--oc-txt3); border-color: var(--oc-line); background: var(--oc-bg3); } .oc-fu-meta-pill.oc-fu-status--pending, .oc-fu-meta-pill.oc-fu-status--scheduled { color: var(--oc-blue); border-color: var(--oc-blue2); background: var(--oc-blue3); } .oc-fu-meta-pill.oc-fu-status--waiting { color: var(--oc-amb); border-color: var(--oc-amb2); background: var(--oc-amb3); } .oc-fu-meta-pill.oc-fu-status--completed { color: var(--oc-grn); border-color: var(--oc-grn2); background: var(--oc-grn3); } .oc-fu-meta-pill.oc-fu-status--overdue, .oc-fu-meta-pill.oc-fu-status--cancelled { color: var(--oc-red); border-color: var(--oc-red2); background: var(--oc-red3); } /* Header del detalle */ .oc-fu-detail-header { min-height: 74px; padding: 12px 16px; } .oc-fu-detail-profile-copy h4 { font-size: 16px; line-height: 1.2; } .oc-fu-detail-contact-line { margin-top: 5px; font-size: 10px; } .oc-fu-detail-head-actions { gap: 8px; } .oc-fu-detail-badge { min-height: 36px; padding: 6px 10px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--oc-line); border-radius: 10px; background: var(--oc-bg2); line-height: 1; } .oc-fu-detail-badge--type { min-width: 82px; gap: 6px; color: var(--oc-blue); border-color: var(--oc-blue2); background: var(--oc-blue3); font-size: 10px; font-weight: 900; } .oc-fu-detail-badge--type i { font-size: 14px; } .oc-fu-detail-badge--status, .oc-fu-detail-badge--priority { min-width: 86px; flex-direction: column; align-items: flex-start; } .oc-fu-detail-badge small { margin-bottom: 3px; color: var(--oc-txt3); font-size: 7.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; } .oc-fu-detail-badge strong { color: var(--oc-txt); font-size: 9.5px; font-weight: 900; } .oc-fu-detail-menu-btn { width: 36px; height: 36px; } #fuViewHistory, #fuViewHistoryBtn { display: none !important; } @media (max-width: 1180px) { .oc-fu-card-action-row { grid-template-columns: 1fr; } .oc-fu-card-state-group { justify-content: flex-start; } .oc-fu-detail-head-actions { max-width: 310px; } } @media (max-width: 760px) { .oc-fu-card-topline { flex-direction: column; } .oc-fu-date-chip { align-self: flex-start; } .oc-fu-card-state-group { flex-wrap: wrap; } .oc-fu-detail-badge--status, .oc-fu-detail-badge--priority { min-width: 78px; } } /* ============================================================ HEADER DE LISTADO + CONTROL DE ORDEN ============================================================ */ .oc-fu-list-header { flex: 0 0 52px; min-height: 52px; padding: 8px 12px; gap: 12px; background: linear-gradient( 180deg, var(--oc-bg2) 0%, rgba(245, 247, 251, .72) 100% ); } .oc-fu-list-header-title { min-width: 0; display: flex; align-items: center; gap: 9px; } .oc-fu-list-header-icon { width: 32px; height: 32px; flex: 0 0 32px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--oc-blue2); border-radius: 9px; color: var(--oc-blue); background: var(--oc-blue3); } .oc-fu-list-header-icon i { font-size: 15px; } .oc-fu-list-header-title > div { min-width: 0; } .oc-fu-list-header-title strong { display: block; overflow: hidden; color: var(--oc-txt); font-size: 11.5px; font-weight: 900; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .oc-fu-list-header-title > div > span { display: block; margin-top: 2px; color: var(--oc-txt3); font-size: 9px; font-weight: 700; } .oc-fu-order-control { min-width: 158px; height: 34px; margin-left: auto; padding: 0 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--oc-line); border-radius: 9px; color: var(--oc-txt3); background: var(--oc-bg2); cursor: pointer; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease; } .oc-fu-order-control:hover, .oc-fu-order-control:focus-within { border-color: var(--oc-blue2); background: var(--oc-blue3); box-shadow: 0 0 0 3px rgba(37, 99, 235, .06); } .oc-fu-order-control > i:first-child { color: var(--oc-blue); font-size: 14px; } .oc-fu-order-control > i:last-child { color: var(--oc-txt3); font-size: 13px; pointer-events: none; } .oc-fu-order-select { min-width: 0; flex: 1 1 auto; height: 100%; padding: 0; border: 0; outline: 0; appearance: none; color: var(--oc-txt2); background: transparent; font-family: var(--oc-font); font-size: 10px; font-weight: 800; cursor: pointer; } .oc-fu-order-select option { color: var(--oc-txt); background: var(--oc-bg2); } @media (max-width: 560px) { .oc-fu-list-header { min-height: 60px; } .oc-fu-order-control { min-width: 132px; } .oc-fu-list-header-title > div > span { display: none; } } /* ============================================================ AJUSTES DE DATOS, CONTEO Y COLORES NEUTROS ============================================================ */ .oc-fu-list-header-title > div > .oc-fu-list-count { display: block; margin-top: 2px; color: var(--oc-txt3); font-size: 9px; font-weight: 700; line-height: 1.2; } .oc-fu-date-chip { border-color: var(--oc-line); color: var(--oc-txt2); background: var(--oc-bg3); box-shadow: none; } .oc-fu-followup-card.active .oc-fu-date-chip { border-color: var(--oc-line2); color: var(--oc-txt2); background: rgba(255, 255, 255, .72); } .oc-fu-avatar-channel { right: -4px; bottom: -4px; width: 22px; height: 22px; border-width: 2px; } .oc-fu-avatar-channel i { font-size: 11px; } .oc-fu-detail-badge--status, .oc-fu-detail-badge--priority { color: var(--oc-txt2); border-color: var(--oc-line); background: var(--oc-bg3); } .oc-fu-detail-badge--status small, .oc-fu-detail-badge--priority small { color: var(--oc-txt3); } .oc-fu-detail-badge--status strong, .oc-fu-detail-badge--priority strong { color: var(--oc-txt2); } .oc-fu-meta-pill.oc-fu-priority--normal { color: var(--oc-txt2); border-color: var(--oc-line); background: var(--oc-bg3); } .oc-fu-meta-pill.oc-fu-status--pending, .oc-fu-meta-pill.oc-fu-status--scheduled { color: var(--oc-txt2); border-color: var(--oc-line); background: var(--oc-bg3); } .oc-fu-detail-contact-line { min-height: 16px; } .oc-fu-detail-contact-line:empty { display: none; } .oc-fu-detail-contact-line > span:not(.oc-fu-detail-separator) { color: var(--oc-txt3); } .oc-fu-detail-contact-line #fuDetailIdentifier { color: var(--oc-txt2); font-weight: 700; } .oc-fu-detail-separator { color: var(--oc-line3); } /* ============================================================ V4 — ESTADOS, CANALES, AVATARES Y HEADER ============================================================ */ /* El contador queda debajo del título, sin círculo ni duplicado */ .oc-fu-list-header-title > div > .oc-fu-list-count { display: block; margin-top: 2px; padding: 0; border: 0; border-radius: 0; color: var(--oc-txt3); background: transparent; font-size: 9px; font-weight: 700; line-height: 1.2; } .oc-fu-list-header-icon { width: 30px; height: 30px; flex-basis: 30px; border-color: var(--oc-line); color: var(--oc-txt3); background: var(--oc-bg3); } /* Sin círculo de red social sobre el avatar */ .oc-fu-avatar-channel { display: none !important; } .oc-fu-avatar { overflow: hidden; } .oc-fu-avatar-image, .oc-fu-detail-avatar-image { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; } /* Canal con color en su ubicación útil */ .oc-fu-card-channel--instagram, .oc-fu-detail-channel--instagram { color: #db2777 !important; } .oc-fu-card-channel--whatsapp, .oc-fu-card-channel--gupshup, .oc-fu-detail-channel--whatsapp, .oc-fu-detail-channel--gupshup { color: var(--oc-grn) !important; } .oc-fu-card-channel--facebook, .oc-fu-card-channel--messenger, .oc-fu-detail-channel--facebook, .oc-fu-detail-channel--messenger { color: var(--oc-blue) !important; } .oc-fu-card-channel--webchat, .oc-fu-detail-channel--webchat { color: var(--oc-pur) !important; } .oc-fu-card-channel--tiktok, .oc-fu-detail-channel--tiktok { color: var(--oc-txt) !important; } .oc-fu-card-channel--email, .oc-fu-card-channel--phone, .oc-fu-detail-channel--email, .oc-fu-detail-channel--phone { color: #64748b !important; } /* Fecha neutral */ .oc-fu-date-chip, .oc-fu-followup-card.active .oc-fu-date-chip { border-color: var(--oc-line); color: var(--oc-txt2); background: var(--oc-bg3); } /* Prioridad normal neutral */ .oc-fu-meta-pill.oc-fu-priority--normal { color: var(--oc-txt2); border-color: var(--oc-line); background: var(--oc-bg3); } /* Estado pendiente sí conserva identidad azul */ .oc-fu-meta-pill.oc-fu-status--pending, .oc-fu-meta-pill.oc-fu-status--scheduled { color: var(--oc-blue); border-color: var(--oc-blue2); background: var(--oc-blue3); } /* Estado esperando */ .oc-fu-meta-pill.oc-fu-status--waiting { color: var(--oc-amb); border-color: var(--oc-amb2); background: var(--oc-amb3); } /* Estado completado */ .oc-fu-meta-pill.oc-fu-status--completed { color: var(--oc-grn); border-color: var(--oc-grn2); background: var(--oc-grn3); } /* Estado vencido/cancelado */ .oc-fu-meta-pill.oc-fu-status--overdue, .oc-fu-meta-pill.oc-fu-status--cancelled { color: var(--oc-red); border-color: var(--oc-red2); background: var(--oc-red3); } /* Header derecho: tipo */ .oc-fu-detail-badge--task { color: var(--oc-blue); border-color: var(--oc-blue2); background: var(--oc-blue3); } .oc-fu-detail-badge--appointment { color: var(--oc-pur); border-color: var(--oc-pur2); background: var(--oc-pur3); } .oc-fu-detail-badge--call { color: var(--oc-amb); border-color: var(--oc-amb2); background: var(--oc-amb3); } .oc-fu-detail-badge--automatic { color: var(--oc-teal); border-color: var(--oc-teal2); background: rgba(13, 148, 136, .08); } /* Header derecho: estado dinámico */ .oc-fu-detail-status--pending, .oc-fu-detail-status--scheduled { border-color: var(--oc-blue2); background: var(--oc-blue3); } .oc-fu-detail-status--pending strong, .oc-fu-detail-status--scheduled strong { color: var(--oc-blue); } .oc-fu-detail-status--waiting_client, .oc-fu-detail-status--no_response { border-color: var(--oc-amb2); background: var(--oc-amb3); } .oc-fu-detail-status--waiting_client strong, .oc-fu-detail-status--no_response strong { color: var(--oc-amb); } .oc-fu-detail-status--completed { border-color: var(--oc-grn2); background: var(--oc-grn3); } .oc-fu-detail-status--completed strong { color: var(--oc-grn); } .oc-fu-detail-status--overdue, .oc-fu-detail-status--cancelled, .oc-fu-detail-status--lost { border-color: var(--oc-red2); background: var(--oc-red3); } .oc-fu-detail-status--overdue strong, .oc-fu-detail-status--cancelled strong, .oc-fu-detail-status--lost strong { color: var(--oc-red); } /* Header derecho: prioridad dinámica */ .oc-fu-detail-priority--normal { border-color: var(--oc-line); background: var(--oc-bg3); } .oc-fu-detail-priority--normal strong { color: var(--oc-txt2); } .oc-fu-detail-priority--low { border-color: var(--oc-grn2); background: var(--oc-grn3); } .oc-fu-detail-priority--low strong { color: var(--oc-grn); } .oc-fu-detail-priority--medium { border-color: var(--oc-amb2); background: var(--oc-amb3); } .oc-fu-detail-priority--medium strong { color: var(--oc-amb); } .oc-fu-detail-priority--high, .oc-fu-detail-priority--urgent { border-color: var(--oc-red2); background: var(--oc-red3); } .oc-fu-detail-priority--high strong, .oc-fu-detail-priority--urgent strong { color: var(--oc-red); } /* El menú fue eliminado del Blade */ .oc-fu-detail-menu-btn { display: none !important; } /* ========================================================================== FOLLOW-UP FORM — CREAR / REPROGRAMAR ========================================================================== */ .oc-fu-form-readonly-card { min-height: 58px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--oc-line); border-radius: 10px; background: var(--oc-bg3); } .oc-fu-form-readonly-card--stacked { display: block; } .oc-fu-form-readonly-card--stacked strong { display: block; color: var(--oc-txt); font-size: 12px; } .oc-fu-form-readonly-card--stacked p { margin: 5px 0 0; color: var(--oc-txt3); font-size: 10.5px; line-height: 1.45; } .oc-fu-form-contact-avatar { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; color: var(--oc-blue); background: var(--oc-blue2); font-size: 11px; font-weight: 900; } .oc-fu-form-contact-copy { min-width: 0; } .oc-fu-form-contact-copy strong { display: block; overflow: hidden; color: var(--oc-txt); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .oc-fu-form-contact-copy span { display: block; margin-top: 3px; overflow: hidden; color: var(--oc-txt3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } .oc-fu-form-readonly-value { min-height: 38px; padding: 9px 11px; display: flex; align-items: center; border: 1px solid var(--oc-line); border-radius: 8px; color: var(--oc-txt2); background: var(--oc-bg3); font-size: 11px; font-weight: 800; } #fuFormNextActionAt[readonly] { background: var(--oc-bg2); cursor: pointer; } #fuContactSearchResults { position: relative; z-index: 30; width: 100%; max-height: 260px; margin-top: 6px; overflow-y: auto; border: 1px solid var(--oc-line); border-radius: 9px; background: var(--oc-bg2); box-shadow: 0 12px 28px rgba(15, 25, 35, 0.10); } .oc-contact-result-item { width: 100%; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--oc-line); border-radius: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; } .oc-contact-result-item:last-child { border-bottom: 0; } .oc-contact-result-item:hover, .oc-contact-result-item:focus { background: var(--oc-blue2); outline: none; } .oc-contact-result-body { min-width: 0; flex: 1; } .oc-contact-result-body strong { display: block; overflow: hidden; color: var(--oc-txt); font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .oc-contact-result-body small { display: block; margin-top: 2px; overflow: hidden; color: var(--oc-txt3); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; } /* |-------------------------------------------------------------------------- | Modal compartido: Follow-up Center y Calendar |-------------------------------------------------------------------------- */ #addFollowupSidebar.oc-event-detail-panel, #addEventSidebar.oc-event-detail-panel { display: flex !important; flex-direction: column !important; width: 390px; height: 100dvh !important; max-height: 100dvh !important; overflow: hidden !important; } /* |-------------------------------------------------------------------------- | Encabezado |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-event-panel-head, #addEventSidebar .oc-event-panel-head { flex: 0 0 auto; } /* |-------------------------------------------------------------------------- | Formularios |-------------------------------------------------------------------------- */ #addFollowupSidebar #followupForm, #addFollowupSidebar .oc-followup-form-layout, #addEventSidebar #eventForm { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; width: 100%; min-height: 0 !important; overflow: hidden !important; } /* |-------------------------------------------------------------------------- | Cuerpo con scroll |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-event-panel-body, #addEventSidebar .oc-event-panel-body { flex: 1 1 auto !important; min-height: 0 !important; overflow-x: visible !important; overflow-y: auto !important; } /* |-------------------------------------------------------------------------- | Footer fijo al fondo |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-event-panel-foot, #addEventSidebar .oc-event-panel-foot { position: relative !important; bottom: auto !important; z-index: 20; display: flex; flex: 0 0 auto !important; align-items: center; justify-content: flex-end; gap: 10px; width: 100%; margin-top: 0 !important; padding: 12px 16px; border-top: 1px solid var(--bs-border-color, #dfe5ef); background: var(--bs-body-bg, #fff); } /* |-------------------------------------------------------------------------- | Secciones |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-event-section, #addEventSidebar .oc-event-section { overflow: visible; } #addFollowupSidebar .oc-event-section:last-child, #addEventSidebar .oc-event-section:last-child { margin-bottom: 0; } /* |-------------------------------------------------------------------------- | Contenedor del contacto |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-event-contact, #addEventSidebar .oc-event-contact { position: relative; display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px; overflow: visible; border: 1px solid var(--bs-border-color, #dfe5ef); border-radius: 14px; background: var(--bs-body-bg, #fff); } /* |-------------------------------------------------------------------------- | Avatar principal |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-event-contact-avatar, #addEventSidebar .oc-event-contact-avatar { display: inline-flex; flex: 0 0 40px; width: 40px; height: 40px; align-items: center; justify-content: center; margin-top: 1px; border-radius: 50%; background: #ddebff; color: #2f6fed; font-size: 13px; font-weight: 700; line-height: 1; } /* |-------------------------------------------------------------------------- | Cuerpo del contacto |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-event-contact-body, #addEventSidebar .oc-event-contact-body { position: relative; flex: 1 1 auto; width: auto; min-width: 0; } /* |-------------------------------------------------------------------------- | Input de búsqueda |-------------------------------------------------------------------------- */ #addFollowupSidebar #fuFormContactSearch, #addEventSidebar #eventContactSearch { width: 100%; min-height: 38px; } /* |-------------------------------------------------------------------------- | Resultados de búsqueda |-------------------------------------------------------------------------- */ #addFollowupSidebar #fuContactSearchResults, #addEventSidebar #eventContactResults { position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 1085; display: block; width: 100%; max-height: 260px; padding: 0; overflow-x: hidden; overflow-y: auto; border: 1px solid var(--bs-border-color, #dfe5ef); border-radius: 12px; background: var(--bs-body-bg, #fff); box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16); } #addFollowupSidebar #fuContactSearchResults.d-none, #addEventSidebar #eventContactResults.d-none { display: none !important; } /* |-------------------------------------------------------------------------- | Resultado individual |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-contact-result-item, #addEventSidebar .oc-contact-result-item { appearance: none; -webkit-appearance: none; display: flex; width: 100%; min-height: 58px; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--bs-border-color, #edf0f5); border-radius: 0; background: transparent; color: inherit; text-align: left; box-shadow: none; cursor: pointer; } #addFollowupSidebar .oc-contact-result-item:first-child, #addEventSidebar .oc-contact-result-item:first-child { border-radius: 11px 11px 0 0; } #addFollowupSidebar .oc-contact-result-item:last-child, #addEventSidebar .oc-contact-result-item:last-child { border-bottom: 0; border-radius: 0 0 11px 11px; } #addFollowupSidebar .oc-contact-result-item:only-child, #addEventSidebar .oc-contact-result-item:only-child { border-radius: 11px; } #addFollowupSidebar .oc-contact-result-item:hover, #addFollowupSidebar .oc-contact-result-item:focus, #addEventSidebar .oc-contact-result-item:hover, #addEventSidebar .oc-contact-result-item:focus { background: #f4f7fc; outline: 0; } /* |-------------------------------------------------------------------------- | Avatar del resultado |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-contact-result-avatar, #addEventSidebar .oc-contact-result-avatar { display: inline-flex; flex: 0 0 34px; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; background: #ddebff; color: #5f7da8; font-size: 11px; font-weight: 700; line-height: 1; } /* |-------------------------------------------------------------------------- | Texto del resultado |-------------------------------------------------------------------------- */ #addFollowupSidebar .oc-contact-result-body, #addEventSidebar .oc-contact-result-body { display: block; flex: 1 1 auto; min-width: 0; } #addFollowupSidebar .oc-contact-result-body strong, #addEventSidebar .oc-contact-result-body strong { display: block; overflow: hidden; color: var(--bs-body-color, #172033); font-size: 12px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } #addFollowupSidebar .oc-contact-result-body small, #addEventSidebar .oc-contact-result-body small { display: block; margin-top: 3px; overflow: hidden; color: var(--bs-secondary-color, #748198); font-size: 10px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } /* ========================================================================== FOLLOW-UP ACTIVITY — TIMELINE VISUAL ========================================================================== */ /* |-------------------------------------------------------------------------- | Contenedor principal |-------------------------------------------------------------------------- */ .oc-fu-timeline { display: flex; flex-direction: column; gap: 14px; width: 100%; } .oc-fu-detail-tab-panel { padding: 4px 0 2px; } /* |-------------------------------------------------------------------------- | Tarjeta de actividad |-------------------------------------------------------------------------- */ .oc-fu-activity-card { --activity-color: #64748b; --activity-soft: #f1f5f9; --activity-border: #dbe3ec; position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; width: 100%; padding: 14px 16px 14px 12px; border: 1px solid var(--activity-border); border-radius: 14px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 7px 18px rgba(15, 23, 42, 0.04); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .oc-fu-activity-card:hover { border-color: color-mix( in srgb, var(--activity-color) 34%, #dbe3ec ); box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05), 0 10px 24px rgba(15, 23, 42, 0.07); transform: translateY(-1px); } /* |-------------------------------------------------------------------------- | Línea vertical e icono |-------------------------------------------------------------------------- */ .oc-fu-activity-rail { position: relative; display: flex; justify-content: center; min-height: 100%; } .oc-fu-activity-rail::after { position: absolute; top: 38px; bottom: -29px; left: 50%; width: 2px; background: linear-gradient( to bottom, var(--activity-border), transparent ); content: ""; transform: translateX(-50%); } .oc-fu-activity-card:last-child .oc-fu-activity-rail::after { display: none; } .oc-fu-activity-icon { position: relative; z-index: 2; display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border: 1px solid color-mix( in srgb, var(--activity-color) 26%, transparent ); border-radius: 11px; color: var(--activity-color); background: var(--activity-soft); font-size: 16px; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05); } /* |-------------------------------------------------------------------------- | Contenido |-------------------------------------------------------------------------- */ .oc-fu-activity-content { min-width: 0; } .oc-fu-activity-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .oc-fu-activity-title-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; min-width: 0; } .oc-fu-activity-title { color: #172033; font-size: 13px; font-weight: 800; line-height: 1.35; } .oc-fu-activity-source { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 8px; border: 1px solid color-mix( in srgb, var(--activity-color) 20%, transparent ); border-radius: 999px; color: var(--activity-color); background: var(--activity-soft); font-size: 9px; font-weight: 800; line-height: 1; letter-spacing: 0.025em; text-transform: uppercase; } .oc-fu-activity-time { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 5px; color: #66758b; font-size: 10px; font-weight: 600; line-height: 1.35; white-space: nowrap; } .oc-fu-activity-time i { color: var(--activity-color); font-size: 13px; } .oc-fu-activity-description { margin: 7px 0 0; color: #4f5f73; font-size: 11px; line-height: 1.55; } /* |-------------------------------------------------------------------------- | Bloque de cambios |-------------------------------------------------------------------------- */ .oc-fu-activity-changes { display: grid; gap: 9px; margin-top: 12px; } .oc-fu-activity-change { overflow: hidden; border: 1px solid #e2e8f0; border-radius: 11px; background: #f8fafc; } .oc-fu-activity-change.is-highlighted { border-color: color-mix( in srgb, var(--activity-color) 28%, #e2e8f0 ); background: color-mix( in srgb, var(--activity-soft) 74%, #ffffff ); } .oc-fu-activity-change-label { padding: 7px 10px; border-bottom: 1px solid #e6ebf1; color: #536275; background: rgba(255, 255, 255, 0.72); font-size: 9px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; } /* |-------------------------------------------------------------------------- | Comparación antes / después |-------------------------------------------------------------------------- */ .oc-fu-activity-compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr); align-items: stretch; } .oc-fu-activity-value { min-width: 0; padding: 10px 11px; } .oc-fu-activity-value small { display: block; margin-bottom: 4px; color: #77859a; font-size: 8.5px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; } .oc-fu-activity-value strong { display: block; overflow-wrap: anywhere; color: #263548; font-size: 11px; font-weight: 800; line-height: 1.42; } .oc-fu-activity-value--old { background: #f8fafc; } .oc-fu-activity-value--old strong { color: #64748b; } .oc-fu-activity-value--new { background: #ffffff; } .oc-fu-activity-value--new strong { color: var(--activity-color); } .oc-fu-activity-arrow { display: flex; align-items: center; justify-content: center; border-right: 1px solid #e2e8f0; border-left: 1px solid #e2e8f0; color: var(--activity-color); background: #ffffff; font-size: 14px; } /* |-------------------------------------------------------------------------- | Valor individual |-------------------------------------------------------------------------- */ .oc-fu-activity-change--single { padding: 10px 11px; } .oc-fu-activity-change--single small { display: block; margin-bottom: 4px; color: #77859a; font-size: 8.5px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; } .oc-fu-activity-change--single strong { display: block; color: #263548; font-size: 11px; font-weight: 800; line-height: 1.42; } /* |-------------------------------------------------------------------------- | Nota de la actividad |-------------------------------------------------------------------------- */ .oc-fu-activity-note { display: flex; gap: 9px; margin-top: 11px; padding: 10px 11px; border: 1px solid #dce5ef; border-radius: 10px; background: #f8fafc; } .oc-fu-activity-note > i { margin-top: 1px; color: var(--activity-color); font-size: 15px; } .oc-fu-activity-note div { min-width: 0; } .oc-fu-activity-note small { display: block; margin-bottom: 3px; color: #68778c; font-size: 8.5px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; } .oc-fu-activity-note p { margin: 0; overflow-wrap: anywhere; color: #39495e; font-size: 10.5px; line-height: 1.5; } /* |-------------------------------------------------------------------------- | Pie: agente |-------------------------------------------------------------------------- */ .oc-fu-activity-footer { display: flex; align-items: center; justify-content: flex-end; margin-top: 11px; padding-top: 9px; border-top: 1px solid #edf1f5; } .oc-fu-activity-agent { display: inline-flex; align-items: center; gap: 6px; color: #657489; font-size: 9.5px; font-weight: 700; } .oc-fu-activity-agent i { color: var(--activity-color); font-size: 14px; } /* |-------------------------------------------------------------------------- | Estado vacío |-------------------------------------------------------------------------- */ .oc-fu-activity-empty { display: flex; min-height: 150px; flex-direction: column; align-items: center; justify-content: center; gap: 9px; padding: 24px; border: 1px dashed #d6dee8; border-radius: 14px; color: #7a8799; background: #ffffff; text-align: center; } .oc-fu-activity-empty-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 13px; color: #4f78d6; background: #eaf1ff; font-size: 20px; } .oc-fu-activity-empty strong { color: #536275; font-size: 11px; font-weight: 800; } /* |-------------------------------------------------------------------------- | Tonos por tipo de actividad |-------------------------------------------------------------------------- */ .oc-fu-activity-card--blue { --activity-color: #2563eb; --activity-soft: #eaf1ff; --activity-border: #d8e4ff; } .oc-fu-activity-card--purple { --activity-color: #7c3aed; --activity-soft: #f1eafe; --activity-border: #e3d7fb; } .oc-fu-activity-card--green { --activity-color: #15803d; --activity-soft: #e8f7ed; --activity-border: #d0ead9; } .oc-fu-activity-card--red { --activity-color: #dc2626; --activity-soft: #feeeee; --activity-border: #f5d5d5; } .oc-fu-activity-card--amber { --activity-color: #b45309; --activity-soft: #fff5dc; --activity-border: #f6e2b7; } .oc-fu-activity-card--orange { --activity-color: #c2410c; --activity-soft: #fff0e8; --activity-border: #f6d7c6; } .oc-fu-activity-card--cyan { --activity-color: #0e7490; --activity-soft: #e6f7fb; --activity-border: #cde9ef; } .oc-fu-activity-card--indigo { --activity-color: #4f46e5; --activity-soft: #eeedff; --activity-border: #dbd8ff; } .oc-fu-activity-card--slate { --activity-color: #475569; --activity-soft: #eef2f6; --activity-border: #dbe3ec; } /* |-------------------------------------------------------------------------- | Compatibilidad con el diseño anterior |-------------------------------------------------------------------------- */ .oc-fu-timeline-item { color: #172033; } .oc-fu-timeline-item strong { color: #172033; } .oc-fu-timeline-item p { color: #4f5f73; } .oc-fu-timeline-item small { color: #738197; } /* |-------------------------------------------------------------------------- | Responsive |-------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .oc-fu-activity-card { grid-template-columns: 36px minmax(0, 1fr); gap: 9px; padding: 12px 12px 12px 9px; } .oc-fu-activity-icon { width: 31px; height: 31px; flex-basis: 31px; border-radius: 10px; font-size: 15px; } .oc-fu-activity-head { flex-direction: column; gap: 6px; } .oc-fu-activity-time { white-space: normal; } .oc-fu-activity-compare-grid { grid-template-columns: 1fr; } .oc-fu-activity-arrow { min-height: 26px; border: 0; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; transform: rotate(90deg); } .oc-fu-activity-footer { justify-content: flex-start; } } /* ========================================================================== FOLLOW-UP CONVERSATION — CHAT VISUAL ========================================================================== */ /* |-------------------------------------------------------------------------- | Contenedor general |-------------------------------------------------------------------------- */ #fuConversationPanel { padding: 4px 0 2px; } #fuConversationTimeline { width: 100%; } .oc-fu-chat-thread { display: flex; flex-direction: column; gap: 14px; width: 100%; padding: 2px 0; } /* |-------------------------------------------------------------------------- | Fila de mensaje |-------------------------------------------------------------------------- */ .oc-fu-chat-item { display: flex; align-items: flex-start; gap: 9px; width: 100%; } .oc-fu-chat-item--outbound { flex-direction: row-reverse; } .oc-fu-chat-item--workflow { justify-content: center; } /* |-------------------------------------------------------------------------- | Avatar |-------------------------------------------------------------------------- */ .oc-fu-chat-avatar { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border: 1px solid #dbe4ef; border-radius: 11px; color: #4f6f9f; background: #eef4ff; font-size: 16px; box-shadow: 0 4px 10px rgba(15, 23, 42, 0.04); } .oc-fu-chat-item--outbound .oc-fu-chat-avatar { color: #ffffff; background: #2563eb; border-color: #2563eb; } .oc-fu-chat-item--workflow .oc-fu-chat-avatar { color: #7c3aed; background: #f3edff; border-color: #e4d8fb; } /* |-------------------------------------------------------------------------- | Bloque principal del mensaje |-------------------------------------------------------------------------- */ .oc-fu-chat-message { display: flex; max-width: min(78%, 680px); min-width: 0; flex-direction: column; } .oc-fu-chat-item--outbound .oc-fu-chat-message { align-items: flex-end; } .oc-fu-chat-item--workflow .oc-fu-chat-message { width: min(86%, 760px); max-width: min(86%, 760px); align-items: center; } /* |-------------------------------------------------------------------------- | Meta del remitente |-------------------------------------------------------------------------- */ .oc-fu-chat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0 0 5px 2px; } .oc-fu-chat-item--outbound .oc-fu-chat-meta { justify-content: flex-end; margin-right: 2px; } .oc-fu-chat-item--workflow .oc-fu-chat-meta { justify-content: center; margin-right: 0; margin-left: 0; } .oc-fu-chat-meta strong { color: #1f2d3d; font-size: 10.5px; font-weight: 800; line-height: 1.3; } .oc-fu-chat-origin { display: inline-flex; min-height: 20px; align-items: center; padding: 3px 8px; border: 1px solid #ded2f6; border-radius: 999px; color: #6d28d9; background: #f5f0ff; font-size: 8.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } /* |-------------------------------------------------------------------------- | Burbuja |-------------------------------------------------------------------------- */ .oc-fu-chat-bubble { position: relative; width: fit-content; max-width: 100%; padding: 10px 12px; border: 1px solid #dfe6ef; border-radius: 6px 14px 14px 14px; color: #243447; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 14px rgba(15, 23, 42, 0.035); } .oc-fu-chat-item--outbound .oc-fu-chat-bubble { border-color: #2563eb; border-radius: 14px 6px 14px 14px; color: #ffffff; background: #2563eb; } .oc-fu-chat-item--workflow .oc-fu-chat-bubble { width: 100%; border-color: #e2d7f8; border-radius: 13px; color: #3f3159; background: linear-gradient( 180deg, #faf7ff 0%, #f5f0ff 100% ); box-shadow: none; } .oc-fu-chat-bubble p { margin: 0; overflow-wrap: anywhere; color: inherit; font-size: 11px; line-height: 1.58; white-space: pre-wrap; } /* |-------------------------------------------------------------------------- | Hora |-------------------------------------------------------------------------- */ .oc-fu-chat-time { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; padding: 0 2px; color: #7a8798; font-size: 8.8px; font-weight: 600; line-height: 1.3; } .oc-fu-chat-item--outbound .oc-fu-chat-time { justify-content: flex-end; } .oc-fu-chat-item--workflow .oc-fu-chat-time { justify-content: center; } .oc-fu-chat-time i { font-size: 11px; } /* |-------------------------------------------------------------------------- | Adjuntos |-------------------------------------------------------------------------- */ .oc-fu-chat-attachment { display: flex; align-items: center; gap: 9px; min-width: 220px; } .oc-fu-chat-attachment > span { display: inline-flex; width: 34px; height: 34px; flex: 0 0 34px; align-items: center; justify-content: center; border-radius: 10px; color: #2563eb; background: #eaf1ff; font-size: 16px; } .oc-fu-chat-item--outbound .oc-fu-chat-attachment > span { color: #2563eb; background: #ffffff; } .oc-fu-chat-item--workflow .oc-fu-chat-attachment > span { color: #7c3aed; background: #eee6ff; } .oc-fu-chat-attachment div { min-width: 0; } .oc-fu-chat-attachment small { display: block; margin-bottom: 2px; color: #7b8798; font-size: 8px; font-weight: 800; letter-spacing: 0.035em; text-transform: uppercase; } .oc-fu-chat-item--outbound .oc-fu-chat-attachment small { color: rgba(255, 255, 255, 0.78); } .oc-fu-chat-attachment strong { display: block; overflow: hidden; color: inherit; font-size: 10.5px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } /* |-------------------------------------------------------------------------- | Estado vacío |-------------------------------------------------------------------------- */ .oc-fu-chat-empty { display: flex; min-height: 170px; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 26px; border: 1px dashed #d7e0ea; border-radius: 14px; color: #7a8798; background: #ffffff; text-align: center; } .oc-fu-chat-empty-icon { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 14px; color: #2563eb; background: #eaf1ff; font-size: 20px; } .oc-fu-chat-empty strong { max-width: 340px; color: #536275; font-size: 11px; font-weight: 800; line-height: 1.45; } /* |-------------------------------------------------------------------------- | Fondo del panel de conversación |-------------------------------------------------------------------------- */ #fuConversationPanel .oc-fu-timeline { padding: 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: linear-gradient( 180deg, rgba(248, 250, 252, 0.96), rgba(244, 247, 251, 0.96) ); } /* |-------------------------------------------------------------------------- | Responsive |-------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .oc-fu-chat-thread { gap: 12px; } .oc-fu-chat-avatar { width: 31px; height: 31px; flex-basis: 31px; border-radius: 10px; font-size: 15px; } .oc-fu-chat-message, .oc-fu-chat-item--workflow .oc-fu-chat-message { width: auto; max-width: calc(100% - 40px); } .oc-fu-chat-item--workflow .oc-fu-chat-message { max-width: 100%; } .oc-fu-chat-bubble { padding: 9px 11px; } .oc-fu-chat-bubble p { font-size: 10.5px; } .oc-fu-chat-attachment { min-width: 0; } #fuConversationPanel .oc-fu-timeline { padding: 11px; } } /* ========================================================================== DISPOSITION MODAL — LARGE GRID + DYNAMIC FOLLOW-UP ========================================================================== */ /* |-------------------------------------------------------------------------- | Modal |-------------------------------------------------------------------------- */ #selectDispositionModal .modal-dialog { width: calc(100vw - 48px); max-width: 1500px; height: calc(100vh - 40px); margin: 20px auto; } #selectDispositionModal .modal-content { height: 100%; max-height: 100%; overflow: hidden; } .disposition-modal-content { display: flex; flex-direction: column; border: 0; border-radius: 18px; background: #ffffff; box-shadow: 0 22px 60px rgba(15, 23, 42, 0.22); } .disposition-modal-form { display: flex; flex: 1 1 auto; min-height: 0; flex-direction: column; } /* |-------------------------------------------------------------------------- | Header fijo |-------------------------------------------------------------------------- */ .disposition-modal-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; border-bottom: 1px solid #e5eaf1; background: #ffffff; } .disposition-modal-heading { display: flex; align-items: center; gap: 12px; min-width: 0; } .disposition-modal-heading-icon { display: inline-flex; width: 42px; height: 42px; flex: 0 0 42px; align-items: center; justify-content: center; border-radius: 12px; color: #2563eb; background: #eaf1ff; font-size: 20px; } .disposition-modal-heading h4 { margin: 0; color: #172033; font-size: 18px; font-weight: 800; } .disposition-modal-heading p { margin: 3px 0 0; color: #748198; font-size: 11px; } .disposition-modal-close { display: inline-flex; width: 36px; height: 36px; flex: 0 0 36px; align-items: center; justify-content: center; border: 0; border-radius: 10px; color: #5f6d82; background: transparent; font-size: 20px; cursor: pointer; } .disposition-modal-close:hover, .disposition-modal-close:focus { color: #1f2937; background: #f1f5f9; outline: 0; } /* |-------------------------------------------------------------------------- | Toolbar |-------------------------------------------------------------------------- */ .disposition-toolbar { display: grid; flex: 0 0 auto; grid-template-columns: minmax(300px, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 22px; border-bottom: 1px solid #e8edf4; background: #ffffff; } .disposition-search { position: relative; display: flex; align-items: center; min-width: 0; } .disposition-search > i { position: absolute; left: 13px; z-index: 2; color: #8b98aa; font-size: 17px; } .disposition-search input { width: 100%; height: 40px; padding: 0 42px 0 40px; border: 1px solid #dbe3ed; border-radius: 11px; color: #243247; background: #ffffff; font-size: 11px; outline: none; } .disposition-search input:focus { border-color: #6b8ff2; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.10); } .disposition-search-clear { position: absolute; right: 8px; display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; border: 0; border-radius: 8px; color: #748198; background: transparent; cursor: pointer; } .disposition-search-clear:hover { background: #f1f5f9; } .disposition-filter-group { display: flex; align-items: center; gap: 7px; } .disposition-filter { display: inline-flex; min-height: 36px; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid #dfe6ef; border-radius: 10px; color: #5f6d82; background: #ffffff; font-size: 10px; font-weight: 700; cursor: pointer; } .disposition-filter:hover, .disposition-filter.active { border-color: #bad0ff; color: #2563eb; background: #eef4ff; } .disposition-filter--positive.active { border-color: #cfead9; color: #15803d; background: #ecf9f0; } .disposition-filter--neutral.active { border-color: #d5e1fb; color: #2563eb; background: #eef4ff; } .disposition-filter--negative.active { border-color: #f6d3d3; color: #dc2626; background: #fff0f0; } .disposition-toolbar-count { color: #7c899b; font-size: 10px; font-weight: 700; white-space: nowrap; } /* |-------------------------------------------------------------------------- | Body |-------------------------------------------------------------------------- */ .disposition-modal-body { flex: 1 1 auto; min-height: 0; padding: 16px 22px 22px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; background: #f8fafc; } /* |-------------------------------------------------------------------------- | Grupos |-------------------------------------------------------------------------- */ .disposition-group { margin-bottom: 18px; } .disposition-group:last-child { margin-bottom: 0; } .disposition-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; } .disposition-group-head small { color: #8a96a7; font-size: 9.5px; } .disp-group-pill, .disp-type-badge, .mini-badge { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px; font-size: 9px; font-weight: 800; line-height: 1; } .disp-group-pill { min-height: 28px; padding: 6px 10px; } .disp-type-badge { min-height: 24px; padding: 5px 8px; } .mini-badge { min-height: 22px; padding: 4px 7px; } .disp-badge-positive { color: #15803d; background: #e9f8ee; } .disp-badge-neutral { color: #2563eb; background: #edf3ff; } .disp-badge-negative { color: #dc2626; background: #feeeee; } /* |-------------------------------------------------------------------------- | Cards compactos |-------------------------------------------------------------------------- */ .disposition-card-column { display: flex; } .disposition-card { display: block; width: 100%; height: 100%; margin: 0; cursor: pointer; } .disposition-card input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); opacity: 0; } .disposition-card-inner { position: relative; display: flex; min-height: 122px; height: 100%; flex-direction: column; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid #dfe6ef; border-radius: 13px; background: #ffffff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.025); transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease; } .disposition-card:hover .disposition-card-inner { border-color: #bfcde0; box-shadow: 0 7px 18px rgba(15, 23, 42, 0.06); transform: translateY(-1px); } .disposition-card input:checked + .disposition-card-inner { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.11), 0 8px 20px rgba(37, 99, 235, 0.08); } .disposition-card-top { display: grid; grid-template-columns: 17px 32px minmax(0, 1fr) auto; align-items: start; gap: 8px; min-width: 0; } .disposition-radio-ui { position: relative; width: 17px; height: 17px; margin-top: 2px; border: 2px solid #c8d2e0; border-radius: 50%; background: #ffffff; } .disposition-card input:checked + .disposition-card-inner .disposition-radio-ui { border-color: #2563eb; background: #2563eb; } .disposition-card input:checked + .disposition-card-inner .disposition-radio-ui::after { position: absolute; top: 4px; left: 4px; width: 5px; height: 5px; border-radius: 50%; background: #ffffff; content: ""; } .disposition-card-icon { display: inline-flex; width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 10px; color: #2563eb; background: #eef4ff; font-size: 16px; } .disp-group-positive .disposition-card-icon { color: #15803d; background: #eaf8ef; } .disp-group-negative .disposition-card-icon { color: #dc2626; background: #feeeee; } .disposition-card-copy { min-width: 0; } .disposition-title { display: block; overflow: hidden; color: #172033; font-size: 11.5px; font-weight: 800; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .disposition-desc { display: -webkit-box; margin-top: 4px; overflow: hidden; color: #7a8798; font-size: 9.5px; line-height: 1.42; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .disposition-card-badges { display: flex; flex-wrap: wrap; gap: 6px; padding-left: 57px; } .mini-badge-followup { color: #15803d; background: #eaf8ef; } .mini-badge-notes { color: #7c3aed; background: #f3edff; } .disp-followup-type--appointment { color: #c25a00; background: #fff0df; } .disp-followup-type--call { color: #0f766e; background: #e8f8f5; } .disp-followup-type--task { color: #2563eb; background: #eaf1ff; } /* |-------------------------------------------------------------------------- | Estado vacío de búsqueda |-------------------------------------------------------------------------- */ .disposition-search-empty { display: flex; min-height: 240px; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; } .disposition-search-empty > span { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: 14px; color: #60708a; background: #e9eef5; font-size: 22px; } .disposition-search-empty strong { color: #2f3b4d; font-size: 12px; } .disposition-search-empty p { margin: 0; color: #7b8798; font-size: 10px; } /* |-------------------------------------------------------------------------- | Panel dinámico de follow-up |-------------------------------------------------------------------------- */ .disposition-followup-panel { margin-top: 20px; padding: 16px; border: 1px solid #cfe8d8; border-radius: 14px; background: linear-gradient( 180deg, rgba(244, 252, 247, 0.98), rgba(249, 253, 250, 0.98) ); } .disposition-followup-head { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin-bottom: 14px; } .disposition-followup-icon { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border-radius: 12px; color: #15803d; background: #e3f6e9; font-size: 20px; } .disposition-followup-head small { display: block; color: #15803d; font-size: 8.5px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .disposition-followup-head h5 { margin: 2px 0 0; color: #193725; font-size: 14px; font-weight: 800; } .disposition-followup-head p { margin: 3px 0 0; color: #668273; font-size: 10px; } .disposition-followup-type-badge { display: inline-flex; min-height: 26px; align-items: center; padding: 5px 9px; border-radius: 999px; color: #15803d; background: #e3f6e9; font-size: 9px; font-weight: 800; } .disposition-followup-assignment { margin-top: 14px; } /* |-------------------------------------------------------------------------- | Assignment cards |-------------------------------------------------------------------------- */ .followup-assignment-option { display: block; height: 100%; margin: 0; cursor: pointer; } .followup-assignment-option > input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .followup-assignment-card { display: flex; min-height: 72px; height: 100%; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid #dfe6ef; border-radius: 11px; background: #ffffff; } .followup-assignment-option:hover .followup-assignment-card { border-color: #bfd0e4; } .followup-assignment-option > input:checked + .followup-assignment-card { border-color: #2563eb; background: #f4f7ff; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09); } .followup-assignment-icon { display: inline-flex; width: 31px; height: 31px; flex: 0 0 31px; align-items: center; justify-content: center; border-radius: 9px; color: #2563eb; background: #eaf1ff; font-size: 15px; } .followup-assignment-card strong, .followup-assignment-card small { display: block; } .followup-assignment-card strong { margin-bottom: 2px; color: #2c3748; font-size: 10.5px; } .followup-assignment-card small { color: #7b8798; font-size: 8.5px; line-height: 1.35; } /* |-------------------------------------------------------------------------- | Notas |-------------------------------------------------------------------------- */ .disposition-notes-section { margin-top: 16px; padding: 14px; border: 1px solid #e0e6ee; border-radius: 13px; background: #ffffff; } /* |-------------------------------------------------------------------------- | Footer fijo |-------------------------------------------------------------------------- */ .disposition-modal-footer { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 22px; border-top: 1px solid #e4eaf1; background: #ffffff; } .disposition-footer-summary { display: flex; align-items: center; gap: 9px; min-width: 0; } .disposition-footer-summary-icon { display: inline-flex; width: 32px; height: 32px; flex: 0 0 32px; align-items: center; justify-content: center; border-radius: 9px; color: #2563eb; background: #eaf1ff; font-size: 15px; } .disposition-footer-summary small, .disposition-footer-summary strong { display: block; } .disposition-footer-summary small { color: #8290a2; font-size: 8.5px; } .disposition-footer-summary strong { margin-top: 2px; overflow: hidden; color: #273447; font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; } .disposition-footer-actions { display: flex; align-items: center; gap: 9px; } .disposition-footer-actions .btn { min-width: 120px; } /* |-------------------------------------------------------------------------- | Responsive |-------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { #selectDispositionModal .modal-dialog { width: 100%; height: 100%; margin: 0; } .disposition-modal-content { border-radius: 0; } } @media (max-width: 991.98px) { .disposition-toolbar { grid-template-columns: 1fr; } .disposition-filter-group { overflow-x: auto; padding-bottom: 2px; } .disposition-toolbar-count { display: none; } .disposition-followup-head { grid-template-columns: 40px minmax(0, 1fr); } .disposition-followup-type-badge { display: none; } } @media (max-width: 767.98px) { .disposition-modal-header, .disposition-toolbar, .disposition-modal-body, .disposition-modal-footer { padding-right: 14px; padding-left: 14px; } .disposition-modal-footer { align-items: stretch; flex-direction: column; } .disposition-footer-actions { width: 100%; } .disposition-footer-actions .btn { flex: 1 1 0; min-width: 0; } .disposition-card-inner { min-height: 112px; } } /* ========================================================================== OPENYM CALENDAR — MINI CARDS + OFFCANVAS REMINDER Agregar al CSS del calendario después de los estilos actuales. ========================================================================== */ /* -------------------------------------------------------------------------- | FullCalendar: permitir tarjetas con varias líneas | -------------------------------------------------------------------------- */ .oc-calendar-page .fc-daygrid-event-harness { margin-top: 3px; } .oc-calendar-page .fc-daygrid-event { border: 0; border-radius: 10px; overflow: hidden; white-space: normal; box-shadow: none; } .oc-calendar-page .fc-daygrid-event .fc-event-main { min-width: 0; padding: 0; overflow: hidden; } .oc-calendar-page .fc-daygrid-day-events { margin: 0 6px 6px; } .oc-calendar-page .fc-daygrid-day-frame { min-height: 108px; } /* -------------------------------------------------------------------------- | Mini card | -------------------------------------------------------------------------- */ .oc-calendar-page .oc-fc-event-mini-card { position: relative; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 7px 9px 7px 11px; line-height: 1.2; overflow: hidden; } .oc-calendar-page .oc-fc-event-mini-head { display: flex; align-items: center; gap: 5px; min-width: 0; } .oc-calendar-page .oc-fc-event-time { flex: 0 0 auto; font-size: 10px; font-weight: 800; white-space: nowrap; } .oc-calendar-page .oc-fc-event-type { min-width: 0; font-size: 9px; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-calendar-page .oc-fc-event-reminder { display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; margin-left: auto; font-size: 9px; font-weight: 800; white-space: nowrap; } .oc-calendar-page .oc-fc-event-reminder i { font-size: 11px; } .oc-calendar-page .oc-fc-event-contact { display: block; min-width: 0; margin-top: 1px; font-size: 11px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-calendar-page .oc-fc-event-action { display: block; min-width: 0; font-size: 10px; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .oc-calendar-page .oc-fc-event-priority { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 10px 0 0 10px; } /* Indicadores de prioridad */ .oc-calendar-page .oc-fc-event-priority--low { background: #64748b; } .oc-calendar-page .oc-fc-event-priority--normal { background: #3b82f6; } .oc-calendar-page .oc-fc-event-priority--medium { background: #f59e0b; } .oc-calendar-page .oc-fc-event-priority--high { background: #f97316; } .oc-calendar-page .oc-fc-event-priority--urgent { background: #dc2626; } /* -------------------------------------------------------------------------- | Mes: tarjeta compacta | -------------------------------------------------------------------------- */ .oc-calendar-page .fc-dayGridMonth-view .oc-fc-event-mini-card { min-height: 48px; } .oc-calendar-page .fc-dayGridMonth-view .oc-fc-event-contact, .oc-calendar-page .fc-dayGridMonth-view .oc-fc-event-action { max-width: 100%; } /* En celdas estrechas, ocultar solo el texto de próxima acción. El cliente continúa visible. */ @media (max-width: 1365px) { .oc-calendar-page .fc-dayGridMonth-view .oc-fc-event-action { display: none; } .oc-calendar-page .fc-dayGridMonth-view .oc-fc-event-mini-card { min-height: 36px; } } /* -------------------------------------------------------------------------- | Semana y día: mostrar más contexto | -------------------------------------------------------------------------- */ .oc-calendar-page .fc-timegrid-event .oc-fc-event-mini-card { min-height: 54px; padding: 7px 9px 7px 11px; } .oc-calendar-page .fc-timegrid-event .oc-fc-event-action { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* -------------------------------------------------------------------------- | Offcanvas: asegurar visibilidad de Reminder | -------------------------------------------------------------------------- */ #addEventSidebar #calendarReminderColumn { display: block !important; visibility: visible !important; opacity: 1 !important; } #addEventSidebar #eventReminder { display: block !important; width: 100%; } #addEventSidebar .oc-event-panel-body { overflow-y: auto; } #addEventSidebar .oc-event-section { overflow: visible; } /* Mejor lectura del detalle */ #eventDetailPanel #eventDetailReminder { white-space: normal; word-break: break-word; } /* Offcanvas más cómodo en escritorio */ @media (min-width: 992px) { #addEventSidebar, #eventDetailPanel { width: min(520px, 100vw); } } .oc-fu-pagination { min-height: 42px; padding: 6px 10px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #e8edf4; background: #fff; } .oc-fu-pagination-count { font-size: 11px; font-weight: 500; color: #7c8aa5; white-space: nowrap; } .oc-fu-pagination-modern { display: inline-flex; align-items: center; gap: 5px; } .oc-fu-pagination-btn { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: 8px; background: #2563eb; color: #fff; cursor: pointer; box-shadow: 0 2px 5px rgba(37, 99, 235, .14); transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease; } .oc-fu-pagination-btn i { font-size: 15px; } .oc-fu-pagination-btn:hover:not(:disabled) { background: #1d4ed8; transform: translateY(-1px); box-shadow: 0 3px 7px rgba(37, 99, 235, .20); } .oc-fu-pagination-btn:disabled { background: #dbeafe; color: #8eb5f3; box-shadow: none; cursor: default; } .oc-fu-pagination-indicator { min-width: 46px; height: 28px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: #eff6ff; color: #2563eb; font-size: 11px; font-weight: 700; white-space: nowrap; }