/* ===========================================================================
   COPIA de Camsoda_stats/static/css/app.css — es la MISMA linea grafica de la
   suite (tokens, sidebar, tarjetas, KPIs, tablas, graficos de area). Se copia y
   no se importa porque los tres repos se despliegan por separado; si cambia el
   diseño de la suite, se vuelve a copiar. Lo PROPIO del tablero de estado
   (semaforos, tiras de uptime, mapa) vive aparte en insights.css.
   ---------------------------------------------------------------------------
   Camsoda Suite — linea grafica "Executive Suite" (Stitch) con la marca Camsoda.
   Marca: ROSA (accion/acento) + AZUL (dato secundario). Material 3, Inter,
   superficies blancas, sombras difusas, radios generosos.
   =========================================================================== */
:root{
  /* Marca Camsoda */
  --pink:        #ff2e93;   /* primario: acciones, estado activo */
  --pink-deep:   #b50079;   /* texto/acento sobre claro */
  --pink-soft:   #ffe4f2;   /* contenedor rosa */
  --blue:        #0aa2f2;   /* secundario: segunda serie de datos */
  --blue-deep:   #0b5fa5;
  --blue-soft:   #e2f4fe;

  /* Superficies e ink */
  --bg:          #f8f9fa;
  --surface:     #ffffff;
  --surface-2:   #f3f4f5;
  --ink:         #191c1d;
  --ink-2:       #5f6367;
  --muted:       #8a9099;
  --line:        #ececee;

  /* Estado */
  --ok:          #1f7a35;
  --ok-soft:     #e6f4ea;
  --warn:        #9a6b00;
  --warn-soft:   #fff5e0;
  --err:         #ba1a1a;
  --err-soft:    #ffdad6;

  /* Elevacion */
  --e1: 0 4px 20px rgba(0,0,0,.05);
  --e2: 0 10px 32px rgba(0,0,0,.10);

  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --side: 252px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:ui-monospace,"Cascadia Mono",Menlo,Consolas,monospace}
.num{font-variant-numeric:tabular-nums}

/* ---------------- Sidebar ---------------- */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--side);background:var(--surface);
  border-right:1px solid var(--line);display:flex;flex-direction:column;
  padding:26px 14px 18px;gap:22px}
.brand{padding:0 8px}
.brand b{display:block;font-size:26px;font-weight:800;line-height:1.1;
  letter-spacing:-.02em;color:var(--pink);}
.brand span{display:block;margin-top:6px;font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.12em}
nav{display:flex;flex-direction:column;gap:2px}
.nav-item{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:var(--r-md);
  color:var(--ink-2);text-decoration:none;position:relative;transition:background .12s,color .12s}
.nav-item:hover{background:var(--surface-2)}
.nav-item.on{background:var(--surface-2);color:var(--pink-deep)}
.nav-item.on::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:4px;
  border-radius:0 4px 4px 0;background:var(--pink)}
/* Material Symbols (iconos de Google) servidos en local — sin depender de internet.
   El woff2 es un subset (solo los iconos que usamos), por eso pesa ~7 KB. */
@font-face{
  font-family:'Material Symbols Rounded';
  font-style:normal;
  font-weight:400;
  /* 'block': mantiene el glifo invisible hasta que el font carga (7 KB local = instantaneo).
     Con iconos de ligatura NO usar 'swap': mostraria el nombre crudo (dashboard, ...) al navegar. */
  font-display:block;
  /* El ?v= sube cada vez que se REGENERA el subset (al agregar un icono nuevo):
     sin el, el navegador se queda con el woff2 viejo y el icono nuevo se ve como
     texto crudo ("date_range"). Debe ir igual en el preload de base.html. */
  src:url('../fonts/material-symbols-subset.woff2?v=3') format('woff2');
}
.msi{font-family:'Material Symbols Rounded';font-weight:normal;font-style:normal;
  line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;
  white-space:nowrap;direction:ltr;-webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;font-variation-settings:'opsz' 24}

.nav-item .ico{width:22px;display:flex;align-items:center;justify-content:center;color:var(--muted)}
.nav-item .ico .msi{font-size:21px}
.nav-item.on .ico{color:var(--pink)}
.nav-item b{display:block;font-size:13.5px;font-weight:600}
.nav-item.on b{font-weight:700}
.nav-item small{display:block;font-size:11px;color:var(--muted);font-weight:400}
.side-foot{margin-top:auto;font-size:11px;color:var(--muted);padding:0 10px}
.side-foot code{background:var(--surface-2);padding:1px 5px;border-radius:4px}

/* ---------------- Contenido ---------------- */
.content{margin-left:var(--side)}
.topbar{padding:32px 40px 0;max-width:1440px}
.topbar .eyebrow{font-size:11px;font-weight:700;color:var(--pink);
  text-transform:uppercase;letter-spacing:.12em}
.topbar h1{font-size:32px;margin:4px 0 0;font-weight:600;letter-spacing:-.01em}
.topbar .tag{font-size:14px;color:var(--ink-2)}
.page{max-width:1440px;margin:0 auto;padding:24px 40px 64px}

.card{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e1);
  padding:22px 24px;margin-bottom:24px}
.step{display:flex;align-items:center;gap:11px;margin:0 0 16px}
.step .n{width:28px;height:28px;border-radius:50%;background:var(--pink-soft);
  color:var(--pink-deep);display:grid;place-items:center;font-size:12px;font-weight:700;flex:none}
.step .n .msi{font-size:17px;font-variation-settings:'opsz' 20}
.step h2{font-size:20px;margin:0;font-weight:600;letter-spacing:-.01em}
.step .hint{font-size:12.5px;color:var(--muted);margin-left:auto}

label{font-size:11px;font-weight:600;color:var(--ink-2);display:block;margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.05em}
/* .search incluido a proposito: algunos <input> no llevan atributo type, y
   entonces NO matchean input[type=text]; quedaban sin estilo. */
input[type=date],input[type=text],input[type=search],select,.search{padding:9px 12px;
  border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px;background:#fff;
  font-family:inherit;color:var(--ink);outline:none;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,.search:focus{border-color:var(--pink);
  box-shadow:0 0 0 3px rgba(255,46,147,.12)}
.row{display:flex;gap:20px;flex-wrap:wrap;align-items:end}
/* Nota debajo de un campo (no dentro del .row, para no descuadrar la alineacion) */
.field-hint{font-size:12px;color:var(--muted);margin-top:12px}
.field-hint:empty{display:none}
.field-hint b{color:var(--ink-2);font-weight:600}
.search{width:100%;margin-bottom:8px}
select.search{max-width:360px;margin-bottom:0}
.list{max-height:240px;overflow:auto;border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.opt{display:flex;align-items:center;gap:10px;padding:8px 13px;font-size:13.5px;
  border-bottom:1px solid var(--line);cursor:pointer}
.opt:last-child{border-bottom:0}
.opt:hover{background:#f9f9f9}
.opt input{accent-color:var(--pink);width:15px;height:15px}
.listbar{display:flex;justify-content:space-between;align-items:center;
  font-size:12px;color:var(--muted);margin:10px 2px 0}
.link{color:var(--pink-deep);cursor:pointer;font-weight:600}

button{font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;border:0;
  border-radius:var(--r-lg);padding:11px 20px;transition:background .12s,opacity .12s}
.btn{background:var(--pink);color:#fff}
.btn:hover{background:var(--pink-deep)}
.btn.blue{background:var(--blue);color:#fff}
.btn.blue:hover{background:var(--blue-deep)}
.btn.ghost{background:#fff;color:var(--pink-deep);box-shadow:inset 0 0 0 1.5px var(--pink)}
.btn.ghost:hover{background:var(--pink-soft)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.actions{display:flex;gap:12px;flex-wrap:wrap}

.status{margin-top:16px;font-size:13.5px;min-height:20px;color:var(--ink-2)}
.status.ok{color:var(--ok)} .status.err{color:var(--err)}
.spin{display:inline-block;width:13px;height:13px;border:2px solid var(--line);
  border-top-color:var(--pink);border-radius:50%;animation:s .7s linear infinite;
  vertical-align:-2px;margin-right:7px}
@keyframes s{to{transform:rotate(360deg)}}
.dl{display:inline-block;margin-top:12px;background:var(--pink);color:#fff;
  padding:10px 18px;border-radius:var(--r-lg);text-decoration:none;font-size:13.5px;font-weight:600}
.dl:hover{background:var(--pink-deep)}
.muted{color:var(--muted);font-size:12.5px}

/* ---------------- KPI tiles ---------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:24px;margin-bottom:24px}
/* min-width:0 -> deja que la tarjeta se encoja; sin esto el numero desborda */
.kpi{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e1);
  padding:18px 20px;min-width:0;overflow:hidden}
.kpi .k{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
/* El monto se achica solo si hace falta. Nada de recortarlo con "...": una
   cifra a medias es peor que una cifra chica. */
.kpi .v{font-size:clamp(16px,1.75vw,27px);font-weight:700;font-variant-numeric:tabular-nums;
  margin-top:8px;letter-spacing:-.03em;white-space:nowrap}
.kpi .s{font-size:12px;color:var(--muted);margin-top:4px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.kpi.hero{grid-column:span 2;background:linear-gradient(135deg,#fff 0%,var(--pink-soft) 140%)}
.kpi.hero .k{color:var(--pink-deep)}
.kpi.hero .v{font-size:clamp(24px,3.1vw,44px);color:var(--pink-deep);line-height:1.15}
.kpi.bad .v{color:var(--err)}

/* Indicador de crecimiento: pildora ↗+7,9% (verde) / ↘-4,5% (rojo).
   Se usa en las tarjetas KPI (Rendimiento y Ranking) y en la columna Δ del
   ranking. */
.delta{display:inline-flex;align-items:center;gap:2px;border-radius:999px;
  padding:2px 8px;font-size:11px;font-weight:700;line-height:1.4;
  font-variant-numeric:tabular-nums;white-space:nowrap;vertical-align:middle}
.delta .msi{font-size:14px;font-variation-settings:'opsz' 20}
.delta.up{background:var(--ok-soft);color:var(--ok)}
.delta.down{background:var(--err-soft);color:var(--err)}

/* ---------------- Chips ---------------- */
.chip{display:inline-block;border-radius:999px;padding:3px 11px;font-size:11px;font-weight:700;
  letter-spacing:.02em}
.chip.pink{background:var(--pink-soft);color:var(--pink-deep)}
.chip.blue{background:var(--blue-soft);color:var(--blue-deep)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.bad{background:var(--err-soft);color:var(--err)}
.chip.gray{background:var(--surface-2);color:var(--ink-2)}

/* ---------------- Tarjetas de proyecto ---------------- */
.projs{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}
.proj{background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--e1);
  padding:18px 20px;cursor:pointer;text-align:left;font-family:inherit;border:2px solid transparent;
  transition:border-color .12s,box-shadow .12s}
.proj:hover{box-shadow:var(--e2)}
.proj.on{border-color:var(--pink)}
.proj .p{font-size:13px;font-weight:700;color:var(--ink)}
.proj .v{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;margin:8px 0 2px;
  color:var(--ink);letter-spacing:-.02em}
.proj .s{font-size:12px;color:var(--muted)}
.proj .trk{height:6px;background:var(--surface-2);border-radius:99px;margin-top:12px;overflow:hidden}
.proj .trk i{display:block;height:100%;background:var(--pink);border-radius:99px}
.proj .err{color:var(--err);font-weight:600}

/* ---------------- Grafico de barras ---------------- */
.metric-sel{margin-left:12px}
/* Boton compacto "Descargar Excel" en la cabecera de una tabla. En Rendimiento
   es el unico control tras el titulo, asi que se empuja solo a la derecha. */
.btn-xls{margin-left:12px;padding:7px 13px;font-size:13px;display:inline-flex;
  align-items:center;gap:6px}
.btn-xls .msi{font-size:17px;font-variation-settings:'opsz' 20}
.step h2 + .btn-xls{margin-left:auto}
/* En Ranking hay chips + selects antes del boton: empuja el bloque de controles
   a la derecha desde el primer <select>, dejando los chips junto al titulo. */
.step .hint-chips + .metric-sel{margin-left:auto}
.ctl-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.chart-total{display:inline-flex;align-items:baseline;gap:10px;background:var(--pink-soft);
  border-radius:var(--r-md);padding:9px 15px;color:var(--pink-deep);font-weight:700;font-size:17px;
  font-variant-numeric:tabular-nums}
.chart-total .lbl{font-size:10.5px;font-weight:700;color:var(--pink-deep);opacity:.75;
  text-transform:uppercase;letter-spacing:.08em}
.chart{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.bar-row{display:grid;grid-template-columns:minmax(100px,210px) 1fr auto;align-items:center;
  gap:12px;font-size:13px}
.bar-label{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{background:var(--surface-2);border-radius:99px;height:16px;overflow:hidden}
.bar-fill{height:100%;background:var(--pink);border-radius:99px;min-width:3px}
.bar-fill.blue{background:var(--blue)}
.bar-val{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:600;white-space:nowrap}
.chart-empty{color:var(--muted);font-size:13px;padding:8px 0}

/* Grafico de montaña (area) */
/* height:auto -> conserva la proporcion del viewBox y NO deforma el texto */
svg.area{width:100%;height:auto;display:block;overflow:visible}
svg.area .aline{fill:none;stroke:var(--pink);stroke-width:2.5;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
svg.area .dot{fill:#fff;stroke:var(--pink);stroke-width:2;vector-effect:non-scaling-stroke}
svg.area .grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
svg.area .ax{font-size:11px;fill:var(--muted);font-family:Inter,system-ui,sans-serif;
  font-weight:600}
svg.area .ay{text-anchor:end}
svg.area .axr{text-anchor:end}
/* guia vertical y punto resaltado al pasar el mouse */
svg.area .guide{stroke:var(--pink);stroke-width:1.5;stroke-dasharray:4 4;opacity:0;
  vector-effect:non-scaling-stroke;transition:opacity .12s}
svg.area .focus{fill:var(--pink);stroke:#fff;stroke-width:3;opacity:0;
  vector-effect:non-scaling-stroke;transition:opacity .12s}

/* Tooltip propio (reemplaza al <title> nativo del SVG) */
.chart-wrap{position:relative}
.tip{position:absolute;pointer-events:none;z-index:6;opacity:0;
  transform:translate(-50%,-100%);transition:opacity .12s;
  background:#fff;border-radius:var(--r-md);box-shadow:var(--e2);
  padding:11px 14px;min-width:158px;white-space:nowrap}
.tip.on{opacity:1}
.tip::after{content:"";position:absolute;left:50%;bottom:-5px;width:10px;height:10px;
  background:#fff;transform:translateX(-50%) rotate(45deg);
  box-shadow:3px 3px 5px rgba(0,0,0,.06)}
.tip .t-name{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  color:var(--ink)}
.tip .t-rank{background:var(--pink-soft);color:var(--pink-deep);border-radius:6px;
  padding:1px 7px;font-size:10.5px;font-weight:800;letter-spacing:.02em}
.tip .t-val{font-size:19px;font-weight:700;color:var(--pink-deep);margin-top:5px;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.tip .t-sub{font-size:11.5px;color:var(--muted);margin-top:6px}
/* filas de detalle dentro del tooltip */
.tip .t-rows{display:grid;grid-template-columns:auto auto;gap:3px 16px;margin-top:8px;
  padding-top:8px;border-top:1px solid var(--line)}
.tip .t-rows span{font-size:11.5px;color:var(--muted)}
.tip .t-rows b{font-size:11.5px;color:var(--ink);text-align:right;
  font-variant-numeric:tabular-nums}

/* Chips del encabezado del grafico */
.hint-chips{display:inline-flex;align-items:center;gap:7px;flex-wrap:wrap}
.chip.big{font-size:12px;padding:5px 12px;box-shadow:0 1px 6px rgba(255,46,147,.22)}

/* ---------------- Metas ---------------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
@media (max-width:1100px){.grid-2{grid-template-columns:1fr}}

.meta-row{padding:14px 0;border-bottom:1px solid var(--line)}
.meta-row:last-child{border-bottom:0}
.meta-row.total{background:linear-gradient(90deg,var(--pink-soft),transparent 70%);
  margin:0 -24px;padding:14px 24px;border-radius:var(--r-sm)}
.m-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.m-name{font-size:13.5px;font-weight:700;color:var(--ink)}
.m-val{font-size:13.5px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.m-track{position:relative;display:flex;height:10px;background:var(--surface-2);
  border-radius:99px;margin:9px 0 8px;overflow:hidden}
/* Los estados llevan prefijo st- para no chocar con .warn (la caja de aviso),
   que traia su propio padding/margen y deformaba chips y barras. */
.m-track .fill{height:100%;border-radius:99px 0 0 99px;transition:width .3s;
  padding:0;margin:0}
.m-track .fill.st-ok{background:var(--ok)}
.m-track .fill.st-amber{background:#e8a33d}
.m-track .fill.st-bad{background:var(--err)}
.m-track .over{height:100%;background:repeating-linear-gradient(45deg,
  var(--ok),var(--ok) 4px,#fff 4px,#fff 7px)}
.m-bot{display:flex;align-items:center;gap:10px}

.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.bad{background:var(--err-soft);color:var(--err)}
.chip.st-ok{background:var(--ok-soft);color:var(--ok)}
.chip.st-amber{background:#fff5e0;color:#9a6b00}
.chip.st-bad{background:var(--err-soft);color:var(--err)}

.mini{display:inline-block;width:70px;height:6px;background:var(--surface-2);
  border-radius:99px;overflow:hidden;margin-right:8px;vertical-align:middle;flex:none}
.mini i{display:block;height:100%;border-radius:99px;padding:0;margin:0}
.mini i.st-ok{background:var(--ok)}
.mini i.st-amber{background:#e8a33d}
.mini i.st-bad{background:var(--err)}

/* Celda de cumplimiento: barra + chip siempre en linea, misma altura en todas
   las filas sin importar el estado ni cuantos chips de proyecto haya. */
.cumpl{display:flex;align-items:center;gap:8px}
.tbl td .chip{vertical-align:middle}

svg.evo{height:auto}
svg.evo .mline{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 4;
  vector-effect:non-scaling-stroke}
svg.area .axc{text-anchor:middle}

.growth{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--surface-2);border-radius:var(--r-md);padding:14px 16px;margin-top:14px}
.g-k{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;
  letter-spacing:.08em}
.g-v{font-size:26px;font-weight:700;margin-top:3px;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.g-v.up{color:var(--ok)} .g-v.down{color:var(--err)}
.g-s{font-size:11.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.g-i{font-size:22px;flex:none}

/* banda del periodo consultado dentro de la evolucion */
svg.evo .band{fill:rgba(255,46,147,.07)}
svg.area .dot.sel{fill:var(--pink);stroke:#fff;stroke-width:2;r:4}

/* ---------------- Heatmap de actividad ---------------- */
.hm{overflow-x:auto;overflow-y:hidden;padding:4px 6px 4px 0}
.hm-grid{display:grid;grid-template-columns:44px repeat(24,1fr);gap:3px;min-width:640px}
.hm-fine{gap:4px;min-width:760px}
.hm-corner{}
.hm-h{font-size:10px;color:var(--muted);text-align:center;font-weight:600}
.hm-d{font-size:11px;color:var(--ink-2);font-weight:600;display:flex;align-items:center}
.hm-c{aspect-ratio:1;border-radius:5px;background:var(--surface-2);min-height:20px;
  transition:transform .1s,box-shadow .1s}
/* Escala + resaltado con box-shadow (no outline: outline puede empujar el layout
   y activar scroll horizontal en la ultima columna al hacer hover). */
.hm-c:hover{transform:scale(1.15);box-shadow:0 0 0 2px var(--pink);
  z-index:2;position:relative}
.hm-leg{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:12px;
  font-size:11px;color:var(--muted)}
.hm-leg i{width:16px;height:16px;border-radius:4px;display:inline-block}

/* Escala discreta de 8 pasos (estilo sodahours): oscuro -> magenta -> ambar.
   data-lvl 0 = sin presencia; 7 = presencia maxima de la vista. */
.hm-c[data-lvl="0"],.hm-leg i[data-lvl="0"]{background:var(--surface-2)}
.hm-c[data-lvl="1"],.hm-leg i[data-lvl="1"]{background:#3b1d6e}
.hm-c[data-lvl="2"],.hm-leg i[data-lvl="2"]{background:#5a1f92}
.hm-c[data-lvl="3"],.hm-leg i[data-lvl="3"]{background:#8a1f9c}
.hm-c[data-lvl="4"],.hm-leg i[data-lvl="4"]{background:#b81e90}
.hm-c[data-lvl="5"],.hm-leg i[data-lvl="5"]{background:#e0397a}
.hm-c[data-lvl="6"],.hm-leg i[data-lvl="6"]{background:#f4793f}
.hm-c[data-lvl="7"],.hm-leg i[data-lvl="7"]{background:#ffd23f}

/* ---------------- Skeleton loader ---------------- */
.skel{background:linear-gradient(90deg,#eceef0 25%,#f6f7f8 37%,#eceef0 63%);
  background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite;
  border-radius:6px}
@keyframes shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
.skel-chart{height:300px;
  background:linear-gradient(90deg,#eceef0 25%,#f6f7f8 37%,#eceef0 63%);
  background-size:400% 100%;animation:shimmer 1.5s ease-in-out infinite;
  /* silueta de montaña: el esqueleto sugiere el grafico que viene */
  clip-path:polygon(0 18%,10% 20%,22% 42%,34% 50%,46% 62%,58% 68%,70% 78%,
    82% 86%,92% 92%,100% 95%,100% 100%,0 100%)}
.skel.h6{height:6px}   .skel.h9{height:9px}   .skel.h10{height:10px}
.skel.h11{height:11px} .skel.h12{height:12px} .skel.h13{height:13px}
.skel.h16{height:16px} .skel.h22{height:22px} .skel.h24{height:24px}
.skel.h34{height:34px}
.skel.w25{width:25%}  .skel.w28{width:28%}  .skel.w30{width:30%}
.skel.w40{width:40%}  .skel.w50{width:50%}  .skel.w60{width:60%}
.skel.w70{width:70%}  .skel.w80{width:80%}  .skel.w100{width:100%}
.skel.mt8{margin-top:8px}   .skel.mt10{margin-top:10px} .skel.mt12{margin-top:12px}
.skel.mb10{margin-bottom:10px} .skel.mb16{margin-bottom:16px}
@media (prefers-reduced-motion:reduce){
  .skel,.skel-chart{animation:none}
}

/* Pestañas */
.tabs{display:inline-flex;background:var(--surface-2);border-radius:var(--r-md);
  padding:4px;gap:4px;margin-bottom:20px}
.tab{background:transparent;color:var(--ink-2);border-radius:var(--r-sm);
  padding:8px 20px;font-size:13.5px;font-weight:600}
.tab:hover{color:var(--pink-deep)}
.tab.on{background:#fff;color:var(--pink-deep);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* Serie temporal (columnas) */
.tseries{display:flex;align-items:flex-end;gap:10px;height:200px;padding-top:10px}
.tcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;
  justify-content:flex-end;min-width:0;cursor:default}
.tcol .bar{width:100%;max-width:60px;background:var(--pink);border-radius:8px 8px 0 0;
  min-height:3px;transition:background .12s,transform .12s;transform-origin:bottom}
.tcol.hot .bar{background:var(--pink-deep);transform:scaleX(1.06)}
.tcol .lb{font-size:11px;color:var(--muted);white-space:nowrap;font-weight:600}
.tcol.hot .lb{color:var(--pink-deep)}
/* barra que lleva al Ranking del periodo */
.tcol.clickable{cursor:pointer}
.tip .t-cta{display:flex;align-items:center;gap:5px;margin-top:8px;padding-top:7px;
  border-top:1px solid var(--line);font-size:11px;font-weight:700;color:var(--pink-deep)}
.tip .t-cta .msi{font-size:15px;font-variation-settings:'opsz' 20}

/* ---------------- Tablas ---------------- */
.tbl-wrap{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
.tbl th{text-align:left;padding:10px 12px;font-weight:700;font-size:10.5px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;white-space:nowrap;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid #f1f1f1;white-space:nowrap}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n{text-align:right;font-variant-numeric:tabular-nums}
.tbl th.n{text-align:right}
.tbl tbody tr:hover td{background:#f9f9f9}
.tbl .bad{color:var(--err);font-weight:600}
.tbl td.hot{background:var(--pink-soft);font-weight:700;color:var(--pink-deep)}

/* Paginador */
.pager{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line);flex-wrap:wrap}
.pg-info{font-size:12.5px;color:var(--muted)}
.pg-btns{display:flex;align-items:center;gap:8px}
.pg{background:#fff;color:var(--ink-2);border:1px solid var(--line);border-radius:var(--r-sm);
  width:34px;height:34px;padding:0;font-size:16px;line-height:1;display:grid;place-items:center}
.pg:hover:not([disabled]){border-color:var(--pink);color:var(--pink-deep)}
.pg[disabled]{opacity:.35;cursor:not-allowed}
.pg-num{font-size:12.5px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;min-width:52px;text-align:center}

/* ---------------- Avisos ---------------- */
.warn{border-radius:var(--r-md);padding:13px 16px;font-size:12.5px;margin-bottom:12px;line-height:1.65;
  background:var(--warn-soft);color:var(--warn)}
.warn.bad{background:var(--err-soft);color:var(--err)}
/* Solo el TITULO va en su propia linea. Antes, cualquier <b> del texto se volvia
   bloque y partia la frase en pedazos. */
.warn > b:first-child{display:block;margin-bottom:4px;font-size:13px}
.warn b{font-weight:700}
.warn code{background:rgba(0,0,0,.07);padding:1px 6px;border-radius:4px;font-size:12px;
  white-space:nowrap}

/* ---------------- Buscador ---------------- */
.ac{position:relative;max-width:460px}
.ac-list{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;
  border-radius:var(--r-md);box-shadow:var(--e2);max-height:300px;overflow:auto;z-index:20;display:none}
.ac-list.on{display:block}
.ac-item{padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--line)}
.ac-item:last-child{border-bottom:0}
.ac-item:hover,.ac-item.sel{background:var(--pink-soft)}
.ac-item b{display:block;font-size:13.5px}
.ac-item small{color:var(--muted);font-size:11.5px}

@media (max-width:900px){
  .sidebar{position:static;width:auto;flex-direction:row;align-items:center;gap:10px;
    overflow-x:auto;padding:12px;border-right:0;border-bottom:1px solid var(--line)}
  .brand b{font-size:18px} .brand span{display:none}
  nav{flex-direction:row} .nav-item small{display:none} .side-foot{display:none}
  /* Sidebar horizontal: el chip de usuario queda como avatar + iconos, sin texto */
  .side-user{border-top:0;padding:0;gap:6px} .su-txt{display:none}
  .content{margin-left:0}
  .topbar,.page{padding-left:16px;padding-right:16px}
  .kpi.hero{grid-column:span 2}
}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* ---------------- Modulo Seguimiento (Fase 3) ---------------- */
.vig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:14px;margin-top:14px}
.vig-card{border:1px solid var(--line);border-radius:14px;padding:14px;
  background:var(--surface);transition:border-color .12s,box-shadow .12s}
.vig-card:hover{box-shadow:0 4px 14px rgba(0,0,0,.06)}
.vig-card.on{border-color:var(--pink);box-shadow:0 0 0 1px var(--pink)}
.vig-head{display:flex;align-items:center;gap:10px}
.vig-ava{width:38px;height:38px;border-radius:50%;flex:none;display:grid;
  place-items:center;font-weight:700;color:#fff;font-size:15px;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep))}
.vig-id{min-width:0;flex:1}
.vig-id b{font-size:14px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vig-id small{font-size:11px}
.vig-x{background:none;border:none;color:var(--muted);font-size:20px;cursor:pointer;
  line-height:1;padding:0 2px;flex:none}
.vig-x:hover{color:var(--err)}
.vig-state{display:flex;align-items:center;gap:8px;margin:12px 0;font-size:13px}
.vig-dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex:none}
.vig-dot.on{background:var(--ok);box-shadow:0 0 0 3px rgba(46,204,113,.2)}
.vig-live{font-weight:700;color:var(--ink)}
.vig-live small{font-weight:400;color:var(--muted)}
.vig-fresh{margin-left:auto;font-size:11px;color:var(--muted)}
.vig-btn{font-size:12.5px;padding:8px 10px;border-radius:9px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.vig-btn:hover{border-color:var(--pink);color:var(--pink)}
.vig-btn.full{width:100%}
.sub-h{font-size:13px;font-weight:600;color:var(--ink-2);margin:18px 0 8px}
.feed{display:flex;flex-direction:column;gap:4px}
.feed-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;
  padding:7px 12px;border-radius:8px;background:var(--surface-2);font-size:13px}
.feed-u{font-weight:600}
.feed-t{color:var(--pink-deep);font-weight:700}
.feed-c{color:var(--muted);font-size:12px}

/* ---------------- Chatbot flotante "Cami" ---------------- */
#cami{position:fixed;right:22px;bottom:22px;z-index:1000}
#camiBtn{width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
  padding:0;overflow:hidden;background:var(--pink);box-shadow:0 8px 24px rgba(0,0,0,.22);
  transition:transform .15s}
#camiBtn:hover{transform:scale(1.06)}
#camiBtn.open{transform:scale(.9)}
#camiBtn img{width:100%;height:100%;object-fit:cover;display:block}
#camiPanel{position:absolute;right:0;bottom:78px;width:340px;max-width:calc(100vw - 44px);
  height:460px;max-height:calc(100vh - 120px);display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 16px 48px rgba(0,0,0,.25);overflow:hidden}
/* El atributo HTML 'hidden' se pierde frente a display:flex; hay que forzarlo.
   Sin esto el panel se veia SIEMPRE abierto (bug reportado). */
#camiPanel[hidden]{display:none}
.cami-head{display:flex;align-items:center;gap:10px;padding:12px 14px;
  background:linear-gradient(135deg,var(--pink),var(--pink-deep));color:#fff}
.cami-head img{width:34px;height:34px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.6)}
.cami-head b{font-size:14px;display:block;line-height:1.1}
.cami-head small{font-size:11px;opacity:.85}
#camiClose{margin-left:auto;background:none;border:none;color:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;width:30px;height:30px;
  border-radius:7px;transition:background .12s;flex:none;
  font-size:16px;line-height:1;font-weight:400}
#camiClose:hover{background:rgba(255,255,255,.22)}
/* Selector de tema (Camsoda / Plataforma): dos pestanias tipo segmento bajo la
   cabecera. Cada una es un hilo de conversacion distinto. */
.cami-modos{display:flex;gap:6px;padding:8px 10px;background:var(--surface);
  border-bottom:1px solid var(--line)}
.cami-modo{flex:1;border:1px solid var(--line);background:var(--surface-2);
  color:var(--ink-2);border-radius:999px;padding:6px 10px;font-size:11.5px;
  font-weight:600;cursor:pointer;transition:background .12s,color .12s,border-color .12s;
  font-family:inherit;line-height:1.3}
.cami-modo:hover{border-color:var(--pink);color:var(--pink-deep)}
.cami-modo.on{background:var(--pink);border-color:var(--pink);color:#fff}

.cami-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:8px;
  background:var(--surface-2)}
.cami-msg{max-width:82%;padding:9px 12px;border-radius:14px;font-size:13px;line-height:1.4;
  white-space:pre-wrap;word-wrap:break-word}
.cami-msg.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--line);
  border-bottom-left-radius:4px}
.cami-msg.user{align-self:flex-end;background:var(--pink);color:#fff;
  border-bottom-right-radius:4px}
.cami-msg.typing{align-self:flex-start;color:var(--muted);font-style:italic;
  background:none;padding-left:4px}
.cami-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);
  background:var(--surface)}
.cami-input input{flex:1;border:1px solid var(--line);border-radius:20px;padding:9px 14px;
  font-size:13px;outline:none;background:var(--surface-2)}
.cami-input input:focus{border-color:var(--pink)}
.cami-input button{width:40px;height:40px;border-radius:50%;border:none;cursor:pointer;
  background:var(--pink);flex:none;padding:0;
  display:flex;align-items:center;justify-content:center;
  transition:background .12s,transform .1s}
.cami-input button:hover{background:var(--pink-deep)}
.cami-input button:active{transform:scale(.92)}
.cami-input button svg{display:block}
@media (max-width:520px){
  #camiPanel{width:calc(100vw - 32px);right:-6px}
}

/* ---------------- Indicador de sesion (sidebar) ---------------- */
.side-sesion{margin-top:auto;padding:10px 8px 4px;border-top:1px solid var(--line)}
.ss-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.ss-dot{width:8px;height:8px;border-radius:50%;background:var(--muted);flex:none}
.ss-dot.ok{background:var(--ok)}
.ss-dot.bad{background:var(--err)}
.ss-dot.warn{background:#e8a33d}
/* Boton discreto tipo link (no un bloque rosa grande, que recargaba el sidebar) */
.ss-btn{margin-top:6px;font-size:11.5px;padding:0;background:none;border:none;
  color:var(--pink-deep);cursor:pointer;font-weight:600;text-decoration:underline;
  text-underline-offset:2px;border-radius:0}
.ss-btn:hover{color:var(--pink)}
.ss-btn:disabled{opacity:.55;cursor:default;text-decoration:none}
.side-sesion + .side-foot{margin-top:6px}

/* ---------------- Usuario logueado (pie del sidebar) ----------------
   Avatar con iniciales + nombre/rol + botones de icono (actualizar sesion de
   Camsoda y cerrar sesion). Los iconos son SVG inline, no ligaduras del subset. */
.side-user{display:flex;align-items:center;gap:10px;padding:12px 8px 0;
  border-top:1px solid var(--line)}
.su-avatar{width:34px;height:34px;border-radius:50%;background:var(--pink);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:12.5px;
  font-weight:700;letter-spacing:.02em;flex:none}
.su-txt{min-width:0;flex:1}
.su-txt b{display:block;font-size:13px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.su-txt small{display:block;font-size:11px;color:var(--muted)}
.su-actions{display:flex;gap:2px;flex:none}
.su-ico{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;
  border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:background .12s,color .12s}
.su-ico:hover{background:var(--surface-2);color:var(--pink)}
.su-ico svg{width:18px;height:18px;fill:currentColor}
.side-user + .side-foot{margin-top:8px}

/* ---------------- Modal refrescar sesion ---------------- */
.ses-modal{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,.4);
  display:flex;align-items:center;justify-content:center;padding:20px}
.ses-modal[hidden]{display:none}
.ses-box{background:var(--surface);border-radius:16px;width:560px;max-width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.ses-head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line)}
.ses-head b{font-size:16px}
#sesClose{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;
  line-height:1;padding:4px 8px;border-radius:6px}
#sesClose:hover{background:var(--surface-2);color:var(--err)}
.ses-body{padding:18px 20px 20px}
.ses-body code{background:var(--surface-2);padding:1px 5px;border-radius:4px;font-size:12px}
.ses-ta{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;resize:vertical;
  outline:none;background:var(--surface-2)}
.ses-ta:focus{border-color:var(--pink)}
.ses-msg{min-height:18px;font-size:12.5px;margin:8px 0;color:var(--ink-2)}
.ses-msg.ok{color:var(--ok)} .ses-msg.err{color:var(--err)}
.ses-actions{display:flex;justify-content:flex-end;margin-top:6px}

/* --- Selector de periodo del modulo Actividad -----------------------------
   `label` ya trae el estilo de etiqueta; .fld solo apila etiqueta + control
   para poder alinearlos en una fila. El chip del periodo va al final. */
.fld{display:flex;flex-direction:column;gap:0;min-width:150px}
.fld .metric-sel{margin-left:0;width:100%}
.fld input[type=date]{font-family:inherit}

/* --- Evolucion semanal: segunda serie de HORAS + leyenda ------------------
   Las horas van en AZUL (dato secundario) y con su propio eje: comparten el
   grafico con la venta pero no la escala, igual que la tendencia del CRM. */
svg.evo .hline{fill:none;stroke:var(--blue);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;opacity:.9}
.leyenda{display:flex;gap:16px;align-items:center;justify-content:center;
  margin-top:8px;font-size:11.5px;color:var(--ink-2)}
.leyenda .lg{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.leyenda i{width:14px;height:3px;border-radius:2px;display:inline-block}
.leyenda .sw-venta{background:var(--pink)}
.leyenda .sw-horas{background:var(--blue)}
.leyenda .sw-meta{background:var(--muted);height:2px;
  background-image:repeating-linear-gradient(90deg,var(--muted) 0 4px,transparent 4px 7px);
  background-color:transparent}