:root{
  --primary:#0a2463; --secondary:#1e3a8a; --accent:#3b82f6; --navy:#001233; --navy2:#0f2557;
  --cyan:#00d9ff; --warm:#f59e0b; --warm2:#ea580c;
  --ink:#0f172a; --muted:#64748b; --slate:#94a3b8; --line:#e2e8f0; --line2:#eef2f8;
  --bg:#f4f7fc; --white:#fff;
  --good:#10b981; --good-bg:#e7f8f1; --warn:#f59e0b; --warn-bg:#fdf3e0; --crit:#ef4444; --crit-bg:#fdeceb;
  --grad:linear-gradient(135deg,#0a2463 0%,#1e3a8a 100%);
  --grad-cyan:linear-gradient(135deg,#00d9ff 0%,#3b82f6 100%);
  --grad-warm:linear-gradient(135deg,#f59e0b 0%,#ea580c 100%);
  --shadow:0 1px 3px rgba(10,36,99,.06),0 8px 24px rgba(10,36,99,.06);
  --shadow-lg:0 12px 34px rgba(10,36,99,.14);
}
*{box-sizing:border-box}
body{margin:0;font-family:'Outfit','Segoe UI',sans-serif;background:var(--bg);color:var(--ink);
  line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:'Sora','Segoe UI',sans-serif}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer}

.app{display:grid;grid-template-columns:232px 1fr;min-height:100vh}

/* ---------- Sidebar ---------- */
.side{background:var(--navy);color:#c7d3e8;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.side .brand{padding:22px 20px 18px;border-bottom:1px solid rgba(255,255,255,.08)}
/* Logo ancho (4.35:1): se dimensiona por ancho para llenar el sidebar de forma predecible. */
.side .brand img{width:100%;max-width:168px;height:auto;display:block}
.nav{padding:14px 12px;display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto}
.nav .label{font-size:.62rem;letter-spacing:1px;text-transform:uppercase;color:var(--slate);
  padding:12px 12px 6px;font-weight:700}
.nav a{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:9px;color:#c7d3e8;
  font-size:.9rem;font-weight:500;transition:.15s}
.nav a svg{width:18px;height:18px;stroke-width:1.9;flex:0 0 auto}
.nav a:hover{background:rgba(255,255,255,.06);color:#fff}
.nav a.active{background:var(--grad-cyan);color:#04121f;font-weight:700}
.nav a.active svg{stroke:#04121f}
.nav a .badge{margin-left:auto;background:var(--warm2);color:#fff;font-size:.62rem;font-weight:800;
  border-radius:99px;padding:1px 7px;font-family:'Sora'}
.nav a.active .badge{background:#04121f;color:var(--cyan)}
.side .who{padding:14px 16px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px}
.side .who .av{width:34px;height:34px;border-radius:50%;background:var(--grad-warm);display:flex;
  align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.85rem;font-family:'Sora'}
.side .who .nm{font-size:.82rem;font-weight:600;color:#fff}
.side .who .rl{font-size:.68rem;color:var(--slate)}
/* Crédito al pie del contenido */
.foot{margin-top:auto;padding:18px 28px 22px;border-top:1px solid var(--line);
  font-size:.76rem;color:var(--muted);text-align:center;background:var(--white)}
.foot strong{color:var(--secondary);font-family:'Sora';font-weight:700;letter-spacing:.3px}

/* ---------- Barra móvil (logo fijo + hamburguesa) ---------- */
.mbar{display:none;position:sticky;top:0;z-index:60;background:var(--navy);
  padding:11px 16px;align-items:center;justify-content:space-between;gap:12px;
  box-shadow:0 2px 12px rgba(0,18,51,.25)}
.mbar img{width:132px;height:auto;display:block}
.burger{width:40px;height:40px;border:0;border-radius:10px;background:rgba(255,255,255,.1);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;flex:0 0 auto}
.burger i{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:.22s}
.burger[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.backdrop{display:none;position:fixed;inset:0;background:rgba(0,18,51,.55);z-index:55;
  opacity:0;transition:opacity .22s}
.backdrop.open{opacity:1}

/* ---------- Main ---------- */
.main{display:flex;flex-direction:column;min-width:0;overflow-x:hidden}
.topbar{background:var(--white);border-bottom:1px solid var(--line);padding:16px 28px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.topbar h1{font-size:1.3rem;margin:0;font-weight:700}
.topbar .crumb{font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px}
.topbar .actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn{border:0;border-radius:9px;padding:9px 16px;font-size:.85rem;font-weight:600;display:inline-block}
.btn.primary{background:var(--grad);color:#fff}
.btn.ghost{background:var(--bg);color:var(--secondary);border:1px solid var(--line)}
.pill-erp{font-size:.68rem;font-weight:700;color:#0a7d40;background:var(--good-bg);
  border:1px solid rgba(16,185,129,.3);padding:5px 10px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px}
.pill-erp::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 0 rgba(16,185,129,.6);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)}70%{box-shadow:0 0 0 6px rgba(16,185,129,0)}
  100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
.content{padding:26px 28px}

/* ---------- KPI ---------- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.kpi{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:18px 20px;box-shadow:var(--shadow)}
.kpi .k-ico{float:right;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center}
.kpi .k-ico svg{width:20px;height:20px;stroke-width:1.9}
.kpi .k-lbl{font-size:.74rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.kpi .k-val{font-size:1.7rem;font-weight:800;font-family:'Sora';margin:6px 0 2px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.kpi .k-tr{font-size:.76rem;font-weight:700}
.kpi .k-tr.up{color:var(--good)} .kpi .k-tr.down{color:var(--crit)} .kpi .k-tr.neu{color:var(--muted)}

/* ---------- Paneles ---------- */
/* minmax(0,…) evita que una tabla ancha reviente la columna del grid. */
.grid2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:20px;align-items:start}
.grid2 > *{min-width:0}
.panel{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px 22px;
  box-shadow:var(--shadow);margin-bottom:20px;min-width:0}
.panel h3{margin:0 0 4px;font-size:1.02rem;font-weight:700}
.panel .p-sub{font-size:.78rem;color:var(--muted);margin:0 0 16px}

/* Embudo */
.funnel{display:flex;flex-direction:column;gap:11px}
.frow{display:grid;grid-template-columns:118px 1fr 62px;align-items:center;gap:12px;font-size:.82rem}
.frow .fl{font-weight:600}
.fbar{height:26px;border-radius:7px;background:var(--grad);min-width:22px}
.frow .fn{text-align:right;font-weight:700;font-variant-numeric:tabular-nums;color:var(--secondary)}

/* Ranking / metas */
.rank{display:flex;flex-direction:column;gap:14px}
.rrow{display:flex;align-items:center;gap:12px}
.rav{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:.8rem;font-family:'Sora';flex:0 0 auto}
.rav.warm{background:var(--grad-warm)} .rav.cyan{background:var(--grad-cyan);color:#04121f}
.rav.navy{background:var(--grad)} .rav.slate{background:#64748b}
.rrow .rnm{font-size:.86rem;font-weight:600;flex:1;min-width:0}
.rrow .rval{font-weight:800;font-family:'Sora';font-variant-numeric:tabular-nums;font-size:.92rem}
.rrow .rmeta{font-size:.72rem;color:var(--muted)}
.prog{height:6px;border-radius:99px;background:var(--line2);margin-top:5px;overflow:hidden}
.prog i{display:block;height:100%;border-radius:99px;background:var(--grad-cyan)}
.prog i.warn{background:var(--grad-warm)} .prog i.crit{background:var(--crit)}

/* Tabla de desempeño */
.tbl-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
table.perf{border-collapse:collapse;width:100%;font-size:.85rem;min-width:600px}
table.perf th,table.perf td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line2)}
table.perf thead th{font-family:'Sora';font-size:.66rem;text-transform:uppercase;letter-spacing:.5px;
  color:var(--muted);font-weight:700;background:var(--line2)}
table.perf td{font-variant-numeric:tabular-nums}
table.perf tbody tr:last-child td{border-bottom:0}
table.perf .who{display:flex;align-items:center;gap:9px;font-weight:600}
.spark{display:flex;align-items:flex-end;gap:2px;height:26px}
.spark i{width:6px;border-radius:2px;background:var(--accent);opacity:.35}
.spark i:last-child{opacity:1}
.spark.down i{background:var(--crit)}
.delta{font-weight:700;font-size:.8rem}
.delta.up{color:var(--good)} .delta.down{color:var(--crit)} .delta.flat{color:var(--muted)}
.state{font-size:.66rem;font-weight:700;padding:3px 9px;border-radius:6px;letter-spacing:.3px;white-space:nowrap}
.state.ok{background:var(--good-bg);color:#0a7d40}
.state.warn{background:var(--warn-bg);color:#92600c}
.state.crit{background:var(--crit-bg);color:#b91c1c}

/* ---------- Kanban ---------- */
.board{display:grid;grid-template-columns:repeat(5,minmax(226px,1fr));gap:14px;overflow-x:auto;
  padding:4px 0 10px;align-items:start}
.col{background:#eef2f8;border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:10px;min-height:180px}
.col-h{display:flex;align-items:center;gap:7px;padding:2px 4px 0}
.col-h .ct{font-size:.8rem;font-weight:700;color:var(--secondary)}
.col-h .cc{font-size:.68rem;font-weight:700;color:var(--muted);background:var(--white);
  border-radius:99px;padding:2px 8px;margin-left:auto}
.col-sum{font-size:.7rem;color:var(--muted);padding:0 4px 2px;font-weight:600;font-variant-numeric:tabular-nums}
.deal{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:12px 13px;
  box-shadow:0 1px 2px rgba(10,36,99,.05);display:block;transition:.15s}
.deal:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px);border-color:var(--accent)}
.deal .d-co{font-size:.86rem;font-weight:700;margin-bottom:3px}
.deal .d-eq{font-size:.74rem;color:var(--muted);margin-bottom:9px}
.deal .d-ft{display:flex;align-items:center;justify-content:space-between;gap:8px}
.deal .d-val{font-size:.86rem;font-weight:800;font-family:'Sora';color:var(--primary);
  font-variant-numeric:tabular-nums}
.d-av{width:24px;height:24px;border-radius:50%;font-size:.6rem;color:#fff;display:flex;align-items:center;
  justify-content:center;font-weight:700;font-family:'Sora';flex:0 0 auto}
.d-av.warm{background:var(--grad-warm)} .d-av.cyan{background:var(--grad-cyan);color:#04121f}
.d-av.navy{background:var(--grad)} .d-av.slate{background:#64748b}
.tag{font-size:.62rem;font-weight:700;padding:2px 8px;border-radius:6px;letter-spacing:.3px}
.tag.res{background:#e0f2fe;color:#0369a1} .tag.com{background:#ede9fe;color:#6d28d9}
.tag.apl{background:#fef3c7;color:#b45309} .tag.dvr{background:#dcfce7;color:#15803d}
.chip-erp{font-size:.6rem;font-weight:700;color:#0a7d40;background:var(--good-bg);padding:2px 6px;
  border-radius:5px;display:inline-flex;align-items:center;gap:4px}
.chip-erp::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--good)}

/* Tooltip de ayuda de etapa */
.col-help{position:relative;display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;border:1.4px solid var(--slate);color:var(--slate);font-size:.6rem;font-weight:800;
  font-family:'Sora';cursor:help;flex:0 0 auto;line-height:1}
.col-help:hover{border-color:var(--accent);color:var(--accent)}
.col-help .tipbox{position:absolute;left:50%;top:calc(100% + 9px);transform:translateX(-50%) translateY(-4px);
  width:214px;background:var(--navy);color:#eaf1ff;font-family:'Outfit',sans-serif;font-weight:400;
  font-size:.74rem;line-height:1.5;text-align:left;padding:10px 12px;border-radius:9px;
  box-shadow:0 10px 26px rgba(0,18,51,.32);opacity:0;visibility:hidden;pointer-events:none;
  transition:.16s;z-index:30}
.col-help .tipbox b{color:var(--cyan);display:block;font-family:'Sora';font-size:.68rem;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:3px}
.col-help .tipbox::after{content:"";position:absolute;left:50%;bottom:100%;transform:translateX(-50%);
  border:6px solid transparent;border-bottom-color:var(--navy)}
.col-help:hover .tipbox{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.col:first-child .col-help .tipbox{left:0;transform:translateX(0) translateY(-4px)}
.col:first-child .col-help:hover .tipbox{transform:translateX(0) translateY(0)}
.col:first-child .col-help .tipbox::after{left:14px}
.col:last-child .col-help .tipbox{left:auto;right:0;transform:translateX(0) translateY(-4px)}
.col:last-child .col-help:hover .tipbox{transform:translateX(0) translateY(0)}
.col:last-child .col-help .tipbox::after{left:auto;right:14px}

/* ---------- Prospectos por asignar ---------- */
.pros{display:flex;flex-direction:column;gap:12px}
.pcard{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:15px 18px;
  box-shadow:var(--shadow);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.pcard .p-co{font-size:.95rem;font-weight:700}
.pcard .p-ct{font-size:.8rem;color:var(--muted);margin-top:2px}
.pcard .p-in{font-size:.8rem;margin-top:6px;color:var(--ink)}
.pcard .p-meta{display:flex;gap:8px;align-items:center;margin-top:8px;flex-wrap:wrap}
.origen{font-size:.64rem;font-weight:700;padding:3px 9px;border-radius:6px;background:var(--line2);color:var(--secondary)}
.origen.wa{background:#dcfce7;color:#15803d} .origen.web{background:#e0f2fe;color:#0369a1}
.origen.lista{background:var(--warn-bg);color:#92600c} .origen.camp{background:#ede9fe;color:#6d28d9}
.tiempo{font-size:.7rem;color:var(--muted)}
.assign{display:flex;align-items:center;gap:9px}
.assign select{font-family:inherit;font-size:.82rem;padding:8px 11px;border:1px solid var(--line);
  border-radius:9px;background:var(--white);color:var(--ink);min-width:170px}
.assign select:focus{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- Academia ---------- */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.course{background:var(--white);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.c-top{height:88px;display:flex;align-items:center;justify-content:center;color:#fff;position:relative}
.c-top svg{width:34px;height:34px;stroke-width:1.6}
.c-top.navy{background:var(--grad)} .c-top.cyan{background:var(--grad-cyan);color:#04121f}
.c-top.warm{background:var(--grad-warm)} .c-top.slate{background:#64748b}
.c-top.cyan svg{stroke:#04121f}
.c-b{padding:15px 17px}
.c-cat{font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent)}
.course h4{margin:5px 0 6px;font-size:.95rem;font-weight:700}
.c-meta{font-size:.74rem;color:var(--muted);margin-bottom:11px}
.c-pr{display:flex;align-items:center;gap:9px}
.c-pr .prog{flex:1;margin:0}
.c-pr .pct{font-size:.72rem;font-weight:700;color:var(--secondary);font-variant-numeric:tabular-nums}
.badge-done{position:absolute;top:10px;right:10px;background:rgba(255,255,255,.92);color:#0a7d40;
  font-size:.6rem;font-weight:800;padding:3px 8px;border-radius:99px;letter-spacing:.3px}

/* ---------- Ficha de oportunidad ---------- */
.detail{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:start}
.tl{display:flex;flex-direction:column;margin-top:6px}
.tl-item{display:grid;grid-template-columns:26px 1fr;gap:12px;padding-bottom:18px;position:relative}
.tl-item::before{content:"";position:absolute;left:12px;top:26px;bottom:0;width:2px;background:var(--line)}
.tl-item:last-child{padding-bottom:0}
.tl-item:last-child::before{display:none}
.tl-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:var(--white);border:2px solid var(--accent);z-index:1}
.tl-dot svg{width:13px;height:13px;stroke:var(--accent);stroke-width:2.2}
.tl-dot.erp{border-color:var(--warm)} .tl-dot.erp svg{stroke:var(--warm)}
.tl-dot.ok{border-color:var(--good);background:var(--good)} .tl-dot.ok svg{stroke:#fff}
.t-h{font-size:.86rem;font-weight:700}
.t-m{font-size:.74rem;color:var(--muted)}
.t-x{font-size:.82rem;margin-top:2px}
.info-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line2);font-size:.84rem}
.info-row:last-child{border-bottom:0}
.info-row .l{color:var(--muted)} .info-row .v{font-weight:600;text-align:right}
.quote-card{border:1px dashed var(--good);background:var(--good-bg);border-radius:11px;padding:13px 15px;margin-top:14px}
.qc-h{font-size:.76rem;font-weight:700;color:#0a7d40;margin-bottom:7px}
.qc-r{display:flex;justify-content:space-between;gap:12px;font-size:.8rem;padding:3px 0}
.qc-tot{border-top:1px solid rgba(16,185,129,.3);margin-top:5px;padding-top:6px;font-weight:800}
.playbook{background:linear-gradient(135deg,rgba(245,158,11,.08),rgba(234,88,12,.03));
  border:1px solid rgba(245,158,11,.3);border-radius:12px;padding:15px 17px}
.pb-t{font-size:.64rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--warm2);
  display:flex;align-items:center;gap:6px;margin-bottom:8px}
.playbook ul{margin:0;padding-left:18px;font-size:.82rem}
.playbook li{margin:4px 0}

/* ---------- Integración AdminTotal ---------- */
.sync-hero{background:var(--grad);color:#fff;border-radius:14px;padding:24px 26px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-bottom:20px}
.sync-hero .sh-state{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:#7ef0c0;background:rgba(16,185,129,.18);
  border:1px solid rgba(16,185,129,.4);padding:5px 12px;border-radius:999px}
.sync-hero .sh-state::before{content:"";width:8px;height:8px;border-radius:50%;background:#34d399;
  animation:pulse 2s infinite}
.sync-hero h2{margin:12px 0 4px;font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.sync-hero .sh-sub{color:rgba(255,255,255,.75);font-size:.86rem;font-family:'Outfit'}
.sync-hero code{background:rgba(255,255,255,.12);padding:2px 8px;border-radius:6px;font-size:.78rem}
.sync-hero .sh-right{text-align:right}
.sync-hero .sh-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.7px;color:rgba(255,255,255,.6);
  font-weight:700}
.sync-hero .sh-val{font-size:1.15rem;font-weight:800;font-family:'Sora';margin-top:3px}
.sync-hero .btn-sync{margin-top:12px;background:var(--cyan);color:#04121f;border:0;border-radius:9px;
  padding:9px 16px;font-weight:700;font-size:.82rem}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.res{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:15px 17px;box-shadow:var(--shadow)}
.res .r-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.res .r-n{font-size:.9rem;font-weight:700}
.res .r-c{font-size:1.35rem;font-weight:800;font-family:'Sora';font-variant-numeric:tabular-nums}
.res .r-m{font-size:.72rem;color:var(--muted);margin-top:2px}
.res .r-s{font-size:.68rem;color:var(--muted);margin-top:8px;padding-top:8px;border-top:1px solid var(--line2)}
.log{display:flex;flex-direction:column;gap:0}
.log-row{display:grid;grid-template-columns:56px 16px 1fr;gap:11px;align-items:start;padding:11px 0;
  border-bottom:1px solid var(--line2);font-size:.84rem}
.log-row:last-child{border-bottom:0}
.log-row .lh{font-size:.76rem;color:var(--muted);font-variant-numeric:tabular-nums;font-weight:600}
.log-dot{width:9px;height:9px;border-radius:50%;background:var(--good);margin-top:6px}
.log-dot.aviso{background:var(--warn)}

@media(max-width:1000px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grid2,.detail{grid-template-columns:1fr}
  .res-grid{grid-template-columns:repeat(2,1fr)}
  .courses{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .app{grid-template-columns:1fr}

  /* Barra superior fija con logo y hamburguesa */
  .mbar{display:flex}
  .backdrop{display:block;pointer-events:none}
  .backdrop.open{pointer-events:auto}

  /* El menú se convierte en panel deslizante */
  .side{position:fixed;top:0;left:0;bottom:0;width:250px;height:100dvh;z-index:60;
    transform:translateX(-100%);transition:transform .24s ease;box-shadow:6px 0 28px rgba(0,18,51,.3)}
  .side.open{transform:translateX(0)}
  .side .brand{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .side .nav a{padding:12px}

  .topbar{padding:14px 18px}
  .topbar h1{font-size:1.1rem}
  .content{padding:16px}

  /* Dashboard en celular: dos KPIs por fila, sin desbordes. */
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
  .kpi{padding:14px}
  .kpi .k-ico{display:none}
  .kpi .k-lbl{font-size:.66rem;letter-spacing:.2px}
  .kpi .k-val{font-size:1.3rem;margin:4px 0 1px}
  .kpi .k-tr{font-size:.68rem}

  .grid2{grid-template-columns:1fr;gap:16px}
  .panel{padding:16px 16px;margin-bottom:16px}

  /* El embudo necesita etiquetas más angostas para que la barra respire. */
  .frow{grid-template-columns:84px 1fr 52px;gap:8px;font-size:.76rem}
  .fbar{height:22px}

  .rrow{gap:10px}
  .rav{width:30px;height:30px;font-size:.72rem}
  .rrow .rnm{font-size:.8rem}

  .courses,.res-grid{grid-template-columns:1fr}
  .sync-hero{grid-template-columns:1fr;padding:20px}
  .sync-hero .sh-right{text-align:left}
  .sync-hero h2{font-size:1.25rem}
  .pcard{grid-template-columns:1fr}
  .assign{flex-wrap:wrap}
  .assign select{flex:1;min-width:140px}
  .board{grid-template-columns:repeat(5,minmax(210px,1fr))}
  .detail{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .side,.backdrop,.burger i{transition:none}
}