/* CRM: complementos sobre el estilo de Talento (app.css) */
.kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kpis.kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kv.kv-1 { grid-template-columns: 1fr; gap: 12px; }
.kv .big { font-size: 20px; font-weight: 700; display: block; }
.opp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.opp-side { position: sticky; top: 80px; }
.crm-board { grid-auto-columns: minmax(230px, 1fr); }
.kcol-closed { opacity: .92; }
.kcol-sum { padding: 6px 14px 0; }
.kcol-empty { text-align: center; padding: 18px 0; border: 1px dashed var(--border-strong); border-radius: 10px; }
.avatar.xs { width: 22px; height: 22px; font-size: 11px; }
.stage-bar { display: flex; gap: 6px; padding: 10px; margin-bottom: 20px; overflow-x: auto; }
.stage-step { flex: 1; min-width: 110px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); border-radius: 999px;
  height: 36px; font: 600 12.5px var(--font); cursor: pointer; white-space: nowrap; padding: 0 12px; }
.stage-step:hover { border-color: var(--c); color: var(--ink); }
.stage-step.past { background: color-mix(in srgb, var(--c) 14%, var(--surface)); border-color: color-mix(in srgb, var(--c) 40%, var(--surface)); color: var(--ink); }
.stage-step.on { background: var(--c); border-color: var(--c); color: #fff; }
.stage-step.k-won:not(.on) { border-style: dashed; } .stage-step.k-lost:not(.on) { border-style: dashed; }
.hist-row { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.hist-row:last-child { border-bottom: 0; }
.ai-list ul { margin: 4px 0 10px; padding-left: 18px; font-size: 13px; } .ai-list li { margin-bottom: 3px; }
.ai-box { border-top: 1px solid var(--border); padding-top: 12px; }
.goal-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 18px; }
.goal-bar { position: relative; height: 10px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); margin: 6px 0 4px; overflow: visible; }
.goal-bar i { display: block; height: 100%; border-radius: 99px; background: var(--primary); }
.goal-bar i.cumplida { background: var(--good); } .goal-bar i.atrasada { background: var(--warn); }
.goal-bar em { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink-2); border-radius: 2px; }
.tl-dot.good { color: var(--good); } .tl-dot.bad { color: var(--bad); }
.person { display: flex; gap: 10px; align-items: center; text-decoration: none; color: inherit; }
.person small { display: block; color: var(--ink-3); }
@media (max-width: 1100px) { .opp-grid { grid-template-columns: 1fr; } .opp-side { position: static; } .kpis.kpis-4 { grid-template-columns: repeat(2, 1fr); } }
.grow { flex: 1; }
/* Línea de tiempo de actividades */
.timeline .tl-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border); }
.timeline .tl-item:last-child { border-bottom: 0; }
.timeline .tl-dot { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2);
  border: 1px solid var(--border); color: var(--ink-3); position: static; }
.timeline .tl-dot.good { color: var(--good); border-color: var(--good-bd); background: var(--good-50); }
.timeline .tl-dot.bad { color: var(--bad); border-color: var(--bad-bd); background: var(--bad-50); }
.timeline .tl-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Formularios: datos a la izquierda, comercial responsable (y estado) a la derecha */
.form-split { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 22px; align-items: start; }
.form-side { display: grid; gap: 14px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; position: sticky; top: 0; }
.owner-ro { display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); font-weight: 500; }
.consent { padding: 12px 14px; border: 1px dashed var(--warn-bd); background: var(--warn-50); border-radius: 10px; }
.consent.ok { border-color: var(--good-bd); background: var(--good-50); }
.consent .check { align-items: flex-start; font-weight: 400; } .consent .check input { margin-top: 3px; }
@media (max-width: 860px) { .form-split { grid-template-columns: 1fr; } .form-side { position: static; } }
/* Ventanas con columna lateral: más anchas para que la columna de datos no quede apretada */
.modal:has(.form-split) { width: min(980px, 100%); max-width: 980px; }
.modal:has(.form-split) .form-split { grid-template-columns: minmax(0, 1fr) 260px; }
/* ===== Registro con panel de actividades a la derecha ===== */
.record-layout { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: start; }
.record-single { max-width: 980px; }
.owner-inline { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.owner-inline select.input { width: 230px; height: 36px; }
.owner-inline .owner-ro { height: 36px; }
.card-pad .divider { height: 1px; background: var(--border); margin: 2px 0; }
.act-panel { position: sticky; top: 76px; max-height: calc(100vh - 96px); display: flex; flex-direction: column; overflow: hidden; }
.act-panel .ap-tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border); overflow-x: auto; flex: none; }
.act-panel .ap-tabs button { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-2);
  border-radius: 99px; height: 28px; padding: 0 10px; font: 600 12px var(--font); cursor: pointer; white-space: nowrap; }
.act-panel .ap-tabs button span:last-child { color: var(--ink-3); font-weight: 500; }
.act-panel .ap-tabs button.on { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary-600); }
.act-panel .ap-compose { padding: 12px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); display: grid; gap: 10px; flex: none; }
.act-panel .ap-kinds { flex-wrap: wrap; } .act-panel .ap-kinds button { height: 28px; padding: 0 8px; font-size: 12px; }
.act-panel .ap-body { overflow-y: auto; flex: 1; min-height: 120px; }
.ap-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.ap-item:last-child { border-bottom: 0; }
.ap-item.is-done .ap-title b { color: var(--ink-2); font-weight: 600; }
.ap-ico { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-3); }
.ap-ico.good { color: var(--good); background: var(--good-50); border-color: var(--good-bd); }
.ap-ico.bad { color: var(--bad); background: var(--bad-50); border-color: var(--bad-bd); }
.ap-title { font-size: 13.5px; line-height: 1.3; }
.ap-meta { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11.5px; margin-top: 3px; color: var(--ink-2); }
.ap-meta.muted { color: var(--ink-3); }
.ap-meta .badge { height: 18px; font-size: 10.5px; padding: 0 7px; }
.ap-text { font-size: 12.5px; color: var(--ink-2); margin: 6px 0 0; white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; cursor: pointer; }
.ap-text.open { -webkit-line-clamp: unset; display: block; }
.ap-actions { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 1200px) { .record-layout { grid-template-columns: 1fr; } .act-panel { position: static; max-height: none; } .owner-inline { margin-left: 0; } }
/* ===== Barra derecha del registro: dueño · vinculado · actividades ===== */
.record-layout { grid-template-columns: minmax(0, 1fr) 400px; }
.record-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 96px); min-width: 0; }
.record-side .side-card { padding: 14px 16px; display: grid; gap: 8px; flex: none; }
.side-title { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .04em; }
.side-title .icon { color: var(--primary); }
.record-side .act-panel { position: static; max-height: none; flex: 1; min-height: 260px; }
.linked { display: grid; gap: 8px; font-size: 13px; }
.linked div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px; align-items: baseline; }
.linked small { color: var(--ink-3); font-size: 11.5px; }
.linked a, .linked span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1200px) { .record-side { position: static; max-height: none; } .record-side .act-panel { min-height: 0; } }
.side-card .hint { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }