:root {
  --green: #16a34a;
  --green-d: #15803d;
  --green-l: #dcfce7;
  --ink: #0b1220;
  --muted: #64748b;
  --line: #e6eaf0;
  --bg: #f4f6fa;
  --bg-soft: #f1f5f9;
  --card: #ffffff;
  --amber: #f59e0b;
  --red: #ef4444;
  --ink-panel: #0c1322;
  --shadow: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.05);
  --shadow-lg: 0 10px 30px rgba(15,23,42,.12);
}
/* Tema oscuro: solo redefine las variables; el resto de la hoja las usa. */
[data-theme="dark"] {
  --green: #22c55e;
  --green-d: #4ade80;
  --green-l: #14351f;
  --ink: #e7efe9;
  --muted: #94a7a0;
  --line: #29352f;
  --bg: #0e1512;
  --bg-soft: #16201b;
  --card: #151e19;
  --ink-panel: #0a0f0d;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 32px rgba(0,0,0,.55);
}
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; -webkit-font-smoothing: antialiased;
}

/* ===================== Barra superior ===================== */
.appbar {
  height: 64px; background: var(--card); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 max(24px, calc((100% - var(--maxw)) / 2 + 34px));
  position: sticky; top: 0; z-index: 30;
}
.appbar-left { display: flex; align-items: center; gap: 18px; flex: 1; }
.appbar-right { display: flex; align-items: center; gap: 12px; }
.logo { font-size: 19px; font-weight: 800; cursor: pointer; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; }
.logo-mark { color: var(--green); display: flex; }
.search { flex: 1; max-width: 460px; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 11px; padding: 8px 13px; color: var(--muted); }
.search input { border: none; background: none; outline: none; flex: 1; font-size: 13px; padding: 0; }
.sys-sel { display: flex; flex-direction: column; gap: 1px; }
.sys-sel label { font-size: 9px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 700; }
.sys-sel select { padding: 4px 8px; border-radius: 8px; font-size: 12px; font-weight: 600; }
.icon-btn { position: relative; background: none; border: none; color: var(--muted); width: 38px; height: 38px; border-radius: 10px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.icon-btn:hover { background: var(--bg); color: var(--ink); }
.badge-dot { position: absolute; top: 4px; right: 4px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; min-width: 15px; height: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; }
.user-chip { display: flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px; border-radius: 22px; font-size: 13px; font-weight: 600; background: var(--bg); border: 1px solid var(--line); }
.user-av { width: 30px; height: 30px; border-radius: 50%; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.search-kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 11px; font-weight: 600; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; cursor: pointer; font-family: inherit; white-space: nowrap; }
.ayuda-tip { position: fixed; z-index: 99999; max-width: 260px; background: #0f172a; color: #f1f5f9; font-size: 12px; line-height: 1.4; padding: 8px 11px; border-radius: 9px; box-shadow: 0 8px 28px rgba(0,0,0,.28); pointer-events: none; border: 1px solid rgba(255,255,255,.08); }
.ayuda-tip.hidden { display: none; }
/* Asistente de alta de usuario (pasos) */
.alta-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.alta-dot { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); padding: 3px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); }
.alta-dot b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--line); color: var(--muted); font-size: 11px; }
.alta-dot.on { border-color: var(--green); color: var(--green-d); background: color-mix(in srgb, var(--green) 8%, transparent); }
.alta-dot.on b { background: var(--green); color: #fff; }
.alta-dot.done b { background: var(--green); color: #fff; }
.callout-mini { font-size: 12.5px; background: var(--bg); border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; color: var(--muted); }
/* Ciclo de vida: historial de cambios */
.cv-hist { border-top: 1px dashed var(--line); padding-top: 10px; margin-top: 4px; display: grid; gap: 6px; }
.cv-h { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; font-size: 12.5px; flex-wrap: wrap; }
.cv-h span { color: var(--ink); }
.btn.danger { background: var(--red, #dc2626); color: #fff; border-color: var(--red, #dc2626); }
.btn.danger:hover { filter: brightness(.94); }
/* Consola de configuración: navegación por grupos */
.cfg-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: flex-end; margin: 4px 0 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.cfg-grp { display: flex; flex-direction: column; gap: 5px; }
.cfg-grp-t { font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 700; padding-left: 2px; }
.cfg-grp-tabs { display: flex; gap: 5px; flex-wrap: wrap; }
.cfg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.rol-card { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--bg); }
/* Biblioteca de Marketing */
.mkt-crumbs { font-size: 13.5px; color: var(--muted); }
.mkt-crumbs a { color: var(--accent, #16a34a); cursor: pointer; }
.mkt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.mkt-card { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card, #fff); }
.mkt-card.carpeta { cursor: pointer; }
.mkt-card.carpeta:hover { border-color: var(--accent, #16a34a); }
.mkt-card .mkt-ico { font-size: 22px; flex: none; }
.mkt-card b { display: block; font-size: 13.5px; }
.mkt-del { border: 0; background: transparent; color: var(--muted); cursor: pointer; font-size: 13px; flex: none; }
.mkt-del:hover { color: var(--red, #dc2626); }
.search { position: relative; }
.user-meta { display: flex; flex-direction: column; line-height: 1.15; }
.user-meta #user-role { font-size: 10.5px; font-weight: 600; color: var(--green); }

/* selector de país (idioma + moneda) */
.country-btn { display: flex; align-items: center; gap: 7px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 13px; font-size: 13px; font-weight: 700; cursor: pointer; }
.country-btn:hover { border-color: var(--green); }
.country-btn .flag { font-size: 16px; }
.pais-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 6px; }
@media (max-width: 620px) { .pais-grid { grid-template-columns: 1fr 1fr; } }
.pais-card { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 13px; cursor: pointer; transition: .15s; }
.pais-card:hover { border-color: var(--green); background: var(--bg); }
.pais-card.active { border-color: var(--green); background: var(--green-l); }
.pais-flag { font-size: 26px; }
.pais-card b { font-size: 13.5px; display: block; } .pais-card small { color: var(--muted); font-size: 11.5px; }

/* pipeline Kanban (CRM) */
.pipeline { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.pcol { background: var(--bg-soft); border-radius: 12px; padding: 10px; min-height: 160px; transition: .15s; }
.pcol.over { background: var(--green-l); outline: 2px dashed var(--green); }
.pcol-head { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 4px 4px 2px; }
.pcol-head b { flex: 1; } .pcount { background: rgba(0,0,0,.08); border-radius: 9px; padding: 0 7px; font-size: 11px; font-weight: 700; }
.pcol-total { font-size: 11px; color: var(--muted); font-weight: 600; padding: 0 4px 8px; }
.pcol-body { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.pcol-empty { text-align: center; color: var(--muted); font-size: 12px; padding: 12px; }
.deal { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px; cursor: grab; box-shadow: var(--shadow); transition: .12s; }
.deal:hover { box-shadow: var(--shadow-lg); transform: translateY(-1px); }
.deal:active { cursor: grabbing; }
.deal-title { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.deal-cli { font-size: 11.5px; color: var(--muted); }
.deal-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.deal-monto { font-size: 13px; font-weight: 700; color: var(--green-d); }
.deal-prob { font-size: 11px; background: var(--bg-soft); border-radius: 8px; padding: 1px 7px; color: var(--muted); font-weight: 600; }
.deal-tag { margin-top: 7px; font-size: 10px; color: var(--muted); background: var(--bg); border-radius: 6px; padding: 2px 7px; display: inline-block; }
.deal-ml { margin-top: 7px; font-size: 10.5px; font-weight: 700; border-radius: 6px; padding: 3px 7px; text-align: center; }

/* ===== Pantalla de inicio de sesión ===== */
.login-screen{position:fixed;inset:0;z-index:100;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{display:grid;grid-template-columns:1fr 1fr;max-width:980px;width:100%;background:var(--card);border-radius:22px;overflow:hidden;box-shadow:0 30px 80px rgba(15,23,42,.22);min-height:600px}
@media(max-width:820px){.login-card{grid-template-columns:1fr}.login-left{display:none!important}}
.login-left{background:var(--ink-panel);color:#e2e8f0;padding:44px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.login-left::before{content:"";position:absolute;top:-90px;right:-90px;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.28),transparent 70%);pointer-events:none}
.login-left::after{content:"";position:absolute;bottom:-70px;left:-70px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(34,197,94,.12),transparent 70%);pointer-events:none}
.login-left>*{position:relative;z-index:1}
.login-brand{display:flex;align-items:center;gap:12px;font-weight:850;font-size:23px;color:#fff}
.login-brand small{display:block;font-size:10px;color:#86efac;letter-spacing:.14em;margin-top:-3px;font-weight:700}
.login-pitch{margin:28px 0}
.login-pitch h2{font-size:33px;line-height:1.12;font-weight:850;letter-spacing:-.02em;color:#fff}
.login-pitch p{color:#94a3b8;font-size:14.5px;margin-top:16px;max-width:340px}
.login-feats{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:11px;color:#cbd5e1;font-size:14px}
.login-feats li{color:#cbd5e1}
.login-note{color:#86efac;font-size:13px;font-weight:600;background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);border-radius:11px;padding:11px 14px;display:inline-block}
.login-right{padding:48px 46px;display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.login-right h1{font-size:26px;font-weight:800}
.lg-sub{color:var(--muted);font-size:14px;margin:6px 0 22px}
.lg-sso{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid var(--line);background:var(--card);border-radius:11px;padding:12px;font-size:14.5px;font-weight:600;cursor:pointer;margin-bottom:10px;font-family:inherit}
.lg-sso:hover{background:var(--bg)}
.lg-sso.dark{background:#0f172a;color:#fff;border-color:var(--ink)}.lg-sso.dark:hover{background:#1e293b}
.lg-or{display:flex;align-items:center;text-align:center;color:var(--muted);font-size:12px;margin:16px 0}
.lg-or::before,.lg-or::after{content:"";flex:1;height:1px;background:var(--line)}
.lg-or span{padding:0 12px}
.lg-label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px;display:block}
.lg-input{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:11px;padding:0 13px;margin-bottom:16px;background:var(--card)}
.lg-input:focus-within{outline:2px solid var(--green-l);border-color:var(--green)}
.lg-input input{flex:1;border:none;outline:none;padding:13px 0;font-size:14.5px;background:none}
.lg-eye{background:none;border:none;cursor:pointer;font-size:15px;opacity:.6}
.lg-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;font-size:13.5px}
.lg-check{display:flex;align-items:center;gap:7px;color:var(--muted);cursor:pointer}
.lg-forgot{color:var(--green-d);font-weight:600;cursor:pointer}
.lg-submit{width:100%;background:var(--green);color:#fff;border:none;border-radius:11px;padding:14px;font-size:15.5px;font-weight:700;cursor:pointer;font-family:inherit}
.lg-submit:hover{background:var(--green-d)}
.lg-2fa{display:flex;align-items:center;gap:12px;background:var(--green-l);border-radius:13px;padding:14px;margin-top:18px}
.lg-2fa-ico{width:36px;height:36px;border-radius:10px;background:var(--card);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}
.lg-2fa b{font-size:13.5px;color:var(--green-d);display:block}.lg-2fa span{font-size:12px;color:#3f6212}
.lg-switch{margin-left:auto;position:relative;width:42px;height:24px;flex-shrink:0}
.lg-switch input{display:none}
.lg-switch span{position:absolute;inset:0;background:#cbd5e1;border-radius:14px;transition:.2s;cursor:pointer}
.lg-switch span::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;background:var(--card);border-radius:50%;transition:.2s}
.lg-switch input:checked+span{background:var(--green)}.lg-switch input:checked+span::after{left:21px}
.lg-foot{text-align:center;color:var(--muted);font-size:13.5px;margin-top:18px}
.lg-foot a{color:var(--green-d);font-weight:700}
.lg-code{display:flex;gap:8px;justify-content:center;margin:14px 0}
.lg-code input{width:46px;height:54px;text-align:center;font-size:22px;font-weight:700;border:1px solid var(--line);border-radius:10px}

/* ===== Tareas mejoradas (Asana/ClickUp) ===== */
.tini{width:24px;height:24px;border-radius:50%;color:#fff;font-size:10px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ttags{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.ttag{background:var(--bg-soft);color:var(--muted);border-radius:6px;padding:1px 7px;font-size:10.5px;font-weight:600}
.trisk{font-size:10.5px;font-weight:700;border-radius:6px;padding:1px 7px}
.tcard{transition:.12s}
.qadd{width:100%;border:1px dashed var(--line);background:var(--card);border-radius:9px;padding:8px 10px;font-size:12.5px;margin-top:4px}
.qadd:focus{outline:2px solid var(--green-l);border-color:var(--green);border-style:solid}
.td-title{font-size:20px;font-weight:800;border:none;outline:none;width:100%;padding:2px 0;background:none}
.td-title:focus{border-bottom:2px solid var(--green)}
.td-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media(max-width:600px){.td-grid{grid-template-columns:1fr 1fr}}
.td-sub{display:flex;align-items:center;gap:9px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed var(--line);cursor:pointer}
.td-sub input{width:auto}
/* calendario */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-head div{text-align:center;font-size:11px;font-weight:700;color:var(--muted);padding-bottom:8px;text-transform:uppercase}
.cal-cell{min-height:82px;border:1px solid var(--line);border-radius:9px;padding:6px}
.cal-cell.empty{border:none;background:none}
.cal-cell.today{border-color:var(--green);background:var(--green-l)}
.cal-num{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px}
.cal-t{font-size:10.5px;background:var(--card);border-radius:5px;padding:2px 6px;margin-bottom:3px;cursor:pointer;box-shadow:var(--shadow);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Panel de detalle de tarea (anclado a la derecha) ===== */
.taskpanel-bg{position:fixed;inset:0;z-index:65;background:rgba(11,18,32,.18)}
.taskpanel{position:absolute;top:0;right:0;height:100%;width:580px;max-width:96vw;background:var(--card);box-shadow:-14px 0 44px rgba(15,23,42,.16);display:flex;flex-direction:column;animation:slideIn .18s ease}
.taskpanel.ancho{width:760px}
@keyframes slideIn{from{transform:translateX(30px);opacity:.6}to{transform:none;opacity:1}}
.tp-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line)}
.tp-body{flex:1;overflow-y:auto;padding:18px 20px}
.tp-foot{padding:14px 20px;border-top:1px solid var(--line)}
.tp-body .td-title{font-size:21px;margin-bottom:6px}
.tp-body .section-title{margin:20px 0 8px}
/* Gantt / WBS */
.g-scale{display:flex;align-items:center;height:26px;border-bottom:1px solid var(--line);margin-bottom:6px}
.g-proj{font-weight:800;font-size:13px;margin:14px 0 6px;color:var(--ink)}
.g-row{display:flex;align-items:center;gap:10px;padding:3px 0;cursor:pointer;border-radius:6px}
.g-row:hover{background:var(--bg)}
.g-label{width:220px;flex-shrink:0;font-size:12.5px;display:flex;align-items:center;justify-content:space-between;gap:6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.g-resp .tini{width:20px;height:20px;font-size:9px}
.g-track{position:relative;flex:1;height:22px}
.g-ticks{height:26px}
.g-ticks span{position:absolute;font-size:10px;color:var(--muted);transform:translateX(-50%)}
.g-bar{position:absolute;top:3px;height:16px;border-radius:5px;color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;min-width:14px;box-shadow:var(--shadow)}
.tp-approve{background:#fef9c3;border:1px solid #fde047;border-radius:11px;padding:12px}

.adv-switch{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer}
.adv-switch input{width:auto}
/* picker de personas / entidades */
.pick-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:7px}
.pick-chip{display:inline-flex;align-items:center;gap:6px;background:var(--green-l);color:var(--green-d);border-radius:18px;padding:3px 6px 3px 4px;font-size:12px;font-weight:600}
.pick-chip .tini{width:20px;height:20px;font-size:9px}
.pick-chip button{background:none;border:none;cursor:pointer;color:var(--green-d);font-size:12px}
.pick-search{position:relative}
.pick-list,.ent-pick .pick-list{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow-lg);z-index:5;max-height:180px;overflow-y:auto;display:none;margin-top:3px}
.pick-opt{display:flex;align-items:center;gap:8px;padding:8px 11px;font-size:13px;cursor:pointer}
.pick-opt:hover{background:var(--green-l)}
.ent-pick{position:relative}
.ent-chip{display:inline-flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:13px;font-weight:600;margin-top:8px}
.ent-chip button{background:none;border:none;cursor:pointer;color:var(--muted)}
.tp-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tp-chip{background:var(--green-l);color:var(--green-d);border-radius:20px;padding:4px 11px;font-size:11.5px;font-weight:600}
.tp-adv{margin-top:14px;border:1px solid var(--line);border-radius:12px;padding:8px 14px;background:var(--bg)}
.tp-adv summary{cursor:pointer;font-size:13px;font-weight:700;color:var(--ink);padding:4px 0;list-style:none}
.tp-adv summary::-webkit-details-marker{display:none}
.tp-adv[open]{padding-bottom:14px}
select.multi{padding:4px;height:auto}
select.multi option{padding:5px 8px;border-radius:6px}
.tp-dep{font-size:12.5px;border-radius:9px;padding:8px 11px;margin-top:8px}
.tp-dep.block{background:#fee2e2;color:#991b1b}
.tp-dep.ok{background:var(--green-l);color:var(--green-d)}
@media(max-width:520px){.taskpanel{width:100%}}

/* ===== Chat: grupos y urgencia ===== */
.cw-groups{display:flex;gap:5px;padding:8px 10px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--card)}
.cw-grp{background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:5px 11px;font-size:11.5px;font-weight:600;color:var(--muted);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:5px}
.cw-grp.active{background:var(--green);color:#fff;border-color:var(--green)}
.cw-urg{background:var(--red);color:#fff;border-radius:9px;font-size:9px;padding:0 5px;font-weight:800}
.cw-grp.active .cw-urg{background:var(--card);color:var(--red)}
.cw-bubble.urgente{border-color:#fca5a5;background:#fff5f5}
.cw-badge-urg{font-size:9px;font-weight:800;color:var(--red)}
.cw-urg-btn{border:1px solid var(--line);background:var(--card);border-radius:9px;width:34px;cursor:pointer;font-size:13px;opacity:.5;flex-shrink:0}
.cw-urg-btn.on{opacity:1;background:#fee2e2;border-color:#fca5a5}

/* notificaciones (campana) */
.noti-wrap { position: relative; }
.noti-panel { position: absolute; top: 46px; right: 0; width: 320px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg); z-index: 60; max-height: 70vh; overflow-y: auto; padding: 6px; }
.noti-head { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; padding: 10px 12px 6px; }
.noti-item { width: 100%; text-align: left; background: none; border: none; display: flex; gap: 11px; align-items: center; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.noti-item:hover { background: var(--bg); }
.noti-ico { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.noti-item b { font-size: 13px; display: block; } .noti-item small { color: var(--muted); font-size: 11.5px; }

/* comentarios / timeline de actividad */
.cm-item { display: flex; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.cm-av { width: 28px; height: 28px; border-radius: 8px; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.cm-meta { font-size: 11px; color: var(--muted); margin-bottom: 2px; }

/* conmutador de vista (Kanban / Lista) */
.vista-toggle { display: inline-flex; background: var(--bg-soft); border-radius: 10px; padding: 3px; gap: 2px; }
.vista-toggle button { background: none; border: none; padding: 6px 13px; border-radius: 8px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.vista-toggle button.active { background: var(--card); color: var(--green-d); box-shadow: var(--shadow); }

/* iconos blancos sobre tiles de color */
.m-ico, .mh-ico, .b-ico, .a-ico { color: #fff; }
.m-ico svg, .mh-ico svg, .b-ico svg, .a-ico svg { display: block; }

/* pestañas de módulo (segmentadas, estilo app) */
.modtabs { display: flex; gap: 4px; margin-bottom: 22px; overflow-x: auto; padding: 5px; background: var(--bg-soft); border-radius: 13px; }
.modtabs::-webkit-scrollbar { height: 6px; } .modtabs::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
.modtab { background: none; border: none; border-radius: 9px; padding: 8px 14px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; display: flex; align-items: center; gap: 7px; transition: .14s; }
.modtab:hover { color: var(--ink); background: rgba(255,255,255,.6); }
.modtab.active { color: var(--green-d); background: var(--card); box-shadow: var(--shadow); }
.modtab b { background: #e2e8f0; color: var(--muted); border-radius: 9px; padding: 0 7px; font-size: 11px; min-width: 18px; text-align: center; }
.modtab.active b { background: var(--green); color: #fff; }

/* botón de ayudas */
.help-btn { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: 12px; font-weight: 700; cursor: pointer; color: var(--muted); }
.help-btn.on { background: #fef9c3; border-color: #fde047; color: #854d0e; }
.field-help { font-size: 11px; color: var(--muted); margin-top: 2px; line-height: 1.35; }

/* panel Mi espacio clicable */
.me-open { width: 100%; text-align: left; background: none; border: none; color: inherit; cursor: pointer; padding: 0 0 14px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 14px; }
.me-open:hover .me-sub { color: var(--green); }

/* switches de configuración de campos */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; margin-bottom: 6px; }
.cfg-toggle { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); cursor: pointer; padding: 7px 10px; border: 1px solid var(--line); border-radius: 9px; }
.cfg-toggle.on { color: var(--ink); border-color: #cbeccd; background: #f6fdf7; }
.cfg-toggle input { display: none; }
.cfg-toggle .sw { width: 32px; height: 18px; border-radius: 10px; background: #cbd5e1; position: relative; transition: .15s; flex-shrink: 0; }
.cfg-toggle .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--card); transition: .15s; }
.cfg-toggle.on .sw { background: var(--green); }
.cfg-toggle.on .sw::after { left: 16px; }

:root { --maxw: 1500px; }
#screen { max-width: var(--maxw); margin: 0 auto; padding: 30px 34px; }
/* Galería de capturas del Agente de Escritorio (Seguridad) */
.seg-cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.seg-cap { display: block; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--bg); text-decoration: none; transition: .15s; }
.seg-cap:hover { border-color: var(--green); transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.seg-cap img { width: 100%; height: 96px; object-fit: cover; display: block; background: #0b1220; }
.seg-cap-t { display: block; font-size: 10.5px; color: var(--muted); padding: 4px 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Mini-tableros consolidados (Gerencial / BI / Capa AI / Mi Espacio) */
.tabmini-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tabmini { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; cursor: pointer; transition: .15s; }
.tabmini:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--green); }
.tabmini-h { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13.5px; gap: 8px; }
.tabmini-h b { font-size: 18px; font-variant-numeric: tabular-nums; }
.tabmini-r { color: var(--muted); font-size: 12px; margin-top: 6px; line-height: 1.45; }
.tabmini-c { font-size: 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); line-height: 1.4; }
@media (max-width: 640px) { #screen { padding: 18px 16px; } .tabmini-grid { grid-template-columns: 1fr 1fr; } }
/* Responsivo global: en teléfono las tablas hacen scroll horizontal en vez de romper el layout */
@media (max-width: 680px) {
  table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; }
  table thead, table tbody { display: table; width: 100%; min-width: max-content; }
}