/* LatinDispute CRM — mismo lenguaje visual que la app (Lato, azul de marca, menú azul oscuro, campos con el título adentro).
   Las fuentes y el logo se sirven desde ../public (compartidos con la app). */

/* Sitios: administración y editor de páginas de captación. */
.funnel-library .funnel-library-preview>div{transform:scale(.32)}@media(max-width:900px){.modal .funnel-library{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.modal .funnel-library{grid-template-columns:1fr}}
.modal.wide:has(.funnel-create-options),.modal.wide:has(.funnel-template-detail){width:min(900px,calc(100vw - 40px));max-width:900px}.modal.wide:has(.funnel-library){width:min(1100px,calc(100vw - 40px));max-width:1100px}.funnel-library-preview{container-type:inline-size}.funnel-library-preview>div{transform:scale(.32)}@media(max-width:900px){.funnel-library{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.funnel-library{grid-template-columns:1fr}}
.site-step-card #site-step-thumbnail{height:340px}.site-step-card #site-step-thumbnail>.capture-site{width:200%;transform:scale(.5)}
.funnel-create-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:14px 0}.funnel-create-option{border:1px solid var(--line);border-radius:12px;padding:20px 16px;display:grid;gap:12px;cursor:pointer;position:relative}.funnel-create-option:has(input:checked){border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);background:var(--info-bg)}.funnel-create-option input{position:absolute;right:12px;top:12px;accent-color:var(--brand)}.funnel-choice-art{height:100px;display:grid;place-items:center;background:#edf3ff;border-radius:8px;font-size:42px;color:var(--brand)}.funnel-create-option small{font-size:12px;line-height:1.6;color:var(--muted)}.funnel-create-option b{font-size:15px}.funnel-library{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.funnel-library-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;padding-bottom:18px;min-width:0}.funnel-library-preview{display:block;position:relative;width:100%;height:180px;overflow:hidden;border:0;background:#edf1f6;cursor:pointer}.funnel-library-preview>div{width:1000px;transform:scale(.26);transform-origin:top left;pointer-events:none}.funnel-library-card h3,.funnel-library-card p{margin:14px 16px}.funnel-library-card h3{font-size:14px}.funnel-library-card p{font-size:11px;line-height:1.6;color:var(--muted);min-height:50px}.funnel-library-card>.btn{margin:0 16px}.funnel-library-card[hidden]{display:none}.funnel-template-live{height:330px;overflow:hidden;border:1px solid var(--line);border-radius:10px;margin:10px 0 18px}.funnel-template-live>.capture-site{width:150%;transform:scale(.6667);transform-origin:top left;pointer-events:none;min-height:0}.funnel-template-detail p,.funnel-template-detail>b{font-size:12px}.funnel-project-tabs a{font-size:13px;font-weight:700;padding:14px 18px;border-bottom:3px solid transparent;color:var(--muted);text-decoration:none;white-space:nowrap}.funnel-project-tabs a.active{color:var(--brand);border-color:var(--brand)}.funnel-overview-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);padding-bottom:14px;font-size:12px;margin-bottom:18px}.funnel-overview-tabs b{color:var(--brand)}.funnel-address{display:flex;gap:12px;align-items:center;padding:12px 15px;border:1px solid var(--line);border-radius:6px;background:var(--bg);font-size:11px;margin-bottom:18px;overflow-wrap:anywhere}.funnel-address>span{flex:1;min-width:0}.funnel-settings-panel{max-width:1000px;background:var(--card);border:1px solid var(--line);padding:28px;border-radius:10px}.funnel-settings-panel fieldset{border:0;padding:0;min-width:0}.funnel-settings-panel h2{font-size:19px;margin-bottom:28px}.funnel-settings-panel h3{font-size:14px;margin:28px 0 18px}.funnel-settings-panel details{margin:28px 0;padding-top:18px;border-top:1px solid var(--line)}.funnel-settings-panel summary{font-weight:700;font-size:13px;cursor:pointer;margin-bottom:24px}.funnel-settings-panel .site-header-fields{max-width:600px}.funnel-settings-panel .field{margin-bottom:24px}.funnel-integration-note{padding:14px 18px;background:#fff6df;color:#76591d;font-size:12px;line-height:1.7;border:1px solid #ecd899;border-radius:7px;margin-top:26px}.funnel-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:22px 0}.funnel-metrics article{border:1px solid var(--line);padding:24px;border-radius:10px;display:grid;gap:10px}.funnel-metrics span{font-size:12px;color:var(--muted)}.funnel-metrics strong{font-size:30px;color:var(--brand)}@media(max-width:700px){.funnel-create-options,.funnel-library{grid-template-columns:1fr}.funnel-metrics{gap:8px}.funnel-metrics article{padding:14px}.funnel-settings-panel{padding:20px}.funnel-overview-tabs{gap:14px;flex-wrap:wrap}}
.site-editor{grid-template-columns:minmax(0,1fr) 310px!important}.site-editor-controls{border-radius:0!important}.site-inspector-title{padding:18px 0 12px;display:grid;gap:6px}.site-inspector-title b{font-size:14px}.site-inspector-title span{font-size:10px;color:var(--muted)}.site-inspector-tabs{display:flex;gap:5px;padding-bottom:14px;border-bottom:1px solid var(--line)}.site-editor-controls [hidden]{display:none!important}.site-editor-controls summary{list-style:none}.site-style-fields{padding-top:12px}.site-check{display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:18px}.site-logo-upload{display:inline-block;position:relative;overflow:hidden}.site-logo-upload input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}.site-preview-viewport [data-capture-block],.site-preview-viewport [data-capture-header]{cursor:pointer;outline-offset:-2px;position:relative}.site-preview-viewport [data-capture-block]:hover,.site-preview-viewport [data-capture-header]:hover{outline:2px dashed #f59b35}.site-preview-viewport .capture-selected{outline:2px solid #f59b35}.site-preview-viewport .capture-selected:after{content:'Seleccionado';position:absolute;right:0;top:0;background:#f59b35;color:#fff;padding:3px 8px;font:700 10px Arial;z-index:4}.site-steps-layout{display:grid;grid-template-columns:270px minmax(0,1fr);border:1px solid var(--line);background:var(--card);min-height:600px}.site-steps-list{padding:22px 16px;border-right:1px solid var(--line)}.site-steps-list h2,.site-step-overview h2{font-size:16px;margin:0 0 24px}.site-steps-list>div{display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;padding:10px 8px;gap:4px}.site-steps-list>div.active{border-color:var(--brand);background:var(--info-bg)}.site-steps-list .link{flex:1;text-align:left;font-weight:700;font-size:12px}.site-steps-list small{margin-right:10px;color:var(--muted)}.site-steps-list .icon-btn{width:24px}.site-steps-list>.btn{width:100%;margin-top:12px;font-size:12px}.site-step-overview{padding:28px;min-width:0}.site-step-overview>.muted{font-size:12px}.site-step-subtitle{padding-bottom:12px;border-bottom:2px solid var(--brand);font-weight:700;font-size:12px;width:max-content}.site-step-card{max-width:750px;border:1px solid var(--line);border-radius:8px;overflow:hidden;margin:24px 0}.site-step-card-label{padding:12px 18px;font-size:11px;background:var(--bg);font-weight:700}#site-step-thumbnail{height:320px;overflow:hidden;position:relative;pointer-events:none}#site-step-thumbnail>.capture-site{width:150%;transform:scale(.6667);transform-origin:top left}.site-step-actions{display:flex;align-items:center;gap:10px;padding:16px;flex-wrap:wrap}.site-step-actions>.muted{font-size:11px;margin-left:auto}@media(max-width:1000px){.site-editor{grid-template-columns:minmax(0,1fr) 280px!important}.site-steps-layout{grid-template-columns:220px minmax(0,1fr)}}@media(max-width:760px){.site-editor,.site-steps-layout{grid-template-columns:1fr!important}.site-editor-controls{max-height:none!important}.site-steps-list{border-right:0;border-bottom:1px solid var(--line)}.site-step-overview{padding:18px}}
.sites-tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:0;margin-bottom:24px;flex-shrink:0}
.sites-tabs button{font:inherit;font-size:13px;font-weight:700;white-space:nowrap;cursor:pointer;background:none;color:var(--muted);padding:14px 12px;border:0;border-bottom:3px solid transparent}
.sites-tabs button.active{color:var(--brand);border-bottom-color:var(--brand)}
.sites-section-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin:8px 0 24px;flex-wrap:wrap}.sites-section-head h2{margin:0 0 4px}.sites-section-head p{margin:0;font-size:12px}
.sites-list-panel{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px}
.sites-list-toolbar{display:flex;align-items:center;gap:12px;justify-content:flex-end;margin:0 0 20px}.sites-list-toolbar .field{width:280px;margin:0}.sites-table td{height:66px}.sites-row-actions{display:flex;gap:5px;justify-content:flex-end}
.sites-empty{text-align:center;padding:65px 20px;color:var(--muted)}.sites-empty>.ic{width:40px;height:40px;opacity:.4}.sites-empty h3{color:var(--text);font-size:19px;margin-top:12px}.sites-empty p{font-size:12px}
.sites-pagination{display:flex;align-items:center;justify-content:flex-end;gap:15px;padding:20px 4px 0;font-size:12px}.sites-pagination>span{margin-right:auto;color:var(--muted)}
.site-template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.site-template-card{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--card)}.site-template-preview{position:relative;min-height:230px;background:#eff5ff;color:#172d4a;padding:28px;overflow:hidden}.site-template-preview>span{font-size:9px;letter-spacing:1.5px;font-weight:700;color:#557aa9}.site-template-preview>b{display:block;font-size:26px;line-height:1.2;margin:20px 0;max-width:200px;position:relative;z-index:1}.site-template-preview>i{display:block;width:100px;height:25px;background:#0361f4;border-radius:4px}.site-template-preview>div{display:flex;gap:8px;position:absolute;bottom:-18px;right:20px;width:70%}.site-template-preview em{display:block;flex:1;height:70px;background:#fff9;border:1px solid #fff;border-radius:7px;box-shadow:0 10px 20px #1226440a}.site-template-preview.theme-navy{background:#0c2340;color:white}.site-template-preview.theme-navy>span{color:#8bbcff}.site-template-preview.theme-warm{background:#faf0de}.site-template-copy{padding:20px}.site-template-copy h3{margin:0 0 10px;font-size:16px}.site-template-copy p{font-size:12px;min-height:45px;color:var(--muted);margin:0 0 20px}
.site-editor-heading{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:18px}.site-editor-heading h1{font-size:20px;margin:0}.site-editor-heading p{font-size:11px;margin:2px 0 0}.site-editor-heading .btn{font-size:12px}
.site-editor{display:grid;grid-template-columns:310px minmax(0,1fr);gap:16px;align-items:start}.site-editor-controls{border:1px solid var(--line);border-radius:10px;background:var(--card);overflow-y:auto;max-height:calc(100dvh - 180px);padding:0 14px 18px}.site-editor-controls fieldset{border:0;padding:0;margin:0;min-width:0}.site-editor-controls details,.site-editor-controls section{padding:15px 0;border-bottom:1px solid var(--line)}.site-editor-controls summary{font-size:12px;font-weight:700;cursor:pointer;margin-bottom:20px}.site-editor-controls h2{font-size:12px;margin-bottom:12px}.site-editor-controls .field{margin-bottom:20px}.site-editor-controls .field input,.site-editor-controls .field select,.site-editor-controls .field textarea{font-size:12px;padding:12px 10px}.site-editor-controls .field label{font-size:11px}.site-editor-controls .field-row{grid-template-columns:1fr 1fr;gap:8px}.site-editor-controls .btn{font-size:11px;padding:7px 10px}.site-color{display:flex;align-items:center;justify-content:space-between;font-size:12px;margin-bottom:22px}.site-color input{width:45px;height:32px;padding:2px;border:1px solid var(--line);border-radius:6px;background:var(--card)}
.site-editor-pages,.site-block-list{display:grid;gap:5px;margin-bottom:12px}.site-editor-pages>div,.site-block-list>div{display:flex;align-items:center;gap:1px;border:1px solid var(--line);border-radius:7px;background:var(--card)}.site-editor-pages>div.active,.site-block-list>div.active{background:var(--info-bg);border-color:var(--brand)}.site-editor-pages>div>button:first-child,.site-block-list>div>button:first-child{flex:1;min-width:0;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border:0;background:none;padding:10px 8px;font:inherit;font-size:11px;font-weight:700;color:var(--text);cursor:pointer}.site-editor-pages small{margin-right:8px;color:var(--muted)}.site-editor-controls .icon-btn{width:26px;height:28px}.site-block-list [draggable=true]{cursor:grab}
.site-editor-canvas{min-width:0;background:#edf1f6;border:1px solid var(--line);border-radius:10px;overflow:hidden}.site-preview-toolbar{position:sticky;top:0;display:flex;align-items:center;gap:8px;padding:10px 15px;background:var(--card);border-bottom:1px solid var(--line);z-index:3}.site-preview-toolbar>b{margin-right:auto;font-size:12px}.site-preview-viewport{max-height:calc(100dvh - 220px);overflow:auto;min-height:400px;margin:0 auto;transition:width .15s}.site-preview-viewport.desktop{width:100%}.site-preview-viewport.mobile{width:min(390px,100%);box-shadow:0 10px 40px #1428491a}.site-preview-viewport .capture-site{min-height:0}.site-preview-viewport .capture-hero{padding:55px 7%;min-height:340px}.site-preview-viewport .capture-hero h1{font-size:clamp(28px,5cqi,48px)}.site-preview-viewport .capture-hero p{font-size:14px}.site-preview-viewport .capture-header{padding:16px 6%}.site-preview-viewport .capture-header nav{font-size:10px;gap:12px}.site-preview-viewport .capture-brand{font-size:14px}.site-preview-viewport .capture-section{padding:40px 7%}.site-preview-viewport .capture-section h2{font-size:26px}.site-preview-viewport .capture-convert{gap:20px}.site-preview-viewport .capture-benefits h3{font-size:14px}.site-preview-viewport .capture-benefits article{padding:18px}.site-preview-viewport .capture-footer{font-size:10px}.site-calendar-days{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}.site-calendar-days label{display:flex;align-items:center;gap:3px;font-size:11px}.site-calendar-days input{width:14px;height:14px}.site-editor-metrics{font-size:11px;color:var(--muted)}
@media(max-width:1150px){.site-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.site-editor{grid-template-columns:280px minmax(0,1fr)}}
@media(max-width:900px){.site-editor{grid-template-columns:1fr}.site-editor-controls{max-height:none}.site-preview-viewport{max-height:700px}.site-template-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.site-template-grid{grid-template-columns:1fr}.sites-list-panel{padding:12px}.sites-list-toolbar{flex-wrap:wrap}.sites-list-toolbar .field{width:100%}.sites-pagination{gap:8px;flex-wrap:wrap}.sites-pagination>span{width:100%}.site-editor-heading .grow{min-width:200px}.site-editor-heading .btn{flex-grow:1}}
@font-face { font-family: Latofont; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/lato-regular-webfont.ttf) format("truetype"); }
@font-face { font-family: Latofont; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/Lato-Bold.woff) format("woff"); }
@font-face { font-family: Latofont; font-weight: 900; font-style: normal; font-display: swap; src: url(/fonts/Lato-Black.woff) format("woff"); }
@font-face { font-family: CRMHeading; font-weight: 700 900; font-style: normal; font-display: swap; src: url(/fonts/Poppins-Bold.woff) format("woff"); }

:root {
  --bg: #f4f6fa; --card: #fff; --text: rgb(74, 74, 74); --muted: #667089; --line: #e2e6ef;
  --brand: #0361f4; --brand-dark: #024cc2; --side: #0C2340; --side-text: #f1f1f1;
  --ok: #1a7f4b; --warn: #b7791f; --bad: #c53030;
  --ok-bg: #e6f6ee; --warn-bg: #fdf3dc; --bad-bg: #fde8e8; --info-bg: #e7f0fe;
  --page: #fff; --shadow: rgba(0, 0, 0, .2) 0 3px 1px -2px, rgba(0, 0, 0, .14) 0 2px 2px 0, rgba(0, 0, 0, .12) 0 1px 5px 0;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 15px/1.5 Latofont, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--page); color: var(--text); }
h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
h2 { font-size: 17px; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 700; margin: 16px 0 8px; }
a { color: var(--brand); text-decoration: none; cursor: pointer; font-weight: 700; } a:hover { text-decoration: underline; }
.muted { color: var(--muted); } .small { font-size: 13px; } .right { text-align: right; } .nowrap { white-space: nowrap; }
.ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
[hidden] { display: none !important; }
.ic { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.boot { display: grid; place-items: center; height: 100vh; }
.spin { width: 26px; height: 26px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.page-loading { display: flex; align-items: center; gap: 10px; padding: 30px 0; }

/* Botones y enlaces de acción (siempre en negrita) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: var(--shadow); transition: border-color .15s, background .15s; }
.btn:hover { border-color: var(--brand); text-decoration: none; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.danger { color: var(--bad); } .btn.danger:hover { background: var(--bad-bg); border-color: var(--bad); }
.btn.sm { padding: 6px 11px; font-size: 13px; } .btn.block { width: 100%; padding: 12px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn .ic { width: 16px; height: 16px; }
.icon-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.icon-btn:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); color: var(--text); } .icon-btn.bad:hover { background: var(--bad-bg); color: var(--bad); }
.link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--brand); cursor: pointer; } .link:hover { text-decoration: underline; } .link.bad { color: var(--bad); }

/* Campos con el título adentro */
.field { position: relative; margin: 0 0 16px; }
.field input, .field select, .field textarea { width: 100%; padding: 22px 12px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 14.5px; outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none; }
.field select { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23667089' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.field textarea { min-height: 96px; resize: vertical; padding-top: 24px; }
.field label { position: absolute; left: 13px; top: 15px; color: var(--muted); font-size: 14.5px; pointer-events: none; transition: top .15s, font-size .15s, font-weight .15s; }
.field input:focus + label, .field input:not(:placeholder-shown) + label, .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label,
.field.sel label, .field.static label { top: 6px; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.field input:focus + label, .field select:focus + label, .field textarea:focus + label { color: var(--brand); }
.field input[disabled], .field select[disabled] { opacity: .6; cursor: not-allowed; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .field-row.three { grid-template-columns: 1fr 1fr 1fr; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; flex: none; }
.switch { position: relative; width: 42px; height: 24px; flex: none; display: inline-block; }
.switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.switch span { position: absolute; inset: 0; background: color-mix(in srgb, var(--muted) 45%, var(--card)); border-radius: 24px; cursor: pointer; transition: background .2s; }
.switch span::after { content: ''; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .2s; }
.switch input:checked + span { background: var(--brand); } .switch input:checked + span::after { transform: translateX(18px); }
.switch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--info-bg); color: var(--brand); white-space: nowrap; }
.badge.ok { background: var(--ok-bg); color: var(--ok); } .badge.warn { background: var(--warn-bg); color: var(--warn); } .badge.bad { background: var(--bad-bg); color: var(--bad); } .badge.gray { background: var(--bg); color: var(--muted); }
.avatar { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, var(--card)); color: var(--brand); font-size: 10.5px; font-weight: 800; flex: none; }
.avatar.lg { width: 38px; height: 38px; font-size: 14px; }

/* Estructura */
.layout { display: flex; min-height: 100vh; }
.side { width: 280px; flex: none; background: var(--side); color: var(--side-text); padding: 0 12px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; z-index: 40; }
.brand { display: flex; align-items: center; gap: 9px; padding: 14px 8px 16px; min-height: 56px; }
.brand img { width: 221px; max-width: 100%; height: auto; display: block; }
.brand .bname { font-weight: 700; font-size: 17px; color: #fff; line-height: 1.2; }
.brand:hover { text-decoration: none; }
.org-name { padding: 0 12px 12px; margin-top: -10px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .7); }
.nav { display: grid; gap: 1px; margin-top: 4px; }
.nav-group { padding: 14px 12px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 6px; border-left: 3px solid transparent; color: var(--side-text); font-weight: 500; font-size: 14.5px; text-decoration: none; }
.nav a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.nav a.active { background: rgba(255, 255, 255, .13); color: #fff; font-weight: 600; border-left-color: #fff; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.nav a .ic { width: 19px; height: 19px; }
.nav a .cnt { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--bad); color: #fff; font-size: 11px; line-height: 20px; text-align: center; }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-top: 1px solid rgba(255, 255, 255, .15); }
.side-foot .who { min-width: 0; flex: 1; line-height: 1.25; } .side-foot .who b { display: block; font-size: 13.5px; color: #fff; } .side-foot .who span { font-size: 12px; color: rgba(255, 255, 255, .7); }
.side .avatar { background: rgba(255, 255, 255, .15); color: #fff; }
.side .icon-btn { color: var(--side-text); } .side .icon-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.main { flex: 1; min-width: 0; padding: 28px 32px 48px; background: var(--page); }
.topbar-m { display: none; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head p { margin: 2px 0 0; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Paneles y listas */
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; }
.panel h2 { margin-bottom: 10px; }
.grid { display: grid; gap: 16px; } .grid.stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 18px; } .grid.two { grid-template-columns: 1fr 1fr; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.stat .k { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.stat .v { font-size: 28px; font-weight: 900; margin-top: 4px; line-height: 1.1; } .stat .s { font-size: 12.5px; color: var(--muted); margin-top: 3px; }
.stat.warn .v { color: var(--bad); }
.empty { color: var(--muted); padding: 18px 4px; text-align: center; font-size: 14px; }
.list { display: grid; }
.row { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-bottom: 1px solid var(--line); } .row:last-child { border-bottom: 0; }
.row.click { cursor: pointer; } .row.click:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.row .grow { flex: 1; min-width: 0; } .row b { display: block; } .row .sub { font-size: 12.5px; color: var(--muted); }
.checklist .row .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--line); display: grid; place-items: center; flex: none; }
.checklist .row.done .dot { background: var(--ok); border-color: var(--ok); color: #fff; } .checklist .row.done b { text-decoration: line-through; color: var(--muted); }
.checklist .dot .ic { width: 12px; height: 12px; stroke-width: 3; }
.bar { height: 8px; border-radius: 8px; background: var(--bg); overflow: hidden; } .bar > i { display: block; height: 100%; background: var(--brand); border-radius: 8px; }

/* Tabla */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 8px; background: var(--card); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 11.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; background: color-mix(in srgb, var(--bg) 60%, var(--card)); }
.tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr.click { cursor: pointer; } .tbl tbody tr.click:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); }
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; align-items: flex-start; } .filters .field { margin: 0; min-width: 170px; flex: 0 1 200px; } .filters .field.grow { flex: 1 1 260px; }

/* Panel (inicio) */
.sec-head { margin-bottom: 12px; } .sec-head h2 { font-size: 19px; margin-bottom: 2px; } .sec-head p { margin: 0; }
.conn-sum { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); margin-bottom: 16px; }
.conn-sum .big { font-size: 30px; font-weight: 900; line-height: 1.05; padding-right: 8px; } .conn-sum .big small { font-size: 16px; color: var(--muted); font-weight: 700; }
.conn-chip { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); } .conn-chip b { font-size: 14px; }
.conn-ic { width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center; color: #fff; flex: none; } .conn-ic .ic { width: 22px; height: 22px; } .conn-ic.sm { width: 32px; height: 32px; border-radius: 8px; } .conn-ic.sm .ic { width: 17px; height: 17px; }
.conn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.conn-card .ch { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .conn-card .ch .grow { min-width: 0; flex: 1; }
.conn-list { list-style: none; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); display: grid; gap: 8px; font-size: 14px; }
.conn-list li { display: flex; gap: 10px; align-items: center; } .conn-list .ic { width: 16px; height: 16px; color: var(--ok); stroke-width: 3; }
.conn-note { display: flex; gap: 8px; align-items: center; margin: 14px 0 0; color: var(--muted); font-size: 13px; } .conn-note .ic { width: 15px; height: 15px; }
.h-ic { display: flex; align-items: center; gap: 10px; } .ic-box { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--info-bg); color: var(--brand); flex: none; } .ic-box .ic { width: 16px; height: 16px; }
.panel.today { margin-bottom: 18px; }
.panel-bottom { display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; align-items: start; }
.pipe-bar { display: grid; grid-template-columns: 110px 1fr 34px; gap: 12px; align-items: center; padding: 10px 2px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); } .pipe-bar:last-child { border-bottom: 0; } .pipe-bar:hover { text-decoration: none; background: color-mix(in srgb, var(--brand) 5%, transparent); } .pipe-bar b { text-align: right; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.checklist .row .dot { font-size: 12px; font-weight: 800; color: var(--muted); }
.checklist .row.done .dot { color: #fff; }
.pipe-tabs .new-pipe { border: 1px dashed var(--line); background: transparent; color: var(--muted); } .pipe-tabs .new-pipe:hover { color: var(--brand); border-color: var(--brand); }
.board-hint { margin: 10px 2px 0; }

/* Embudos (tablero) */
.pipe-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; padding: 4px; background: var(--bg); border-radius: 8px; width: fit-content; max-width: 100%; }
.pipe-tabs button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 14px; padding: 8px 16px; border-radius: 9px; color: var(--muted); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
.pipe-tabs button.active { background: var(--card); color: var(--brand); box-shadow: var(--shadow); } .pipe-tabs .n { font-size: 11.5px; background: var(--info-bg); color: var(--brand); border-radius: 999px; padding: 0 7px; }
.board { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; min-height: 420px; }
.col { flex: 1 0 245px; max-width: 330px; background: var(--bg); border-radius: 12px; border-top: 4px solid var(--c, var(--brand)); display: flex; flex-direction: column; max-height: calc(100vh - 250px); }
.col-head { padding: 12px 14px 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.col-head b { font-size: 13px; letter-spacing: .02em; text-transform: uppercase; } .col-head .n { font-size: 12px; font-weight: 800; color: var(--muted); }
.col-sum { padding: 0 14px 8px; font-size: 12px; color: var(--muted); }
.cards { padding: 4px 10px 10px; overflow-y: auto; display: grid; gap: 10px; align-content: start; min-height: 60px; flex: 1; }
.col.over .cards { background: color-mix(in srgb, var(--brand) 8%, transparent); border-radius: 0 0 10px 10px; }
.card-c { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--p, var(--line)); border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); cursor: grab; user-select: none; }
.card-c:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); border-left-color: var(--p, var(--line)); }
.card-c.dragging { opacity: .45; }
.card-c .nm { font-weight: 800; font-size: 14px; } .card-c .meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 12px; color: var(--muted); }
.card-c .foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--muted); }
.card-c.p-alto { --p: #ef4444; } .card-c.p-medio { --p: #f59e0b; } .card-c.p-bajo { --p: #94a3b8; }
.drop-line { height: 3px; border-radius: 3px; background: var(--brand); margin: -4px 0; }

/* Ficha del contacto */
.contact-grid { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 18px; align-items: start; }
.stack { display: grid; gap: 16px; }
.app-box { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: color-mix(in srgb, var(--info-bg) 40%, var(--card)); }
.app-box.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 30%, var(--line)); } .app-box .grow { flex: 1; min-width: 160px; } .app-box b { display: block; }
.composer { border: 1px solid var(--line); border-radius: 10px; padding: 12px; margin-bottom: 14px; background: var(--card); }
.composer .field { margin-bottom: 10px; }
.composer-actions { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .composer-actions .field { margin: 0; flex: 0 0 180px; }
.timeline { display: grid; gap: 0; position: relative; }
.tl { display: flex; gap: 12px; padding: 10px 0; position: relative; }
.tl .tl-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--info-bg); color: var(--brand); flex: none; } .tl .tl-ic .ic { width: 15px; height: 15px; }
.tl.k-stage .tl-ic { background: var(--warn-bg); color: var(--warn); } .tl.k-app .tl-ic { background: var(--ok-bg); color: var(--ok); } .tl.k-task .tl-ic, .tl.k-created .tl-ic, .tl.k-consent .tl-ic, .tl.k-owner .tl-ic { background: var(--bg); color: var(--muted); }
.tl .tl-body { min-width: 0; flex: 1; } .tl .tl-text { white-space: pre-wrap; overflow-wrap: anywhere; } .tl .tl-meta { font-size: 12px; color: var(--muted); }
.task { display: flex; align-items: flex-start; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--line); } .task:last-child { border-bottom: 0; }
.task.done .tt { text-decoration: line-through; color: var(--muted); } .task .grow { flex: 1; min-width: 0; } .task .due { font-size: 12px; color: var(--muted); } .task .due.over { color: var(--bad); font-weight: 700; }
.task-add { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; flex-wrap: wrap; } .task-add .field { margin: 0; flex: 1 1 180px; } .task-add .field.date { flex: 0 0 170px; }

/* Ajustes */
.settings-layout { display: grid; grid-template-columns: 230px 1fr; gap: 28px; align-items: start; }
.subnav { display: grid; gap: 3px; position: sticky; top: 24px; } .subnav-title { font-size: 11.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0 12px 8px; }
.subnav a { padding: 10px 12px; border-radius: 9px; color: var(--muted); font-size: 14px; text-decoration: none; } .subnav a:hover { background: var(--bg); color: var(--text); } .subnav a.active { background: var(--info-bg); color: var(--brand); }
.settings-body { max-width: 820px; min-width: 0; }
.settings-body > h2.st { font-size: 20px; margin-bottom: 4px; } .settings-body > .desc { margin: 0 0 20px; color: var(--muted); }
.stage-row { display: grid; grid-template-columns: 34px minmax(130px, 1fr) 150px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.stage-row .field { margin: 0; } .stage-row .field input, .stage-row .field select { padding-top: 20px; padding-bottom: 6px; }
input[type=color] { width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: none; cursor: pointer; }
.pipe-block { margin-bottom: 22px; } .pipe-block-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.copy-box { display: flex; gap: 8px; align-items: center; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-top: 8px; } .copy-box code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: ui-monospace, Consolas, monospace; }
.toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); } .toggle-row:last-child { border-bottom: 0; } .toggle-row b { display: block; } .toggle-row .sub { font-size: 13px; color: var(--muted); max-width: 520px; }

/* Ventanas y avisos */
.modal-bg { position: fixed; inset: 0; background: rgba(10, 16, 30, .5); display: grid; place-items: center; padding: 16px; z-index: 100; overflow-y: auto; }
.modal { background: var(--card); border-radius: 14px; width: 100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.modal.wide { max-width: 640px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 8px; } .modal-head h2 { margin: 0; font-size: 18px; }
.modal-body { padding: 8px 22px 6px; overflow-y: auto; } .modal-foot { display: flex; gap: 10px; justify-content: flex-end; padding: 12px 22px 18px; }
.toasts { position: fixed; right: 18px; bottom: 18px; display: grid; gap: 10px; z-index: 200; max-width: min(420px, calc(100vw - 36px)); }
.toast { background: #172033; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 8px 24px rgba(0, 0, 0, .3); font-size: 14px; animation: tin .2s ease-out; display: flex; gap: 12px; align-items: center; } .toast.bad { background: #8a1c1c; }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }
.notice { display: flex; gap: 10px; padding: 12px 14px; border-radius: 10px; background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--line)); font-size: 14px; margin-bottom: 16px; } .notice.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--brand) 25%, var(--line)); }
.notice .ic { color: var(--warn); margin-top: 2px; } .notice.info .ic { color: var(--brand); }
.err { color: var(--bad); font-size: 13.5px; margin: 0 0 12px; }

/* Carga (bloques grises animados) */
.sk { display: inline-block; border-radius: 6px; background: linear-gradient(90deg, var(--line) 25%, color-mix(in srgb, var(--line) 50%, var(--card)) 50%, var(--line) 75%); background-size: 200% 100%; animation: sk 1.2s infinite; color: transparent !important; user-select: none; }
@keyframes sk { to { background-position: -200% 0; } }

/* Inicio de sesión */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 10%, var(--bg)), var(--bg)); }
.login-card { width: 100%; max-width: 400px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 30px 28px 26px; box-shadow: 0 16px 48px rgba(10, 16, 30, .12); }
.login-card h1 { text-align: center; font-size: 20px; } .login-card .muted.c { text-align: center; margin: 0 0 20px; }

/* Formulario público */
body.form-page { background: transparent; } .form-page main { padding: 12px; max-width: 520px; margin: 0 auto; }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px 22px; }
.form-card h1 { font-size: 21px; } .form-card > p { margin: 0 0 18px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; color: var(--muted); margin: 4px 0 14px; cursor: pointer; } .consent input { margin-top: 2px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-error { color: var(--bad); font-size: 13.5px; margin: 0 0 10px; }
.form-done { text-align: center; padding: 34px 22px; } .done-ic { width: 54px; height: 54px; border-radius: 50%; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; margin: 0 auto 12px; font-size: 28px; font-weight: 800; }

@media (max-width: 900px) {
  .layout { display: block; }
  .side { position: fixed; left: 0; top: 0; transform: translateX(-100%); transition: transform .2s; width: 270px; }
  .side.open { transform: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
  .topbar-m { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--side); color: #fff; position: sticky; top: 0; z-index: 30; } .topbar-m .brand { padding: 0; min-height: 0; } .topbar-m .brand img { width: 170px; } .topbar-m .icon-btn { color: #fff; } .topbar-m .icon-btn:hover { background: rgba(255, 255, 255, .1); }
  .main { padding: 20px 16px 40px; }
  .contact-grid, .settings-layout, .grid.two, .conn-grid, .panel-bottom { grid-template-columns: 1fr; }
  .subnav { position: static; display: flex; overflow-x: auto; gap: 6px; } .subnav-title { display: none; } .subnav a { white-space: nowrap; }
  .col { flex-basis: 260px; max-height: none; }
  .stage-row { grid-template-columns: 34px 1fr; } .stage-row > :nth-child(n+3) { grid-column: 1 / -1; }
  .field-row, .field-row.three, .form-row { grid-template-columns: 1fr; }
}

/* Panel, tablero y conversación: composición basada en la referencia visual de Financore. */
:root { --brand: #196ec3; --brand-dark: #134c89; --text: #12203a; --muted: #687281; --line: #dce2e9; --bg: #f5f8fc; --info-bg: #e9f1fc; --shadow: 0 2px 5px #1023440d; }
body { font-size: 14px; }
h1 { font-family: CRMHeading, Latofont, sans-serif; font-size: 28px; line-height: 1.3; letter-spacing: -.8px; }
h2 { color: #171c25; }
.btn { border-radius: 12px; padding: 11px 17px; background: #eaf2fc; }
.btn.primary { background: linear-gradient(180deg, #2387dc, #1264b7); border: 1px solid #2875ba; box-shadow: inset 0 1px 1px #ffffff55, 0 5px 0 #114b88, 0 12px 23px #1764ac30; }
.btn.primary:hover { background: linear-gradient(180deg, #2b91e4, #1264b7); }
.btn.primary:active { transform: translateY(2px); box-shadow: 0 3px 0 #114b88, 0 7px 12px #1764ac22; }
.panel { border-radius: 17px; box-shadow: 0 2px 5px #1424400b; }
.layout { background: #fff; }
.side { width: 316px; padding: 15px 13px 12px 65px; background: linear-gradient(120deg, #fff, #f8fbff); color: var(--text); border-right: 1px solid #e5dcc5; isolation: isolate; }
.side::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 59px; background: linear-gradient(155deg, #3596ec, #1f65bd 48%, #0e2f5c); clip-path: path('M 0 0 C 0 78 58 78 58 160 L 58 726 C 58 795 0 787 0 884 Z'); z-index: -1; }
.brand { padding: 8px 8px 0; min-height: 55px; }
.brand img { width: 193px; }
.brand .bname { color: var(--brand-dark); }
.org-name { margin: 0; padding: 0 10px 8px; font-size: 11px; color: #596274; font-weight: 400; }
.nav { gap: 2px; }
.nav-group { color: #727986; font-size: 10px; padding: 17px 10px 5px; }
.nav-group:first-child { color: #c49a36; font-size: 12px; }
.nav a { border-left: 0; padding: 7px 10px; gap: 10px; color: #3b4a63; border-radius: 11px; line-height: 1.35; font-size: 14px; }
.nav a:hover { color: #173c6b; background: #eaf2fc; }
.nav a.active { background: #2168b9; color: white; border-radius: 11px; box-shadow: 0 5px 9px #17284435; font-weight: 700; }
.nav a .ic { width: 17px; height: 17px; stroke-width: 1.5; }
.side-foot { border-top: 1px solid var(--line); padding: 15px 4px 5px; }
.side-foot .who b { color: #24334a; }
.side-foot .who span { color: #526077; }
.side .avatar { background: linear-gradient(140deg, #4e9cec, #1464b7); color: white; border-radius: 12px; }
.side .icon-btn { color: #345877; background: #eaf2fc; }
.side .icon-btn:hover { color: var(--brand); background: #dceaff; }
.main { padding: 28px 26px 40px; }
.page-head { margin-bottom: 22px; }
.page-head > div:first-child { flex: 1; min-width: 240px; }
.page-head p { font-size: 13px; }
.panel-greeting { justify-content: flex-start; align-items: center; margin-bottom: 26px; }
.panel-greeting > div:first-child { flex: none; min-width: 0; }
.sec-head h2 { font-size: 17px; margin-bottom: 4px; }
.sec-head p { font-size: 13px; }
.conn-sum { padding: 18px 22px; gap: 10px; border-radius: 17px; box-shadow: var(--shadow); }
.conn-sum .big { min-width: 134px; font-size: 34px; padding-right: 12px; }
.conn-sum .big .small { font-size: 12px; margin-top: 5px; }
.conn-chip { min-width: 228px; border-radius: 12px; background: #f5f8fc; padding: 10px 12px; }
.conn-chip b { font-size: 13px; }
.conn-chip .small { font-size: 12px; }
.conn-card { padding: 23px 24px; min-height: 248px; display: flex; flex-direction: column; }
.conn-card:nth-child(-n+2) { min-height: 340px; }
.conn-card h2 { font-family: CRMHeading, sans-serif; font-size: 18px; line-height: 1.3; }
.conn-card .ch { gap: 14px; }
.conn-card .ch .small { font-size: 13px; display: block; }
.conn-ic { width: 48px; height: 48px; border-radius: 14px; box-shadow: 0 7px 18px #14244022; }
.conn-ic.sm { width: 35px; height: 35px; box-shadow: none; }
.conn-list { padding: 13px 15px; border-radius: 12px; font-size: 13px; gap: 10px; }
.conn-list .ic { background: #20844f; color: white; padding: 2px; border-radius: 50%; width: 18px; height: 18px; }
.conn-card .conn-note { margin-top: auto; padding-top: 22px; font-size: 12px; }
.conn-card .badge { border: 1px solid #e8dbb8; font-size: 11px; }
.conn-grid { margin-bottom: 18px; }
.panel.today { padding: 17px 18px; }
.grid.stats { gap: 10px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.stat { padding: 13px; border-radius: 14px; }
.stat .k { font-size: 10px; letter-spacing: .7px; }
.stat .v { font-size: 24px; }
.stat .s { font-size: 11px; }
.panel-bottom { grid-template-columns: 2fr 1fr; }
.h-ic { font-size: 14px; }
.pipe-bar { grid-template-columns: 85px 1fr 24px; font-size: 13px; }
.pipe-bar .bar { height: 8px; background: #e9f1fc; }
.checklist .row { align-items: flex-start; border: 0; gap: 12px; }
.checklist .row b { color: #246499; font-size: 13px; }
.checklist .row .sub { font-size: 12px; }
.board-tabs { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.board-tabs .pipe-tabs { margin: 0; background: #eaf2fc; border: 1px solid #d5e0ee; border-radius: 14px; }
.pipe-tabs button { padding: 10px 15px; font-size: 13px; }
.pipe-tabs button.active { color: #214e75; }
.board-tabs .new-pipe { border: 1px dashed #b7c9dd; border-radius: 24px; background: white; font-size: 12px; box-shadow: none; font-weight: 400; }
.board { height: max(410px, calc(100vh - 245px)); min-height: 0; padding: 0 2px; gap: 12px; align-items: stretch; scrollbar-width: none; }
.board::-webkit-scrollbar { display: none; }
.col { flex: 0 0 276px; max-width: 276px; height: 100%; max-height: none; border: 1px solid #d1dce8; border-radius: 15px; background: #e9f1fc; padding: 10px; }
.col-head { border-top: 3px solid var(--c, #152033); padding: 7px 0 6px; gap: 8px; }
.col-head b { flex: 1; font-size: 12px; letter-spacing: 0; text-transform: none; }
.col-head .icon-btn { width: 22px; height: 24px; }
.col-head .n { font-size: 12px; color: #27364f; }
.cards { padding: 0; min-height: 120px; gap: 8px; }
.column-empty { text-align: center; color: #bbc9db; padding: 8px; }
.col-sum { margin-top: auto; border-top: 1px solid #d8e2ee; display: flex; justify-content: space-between; padding: 7px 0 0; font-size: 12px; }
.col-sum b { color: #19273b; }
.card-c { padding: 9px 8px; border-left-width: 4px; border-radius: 12px; box-shadow: none; }
.card-open { display: flex; align-items: center; gap: 8px; border: 0; padding: 0; width: 100%; text-align: left; background: none; color: inherit; cursor: pointer; font: inherit; }
.card-open .avatar { width: 35px; height: 35px; font-size: 12px; background: linear-gradient(140deg, #308edd, #115aab); color: white; position: relative; }
.card-open .avatar i { position: absolute; right: -2px; bottom: -2px; background: #22a969; border: 1px solid white; border-radius: 50%; width: 15px; height: 15px; display: grid; place-items: center; }
.card-open .avatar .ic { width: 10px; height: 10px; }
.card-person { flex: 1; min-width: 0; }
.card-person .nm { display: block; font-size: 12px; }
.card-owner { display: block; font-size: 11px; color: #7b8490; }
.card-open time { align-self: flex-start; font-size: 10px; color: #7b8490; white-space: nowrap; padding-top: 2px; }
.card-preview { font-size: 11px; color: #838b98; margin-top: 6px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.card-tags .badge { font-size: 10px; padding: 1px 6px; }
.add-board-stage { height: 42px; flex: 0 0 160px; align-self: flex-start; background: transparent; box-shadow: none; border-style: dashed; }
.board-scroll { margin: 5px 2px 0; padding: 3px; display: flex; gap: 5px; align-items: center; background: #e8f0fb; border: 1px solid #d3e1f1; border-radius: 13px; box-shadow: 0 3px 12px #144c8825; }
.board-scroll .icon-btn { width: 34px; height: 26px; font-size: 12px; background: white; color: var(--brand); border-radius: 8px; }
.board-scroll input { flex: 1; min-width: 0; margin: 0; height: 20px; accent-color: var(--brand); cursor: ew-resize; }
.board-hint { padding: 17px; margin-top: 28px; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); font-size: 12px; }
/* Ficha superpuesta. El tablero se conserva detrás y cada columna desplaza por separado. */
body.chat-open { overflow: hidden; }
.contact-chat-backdrop { position: fixed; inset: 0; z-index: 80; background: #0c1829b3; backdrop-filter: blur(5px); display: grid; place-items: center; padding: 24px; }
.contact-chat-loading { color: white; padding: 25px; border-radius: 15px; background: #122d50; }
.contact-chat { width: min(1180px, 100%); height: calc(100dvh - 48px); border: 1px solid #315278; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; background: linear-gradient(130deg, #143763, #0c203b); color: #dbe6f5; box-shadow: 0 20px 70px #0004; --text: #dbe6f5; --muted: #a9bcd5; --line: #315075; --card: #123154; --bg: #173c68; --info-bg: #214d7c; }
.chat-header { display: flex; align-items: center; gap: 14px; padding: 20px; border-bottom: 1px solid #2a496b; min-height: 86px; }
.chat-header > .avatar { width: 48px; height: 48px; background: #1d76c8; color: #dbeaff; font-size: 17px; }
.chat-name { flex: 1; min-width: 0; }
.chat-name h2 { margin: 0 0 4px; color: #f0f5fc; font: 700 19px CRMHeading, sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-name > span { font-size: 11px; }
.chat-header .btn { color: #e5effd; background: #193e6a; border-color: #3b5d88; box-shadow: none; }
.chat-header > .icon-btn { border: 1px solid #3b5d88; color: #c3d6ef; background: #193e6a; width: 40px; height: 40px; }
.chat-stage { width: 332px; padding: 14px; background: #f5f6f8; color: #263446; border-radius: 12px; border: 1px solid #dce2e9; font: inherit; font-size: 13px; }
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; flex: 1; min-height: 0; }
.chat-conversation { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.chat-thread { flex: 1; overflow-y: auto; padding: 22px 34px; display: flex; flex-direction: column; gap: 10px; scrollbar-color: #3c5576 transparent; scrollbar-width: thin; }
.chat-bubble { width: fit-content; max-width: 85%; border-radius: 13px; padding: 12px 14px; border: 1px solid #2c527d; font-size: 13px; background: #163b69; align-self: flex-end; }
.chat-bubble.incoming { align-self: flex-start; background: #1b416c; }
.chat-bubble.internal { align-self: center; background: #353b42; border-color: #6a634d; }
.chat-bubble > div { color: #a9c3df; font-size: 10px; }
.chat-bubble p { margin: 7px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.chat-event { align-self: center; max-width: 95%; background: #1c4271; border-radius: 18px; padding: 6px 13px; font-size: 10.5px; text-align: center; overflow-wrap: anywhere; color: #c7dcf5; }
.chat-demo { text-align: center; color: #a7bdd8; font-size: 11px; padding-bottom: 7px; }
.chat-compose { padding: 12px 16px; border-top: 1px solid #2a496b; }
.chat-compose .composer { margin: 0; padding: 0; border: 0; background: none; }
.chat-compose .pipe-tabs { background: none; margin: 0 0 8px !important; padding: 0; gap: 3px; }
.chat-compose .pipe-tabs button { font-size: 11px; padding: 4px 9px; color: #abc2df; }
.chat-compose .pipe-tabs button.active { color: #e0edfc; background: #214d7d; box-shadow: none; }
.chat-compose .field textarea { min-height: 44px; height: 46px; resize: vertical; padding: 10px 12px; background: #112f53; color: #e4edfa; border: 1px solid #355782; border-radius: 12px; }
.chat-compose textarea::placeholder { color: #9fb9d7; }
.chat-compose .composer-actions { justify-content: flex-end; align-items: center; }
.chat-compose .composer-actions .small { flex: 1; order: -1; font-size: 10px; }
.chat-compose .btn { font-size: 12px; padding: 8px 14px; }
.chat-details { overflow-y: auto; border-left: 1px solid #2a496b; padding: 0 18px 20px; scrollbar-width: thin; scrollbar-color: #3c5576 transparent; }
.chat-section { padding: 18px 0; border-bottom: 1px solid #29486b; font-size: 12px; }
.chat-section h3 { margin: 0 0 12px; color: #c8daee; font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .8px; }
.chat-section p { line-height: 1.6; margin: 10px 0 0; }
.sale-path { display: flex; gap: 3px; }
.sale-path span { flex: 1; padding: 5px 3px; background: #1a3e6d; font-size: 9px; font-weight: 700; text-align: center; border-radius: 3px; }
.sale-path .done { color: #327541; background: #e2f1df; }
.sale-path .current { color: white; background: #1d79c5; }
.chat-insight { padding: 15px 12px; border: 1px solid #2a4c78; border-radius: 12px; background: #15365f; margin-top: 12px; }
.chat-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 15px; }
.chat-facts > span { color: #9fb8d6; }
.chat-section .app-box { background: #163963; padding: 10px; font-size: 11px; }
.chat-section .app-box .small { font-size: 11px; }
.chat-edit summary { cursor: pointer; font-weight: 700; }
.chat-edit .panel, .chat-tasks .panel { background: none; border: 0; padding: 12px 0 0; box-shadow: none; }
.chat-edit h2, .chat-tasks .panel h2 { color: #d3e3f6; font-size: 13px; }
.chat-details .field-row { grid-template-columns: 1fr; gap: 0; }
.chat-details .field { margin-bottom: 10px; }
.chat-details .field input, .chat-details .field select, .chat-details .field textarea { font-size: 12px; background-color: #14365c; }
.chat-details .field label { font-size: 12px; }
.chat-details .field.sel label, .chat-details .field.static label, .chat-details .field input:not(:placeholder-shown) + label, .chat-details .field textarea:not(:placeholder-shown) + label { font-size: 10px; }
.chat-details .btn { font-size: 11px; padding: 8px 10px; color: #d4e5f9; background: #1c4572; }
.chat-details .btn.primary { background: #1c70bd; }
.chat-details .task-add .field.date { flex-basis: 100%; }
@media (max-width: 1100px) and (min-width: 901px) { .side { width: 255px; padding-left: 45px; } .side::before { width: 35px; border-radius: 0 100px 100px 0; clip-path: none; } .conn-card { padding: 18px; } .conn-card .ch { flex-wrap: wrap; } .conn-chip { min-width: 190px; } .grid.stats { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .side { width: 280px; } .main { padding: 22px 16px; } .topbar-m { background: #f6faff; border-bottom: 1px solid var(--line); } .topbar-m .icon-btn { color: #225a91; } .topbar-m .brand .bname { color: var(--brand-dark); } .conn-grid, .panel-bottom { grid-template-columns: 1fr; } .grid.stats { grid-template-columns: repeat(2, 1fr); } .conn-card:nth-child(-n+2) { min-height: 260px; } .col { flex-basis: 276px; } .board { height: calc(100dvh - 300px); min-height: 350px; } .chat-layout { grid-template-columns: minmax(0, 1fr) 290px; } .chat-header { flex-wrap: wrap; padding: 12px; gap: 8px; } .chat-stage { width: 250px; } .chat-full { display: none; } .chat-thread { padding: 16px; } }
@media (max-width: 650px) { .contact-chat-backdrop { padding: 0; } .contact-chat { width: 100%; height: 100dvh; border-radius: 0; } .chat-layout { display: block; overflow-y: auto; } .chat-conversation { min-height: 65dvh; } .chat-thread { max-height: 52dvh; min-height: 220px; } .chat-details { overflow: visible; border-left: 0; border-top: 1px solid #315075; } .chat-stage { width: calc(100% - 50px); order: 4; } .chat-header > .icon-btn { margin-left: auto; } .chat-name { width: calc(100% - 115px); } .chat-header .avatar { width: 38px; height: 38px; } .chat-name h2 { font-size: 16px; } .conn-chip { min-width: 0; flex: 1; } .conn-sum .big { width: 100%; } .board-tabs { flex-wrap: wrap; } .pipe-tabs button { padding: 8px 10px; } .page-head .page-actions { margin-top: 5px; } .panel-greeting > .btn { font-size: 12px; } }
.crm-brand-icon { display: grid; place-items: center; width: 36px; height: 36px; color: #2263a4; background: #e2eefb; border-radius: 50%; }
.crm-brand-icon .ic { width: 25px; height: 25px; }
.crm-brand-name { color: #315e87; font: 700 20px CRMHeading, sans-serif; line-height: 1.1; letter-spacing: -.7px; }
.crm-brand-name small { display: block; font: 400 18px Latofont, sans-serif; letter-spacing: 3px; }
.brand { padding-bottom: 5px; }
.cards { grid-template-columns: minmax(0, 1fr); }
.card-c { min-width: 0; }
.connection-action { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
.connection-action .btn { font-size: 12px; }
.connection-action .small { font-size: 11px; }
.board-scroll input { appearance: none; -webkit-appearance: none; background: #e4edf9; border: 1px solid #cbdbee; border-radius: 10px; height: 19px; }
.board-scroll input::-webkit-slider-thumb { appearance: none; -webkit-appearance: none; width: var(--thumb, 38%); height: 16px; border-radius: 7px; background: var(--brand); box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 40%, transparent); }
.board-scroll input::-moz-range-thumb { width: var(--thumb, 38%); height: 16px; border: 0; border-radius: 7px; background: var(--brand); }
.chat-name .badge { color: #d6eaff; background: #225581; }
@font-face { font-family: CRMBody; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/Poppins-Regular.woff) format('woff'); }
@font-face { font-family: CRMBody; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/Poppins-Bold.woff) format('woff'); }
body { font-family: CRMBody, Latofont, system-ui, sans-serif; font-size: 13px; }
.sample-potential { background: #173c68; border-left: 4px solid #e8b436; border-radius: 9px; display: flex; gap: 14px; align-items: center; padding: 10px 12px; margin-bottom: 14px; }
.sample-potential strong { font-size: 29px; color: white; }
.sample-potential strong small { font-size: 10px; color: #b4c8df; }
.sample-potential > span { font-size: 12px; font-weight: 700; }
.sample-potential > span small { font-size: 10px; font-weight: 400; color: #a8c0dc; }

/* Preferencias de Johan: navegación original y controles de la app; conservar la distribución. */
:root { --brand: #0361f4; --brand-dark: #024cc2; --side: #0c2340; --side-text: #f1f1f1; --text: rgb(74,74,74); --muted: #667089; --line: #e2e6ef; --shadow: rgba(0,0,0,.2) 0 3px 1px -2px, rgba(0,0,0,.14) 0 2px 2px 0, rgba(0,0,0,.12) 0 1px 5px 0; }
.side { width: 280px; padding: 0 12px; background: var(--side); color: var(--side-text); border-right: 0; font-family: Latofont, sans-serif; }
.side::before { display: none; }
.brand { padding: 14px 8px 16px; min-height: 56px; }
.brand img { width: 221px; }
.brand .bname { color: white; }
.org-name { padding: 0 12px 12px; margin-top: -10px; font-size: 13px; font-weight: 700; color: #ffffffb3; }
.nav { gap: 1px; margin-top: 4px; }
.nav-group, .nav-group:first-child { padding: 14px 12px 4px; font-size: 11.5px; font-weight: 800; letter-spacing: .08em; color: #ffffff8c; }
.nav a { gap: 12px; padding: 9px 12px; border-radius: 6px; border-left: 3px solid transparent; color: var(--side-text); font-size: 14.5px; font-weight: 500; line-height: 1.5; }
.nav a:hover { background: #ffffff1a; color: white; }
.nav a.active { background: #ffffff21; color: white; font-weight: 600; border-left-color: white; border-radius: 0 6px 6px 0; box-shadow: none; }
.nav a .ic { width: 19px; height: 19px; stroke-width: 1.8; }
.side-foot { padding: 12px 8px; border-top: 1px solid #ffffff26; }
.side-foot .who b { color: white; }
.side-foot .who span { color: #ffffffb3; }
.side .avatar { background: #ffffff26; color: white; border-radius: 50%; }
.side .icon-btn { color: var(--side-text); background: transparent; }
.side .icon-btn:hover { background: #ffffff1a; color: white; }
.btn { padding: 8px 14px; border-radius: 8px; background: var(--card); color: var(--text); box-shadow: var(--shadow); font-family: Latofont, sans-serif; }
.btn.primary, .btn.primary:hover, .btn.primary:active { color: white; border-color: var(--brand); background: var(--brand); box-shadow: var(--shadow); transform: none; padding: 12px 24px; line-height: 20px; }
.btn.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn.sm { padding: 6px 11px; }
.btn:disabled { opacity: .5; box-shadow: none; }
.contact-chat-backdrop { background: #0a101e80; backdrop-filter: blur(3px); }
.contact-chat { background: #fff; color: #4a4a4a; border-color: #e2e6ef; font-family: Latofont, sans-serif; --text: #4a4a4a; --muted: #667089; --line: #e2e6ef; --card: #fff; --bg: #f4f6fa; --info-bg: #e7f0fe; }
.chat-header { background: white; border-bottom-color: var(--line); }
.chat-name h2 { color: #25344b; }
.chat-name .badge { color: var(--brand); background: var(--info-bg); }
.chat-name > span:not(.badge) { color: var(--muted); }
.chat-header > .avatar { background: var(--info-bg); color: var(--brand); }
.chat-header .btn, .chat-header > .icon-btn { color: var(--text); background: white; border-color: var(--line); border-radius: 8px; }
.chat-stage { background: white; border-color: var(--line); color: var(--text); border-radius: 8px; }
.chat-thread { background: #f4f6fa; scrollbar-color: #bec9d9 transparent; }
.chat-bubble { background: #e7f0fe; border-color: #cfdef7; color: #35445c; }
.chat-bubble.incoming { background: white; border-color: var(--line); }
.chat-bubble.internal { background: #fff8e7; border-color: #efe1b8; color: #665832; }
.chat-bubble > div { color: #647792; }
.chat-event { background: #e4e9f0; color: #657187; }
.chat-demo { color: #748197; }
.chat-compose { background: white; border-top-color: var(--line); position: relative; }
.chat-compose .composer { position: relative; }
.chat-compose .pipe-tabs button { color: #67778e; }
.chat-compose .pipe-tabs button.active { color: var(--brand); background: var(--info-bg); }
.chat-compose .field textarea { background: white; color: var(--text); border-color: #cfd7e4; }
.chat-compose textarea::placeholder { color: #8590a2; }
.chat-details { background: #fff; border-left-color: var(--line); scrollbar-color: #bec9d9 transparent; }
.chat-section { border-bottom-color: var(--line); }
.chat-section h3 { color: #64718b; }
.sale-path span { background: #edf1f7; color: #7b879b; }
.sale-path .done { background: var(--ok-bg); color: var(--ok); }
.sale-path .current { background: var(--brand); color: white; }
.chat-insight { background: #f5f8ff; border-color: #dce6f6; }
.chat-facts > span { color: var(--muted); }
.chat-section .app-box { background: #f5f8fd; }
.chat-edit h2, .chat-tasks .panel h2 { color: var(--text); }
.chat-details .field input, .chat-details .field select, .chat-details .field textarea { background-color: white; color: var(--text); }
.chat-details .btn { color: var(--text); background: white; }
.chat-details .btn.primary { color: white; background: var(--brand); }
.sample-potential { background: #f5f7fb; border-left-color: #e9ba44; }
.sample-potential strong { color: #263650; }
.sample-potential strong small, .sample-potential > span small { color: #8491a6; }
.chat-tool-buttons { display: flex; gap: 8px; margin-right: auto; }
.chat-compose .composer-actions { row-gap: 7px; }
.chat-compose .composer-actions > .small { flex-basis: 100%; }
.chat-tool-buttons .btn { color: #52657f; background: white; padding: 7px 11px; }
.chat-tool-buttons .btn .ic { width: 16px; height: 16px; }
.quick-picker, .chat-more { position: absolute; z-index: 10; bottom: 52px; left: 0; width: min(540px, 100%); background: white; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 40px #172b4b30; color: var(--text); }
.quick-heading { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px 2px; }
.quick-search { display: flex; gap: 8px; padding: 7px 12px; }
.quick-search input { min-width: 0; flex: 1; border: 1px solid #d4dce8; border-radius: 7px; padding: 9px 10px; font: inherit; color: var(--text); background: white; }
.quick-list { max-height: min(340px, 40dvh); overflow-y: auto; padding: 0 8px; }
.quick-row { display: flex; border-bottom: 1px solid #edf0f5; align-items: flex-start; }
.quick-use { flex: 1; min-width: 0; text-align: left; border: 0; background: white; padding: 10px 8px; cursor: pointer; font: inherit; color: inherit; border-radius: 7px; }
.quick-use:hover, .quick-use:focus-visible { background: #edf4ff; }
.quick-use code { color: var(--brand); font-size: 11px; margin-right: 7px; }
.quick-use b { font-size: 12px; }
.quick-use > span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 11px; color: #7b879a; margin-top: 5px; }
.quick-use small { font-size: 10px; color: #8b97aa; }
.quick-row-tools { display: flex; padding-top: 7px; }
.quick-row-tools .ic { width: 14px; height: 14px; }
.quick-hint { font-size: 10px; color: #8995a7; padding: 8px 12px; margin: 0; border-top: 1px solid var(--line); }
.chat-more { width: 215px; padding: 8px; display: grid; }
.chat-more > b { padding: 5px 8px 10px; font-size: 11px; color: #8390a5; }
.chat-more > button { display: flex; align-items: center; gap: 9px; font: inherit; text-align: left; padding: 8px; border: 0; color: #51627c; background: white; cursor: pointer; border-radius: 6px; }
.chat-more > button:hover { background: #edf4ff; }
@media (max-width: 1100px) and (min-width: 901px) { .side { width: 280px; padding-left: 12px; } }
@media (max-width: 900px) { .side { width: 270px; } .topbar-m { background: var(--side); color: white; } .topbar-m .icon-btn { color: white; } .topbar-m .brand { padding: 0; } .topbar-m .brand .bname { color: white; } .topbar-m .brand img { width: 170px; } }
@media (max-width: 650px) { .chat-details { border-top-color: var(--line); } .quick-picker { bottom: 50px; } .chat-tool-buttons { gap: 5px; } }

/* Índice completo de Ajustes y catálogos */
.settings-intro { margin: -10px 0 22px; }
.settings-layout { grid-template-columns: 245px minmax(0, 1fr); }
.subnav { max-height: calc(100dvh - 65px); overflow-y: auto; gap: 1px; padding-right: 9px; scrollbar-width: thin; }
.subnav .subnav-title { padding: 17px 12px 4px; font-size: 10px; }
.subnav a { font-size: 12px; padding: 8px 12px; font-weight: 400; }
.subnav a.active { font-weight: 700; }
.settings-search { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: 12px; margin-bottom: 9px; color: var(--text); background: var(--card); }
.settings-body { max-width: 1000px; }
.settings-group { margin-bottom: 28px; }
.settings-group > h3 { text-transform: uppercase; letter-spacing: .8px; color: var(--muted); font-size: 11px; }
.settings-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.setting-tile { position: relative; padding: 15px 35px 15px 15px; color: var(--text); border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-decoration: none; }
.setting-tile b { display: block; font-size: 13px; }
.setting-tile span { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 5px; }
.setting-tile .ic { position: absolute; right: 12px; top: 18px; width: 14px; }
.setting-tile:hover { border-color: var(--brand); text-decoration: none; }
.settings-divider { border: 0; border-top: 1px solid var(--line); margin: 26px 0; }
.settings-note { border-left: 3px solid #8da4c3; padding: 10px 14px; color: var(--muted); background: var(--bg); font-size: 12px; line-height: 1.7; }
.settings-logo { max-width: 190px; max-height: 90px; display: block; margin: 16px 0; object-fit: contain; }
.settings-upload { display: grid; gap: 10px; color: var(--muted); font-size: 12px; margin: 16px 0; }
.settings-check { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 13px; }
.settings-catalog { margin-top: 18px; }
.settings-catalog-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.settings-catalog-row .grow { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.settings-catalog-row b { font-size: 13px; }
.settings-catalog-row small { display: block; color: var(--muted); font-size: 11px; }
.catalog-color { width: 15px; height: 15px; border-radius: 50%; flex: none; }
.settings-base-fields { margin-bottom: 20px; }
.settings-facts { display: grid; grid-template-columns: 160px 1fr; gap: 15px; font-size: 13px; }
.settings-facts dt { color: var(--muted); }
.settings-facts dd { margin: 0; }
.contact-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.contact-tags label { display: flex; align-items: center; gap: 5px; padding: 5px 8px; font-size: 11px; background: color-mix(in srgb, var(--tag) 10%, var(--card)); color: var(--tag); border-radius: 7px; }
.contact-tags input { width: 13px; height: 13px; }
.contact-attributes .chat-facts b { overflow-wrap: anywhere; }
[data-crm-theme=dark] { --page: #101827; --bg: #182234; --card: #162033; --text: #d9e1ef; --muted: #9baac1; --line: #2c3a52; --info-bg: #193657; --ok-bg: #173b31; --warn-bg: #3c321e; }
[data-crm-theme=dark] .layout, [data-crm-theme=dark] .main { background: var(--page); }
[data-crm-theme=dark] h1, [data-crm-theme=dark] h2, [data-crm-theme=dark] .conn-card h2 { color: var(--text); }
[data-crm-theme=dark] .conn-chip, [data-crm-theme=dark] .board-tabs .pipe-tabs, [data-crm-theme=dark] .col, [data-crm-theme=dark] .board-scroll { background: var(--bg); border-color: var(--line); }
[data-crm-theme=dark] .board-tabs .new-pipe, [data-crm-theme=dark] .card-open { background: transparent; color: var(--text); }
[data-crm-theme=dark] .col-head .n, [data-crm-theme=dark] .col-sum b { color: var(--text); }
[data-crm-theme=dark] .contact-chat { background: var(--card); color: #d9e1ef; --card: #162033; --bg: #182234; --text: #d9e1ef; --muted: #9baac1; --line: #2c3a52; --info-bg: #193657; }
[data-crm-theme=dark] .chat-header, [data-crm-theme=dark] .chat-details, [data-crm-theme=dark] .chat-compose, [data-crm-theme=dark] .chat-stage, [data-crm-theme=dark] .chat-header .btn, [data-crm-theme=dark] .chat-header>.icon-btn, [data-crm-theme=dark] .chat-details .field input, [data-crm-theme=dark] .chat-details .field select, [data-crm-theme=dark] .chat-details .field textarea, [data-crm-theme=dark] .chat-compose .field textarea, [data-crm-theme=dark] .quick-picker, [data-crm-theme=dark] .quick-use, [data-crm-theme=dark] .quick-search input, [data-crm-theme=dark] .chat-more, [data-crm-theme=dark] .chat-more>button, [data-crm-theme=dark] .chat-tool-buttons .btn { background: var(--card); color: var(--text); border-color: var(--line); }
[data-crm-theme=dark] .chat-thread, [data-crm-theme=dark] .chat-insight, [data-crm-theme=dark] .sample-potential { background: var(--bg); }
[data-crm-theme=dark] .chat-bubble { background: #1c3456; color: #d9e1ef; border-color: #2b4d77; }
[data-crm-theme=dark] .chat-bubble.incoming { background: #202e43; }
[data-crm-theme=dark] .chat-bubble.internal { background: #383121; border-color: #675634; color: #ebdba9; }
[data-crm-theme=dark] .chat-name h2, [data-crm-theme=dark] .sample-potential strong { color: var(--text); }
[data-crm-theme=dark] .chat-event { background: #26364e; color: #b8c9df; }
@media (max-width: 900px) { .settings-layout { grid-template-columns: 1fr; } .subnav { display: flex; flex-wrap: wrap; overflow: visible; max-height: none; padding: 0; } .subnav .subnav-title { display: none; } .settings-search { flex-basis: 100%; } .subnav a { border: 1px solid var(--line); border-radius: 7px; } }
@media (max-width: 600px) { .settings-tiles { grid-template-columns: 1fr; } .settings-facts { grid-template-columns: 1fr; gap: 6px; } }

/* Menús con los iconos de la referencia; tipografía y campos como la app. */
.side .nav { flex: 1; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin; scrollbar-color: #ffffff35 transparent; }
.side .nav a, .side .nav a.active { font-weight: 700; }
.side .nav a .ic { width: 22px; height: 22px; stroke-width: 1.7; }
.side .nav a { padding-top: 8px; padding-bottom: 8px; }
.side .nav-group { padding-top: 13px; }
.subnav a { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.subnav a .ic { width: 20px; height: 20px; stroke-width: 1.7; }
.field { position: relative; margin-bottom: 18px; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea { border: 1px solid var(--line); border-radius: 8px; padding: 15px; min-width: 0; width: 100%; font: caption; font-size: 14px; color: var(--text); background-color: var(--card); outline: none; transition: border-color .15s, box-shadow .15s; }
.field select { padding-right: 36px; }
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):hover, .field select:hover, .field textarea:hover { border-color: color-mix(in srgb, var(--side) 40%, var(--line)); }
.field > label { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); z-index: 1; padding: 0; background: none; color: var(--muted); font-size: 14.5px; line-height: 16px; max-width: calc(100% - 30px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; font-weight: 400; }
.field.sel > label, .field.static > label, .field:focus-within > label, .field > input:focus + label, .field > textarea:focus + label, .field > input:not(:placeholder-shown) + label, .field > textarea:not(:placeholder-shown) + label { top: -8px; transform: none; left: 10px; padding: 0 5px; background: var(--card); font-size: 12px; font-weight: 600; }
.field:focus-within > label { color: var(--brand); }
.field > input:focus, .field > select:focus, .field > textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.field > textarea { min-height: 90px; resize: vertical; }
.chat-details .field label { font-size: 13px; }
.chat-details .field.sel > label, .chat-details .field.static > label, .chat-details .field input:not(:placeholder-shown) + label, .chat-details .field textarea:not(:placeholder-shown) + label { top: -8px; font-size: 11px; }
.chat-details .field input, .chat-details .field select, .chat-details .field textarea { padding: 13px; }
.settings-body .stage-row .field input, .settings-body .stage-row .field select { padding: 15px; }
.lead-modal { max-width: 540px; }
.lead-modal .modal-head { padding-bottom: 20px; }
.lead-modal .modal-body { padding-top: 12px; }
.lead-modal .field-row { gap: 12px; }
.lead-modal .field { margin-bottom: 19px; }
.lead-consent { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 12px; cursor: pointer; margin: 0 0 12px; }
.lead-consent input { width: 16px; height: 16px; margin: 1px 0 0; }
.workspace-settings { max-width: 960px; }
.workspace-replies { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.workspace-replies h2 { margin-top: 12px; font-size: 16px; }
.workspace-replies p { white-space: pre-wrap; font-size: 13px; line-height: 1.6; }
.inbox-contact { width: 100%; display: flex; align-items: center; gap: 12px; background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--line); font: inherit; text-align: left; padding: 15px 0; cursor: pointer; }
.inbox-contact:last-child { border-bottom: 0; }
.inbox-contact .grow { flex: 1; min-width: 0; }
.inbox-contact b, .inbox-contact small { display: block; }
.inbox-contact small { color: var(--muted); }
.inbox-contact:hover { background: var(--bg); }
.agenda-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.agenda-toolbar h2 { margin: 0; text-transform: capitalize; flex: 1; }
.agenda-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); border-left: 1px solid var(--line); border-top: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.agenda-weekday, .agenda-blank { padding: 12px; background: var(--bg); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.agenda-weekday { text-align: center; font-size: 12px; }
.agenda-day { min-height: 105px; padding: 9px; text-align: left; background: var(--card); border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); color: var(--text); font: inherit; cursor: pointer; }
.agenda-day > b { display: block; margin-bottom: 6px; }
.agenda-day > span { display: block; font-size: 10px; background: var(--info-bg); color: var(--brand); border-radius: 4px; padding: 3px 5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agenda-day > span.done { text-decoration: line-through; color: var(--muted); }
.agenda-day.selected { box-shadow: inset 0 0 0 2px var(--brand); }
.agenda-selection { margin-top: 20px; }
.help-steps { line-height: 2; padding-left: 20px; }
@media (max-width: 650px) { .workspace-replies { grid-template-columns: 1fr; } .agenda-day { min-height: 70px; padding: 5px; } .agenda-toolbar { gap: 5px; flex-wrap: wrap; } .agenda-toolbar .btn { padding: 6px 10px; } .agenda-toolbar h2 { font-size: 15px; } }
.chat-header .chat-stage-field { width: 332px; flex: none; margin: 0; }
.chat-header .chat-stage-field select { width: 100%; }
@media (max-width: 900px) { .chat-header .chat-stage-field { width: 250px; } }
@media (max-width: 650px) { .chat-header .chat-stage-field { width: calc(100% - 50px); order: 4; } }

/* Bandeja: lista, conversación y ficha en la misma pantalla. */
.main:has(.inbox-workspace) { padding: 18px; }
.inbox-workspace { display: grid; grid-template-columns: 350px minmax(0,1fr); gap: 12px; height: calc(100dvh - 36px); min-height: 580px; }
.inbox-sidebar, .inbox-chat-host { min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 1px 5px #152c4a08; overflow: hidden; }
.inbox-sidebar { display: flex; flex-direction: column; padding: 12px 10px; }
.inbox-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 2px 10px; }
.inbox-heading h1 { font-size: 19px; margin: 0; }
.inbox-heading small { font-size: 11px; color: var(--muted); }
.inbox-tabs { display: flex; flex-shrink: 0; gap: 3px; padding: 4px; margin-bottom: 16px; border-radius: 8px; background: var(--info-bg); overflow-x: auto; }
.inbox-tabs button { border: 0; background: transparent; color: var(--muted); border-radius: 6px; padding: 7px 9px; font: inherit; font-size: 11px; white-space: nowrap; cursor: pointer; }
.inbox-tabs button.active { background: var(--card); color: var(--brand); box-shadow: 0 1px 3px #182e4a15; font-weight: 700; }
#inbox-filters { padding: 0 2px 10px; }
.inbox-filter-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 7px; }
#inbox-filters .field { margin-bottom: 10px; }
#inbox-filters .field input, #inbox-filters .field select { font-size: 12px; padding: 11px 9px; min-height: 40px; }
#inbox-filters .field label { font-size: 11px; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inbox-list { min-height: 0; overflow-y: auto; flex: 1; }
.inbox-conversation { width: 100%; display: flex; align-items: flex-start; gap: 8px; text-align: left; border: 1px solid transparent; border-left: 3px solid transparent; border-radius: 9px; background: transparent; color: var(--text); padding: 10px 7px; font: inherit; cursor: pointer; margin-bottom: 5px; }
.inbox-conversation:hover { background: var(--bg); }
.inbox-conversation.active { background: var(--info-bg); border-color: var(--line); border-left-color: var(--brand); }
.inbox-conversation .avatar { width: 30px; height: 30px; flex: none; font-size: 11px; }
.inbox-conversation-text { display: block; min-width: 0; flex: 1; }
.inbox-conversation-top { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.inbox-conversation-top b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.inbox-conversation-top time { font-size: 9px; color: var(--muted); white-space: nowrap; }
.inbox-preview, .inbox-conversation-text > small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--muted); line-height: 1.6; }
.inbox-unread-dot { display: inline-block; width: 7px; height: 7px; background: var(--brand); border-radius: 50%; margin-right: 5px; }
.inbox-local-hint { font-size: 10px; line-height: 1.4; color: var(--muted); border-top: 1px solid var(--line); margin: 8px 0 0; padding-top: 8px; }
.inbox-empty { height: 100%; display: grid; place-content: center; padding: 24px; color: var(--muted); text-align: center; }
.inbox-chat-host { container-type: inline-size; }
.inbox-chat-host .contact-chat { width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; display: grid; grid-template-columns: minmax(0,1fr) 260px; grid-template-rows: auto minmax(0,1fr); }
.inbox-chat-host .chat-header { grid-column: 1; padding: 12px; min-height: 76px; gap: 8px; flex-wrap: wrap; }
.inbox-chat-host .chat-header > .avatar { width: 32px; height: 32px; font-size: 12px; }
.inbox-chat-host .chat-name { min-width: 0; flex: 1; width: auto; }
.inbox-chat-host .chat-name h2 { font-size: 14px; }
.inbox-chat-host .chat-name > span { font-size: 10px; }
.inbox-chat-host .chat-header .chat-stage-field { width: 100%; order: 5; }
.inbox-chat-host .chat-stage-field select { font-size: 12px; padding: 11px; }
.inbox-chat-host .chat-header > .icon-btn { width: 28px; height: 28px; padding: 5px; }
.inbox-chat-host .chat-full { display: none; }
.inbox-chat-host .chat-layout { display: contents; }
.inbox-chat-host .chat-conversation { grid-column: 1; grid-row: 2; min-height: 0; }
.inbox-chat-host .chat-details { grid-column: 2; grid-row: 1 / 3; min-height: 0; min-width: 0; padding: 0 10px 14px; overflow-x: hidden; }
.inbox-chat-host .chat-thread { padding: 14px 12px; min-height: 0; max-height: none; }
.inbox-chat-host .chat-bubble { max-width: 95%; }
.inbox-chat-host .chat-compose { padding: 10px; }
.inbox-chat-host .chat-compose .pipe-tabs { display: none; }
.inbox-chat-host .chat-section { padding: 14px 0; font-size: 11px; }
.inbox-chat-host .chat-insight { padding: 12px 10px; }
.inbox-chat-host .chat-section h3 { font-size: 9px; letter-spacing: .5px; }
.inbox-chat-host .chat-section p { line-height: 1.5; }
.inbox-chat-host .chat-facts { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 8px; }
.inbox-chat-host .chat-facts > * { overflow-wrap: anywhere; }
.inbox-chat-host .sale-path { gap: 2px; }
.inbox-chat-host .sale-path span { min-width: 0; font-size: 7px; padding: 5px 1px; }
.inbox-chat-host .chat-details .field { margin-top: 12px; }
.chat-management { display: flex; gap: 7px; flex-wrap: wrap; }
.chat-attribute-edit { border: 0; background: none; color: var(--brand); font: inherit; text-align: left; padding: 0; cursor: pointer; overflow-wrap: anywhere; }
.chat-movement { padding: 9px 0; border-bottom: 1px solid var(--line); }
.chat-movement b { display: block; font-size: 10px; font-weight: 500; }
.chat-movement small { display: block; margin-top: 4px; font-size: 9px; color: var(--muted); }
.chat-score-explanation { margin-top: 12px; font-size: 11px; }
.chat-score-explanation summary { cursor: pointer; font-weight: 700; }
.chat-compose-mode { display: flex; gap: 8px; align-items: center; margin-bottom: 7px; flex-wrap: wrap; font-size: 10px; color: var(--muted); }
.chat-compose-mode b { color: var(--text); }
.chat-back-message { border: 0; background: none; color: var(--brand); padding: 0; font: inherit; cursor: pointer; margin-left: auto; }
.chat-more small { display: block; margin-top: 3px; font-size: 10px; color: var(--muted); }
.chat-more button:disabled { cursor: not-allowed; opacity: .6; }
.chat-more { max-height: min(510px,65dvh); overflow-y: auto; }
.case-form > .btn { margin: 3px 3px 0 0; }
@container (max-width: 690px) { .inbox-chat-host .contact-chat { grid-template-columns: minmax(0,1fr) 220px; } .inbox-chat-host .chat-name > span:not(.badge) { display: none; } }
@media (max-width: 1100px) { .inbox-workspace { grid-template-columns: 245px minmax(0,1fr); gap: 8px; } .main:has(.inbox-workspace) { padding: 12px; } }
@media (max-width: 750px) { .inbox-workspace { display: flex; flex-direction: column; height: auto; } .inbox-sidebar { min-height: 310px; max-height: 440px; } .inbox-chat-host { height: 850px; flex: none; } .inbox-chat-host .contact-chat { grid-template-columns: minmax(0,1fr) 220px; } }
@media (max-width: 480px) { .inbox-chat-host { height: auto; } .inbox-chat-host .contact-chat { display: flex; height: auto; } .inbox-chat-host .chat-conversation { height: 550px; flex: none; } .inbox-chat-host .chat-details { max-height: 600px; overflow-y: auto; } }

/* Estructura de la app: menú contraíble, cajón móvil y pie fijo. */
.layout { height: 100dvh; min-height: 0; overflow: hidden; display: flex; }
.main-column { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100dvh; }
.main-column > .main { min-height: 0; overflow-y: auto; overflow-x: hidden; }
.secure-footer { display: flex; align-items: center; width: 100%; min-height: 42px; flex: 0 0 auto; padding: 12px 16px; border-top: 1px solid var(--line); background: #f7f7f7; color: var(--muted); font: 400 11.5px/1.35 Latofont,Lato,Arial,sans-serif; }
.crm-side-top { display: flex; align-items: center; padding: 0px 0 15px; gap: 4px; }
.crm-side-top .brand { padding: 0; flex: 1; min-width: 0; }
.crm-side-top .brand img { width: 100%; }
.crm-side-top .side-toggle { flex: none; padding: 6px; width: 30px; height: 32px; }
.side-toggle .ic { width: 19px; height: 19px; }
.menu-close, .menu-scrim { display: none; }
.layout.collapsed .side { width: 66px; padding: 0 7px; }
.layout.collapsed .crm-side-top { flex-direction: column; padding: 12px 0; }
.layout.collapsed .crm-side-top .brand { flex: none; width: 38px; overflow: hidden; height: 40px; min-height: 40px; }
.layout.collapsed .crm-side-top .brand img { width: 221px; max-width: none; height: auto; }
.layout.collapsed .org-name, .layout.collapsed .nav a > span:not(.cnt), .layout.collapsed .who { display: none; }
.layout.collapsed .nav a { justify-content: center; padding: 10px 0; position: relative; gap: 0; }
.layout.collapsed .nav-group { height: 18px; padding: 0; margin: 7px 8px; font-size: 0; border-bottom: 1px solid #ffffff26; }
.layout.collapsed .nav a .cnt { position: absolute; top: 0; right: 0; font-size: 9px; min-width: 15px; height: 16px; line-height: 16px; padding: 0 3px; }
.layout.collapsed .side-foot { flex-direction: column; padding: 10px 0; gap: 5px; }
.inbox-workspace { height: calc(100dvh - 78px); }
[data-crm-theme=dark] .secure-footer { background: var(--card); }
.bad-text { color: var(--bad); }
.today-notifications { display: flex; gap: 16px; align-items: center; padding: 16px 18px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 16px; background: var(--info-bg); flex-wrap: wrap; }
.today-notifications > div { flex: 1; min-width: 220px; }
.today-notifications b { display: flex; align-items: center; gap: 7px; }
.today-notifications p { font-size: 12px; color: var(--muted); margin: 5px 0 0; }
.today-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (max-width: 1100px) { .today-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .today-sections { grid-template-columns: minmax(0, 1fr); } }
.today-sections > .today-wide, .today-sections > details.today-section { grid-column: 1 / -1; }
.today-section { border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; background: var(--card); }
.today-section > h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.today-section > h2 .btn { margin-left: auto; }
.today-contact { display: flex; gap: 10px; align-items: center; text-align: left; font: inherit; color: var(--text); padding: 12px 0; width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; }
.today-contact .grow small { display: block; color: var(--muted); }
.operation-quick-task { display: grid; grid-template-columns: minmax(180px,1fr) 175px 150px auto; align-items: center; gap: 10px; padding: 14px 0; }
.operation-quick-task .field { margin: 0; }
.operation-task-filters { margin-top: 22px; align-items: center; }
.operation-task-filters .field { margin: 0; }
.task .link { font-size: inherit; }
.agenda-top-actions, .agenda-visible { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.agenda-visible { background: var(--bg); padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; }
.agenda-visible label { display: inline-flex; align-items: center; gap: 7px; }
.agenda-top-actions .pipe-tabs { margin-right: auto; }
.agenda-arrange { padding: 20px; border: 1px solid var(--line); border-radius: 10px; margin: 16px 0; }
.agenda-week { display: grid; grid-template-columns: repeat(7,minmax(120px,1fr)); overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; margin: 18px 0; }
.agenda-week > section { min-height: 230px; padding: 12px 9px; border-right: 1px solid var(--line); }
.agenda-week h3 { margin: 0 0 12px; font-size: 13px; }
.agenda-week-item { display: block; width: 100%; text-align: left; font: inherit; font-size: 11px; padding: 8px; border: 1px solid var(--line); background: var(--info-bg); color: var(--text); border-radius: 6px; cursor: pointer; margin-bottom: 8px; }
.agenda-week-item b { display: block; }
.agenda-list { margin: 15px 0 28px; }
.agenda-list > h3 { padding: 10px 12px; background: var(--bg); border-radius: 6px; }
.calendar-connections { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.calendar-connections > .grid { margin: 20px 0; }
.calendar-connections > .grid > div { border: 1px solid var(--line); padding: 16px; border-radius: 10px; }
.calendar-connections .field { max-width: 650px; }
.calendar-connections input:disabled { margin-top: 10px; }
.mail-toolbar { display: flex; gap: 15px; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 22px; }
.mail-connection { max-width: 900px; }
.mail-connection ol { padding-left: 22px; color: var(--muted); line-height: 1.8; margin-bottom: 22px; }
.mail-providers { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px; border: 1px solid var(--line); border-radius: 8px; margin: 0 0 25px; }
.mail-providers label { display: flex; gap: 5px; align-items: center; font-size: 12px; }
.mail-providers legend { color: var(--muted); font-size: 12px; font-weight: 700; }
.mail-providers input { accent-color: var(--brand); }
.mail-servers { margin: 22px 0; }
.mail-servers summary { cursor: pointer; font-weight: 700; margin-bottom: 20px; }
.mail-prepared { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 8px; padding: 14px; margin: 18px 0; }
.mail-prepared small { width: 100%; color: var(--muted); }
.settings-shortcuts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin-top: 20px; }
.settings-shortcut { position: relative; text-align: left; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; padding: 16px 35px 16px 14px; cursor: pointer; }
.settings-shortcut span { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }
.settings-shortcut .ic { position: absolute; right: 12px; top: 16px; }
.dir-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 5px; }
.dir-tags .badge { border: 0; cursor: pointer; }
@media (max-width: 1100px) { .operation-quick-task { grid-template-columns: minmax(170px,1fr) 145px; } .operation-quick-task > .btn { justify-self: end; } }
@media (max-width: 650px) { .operation-quick-task { grid-template-columns: minmax(0,1fr); gap: 18px; } .settings-shortcuts { grid-template-columns: 1fr; } .today-section { padding: 15px 12px; } .today-notifications { align-items: stretch; } }
@media (min-width: 801px) { .layout { display: flex; } .side { position: sticky; transform: none; } .topbar-m { display: none; } }
@media (max-width: 800px) {
  .layout { flex-direction: column; display: flex; }
  .main-column { height: calc(100dvh - 56px); flex: 1; min-height: 0; }
  .topbar-m { display: flex; align-items: center; gap: 12px; height: 56px; min-height: 56px; padding: 0 12px; background: var(--card); border-bottom: 1px solid var(--line); }
  .topbar-m > .icon-btn { width: 42px; height: 42px; border: 1px solid var(--line); color: var(--text); }
  .topbar-m .brand { padding: 0; min-height: 0; }
  .topbar-m .brand img { width: 176px; }
  .side, .layout.collapsed .side { position: fixed; z-index: 60; left: 0; top: 0; bottom: 0; width: min(84vw,310px); height: 100dvh; padding: 12px 14px; transform: translateX(-104%); transition: transform .25s ease; overscroll-behavior: contain; }
  .layout.drawer-open .side { transform: none; box-shadow: 8px 0 30px #0004; }
  .menu-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: #0a101e80; opacity: 0; pointer-events: none; transition: opacity .2s; }
  .layout.drawer-open .menu-scrim { opacity: 1; pointer-events: auto; }
  .menu-close { display: inline-grid; flex: none; width: 38px; height: 38px; }
  .crm-side-top .side-toggle { display: none; }
  .crm-side-top, .layout.collapsed .crm-side-top { flex-direction: row; padding: 0 0 20px; }
  .layout.collapsed .crm-side-top .brand { width: auto; height: auto; flex: 1; overflow: visible; }
  .layout.collapsed .crm-side-top .brand img { width: 100%; max-width: 221px; }
  .layout.collapsed .org-name { display: block; }
  .layout.collapsed .nav a > span:not(.cnt), .layout.collapsed .who { display: block; }
  .layout.collapsed .nav a { justify-content: flex-start; gap: 12px; padding: 11px 12px; }
  .layout.collapsed .nav-group { height: auto; font-size: 11.5px; border: 0; padding: 14px 12px 4px; margin: 0; }
  .layout.collapsed .side-foot { flex-direction: row; padding: 12px 8px; gap: 10px; }
  .layout.collapsed .nav a .cnt { position: static; margin-left: auto; }
  .secure-footer { font-size: 10px; padding: 10px 14px; }
}

/* Desplegables y calendarios propios (controls.js): lista blanca redondeada, opción elegida en gris con letra azul. */
input[type=date]::-webkit-calendar-picker-indicator, input[type=datetime-local]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { display: none; }
.field input[type=date], .field input[type=datetime-local], .field input[type=time], .field select { cursor: pointer; }
.field.has-ic input:not([type=checkbox]):not([type=radio]):not([type=file]) { padding-right: 42px; }
.cx-ic { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; color: var(--muted); pointer-events: none; }
.field.open > select, .field.open > input { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.field.open > label { color: var(--brand); }
.dd-menu, .dp-pop { position: fixed; z-index: 10000; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 30px #0b1b3a30, 0 2px 6px #0b1b3a14; font: inherit; }
.dd-menu { padding: 6px; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; }
.dd-item { padding: 9px 12px; border-radius: 8px; font-size: 14px; line-height: 1.3; cursor: pointer; }
.dd-item.act { background: color-mix(in srgb, var(--text) 6%, var(--card)); }
.dd-item.sel { background: color-mix(in srgb, var(--text) 11%, var(--card)); color: var(--brand); font-weight: 700; }
.dd-item.off { opacity: .4; cursor: not-allowed; }
.dd-group { padding: 10px 12px 4px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.dp-pop { width: 284px; padding: 12px 14px 14px; box-sizing: border-box; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-title { display: inline-flex; align-items: center; gap: 4px; margin-left: -8px; padding: 6px 8px; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.dp-title:hover, .dp-nav button:hover { background: color-mix(in srgb, var(--text) 7%, var(--card)); }
.dp-nav { display: flex; gap: 2px; }
.dp-nav button { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer; }
.dp-wd, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.dp-wd span { padding: 6px 0; color: var(--muted); font-size: 12px; text-align: center; }
.dp-d { display: block; width: 34px; height: 34px; margin: 1px auto; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.dp-d:hover:not(:disabled) { background: color-mix(in srgb, var(--text) 8%, var(--card)); }
.dp-d.today { box-shadow: inset 0 0 0 1px var(--brand); }
.dp-d.cur:not(.sel) { outline: 2px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: 1px; }
.dp-d.sel, .dp-d.sel:hover, .dp-cell.sel, .dp-cell.sel:hover { background: var(--brand); color: #fff; font-weight: 700; }
.dp-d:disabled { opacity: .3; cursor: not-allowed; }
.dp-cells { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding-top: 6px; }
.dp-cell { padding: 11px 0; border: 0; border-radius: 8px; background: none; color: var(--text); font: inherit; font-size: 13.5px; cursor: pointer; }
.dp-cell:hover:not(.sel) { background: color-mix(in srgb, var(--text) 8%, var(--card)); }
.dp-cell.today:not(.sel) { box-shadow: inset 0 0 0 1px var(--brand); }
.dp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.dp-foot label { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 600; }
.dp-time { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; }
.dp-time:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.dp-done { padding: 6px 4px; border: 0; background: none; color: var(--brand); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }

/* ---------- Respuestas Aprobadas, Secuencias y Difusión ---------- */
.lib-intro { margin: 0 0 12px; max-width: 760px; }
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.lib-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 5px #1424400b; min-width: 0; }
.lib-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.lib-card h3 { font-size: 15px; margin: 0; line-height: 1.3; }
.lib-key { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.lib-body { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; color: var(--text); max-height: 190px; overflow: auto; }
.lib-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.lib-chip { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 8px; border-radius: 6px; background: var(--bg); color: var(--muted); }
.lib-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: auto; }
.lib-actions .btn { font-weight: 700; }
.lib-form { display: flex; flex-direction: column; gap: 10px; }
.lib-form.inline { border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.lib-form .field { margin: 0; }
.lib-empty { grid-column: 1 / -1; }
.seq-note { display: flex; gap: 10px; align-items: flex-start; background: var(--info-bg); color: var(--brand); border-radius: 12px; padding: 11px 14px; font-size: 13.5px; margin-bottom: 16px; }
.seq-note .ic { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.seq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin-bottom: 16px; align-items: start; }
.seq-panel { display: flex; flex-direction: column; gap: 14px; }
.seq-head { display: flex; gap: 10px; align-items: flex-start; }
.seq-head h2 { margin: 0; font-size: 17px; } .seq-head p { margin: 2px 0 0; font-size: 13px; }
.seq-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.seq-stat { background: var(--bg); border-radius: 10px; padding: 9px 10px; display: flex; flex-direction: column; gap: 2px; }
.seq-stat b { font-size: 19px; line-height: 1.1; } .seq-stat span { font-size: 11px; color: var(--muted); font-weight: 700; }
.seq-steps { display: flex; flex-direction: column; }
.seq-step { display: flex; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); align-items: flex-start; }
.seq-step:first-child { border-top: 0; }
.seq-day { flex: none; min-width: 52px; text-align: center; font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 999px; background: var(--info-bg); color: var(--brand); }
.seq-text { margin: 2px 0 6px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.seq-step-form { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.seq-step-form .field { margin: 0; } .seq-step-form .err { grid-column: 1 / -1; margin: 0; }
.seq-step-actions { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; }
.seq-hours { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.seq-hours h2 { margin: 0 0 2px; } .seq-hours p { margin: 0; font-size: 13px; }
.seq-hours-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.seq-hours-form .field { margin: 0; width: 96px; }
.seq-people-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.seq-people-head h2 { margin: 0; } .seq-people-head .pipe-tabs { margin: 0; }
.seq-person { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.seq-person .avatar { width: 34px; height: 34px; font-size: 12px; }
.seq-person a { color: var(--text); text-decoration: none; } .seq-person a:hover { color: var(--brand); }
.seq-sub { display: block; }
.seq-empty { padding: 22px 4px; }
.bc-form { max-width: 720px; display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.bc-form .field { margin: 0; } .bc-form p { margin: 0; }
.bc-row { display: flex; gap: 12px; flex-wrap: wrap; } .bc-row .field { flex: 1 1 220px; }
.bc-channels { display: flex; gap: 8px; }
.bc-pill { border: 1px solid var(--line); background: var(--card); font: inherit; font-weight: 700; font-size: 13.5px; padding: 8px 18px; border-radius: 999px; color: var(--muted); cursor: pointer; }
.bc-pill:hover { color: var(--text); } .bc-pill.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.bc-go { align-self: flex-start; }
.bc-result { background: var(--bg); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.bc-result p { margin: 0; }
.bc-title { margin: 0 0 10px; font-size: 16px; }
.bc-item { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; padding: 12px 16px; }
.bc-sub { display: block; }
@media (max-width: 720px) { .seq-grid { grid-template-columns: 1fr; } .seq-stats { grid-template-columns: repeat(2, 1fr); } .lib-grid { grid-template-columns: 1fr; } }
.seq-panel > .btn { align-self: flex-start; }
.seq-hours > .grow { flex: 1 1 320px; }

/* ---------- Menú ⋮ de las etapas ---------- */
.stage-pop { position: fixed; z-index: 9000; min-width: 244px; max-width: 280px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 10px 28px #14244024, 0 2px 6px #1424401a; padding: 6px; display: flex; flex-direction: column; }
.stage-pop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
.stage-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.stage-item .ic { width: 18px; height: 18px; flex: none; color: var(--muted); }
.stage-item:hover, .stage-item:focus-visible { background: color-mix(in srgb, var(--brand) 9%, transparent); outline: none; }
.stage-item.bad, .stage-item.bad .ic { color: var(--bad); } .stage-item.bad:hover { background: var(--bad-bg); }
.stale-badge { display: inline-flex; align-items: center; gap: 4px; margin-top: 8px; font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); }
.stale-badge .ic { width: 12px; height: 12px; }

/* ---------- Analítica ---------- */
.an-top { align-items: flex-end; }
.an-range { display: inline-flex; gap: 4px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 2px 5px #1424400b; }
.an-range button { border: 0; background: transparent; font: inherit; font-weight: 700; font-size: 13px; padding: 8px 16px; border-radius: 10px; color: var(--muted); cursor: pointer; }
.an-range button:hover { color: var(--brand); }
.an-range button.active { background: var(--info-bg); color: var(--brand); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 30%, transparent); }
.an-stack { display: flex; flex-direction: column; gap: 16px; }
.an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.an-card { padding: 16px 18px; min-width: 0; }
.an-head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.an-head h2 { margin: 0; font-size: 15px; }
.an-head p { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; }
.an-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.an-kpi { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--info-bg) 35%, var(--card)); min-width: 0; }
.an-kpi .k { font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.an-kpi .v { font-size: 24px; line-height: 1.1; font-weight: 900; color: var(--text); }
.an-kpi .v.good, .an-mini .big.good { color: var(--ok); } .an-kpi .v.warn, .an-mini .big.warn { color: var(--warn); }
.an-kpi .s { font-size: 11.5px; color: var(--muted); }
.an-chart { position: relative; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 170px auto; column-gap: 8px; }
.an-ymax { font-size: 11px; color: var(--muted); align-self: start; }
.an-plot { display: flex; align-items: flex-end; gap: 3px; border-bottom: 1px solid var(--line); background: repeating-linear-gradient(to top, transparent 0 41px, color-mix(in srgb, var(--line) 60%, transparent) 41px 42px); }
.an-col { flex: 1; height: 100%; display: flex; align-items: flex-end; min-width: 0; }
.an-col i { display: block; width: 100%; min-height: 0; background: var(--brand); border-radius: 4px 4px 0 0; }
.an-axis { grid-column: 2; display: flex; gap: 3px; margin-top: 6px; font-size: 11px; color: var(--muted); }
.an-axis span { flex: 1; min-width: 0; white-space: nowrap; overflow: visible; text-align: center; }
.an-chart .an-empty { position: absolute; left: 32px; right: 0; top: 60px; text-align: center; pointer-events: none; }
.an-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; padding: 6px 2px; }
.an-empty.center { text-align: center; padding: 26px 8px; }
.an-hrow { display: grid; grid-template-columns: minmax(90px, 140px) 1fr auto; gap: 12px; align-items: center; padding: 7px 0; font-size: 13px; color: var(--text); text-decoration: none; }
a.an-hrow:hover { background: color-mix(in srgb, var(--brand) 5%, transparent); text-decoration: none; }
.an-hrow .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-hrow b { text-align: right; font-size: 12.5px; }
.an-track { height: 9px; background: #e9f1fc; border-radius: 99px; overflow: hidden; }
.an-track i { display: block; height: 100%; background: var(--brand); border-radius: 99px; }
.an-trio, .an-duo { display: grid; gap: 10px; }
.an-trio { grid-template-columns: repeat(3, minmax(0, 1fr)); } .an-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.an-mini { display: flex; flex-direction: column; gap: 3px; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: color-mix(in srgb, var(--info-bg) 35%, var(--card)); font-size: 12.5px; color: var(--muted); min-width: 0; }
.an-mini .big { font-size: 24px; line-height: 1.1; font-weight: 900; color: var(--text); }
.an-mini small { font-size: 11.5px; }
.an-link { font-weight: 800; font-size: 12.5px; color: var(--brand); text-decoration: none; } .an-link:hover { text-decoration: underline; }
.an-split { height: 22px; border-radius: 99px; background: color-mix(in srgb, var(--warn) 60%, #fff); overflow: hidden; margin: 4px 0 10px; }
.an-split i { display: block; height: 100%; background: var(--brand); }
.an-legend { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin: 0 0 6px; font-size: 12.5px; color: var(--muted); }
.an-dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 5px; } .an-dot.blue { background: var(--brand); } .an-dot.amber { background: color-mix(in srgb, var(--warn) 60%, #fff); }
.an-details { margin-top: 8px; font-size: 12.5px; }
.an-details summary { cursor: pointer; font-weight: 800; color: var(--muted); width: fit-content; } .an-details summary:hover { color: var(--brand); }
.an-table, .an-team { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-table { margin-top: 8px; }
.an-table th, .an-table td, .an-team th, .an-team td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.an-team th { font-size: 10.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line); }
.an-team tbody tr:last-child td, .an-table tbody tr:last-child td { border-bottom: 0; }
.an-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; }
.an-card .settings-check { padding: 6px 0; }
.an-card form > .btn { margin-top: 8px; font-weight: 800; }
@media (max-width: 1100px) { .an-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .an-grid { grid-template-columns: 1fr; } .an-trio { grid-template-columns: 1fr; } .an-top { align-items: flex-start; } }
@media (max-width: 560px) { .an-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-axis span { font-size: 9px; } }

/* ---------- Ajustes: marca, equipo, etiquetas, motivos, ADN, tema ---------- */
.bold-link { font-weight: 800; color: var(--brand); text-decoration: none; } .bold-link:hover { text-decoration: underline; }
.brand-logo { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.brand-logo .settings-logo { max-width: 120px; max-height: 64px; margin: 0; }
.brand-logo-empty { width: 96px; height: 64px; flex: none; display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 12px; font-weight: 700; background: var(--bg); }
.team-who { display: flex; align-items: center; gap: 12px; min-width: 0; } .team-who .sub { display: block; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.team-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.settings-details { margin: 18px 0; border: 1px solid var(--line); border-radius: 14px; padding: 4px 16px 14px; background: var(--card); }
.settings-details > summary { cursor: pointer; padding: 12px 0 8px; font-weight: 800; font-size: 14px; color: var(--text); }
.settings-details code { background: var(--bg); padding: 1px 6px; border-radius: 6px; font-size: 12px; }
.inline-add { margin-bottom: 18px; } .inline-add-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; } .inline-add-row .field { margin: 0; min-width: 150px; } .inline-add-row.grow-first > .field:first-child { flex: 1 1 260px; } .inline-add-row > .btn { margin-top: 2px; white-space: nowrap; }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.swatch { position: relative; width: 28px; height: 28px; cursor: pointer; } .swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line); }
.swatch.none span { background: linear-gradient(135deg, var(--card) 45%, #c53030 46% 54%, var(--card) 55%); }
.swatch input:checked + span { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--brand); } .swatch input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 3px; }
.catalog-color.none { background: var(--card); box-shadow: inset 0 0 0 1px var(--line); }
.reason-row { display: flex; align-items: flex-start; gap: 8px; } .reason-row .grow { flex: 1; min-width: 0; } .reason-row .field { margin-bottom: 8px; } .reason-row > .icon-btn, .reason-row > .btn { margin-top: 6px; }
.ai-state { margin: 4px 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--warn-bg); color: var(--warn); font-size: 13px; font-weight: 700; } .ai-state.ok { background: var(--ok-bg); color: var(--ok); }
.ai-wiz { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 22px; align-items: start; }
.ai-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-steps button { width: 100%; display: flex; gap: 12px; align-items: flex-start; text-align: left; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px; cursor: pointer; }
.ai-steps button.active { border-color: var(--brand); background: var(--info-bg); } .ai-steps b { display: block; font-size: 13px; } .ai-steps small { display: block; color: var(--muted); font-size: 11.5px; line-height: 1.35; margin-top: 2px; }
.ai-steps .n { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); font-size: 12px; font-weight: 800; color: var(--muted); }
.ai-steps button.active .n { background: var(--brand); color: #fff; } .ai-steps button.done .n { background: var(--ok); color: #fff; } .ai-steps .n .ic { width: 13px; height: 13px; stroke-width: 3; }
.ai-panel { border: 1px solid var(--line); border-radius: 17px; padding: 18px 20px; background: var(--card); } .ai-panel h3 { margin-top: 0; }
.ai-q-foot { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin: -2px 2px 14px; } .ai-q-foot .link { white-space: nowrap; font-size: 12.5px; }
.ai-hint { margin: -6px 2px 14px; }
.ai-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.theme-cards { display: flex; gap: 14px; flex-wrap: wrap; }
.theme-card { width: 220px; text-align: left; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.theme-card.active { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.theme-card small { color: var(--muted); font-size: 12px; }
.theme-sample { height: 54px; border-radius: 10px; border: 1px solid var(--line); margin-bottom: 6px; background: linear-gradient(90deg, #0c2340 0 28%, #f5f8fc 28%); } .theme-card.dark .theme-sample { background: linear-gradient(90deg, #060f1d 0 28%, #17233a 28%); }
@media (max-width: 900px) { .ai-wiz { grid-template-columns: 1fr; } .ai-steps { flex-direction: row; overflow-x: auto; } .ai-steps li { flex: 1 0 200px; } }
.ai-sub { margin: 4px 0 8px; font-size: 13px; }

/* ---------- Embudo ⋮: menú, color de pestaña y flechas del tablero ---------- */
.pipe-item { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: transparent; font: inherit; font-size: 14px; font-weight: 700; color: var(--text); text-align: left; padding: 9px 12px; border-radius: 8px; cursor: pointer; }
.pipe-item .ic { width: 18px; height: 18px; flex: none; color: var(--muted); }
.pipe-item:hover:not(:disabled), .pipe-item:focus-visible { background: color-mix(in srgb, var(--brand) 9%, transparent); outline: none; }
.pipe-item:disabled { opacity: .45; cursor: default; }
.pipe-item.bad, .pipe-item.bad .ic { color: var(--bad); } .pipe-item.bad:hover { background: var(--bad-bg); }
.pipe-pop .pipe-note { margin: 6px 12px 8px; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.pipe-form, .pipe-colors { padding: 8px 8px 6px; display: flex; flex-direction: column; gap: 10px; }
.pipe-form-actions { display: flex; gap: 8px; } .pipe-form-actions .btn, .pipe-colors .btn { font-weight: 700; }
.pipe-colors > b { font-size: 14px; }
.pipe-sws { display: flex; flex-wrap: wrap; gap: 10px; }
.pipe-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; }
.pipe-sw.none { background: repeating-linear-gradient(135deg, var(--card) 0 4px, var(--line) 4px 6px); }
.pipe-sw.on { box-shadow: 0 0 0 2px var(--brand); } .pipe-sw:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pipe-tabs button.tinted { box-shadow: inset 0 -3px 0 var(--pc); }
.pipe-tabs button.tinted.active { box-shadow: var(--shadow), inset 0 -3px 0 var(--pc); }
.board-wrap { position: relative; }
.board-float { position: absolute; top: 50%; z-index: 5; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 22px color-mix(in srgb, var(--brand) 45%, transparent); transition: transform .15s; }
.board-float[hidden] { display: none; } .board-float:hover { transform: scale(1.07); } .board-float .ic { width: 22px; height: 22px; stroke-width: 2.6; }
.board-float.r { right: 14px; } .board-float.l { left: 14px; }
.board-scroll { background: #e3ecf8; border-color: color-mix(in srgb, var(--brand) 18%, transparent); }
.pipe-colors > .btn { align-self: flex-start; }

.board-scroll .icon-btn:disabled { opacity: .4; cursor: default; box-shadow: none; }

/* ---------- Conversación: programar mensaje, archivos, voz y ubicación ---------- */
.sched-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 12px; background: var(--info-bg, #eef4fc); font-size: 13px; font-weight: 700; color: var(--text); }
.sched-bar[hidden] { display: none; }
.sched-bar .ic { width: 16px; height: 16px; color: var(--muted); }
.sched-bar input { font: inherit; font-weight: 600; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); }
.sched-bar .btn { font-weight: 700; }
.chat-scheduled { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); max-height: 190px; overflow: auto; }
.chat-scheduled h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); text-transform: none; }
.chat-scheduled h4 .ic { width: 15px; height: 15px; }
.sched-row { display: flex; gap: 12px; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--line); }
.sched-row:first-of-type { border-top: 0; }
.sched-text { min-width: 0; } .sched-text b { font-size: 12.5px; } .sched-text p { margin: 3px 0 0; font-size: 13px; overflow-wrap: anywhere; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sched-actions { display: flex; gap: 12px; flex: none; flex-wrap: wrap; justify-content: flex-end; }
.bold-link.bad { color: var(--bad); }
.chat-bubble.media { position: relative; }
.chat-bubble.media audio { display: block; margin-top: 8px; width: min(280px, 100%); height: 36px; }
.chat-img { display: block; max-width: min(260px, 100%); max-height: 200px; margin-top: 8px; border-radius: 10px; object-fit: cover; }
.chat-link { color: var(--brand); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.chat-link:hover { text-decoration: underline; } .chat-bubble .chat-link .ic, .chat-bubble p .ic { width: 15px; height: 15px; vertical-align: -3px; }
.chat-bubble-x { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; display: none; place-items: center; padding: 0; }
.chat-bubble.media:hover .chat-bubble-x, .chat-bubble-x:focus-visible { display: grid; } .chat-bubble-x:hover { background: var(--bad-bg); color: var(--bad); } .chat-bubble-x .ic { width: 13px; height: 13px; }
[data-chat-mic].rec { color: #fff; background: var(--bad); border-color: var(--bad); animation: recpulse 1.2s ease-in-out infinite; }
[data-chat-mic] .rec-time { margin-left: 6px; font-weight: 800; font-variant-numeric: tabular-nums; } [data-chat-mic] .rec-time[hidden] { display: none; }
@keyframes recpulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--bad) 25%, transparent); } }
@media (prefers-reduced-motion: reduce) { [data-chat-mic].rec { animation: none; } }

/* ---------- Correos: buzones, proveedores y conexión ---------- */
.mail-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: stretch; min-height: min(640px, calc(100vh - 230px)); }
.mail-layout.with-connect { grid-template-columns: 300px minmax(0, .8fr) minmax(0, 1.5fr); }
.mail-list, .mail-main, .mail-connect { margin: 0; display: flex; flex-direction: column; }
.mail-list h2, .mail-connect h2 { margin: 0 0 14px; font-size: 18px; }
.mail-items { display: flex; flex-direction: column; gap: 6px; flex: 1; overflow: auto; }
.mail-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; font: inherit; padding: 10px; border: 1px solid transparent; border-radius: 12px; background: transparent; color: var(--text); cursor: pointer; }
.mail-item:hover { background: var(--info-bg); } .mail-item.on { background: var(--info-bg); border-color: color-mix(in srgb, var(--brand) 28%, transparent); }
.mail-item .avatar { width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: var(--info-bg); color: var(--brand); border-radius: 50%; } .mail-item .avatar .ic { width: 17px; height: 17px; }
.mail-item-text { min-width: 0; flex: 1; display: flex; flex-direction: column; } .mail-item-text small { color: var(--muted); }
.mail-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; } .mail-dot.ok { background: #2e9d4a; } .mail-dot.bad { background: var(--bad); }
.mail-add { margin: 12px 0 8px; font-weight: 700; }
.mail-empty { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; max-width: 280px; color: var(--muted); }
.mail-empty .ic { width: 34px; height: 34px; color: var(--brand); } .mail-empty b { color: var(--text); font-size: 15px; }
.mail-detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .mail-detail-head > div { flex: 1; min-width: 0; } .mail-detail-head h2 { margin: 0; }
.mail-detail-head .avatar { width: 44px; height: 44px; display: grid; place-items: center; background: var(--info-bg); color: var(--brand); border-radius: 50%; }
.mail-detail .chat-facts { margin-bottom: 16px; } .mail-detail .page-actions { margin-top: 16px; }
.mail-connect-head { display: flex; justify-content: space-between; align-items: center; }
.mail-help { margin: 0 0 16px; padding: 12px 14px 12px 32px; background: var(--info-bg); border-radius: 12px; font-size: 13px; line-height: 1.6; }
.mail-help a { color: var(--brand); font-weight: 700; }
.mail-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.mail-chip { font: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.mail-chip:hover { border-color: var(--brand); } .mail-chip.on { background: var(--info-bg); border-color: var(--brand); color: var(--brand); }
.mail-pass input { padding-right: 46px; } .mail-pass .icon-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.mail-servers { margin: 6px 0 14px; border-top: 1px solid var(--line); padding-top: 12px; } .mail-servers summary { margin-bottom: 14px; }
.mail-srv { grid-template-columns: minmax(0, 1fr) 110px; }
.mail-note { margin-top: 12px; }
.mail-connect .err { margin: 8px 0; }
@media (max-width: 1100px) { .mail-layout.with-connect { grid-template-columns: 280px minmax(0, 1fr); } .mail-layout.with-connect .mail-main { display: none; } }
@media (max-width: 760px) { .mail-layout, .mail-layout.with-connect { grid-template-columns: 1fr; } .mail-layout.with-connect .mail-list { display: none; } }

/* Automatización: catálogo de reglas. */
.au-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 18px; }
.au-tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.au-tile b { font-size: 28px; line-height: 1.1; }
.au-tile span { font-size: 13px; color: var(--muted); }
.au-tile.ok b { color: var(--ok); } .au-tile.warn b { color: var(--warn); } .au-tile.gray b { color: var(--muted); }
.au-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 8px; }
.au-filters button { border: 1px solid var(--line); background: var(--card); color: var(--text); border-radius: 999px; padding: 7px 15px; font-weight: 600; font-size: 13px; cursor: pointer; }
.au-filters button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.au-group { margin-top: 26px; }
.au-group h2 { margin: 0 0 2px; font-size: 20px; }
.au-group > .muted { margin: 0 0 12px; }
.au-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.au-rule { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 2px 5px #1424400b; }
.au-rule header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.au-rule h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.au-rule header .badge { flex: 0 0 auto; }
.au-rule dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; line-height: 1.5; }
.au-rule dt { font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.au-rule dd { margin: 0; }
.au-detail { margin: 0; font-size: 13px; color: var(--muted); }
.au-link { margin-top: auto; font-weight: 700; font-size: 13px; color: var(--brand); }
@media (max-width: 700px) { .au-grid { grid-template-columns: 1fr; } }

/* Automatización: reglas propias en 3 bloques (Cuando → Si → Entonces) */
.fl-empty { background: var(--card); border: 1px dashed var(--line); border-radius: 16px; padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.fl-empty > .ic { width: 34px; height: 34px; color: var(--brand); }
.fl-empty h2 { margin: 0; font-size: 20px; } .fl-empty p { margin: 0; max-width: 560px; color: var(--muted); line-height: 1.55; }
.fl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; margin-top: 12px; }
.fl-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.fl-card.off { background: color-mix(in srgb, var(--card) 70%, var(--bg)); }
.fl-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.fl-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.fl-state { display: flex; align-items: center; gap: 10px; flex: none; }
.fl-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 14px; line-height: 1.5; }
.fl-card dt { font-weight: 700; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; padding-top: 2px; }
.fl-card dd { margin: 0; } .fl-card dd ol { margin: 0; padding-left: 18px; }
.fl-card footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: auto; font-size: 13px; }
.fl-btns { display: flex; gap: 14px; }
.fl-recipe { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.fl-recipe h3 { margin: 0; font-size: 15px; } .fl-recipe p { margin: 0 0 auto; font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.fl-ed { display: flex; flex-direction: column; gap: 14px; }
.fl-block { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; background: var(--card); }
.fl-block > header { display: flex; gap: 12px; align-items: flex-start; }
.fl-block h3 { margin: 0; font-size: 16px; } .fl-block h3 small { font-weight: 600; color: var(--muted); font-size: 12px; } .fl-block header p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.fl-num { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.fl-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fl-row .field { flex: 1 1 100px; min-width: 96px; margin: 0; } .fl-row .field.grow { flex: 3 1 200px; } .fl-row .field.wide { flex: 2 1 170px; } .fl-row .icon-btn { flex: none; }
.fl-and { flex: none; width: 22px; text-align: center; font-size: 12px; font-weight: 800; color: var(--muted); }
.fl-hint { margin: 0; font-size: 13px; color: var(--muted); flex: 1 1 100%; order: 5; }
.fl-block .bold-link { align-self: flex-start; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-weight: 800; }
.fl-preview { background: var(--info-bg); color: var(--text); border-radius: 12px; padding: 12px 16px; font-size: 14px; line-height: 1.55; }
.fl-preview b { color: var(--brand); display: block; margin-bottom: 4px; } .fl-preview p { margin: 0; }
.fl-activate { display: flex; gap: 12px; align-items: center; font-weight: 700; font-size: 14px; }
.fl-runs { display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow: auto; }
.fl-run { border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; font-size: 14px; } .fl-run pre { margin: 6px 0 0; white-space: pre-wrap; font: inherit; font-size: 13px; color: var(--muted); }
@media (max-width: 650px) { .fl-list { grid-template-columns: 1fr; } .fl-and { display: none; } }
/* WhatsApp: tarjeta de conexión, QR e indicador del menú */
.wa-card .conn-status { margin: 14px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-size: 14px; }
.wa-card .connection-action { margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.wa-card.wa-st-connected { border-left: 3px solid var(--ok); } .wa-card.wa-st-qr, .wa-card.wa-st-connecting { border-left: 3px solid #f5a524; } .wa-card { min-width: 0; } .wa-card.wa-st-qr { min-height: 0; }
.wa-qr-box { display: flex; flex-direction: column; gap: 14px; align-items: center; margin-top: 4px; padding: 14px; border: 1px dashed #e7c27a; border-radius: 12px; background: var(--bg); }
.wa-qr { display: block; width: 176px; height: 176px; padding: 8px; border-radius: 12px; background: #fff; flex: none; }
.wa-steps { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; align-self: stretch; }
.conn-chip.on { border-color: #bfe3cd; background: #f1faf4; } .conn-chip.on .small { color: var(--ok); }
.wa-pill { display: flex; align-items: center; gap: 8px; margin: 0 8px 8px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: rgba(255,255,255,.08); color: #e6edf8; font-size: 12px; font-weight: 700; text-decoration: none !important; }
.wa-pill[hidden] { display: none; } .wa-pill i { width: 8px; height: 8px; border-radius: 50%; background: #9aa7ba; flex: none; }
.wa-pill.connected i { background: #20844f; } .wa-pill.qr i, .wa-pill.connecting i { background: #f5a524; }
.collapsed .wa-pill span { display: none; } .collapsed .wa-pill { justify-content: center; margin: 0 4px 8px; padding: 8px 0; }
.chat-status { display: block; margin-top: 4px; text-align: right; font-size: 10px; color: #a9c3df; } .chat-status.read { color: #7fd1ff; }
.wa-tech { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line); }
.wa-tech summary { cursor: pointer; font-size: 13px; font-weight: 700; color: var(--muted); list-style: none; display: flex; align-items: center; gap: 6px; }
.wa-tech summary::-webkit-details-marker { display: none; } .wa-tech summary::before { content: '›'; display: inline-block; transition: transform .15s; } .wa-tech[open] summary::before { transform: rotate(90deg); }
.wa-tech p { margin: 10px 0 0; line-height: 1.5; }
.wa-limits { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 12px; } .wa-limits .field { flex: 1 1 110px; min-width: 0; margin: 0; } .wa-limits .btn { align-self: center; }
.badge.tag { background: color-mix(in srgb, var(--tag) 14%, transparent); color: var(--tag); }
.mc-card .mc-form { margin-top: 16px; } .mc-card .mail-chips { margin-bottom: 12px; }
.mc-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; } .mc-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; } .mc-addr { min-width: 0; font-size: 14px; font-weight: 600; }
.mc-acts { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.mc-card .connection-action { margin-top: auto; padding-top: 18px; flex-wrap: wrap; }
.ag-card { min-height: 0; margin-bottom: 18px; } .ag-card .ag-form { display: flex; gap: 10px; align-items: flex-start; } .ag-card .ag-form .field { flex: 1; min-width: 0; margin: 0; }
.ag-card .ag-hook { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; } .ag-card .ag-hook summary { cursor: pointer; font-weight: 600; margin-bottom: 8px; } .ag-card .ag-hook p { margin: 8px 0; }
.ag-card .ag-key { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; } .ag-card .ag-key .field { flex: 1; min-width: 0; margin: 0; } .ag-card .ag-note { margin-top: 10px; }
@media (max-width: 640px) { .ag-card .ag-form, .ag-card .ag-key { flex-direction: column; align-items: stretch; } }
.task .task-done { align-self: center; flex-shrink: 0; white-space: nowrap; } .task .task-done svg { width: 14px; height: 14px; margin-right: 4px; }
.kind-badge { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; margin-right: 8px; vertical-align: 1px; }
.kind-badge.k-meeting { background: #E3F0FD; color: #1565C0; } .kind-badge.k-task { background: #FFF4D6; color: #8A6100; }
.agenda-visible label i { width: 9px; height: 9px; border-radius: 50%; background: #1976D2; } .agenda-visible label.k-task i { background: #F5B80F; }
.agenda-week-item.k-meeting, .agenda-day > span.k-meeting { background: #E3F0FD; color: #1565C0; border-color: #BBD9F7; } .agenda-week-item.k-task, .agenda-day > span.k-task { background: #FFF4D6; color: #6B4D00; border-color: #F2DCA0; }
.agenda-week-item.k-meeting b, .agenda-week-item.k-task b { color: inherit; }