@font-face{font-family:"Plus Jakarta Sans";src:url(/static/fonts/plus-jakarta-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/static/fonts/plus-jakarta-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/static/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/static/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(/static/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/static/fonts/jetbrains-mono-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/static/fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

/* Estilo «Nube Lima»: tarjetas blancas con sombra suave y el lima como único acento.
   El lima se reserva para "está bien" y la acción principal; como texto sobre blanco no se lee,
   así que el texto y los bordes usan --lime-text (oliva en claro, lima en nocturno).
   Las mejoras de métricas van en --up. El tema sigue al dispositivo (claro / nocturno). */
:root{
  --bg:#f3f5f7; --bg-deep:#0a0b0d; --panel:#fff; --panel-2:#f0f2f5; --line:#e6e9ee; --line-2:#cad1db;
  --text:#10141a; --muted:#5c6572; --dim:#7d8693;
  --lime:#c8ef3a; --lime-hover:#bfe62c; --lime-ink:#141a05; --lime-text:#4a6500;
  --lime-soft:color-mix(in srgb,#c8ef3a 30%,transparent);
  --bad:#d4412f; --warn:#b7791f; --ok:#4a6500; --up:#2f8a4f; --dim-fill:#e1e8cb;
  --web:#0d9488; --meta_ads:#db2777; --instagram:#7c3aed; --ecommerce:#d97706;
  --side-bg:#fff; --top-bg:rgba(255,255,255,.9);
  --shadow:0 1px 2px rgba(16,20,26,.04),0 6px 20px -6px rgba(16,20,26,.10);
  --shadow-lg:0 18px 50px -10px rgba(16,20,26,.22);
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --r:14px; --gap:22px; --side-w:244px;
  /* escala de espaciado: todo sale de acá, para que el ritmo sea el mismo en todo el sitio */
  --s1:6px; --s2:10px; --s3:14px; --s4:18px; --s5:26px; --s6:40px;
  color-scheme:light;
}
/* Nocturno: según el dispositivo, salvo que el usuario haya elegido «Claro» en su perfil
   (base.html pone data-theme en <html>); o siempre, si eligió «Nocturno». */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b0e0c; --panel:#131713; --panel-2:#1a1f1a; --line:#222922; --line-2:#36402f;
    --text:#e8ede3; --muted:#9aa493; --dim:#7a8573;
    --lime:#d4f34a; --lime-hover:#e2ff6a; --lime-text:#d4f34a; --lime-soft:color-mix(in srgb,#d4f34a 14%,transparent);
    --bad:#ff6b5b; --warn:#f3c64a; --ok:#d4f34a; --up:#8fd3a2; --dim-fill:#3f4a26;
    --web:#2dd4bf; --meta_ads:#f472b6; --instagram:#a78bfa; --ecommerce:#fbbf24;
    --side-bg:#0f130f; --top-bg:rgba(15,19,15,.9);
    --shadow:0 10px 30px -12px rgba(0,0,0,.6);
    --shadow-lg:0 18px 50px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b0e0c; --panel:#131713; --panel-2:#1a1f1a; --line:#222922; --line-2:#36402f;
  --text:#e8ede3; --muted:#9aa493; --dim:#7a8573;
  --lime:#d4f34a; --lime-hover:#e2ff6a; --lime-text:#d4f34a; --lime-soft:color-mix(in srgb,#d4f34a 14%,transparent);
  --bad:#ff6b5b; --warn:#f3c64a; --ok:#d4f34a; --up:#8fd3a2; --dim-fill:#3f4a26;
  --web:#2dd4bf; --meta_ads:#f472b6; --instagram:#a78bfa; --ecommerce:#fbbf24;
  --side-bg:#0f130f; --top-bg:rgba(15,19,15,.9);
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 18px 50px rgba(0,0,0,.55);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* sin zoom en el celu: ni pellizco ni doble toque (cada scroller corta la herencia, por eso va en todos) */
*{touch-action:pan-x pan-y}
/* iOS hace zoom al enfocar un campo con letra menor a 16px */
@media (pointer:coarse){input,select,textarea,.add-card input{font-size:16px}}
body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 var(--sans);-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
a:hover{color:var(--text)}
a.link{color:var(--text);text-decoration:underline;text-decoration-color:var(--line-2);text-underline-offset:3px}
a.link:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--lime-text);outline-offset:2px;border-radius:4px}
img{max-width:100%}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.02em}
.mono{font-family:var(--mono);font-size:12.5px}
.muted{color:var(--muted)} .dim{color:var(--dim)}
.bad{color:var(--bad)} .warn{color:var(--warn)} .ok{color:var(--lime-text)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border:1px solid var(--line-2);border-bottom-width:2px;border-radius:4px;color:var(--muted)}

/* ---------- layout ---------- */
.wrap{max-width:1320px;margin:0 auto;padding:0 24px}
/* Menú: en escritorio es una barra lateral fija a la izquierda; en el celular (y tablets angostas)
   se vuelve la barra de arriba de siempre, pegada al borde, con las secciones deslizables. */
.side{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;height:56px;padding:0 16px;
  background:var(--top-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.side form{margin:0}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;color:var(--text);letter-spacing:-.02em;white-space:nowrap;flex:none}
.brand .mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--lime);color:var(--lime-ink);flex:none}
.brand .mark svg{width:16px;height:16px}
.brand:hover{color:var(--text)}
.nav{order:2;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.nav::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;padding:7px 11px;border-radius:10px;color:var(--muted);white-space:nowrap;
  transition:background .15s,color .15s}
.nav a svg{width:18px;height:18px;flex:none;display:none}
.nav a:hover{color:var(--text);background:var(--panel-2)}
.nav a[aria-current=page]{color:var(--lime-text);background:var(--lime-soft);font-weight:600}
.nav-grp{display:none}
.search-btn{order:3;display:inline-flex;align-items:center;gap:9px;background:var(--panel);border:1px solid var(--line);border-radius:10px;
  color:var(--muted);font:14px var(--sans);padding:6px 8px 6px 11px;cursor:pointer;white-space:nowrap;flex:none}
.search-btn svg{width:16px;height:16px;flex:none}
.search-btn:hover{color:var(--text);border-color:var(--line-2)}
.search-btn kbd{margin-left:auto}
.logout{order:4}
.logout .me-name{display:none}
@media (min-width:900px){
  /* solo las páginas con barra lateral (base.html): el login y el informe van centrados */
  body.with-side{padding-left:var(--side-w)}
  .side{position:fixed;top:0;bottom:0;left:0;width:var(--side-w);height:auto;flex-direction:column;align-items:stretch;gap:4px;
    padding:18px 12px 14px;background:var(--side-bg);backdrop-filter:none;-webkit-backdrop-filter:none;border-bottom:0;border-right:1px solid var(--line);overflow-y:auto}
  .side .brand{padding:2px 8px 14px}
  .search-btn{order:0;margin-bottom:10px}
  .nav{order:0;flex:none;flex-direction:column;overflow:visible}
  .nav a{padding:9px 10px}
  .nav a svg{display:block}
  .nav-grp{display:block;padding:14px 10px 6px;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
  .logout{order:0;margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 6px 0;border-top:1px solid var(--line)}
  .logout .me{min-width:0}
  .logout .me-name{display:inline;overflow:hidden;text-overflow:ellipsis}
}
main.wrap{padding:28px 24px 96px}
/* Ningún bloque termina pegado a lo que sigue. Si abajo viene un título de sección (que ya trae
   40px arriba) los márgenes se funden y manda el mayor: no se suman. */
main.wrap > .card,main.wrap > section.card,main.wrap > .grid,main.wrap > .stats,main.wrap > .notice,
main.wrap > .board,main.wrap > .cal,main.wrap > .gallery,main.wrap > .map,main.wrap > .table-wrap,
main.wrap > form,main.wrap > .note-line,main.wrap > .hint,main.wrap > .legend{margin-bottom:var(--s5)}
main.wrap > :last-child{margin-bottom:0}  /* el aire del final lo pone el padding de main */

.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:26px}
.page-head h1{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:-.03em}
.mood{font-size:16px;color:var(--muted);margin-top:8px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:10px}
.crumbs a:hover{color:var(--text)}

/* ---------- secciones con letra: la letra va en un cuadradito lima suave ---------- */
.sec{display:flex;align-items:center;gap:12px;margin:var(--s6) 0 var(--s4);flex-wrap:wrap}
.sec .l{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:9px;background:var(--lime-soft);color:var(--lime-text);
  font-weight:800;font-size:13px}
.sec h2{font-size:18px;font-weight:800;letter-spacing:-.02em}
.sec .sub{font-size:14px;color:var(--muted)}
.sec .spacer{flex:1}

/* ---------- zonas del panel: solo agrupan y dan aire (sin recuadro de color) ---------- */
.zone{position:relative}
.zone > .sec:first-child{margin-top:0}
/* grupos de la lista de tareas (Vencidas, Hoy, Sin fecha…): el mismo aire que si no estuvieran envueltos */
.task-group > .card{margin-bottom:var(--s5)}
main.wrap > .task-group:last-child > .card{margin-bottom:0}
.zone > :last-child{margin-bottom:0}
.zone > .page-head{margin-bottom:var(--s5)}
main.wrap > .zone{margin-bottom:var(--s6)}
.grid > .zone{min-width:0}

/* ---------- métricas: una tarjeta por número ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{padding:18px 20px;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);min-width:0}
.stat .k{font-size:13px;color:var(--muted)}
.stat .v{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.15;margin-top:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.stats.biz .d{font-size:13px;font-weight:500;margin-top:4px}
.stats.biz .note{font-size:12px;color:var(--dim);margin-top:8px}
/* Meta Ads de la agencia: los 8 de «Resultados del negocio» en 4 columnas parejas */
.biz-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin:var(--s5) 0 var(--s3)}
.biz-head h2{font-size:16px;font-weight:800;letter-spacing:-.02em}
.biz-head .sub{font-size:13px;color:var(--muted)}
.stats.biz4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.stats.biz4{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- tarjetas ---------- */
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
/* Lo último de una tarjeta necesita el mismo aire abajo que la tarjeta tiene a los costados.
   Las filas y los desplegables ocupan todo el ancho, así que su propio padding (12-14px) era
   todo lo que las separaba del borde y quedaban pegadas. */
.card > :last-child > li:last-child,
.card > :last-child > .note:last-child{padding-bottom:var(--s5)}
.card > details.more:last-child > summary,
.card > .presets:last-child,
.card > .inline-form:last-child{padding-bottom:var(--s5)}
.card > .res-foot:last-child{padding-bottom:16px}
.pad{padding:var(--s5)}
.grid{display:grid;gap:var(--gap)}
.cols-auto{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.grid-label{grid-column:1/-1;margin:8px 0 -4px;font-size:12px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.cols-2{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}
.cols-kpi{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}

/* tarjeta de cliente: se levanta un poco al pasar el mouse.
   Un solo color de borde por tarjeta, para que no se mezclen en las esquinas: rojo si necesita
   atención, si no lima si es la agencia. El color de marca va como franja por dentro (sombra),
   así acompaña la curva del borde en vez de cortarse contra él. */
.stack{--stripe:0 0 #0000;position:relative;display:flex;flex-direction:column;gap:14px;padding:var(--s4);
  box-shadow:var(--stripe),var(--shadow);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.stack:hover{transform:translateY(-2px);color:inherit;border-color:var(--line-2);
  box-shadow:var(--stripe),0 2px 4px rgba(16,20,26,.04),0 14px 30px -10px rgba(16,20,26,.18)}
.stack.branded{--stripe:inset 0 3px 0 var(--brand)}
/* La agencia: primera, a lo ancho de dos columnas y con borde lima. */
.stack.agency,.stack.agency:hover{border-color:color-mix(in srgb,var(--lime) 75%,var(--line))}
@media (min-width:900px){.stack.agency{grid-column:span 2}}
.stack.bad,.stack.bad:hover{border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.own-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:99px;background:var(--lime-soft);
  font-size:11px;font-weight:700;color:var(--lime-text);vertical-align:2px;letter-spacing:.02em}

/* Página Campañas: tarjetas anchas (en el celular, una por fila). Arriba quién es; después «Hoy»
   con un número por fila (nombre a la izquierda, valor a la derecha) y «Últimos 7 días» en barras
   (la de hoy más fuerte). Barras de HTML, no SVG: se estiran al ancho de la tarjeta sin deformarse. */
.camp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:var(--s4);align-items:start}
.camp-card{gap:var(--s4);padding:20px 22px}
.camp-card .who{align-items:flex-start}
.camp-card .who .name{font-size:17px;line-height:1.3}
.camp-card .who .ind{margin-top:3px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camp-tag{flex:none;margin-left:auto;margin-top:2px;white-space:nowrap;padding:1px 8px;border:1px solid var(--line-2);border-radius:99px;font-size:11.5px;color:var(--muted)}
.camp-sec{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);margin-bottom:8px;
  display:flex;justify-content:space-between;gap:8px}
.camp-sec .n{letter-spacing:0;text-transform:none;font-weight:600;color:var(--muted)}
.camp-today{margin:0;border-top:1px solid var(--line)}
.camp-today > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:9px 0;border-bottom:1px solid var(--line)}
.camp-today dt{font-size:14px;color:var(--muted)}
.camp-today dd{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.camp-today > div:first-child dd{font-size:22px}
.camp-wk{display:flex;gap:6px;height:84px}
.camp-bar{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.camp-bar b{flex:1;display:flex;align-items:flex-end}
.camp-bar i{display:block;width:100%;min-height:2px;border-radius:4px 4px 0 0;opacity:.4}
.camp-bar.today i{opacity:1}
.camp-bar span{font-size:11px;color:var(--dim);text-align:center;line-height:1}
.camp-bar.today span{color:var(--text);font-weight:700}
.camp-accounts{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font-size:13px;line-height:1.6;color:var(--muted)}

.who{display:flex;align-items:center;gap:10px;min-width:0}
.who .name{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who .ind{font-size:13px;color:var(--muted)}
.logo{width:38px;height:38px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line-2);display:grid;place-items:center;
  font-weight:700;font-size:13px;overflow:hidden;flex:none}
.logo img{width:100%;height:100%;object-fit:cover}
.logo.xl{width:76px;height:76px;border-radius:14px;font-size:26px}
.score{font-size:26px;font-weight:700;letter-spacing:-.03em;line-height:1}
.score.ok{color:var(--lime-text)} .score.warn{color:var(--warn)} .score.bad{color:var(--bad)} .score.off{color:var(--dim)}
.score-lbl{font-size:12px;color:var(--muted)}

/* barritas por servicio en la tarjeta (el radar grande queda para la ficha) */
.svc-bars{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.svc-bars li{display:grid;grid-template-columns:62px minmax(0,1fr) 30px;gap:10px;align-items:center;font-size:13px}
.svc-bars .lbl{color:var(--muted)}
.svc-bars .track{height:8px;border-radius:4px;background:var(--bg);overflow:hidden}
.svc-bars .track i{display:block;height:100%;border-radius:4px;background:var(--c)}
.svc-bars .val{text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.svc-bars li.off .val,.svc-bars li.off .lbl{color:var(--dim)}

/* chips de servicio: el color identifica el servicio en todo el sitio */
.chips{display:flex;gap:5px;flex-wrap:wrap}
.chip{font-size:12px;font-weight:600;padding:2px 9px;border-radius:99px;border:1px solid color-mix(in srgb,currentColor 30%,transparent);
  background:color-mix(in srgb,currentColor 10%,transparent);line-height:1.5;white-space:nowrap}
a.chip:hover{background:currentColor}
a.chip:hover span{color:var(--bg)}
.chip.web{color:var(--web)} .chip.meta_ads{color:var(--meta_ads)} .chip.instagram{color:var(--instagram)} .chip.ecommerce{color:var(--ecommerce)}
.chip.none{color:var(--muted)}
.chip.lg{font-size:13px;padding:6px 10px;display:inline-flex;gap:8px;align-items:center}
.code{display:inline-grid;place-items:center;min-width:24px;height:20px;padding:0 4px;border-radius:4px;font-family:var(--mono);font-size:12px;font-weight:600;
  background:var(--panel-2);border:1px solid var(--line-2)}

.card-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line)}
.alert-line{font-size:13.5px;line-height:1.4;padding-top:2px}

/* ---------- tareas ---------- */
.tasks{list-style:none;margin:0;padding:0}
.task{display:flex;align-items:center;gap:14px;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.task:last-child{border-bottom:0}
.task .t{flex:1;min-width:0}
.task .t .title{font-size:14.5px}
.task .t .client{font-size:13px;color:var(--muted)}
.task.done .title{text-decoration:line-through;color:var(--dim)}
.task .meta{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;justify-content:flex-end;font-size:13px}
.check{position:relative;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--muted);background:none;cursor:pointer;padding:0;flex:none;display:grid;place-items:center;color:var(--lime-ink)}
.check.p1{border-color:var(--bad)}
.task.done .check{background:var(--lime);border-color:var(--lime)}
.task.done.just .check{animation:pop .35s ease-out}
.task.doing .check{border-color:var(--lime-text);box-shadow:inset 0 0 0 4px var(--panel),inset 0 0 0 10px var(--lime)}
@keyframes pop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.pill{font-size:12.5px;padding:2px 9px;border-radius:99px;border:1px solid var(--line-2);color:var(--muted);background:none;cursor:pointer;font-family:var(--sans)}
.pill.on{border-color:var(--lime-text);color:var(--lime-text)}
.icon-btn{background:none;border:0;color:var(--dim);cursor:pointer;font-size:16px;line-height:1;padding:4px}
.icon-btn:hover{color:var(--bad)}
.due.late{color:var(--bad)}
.rec{color:var(--dim);font-size:13px}

/* chispitas al tachar y cartel de "día limpio" */
.spark-bit{position:fixed;width:6px;height:6px;border-radius:2px;pointer-events:none;z-index:60;background:var(--lime)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;z-index:70;background:var(--panel);border:1px solid var(--lime-text);
  color:var(--text);padding:12px 18px;border-radius:12px;font-size:15px;box-shadow:var(--shadow-lg);transition:all .35s ease;
  display:flex;gap:12px;align-items:center;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast strong{color:var(--lime-text)}

/* recurrentes */
.rules{list-style:none;margin:0;padding:0}
.rules li{display:flex;gap:12px;align-items:center;padding:12px var(--s4);border-bottom:1px solid var(--line);font-size:14px}
.rules li:last-child{border-bottom:0}
.rules li .when{color:var(--muted);font-size:13px;margin-left:auto;text-align:right}
.presets{display:flex;gap:8px;flex-wrap:wrap;padding:16px var(--s4);border-bottom:1px solid var(--line)}
.presets form{margin:0}
.preset{font:13px var(--sans);padding:4px 10px;border-radius:99px;border:1px dashed var(--line-2);background:none;color:var(--muted);cursor:pointer}
.preset:hover{border-style:solid;color:var(--text)}
.rec-every{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:var(--s4)}
.rec-every label{margin:0;font-size:14px;color:var(--text)}
.rec-every input{width:72px}
.rec-every select{width:auto;min-width:120px}
fieldset.rec-panel{border:0;margin:0 0 var(--s4);padding:0;min-width:0}
fieldset.rec-panel[hidden]{display:none}
.rec-line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.rec-line select{width:auto}
.rec-line fieldset.rec-panel{margin:0}
.days{display:flex;gap:4px;flex-wrap:wrap}
.days label{margin:0;display:inline-flex}
.days input{position:absolute;opacity:0;width:1px}
.days span{display:inline-grid;place-items:center;min-width:34px;height:30px;padding:0 6px;border:1px solid var(--line-2);border-radius:6px;font-size:13px;color:var(--muted);cursor:pointer}
.days input:checked+span{border-color:var(--text);color:var(--text);background:var(--panel-2)}
.days input:focus-visible+span{outline:2px solid var(--lime-text);outline-offset:1px}
details.more>summary{cursor:pointer;list-style:none;padding:12px var(--s4);font-size:14px;color:var(--muted)}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary:hover{color:var(--text)}

/* ---------- formularios ---------- */
label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;font:inherit;font-size:14px;color:var(--text);background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:var(--s2) 12px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--lime-text);box-shadow:0 0 0 3px var(--lime-soft)}
select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:36px;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a8ae99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px}
select:hover{border-color:var(--muted)}
select option,select optgroup{background:var(--panel-2);color:var(--text)}
.dp-btn:hover{border-color:var(--muted)}
input[type=color]{padding:2px;height:38px;width:60px;cursor:pointer}
textarea{resize:vertical;min-height:80px}
input:disabled,select:disabled,textarea:disabled{color:var(--muted);background:var(--panel);border-style:dashed;cursor:not-allowed;resize:none}
input[type=file]{padding:7px}

/* ---------- selector de fechas (app.js): botón con la fecha y calendario propio ---------- */
.dp-native{position:absolute!important;width:1px!important;height:1px;padding:0!important;border:0!important;opacity:0;pointer-events:none}
.dp-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;font:inherit;font-size:14px;color:var(--text);
  background:var(--bg);border:1px solid var(--line-2);border-radius:10px;padding:var(--s2) 12px;cursor:pointer;text-align:left;white-space:nowrap}
.dp-btn>span{overflow:hidden;text-overflow:ellipsis}
.dp-btn svg{flex:none;color:var(--muted);transition:color .15s}
.dp-btn:hover svg,.dp-btn[aria-expanded=true] svg{color:var(--lime-text)}
.dp-btn:focus-visible,.dp-btn[aria-expanded=true]{outline:none;border-color:var(--lime-text)}
.dp-empty{color:var(--dim)}
.dp{position:fixed;z-index:1000;width:272px;padding:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow-lg);animation:dp-in .14s ease-out}
@keyframes dp-in{from{opacity:0;transform:translateY(-4px)}}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dp-head strong{font-size:14px;font-weight:600;text-transform:capitalize}
.dp-nav{display:grid;place-items:center;width:30px;height:30px;border:0;border-radius:8px;background:none;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.dp-nav:hover{background:var(--panel-2);color:var(--text)}
.dp-dow,.dp-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.dp-dow span{padding:4px 0;text-align:center;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.04em}
.dp-day{height:34px;border:0;border-radius:8px;background:none;color:var(--text);font:inherit;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer}
.dp-day:hover{background:var(--panel-2)}
.dp-day.out{color:var(--dim)}
.dp-day.today{color:var(--lime-text);font-weight:600}
.dp-day.sel{background:var(--lime);color:var(--lime-ink);font-weight:600}
.dp-day:focus-visible,.dp-nav:focus-visible,.dp-link:focus-visible{outline:2px solid var(--lime-text);outline-offset:1px}
.dp-foot{display:flex;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.dp-link{padding:4px 8px;border:0;border-radius:6px;background:none;color:var(--lime-text);font:inherit;font-size:13px;cursor:pointer}
.dp-link.muted{color:var(--muted)}
.dp-link:hover{background:var(--panel-2)}
.field{margin-bottom:var(--s4)}
.hint{font-size:12.5px;color:var(--dim);margin-top:4px}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 16px}
/* Filas con columnas fijas: los campos quedan alineados y sin huecos al final. */
.row.r2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row.r3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row.r4{grid-template-columns:repeat(4,minmax(0,1fr))}
.check-card{display:flex;gap:10px;align-items:center;padding:12px;border:1px solid var(--line-2);border-radius:10px;cursor:pointer;
  font-family:var(--sans);font-size:14px;color:var(--text);margin:0}
.check-card input{width:auto;accent-color:var(--lime)}
.check-card:has(input:checked){border-color:currentColor}
/* Etiqueta de un campo con un interruptor a la derecha (p. ej. "Se lo llamó"). */
.label-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:5px}
.label-row>label{margin:0}
.toggle{position:relative;display:inline-flex;align-items:center;cursor:pointer;user-select:none}
.toggle input{position:absolute;opacity:0;width:1px;height:1px}
.toggle span{position:relative;padding-left:38px;font-size:13px;color:var(--muted);line-height:18px}
.toggle span::before{content:"";position:absolute;left:0;top:1px;width:30px;height:16px;border-radius:99px;background:var(--line-2);transition:background .15s}
.toggle span::after{content:"";position:absolute;left:2px;top:3px;width:12px;height:12px;border-radius:50%;background:var(--muted);transition:transform .15s,background .15s}
.toggle input:checked+span{color:var(--text)}
.toggle input:checked+span::before{background:var(--lime)}
.toggle input:checked+span::after{transform:translateX(14px);background:var(--lime-ink)}
.toggle input:focus-visible+span::before{outline:2px solid var(--lime-text);outline-offset:2px}
.inline-form{display:flex;gap:var(--s2);flex-wrap:wrap;padding:16px var(--s4);border-bottom:1px solid var(--line)}
.inline-form input[name=title]{flex:3 1 220px}
.inline-form select,.inline-form input[type=date]{flex:1 1 120px;width:auto}

.btn{display:inline-flex;align-items:center;gap:8px;font:700 14px var(--sans);padding:var(--s2) 18px;border-radius:10px;border:1px solid var(--line-2);
  background:var(--panel);color:var(--text);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px rgba(16,20,26,.05);transition:border-color .15s,background .15s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn:hover{border-color:var(--muted);color:var(--text)}
.btn.primary{background:var(--lime);color:var(--lime-ink);border-color:var(--lime);box-shadow:0 6px 16px -6px color-mix(in srgb,var(--lime) 75%,transparent)}
.btn.primary:hover{background:var(--lime-hover);border-color:var(--lime-hover);color:var(--lime-ink)}
.btn.ghost{background:none;box-shadow:none}
.btn.danger:hover{border-color:var(--bad);color:var(--bad)}
.btn.sm{font-size:13px;padding:7px 13px}
.htmx-request .btn-label,.btn.htmx-request .btn-label{opacity:.4}
.htmx-request.btn::after,.btn.htmx-request::after{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- tabs ---------- */
.tabs{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:4px;gap:3px;background:var(--panel);box-shadow:0 1px 2px rgba(16,20,26,.04);max-width:100%;overflow-x:auto;scrollbar-width:none}
.tabs a{font-size:13.5px;font-weight:500;padding:6px 14px;border-radius:9px;color:var(--muted);white-space:nowrap}
.tabs a:hover{color:var(--text);background:var(--panel-2)}
.tabs a[aria-current=true]{background:var(--lime);color:var(--lime-ink);font-weight:600}
.tabs a[aria-current=true] .count{color:var(--lime-ink)}
/* sub-pestañas de Servicios: una por servicio del cliente, subrayada con su color */
.svc-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:-6px 0 24px;border-bottom:1px solid var(--line)}
.svc-tabs::-webkit-scrollbar{display:none}
.svc-tab{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;margin-bottom:-1px;border-bottom:2px solid transparent;
  font-size:14px;font-weight:500;color:var(--muted);white-space:nowrap}
.svc-tab i{width:8px;height:8px;border-radius:50%;background:var(--c);flex:none}
.svc-tab:hover{color:var(--text)}
.svc-tab[aria-current=page]{color:var(--text);font-weight:700;border-bottom-color:var(--c)}

/* ---------- KPIs ---------- */
/* número grande: nombre arriba (hasta 2 renglones), valor, y la comparación como pastilla abajo.
   Un velo del color del servicio arriba (--c) las ata a la página sin gritar. */
.kpi{--c:var(--lime);position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:14px 16px 14px;
  border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 7%,var(--panel)) 0,var(--panel) 70%);
  transition:border-color .15s}
.kpi::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:var(--c);opacity:.55}
.kpi:hover{border-color:var(--line-2)}
.kpi .k{font-size:12.5px;line-height:1.3;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}
.kpi .v{font-size:25px;line-height:1.1;font-weight:800;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .d{align-self:flex-start;margin-top:auto;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:color-mix(in srgb,currentColor 13%,transparent);white-space:nowrap}
.kpi-grid{display:grid;gap:12px;grid-template-columns:repeat(var(--cols,6),minmax(0,1fr))}
.kpi-grid .kpi{--c:inherit}
@media (max-width:1100px){.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:760px){.kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.kpi{padding:12px 14px}.kpi .v{font-size:21px}}
.d.good{color:var(--up)} .d.worse{color:var(--bad)} .d.flat{color:var(--dim)}
.note-line{font-size:13.5px;color:var(--muted);margin:0 0 10px}

.svc-card{display:flex;flex-direction:column;gap:16px;border-top:3px solid var(--c,var(--line-2));border-top-left-radius:0;border-top-right-radius:0}
.svc-card header{display:flex;align-items:center;gap:10px}
.svc-card header h3{font-size:16px;flex:1}
.svc-card .kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.svc-card .kpis.four{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc-card .kpis .k{font-size:13px;color:var(--muted)}
.svc-card .kpis .v{font-size:18px;font-weight:700}
.svc-card .kpis .d{font-size:13px;font-weight:500}
.svc-card .spark-lbl{font-size:13px;color:var(--muted);margin-bottom:4px}
.svc-card footer{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted);
  margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--line)}

/* ---------- hero del cliente ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:32px;align-items:center;padding:26px 28px}
.hero.branded{box-shadow:inset 0 3px 0 var(--brand),var(--shadow)}
.hero h1{font-size:clamp(26px,4vw,38px);font-weight:700}
.hero .facts{display:flex;gap:18px;flex-wrap:wrap;font-size:14px;color:var(--muted);margin:8px 0 0}
.brand-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--brand);vertical-align:1px;margin-right:2px}
.gauge{text-align:center}
.gauge .big{font-size:40px;font-weight:700;letter-spacing:-.04em;margin-top:-26px;font-variant-numeric:tabular-nums}

/* entrada de la ficha: el radar y el medidor se dibujan una vez al abrir */
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.3,.7,.3,1) .1s forwards}
.radar .shape{fill-opacity:0;animation:draw 1.1s cubic-bezier(.3,.7,.3,1) .1s forwards,fillin .6s ease 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fillin{to{fill-opacity:.2}}

/* ---------- gráficos ---------- */
.chart{width:100%;height:auto;display:block}
.chart text{font-family:var(--mono);font-size:12px;fill:var(--dim)}
.legend{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.legend i.dash{height:0;border-top:2px dashed var(--text);border-radius:0;width:14px;vertical-align:3px}
.radar text{font-family:var(--sans);font-size:11px;fill:var(--muted)}
.radar text.off{fill:var(--dim);text-decoration:line-through}
.chart-box{position:relative}
.chart-box .cursor{position:absolute;top:0;bottom:22px;width:1px;background:var(--muted);pointer-events:none;opacity:0}
.chart-box .dot{position:absolute;width:9px;height:9px;border-radius:50%;border:2px solid var(--bg);transform:translate(-50%,-50%);pointer-events:none;opacity:0}
.chart-box .tip{position:absolute;top:0;pointer-events:none;opacity:0;background:var(--panel-2);border:1px solid var(--line-2);border-radius:7px;
  padding:6px 10px;font-size:13px;white-space:nowrap;box-shadow:var(--shadow-lg);transform:translateX(-50%)}
.chart-box .tip b{display:block;font-size:12px;color:var(--muted);font-weight:400}
.chart-box.on .cursor,.chart-box.on .dot,.chart-box.on .tip{opacity:1}
.chart-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:var(--s3)}

/* ritmo de presupuesto */
.pace .track{position:relative;height:14px;background:var(--bg);border-radius:7px;margin:12px 0 8px}
.pace .fill{height:100%;border-radius:7px;background:var(--meta_ads);max-width:100%}
.pace .fill.rápido{background:var(--warn)} .pace .fill.lento{background:var(--muted)}
.pace .mark{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--text)}
.pace .nums{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.pace .nums strong{color:var(--text)}

/* objetivos por métrica (Meta Ads) */
.mgoals .inline-form select{flex:2 1 220px}
.mgoals .inline-form input[name=target]{flex:1 1 140px;width:auto}
.mgoal-list{list-style:none;margin:0;padding:0}
.mgoal{padding:14px var(--s4);border-bottom:1px solid var(--line)}
.mgoal:last-child{border-bottom:0}
.mgoal-head{display:flex;align-items:center;gap:10px}
.mgoal-head strong{flex:1;min-width:0;font-size:15px}
.mgoal-state{font-size:12.5px;font-weight:600;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,currentColor 12%,transparent);white-space:nowrap}
.mgoal-state.off{color:var(--dim)}
.mgoal-track{height:8px;border-radius:4px;background:var(--bg);overflow:hidden;margin:10px 0 8px}
.mgoal-track i{display:block;height:100%;border-radius:4px;background:var(--dim)}
.mgoal.ok .mgoal-track i{background:var(--lime)} .mgoal.warn .mgoal-track i{background:var(--warn)} .mgoal.bad .mgoal-track i{background:var(--bad)}
.mgoal-nums{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted)}
.mgoal-nums strong{color:var(--text)}

/* ---------- tablas ---------- */
.table-wrap{overflow-x:auto}
/* tabla ancha (app.js · setupHScroll): la misma barra arriba, pegada a la tabla, y los títulos se arrastran */
.hscroll-top{overflow-x:auto;overflow-y:hidden;margin-bottom:6px}
.hscroll-top > div{height:1px}
thead.grab{cursor:grab;user-select:none}
thead.grab.grabbing{cursor:grabbing}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font-size:13px;color:var(--muted);text-align:left;font-weight:400;padding:12px var(--s3);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:12px var(--s3);border-bottom:1px solid var(--line);white-space:nowrap}
td.wrap-cell{white-space:normal;min-width:220px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tr:last-child td{border-bottom:0}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;background:var(--dim)}
.status-dot.ACTIVE{background:var(--lime)} .status-dot.PAUSED{background:var(--warn)}
.bar{height:6px;border-radius:3px;background:var(--line);overflow:hidden;min-width:60px}
.bar i{display:block;height:100%;background:var(--c,var(--lime))}
/* ---------- anuncios: una tarjeta por anuncio con su lectura ---------- */
.tabs a .count{font-family:var(--mono);font-size:11.5px;color:var(--dim);margin-left:4px}
.creatives{display:flex;flex-direction:column;gap:var(--s3)}
.cr-card{display:grid;grid-template-columns:168px minmax(0,1fr);gap:22px;padding:var(--s4)}
.cr-card.off .cr-media img{filter:grayscale(.7);opacity:.7}
.cr-media{position:relative;align-self:start;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--panel-2);border:1px solid var(--line-2)}
.cr-media img{width:100%;height:100%;object-fit:cover;display:block}
.cr-noimg{display:grid;place-items:center;height:100%;font-size:12px;color:var(--dim)}
.cr-kind{position:absolute;left:8px;top:8px;padding:2px 8px;border-radius:99px;background:rgba(10,11,13,.78);font-size:11.5px;font-weight:600;color:#fff;backdrop-filter:blur(4px)}
.cr-main{display:flex;flex-direction:column;gap:var(--s3);min-width:0}
.cr-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.cr-head h3{font-size:16px;font-weight:700;overflow-wrap:anywhere}
.cr-sub{font-size:13px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.cr-state{font-size:13px;color:var(--muted);white-space:nowrap}
/* flex y no grid: la última fila se estira y nunca queda un hueco vacío, con 3 o con 18 números */
.cr-stats{display:flex;flex-wrap:wrap;gap:1px;margin:0;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden}
.cr-stats>div{flex:1 1 128px;background:var(--panel-2);padding:9px 12px;min-width:0}
.cr-stats dd.warn{color:var(--warn)}
/* editor de las métricas de las tarjetas */
.adm{margin-bottom:var(--s3)}
.adm>summary{display:flex;align-items:baseline;gap:6px 12px;flex-wrap:wrap;padding:14px var(--s4);cursor:pointer;font-weight:600;list-style:none}
.adm>summary::-webkit-details-marker{display:none}
.adm>summary::before{content:"▸";color:var(--muted);transition:transform .15s}
.adm[open]>summary::before{transform:rotate(90deg)}
.adm>summary .dim{font-weight:400;font-size:13.5px}
.adm-body{padding:0 var(--s4) var(--s4);display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line)}
.adm-lbl{font-size:12.5px;color:var(--muted);margin-top:12px;text-transform:uppercase;letter-spacing:.04em}
.adm-chosen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.adm-chosen li{display:flex;align-items:center;gap:2px;padding:4px 4px 4px 12px;border:1px solid var(--line-2);border-radius:8px;background:var(--panel-2);min-width:0}
.adm-name{flex:1;min-width:0;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adm-chosen .icon-btn{min-width:36px;min-height:36px}
.adm-chosen .icon-btn:disabled{opacity:.25;cursor:default}
#adm-q{width:100%;max-width:460px}
.adm-group[hidden]{display:none}
.adm-gname{font-size:13px;color:var(--dim);margin:4px 0 6px}
.adm-opts{display:flex;flex-wrap:wrap;gap:6px}
.adm-opt{font:inherit;font-size:13.5px;color:var(--text);background:transparent;border:1px dashed var(--line-2);border-radius:999px;padding:7px 12px;cursor:pointer;min-height:36px}
.adm-opt:hover:not(:disabled){border-color:var(--meta_ads);border-style:solid}
.adm-opt:disabled{opacity:.4;cursor:default}
.adm-opt[hidden]{display:none}
.adm-reset{align-self:flex-start}
.adm-note,.adm-empty{font-size:13px;margin:0}
.cr-stats dt{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-stats dd{margin:2px 0 0;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
/* evaluación contra los objetivos: franja a la izquierda de la tarjeta con el veredicto */
.cr-card.ev-cumple{box-shadow:inset 3px 0 0 var(--ok),var(--shadow)}
.cr-card.ev-cerca{box-shadow:inset 3px 0 0 var(--warn),var(--shadow)}
.cr-card.ev-no_cumple{box-shadow:inset 3px 0 0 var(--bad),var(--shadow)}
.cr-eval{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}
.cr-eval-head{display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;font-size:13.5px}
.cr-verdict{font-size:12.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent);white-space:nowrap}
.cr-verdict.ok{color:var(--ok)} .cr-verdict.warn{color:var(--warn)} .cr-verdict.bad{color:var(--bad)}
.cr-verdict.learn{color:var(--meta_ads)} .cr-verdict.off{color:var(--muted)}
.cr-eval-track{height:6px;border-radius:3px;background:var(--line);overflow:hidden}
.cr-eval-track i{display:block;height:100%;border-radius:3px;background:var(--meta_ads)}
.cr-eval-note{font-size:12.5px}
.cr-goals{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.cr-goals li{display:flex;flex-direction:column;gap:1px;padding:6px 10px;border-radius:8px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);background:color-mix(in srgb,currentColor 8%,transparent);min-width:0;flex:0 1 auto}
.cr-goals li.ok{color:var(--ok)} .cr-goals li.warn{color:var(--warn)} .cr-goals li.bad{color:var(--bad)} .cr-goals li.off{color:var(--muted)}
.cr-goals .n{font-size:11.5px;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-goals .v{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}
.cr-goals .v strong{font-size:14.5px}
.cr-goals .t{color:var(--muted)}
.cr-eval-sum span+span::before{content:"· ";color:var(--dim)}
.cr-eval-sum .ok{color:var(--ok)} .cr-eval-sum .warn{color:var(--warn)} .cr-eval-sum .bad{color:var(--bad)}
@media (max-width:640px){.cr-goals li{flex:1 1 calc(50% - 6px)}}
.cr-other{font-size:13px;color:var(--dim);margin-top:-6px}
.cr-video{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:18px;padding:var(--s3);border:1px solid var(--line);border-radius:8px;background:var(--bg)}
.cr-vnums{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-content:start}
.cr-vnums>div{display:flex;flex-direction:column;min-width:0}
.cr-vnums .k{font-size:12px;color:var(--muted)}
.cr-vnums strong{font-size:22px;font-weight:700;line-height:1.2;font-variant-numeric:tabular-nums}
.cr-vnums .dim{font-size:12px}
.cr-curve-lbl{font-size:12px;color:var(--muted);margin-bottom:8px}
.cr-bars{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;height:118px;align-items:end}
.cr-bar{display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;height:100%;min-width:0}
.cr-bar i{display:block;background:var(--meta_ads);opacity:.85;border-radius:4px 4px 0 0;min-height:2px}
.cr-bar:first-child i{opacity:1}
.cr-bar .v{font-family:var(--mono);font-size:11.5px;color:var(--text);text-align:center;margin-bottom:3px}
.cr-bar .l{font-family:var(--mono);font-size:11px;color:var(--dim);text-align:center;margin-top:5px;border-top:1px solid var(--line-2);padding-top:4px}
.cr-read{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px 22px;font-size:14px}
.cr-read.muted{display:block;font-size:13.5px}
.cr-read ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.cr-read li{position:relative;padding-left:22px;line-height:1.45}
.cr-read li::before{content:"";position:absolute;left:3px;top:.52em;width:8px;height:8px;border-radius:50%}
.cr-good li::before{background:var(--lime)}
.cr-bad li::before{background:var(--bad)}
@media (max-width:960px){.cr-video{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.cr-card{grid-template-columns:minmax(0,1fr)}.cr-media{max-width:220px}.cr-stats>div{flex-basis:40%}}

/* embudo */
.funnel{display:flex;flex-direction:column;gap:14px}
.funnel .step{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;gap:12px;align-items:center;font-size:14px}
.funnel .track{height:26px;background:var(--bg);border-radius:5px;overflow:hidden}
.funnel .fill{height:100%;background:var(--ecommerce);border-radius:5px;opacity:.85}
.funnel .rate{font-size:12.5px;color:var(--muted);text-align:right}

/* métricas del píxel */
.px-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.px-list li{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr) 130px;column-gap:14px;row-gap:3px;align-items:center}
.px-name{display:flex;flex-direction:column;min-width:0;font-size:14px}
.px-name .dim{font-size:12px}
.px-track{height:22px;background:var(--bg);border-radius:5px;overflow:hidden}
.px-track i{display:block;height:100%;background:var(--meta_ads,var(--accent));border-radius:5px;opacity:.85}
.px-num{text-align:right;font-size:15px;white-space:nowrap}
.px-num .d{font-size:12.5px}
.px-sub{grid-column:2 / -1;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px}
.px-note{font-size:12.5px;margin:16px 0 0}
@media (max-width:640px){
  .px-list li{grid-template-columns:minmax(0,1fr) auto}
  .px-track{grid-column:1 / -1;grid-row:2}
  .px-sub{grid-column:1 / -1}
}

/* posts IG */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px}
.post{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--bg);display:block}
.post .thumb{aspect-ratio:1;background:var(--panel-2);display:grid;place-items:center;font-size:12px;color:var(--dim)}
.post .thumb img{width:100%;height:100%;object-fit:cover}
.post .info{padding:10px 12px;font-size:12.5px;color:var(--muted);display:flex;justify-content:space-between;gap:6px;flex-wrap:wrap}

/* alertas */
.alerts{list-style:none;margin:0;padding:0}
.alerts li{display:flex;gap:12px;align-items:flex-start;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);font-size:14px}
.alerts li:last-child{border-bottom:0}
.alerts .dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none}
.alerts .bad .dot{background:var(--bad)} .alerts .warn .dot{background:var(--warn)}

/* bitácora */
.notes{list-style:none;margin:0;padding:0}
.note{padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);display:flex;gap:12px}
.note:last-child{border-bottom:0}
.note p{margin:0;white-space:pre-wrap;flex:1;font-size:14px}
.note time{font-size:12.5px;color:var(--dim);display:block;margin-bottom:3px}

.empty{padding:38px 22px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--text);font-size:16px;margin-bottom:4px}
.notice{padding:var(--s3) 16px;border:1px dashed var(--line-2);border-radius:10px;font-size:13.5px;color:var(--muted)}
.notice.bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent);color:var(--bad)}

/* ---------- mapa (diseño constelación) ---------- */
/* el mapa es siempre oscuro (cielo con estrellas), también en modo claro: lleva sus propios colores */
.map{--text:#e9ecdf;--muted:#a8ae99;--dim:#868c79;color:var(--text);background:var(--bg-deep);border:1px solid #1d2130;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.map svg{display:block;width:100%;height:auto}
.map .lbl{font-family:var(--mono);font-size:12px;fill:#dfe3f0}
.map .cl{font-family:var(--mono);font-size:12px;letter-spacing:.08em}
.map a:hover rect.node{stroke-width:2}
.map a:hover .lbl{fill:#fff}
.map .star{animation:twinkle 5s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:var(--o)}50%{opacity:calc(var(--o) * .25)}}
.map .pulse{transform-box:fill-box;transform-origin:center;animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.2);opacity:0}}
.map .ln{transition:stroke-opacity .2s,stroke-width .2s}
.map svg.focus .ln{stroke-opacity:.06}
.map svg.focus .ln.on{stroke-opacity:.95;stroke-width:1.8}
.map svg.focus a.node-g{opacity:.45;transition:opacity .2s}
.map svg.focus a.node-g.on{opacity:1}
.map-list{display:none}
.map-legend{display:flex;gap:20px;flex-wrap:wrap;padding:var(--s3) var(--s4);border-top:1px solid #1d2130;font-size:13px;color:var(--muted)}
.map-legend i{display:inline-block;width:9px;height:9px;margin-right:6px}

/* ---------- calendario ---------- */
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.cal .dow{font-size:13px;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line)}
.cal .day{min-height:126px;padding:9px 10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.cal .day:nth-child(7n){border-right:0}
.cal .day.out{background:var(--bg)}
.cal .day.out .num{color:var(--dim)}
.cal .day.today .num{background:var(--lime);color:var(--lime-ink);border-radius:5px;padding:0 5px}
.cal .num{font-size:13px;font-weight:700;align-self:flex-start;margin-bottom:2px}
.cal .ev{display:block;font-size:12.5px;line-height:1.3;padding:3px 7px;border-radius:4px;border-left:3px solid var(--c,var(--muted));background:var(--panel-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal .ev.done{text-decoration:line-through;color:var(--dim)}
.cal .ev.late{color:var(--bad)}
.cal .ev.ghost{background:none;border-left-style:dashed;color:var(--muted)}
.cal .ev.extra,.cal .dots,.cal-agenda{display:none}
.as-cards .c-only{display:none}

/* ---------- buscador (Ctrl + K) ---------- */
.cmdk{padding:0;border:1px solid var(--line-2);border-radius:16px;background:var(--panel);color:var(--text);width:min(620px,calc(100vw - 32px));
  margin:12vh auto auto;box-shadow:var(--shadow-lg)}
.cmdk::backdrop{background:rgba(5,6,4,.45);backdrop-filter:blur(2px)}
.cmdk .q{border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:17px;padding:16px 18px;background:none}
.cmdk .q:focus{border-color:var(--line)}
.cmdk-res{max-height:min(420px,60vh);overflow:auto;padding:6px}
.cmdk-res h4{margin:8px 10px 4px;font-size:12.5px;font-weight:400;color:var(--dim)}
.cmdk-res a.it{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;font-size:14.5px}
.cmdk-res a.it .sub{margin-left:auto;font-size:13px;color:var(--muted)}
.cmdk-res a.it[aria-selected=true]{background:var(--lime-soft);color:var(--text)}
.cmdk-res .logo{width:26px;height:26px;border-radius:6px;font-size:11px}
.cmdk-res form{padding:10px}
.cmdk-res .none{padding:18px;text-align:center;color:var(--muted)}
.cmdk-ok{padding:18px;text-align:center}
.cmdk-foot{display:flex;gap:16px;padding:11px 16px;border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)}

/* ---------- informe para el cliente ---------- */
.report{max-width:960px;margin:0 auto;padding:32px 20px 60px}
.report .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.report footer{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);font-size:13px;color:var(--dim);text-align:center}

/* ---------- personas: avatar con su color ---------- */
.avatar{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--c,var(--line-2));color:#141a05;
  font:600 11px var(--sans);flex:none;letter-spacing:.02em}
.avatar.sm{width:22px;height:22px;font-size:10px}
.avatar.none{background:none;border:1.5px dashed var(--line-2)}
/* varios responsables: los avatares se enciman un poco, cada uno con un borde del color del fondo */
.avatars{display:inline-flex;align-items:center}
.avatars .avatar+.avatar{margin-left:-7px}
.avatars .avatar{box-shadow:0 0 0 2px var(--panel)}
.drop-body .pick.on{background:var(--lime-soft)}
.pick-ok{margin-left:auto;color:var(--lime-text);font-weight:700}
.member-checks{display:flex;flex-wrap:wrap;gap:8px}
.member-check{display:inline-flex;align-items:center;gap:8px;margin:0;padding:6px 12px 6px 6px;border:1px solid var(--line-2);border-radius:99px;
  font-size:14px;color:var(--text);cursor:pointer}
.member-check input{position:absolute;opacity:0;width:1px;height:1px}
.member-check:has(input:checked){border-color:var(--lime-text);background:var(--lime-soft)}
.member-check:has(input:focus-visible){outline:2px solid var(--lime-text);outline-offset:2px}
.field > .label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.me{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);white-space:nowrap}
.me:hover{color:var(--text)}
.logout{display:flex;align-items:center;gap:12px}

/* ---------- menú desplegable (nombre de columna, responsable, alta de usuario) ---------- */
.drop{position:relative}
.drop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center}
.drop>summary::-webkit-details-marker{display:none}
.drop-body{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:290px;background:var(--panel);border:1px solid var(--line);
  border-radius:14px;padding:var(--s4);box-shadow:var(--shadow-lg);text-align:left}
.drop.right .drop-body{left:auto;right:0}
.drop-body .field:last-of-type{margin-bottom:10px}
.drop-body .pick{display:flex;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:9px;background:none;color:var(--text);
  font:14px var(--sans);text-align:left;cursor:pointer}
.drop-body .pick:hover{background:var(--panel-2)}
.assign>summary{border-radius:50%}

/* ---------- selector de período de las estadísticas ---------- */
.period-btn{gap:9px;height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:10px;font-size:13.5px;color:var(--text);
  background:var(--panel);white-space:nowrap;transition:border-color .15s}
.period-btn:hover,.period-pick[open] .period-btn{border-color:var(--muted)}
.period-btn>svg{flex:none;color:var(--muted);transition:color .15s,transform .15s}
.period-btn:hover>svg,.period-pick[open] .period-btn>svg{color:var(--lime-text)}
.period-pick[open] .chev{transform:rotate(180deg)}
.period-btn .pl{font-weight:600}
.period-btn .pr,.period-body .pr{font-family:var(--mono);font-size:12px;color:var(--dim);font-variant-numeric:tabular-nums}
.period-body{width:330px;padding:8px}
.period-list{display:flex;flex-direction:column;gap:1px}
.period-list .pick{justify-content:space-between;gap:14px;font-size:14px;padding:8px 10px;color:var(--muted)}
.period-list .pick:hover{color:var(--text)}
.period-list .pick[aria-current=true]{background:var(--lime-soft);color:var(--text);box-shadow:inset 3px 0 0 var(--lime-text)}
.period-list .pick[aria-current=true] .pr{color:var(--muted)}
.period-custom{margin-top:8px;padding:12px 10px 6px;border-top:1px solid var(--line-2)}
.period-title{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:10px}
.period-title[aria-current=true]{color:var(--lime-text)}
.period-custom .row.r2{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px}
.period-custom .field{margin-bottom:12px}
.period-custom .btn{width:100%;justify-content:center}
@media (max-width:560px){.period-btn .pr{display:none}.period-body{width:min(330px,calc(100vw - 32px))}}

/* la barra de secciones del cliente usa las pestañas de siempre; solo fija su lugar */
.client-nav{margin:0 0 24px}
/* franja del cliente: siempre arriba en sus páginas, para saber dónde estás */
.client-strip{display:flex;align-items:center;gap:12px;margin-bottom:var(--s3);padding:12px 18px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.client-strip.branded{box-shadow:inset 3px 0 0 var(--brand),var(--shadow)}
.client-strip .logo{width:36px;height:36px;font-size:12px}
.cs-back{font-size:13px;color:var(--muted)}
.cs-back:hover{color:var(--text)}
.cs-sep{color:var(--dim);font-size:13px}
.cs-who{flex:1;min-width:0;line-height:1.3}
.cs-name{font-weight:700;font-size:15px}
.cs-ind{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cs-health{font-size:22px;text-align:right;flex:none}
.cs-health small{display:block;margin-top:3px;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:0}
@media (max-width:640px){.client-strip{padding:10px 14px;gap:10px}.cs-back,.cs-sep{display:none}}

/* ---------- tablero ---------- */
.team-strip{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:13px;color:var(--muted);margin:0 0 20px}
.team-chip{display:inline-flex;align-items:center;gap:6px}
/* Sin scroll horizontal: las columnas que no entran bajan a otra fila. Tampoco hay overflow que
   recorte el menú "···" de cada columna. */
.board{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;align-items:start;padding:4px 2px 8px}
.bl{min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column}
.bl.drag{opacity:.5}
.bl-head{display:flex;align-items:center;gap:10px;padding:16px 16px 12px;cursor:grab}
.bl-head:active{cursor:grabbing}
.bl-head h3{font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-head .count{font-family:var(--mono);font-size:12px;color:var(--dim)}
.bl-head .maps{font-size:12px;color:var(--dim);border:1px dashed var(--line-2);border-radius:99px;padding:1px 8px;white-space:nowrap}
.bl-menu{position:relative;margin-left:auto}
.bl-menu>summary{list-style:none;cursor:pointer;color:var(--dim);padding:0 4px;font-size:16px;line-height:1}
.bl-menu>summary::-webkit-details-marker{display:none}
.bl-menu>summary:hover{color:var(--text)}
.bl-menu .menu-body{position:absolute;z-index:40;right:0;top:calc(100% + 6px);width:270px;background:var(--panel);
  border:1px solid var(--line);border-radius:14px;padding:var(--s4);box-shadow:var(--shadow-lg)}
.cards{display:flex;flex-direction:column;gap:var(--s2);padding:0 var(--s3) 4px;min-height:44px;overflow-y:auto;max-height:min(62vh,640px)}
.cards.over{background:var(--lime-soft);border-radius:10px}
.bl-more{padding:8px 16px 12px;font-size:12.5px;color:var(--dim)}
/* El botón «Agregar ↵» aparece recién cuando hay algo escrito (Enter también guarda). No depende
   del foco: en el celular, tocar el botón saca el foco del campo y el botón desaparecería antes del clic. */
.add-card{display:flex;gap:8px;align-items:center;padding:var(--s3)}
.add-card input{flex:1;min-width:0;background:none;border:1px dashed var(--line-2);font-size:13.5px}
.add-card .btn{display:none;flex:none;padding:8px 12px}
.add-card:has(input[name=title]:not(:placeholder-shown)) .btn{display:inline-flex}
.add-card input:focus{background:var(--bg);border-style:solid}

.bcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 1px 2px rgba(16,20,26,.06);padding:var(--s3) 15px;cursor:grab;
  display:flex;flex-direction:column;gap:var(--s2);overflow:hidden}
.bcard:hover{border-color:var(--muted)}
/* en el celular se arrastra manteniendo apretado: que no salga el menú del sistema ni se seleccione texto */
.bcard{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
.bcard.ghost{position:fixed;z-index:80;margin:0;pointer-events:none;transform:rotate(2deg) scale(1.03);box-shadow:var(--shadow-lg);opacity:.96}
.bcard .next{display:grid;place-items:center;width:28px;height:28px;flex:none;padding:0;border:1px solid var(--line-2);border-radius:50%;
  background:var(--panel);color:var(--muted);font-size:15px;line-height:1;cursor:pointer;transition:all .15s}
.bcard .next:hover{border-color:var(--lime-text);color:var(--lime-text);background:var(--lime-soft)}
.bl:last-child .bcard .next{display:none}
.dragging-card,.dragging-card *{cursor:grabbing!important}
.bcard.drag{opacity:.35}
.bcard .tape{position:absolute;left:0;top:0;bottom:0;width:3px}
.bcard .title{font-size:14px;line-height:1.35}
.bcard.done .title{text-decoration:line-through;color:var(--dim)}
.bcard .foot{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.bcard .foot .grow{flex:1}
.chip.prio{color:var(--bad)}

/* ---------- ventana de detalle (tarjeta y recursos) ---------- */
.modal{padding:0;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--text);
  width:min(680px,calc(100vw - 28px));margin:auto;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain;
  box-shadow:var(--shadow-lg)}
.modal[open]{animation:modal-in .16s ease-out}
.modal:focus{outline:none}
@keyframes modal-in{from{opacity:0;transform:translateY(8px)}}
.modal:has(.res-pdf),.modal:has(.res-full){width:min(1000px,calc(100vw - 28px))}
.modal::backdrop{background:rgba(5,6,4,.45);backdrop-filter:blur(2px)}
/* El encabezado y los botones quedan pegados arriba y abajo: el contenido largo
   se desplaza entre los dos y "Guardar" siempre está a la vista. */
.modal-body{--mx:28px;--mt:24px;--mb:20px;padding:var(--mt) var(--mx) var(--mb)}
.modal-head{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;
  position:sticky;top:0;z-index:3;background:var(--panel);border-bottom:1px solid var(--line);
  margin:calc(-1 * var(--mt)) calc(-1 * var(--mx)) var(--s5);padding:var(--mt) var(--mx) var(--s4)}
.modal-title{font:700 20px var(--sans);letter-spacing:-.02em;border:0;background:none;padding:4px 0;margin-top:2px}
.modal-title:focus{border-bottom:1px solid var(--lime-text)}
.modal-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;
  position:sticky;bottom:0;z-index:3;background:var(--panel);border-top:1px solid var(--line);
  margin:var(--s5) calc(-1 * var(--mx)) calc(-1 * var(--mb));padding:var(--s4) var(--mx) var(--mb)}

/* confirmación (app.js · ask): chica, centrada, con el botón de borrar en rojo */
.modal.confirm{width:min(420px,calc(100vw - 28px))}
.confirm-q{margin:0 0 var(--s5);font-size:15px;line-height:1.5}
.confirm-foot{display:flex;justify-content:flex-end;gap:10px}
.btn.bad{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.bad:hover{filter:brightness(1.08);color:#fff;border-color:var(--bad)}

/* ---------- recursos ---------- */
.dropzone.over{border-color:var(--lime-text);background:var(--panel-2)}
/* qué se subió y qué no, después de subir */
.upload-result{margin-bottom:var(--s5);font-size:14px}
.upload-result.has-bad{border-color:color-mix(in srgb,var(--bad) 45%,transparent)}
.upload-result p{margin:0 0 6px}
.upload-result ul{margin:0 0 12px;padding-left:18px;display:grid;gap:3px;overflow-wrap:anywhere}
.upload-result ul:last-child{margin-bottom:0}
.drop-label{display:block;cursor:pointer;margin:0 0 var(--s3)}
/* carpetas: tarjetas en Recursos y, adentro de una, atajos a las demás */
.folders{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));gap:14px}
.folder{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px;align-items:center;padding:var(--s4);color:var(--text)}
.folder:hover{border-color:var(--lime-text)}
.folder svg{grid-row:span 2;width:34px;height:34px;fill:var(--lime-soft);stroke:var(--lime-text);stroke-width:1.5}
.folder-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.folder .dim{font-size:12.5px}
.folder-chips{display:flex;gap:8px;overflow-x:auto;margin:0 0 var(--s5);padding-bottom:2px}
.folder-chips .chip{color:var(--muted);white-space:nowrap}
.folder-chips .chip[aria-current="true"]{color:var(--lime-text);background:var(--lime-soft)}
/* Tecnologías del cliente (tools.html) */
.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:14px;align-items:start}
.tool{display:flex;flex-direction:column;gap:8px;min-width:0}
.tool-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tool-head h3{margin:0;font-size:16px;overflow:hidden;text-overflow:ellipsis}
.tool-link{color:var(--lime-text);font-size:13.5px;overflow-wrap:anywhere}
.tool-acc{font-size:13.5px;overflow-wrap:anywhere}
.tool-notes{margin:0;font-size:13.5px;color:var(--muted);white-space:pre-line}
.tool-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:4px}
.res-move{margin:var(--s4) 0 0}
.drop-label strong{display:block;color:var(--text);font-size:15px;margin-bottom:2px}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.shot{margin:0;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.shot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg)}
.shot figcaption{display:flex;gap:10px;align-items:center;justify-content:space-between;padding:11px 13px;font-size:13px}
.shot .name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-head{display:flex;gap:12px;align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.res-head h3{font-size:15px;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.res-body{margin:0;padding:16px var(--s4) var(--s4);max-height:220px;overflow:auto;font:12.5px/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;color:var(--muted)}
.res-foot{padding:12px var(--s4);border-top:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.res-actions{display:flex;gap:8px;align-items:center;flex:none}
.res-list{list-style:none;margin:0;padding:0}
.res-list li{display:flex;gap:14px;align-items:center;padding:var(--s3) var(--s4);border-bottom:1px solid var(--line)}
.res-list li:last-child{border-bottom:0}
.res-name{flex:1;min-width:0;font-size:14px}
.res-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line-2);
  font:600 11px var(--mono);color:var(--muted);flex:none}
.res-icon.pdf{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.res-full{display:block;width:100%;height:auto;max-height:min(72vh,calc(100dvh - 240px));object-fit:contain;border-radius:8px;background:var(--bg)}
.res-pdf{width:100%;height:min(72vh,780px,calc(100dvh - 240px));border:1px solid var(--line);border-radius:8px;background:var(--bg)}

/* ---------- equipo ---------- */
.team-list{list-style:none;margin:0;padding:0}
.team-list li{display:flex;gap:14px;align-items:center;padding:16px var(--s4);border-bottom:1px solid var(--line)}
.team-list li:last-child{border-bottom:0}
.team-list li.off{opacity:.55}
.team-list .who{flex:1;min-width:0}
.team-list .load{font-size:13px;color:var(--muted);white-space:nowrap}
/* notificaciones de este dispositivo (Equipo) */
.push-card{margin-top:var(--s4)}
.push-head{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.push-head h3{margin:0 0 4px}
.push-status{margin:0;font-size:13.5px}
.push-status.on{color:var(--lime-text)}
.push-actions{display:flex;gap:8px;flex-wrap:wrap}
.push-what{margin:12px 0 0}
.push-ios{margin:8px 0 0}

/* ---------- prospectos y caja ---------- */
/* Filtros: una sola fila arriba de los datos, como manda el manual de tableros. */
.crm-filters{position:relative;display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:14px;align-items:end;margin-bottom:22px}
.crm-filters .clear{position:absolute;top:12px;right:16px;font-size:12.5px;color:var(--muted)}
.crm-filters .clear:hover{color:var(--lime-text)}
.crm-filters .field{margin-bottom:0}
/* caja: ¿venta nueva o renovación? */
.renewal .label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px;background:var(--panel)}
.seg label{margin:0;cursor:pointer;position:relative}
.seg input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0}  /* sin ancho: el input{width:100%} general lo sacaba de la pantalla */
.seg span{display:block;padding:6px 14px;border-radius:9px;font-size:13.5px;color:var(--muted)}
.seg input:checked+span{background:var(--lime);color:var(--lime-ink);font-weight:600}
.seg input:focus-visible+span{outline:2px solid var(--lime-text);outline-offset:1px}
.tag-renewal{display:inline-block;margin-left:6px;padding:0 7px;border:1px solid var(--line-2);border-radius:99px;font-size:11.5px;color:var(--muted);vertical-align:1px}
.crm-filters .period-f{grid-column:span 2}
/* Prospectos: las 4 cifras del período (crm · summary), en 4 columnas; 2 en el celular */
.crm-stats{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:22px}
.crm-stats .note{font-size:12px;color:var(--dim);margin-top:6px}
@media (max-width:640px){.crm-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.crm-stats .stat{padding:14px}.crm-stats .v{font-size:22px}}
form.contents{display:contents}
.crm-filters .label{display:block;font-size:13px;color:var(--muted);margin-bottom:5px}
.crm-filters .period-pick,.crm-filters .period-btn{width:100%}
.crm-filters .period-btn{height:41px;background:var(--bg)}
.crm-filters .period-btn .pr{margin-right:auto}
.crm-filters .field.end{display:flex;gap:8px;align-items:center}
.crm-filters .range{display:flex;gap:8px;align-items:center}
.crm-filters .range .dp-btn{min-width:0;flex:1}
.crm-filters .field.period{grid-column:span 2;min-width:0}

/* Barras de distribución. Un solo tono: lo que se compara es el largo, no el color.
   La punta redondeada de 4px y el mínimo de 2px son para que un valor chico se vea. */
.dist{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.dist li{display:grid;grid-template-columns:minmax(72px,118px) minmax(0,1fr) auto;gap:14px;align-items:center;font-size:13.5px}
.dist .lbl{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dist .track{position:relative;height:12px;border-radius:6px;background:var(--bg);overflow:hidden}
.dist .track i{position:absolute;left:0;top:0;height:100%;min-width:2px;border-radius:6px;background:var(--lime)}
.dist .val{font-variant-numeric:tabular-nums;font-weight:500;white-space:nowrap}
/* Parte de un todo: el total atrás, lo que cerró adelante. Misma barra porque es
   un subconjunto; en dos barras parecerían dos cosas distintas. */
.dist.part .track i.soft{background:var(--dim-fill)}
.dist.part .track i.fill{background:var(--lime)}

/* Días: el mejor y el peor se marcan con texto, no solo con color. */
.day-summary{display:flex;flex-wrap:wrap;gap:6px 22px;margin-bottom:14px;font-size:14px}
.day-summary .up{color:var(--lime-text)}
.dist.weekdays li{grid-template-columns:minmax(96px,150px) minmax(0,1fr) auto}
.dist .rank{font-size:11px;padding:1px 6px;border-radius:99px;margin-left:4px;border:1px solid currentColor}
.dist .rank.mejor{color:var(--lime-text)} .dist .rank.peor{color:var(--bad)}

/* Conversión: el número grande manda, las tres lecturas lo acompañan. */
.conv{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.conv .gauge{flex:none}
.conv-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;flex:1;min-width:190px}
.conv-list .k{font-size:13px;color:var(--muted)}
.conv-list .v{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.conv-list .dim{font-size:12.5px}

/* Estado del prospecto: el color acompaña, la palabra manda. */
.state{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.state::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--c);flex:none}

tr.clickable{cursor:pointer}
tr.clickable:hover td{background:var(--panel-2)}
.drop-body.wide{width:min(620px,calc(100vw - 48px))}

/* ---------- responsive ---------- */
@media (max-width:960px){
  .cols-2{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr) auto}
  .hero .radar-box{display:none}
}
@media (max-width:640px){
  .wrap{padding:0 16px}
  .row.r2,.row.r3{grid-template-columns:minmax(0,1fr)}
  .row.r4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .crm-filters .field.period{grid-column:1 / -1}
  .modal-body{--mx:18px;--mt:18px;--mb:16px}
  main.wrap{padding:22px 16px calc(96px + env(safe-area-inset-bottom))}
  .side{height:54px;gap:8px;padding:0 12px;background:var(--side-bg);backdrop-filter:none;-webkit-backdrop-filter:none}
  /* En el celular las secciones van en una barra fija abajo, como en una app: con ícono y nombre,
     todas a la vista. (backdrop-filter en .side haría que "fixed" quede atado al encabezado.) */
  .search-btn{margin-left:auto}
  .nav{position:fixed;left:0;right:0;bottom:0;z-index:30;gap:0;background:var(--side-bg);border-top:1px solid var(--line);
    padding:5px 4px calc(5px + env(safe-area-inset-bottom))}
  .nav a{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:3px;font-size:10.5px;font-weight:600;padding:6px 1px;border-radius:10px}
  .nav-t{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nav a svg{display:block;width:22px;height:22px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
  .brand-txt,.logout .btn,.search-btn kbd,.search-btn .sb-txt{display:none}
  .logout .avatar{width:32px;height:32px}
  .search-btn{padding:8px;border-radius:10px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat{padding:14px 16px}
  .stat .v{font-size:22px}
  .cols-auto{grid-template-columns:minmax(0,1fr)}
  .hero{grid-template-columns:minmax(0,1fr);padding:20px;gap:22px}
  .hero .gauge{justify-self:start}
  .svc-card .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .board{gap:12px}
  .dist li{grid-template-columns:minmax(64px,92px) minmax(0,1fr) auto;gap:10px}
  .dist.weekdays li{grid-template-columns:minmax(0,1fr) auto;row-gap:4px}
  .dist.weekdays .track{grid-column:1 / -1;grid-row:2}
  .conv{gap:18px}
  .gallery{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .team-list li{flex-wrap:wrap}
  .drop-body{width:min(290px,calc(100vw - 40px))}
  .task{flex-wrap:wrap;padding:13px 15px}
  .task .meta{width:100%;justify-content:flex-start;padding-left:32px}
  .funnel .step{grid-template-columns:minmax(0,1fr) 90px}
  .funnel .track{grid-column:1/-1;order:3}
  .map svg{display:none}
  .map-list{display:block;padding:6px 0}
  .map-list h3{font-size:13px;padding:12px 16px 6px;letter-spacing:.06em}
  .map-list a{display:flex;justify-content:space-between;padding:8px 16px;font-size:14px;border-bottom:1px solid #1d2130}
  /* tablas largas (Prospectos, Caja) en el celular: cada fila es una tarjeta. Arriba lo principal
     (nombre o descripción) y a la derecha el estado o el monto; abajo, el resto en chico, uno al lado
     del otro. Las celdas vacías no se muestran. */
  table.as-cards,table.as-cards tbody{display:block}
  table.as-cards thead{display:none}
  table.as-cards tr{display:block;position:relative;padding:13px 16px;border-bottom:1px solid var(--line)}
  table.as-cards tr:last-child{border-bottom:0}
  table.as-cards td{display:inline-block;min-width:0;padding:0;margin:4px 12px 0 0;border:0;font-size:13px;color:var(--muted);white-space:normal;text-align:left}
  table.as-cards td.c-main{display:block;margin:0 0 2px;padding-right:128px;font-size:15px;color:var(--text)}
  table.as-cards td.c-side{position:absolute;top:13px;right:16px;max-width:120px;margin:0;font-size:14px;text-align:right}
  table.as-cards td.c-full{display:block;margin-top:6px}
  table.as-cards td.c-empty{display:none}
  table.as-cards td[data-l]::before{content:attr(data-l) ": ";color:var(--dim)}
  table.as-cards .c-only{display:inline}

  /* calendario en el celular: el mes entero en chico (número y puntitos) y, abajo, las tareas del día tocado */
  .cal .dow{padding:8px 0;text-align:center;font-size:0}
  .cal .dow::first-letter{font-size:12px;text-transform:uppercase}
  .cal .day{min-height:52px;padding:6px 2px;align-items:center;gap:4px;cursor:default}
  .cal .day[tabindex]{cursor:pointer}
  .cal .num{align-self:center;margin:0;font-size:13px}
  .cal .ev,.cal .day > .dim{display:none}
  .cal .dots{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;max-width:100%}
  .cal .dots i{width:6px;height:6px;border-radius:50%;background:var(--c)}
  .cal .dots i.ghost{background:none;border:1px dashed var(--c)}
  .cal .dots b{font-size:10px;line-height:6px;color:var(--muted)}
  .cal .day.sel{background:var(--lime-soft)}
  .cal .day.sel .num{color:var(--lime-text)}
  .cal .day.today.sel .num{color:var(--lime-ink)}
  .cal-agenda:not([hidden]){display:block;margin-top:var(--s4);padding:var(--s4)}
  .cal-agenda h3{font-size:15px;margin:0 0 10px}
  .cal-agenda .ev{display:block;font-size:14px;padding:9px 11px;margin-top:6px;border-radius:6px;border-left:3px solid var(--c,var(--muted));background:var(--panel-2)}
  .cal-agenda .ev.done{text-decoration:line-through;color:var(--dim)}
  .cal-agenda .ev.late{color:var(--bad)}
  .cal-agenda .ev.ghost{background:none;border-left-style:dashed;color:var(--muted)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .draw{stroke-dashoffset:0}
  .radar .shape{fill-opacity:.2}
}

/* ---------- /sistema: diagramas de cómo está hecha la web ----------
   Todo en HTML y CSS. Cada tipo de pieza tiene su color (--k): persona, pantalla, servidor, base,
   externo, automático y dato. En el celular los flujos van de arriba hacia abajo y las secuencias
   pasan a ser una lista numerada que dice quién le habla a quién. */
.dg{--k-persona:#c026d3;--k-pantalla:#2563eb;--k-servidor:#16a34a;--k-base:#b45309;--k-externo:#ea580c;--k-auto:#7c3aed;--k-dato:#0d9488}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dg{--k-persona:#f0abfc;--k-pantalla:#7ab8ff;--k-servidor:#8fd3a2;--k-base:#fbbf24;--k-externo:#ff9f6b;--k-auto:#a78bfa;--k-dato:#2dd4bf}}
:root[data-theme="dark"] .dg{--k-persona:#f0abfc;--k-pantalla:#7ab8ff;--k-servidor:#8fd3a2;--k-base:#fbbf24;--k-externo:#ff9f6b;--k-auto:#a78bfa;--k-dato:#2dd4bf}
.dg code{font-family:var(--mono);font-size:.86em;background:var(--panel-2);border:1px solid var(--line);border-radius:4px;padding:0 4px;overflow-wrap:anywhere}
.dg .k-persona{--k:var(--k-persona)} .dg .k-pantalla{--k:var(--k-pantalla)} .dg .k-servidor{--k:var(--k-servidor)}
.dg .k-base{--k:var(--k-base)} .dg .k-externo{--k:var(--k-externo)} .dg .k-auto{--k:var(--k-auto)} .dg .k-dato{--k:var(--k-dato)}
.dg-levels{display:flex;flex-wrap:wrap;max-width:100%}
.dg-levels a b{font-family:var(--mono);font-size:12px;margin-right:4px;color:var(--dim)}
.dg-levels a[aria-current=true] b{color:var(--lime-text)}
.dg-depth{display:flex;align-items:center;gap:5px;margin:var(--s3) 0 var(--s2);font-size:13px;color:var(--muted);flex-wrap:wrap}
.dg-depth i{width:26px;height:6px;border-radius:3px;background:var(--line-2)}
.dg-depth i.on{background:var(--lime)}
.dg-depth span{margin-left:8px}
.dg-legend{display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px;color:var(--muted)}
.dg-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--k);margin-right:6px;vertical-align:-1px}
.dg-p{font-size:14px;color:var(--muted);margin:var(--s4) 0 0;max-width:80ch}
.dg-intro{margin-top:var(--s4)}
.dg-after{margin-top:var(--s3)}
.dg-block h3{font-size:15px;margin-bottom:var(--s3)}
.dg-3{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.dg-2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}

/* una caja */
.dg-node{--k:var(--muted);flex:1 1 130px;min-width:0;background:var(--panel-2);border:1px solid var(--line-2);border-top:3px solid var(--k);
  border-radius:8px;padding:9px 12px 10px}
.dg-node .tag{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--k);margin-bottom:2px}
.dg-node .t{font-weight:700;font-size:14px;line-height:1.3}
.dg-node .s{font-size:12.5px;color:var(--muted);margin-top:3px;line-height:1.4}

/* flujo: cajas y flechas en fila */
.dg-flow{display:flex;flex-wrap:wrap;align-items:stretch;row-gap:10px}
.dg-arrow{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 6px;
  max-width:96px;min-width:30px;text-align:center;font-size:11px;line-height:1.25;color:var(--dim)}
.dg-arrow::before{content:"→";font-size:18px;line-height:1;color:var(--muted)}
.dg-arrow.both::before{content:"⇄"}
.dg-stack{display:flex;flex-direction:column;gap:8px}
.dg-stack > .dg-node{flex:none}
.dg-stack > .dg-arrow{flex-direction:row;padding:0;max-width:none}
.dg-stack > .dg-arrow::before{content:"↓"}
.dg-stack > .dg-arrow.both::before{content:"⇅"}

/* árbol de pantallas */
.dg-tree{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:var(--s4);margin-top:var(--s5)}
.dg-branch{display:flex;flex-direction:column;gap:8px}
.dg-branch > .dg-node,.dg-leaves > .dg-node{flex:none}
.dg-leaves{display:flex;flex-direction:column;gap:8px;margin-left:14px;padding-left:14px;border-left:1px dashed var(--line-2)}

.dg-list,.dg-rel{margin:0;padding-left:18px;display:grid;gap:8px;font-size:14px;color:var(--muted)}
.dg-list b,.dg-rel b{color:var(--text);font-weight:600}
.dg-table td,.dg-table th{white-space:normal;vertical-align:top;font-size:13.5px}
.dg-table td:first-child{color:var(--text);min-width:180px}
.dg-table td.y{color:var(--lime-text)}
.dg-table td.x{color:var(--dim)}

/* secuencia: carriles con su línea de vida y mensajes de uno a otro */
.dg-seq{--n:3;display:grid;gap:10px;padding-bottom:6px;
  background:linear-gradient(90deg,transparent calc(50% - 1px),var(--line-2) calc(50% - 1px),var(--line-2) calc(50% + 1px),transparent calc(50% + 1px))
    0 0/calc(100% / var(--n)) 100% repeat-x}
.dg-row{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr))}
.dg-lane{margin:0 4px;padding:8px 6px;text-align:center;font-weight:700;font-size:13px;line-height:1.3;background:var(--panel-2);
  border:1px solid var(--line-2);border-radius:8px;overflow-wrap:anywhere}
.dg-msg{grid-column:var(--a)/var(--b);margin-inline:calc(50% / var(--span));display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:2px;font-size:13px;line-height:1.35;min-width:0}
.dg-msg .who,.dg-note .who{display:none}
.dg-msg .txt,.dg-msg .sub{background:var(--panel);padding:0 6px;border-radius:4px}
.dg-msg .sub{font-family:var(--mono);font-size:11px;color:var(--dim);overflow-wrap:anywhere}
.dg-msg .ln{align-self:stretch;height:2px;margin-top:4px;background:var(--muted);position:relative}
.dg-msg .ln::after{content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);border:5px solid transparent;border-left:8px solid var(--muted);border-right:0}
.dg-msg.rev .ln::after{right:auto;left:-2px;border-left:0;border-right:8px solid var(--muted)}
.dg-msg.res .ln{background:repeating-linear-gradient(90deg,var(--muted) 0 6px,transparent 6px 10px)}
.dg-note{grid-column:var(--a)/var(--b);margin:0 4px;padding:6px 10px;border:1px dashed var(--line-2);border-radius:6px;background:var(--panel-2);
  font-size:12.5px;line-height:1.4;color:var(--muted);text-align:center;min-width:0;overflow-wrap:anywhere}
.dg .n{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-right:6px;padding:0 4px;border-radius:9px;background:var(--line-2);
  color:var(--text);font:600 11px var(--mono);vertical-align:1px}

/* nivel 5: flujos desplegables con sus pasos */
.dg-flows{display:grid;gap:12px}
.dg-f{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.dg-f[open]{border-color:var(--line-2)}
.dg-f > summary{list-style:none;cursor:pointer;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;padding:16px var(--s5)}
.dg-f > summary::-webkit-details-marker{display:none}
.dg-f > summary::before{content:"+";font:600 15px var(--mono);color:var(--dim);width:12px}
.dg-f[open] > summary::before{content:"−"}
.dg-f > summary .t{font-weight:700;font-size:15.5px}
.dg-f > summary .s{font-family:var(--mono);font-size:12px;color:var(--dim);overflow-wrap:anywhere;min-width:0}
.dg-f-body{display:grid;gap:var(--s5);padding:0 var(--s5) var(--s5)}
.dg-steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:12px;font-size:14px;color:var(--muted);max-width:92ch}
/* el número va aparte (absoluto): con grid, cada pedazo de texto y cada <code> sería una celda */
.dg-steps li{counter-increment:s;position:relative;padding-left:36px;min-height:22px}
.dg-steps li::before{content:counter(s);position:absolute;left:0;top:0;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line-2);font:600 11.5px var(--mono);color:var(--text)}
.dg-steps b{color:var(--text)}
.dg-pager{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:var(--s6)}

@media (max-width:640px){
  .dg-flow{flex-direction:column}
  .dg-flow > .dg-node{flex:none}
  .dg-arrow{flex-direction:row;gap:8px;padding:0 0 0 14px;max-width:none;justify-content:flex-start}
  .dg-arrow::before{content:"↓"}
  .dg-arrow.both::before{content:"⇅"}
  .dg-depth span{margin-left:0;width:100%}
  .dg-seq{background:none;gap:8px}
  .dg-head{display:none}
  .dg-row{grid-template-columns:minmax(0,1fr)}
  .dg-msg,.dg-note{grid-column:1/-1;margin:0;align-items:flex-start;text-align:left;padding:8px 12px;border-left:2px solid var(--line-2);
    border-radius:0 6px 6px 0;background:var(--panel-2)}
  .dg-note{border-style:dashed;border-width:1px 1px 1px 2px}
  .dg-msg.res{border-left-style:dashed}
  .dg-msg .who,.dg-note .who{display:block;font-family:var(--mono);font-size:11px;color:var(--dim);margin-bottom:2px}
  .dg-msg .txt,.dg-msg .sub{background:none;padding:0}
  .dg-msg .ln{display:none}
  .dg-f > summary{padding:14px 16px}
  .dg-f-body{padding:0 16px 18px}
}

/* ---------- colores fijos de los gráficos ----------
   Algunos SVG traen colores escritos para el fondo oscuro (rejilla, línea punteada, lima).
   Una regla de CSS le gana a un atributo del SVG, así que acá se adaptan al tema sin tocar las plantillas.
   El mapa queda afuera: siempre es oscuro. */
:not(.map) > svg [stroke="#2d3226"]{stroke:var(--line)}
:not(.map) > svg [stroke="#3a4030"]{stroke:var(--line-2)}
:not(.map) > svg [stroke="#e9ecdf"]{stroke:var(--text)}
:not(.map) > svg [stroke="#d4f34a"]{stroke:var(--ok)}
:not(.map) > svg [fill="#d4f34a"]{fill:var(--ok)}
.legend i[style*="#e9ecdf"]{background:var(--text)!important}


/* ---------- SEO: oportunidades (Web y la tienda de un Ecommerce) ---------- */
.seo-op{padding:var(--s4) var(--s4) var(--s3)}
.seo-op-head{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.seo-op-head strong{font-size:15px}
.seo-op-head .dim{font-size:13px;line-height:1.45}
.seo-list{list-style:none;margin:0;padding:0}
.seo-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;padding:9px 0;border-top:1px solid var(--line)}
.seo-list .q{flex:1 1 100%;font-weight:600;overflow-wrap:anywhere}
.seo-list .m{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.seo-list .m strong{color:var(--text)} .seo-list .m strong.bad{color:var(--bad)}
.seo-list .g{font-size:12px;font-weight:600;color:var(--up);padding:1px 8px;border-radius:999px;background:color-mix(in srgb,var(--up) 13%,transparent)}
.seo-none{font-size:13.5px;margin:0;padding:6px 0}