/* AIZORA · estilos de la demo interactiva del CRM (solo /crm/). Datos de ejemplo. */
.demo-tour{max-width:720px;margin:32px auto 0;text-align:center}
.demo-steps{list-style:none;display:flex;justify-content:center;gap:6px;flex-wrap:wrap}
.demo-steps .ds{display:flex;align-items:center;gap:7px;font-family:var(--H);font-size:12px;font-weight:600;color:var(--ink-3);padding:6px 12px 6px 6px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);transition:border-color var(--t),color var(--t),background var(--t)}
.demo-steps .ds-n{width:19px;height:19px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--ink-3);transition:all var(--t)}
.demo-narrative{margin-top:16px;font-size:14px;color:var(--ink-2);line-height:1.6;min-height:44px}
.demo-narrative b{color:var(--ink);font-family:var(--H)}
.demo-actions{display:flex;gap:12px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.demo-freeback{display:none;font-family:var(--H);font-size:12.5px;font-weight:600;color:var(--brand);margin-top:14px}
.demo-shell{margin-top:30px}
.demo-appwin{
  max-width:1040px;margin-inline:auto;
  --brand:oklch(0.52 0.18 258);
  --brand-ink:oklch(0.52 0.18 258);
  --brand-wash:color-mix(in oklab,oklch(0.52 0.18 258) 8%,white);
  --ok:oklch(0.58 0.13 155);
  --ok-wash:oklch(0.955 0.03 155);
  --warn:oklch(0.68 0.14 68);
  --warn-ink:oklch(0.24 0.04 68);
  --warn-wash:oklch(0.96 0.045 80);
  --danger:oklch(0.585 0.21 25);
  --danger-wash:oklch(0.96 0.02 25);
  --ink:#172033;--ink-2:#475467;--ink-3:#667085;--ink-4:#98a2b3;
  --line:oklch(0.912 0.006 258);--line-2:oklch(0.88 0.008 258);
  --surface:oklch(1 0 0);--surface-2:oklch(0.977 0.003 258);--bg:oklch(0.977 0.003 258);
  --muted:oklch(0.965 0.004 258);
  --r-sm:5px;--r-md:6.5px;--r-lg:8px;--r-xl:12px;--r-2xl:16px;
  /* Sidebar — identidad fija de Aizora (oscura), no personalizable: fondo
     #050816, acento activo = pastilla azul translúcida, no barra lateral. */
  --sb-bg:oklch(0.15 0.045 264);
  --sb-fg:oklch(0.9 0.01 258);
  --sb-accent:color-mix(in oklab,oklch(0.52 0.18 258) 30%,transparent);
  --sb-accent-hover:color-mix(in oklab,oklch(0.52 0.18 258) 16%,transparent);
  --sb-accent-fg:oklch(0.95 0.02 240);
  --sb-border:color-mix(in oklab,white 10%,oklch(0.15 0.045 264));
  --H:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --B:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-family:var(--B);
}
.demo-body{display:grid;grid-template-columns:204px 1fr;min-height:500px}
.demo-nav{padding:10px 8px;display:flex;flex-direction:column;gap:2px;background:var(--sb-bg);border-right:1px solid var(--sb-border)}
.demo-navitem{position:relative;display:flex;align-items:center;gap:8px;padding:10px;border-radius:var(--r-lg);border:none;background:none;font-family:var(--B);font-size:14px;font-weight:500;color:var(--sb-fg);cursor:pointer;transition:background .15s ease,color .15s ease;text-align:left;width:100%}
.demo-navitem svg{width:16px;height:16px;flex-shrink:0;stroke-width:1.8;color:color-mix(in oklab,var(--sb-fg) 75%,transparent)}
.demo-navitem:hover{background:var(--sb-accent-hover);color:#fff}
.demo-navitem:hover svg{color:#fff}
.demo-content{padding:18px 24px 24px;background:var(--bg)}
.demo-panel{animation:demoIn .32s ease}
.demo-panel h5{font-family:var(--H);font-size:13px;font-weight:600;color:var(--ink);margin:22px 0 0}
.demo-panel .demo-desc{font-size:12px;color:var(--ink-3);margin-bottom:2px}
.demo-skel{display:flex;flex-direction:column;gap:10px;padding-top:16px}
.demo-skel .sk{height:16px;border-radius:5px;background:linear-gradient(90deg,var(--surface) 25%,var(--line) 37%,var(--surface) 63%);background-size:400% 100%;animation:skShine 1.2s ease infinite}
.demo-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
@media(min-width:640px){
.demo-kpis{grid-template-columns:repeat(4,1fr)}
}
.demo-kpis.demo-kpis-3{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){
.demo-kpis.demo-kpis-3{grid-template-columns:repeat(3,1fr)}
}
.demo-kpis.demo-kpis-2{grid-template-columns:repeat(2,1fr)}
.demo-kpis.demo-kpis-6{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){
.demo-kpis.demo-kpis-6{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:1000px){
.demo-kpis.demo-kpis-6{grid-template-columns:repeat(4,1fr)}
}
.demo-kpi{position:relative;padding:18px;display:flex;flex-direction:column;gap:10px;border-radius:var(--r-2xl);background:var(--surface);box-shadow:0 1px 2px rgb(16 24 40/.04);transition:box-shadow .15s ease}
.demo-kpi:hover{box-shadow:0 1px 3px rgb(16 24 40/.05),0 4px 12px rgb(16 24 40/.06)}
.demo-kpi .k-ic{position:absolute;top:18px;right:18px;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}
.demo-kpi .k-ic svg{width:16px;height:16px}
.demo-kpi .k-lb{font-size:12px;color:var(--ink-3);font-family:var(--B);font-weight:500;padding-right:34px}
.demo-kpi .k-val{display:block;font-family:var(--H);font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1}
.demo-kpi .k-note{font-size:12px;color:var(--ink-3);font-weight:500}
.demo-statusrow{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.demo-statusrow div{display:flex;flex-direction:column;gap:3px}
.demo-list{border-top:1px solid var(--line)}
.demo-row{display:flex;align-items:center;gap:12px;padding:11px 4px;transition:background var(--t)}
.demo-row+.demo-row{border-top:1px solid var(--line)}
.demo-row:hover{background:color-mix(in oklab,var(--brand) 6%,transparent)}
.demo-row .av{width:28px;height:28px;border-radius:50%;background:var(--brand-wash);color:var(--brand-ink);display:grid;place-items:center;font-family:var(--H);font-size:11px;font-weight:700;flex-shrink:0}
.demo-row .rmain{flex:1;min-width:0;display:flex;flex-direction:column}
.demo-row .rname{font-family:var(--B);font-size:13.5px;font-weight:600;color:var(--ink)}
.demo-row .rsub{font-size:12px;color:var(--ink-3);margin-top:1px}
.demo-row .ramt{font-family:var(--H);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.demo-row .st,.demo-obra .st{display:inline-flex;align-items:center;gap:6px;height:24px;font-family:var(--B);font-size:12px;font-weight:600;padding:0 10px;border-radius:999px;white-space:nowrap;flex-shrink:0}
.demo-row .st::before,.demo-obra .st::before{content:"";width:6px;height:6px;border-radius:50%;flex-shrink:0}
.st.ok{color:var(--ok);background:var(--ok-wash)}
.st.ok::before{background:var(--ok)}
.st.muted{color:var(--ink-3);background:var(--surface-2)}
.st.muted::before{background:var(--ink-3)}
.demo-qlinks{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:8px;margin-top:12px}
.demo-qlinks button{border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);padding:9px 10px;font-family:var(--B);font-size:12px;font-weight:600;color:var(--ink-2);cursor:pointer;transition:all var(--t);text-align:center}
.demo-qlinks button:hover{border-color:var(--brand);color:var(--brand-ink);background:var(--brand-wash)}
.demo-obra{padding:13px 4px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.demo-obra+.demo-obra{border-top:1px solid var(--line)}
.demo-obra .om{min-width:0}
.demo-obra .ot{font-family:var(--B);font-size:13.5px;font-weight:600;color:var(--ink)}
.demo-obra .osub{font-size:12px;color:var(--ink-3);margin-top:2px}
.demo-obra .or{display:flex;align-items:center;gap:10px;flex-shrink:0}
.demo-obra .op{font-family:var(--H);font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.demo-surface{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);padding:14px}
.demo-surface+.demo-surface{margin-top:12px}
.demo-attn{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.demo-attn .bh{padding:10px 14px;border-bottom:1px solid var(--line);font-family:var(--B);font-size:13px;font-weight:600;color:var(--ink)}
.demo-attn .br{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 14px;font-size:13px}
.demo-attn .br+.br{border-top:1px solid var(--line)}
.demo-attn .br b{font-family:var(--H);font-variant-numeric:tabular-nums}
.demo-mini-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:10px}
.demo-mini-table th{text-align:right;font-family:var(--B);font-size:11px;font-weight:500;color:var(--ink-3);padding:7px 6px;border-bottom:1px solid var(--line)}
.demo-mini-table th:first-child,.demo-mini-table td:first-child{text-align:left}
.demo-mini-table td{text-align:right;padding:7px 6px;border-bottom:1px solid var(--line);color:var(--ink);font-variant-numeric:tabular-nums}
.demo-mini-table tr:last-child td{border-bottom:none}
.demo-bars{display:flex;align-items:flex-end;gap:14px;height:96px;padding:16px 6px 0;margin:6px 0 22px}
.demo-feed{display:flex;flex-direction:column;gap:11px}
.demo-feed li{display:flex;gap:10px;font-size:12.5px;color:var(--ink-2);align-items:flex-start}
.demo-feed li b{color:var(--ink);font-family:var(--H);font-weight:600}
.demo-feed li time{color:var(--ink-3);font-size:11px;margin-left:auto;white-space:nowrap;flex-shrink:0;padding-left:10px}
.demo-toprow{display:flex;justify-content:flex-end;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.demo-toprow button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);font-family:var(--B);font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer}
.demo-toprow button:hover{background:var(--surface-2)}
.demo-toprow svg{width:14px;height:14px;color:var(--ink-3)}
.demo-card{border:none;border-radius:var(--r-2xl);background:var(--surface);box-shadow:0 1px 2px rgb(16 24 40/.04);margin-bottom:14px;padding:20px}
.demo-card:last-child{margin-bottom:0}
.demo-card-h{padding:0 0 14px}
.demo-card-h.bb{border-bottom:none}
.demo-card-title{font-family:var(--H);font-size:15px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.demo-card-desc{font-size:12px;color:var(--ink-3);margin-top:2px}
.demo-card-c{padding:0}
.demo-card-c.pt{padding-top:0}
.demo-maingrid{display:grid;grid-template-columns:1fr;gap:14px}
.demo-2col{display:grid;grid-template-columns:1fr;gap:14px}
.demo-rstats{display:flex;flex-wrap:wrap;gap:22px;margin-bottom:16px}
.demo-rstats div{display:flex;flex-direction:column;gap:2px}
.demo-rstats .v{font-family:var(--H);font-size:18px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.demo-rstats .v.muted{color:var(--ink-3)}
.demo-rchart{width:100%;height:190px;display:block}
.demo-rchart-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;font-size:11px;color:var(--ink-3)}
.demo-rchart-legend span{display:inline-flex;align-items:center;gap:5px}
.demo-rchart-legend i{width:10px;height:2px;border-radius:1px;display:inline-block}
.demo-hbars{display:flex;flex-direction:column;gap:10px}
.demo-hbars .track{height:16px;border-radius:0 4px 4px 0;background:var(--surface-2);overflow:hidden}
.demo-hbars .fill{height:100%;background:var(--brand);border-radius:0 4px 4px 0;transition:width .6s ease}
.demo-timeline{display:flex;flex-direction:column}
.demo-timeline li{display:flex;gap:11px}
.demo-timeline .tl-l{display:flex;flex-direction:column;align-items:center}
.demo-timeline .tl-av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-family:var(--H);font-size:9.5px;font-weight:700;flex-shrink:0}
.demo-timeline .tl-line{width:1px;flex:1;background:var(--line);margin:3px 0}
.demo-timeline .tl-b{flex:1;min-width:0;padding-bottom:14px}
.demo-timeline li:last-child .tl-b{padding-bottom:0}
.demo-timeline .tl-txt{font-size:13px;line-height:1.5;color:var(--ink-3)}
.demo-timeline .tl-txt b{color:var(--ink);font-weight:600}
.demo-timeline .tl-txt em{color:var(--brand-ink);font-style:normal;font-weight:600}
.demo-timeline .tl-meta{display:flex;align-items:center;gap:5px;margin-top:3px;font-size:11px;color:var(--ink-3)}
.demo-timeline .tl-meta svg{width:11px;height:11px}
.demo-aside{display:flex;flex-direction:column;gap:14px}
.demo-qa3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.demo-qa3 button{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 6px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;text-align:center;transition:all var(--t)}
.demo-qa3 button:hover{border-color:color-mix(in oklab,var(--brand) 40%,var(--line));background:var(--brand-wash)}
.demo-qa3 svg{width:16px;height:16px;color:var(--brand)}
.demo-qa3 span{font-size:10.5px;font-weight:500;color:var(--ink);line-height:1.25}
.demo-cal-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.demo-cal-title{display:flex;align-items:center;gap:7px;font-family:var(--H);font-size:14px;font-weight:600;color:var(--ink);text-transform:capitalize}
.demo-cal-title svg{width:15px;height:15px;color:var(--brand)}
.demo-cal-nav{display:flex;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.demo-cal-nav button{width:26px;height:26px;display:grid;place-items:center;border:none;background:var(--surface);cursor:pointer;color:var(--ink-3)}
.demo-cal-nav button:first-child{border-right:1px solid var(--line)}
.demo-cal-nav button:hover{background:var(--surface-2)}
.demo-cal-nav svg{width:13px;height:13px}
.demo-cal-link{font-size:12px;color:var(--ink-3);margin-top:2px}
.demo-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-top:12px}
.demo-cal-grid .wd{text-align:center;font-size:10px;font-weight:600;color:var(--ink-3);text-transform:uppercase;padding-bottom:4px}
.demo-tasklist{display:flex;flex-direction:column}
.demo-tasklist a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;font-size:13px;color:var(--ink)}
.demo-tasklist a+a{border-top:1px solid var(--line)}
.demo-tasklist .due{font-size:11px;color:var(--ink-3);flex-shrink:0}
@media(min-width:900px){
.demo-maingrid{grid-template-columns:1fr 300px}
.demo-2col{grid-template-columns:1fr 1fr}
}
.demo-final{max-width:600px;margin:28px auto 0;text-align:center;padding:26px 30px;border:1px solid var(--line-2);border-radius:var(--r-xl);background:var(--surface-2)}
.demo-final p{font-size:15px;color:var(--ink-2)}
.demo-final p b{color:var(--ink);font-family:var(--H)}
.demo-final-cta{display:flex;gap:12px;justify-content:center;margin-top:16px;flex-wrap:wrap}
@media(max-width:900px){
.demo-body{grid-template-columns:1fr;min-height:0}
.demo-nav{flex-direction:row;overflow-x:auto;-webkit-overflow-scrolling:touch;border-right:none;border-bottom:1px solid var(--sb-border)}
.demo-navitem{flex-shrink:0;width:auto}
}
@media(max-width:640px){
.demo-kpis{grid-template-columns:repeat(2,1fr)}
.demo-kpis.demo-kpis-3{grid-template-columns:repeat(2,1fr)}
.demo-kpis.demo-kpis-6{grid-template-columns:repeat(2,1fr)}
.demo-content{padding:16px}
.demo-row{padding:11px 13px;gap:10px}
.demo-steps .ds span:not(.ds-n){display:none}
.demo-steps .ds{padding:6px}
}
.cta-final{text-align:center}
.cta-final h2{margin:0 auto 12px}
.cta-final p{color:var(--ink-2);font-size:15px;max-width:52ch;margin:0 auto 24px}
@keyframes demoIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes skShine{0%{background-position:100% 0}100%{background-position:-100% 0}}
@keyframes demoPulse{0%{box-shadow:0 0 0 0 color-mix(in oklab,var(--brand) 35%,transparent)}70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes demoRowIn{from{opacity:0;transform:translateX(-10px);background:var(--brand-wash)}to{opacity:1;transform:none}}
.demo-kpi.pulse{animation:demoPulse 1s ease}
.demo-row.new-row{animation:demoRowIn .6s ease}