:root { --ink:#172033; --muted:#667289; --line:#e1e5ed; --surface:#fff; --canvas:#f5f7fb; --primary:#5b4bdb; --primary-soft:#eeeafd; --green:#137c5f; --amber:#b8750d; --red:#c83f4b; --fs-8:10px; --fs-9:11px; --fs-10:12px; --fs-11:13px; --fs-12:14px; --fs-13:15px; --fs-15:17px; --fs-17:19px; --fs-18:20px; --fs-20:22px; --fs-22:24px; --fs-24:27px; --fs-42:46px; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); }
:root[data-font-size="large"] { --fs-8:12px; --fs-9:13px; --fs-10:14px; --fs-11:15px; --fs-12:16px; --fs-13:17px; --fs-15:19px; --fs-17:21px; --fs-18:22px; --fs-20:24px; --fs-22:27px; --fs-24:30px; --fs-42:48px; }
:root[data-font-size="xlarge"] { --fs-8:14px; --fs-9:15px; --fs-10:16px; --fs-11:17px; --fs-12:18px; --fs-13:19px; --fs-15:21px; --fs-17:23px; --fs-18:24px; --fs-20:27px; --fs-22:30px; --fs-24:33px; --fs-42:50px; }
* { box-sizing:border-box; }
body { margin:0; background:var(--canvas); display:grid; grid-template-columns:240px minmax(0,1fr); min-height:100vh; line-height:1.4; transition:grid-template-columns .2s ease; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.sidebar { position:fixed; width:240px; height:100vh; background:#11172a; color:white; padding:24px 16px; display:flex; flex-direction:column; z-index:5; }
.brand { display:flex; gap:12px; align-items:center; padding:0 4px 24px; min-width:0; }.brand>div { min-width:0; }.brand #toggleSidebar { margin-left:auto; display:grid; place-items:center; flex:0 0 28px; width:28px; height:28px; border:1px solid #343d56; border-radius:8px; background:#1b2236; color:#dce1ee; font-size:var(--fs-17); }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:12px; background:linear-gradient(135deg,#7767f1,#5b4bdb); font-weight:800; }
.brand strong,.brand small { display:block; }.brand small { color:#99a2bb; margin-top:1px; }
nav { display:flex; flex-direction:column; gap:6px; }.nav-item { border:0; background:transparent; color:#aab1c4; padding:12px; border-radius:10px; display:flex; gap:12px; align-items:center; text-align:left; }.nav-item span { flex:1; }.nav-item b { background:#da4f5b; color:#fff; border-radius:10px; min-width:20px; padding:2px 6px; text-align:center; font-size:var(--fs-11); }.nav-item:hover,.nav-item.active { background:#242c43; color:white; }
.sidebar-tools { margin-top:18px; padding-top:14px; border-top:1px solid #2b3349; }.sidebar-tool-title,.text-size-control>span { display:block; margin-bottom:7px; color:#99a2bb; font-size:var(--fs-10); font-weight:700; }.sidebar .view-switch { display:grid; grid-template-columns:1fr 1fr; border-color:#343d56; background:#171e31; }.sidebar .view-switch button { justify-content:center; color:#aab1c4; }.sidebar .view-switch button.active { color:#fff; background:#343055; box-shadow:none; }.text-size-control { display:block; margin-top:12px; }.text-size-control select { width:100%; border:1px solid #343d56; border-radius:8px; padding:8px; background:#171e31; color:#fff; font-size:var(--fs-11); }
.sidebar-footer { margin-top:auto; display:grid; gap:10px; }.environment { background:#302b1d; color:#edc764; font-size:var(--fs-10); font-weight:800; padding:8px; border-radius:7px; text-align:center; letter-spacing:.08em; }.sidebar-footer button { border:1px solid #333c55; background:#1b2236; color:#cfd4e0; padding:9px; border-radius:8px; }
body.sidebar-collapsed { grid-template-columns:76px minmax(0,1fr); }.sidebar-collapsed .sidebar { width:76px; padding-inline:10px; }.sidebar-collapsed .brand { justify-content:center; padding-inline:0; }.sidebar-collapsed .brand>div,.sidebar-collapsed .brand-mark,.sidebar-collapsed .nav-item span,.sidebar-collapsed .sidebar-tools,.sidebar-collapsed .sidebar-footer { display:none; }.sidebar-collapsed .brand #toggleSidebar { margin:0; transform:rotate(180deg); }.sidebar-collapsed .nav-item { justify-content:center; padding-inline:8px; font-size:var(--fs-17); }.sidebar-collapsed .nav-item b { position:absolute; margin:-25px 0 0 26px; padding:1px 4px; min-width:17px; }
main { grid-column:2; min-width:0; }.topbar { height:88px; background:#fff; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; padding:16px 32px; }.topbar small { color:var(--muted); }.topbar h1 { margin:3px 0 0; font-size:var(--fs-22); }.top-actions { display:flex; align-items:center; gap:9px; color:var(--muted); font-size:var(--fs-13); }.status-dot { width:8px; height:8px; background:var(--green); border-radius:50%; }.avatar { border:0; background:var(--primary-soft); color:var(--primary); width:36px; height:36px; border-radius:50%; font-weight:800; margin-left:12px; }
.view { display:none; padding:28px 32px; }.active-view { display:block; }.date-row { display:flex; justify-content:space-between; align-items:center; margin-bottom:22px; }.date-row h2 { margin:0 0 5px; font-size:var(--fs-20); }.date-row p,.panel p { margin:0; color:var(--muted); font-size:var(--fs-13); }.secondary,.primary { border:1px solid var(--line); border-radius:9px; padding:9px 13px; background:white; color:var(--ink); }.primary { background:var(--primary); color:white; border-color:var(--primary); }
.metrics { display:grid; grid-template-columns:repeat(6,minmax(130px,1fr)); gap:12px; margin-bottom:16px; }.metric { background:#fff; border:1px solid var(--line); border-radius:12px; padding:17px; }.metric span { color:var(--muted); font-size:var(--fs-12); }.metric strong { display:block; font-size:var(--fs-24); margin-top:8px; }.metric small { color:var(--green); font-size:var(--fs-11); }
.dashboard-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:16px; }.panel { background:#fff; border:1px solid var(--line); border-radius:13px; padding:20px; }.panel-head { display:flex; align-items:start; justify-content:space-between; margin-bottom:20px; }.panel h3 { margin:0 0 4px; font-size:var(--fs-15); }.panel-head>span { color:var(--muted); font-size:var(--fs-12); }.wide { grid-column:1/-1; }.bars { height:190px; display:flex; align-items:end; gap:17px; border-bottom:1px solid var(--line); padding:0 10px; }.bar { flex:1; background:linear-gradient(#8174ed,#5b4bdb); border-radius:5px 5px 0 0; min-width:16px; position:relative; }.bar small { position:absolute; bottom:-24px; width:100%; text-align:center; color:var(--muted); font-size:var(--fs-10); }.donut-wrap { display:flex; gap:28px; align-items:center; }.donut { width:140px; height:140px; border-radius:50%; background:conic-gradient(var(--primary) 0 43%,var(--green) 43% 64%,var(--amber) 64% 93%,var(--red) 93%); display:grid; place-items:center; position:relative; }.donut:after { content:""; position:absolute; width:86px; height:86px; background:white; border-radius:50%; }.donut span { z-index:1; font-size:var(--fs-24); font-weight:800; text-align:center; }.donut small { display:block; font-weight:400; font-size:var(--fs-10); color:var(--muted); }.legend { padding:0; margin:0; list-style:none; display:grid; gap:12px; flex:1; }.legend li { display:flex; align-items:center; gap:8px; font-size:var(--fs-12); color:var(--muted); }.legend b { margin-left:auto; color:var(--ink); }.legend i { width:8px; height:8px; border-radius:50%; }.purple{background:var(--primary)}.green{background:var(--green)}.amber{background:var(--amber)}.red{background:var(--red)}
.link-button { border:0; color:var(--primary); background:none; }.recent-row { display:grid; grid-template-columns:1.4fr 1fr 1fr .8fr; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); font-size:var(--fs-13); }.recent-row strong { display:block; }.recent-row small { color:var(--muted); }.tag { width:max-content; padding:4px 8px; border-radius:6px; background:#eef1f6; color:#526078; font-size:var(--fs-11); }.tag.Nuevo { background:#fcebed; color:#b63e49; }.tag.En-atención { background:#ece9fd; color:#5344bc; }.tag.Cita-propuesta { background:#e5f7f1; color:#137a5d; }
.inbox-layout.active-view { display:grid; grid-template-columns:320px minmax(420px,1fr) 320px; padding:0; height:calc(100vh - 88px); }.conversation-list,.contact-card { background:#fff; border-right:1px solid var(--line); overflow:auto; }.contact-card { border-right:0; border-left:1px solid var(--line); padding:20px; }.list-head { padding:18px 16px 10px; }.list-title { display:flex; align-items:center; justify-content:space-between; }.list-head h2 { margin:0 0 12px; font-size:var(--fs-17); }.list-title button { border:0; background:none; color:var(--primary); font-size:var(--fs-11); font-weight:700; }.list-head input,.list-head select { width:100%; background:#f5f7fa; border:1px solid var(--line); border-radius:8px; padding:9px; margin-bottom:7px; color:var(--ink); }.filters { display:flex; gap:5px; padding:0 16px 8px; }.filter-summary { padding:0 16px 10px; font-size:var(--fs-10); color:var(--muted); }.chip { border:1px solid var(--line); border-radius:16px; background:white; padding:5px 9px; font-size:var(--fs-10); color:var(--muted); }.chip.active { background:var(--primary-soft); color:var(--primary); border-color:#d7d1fa; }.conversation-item { padding:14px 16px; border-top:1px solid var(--line); cursor:pointer; position:relative; }.conversation-item:hover,.conversation-item.selected { background:#f4f2ff; }.conversation-item strong { font-size:var(--fs-13); }.conversation-item p { margin:4px 0; color:var(--muted); font-size:var(--fs-11); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.conversation-item time { position:absolute; top:14px; right:14px; color:var(--muted); font-size:var(--fs-10); }.unread { float:right; background:var(--primary); color:#fff; border-radius:10px; padding:2px 6px; font-size:var(--fs-10); }.no-results { color:var(--muted); font-size:var(--fs-12); text-align:center; padding:35px 18px; }
.chat { display:flex; flex-direction:column; min-width:0; background:#f7f8fb; }.chat-head { height:68px; background:#fff; border-bottom:1px solid var(--line); padding:14px 18px; }.chat-head strong { display:block; }.chat-head small { color:var(--muted); }.messages { flex:1; overflow:auto; padding:22px; display:flex; flex-direction:column; gap:10px; }.message { max-width:72%; padding:10px 12px; border-radius:12px; background:white; box-shadow:0 1px 2px #1b243214; font-size:var(--fs-13); }.message.operator { align-self:end; background:#e9e6ff; }.message time { display:block; color:var(--muted); font-size:var(--fs-9); text-align:right; margin-top:5px; }.suggestion { margin:0 18px 10px; border:1px solid #d9d4fc; background:#f3f1ff; border-radius:10px; padding:10px 12px; }.suggestion-head,.suggestion-actions { display:flex; align-items:center; justify-content:space-between; gap:10px; }.suggestion-head>span { background:#e2ddff; color:#5143bd; border-radius:10px; padding:4px 7px; font-size:var(--fs-9); }.suggestion b { color:#5143bd; font-size:var(--fs-11); }.suggestion p { margin:2px 0 0; font-size:var(--fs-10); color:var(--muted); }.suggestion textarea { width:100%; resize:vertical; min-height:64px; margin:9px 0 7px; border:1px solid #d9d4fc; border-radius:7px; background:#fff; padding:8px; color:var(--ink); font-size:var(--fs-11); line-height:1.4; }.suggestion-actions small { color:var(--muted); font-size:var(--fs-9); }.suggestion button { border:0; background:var(--primary); color:white; padding:6px 9px; border-radius:7px; font-size:var(--fs-10); }#composer { display:flex; gap:10px; padding:14px 18px; background:#fff; border-top:1px solid var(--line); }#composer textarea { resize:none; flex:1; border:1px solid var(--line); border-radius:9px; padding:10px; height:48px; }#composer button { border:0; background:var(--primary); color:white; border-radius:9px; padding:0 18px; }.record-head { display:flex; justify-content:space-between; align-items:start; }.record-head span { color:var(--muted); font-size:var(--fs-9); text-transform:uppercase; letter-spacing:.08em; }.record-head h3 { margin:4px 0 3px; }.record-head small { color:var(--muted); }.score { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; color:var(--green); background:#e5f7f1; font-size:var(--fs-13); }.ai-profile { background:#f3f1ff; border:1px solid #ddd8fc; border-radius:10px; padding:12px; margin-top:18px; }.ai-profile span,.ai-profile strong,.ai-profile small { display:block; }.ai-profile span { color:#6758cb; font-size:var(--fs-9); text-transform:uppercase; font-weight:800; }.ai-profile strong { margin:4px 0; font-size:var(--fs-13); }.ai-profile p { margin:0 0 6px; font-size:var(--fs-11); color:#566078; line-height:1.35; }.ai-profile small { color:var(--muted); font-size:var(--fs-8); }.detail { margin-top:16px; }.detail label { display:block; font-size:var(--fs-10); color:var(--muted); margin:11px 0 4px; }.detail strong { font-size:var(--fs-12); }.contact-card select { width:100%; border:1px solid var(--line); padding:8px; border-radius:7px; background:#fff; }.history { border-top:1px solid var(--line); margin-top:18px; padding-top:15px; }.history h4 { margin:0 0 10px; font-size:var(--fs-12); }.history>div:not(.record-tags) { display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:var(--fs-10); }.history span { color:var(--muted); }.history b { text-align:right; }.record-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:8px; }.record-tags i { font-style:normal; background:#eef1f6; color:#647087; border-radius:5px; padding:4px 6px; font-size:var(--fs-9); }.privacy-note { margin-top:15px; padding:8px; border-radius:7px; background:#f6f7f9; color:var(--muted); font-size:var(--fs-9); line-height:1.4; }
.service-row { display:grid; grid-template-columns:120px 1fr 1fr 100px 80px; gap:14px; align-items:center; padding:13px 8px; border-bottom:1px solid var(--line); font-size:var(--fs-13); }.service-row.header { color:var(--muted); font-size:var(--fs-10); text-transform:uppercase; }.service-row button { border:0; background:none; color:var(--primary); }.empty-state { text-align:center; margin:90px auto; max-width:500px; }.empty-state div { font-size:var(--fs-42); color:var(--primary); }.empty-state p { color:var(--muted); }.settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.panel label { display:block; color:var(--muted); font-size:var(--fs-11); margin-top:14px; }.panel label input { display:block; width:100%; border:1px solid var(--line); border-radius:8px; padding:9px; margin-top:5px; }.integration { display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); }.mock { color:var(--amber); font-size:var(--fs-11); }
.potential-leads-view .date-row { margin-bottom:15px; }.lead-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:14px; }.lead-metrics article { padding:14px 16px; border:1px solid var(--line); border-radius:11px; background:#fff; }.lead-metrics span,.lead-metrics strong { display:block; }.lead-metrics span { color:var(--muted); font-size:var(--fs-11); }.lead-metrics strong { margin-top:5px; font-size:var(--fs-22); }.lead-workspace { overflow-x:auto; }.lead-filters { display:grid; grid-template-columns:1.35fr 1.15fr 1fr 1fr auto; gap:10px; align-items:end; }.lead-filters label { margin:0; }.lead-filters input,.lead-filters select { display:block; width:100%; min-height:39px; margin-top:5px; border:1px solid var(--line); border-radius:8px; padding:8px 9px; background:#fff; color:var(--ink); }.lead-filters button { min-height:39px; white-space:nowrap; }.lead-filters button.active { border-color:var(--primary); color:var(--primary); background:var(--primary-soft); }.lead-summary { margin:16px 0 8px; color:var(--muted); font-size:var(--fs-11); }.lead-table { min-width:900px; }.lead-row { display:grid; grid-template-columns:minmax(160px,1.25fr) minmax(190px,1.3fr) minmax(105px,.75fr) minmax(135px,1fr) 135px 112px; gap:12px; align-items:center; min-height:68px; padding:10px 6px; border-top:1px solid var(--line); font-size:var(--fs-11); }.lead-row>div { min-width:0; }.lead-row strong,.lead-row small { display:block; }.lead-row small { margin-top:3px; color:var(--muted); line-height:1.35; }.lead-row time { color:#4f5b70; font-size:var(--fs-10); }.lead-header { min-height:auto; padding-block:8px; color:var(--muted); font-size:var(--fs-9); font-weight:800; letter-spacing:.04em; text-transform:uppercase; }.lead-service>small { display:none; }.lead-service select { width:100%; border:1px solid var(--line); border-radius:8px; padding:8px; background:#fff; color:var(--ink); }.lead-score { display:inline-flex; align-items:center; width:max-content; border-radius:14px; padding:4px 8px; background:#eef1f6; color:#526078; }.lead-score.high { background:#e3f6ee; color:#116f55; }.lead-score.medium { background:#fff3d8; color:#92600e; }.lead-score.low { background:#f1f2f5; color:#657086; }.open-lead-conversation { border:1px solid var(--line); border-radius:8px; padding:7px 9px; background:#fff; color:var(--primary); font-size:var(--fs-10); font-weight:800; }
.admin-tabs { display:flex; gap:4px; margin:-8px 0 18px; border-bottom:1px solid var(--line); }.admin-tab { border:0; background:none; padding:11px 14px; color:var(--muted); border-bottom:2px solid transparent; }.admin-tab.active { color:var(--primary); border-color:var(--primary); font-weight:700; }.admin-section { display:none; }.active-admin-section { display:block; }.notice { display:flex; gap:9px; align-items:center; background:#fff8e5; color:#72581a; border:1px solid #f1dfaa; padding:12px 14px; border-radius:10px; font-size:var(--fs-12); margin-bottom:15px; }.notice span { color:#8b743f; }.integration-grid { display:grid; grid-template-columns:repeat(2,minmax(280px,1fr)); gap:14px; margin-bottom:15px; }.integration-card { background:white; border:1px solid var(--line); border-radius:13px; padding:18px; }.integration-title { display:flex; justify-content:space-between; gap:10px; }.integration-title h3 { margin:0 0 4px; }.integration-card p { color:var(--muted); font-size:var(--fs-12); min-height:32px; }.integration-modules { display:flex; flex-wrap:wrap; gap:5px; margin:14px 0; }.module-pill { padding:4px 7px; border-radius:6px; background:#f0f2f7; color:#5e6980; font-size:var(--fs-10); }.integration-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); padding-top:12px; }.secret-state { font-size:var(--fs-10); color:var(--muted); }.integration-footer button,.test-email { border:1px solid var(--line); background:#fff; border-radius:8px; padding:7px 10px; color:var(--primary); }.status-badge { padding:4px 8px; border-radius:10px; background:#fff3d6; color:#916711; font-size:var(--fs-10); font-weight:800; }.status-badge.healthy { background:#e5f7f1; color:#137a5d; }.secret-row { display:grid; grid-template-columns:1fr 1.4fr 120px; gap:12px; padding:11px 0; border-top:1px solid var(--line); align-items:center; font-size:var(--fs-12); }.secret-row code { color:#4b3db2; }.secret-row span { color:var(--muted); }.secret-row b { color:var(--green); font-size:var(--fs-10); }.recipient { display:grid; grid-template-columns:1fr auto; gap:8px; padding:12px 0; border-bottom:1px solid var(--line); }.recipient strong,.recipient small { display:block; }.recipient small { color:var(--muted); margin-top:2px; }.recipient-tags { display:flex; gap:4px; align-items:center; }.recipient-tags i { font-style:normal; background:#eef1f6; color:#647087; font-size:var(--fs-9); padding:4px 6px; border-radius:6px; }.test-email { margin-top:16px; }.alert-panel { margin-top:15px; }.alert-rule { display:grid; grid-template-columns:1fr 100px 70px; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }.alert-rule strong { display:block; font-size:var(--fs-12); }.alert-rule small { color:var(--muted); }.severity { font-size:var(--fs-9); font-weight:800; text-transform:uppercase; }.severity.critical { color:var(--red); }.severity.warning { color:var(--amber); }.switch { position:relative; width:38px; height:22px; background:#cdd2dd; border-radius:20px; border:0; }.switch.on { background:var(--primary); }.switch:after { content:""; position:absolute; width:16px; height:16px; top:3px; left:3px; background:white; border-radius:50%; transition:.2s; }.switch.on:after { left:19px; }.toast { position:fixed; right:24px; bottom:24px; background:#172033; color:white; border-radius:9px; padding:12px 16px; box-shadow:0 8px 30px #17203333; opacity:0; transform:translateY(12px); pointer-events:none; transition:.25s; font-size:var(--fs-12); z-index:20; }.toast.visible { opacity:1; transform:none; }
.integration-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:7px; }.integration-sync-summary { display:grid; grid-template-columns:1fr auto; gap:3px 10px; margin:12px 0; padding:10px; border-radius:9px; background:#f6f8fb; font-size:var(--fs-11); }.integration-sync-summary span,.integration-sync-summary small { color:var(--muted); }.integration-sync-summary small { grid-column:1 / -1; }.status-badge.warning { background:#fff0eb; color:#a94b2f; }
.business-grid { display:grid; grid-template-columns:repeat(2,minmax(320px,1fr)); gap:15px; }.business-grid .panel>p { margin-bottom:12px; }.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }.full-field { grid-column:1/-1; }.panel label textarea { display:block; width:100%; border:1px solid var(--line); border-radius:8px; padding:9px; margin-top:5px; resize:vertical; }.hours-panel { grid-column:1/-1; }.hours-row { display:grid; grid-template-columns:1fr 110px 18px 110px 70px; gap:10px; align-items:center; padding:8px 0; border-top:1px solid var(--line); font-size:var(--fs-11); }.hours-row input[type="time"] { border:1px solid var(--line); border-radius:7px; padding:7px; }.hours-row>b { color:var(--green); font-size:var(--fs-9); text-align:right; }.day-toggle { display:flex!important; align-items:center; gap:8px; margin:0!important; color:var(--ink)!important; }.day-toggle input { width:auto!important; margin:0!important; }.message-preview { margin-top:14px; background:#f3f1ff; border:1px solid #ddd8fc; border-radius:9px; padding:11px; }.message-preview small { color:#6758cb; font-weight:800; }.message-preview p { margin:6px 0 0!important; color:var(--ink); line-height:1.45; }.team-member { display:flex; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); }.member-avatar { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--primary-soft); color:var(--primary); font-size:var(--fs-10); font-weight:800; }.team-member div { flex:1; }.team-member strong,.team-member small { display:block; }.team-member small { color:var(--muted); margin-top:2px; }.team-member button { border:0; background:none; color:var(--primary); }.add-member { margin-top:13px; }
.whapi-setup { margin-bottom:15px; }.whapi-config { display:grid; grid-template-columns:1.4fr 1fr; gap:0 14px; }.copy-field { display:flex; gap:6px; margin-top:5px; }.copy-field input { margin:0!important; }.copy-field button { border:1px solid var(--line); background:#fff; color:var(--primary); border-radius:7px; padding:0 10px; }.webhook-safety { display:flex; flex-wrap:wrap; gap:7px; margin-top:15px; }.webhook-safety span { background:#e5f7f1; color:#137a5d; border-radius:6px; padding:5px 8px; font-size:var(--fs-9); }.local-warning { color:#956a13!important; background:#fff7df; border-radius:7px; padding:8px; margin-top:12px!important; }
.whapi-consolidation { margin-bottom:15px; }.consolidation-totals { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:16px 0; }.consolidation-totals>div { padding:13px; border:1px solid var(--line); border-radius:10px; background:#f8f9fc; }.consolidation-totals span,.consolidation-totals strong { display:block; }.consolidation-totals span { color:var(--muted); font-size:var(--fs-9); text-transform:uppercase; font-weight:800; letter-spacing:.03em; }.consolidation-totals strong { margin-top:6px; font-size:var(--fs-17); }.consolidation-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }.sync-mode { display:flex; flex-direction:column; min-width:0; margin:0; padding:15px; border:1px solid var(--line); border-radius:11px; background:#fff; }.sync-mode h4 { margin:0; font-size:var(--fs-13); }.sync-mode p { min-height:34px; margin:6px 0 13px; color:var(--muted); font-size:var(--fs-10); line-height:1.45; }.mode-icon { float:left; display:grid; place-items:center; width:28px; height:28px; margin-right:8px; border-radius:8px; color:var(--primary); background:var(--primary-soft); font-weight:900; }.sync-mode>button,.historical-actions button { align-self:flex-start; border-radius:8px; padding:8px 11px; }.sync-mode>small { margin-top:9px; color:var(--muted); font-size:var(--fs-9); line-height:1.4; }.historical-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; }.historical-fields label { margin:0; }.historical-fields input { margin-top:4px!important; padding:7px!important; }.historical-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }.historical-actions button[hidden] { display:none; }.consolidation-safety { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:12px; padding:11px 13px; border-radius:9px; background:#eef7f4; color:#276b58; }.consolidation-safety div { flex:1; }.consolidation-safety b,.consolidation-safety span { display:block; }.consolidation-safety b { font-size:var(--fs-10); }.consolidation-safety span { margin-top:3px; font-size:var(--fs-9); }.consolidation-safety p { max-width:46%; min-height:0; margin:0; color:#4b7569; font-size:var(--fs-9); line-height:1.4; }.sync-feedback { margin-top:10px; padding:9px 11px; border-left:3px solid var(--primary); background:#f5f4ff; color:#5143a6; font-size:var(--fs-10); }.sync-feedback.warning { border-color:var(--amber); background:#fff8e5; color:#835f15; }.sync-history { margin-top:18px; }.sync-history .panel-head { margin-bottom:4px; }.sync-history h4 { margin:0; }.sync-run { display:grid; grid-template-columns:130px 1fr auto; gap:9px 14px; align-items:center; padding:11px 4px; border-top:1px solid var(--line); font-size:var(--fs-10); }.sync-run>div strong,.sync-run>div small { display:block; }.sync-run>div small { margin-top:3px; color:var(--muted); }.sync-run-stats { color:#4f5c72; }.run-status { justify-self:end; padding:4px 7px; border-radius:9px; background:#e7f6f0; color:#16755a; font-size:var(--fs-8); font-weight:900; text-transform:uppercase; }.run-status.degraded,.run-status.failed { background:#fff0e9; color:#a24f31; }.run-status.running { background:#eeeaff; color:#5749b8; }.whapi-consolidation button:disabled { cursor:wait; opacity:.58; }
.login-screen { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:linear-gradient(135deg,#11172af5,#2c2858f2); padding:20px; }.login-screen.hidden { display:none; }.login-card { width:min(460px,100%); background:#fff; border-radius:18px; padding:30px; box-shadow:0 28px 80px #090d1c66; }.login-card>.brand-mark { margin-bottom:18px; color:#fff; }.login-card h2 { margin:3px 0 5px; }.login-card p { color:var(--muted); font-size:var(--fs-12); margin:0 0 18px; }.login-card label { display:block; color:var(--muted); font-size:var(--fs-11); margin-top:13px; }.login-card label input { display:block; width:100%; padding:11px; border:1px solid var(--line); border-radius:8px; margin-top:5px; }.login-card>button { width:100%; border:0; background:var(--primary); color:#fff; border-radius:9px; padding:11px; margin-top:15px; font-weight:700; }.login-card .login-error { color:var(--red); min-height:15px; margin:8px 0 0; }.demo-credentials { display:grid; gap:3px; margin-top:18px; padding:10px; background:#f5f7fb; border-radius:8px; font-size:var(--fs-10); color:var(--muted); }.demo-credentials b { color:var(--ink); }
.password-field { display:flex; align-items:stretch; gap:7px; margin-top:5px; }.password-field input { flex:1; min-width:0; margin-top:0!important; }.password-toggle { flex:0 0 auto; border:1px solid var(--line); border-radius:8px; padding:0 11px; background:#fff; color:var(--primary); font-size:var(--fs-10); font-weight:800; }.password-toggle[aria-pressed="true"] { background:var(--primary-soft); }
.users-grid [hidden] { display:none!important; }.users-grid form label select { display:block; width:100%; border:1px solid var(--line); border-radius:8px; padding:9px; margin-top:5px; background:#fff; }.users-grid form>small { display:block; color:var(--muted); margin:8px 0 14px; }.user-form-actions { display:flex; gap:8px; }.user-form-actions .primary { flex:1; }.user-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:5px 10px; align-items:center; padding:12px 0; border-top:1px solid var(--line); }.user-row strong,.user-row small { display:block; }.user-row small { color:var(--muted); font-size:var(--fs-10); }.user-row>small { grid-column:1/-1; }.user-row .edit-user { border:1px solid var(--line); border-radius:7px; padding:6px 9px; background:#fff; color:var(--primary); font-size:var(--fs-10); font-weight:700; }.user-state { width:max-content; font-size:var(--fs-9); color:var(--green); }.user-state.inactive { color:var(--red); }
.suggestion-meta { display:flex; align-items:center; gap:6px; flex:0 0 auto; }.suggestion-meta>span { background:#e2ddff; color:#5143bd; border-radius:10px; padding:4px 7px; font-size:var(--fs-9); }.suggestion .suggestion-meta>button { display:grid; place-items:center; width:24px; height:24px; padding:0; border:1px solid #d9d4fc; border-radius:50%; background:#fff; color:#6758cb; font-size:var(--fs-15); line-height:1; }.suggestion .suggestion-meta>button:hover { background:#e9e5ff; }
.assistant-restore { display:none; align-self:center; margin:0 18px 10px; border:1px solid #d9d4fc; border-radius:8px; padding:7px 11px; background:#f3f1ff; color:#5143bd; font-size:var(--fs-10); font-weight:700; }
#inbox.assistant-hidden .suggestion { display:none!important; } #inbox.assistant-hidden .assistant-restore { display:flex; }
#inbox.no-conversation .suggestion,#inbox.no-conversation .assistant-restore,#inbox.no-conversation #composer,#inbox.no-conversation .profile-action { display:none!important; }
.topbar-title { min-width:0; }.pending-status { display:none; align-items:center; gap:7px; min-height:24px; margin-top:4px; color:#9a5a08; font-size:var(--fs-10); }.inbox-open .pending-status { display:flex; }.pending-status-icon { display:grid; place-items:center; width:17px; height:17px; border-radius:50%; background:#fff0d8; color:#a85e00; font-size:var(--fs-10); font-weight:900; }.pending-status button { border:0; border-radius:7px; padding:4px 7px; background:#fff3df; color:#985b0c; font-size:var(--fs-9); font-weight:800; }.pending-status.filtering button { color:#fff; background:#d98216; }.pending-status.clear { color:var(--green); }.pending-status.clear .pending-status-icon { background:#e5f7f1; color:var(--green); }.pending-status button:disabled { opacity:.55; cursor:default; }
.date-filter { display:grid; grid-template-columns:30px minmax(0,1fr) 30px auto; gap:5px; align-items:end; margin-top:2px; }.date-filter label { margin:0; min-width:0; }.date-filter label span { display:block; margin:0 0 3px; color:var(--muted); font-size:var(--fs-9); font-weight:700; }.date-filter input { height:31px; margin:0!important; padding:5px 7px!important; background:#fff!important; }.date-filter button { height:31px; border:1px solid var(--line); border-radius:7px; background:#fff; color:var(--primary); padding:0 8px; font-size:var(--fs-11); font-weight:700; }.date-filter button.active { color:#fff; background:var(--primary); border-color:var(--primary); }.date-filter button:disabled { opacity:.4; cursor:default; }
.conversation-item.needs-reply:not(.selected) { background:#fffaf1; }.conversation-item time { display:grid; gap:1px; text-align:right; }.conversation-item time b { color:#47536a; font-size:var(--fs-9); font-weight:700; }.conversation-item time span { color:var(--muted); font-size:var(--fs-9); }.conversation-alerts { position:absolute; right:14px; bottom:12px; display:flex; align-items:center; gap:5px; }.conversation-alerts i { display:grid; place-items:center; min-width:18px; height:18px; border-radius:50%; padding:0 5px; font-style:normal; font-size:var(--fs-9); font-weight:900; }.pending-reply { color:#9a5700; background:#ffe4b8; box-shadow:0 0 0 2px #fff7e9; }.conversation-alerts .unread { float:none; color:#fff; background:var(--primary); }.chat-pending { color:#a75d00; }.message-day { align-self:stretch; display:flex; align-items:center; gap:9px; color:var(--muted); font-size:var(--fs-9); font-weight:700; }.message-day:before,.message-day:after { content:""; flex:1; height:1px; background:#dfe3eb; }.message-day span { padding:3px 7px; border-radius:9px; background:#edf0f5; }

/* Bandeja estable: cada panel gestiona su propio desplazamiento. */
body.inbox-open { height:100dvh; overflow:hidden; }
body.inbox-open .topbar { height:104px; }
.inbox-layout.active-view { display:grid; grid-template-columns:310px minmax(0,1fr) 310px; grid-template-rows:minmax(0,1fr); padding:0; height:calc(100dvh - 104px); min-height:0; overflow:hidden; position:relative; }
.inbox-layout.active-view.profile-closed { grid-template-columns:310px minmax(0,1fr); }
.inbox-layout.profile-closed .contact-card { display:none; }
.view-switch { display:flex; flex:0 0 auto; padding:3px; border:1px solid var(--line); border-radius:9px; background:#f5f7fa; }
.view-switch button { display:flex; align-items:center; gap:5px; border:0; border-radius:6px; padding:6px 9px; background:transparent; color:var(--muted); font-size:var(--fs-10); }.view-switch button.active { color:var(--primary); background:#fff; box-shadow:0 1px 4px #17203318; }
.conversation-list,.chat,.contact-card { grid-row:1; height:100%; min-height:0; }
.conversation-list { display:flex; flex-direction:column; overflow:hidden; }
#conversationItems { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.conversation-item { display:block; width:100%; border:0; border-top:1px solid var(--line); text-align:left; background:#fff; appearance:none; }
.conversation-item:focus-visible { position:relative; z-index:1; outline:2px solid var(--primary); outline-offset:-2px; }
.conversation-item.selected { box-shadow:inset 3px 0 var(--primary); }
.chat { min-height:0; overflow:hidden; }
.chat-head { display:flex; align-items:center; gap:10px; flex:0 0 68px; height:auto; min-width:0; }
#chatHead { flex:1; min-width:0; outline:none; } #chatHead strong,#chatHead small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.messages { min-height:0; overscroll-behavior:contain; scrollbar-gutter:stable; }
.profile-action,.icon-action { border:1px solid var(--line); border-radius:8px; background:#fff; color:var(--primary); padding:7px 9px; font-size:var(--fs-10); font-weight:700; }
.back-action { display:none; }.profile-action,.contact-toolbar { display:flex; }
.contact-card { overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.contact-toolbar { position:sticky; top:-20px; z-index:2; align-items:center; justify-content:space-between; margin:-20px -20px 16px; padding:13px 16px; background:#fff; border-bottom:1px solid var(--line); }

/* La vista móvil también funciona como previsualización dentro del escritorio. */
.inbox-layout.mode-mobile { grid-template-columns:minmax(0,440px); width:min(440px,100%); margin:0 auto; border-inline:1px solid var(--line); box-shadow:0 12px 36px #17203318; }
.inbox-layout.mode-mobile .conversation-list,.inbox-layout.mode-mobile .chat,.inbox-layout.mode-mobile .contact-card { grid-column:1; }
.inbox-layout.mode-mobile .conversation-list { display:flex; }
.inbox-layout.mode-mobile .chat,.inbox-layout.mode-mobile .contact-card { display:none; }
.inbox-layout.mode-mobile.conversation-open .conversation-list { display:none; }
.inbox-layout.mode-mobile.conversation-open .chat { display:flex; }
.inbox-layout.mode-mobile.profile-open .chat { display:none; }
.inbox-layout.mode-mobile.profile-open .contact-card { display:block; position:static; width:auto; height:100%; box-shadow:none; }
.inbox-layout.mode-mobile .back-action,.inbox-layout.mode-mobile .profile-action,.inbox-layout.mode-mobile .contact-toolbar { display:flex; }
.inbox-layout.mode-mobile .inbox-toolbar>div:first-child small { display:none; }

@media(max-width:1200px){
  .metrics{grid-template-columns:repeat(3,1fr)}
  .lead-filters{grid-template-columns:repeat(3,1fr)}.lead-filters button{align-self:end}.lead-metrics{grid-template-columns:repeat(2,1fr)}
  .inbox-layout.active-view:not(.mode-mobile){grid-template-columns:290px minmax(0,1fr)}
  .inbox-layout:not(.mode-mobile) .contact-card{display:none}
  .inbox-layout:not(.mode-mobile) .profile-action{display:flex}
  .inbox-layout:not(.mode-mobile).profile-open .contact-card{display:block;position:absolute;top:0;right:0;bottom:0;width:min(360px,100%);height:auto;z-index:8;box-shadow:-18px 0 40px #17203324}
  .inbox-layout:not(.mode-mobile).profile-open .contact-toolbar{display:flex}
  .business-grid{grid-template-columns:1fr}
}

@media(max-width:760px){
  body{display:block;min-height:100dvh;padding-bottom:64px}
  body.sidebar-collapsed{display:block}.sidebar-collapsed .sidebar{width:100%;padding:6px 8px}.sidebar-collapsed .nav-item span{display:block}.sidebar-collapsed .nav-item{font-size:var(--fs-15)}.sidebar-collapsed .nav-item b{position:absolute;margin:-27px 0 0 28px}.sidebar-collapsed .sidebar-tools{display:none}
  body.inbox-open{height:100dvh;padding-bottom:64px}
  .sidebar{position:fixed;inset:auto 0 0;width:100%;height:64px;padding:6px 8px;z-index:30}
  .brand,.sidebar-footer{display:none}
  .sidebar nav{height:100%;display:flex;overflow-x:auto;flex-direction:row;gap:3px}
  .nav-item{min-width:62px;flex:1;flex-direction:column;justify-content:center;gap:2px;padding:5px 8px;font-size:var(--fs-15)}
  .nav-item span{display:block;flex:0;font-size:var(--fs-8)}.nav-item b{position:absolute;margin:-27px 0 0 28px;font-size:var(--fs-8);min-width:16px;padding:1px 4px}
  main{display:block}
  .topbar{height:68px;padding:10px 16px}.inbox-open .topbar{height:86px}.topbar h1{font-size:var(--fs-18)}.inbox-open .topbar-title>small{display:none}.pending-status{max-width:calc(100vw - 78px);flex-wrap:wrap;gap:4px 6px}.pending-status strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-actions #integrationStatus,.top-actions .status-dot{display:none}.avatar{margin-left:0}
  .view{padding-left:16px;padding-right:16px}
  .metrics{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}
  .potential-leads-view .date-row{align-items:stretch;flex-direction:column;gap:12px}.potential-leads-view .date-row button{width:100%;white-space:nowrap}.lead-metrics{grid-template-columns:repeat(2,1fr);gap:8px}.lead-metrics article{padding:11px}.lead-filters{grid-template-columns:1fr}.lead-workspace{overflow:visible}.lead-table{min-width:0}.lead-header{display:none}.lead-row{grid-template-columns:1fr auto;gap:10px; margin-top:10px;padding:14px;border:1px solid var(--line);border-radius:10px}.lead-row .lead-contact{grid-column:1}.lead-row .lead-service{grid-column:1/-1}.lead-service>small{display:block;margin-bottom:4px}.lead-row time{grid-column:1}.lead-row .open-lead-conversation{grid-column:2;grid-row:1}.lead-row>div:nth-child(3),.lead-row>div:nth-child(4){grid-column:auto}.lead-summary{margin-top:14px}
  .inbox-layout.active-view,.inbox-layout.active-view.mode-mobile{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr);width:100%;height:calc(100dvh - 86px - 64px);margin:0;border:0;box-shadow:none}
  .inbox-layout .inbox-toolbar,.inbox-layout .conversation-list,.inbox-layout .chat,.inbox-layout .contact-card{grid-column:1}
  .inbox-layout .conversation-list{display:flex}
  .inbox-layout .chat,.inbox-layout .contact-card{display:none}
  .inbox-layout.conversation-open .conversation-list{display:none}
  .inbox-layout.conversation-open .chat{display:flex}
  .inbox-layout.profile-open .chat{display:none}
  .inbox-layout.profile-open .contact-card{display:block;position:static;width:auto;height:100%;box-shadow:none}
  .inbox-layout .back-action,.inbox-layout .profile-action,.inbox-layout .contact-toolbar{display:flex}
  .sidebar-tools{display:none}.view-switch button{padding:5px 7px}.view-switch button span{display:none}
  .messages{padding:16px}.message{max-width:86%}
  .suggestion{margin-inline:10px}.suggestion-actions{align-items:flex-start;flex-wrap:wrap}.suggestion-actions small{width:100%}
  #composer{padding:10px}#composer button{padding:0 14px}
  .field-grid{grid-template-columns:1fr}.full-field{grid-column:auto}.hours-row{grid-template-columns:1fr 90px 12px 90px}.hours-row>b{display:none}
  .integration-grid,.consolidation-grid,.consolidation-totals{grid-template-columns:1fr}.consolidation-safety{display:block}.consolidation-safety p{max-width:none;margin-top:8px}.sync-run{grid-template-columns:1fr auto}.sync-run-stats{grid-column:1/-1}.notice{align-items:flex-start;flex-direction:column}.integration-footer{align-items:flex-start;flex-direction:column;gap:10px}.integration-actions{justify-content:flex-start}
}