/* ══ CENTRO DE CAMPAÑAS — workspace post-login (sin sidebar) ══ */
#campaign-center{position:fixed;inset:0;z-index:400;overflow-y:auto;background:var(--bg);font-family:"DM Sans",sans-serif;display:none}
body.zn-precampaign .sb,body.zn-precampaign #main{display:none!important}
.cc-wrap{max-width:1320px;margin:0 auto;padding:30px 40px 72px;width:100%}
.cc-user-name{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--t1)}
.cc-user-av{width:38px;height:38px;border-radius:var(--r11);background:linear-gradient(135deg,var(--p),var(--sky));color:var(--surf);display:flex;align-items:center;justify-content:center;font-weight:var(--fw-bold);font-size:var(--fs-body);flex-shrink:0}
.cc-av-logo{background:var(--surf)!important;padding:4px;overflow:hidden;box-sizing:border-box;border:var(--border)}
.cc-exec{margin-bottom:26px;align-items:center;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp7);margin:14px 0 24px;padding:0;background:none;border:none;flex-wrap:wrap}
.cc-stat{background:var(--surf);border:var(--border);border-radius:18px;box-shadow:var(--sh-xs);padding:var(--sp8);display:flex;align-items:center;gap:13px;position:static;min-width:0}
.cc-stat-ic{width:44px;height:44px;border-radius:var(--r12);display:flex;align-items:center;justify-content:center;flex-shrink:0;background:rgba(13,148,136,.10)!important;color:var(--teal-d)!important}
.cc-stat-ic svg{stroke-width:2.4;width:20px;height:20px}
.cc-stat-num{font-size:23px;font-weight:var(--fw-heavy);color:var(--t1);line-height:1.05;letter-spacing:-.5px}
.cc-stat-lbl{font-size:var(--fs-sec);color:var(--t3);font-weight:var(--fw-semi);margin-top:3px;white-space:normal}
.cc-toolbar{display:flex;flex-wrap:wrap;padding:12px 14px;background:var(--bg);border:var(--border);border-radius:var(--r12);gap:var(--sp5);align-items:center;margin-bottom:22px}
.cc-search{flex:1;min-width:220px;background:var(--surf);position:relative;display:flex;align-items:center}
.cc-search input{width:100%;border:var(--border);border-radius:var(--r11);padding:11px 12px 11px 38px;font-size:var(--fs-body);font-family:inherit;color:var(--t1);background:var(--surf);outline:none;transition:border-color var(--tr-base),box-shadow var(--tr-base)}
.cc-search input:focus{border-color:var(--p);box-shadow:var(--sh-focus)}
.cc-search>svg{position:absolute;left:12px;color:var(--t3);pointer-events:none}
.cc-filter{display:flex;align-items:center;gap:var(--sp2);background:var(--surf);border:var(--border);border-radius:var(--r11);padding:0 8px 0 12px;height:42px}
.cc-filter-lbl{font-size:var(--fs-sec);font-weight:var(--fw-bold);color:var(--t3)}
.cc-filter select{border:none;background:transparent;font-size:var(--fs-body);font-weight:var(--fw-semi);font-family:inherit;color:var(--t1);outline:none;cursor:pointer;padding:0 2px;height:100%}
.cc-grid{display:grid;align-items:stretch;gap:var(--sp9);grid-template-columns:repeat(4,minmax(0,1fr))}
.cc-card{height:100%;border:var(--border);overflow:hidden;background:var(--surf);transition:transform var(--tr-16),box-shadow var(--tr-16),border-color var(--tr-16);display:flex;flex-direction:column;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.05);border-radius:var(--r16);min-width:0}
.cc-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(15,23,42,.11);border-color:var(--bd)}
.cc-card-activa{border-top:3px solid var(--ok)}.cc-cover{position:relative;background-size:cover;background-position:center;height:96px}
.cc-cover::after{display:none}
.cc-cover-top{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:space-between;padding:11px;z-index:1}
.cc-badge{font-size:var(--fs-micro);font-weight:var(--fw-bold);letter-spacing:.5px;text-transform:uppercase;padding:5px 10px;border-radius:var(--r20);background:rgba(255,255,255,.95);color:var(--t1);box-shadow:0 1px 4px rgba(15,23,42,.12);align-self:flex-start}
.cc-badge-activa{color:#047857;background:#d1fae5}.cc-badge-finalizada{color:var(--t2);background:var(--bd)}.cc-badge-borrador{color:#b45309;background:#fde68a}.cc-badge-inactiva{color:#b91c1c;background:#fee2e2}
.cc-card-body{display:flex;flex-direction:column;flex:1;padding:var(--sp7);gap:var(--sp5)}
.cc-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp6);min-width:0}
.cc-card-name{font-weight:var(--fw-heavy);color:var(--t1);font-size:var(--fs-h3);word-break:break-word;line-height:1.25}
.cc-card-client{font-size:var(--fs-sec);color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-cta-sec svg{width:16px;height:16px}
.cc-gauge{flex-shrink:0;text-align:center;width:62px}
.cc-gauge-lbl{font-size:var(--fs-micro);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.3px;color:var(--t3);margin-top:1px}
.cc-metrics{display:flex;border-top:1px solid var(--bg);border-bottom:1px solid var(--bg);padding:13px 0;gap:var(--sp2);min-width:0}
.cc-metric{flex:1;display:flex;align-items:center;gap:7px;min-width:0}
.cc-metric-ic{border-radius:var(--r8);background:var(--pl);color:var(--p);display:flex;align-items:center;justify-content:center;flex-shrink:0;width:28px;height:28px}
.cc-metric-ic svg{width:14px;height:14px}
.cc-metric-num{font-weight:var(--fw-heavy);color:var(--t1);font-size:var(--fs-body);line-height:1}
.cc-metric-lbl{font-size:var(--fs-micro);color:var(--t3);font-weight:var(--fw-semi)}
.cc-cta-row{display:flex;gap:9px;margin-top:2px}
.cc-cta{flex:1;border:none;border-radius:var(--r11);font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sp2);transition:filter var(--tr-base);padding:11px;font-size:var(--fs-body);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cc-cta:hover{filter:brightness(1.06)}
.cc-cta-primary{background:var(--p);color:var(--surf)}
.cc-cta-sec{border:var(--border);border-radius:var(--r11);background:var(--surf);color:var(--t2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color var(--tr-base),border-color var(--tr-base),color var(--tr-base),transform var(--mo-1);width:40px}
.cc-cta-sec:hover{border-color:var(--p);color:var(--p)}
.cc-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp5);margin-top:22px}
.cc-foot-info{font-size:var(--fs-body);color:var(--t3)}
.cc-pages{display:flex;align-items:center;gap:var(--sp2)}
.cc-page{min-width:34px;height:34px;border-radius:var(--r9);border:var(--border);background:var(--surf);color:var(--t2);font-size:var(--fs-body);font-weight:var(--fw-semi);cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;transition:background-color var(--tr-base),border-color var(--tr-base),color var(--tr-base),transform var(--mo-1)}
.cc-page:hover:not(:disabled){border-color:var(--p);color:var(--p)}
.cc-page.on{background:var(--p);color:var(--surf);border-color:var(--p)}
.cc-page:disabled{opacity:.4;cursor:default}
.cc-perpage{display:flex;align-items:center;gap:7px;font-size:var(--fs-body);color:var(--t3)}
.zpager{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.zpager-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r9);border:var(--border);background:var(--surf);color:var(--t2);font-size:20px;line-height:1;cursor:pointer;transition:background-color var(--tr-base),border-color var(--tr-base),color var(--tr-base),transform var(--mo-1);font-family:inherit;padding:0}
.zpager-btn:hover:not(:disabled){border-color:var(--p);color:var(--p);background:var(--p2)}
.zpager-btn:disabled{opacity:.35;cursor:default}
.zpager-mid{display:flex;align-items:center;gap:7px;font-size:var(--fs-body);color:var(--t2);font-weight:var(--fw-semi)}
.zpager-inp{width:54px;height:34px;text-align:center;border-radius:var(--r9);border:var(--border);background:var(--surf);color:var(--t1);font-size:var(--fs-body);font-weight:var(--fw-bold);font-family:inherit;-moz-appearance:textfield}
.zpager-inp::-webkit-outer-spin-button,.zpager-inp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.zpager-inp:focus{outline:none;border-color:var(--p);box-shadow:0 0 0 3px var(--p2)}
.zpager-tot{color:var(--t3);font-weight:var(--fw-semi)}
.cc-perpage select{border:var(--border);border-radius:var(--r9);padding:6px 9px;font-size:var(--fs-body);font-family:inherit;color:var(--t1);background:var(--surf);cursor:pointer;outline:none}
.cc-empty{text-align:center;padding:64px 20px;color:var(--t3);font-size:var(--fs-body)}
.cc-msg{text-align:center;color:var(--danger);font-size:var(--fs-body);font-weight:var(--fw-semi);margin-bottom:14px;display:none}
.cc-msg.vis{display:block}
.ptoast-host{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:2147483000;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.ptoast{display:flex;align-items:center;gap:9px;background:#0f172a;color:#fff;font-size:13.5px;font-weight:var(--fw-semi);line-height:1.4;padding:11px 16px 11px 12px;border-radius:12px;box-shadow:0 12px 34px rgba(0,0,0,.28);opacity:0;transform:translateY(12px);transition:opacity var(--mo-4) var(--ez-out),transform var(--mo-4) var(--ez-out);max-width:min(90vw,440px)}
.ptoast.show{opacity:1;transform:translateY(0)}
.ptoast-ic{width:20px;height:20px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:var(--fw-bold);flex-shrink:0}
.ptoast-err{background:#7f1d1d}.ptoast-err .ptoast-ic{background:#ef4444}
.ptoast-warn{background:#78350f}.ptoast-warn .ptoast-ic{background:#f59e0b}
@media(max-width:640px){.cc-wrap{padding:20px 15px 50px}.cc-grid{grid-template-columns:1fr}}

.cc-brand{display:none;max-height:50px;max-width:158px;object-fit:contain;flex-shrink:0;flex:0 0 auto}
.cc-brand.vis{display:block}

.cc-stat:first-child{padding-left:18px}
.cc-stat+.cc-stat::before{position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:15px;background:var(--bd);content:none}

.cc-feat{margin-bottom:26px}
.cc-feat-card{display:flex;align-items:stretch;background:var(--surf);border:var(--border);overflow:hidden;cursor:pointer;transition:transform var(--tr-16),box-shadow var(--tr-16),border-color var(--tr-16);border-radius:var(--r16);box-shadow:var(--sh-xs);flex-wrap:wrap}
.cc-feat-card:hover{box-shadow:0 12px 28px rgba(15,23,42,.10);transform:translateY(-2px);border-color:var(--bd)}
.cc-feat-cover{flex-shrink:0;background-size:cover;background-position:center;position:relative;width:208px;flex:0 0 auto}
.cc-feat-cover .cc-badge{position:absolute;top:12px;left:12px}
.cc-feat-body{flex:1;display:flex;align-items:center;justify-content:space-between;padding:16px 24px;gap:22px;flex-wrap:wrap;min-width:0}
.cc-feat-kicker{font-size:var(--fs-label);font-weight:var(--fw-bold);text-transform:uppercase;letter-spacing:.6px;color:var(--p);margin-bottom:3px}
.cc-feat-name{font-weight:var(--fw-heavy);color:var(--t1);letter-spacing:-.4px;font-size:19px;word-break:break-word;line-height:var(--lh-tight)}
.cc-feat-metrics{display:flex;align-items:center;margin-top:12px;gap:22px;flex-wrap:wrap;row-gap:var(--sp5)}
.cc-feat-met-num{font-size:19px;font-weight:var(--fw-heavy);color:var(--t1);line-height:1}
.cc-feat-met-lbl{font-size:var(--fs-micro);color:var(--t3);text-transform:uppercase;letter-spacing:.3px;margin-top:3px;font-weight:var(--fw-semi)}
.cc-feat-gauge{flex-shrink:0;text-align:center;display:flex;flex-direction:column;align-items:center}
.cc-feat-cta{flex-shrink:0;flex:0 0 auto}
.cc-feat-cta .cc-cta{white-space:nowrap;padding:13px 24px}
.cc-grid-title{font-weight:var(--fw-heavy);color:var(--t1);letter-spacing:-.3px;margin:0 0 14px;font-size:16px}


.cc-zero{display:none;text-align:center;padding:40px 20px 60px}
.cc-zero-ill{width:150px;height:auto;margin:0 auto 22px;display:block}
.cc-zero-ttl{font-size:20px;font-weight:var(--fw-heavy);color:var(--t1);letter-spacing:-.3px}
.cc-zero-sub{font-size:var(--fs-body);color:var(--t2);margin:8px auto 0;max-width:380px;line-height:var(--lh-loose)}
.cc-zero-cta{margin-top:22px;display:inline-flex;align-items:center;gap:var(--sp3);background:var(--p);color:var(--surf);border:none;border-radius:var(--r12);padding:13px 24px;font-size:var(--fs-body);font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;transition:filter var(--tr-base)}
.cc-zero-cta:hover{filter:brightness(1.06)}
/* ── v73: Centro de campañas — sidebar + layout amplio + jerarquía ── */
body.zn-precampaign #campaign-center{overflow:hidden}
.cc-side-nav{display:flex;flex-direction:column;gap:3px}
.cc-help{background:var(--bg);border:var(--border);border-radius:var(--r14);padding:var(--sp6)}
.cc-help-ttl{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--t1)}
.cc-help-sub{font-size:var(--fs-ter);color:var(--t3);margin-top:3px;line-height:var(--lh-body)}
.cc-help-btn{margin-top:11px;width:100%;border:1px solid var(--p);background:var(--surf);color:var(--pd);border-radius:var(--r9);padding:var(--sp3);font-size:var(--fs-body);font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;transition:background var(--tr-14)}
.cc-help-btn:hover{background:var(--pl)}

.zn-bgpill{position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);display:flex;align-items:center;gap:9px;background:rgba(15,23,42,.93);color:#fff;font-size:12.5px;font-weight:600;padding:9px 16px;border-radius:22px;box-shadow:0 8px 26px rgba(15,23,42,.28);z-index:99999;opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;backdrop-filter:blur(6px)}
.zn-bgpill.vis{opacity:1;transform:translate(-50%,0)}
.zn-bgpill.ok{background:rgba(13,148,136,.95)}
.zn-bgpill-sp{width:13px;height:13px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:znspin .7s linear infinite;flex-shrink:0}
.zn-bgpill-ok{font-weight:900}
@keyframes znspin{to{transform:rotate(360deg)}}
.tb-refresh{display:inline-flex;align-items:center;gap:7px;background:none;border:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--t3);cursor:pointer;padding:7px 11px;border-radius:9px}
.tb-refresh:hover{background:var(--bg,#f1f5f9);color:var(--p)}
.tb-refresh svg{width:16px;height:16px}
.tb-refresh.spin svg{animation:znspin .8s linear infinite}
@media(max-width:640px){.tb-refresh-txt{display:none}}
.cc-main{flex:1;min-width:0;height:100%;overflow-y:auto;display:flex;flex-direction:column}

.cc-feat-info{display:flex;flex-direction:column;min-width:0;flex:1 1 260px}

.cc-feat-gauge .cc-gauge-lbl{margin-top:2px}
.cc-feat-sep{width:1px;align-self:stretch;min-height:42px;background:var(--bd)}
.cc-feat-act{display:flex;align-items:center;gap:var(--sp2);font-size:var(--fs-ter);color:var(--t3);margin-top:12px}
.cc-feat-act svg{width:13px;height:13px;stroke:var(--t3)}

@media(max-width:980px){.cc-wrap{padding:26px 24px 60px}}
@media(max-width:860px){body.zn-precampaign #campaign-center{display:block;overflow-y:auto}.cc-side-nav{flex-direction:row}.cc-help{display:none}.cc-main{height:auto;overflow:visible}}
/* ── v74: Centro de campañas = chrome nativo del dashboard ── */
body.zn-precampaign #campaign-center{display:block;overflow-y:auto}
body.zn-precampaign .cc-sb{display:flex!important}
/* ══ SI INTELIGENCIA ESTÁ MONTADA, LA PLATAFORMA SE VE. PUNTO. ══
   Que la plataforma esté visible dependía de una clase del `<body>` que dos
   caminos asíncronos se pasaban entre sí: `_applyCampaignData` la saca al
   terminar de traer la campaña y `_intActivar` la repone al terminar de montar
   el v2. Cuando la campaña resuelve DOS veces —el arranque de la app y la
   entrada a Alertas disparan una cada una— la segunda pasada encuentra el
   testigo ya soltado, saca la clase, y `#campaign-center` se va a `display:none`
   con Alertas adentro: `#v2-app` queda con clase `dentro on` y caja de
   0×0, o sea que el usuario ve el informe clásico y su sección no existe.
   Medido: 3 de 4 corridas.
   Esto no es una tapa más rápida: es sacar la pregunta de la carrera. Si el
   nodo del v2 está montado y encendido, no hay ningún estado en el que
   esconder la plataforma sea correcto. */
body:has(#v2-app.dentro.on) #campaign-center{display:block;overflow-y:auto}
body:has(#v2-app.dentro.on) .cc-sb{display:flex!important}
.cc-sb .sb-logo{cursor:pointer}
.cc-sb .sb-logo:hover{background:var(--bg)}
.cc-sb.collapsed .cc-help,.cc-sb.collapsed .cc-credit{display:none}
.cc-sb.collapsed .sb-foot{display:block}
.cc-sb.collapsed .ni-sub{display:none}
.cc-sb.collapsed .ni-parent.has-active{background:var(--p2,#e6faf6);color:var(--pd,#0f766e)}
.cc-sb.collapsed .ni-parent.has-active .ni-ic svg{stroke:var(--pd,#0f766e)}
/* (4) overlay: flota por encima, no empuja el contenido */
.cc-cmain,.cc-cmain.sb-collapsed{margin-left:var(--sb-coll);width:calc(100% - var(--sb-coll))}
/* PERO EN INTELIGENCIA LA BARRA ESTÁ FIJA Y ABIERTA, Y AHÍ SÍ EMPUJA. Las seis
   referencias de `docs/inspiracion/` muestran la navegación abierta con sus
   siete etiquetas al lado del contenido, no encima. Flotando, abrirla no
   servía: tapaba la primera columna de la lista y las etiquetas quedaban
   cortadas contra el borde. */
body.zn-sb-fijo .cc-cmain,body.zn-sb-fijo .cc-cmain.sb-collapsed{
  margin-left:var(--sb-w);width:calc(100% - var(--sb-w))}
body.zn-sb-fijo .cc-sb:not(.collapsed){box-shadow:none;border-right:1px solid var(--bd)}
/* ══ LA BARRA VA ARRIBA DE TODO, TAMBIEN DESPLEGADA POR HOVER ══
   Estaba en `--z-fixed` (500) y `#v2-app` declara 600, asi que en las tres
   secciones de Alertas la barra desplegada por hover se metia DETRAS del
   cuerpo. Con el pin no se notaba: al fijarla el contenido se corre 228px y
   deja de haber superposicion, o sea que el bug solo aparecia en el gesto mas
   comun. Es chrome de navegacion: va arriba del contenido y abajo de los
   overlays modales, que arrancan en 700. */
.cc-sb{z-index:var(--z-nav,650)}
.cc-sb:not(.collapsed){box-shadow:6px 0 28px rgba(15,23,42,.13)}
/* ═══ Barra del home: animación suave (sin saltos ni deformación) ═══ */
.cc-sb{transition:width .32s cubic-bezier(.32,.72,.35,1),box-shadow .32s ease;overflow:hidden;will-change:width}
.cc-sb .nav,.cc-sb .sb-nav{overflow-x:hidden}
/* el ícono NO se mueve: padding constante, queda centrado a 52px */
/* el estado plegado se declara UNA sola vez, abajo: tenerlo acá en la lista
   de selectores y otra vez más abajo es declarar el mismo selector dos
   veces en el mismo archivo, que es de donde salen los 21 repisados. */
.cc-sb .ni{padding:9px 8px;justify-content:flex-start;overflow:hidden;gap:10px}
/* ══ PLEGADA, EL ÍCONO NO SE MUEVE ══ (pedido del dueño, 16/09/2026)
   Antes se centraba: `padding:9px 0;justify-content:center`. Se veía bien
   QUIETO, pero durante el pliegue el ícono viajaba de 8px al centro de los
   52px, y con veinte ítems haciendo ese viaje a la vez el efecto se leía como
   un temblor —«que no se muevan ni pierdan forma»—.
   Ahora el padding y la alineación son los MISMOS que desplegada, así que la x
   del ícono es idéntica en los dos estados y lo único que anima es el ancho de
   la barra y la opacidad de la etiqueta. Queda 8px a la izquierda en vez de
   centrado en el riel: es el precio, y es el que se pidió pagar.
   Le gana a `.sb.collapsed .ni` de `plataforma.css` por especificidad y por
   orden de carga, así que la corrección va acá. */
.cc-sb.collapsed .ni{width:100%;padding:9px 8px;justify-content:flex-start;gap:10px}
/* ══ PLEGADA, EL ÍCONO VA CENTRADO EN EL RIEL — Y SIGUE SIN MOVERSE ══
   Dos vueltas costó, y las dos por medir lo que no era.
   Primero el ícono se salía del ítem: iba de 20 a 40 y el ítem terminaba en 39.
   Después, corriendo el padding del `.nav`, el ítem quedó de 12 a 47 —12px de
   aire a la izquierda y 5 a la derecha en un riel de 52—. El ítem estaba bien;
   lo que se ve es el ÍCONO, y seguía 4px corrido del centro.
   La cuenta es una sola: riel de 52, ícono de 20, centrado = 16. Y como el
   `.nav` aporta 12, al ítem le tocan 4. Por eso el padding horizontal baja de 8
   a 4 en los DOS estados: así el ícono queda en 16 esté plegada o desplegada
   —16 de aire de cada lado, exacto— y no se mueve ni un píxel al plegarse, que
   era el pedido original. */
.cc-sb .ni,.cc-sb.collapsed .ni{padding-left:4px;padding-right:4px}
/* `width:100%` y no `auto`: con `auto` el ítem encoge al tamaño del ícono y
   `justify-content` no tiene nada que repartir — quedaba pegado al borde
   izquierdo del contenido del `.nav`. */
.cc-sb.collapsed .ni-child{width:auto}
.cc-sb .ni-ic{width:20px;height:20px;flex-shrink:0}
/* textos: se desvanecen, nunca se re-acomodan */
.cc-sb .ni-label{flex:1;display:block;white-space:nowrap;overflow:hidden;opacity:1;transform:translateX(0);
  transition:opacity .2s ease .1s,transform .28s var(--ez-std) .06s}
/* PLEGADA, LA ETIQUETA NO OCUPA ANCHO. Quedaba en `display:block` con
   `opacity:0` pero conservando el `flex:1` de arriba, así que seguía repartiendo
   el espacio del ítem y empujaba el ícono contra el borde izquierdo: 12px de un
   lado y 20 del otro. Con `flex:0 0 0` el ícono es lo único que queda y
   `justify-content:center` por fin tiene qué centrar — la opacidad sigue
   animando igual, así que la transición de abrir no cambia. */
.cc-sb.collapsed .ni-label{display:block;opacity:0;transform:translateX(-6px);pointer-events:none;
  flex:0 0 0;width:0;min-width:0;
  transition:opacity .1s ease,transform var(--tr-16) ease}
.cc-sb .ni-chev{display:flex;opacity:1;transition:opacity .18s ease .1s,transform .22s}
.cc-sb.collapsed .ni-chev{display:flex;opacity:0;flex:0 0 0;width:0;overflow:hidden;transition:opacity .1s ease}
/* títulos de sección: alto animado, los íconos no dan saltos */
.cc-sb .nav-grp{overflow:hidden;max-height:34px;opacity:1;
  transition:max-height .46s cubic-bezier(.32,.72,.35,1) .1s,opacity .3s ease .2s,margin .46s cubic-bezier(.32,.72,.35,1) .1s,padding .46s cubic-bezier(.32,.72,.35,1) .1s}
.cc-sb.collapsed .nav-grp{max-height:0;opacity:0;height:auto;margin-top:6px;margin-bottom:0;padding-top:0;padding-bottom:0;
  transition:max-height .26s cubic-bezier(.32,.72,.35,1),opacity .1s ease,margin .26s cubic-bezier(.32,.72,.35,1),padding .26s cubic-bezier(.32,.72,.35,1)}
/* subsecciones de Workspace: se pliegan suave */
.cc-sb .ni-child{overflow:hidden;max-height:44px;opacity:1;
  transition:max-height .48s cubic-bezier(.32,.72,.35,1) .12s,opacity .3s ease .22s,padding .48s cubic-bezier(.32,.72,.35,1) .12s,margin .48s cubic-bezier(.32,.72,.35,1) .12s}
.cc-sb.collapsed .ni-child{display:flex;max-height:0;opacity:0;padding-top:0;padding-bottom:0;margin:0;border:none;
  transition:max-height .24s cubic-bezier(.32,.72,.35,1),opacity .1s ease,padding .24s cubic-bezier(.32,.72,.35,1),margin .24s cubic-bezier(.32,.72,.35,1)}
.cc-sb .ni-sub{display:block;max-height:0;overflow:hidden;transition:max-height .46s cubic-bezier(.32,.72,.35,1) .1s}
.cc-sb .ni-sub.open{max-height:220px}
/* fix: colapso total del submenú Workspace cuando la barra está contraída (sin hueco) */
#cc-sidebar.collapsed #op-sub, #cc-sidebar.collapsed #op-sub.open{max-height:0!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important}
#cc-sidebar.collapsed #op-sub .ni-child{max-height:0!important;height:0!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;margin:0!important;border:0!important;opacity:0!important}
#cc-sidebar.collapsed .nav-grp{margin-top:0!important;margin-bottom:0!important}
/* badge "demo" violeta */
.cc-sb.collapsed .ni-sub,.cc-sb.collapsed .ni-sub.open{display:block;max-height:0;overflow:hidden;transition:max-height .26s cubic-bezier(.32,.72,.35,1)}
/* logo: fundido cruzado en el mismo lugar, sin salto */
.cc-sb .sb-logo,.cc-sb.collapsed .sb-logo{position:relative;padding:0;justify-content:center;align-items:center;overflow:hidden}
.cc-sb .sb-logo-img{display:block;opacity:1;transition:opacity .22s ease .1s}
.cc-sb.collapsed .sb-logo-img{display:block;opacity:0;transition:opacity .12s ease}
.cc-sb .sb-logo-icon{display:flex;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto;width:30px;height:30px;transform:none;opacity:0;
  transition:opacity .12s ease}
.cc-sb.collapsed .sb-logo-icon{display:flex;opacity:1;transition:opacity .24s ease .12s}
/* pie: crédito y ayuda se pliegan, no desaparecen de golpe */
.cc-sb .sb-foot{overflow:hidden;transition:padding .3s var(--ez-std)}
.cc-sb .cc-help,.cc-sb .cc-credit{overflow:hidden;opacity:1;max-height:190px;
  transition:max-height .32s cubic-bezier(.32,.72,.35,1) .12s,opacity .22s ease .2s,margin .32s cubic-bezier(.32,.72,.35,1) .12s,padding .32s cubic-bezier(.32,.72,.35,1) .12s}
.cc-sb.collapsed .cc-help,.cc-sb.collapsed .cc-credit{display:block;max-height:0;opacity:0;margin:0;padding-top:0;padding-bottom:0;border-width:0;
  transition:max-height .26s var(--ez-std),opacity .1s ease,margin .26s,padding .26s}
.cc-sb.collapsed .sb-foot{padding:6px;border-top:none}
/* el contenido no se mueve nunca (la barra flota) */
.cc-cmain{transition:none}
.cc-sb .ni{font-size:var(--fs-body)}
.cc-sb .sb-foot{display:flex;flex-direction:column}
.cc-sb .cc-help{background:var(--bg);border:var(--border);border-radius:var(--r12);padding:13px;margin-bottom:14px}
.cc-sb .cc-credit{display:flex;flex-direction:column;align-items:flex-start;gap:3px;background:linear-gradient(135deg,var(--ok-bg),#f0fdfa);border:1px solid #99f6e4;border-radius:var(--r11);padding:10px 12px;margin-bottom:12px}
.pro-thumb{width:34px;height:34px;border-radius:7px;object-fit:cover;border:var(--border);background:var(--surf)}
.pro-thumb-ph{width:34px;height:34px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg);border:var(--border)}
.pro-name{display:flex;align-items:center;gap:var(--sp4)}
.pro-tbl th,.pro-tbl td{font-size:var(--fs-body);vertical-align:middle}
.pro-chips{gap:var(--sp3);padding:2px 0 4px;margin-bottom:10px;align-items:center;flex-wrap:wrap;display:flex;margin:0 0 12px}
.pro-chip{display:inline-flex;align-items:center;gap:7px;border:var(--border);background:var(--surf);color:var(--t2);border-radius:var(--rpill);padding:6px 12px;font-size:var(--fs-body);font-weight:var(--fw-semi);cursor:pointer;font-family:inherit;transition:background-color var(--tr-base),border-color var(--tr-base),color var(--tr-base),transform var(--mo-1)}
.pro-chip:hover{border-color:var(--p)}
.pro-chip.on{background:var(--pl);border-color:var(--p);color:var(--pd)}
.pro-chip-n{background:rgba(0,0,0,.07);border-radius:var(--rpill);padding:0 6px;font-size:var(--fs-label);font-weight:var(--fw-bold)}
.pro-chip-x{font-size:var(--fs-h3);line-height:1;color:var(--t3);margin-left:1px}
.pro-chip-x:hover{color:#dc2626}
.pro-selbar{display:flex;align-items:center;gap:var(--sp5);background:var(--pl);border:1px solid var(--p);border-radius:var(--r11);padding:9px 14px;margin-bottom:10px;font-size:var(--fs-body);color:var(--pd)}
.cc-pg{min-width:30px;height:30px;border:var(--border);background:var(--surf);border-radius:var(--r8);font-size:var(--fs-body);font-weight:var(--fw-semi);color:var(--t2);cursor:pointer;font-family:inherit}
.cc-pg.on{background:var(--p);border-color:var(--p);color:var(--surf)}
.pro-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp8);margin-top:14px}
@media(max-width:900px){.pro-grid2{grid-template-columns:1fr}}
.pro-loadcard{background:var(--surf);border:var(--border);border-radius:var(--r16);padding:var(--sp9)}
.pro-loadcard-t{display:flex;align-items:center;gap:var(--sp3);font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--t1);margin-bottom:14px}
.pro-fldgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp4)}
.pro-drop{border:2px dashed var(--bd);border-radius:var(--r12);padding:var(--sp10);text-align:center;color:var(--t2);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:var(--sp3);transition:border-color var(--tr-14)}
.pro-drop:hover{border-color:var(--p)}
.pro-drop-s{font-size:var(--fs-ter);color:var(--t3);line-height:1.5}
.pro-csvprev{margin-top:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:var(--fs-body);color:var(--t2);background:#f0fdfa;border:1px solid #99f6e4;border-radius:var(--r10);padding:10px 12px}
.cc-sb .cc-help-ttl{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--t1)}
.cc-sb .cc-help-sub{font-size:var(--fs-label);color:var(--t3);margin-top:3px;line-height:var(--lh-body)}
.cc-sb .cc-help-btn{margin-top:11px;width:100%;border:1px solid var(--p);background:var(--surf);color:var(--pd);border-radius:var(--r8);padding:var(--sp3);font-size:var(--fs-sec);font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;transition:background var(--tr-14)}
.cc-sb .cc-help-btn:hover{background:var(--p2)}
.cc-cmain .cc-wrap{max-width:none;margin:0;width:auto;padding:42px 72px 66px}
.cc-cmain .tb-title{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--t1)}

.cc-feat-gauge svg{width:74px;height:74px}

.cc-gauge svg{width:58px;height:58px}

@media(max-width:768px){.cc-sb .cc-help,.cc-sb .cc-credit,.cc-sb .sb-client-lbl{display:none}.cc-cmain .cc-wrap{padding:22px 18px 54px}.cc-hero{flex-wrap:wrap}}
@media(max-width:560px){.cc-brand{display:none!important}}
/* ── v75: cards más amplias (máx 4/fila) + iconos métrica con color + título alineado ── */
.cc-cmain .tb{padding-left:72px;padding-right:72px}
@media(max-width:768px){.cc-cmain .tb{padding-left:18px;padding-right:18px}}

.cc-stat-ic.cc-ic-teal{background:rgba(13,148,136,.10)!important;color:var(--teal-d)!important}
/* ===== CAMPAÑAS: insights estilo KPI (coherente con Home) ===== */

.cc-stat-ic.cc-ic-violet{background:rgba(124,58,237,.10)!important;color:var(--violet)!important}
.cc-stat-ic.cc-ic-amber{background:rgba(217,119,6,.10)!important;color:var(--amber-d)!important}
.cc-stat-ic.cc-ic-blue{background:rgba(37,99,235,.10)!important;color:var(--blue)!important}
.cc-stat-tx{min-width:0}

@media(max-width:1080px){.cc-exec{grid-template-columns:repeat(2,1fr)}}
/* A 390 la tira de KPIs eran CUATRO tarjetas apiladas de ~85 px: 340 px de
   scroll de contexto antes de ver la primera campaña, que es a lo que se
   entra. En dos columnas ocupa la mitad y la lista entra en el segundo
   golpe de scroll en vez del cuarto. */
@media(max-width:560px){
  .cc-exec{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp4)}
  .cc-stat{padding:var(--sp5) var(--sp5) var(--sp6);gap:var(--sp4);flex-direction:column;align-items:flex-start}
  .cc-stat-ic{width:32px;height:32px}
  .cc-stat-ic svg{width:17px;height:17px}
  .cc-stat-num{font-size:20px}
}

@media(max-width:1200px){.cc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.cc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.cc-grid{grid-template-columns:1fr}}
/* ── v77: responsive Centro de campañas (anti-desborde, todo tamaño) ── */
.cc-cmain,.cc-cmain .cc-wrap{min-width:0}
.cc-cmain .cc-wrap{box-sizing:border-box}


.cc-card-top>div{min-width:0}

.cc-metric>div{min-width:0;overflow:hidden}
.cc-metric-lbl{line-height:1.12}

@media(max-width:1360px){.cc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1120px){.cc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.cc-grid{grid-template-columns:1fr}}
@media(max-width:960px){.cc-feat-cta{flex:1 1 100%}.cc-feat-cta .cc-cta{width:100%;justify-content:center}}
@media(max-width:760px){.cc-feat-card{flex-direction:column}.cc-feat-cover{display:block;width:100%;height:118px}.cc-feat-body{padding:var(--sp7);gap:var(--sp6)}}
@media(max-width:640px){.cc-stat+.cc-stat::before{display:none}.cc-exec{gap:4px 14px}.cc-feat-sep{display:none}}
@media(max-width:560px){.cc-search{min-width:100%}.cc-filter{flex:1 1 auto}}
/* ══ CAMPAÑAS: la tarjeta-fila (`ccr-`) ═══════════════════════════════════
   Vocabulario PROPIO y a estrenar, no un override del `.cc-card` vertical:
   ese mosaico sigue vivo y lo usa Reportes (`plataforma.js` lo emite entero,
   con `.cc-cover`, `.cc-metrics`, `.cc-cta`, `.cc-gauge`…). Reescribirlo acá
   habría rediseñado dos pantallas, y una de las dos nadie la pidió.
   Una definición por selector: si algo hay que cambiar, se cambia acá. */
/* SOLO EN ESTA PANTALLA. `.cc-stat-num` lo comparten Reportes, el Home y los
   KPIs del detalle, donde el número SÍ es el contenido; acá es contexto por
   encima de la lista y en 23 px pesaba más que el nombre de la campaña. Se
   baja el contexto en vez de inflar todo lo demás. */
#plat-campanas .cc-stat-num{font-size:19px}
.ccr-list{display:flex;flex-direction:column;gap:var(--sp6)}

/* El color del estado entra UNA vez, como variable, y de ahí sale todo: la
   píldora, el panel de ZnappView y el botón. Cinco estados, cinco valores, y
   ninguno rojo: una campaña terminada, pausada o desconocida no es un error. */
.ccr-card{--ccr-st:var(--slate);--ccr-bg:#eef2f7;--ccr-tx:#475569;
  display:grid;grid-template-columns:308px minmax(0,1fr) 372px;align-items:stretch;
  background:var(--surf);border:var(--border);border-radius:20px;padding:var(--sp6);
  box-shadow:var(--sh-xs);cursor:pointer;min-width:0;
  transition:border-color var(--tr-16),box-shadow var(--tr-16),transform var(--tr-16)}
/* El levantar-al-pasar sólo donde hay puntero fino. En táctil el `:hover` se
   dispara AL TOCAR y se queda pegado: la fila quedaba levantada y con sombra
   después de volver del detalle, como si siguiera seleccionada. */
@media (hover:hover) and (pointer:fine){
  .ccr-card:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(15,23,42,.10);border-color:var(--bd2)}
}
.ccr-card-activa{--ccr-st:var(--p);--ccr-bg:#dcf6f1;--ccr-tx:#0b7a6c}
.ccr-card-pausada{--ccr-st:var(--warn);--ccr-bg:#fbeedb;--ccr-tx:#9a5906}
.ccr-card-finalizada{--ccr-st:var(--slate);--ccr-bg:#e9eef5;--ccr-tx:#475569}
.ccr-card-borrador{--ccr-st:var(--violet);--ccr-bg:#ece7fd;--ccr-tx:#6d28d9}
.ccr-card-inactiva{--ccr-st:var(--bd2);--ccr-bg:#f1f5f9;--ccr-tx:#64748b}

.ccr-cover{position:relative;border-radius:var(--r14);overflow:hidden;min-height:150px;
  background-color:#0f172a;background-size:cover;background-position:center;background-repeat:no-repeat}
.ccr-cover--img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.30),transparent 48%)}
.ccr-badge{position:absolute;top:11px;left:11px;z-index:1;display:inline-flex;align-items:center;gap:7px;
  max-width:calc(100% - 22px);overflow:hidden;white-space:nowrap;
  font-size:var(--fs-ter);font-weight:var(--fw-bold);padding:5px 11px;border-radius:var(--rpill);
  background:var(--ccr-bg);color:var(--ccr-tx);box-shadow:0 1px 5px rgba(15,23,42,.16)}
.ccr-badge::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--ccr-st);flex-shrink:0}
.ccr-card-inactiva .ccr-badge{background:rgba(255,255,255,.94);box-shadow:0 1px 5px rgba(15,23,42,.16),inset 0 0 0 1px var(--bd2)}
/* ══ «ELIMINACIÓN SOLICITADA» ══ Clase propia y nueva: no toca el badge de
   estado, se pone AL LADO. El estado lo dice Znapp; esto dice que hay algo
   esperando su decisión. Ámbar y no rojo a propósito: no es un error, es una
   espera —y la campaña sigue funcionando mientras tanto—. */
.ccr-pide{left:auto;right:11px;background:#fef3c7;color:#92400e;
  box-shadow:0 1px 5px rgba(15,23,42,.14),inset 0 0 0 1px #fcd34d;
  font-weight:var(--fw-semi);white-space:nowrap}

/* La columna del medio se centra contra la portada (150 px) en vez de apoyarse
   arriba: con el período mudado a la cabecera, el contenido mide menos que la
   portada y quedaba colgando del borde superior. */
.ccr-mid{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--sp6);padding:var(--sp2) var(--sp10) var(--sp2) var(--sp9)}
.ccr-head{display:flex;align-items:flex-start;min-width:0;gap:var(--sp5) var(--sp9);flex-wrap:wrap}
.ccr-htx{min-width:0;display:block;flex:1 1 240px}
/* 20 px y no 18: la tira de KPIs de arriba tiene sus números en 19 px pesados,
   y con el nombre en 18 la fila —que es lo que se viene a clickear— pesaba
   menos que el contexto. Título de página 27 › nombre 20 › KPI 19. */
.ccr-name{display:block;font-size:20px;font-weight:var(--fw-heavy);color:var(--t1);
  letter-spacing:-.3px;line-height:var(--lh-tight);word-break:break-word}
.ccr-desc{display:block;font-size:var(--fs-sec);color:var(--t3);margin-top:4px;line-height:var(--lh-body);word-break:break-word}
.ccr-chips{display:flex;flex-wrap:wrap;gap:var(--sp4);min-width:0}
.ccr-chip{display:flex;align-items:center;gap:var(--sp3);min-width:0;background:var(--bg);border-radius:var(--r12);padding:var(--sp3) var(--sp7) var(--sp3) var(--sp3)}
.ccr-chip-ic{width:28px;height:28px;border-radius:var(--r9);flex-shrink:0;background:var(--surf);color:var(--t3);display:flex;align-items:center;justify-content:center}
.ccr-chip-ic svg{width:14px;height:14px}
.ccr-chip-tx{min-width:0;display:block}
.ccr-chip-n{display:block;font-size:var(--fs-h3);font-weight:var(--fw-heavy);color:var(--t1);line-height:1.15}
.ccr-chip-l{display:block;font-size:var(--fs-label);font-weight:var(--fw-semi);color:var(--t3);line-height:1.2;margin-top:1px}
.ccr-foot{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:var(--sp2);min-width:0;flex:0 1 auto;font-size:var(--fs-sec);color:var(--t2)}
.ccr-foot-i{display:inline-flex;align-items:center;gap:var(--sp2);min-width:0}
.ccr-foot-i svg{width:14px;height:14px;color:var(--t3);flex-shrink:0}
.ccr-tag{font-size:var(--fs-ter);font-weight:var(--fw-semi);color:var(--t2);background:var(--bg);border-radius:var(--rpill);padding:4px 11px}

/* Las DOS acciones, y se ven distintas porque hacen cosas distintas (§11):
   ZnappView es un panel con nombre y explicación —tiene identidad propia, §13—
   y el detalle es el botón primario, lleno sólo cuando la campaña está activa.

   EL PANEL DE ZNAPPVIEW NO SE TIÑE POR ESTADO, y esto es a propósito. Estuvo
   teñido con `--ccr-bg` una ronda y estaba mal por dos motivos: es LA MISMA
   acción en las tres filas —abrir el resumen de esa campaña—, y pintarla de
   tres colores la hace parecer tres cosas distintas (§31); y sobre todo, un
   panel ámbar en un producto de datos se lee como ALERTA, no como «hay
   resumen». El estado ya se dice dos veces en la fila —la píldora sobre la
   portada y el peso del botón primario—: una tercera no informa, confunde.
   El color de este panel es el de ZnappView, el mismo del bloque de la
   cabecera, y por eso es igual en todas las filas. */
.ccr-side{display:flex;flex-direction:column;justify-content:center;gap:var(--sp4);
  min-width:0;padding-left:22px;border-left:1px solid var(--bd)}
.ccr-zv{display:flex;align-items:center;gap:var(--sp5);width:100%;text-align:left;
  background:var(--pl);border:none;border-radius:var(--r14);padding:var(--sp5) 13px;
  cursor:pointer;font-family:inherit;transition:filter var(--tr-base),transform var(--tr-16) var(--ease-out)}
.ccr-zv:hover{filter:brightness(.965)}
.ccr-zv-ic{width:38px;height:38px;border-radius:var(--r11);flex-shrink:0;background:var(--surf);
  color:var(--pd);display:flex;align-items:center;justify-content:center}
.ccr-zv-ic svg{width:19px;height:19px}
.ccr-zv-tx{flex:1;min-width:0;display:block}
.ccr-zv-t{display:block;font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--teal-tx)}
.ccr-zv-s{display:block;font-size:var(--fs-ter);color:var(--t2);line-height:1.35;margin-top:2px}
.ccr-zv-ar{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--surf);
  color:var(--pd);display:flex;align-items:center;justify-content:center}
.ccr-zv-ar svg{width:15px;height:15px}
.ccr-cta{display:flex;align-items:center;gap:var(--sp4);width:100%;
  border:1px solid var(--bd);background:var(--surf);color:var(--t1);border-radius:var(--r14);
  padding:13px 15px;font-family:inherit;font-size:var(--fs-body);font-weight:var(--fw-bold);
  cursor:pointer;transition:border-color var(--tr-base),color var(--tr-base),background var(--tr-base),transform var(--tr-16) var(--ease-out)}
.ccr-cta:hover:not(:disabled){border-color:var(--p);color:var(--pd)}
.ccr-cta:disabled{cursor:default;opacity:.55}
.ccr-cta svg{width:17px;height:17px;flex-shrink:0}
.ccr-cta-t{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ccr-cta-ar{display:flex;flex-shrink:0}
.ccr-card-activa .ccr-cta{background:var(--pd);border-color:var(--pd);color:var(--surf);box-shadow:0 6px 15px rgba(13,148,136,.22)}
.ccr-card-activa .ccr-cta:hover:not(:disabled){background:#0b8878;border-color:#0b8878;color:var(--surf)}


/* Responsive: la jerarquía sobrevive. Primero se va el ancho fijo de la columna
   de acciones —baja y ocupa el ancho—; después la fila se vuelve columna y la
   portada pasa a ser una banda. Nunca un desktop apretado. */
@media(max-width:1280px){
  .ccr-card{grid-template-columns:246px minmax(0,1fr)}
  .ccr-side{grid-column:1/-1;flex-direction:row;align-items:stretch;padding:var(--sp5) 0 0;margin-top:var(--sp5);border-left:none;border-top:1px solid var(--bd)}
  .ccr-zv{flex:1 1 340px}
  .ccr-cta{flex:0 1 300px;align-self:center}
}
@media(max-width:820px){
  .ccr-card{grid-template-columns:minmax(0,1fr)}
  .ccr-cover{min-height:132px}
  .ccr-mid{padding:var(--sp6) 0 0}
  .ccr-side{flex-direction:column}
  /* En columna, el `flex-basis` del bloque de 1280px se mide en ALTO: el panel
     de ZnappView se estiraba a 340px de alto y quedaba un cartel vacío. */
  .ccr-zv{flex:0 0 auto}
  .ccr-cta{flex:0 0 auto;align-self:stretch}
}
@media(max-width:560px){
  .ccr-card{padding:var(--sp5);border-radius:var(--r16)}
  .ccr-cover{min-height:112px}
  .ccr-chip{flex:1 1 132px;padding:var(--sp3) var(--sp5) var(--sp3) var(--sp3)}
}
/* En columna, el nombre y la fecha dejan de compartir línea: a 300 px de ancho
   el nombre se partía en tres para dejarle sitio a un dato de contexto. */
@media(max-width:820px){
  .ccr-foot{align-items:flex-start;text-align:left;flex-direction:row;flex-wrap:wrap;gap:var(--sp2) var(--sp5);flex:1 1 100%}
}

/* ══ EL MOVIMIENTO DE LA FILA: sólo causalidad, nada decorativo ═══════════
   Tres reglas y una sola idea —«la interfaz te escuchó»—:
   · `:active` hunde el control 2 % en 160 ms con ease-out fuerte. Es la única
     animación NUEVA de esta pasada y es la que más se va a ver: sin ella, en
     una conexión lenta el click no devolvía NADA hasta que cargaba la campaña.
   · Nada de entrada escalonada en la lista. `_ccRenderGrid` se re-ejecuta en
     cada tecla del buscador (`oninput` en el HTML): una animación ahí no
     comunica nada y convierte escribir en un parpadeo. Es exactamente el caso
     «acción de alta frecuencia» que no se anima.
   · `prefers-reduced-motion` apaga el transform y deja el color, que es lo que
     ayuda a entender. */
.ccr-zv:active{transform:scale(.98)}
.ccr-cta:active:not(:disabled){transform:scale(.98)}
.ccr-card:active{transform:translateY(0) scale(.995)}

/* FOCO VISIBLE, QUE NO EXISTÍA: este archivo no tenía una sola regla de foco,
   así que los tres controles nuevos dependían del anillo por defecto del
   navegador —que sobre el botón teal lleno casi no se ve—. El anillo va por
   fuera con `outline-offset`, y `--pd` sobre blanco da 3,4:1 (WCAG 1.4.11). */
.ccr-zv:focus-visible,.ccr-cta:focus-visible,
.cc-page:focus-visible,.cc-zero-cta:focus-visible,.zpager-btn:focus-visible{
  outline:2px solid var(--pd);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .ccr-card,.ccr-zv,.ccr-cta{transition-property:border-color,color,background,box-shadow,filter}
  .ccr-card:hover,.ccr-card:active,.ccr-zv:active,.ccr-cta:active:not(:disabled){transform:none}
}

/* ── v78: shell de plataforma SaaS ── */
.plat-host{min-width:0}
.plat-sec{display:none}
.plat-sec.on{display:block}
.plat-wrap{max-width:none;margin:0;width:100%;padding:42px 72px 66px;box-sizing:border-box;min-width:0}
.plat-h{font-size:26px;font-weight:var(--fw-heavy);color:var(--t1);letter-spacing:-.4px;line-height:1.15}
.plat-sub{font-size:var(--fs-body);color:var(--t3);margin-top:4px}
.plat-kgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:var(--sp6);margin:18px 0 22px}
.plat-kpi{background:var(--surf);border:var(--border);border-radius:var(--r14);padding:var(--sp7);min-width:0}
.plat-kpi-ic{width:34px;height:34px;border-radius:var(--r10);display:flex;align-items:center;justify-content:center;margin-bottom:11px}
.plat-kpi-v{font-size:25px;font-weight:var(--fw-heavy);letter-spacing:-1px;color:var(--t1);line-height:1;word-break:break-word}
.plat-kpi-l{font-size:var(--fs-ter);color:var(--t2);margin-top:6px;font-weight:var(--fw-semi)}
.plat-kpi-s{font-size:var(--fs-label);color:var(--t3);margin-top:2px}
.plat-grid2{display:grid;grid-template-columns:1.55fr 1fr;gap:var(--sp7);align-items:start}
.plat-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px}
.plat-act{display:flex;align-items:center;gap:var(--sp4);background:var(--surf);border:var(--border);border-radius:var(--r12);padding:13px 14px;cursor:pointer;font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--t1);transition:var(--tr-base);font-family:inherit;text-align:left;width:100%}
.plat-act:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:var(--sh-md)}
.plat-act-ic{width:32px;height:32px;border-radius:var(--r9);background:var(--p2);color:var(--pd);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.plat-alert{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--bg)}
.plat-alert:last-child{border-bottom:none}
.plat-alert-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.plat-alert-tx{font-size:var(--fs-body);color:var(--t2);line-height:var(--lh-body)}
.plat-alert-tx b{color:var(--t1)}
.plat-alert-time{font-size:var(--fs-label);color:var(--t3);margin-top:2px}
.plat-map{height:280px;border-radius:var(--r14);border:var(--border);background:repeating-linear-gradient(0deg,transparent,transparent 27px,rgba(15,23,42,.045) 28px),repeating-linear-gradient(90deg,transparent,transparent 27px,rgba(15,23,42,.045) 28px),var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:var(--sp3);color:var(--t3);text-align:center;padding:var(--sp7)}
.plat-bar{height:14px;border-radius:var(--r8);background:var(--bg);overflow:hidden;margin:12px 0 7px}
.plat-bar-fill{height:100%;border-radius:var(--r8);transition:width .4s}
.plat-credit-big{font-size:26px;font-weight:var(--fw-heavy);letter-spacing:-1px;line-height:1.1;word-break:break-word}
.plat-toolbar{display:flex;gap:var(--sp4);flex-wrap:wrap;align-items:center;margin:16px 0 18px}
.plat-search{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:9px;background:var(--surf);border:var(--border);border-radius:var(--r11);padding:10px 13px}
.plat-search input{border:none;outline:none;background:none;font-size:var(--fs-body);color:var(--t1);width:100%;font-family:inherit}
.plat-btn{border:var(--border);background:var(--surf);color:var(--t1);border-radius:var(--r10);padding:10px 13px;font-size:var(--fs-body);font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:7px;transition:var(--tr-base);white-space:nowrap}
.plat-btn:hover{border-color:var(--p)}
.plat-btn-p{background:var(--p);border-color:var(--p);color:var(--surf)}
.plat-btn-p:hover{background:var(--pd);border-color:var(--pd)}
.plat-ico-btn{border:none;background:none;cursor:pointer;color:var(--t3);padding:var(--sp1);border-radius:var(--r6);line-height:0}
.plat-ico-btn:hover{background:var(--bg);color:var(--p)}
.plat-rep{display:grid;grid-template-columns:repeat(auto-fill,minmax(262px,1fr));gap:var(--sp8)}
.plat-tabs{display:flex;gap:var(--sp1);border-bottom:var(--border);margin:16px 0 18px;overflow-x:auto}
.plat-tab{padding:9px 14px;font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--t3);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.plat-tab.on{color:var(--pd);border-bottom-color:var(--p)}
.plat-field{margin-bottom:12px}
.plat-field label{display:block;font-size:var(--fs-ter);font-weight:var(--fw-bold);color:var(--t2);margin-bottom:5px}
.plat-input{width:100%;border:var(--border);border-radius:var(--r9);padding:9px 11px;font-size:var(--fs-body);font-family:inherit;color:var(--t1);background:var(--surf);box-sizing:border-box;resize:vertical}
.plat-cfg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:var(--sp6)}
.plat-cfg{background:var(--surf);border:var(--border);border-radius:var(--r14);padding:var(--sp7);cursor:pointer;transition:var(--tr-base)}
.plat-cfg:hover{border-color:var(--p);transform:translateY(-2px);box-shadow:var(--sh-md)}
@media(max-width:980px){.plat-grid2{grid-template-columns:1fr}}
@media(max-width:768px){.plat-wrap{padding:22px 18px 56px}}

/* ── v80: Home centro de comando ── */
.home-wrap{max-width:none;margin:0;width:100%;box-sizing:border-box;min-width:0}
.home-head{display:flex;justify-content:space-between;gap:var(--sp7);flex-wrap:wrap}
.home-hi{font-weight:var(--fw-heavy);letter-spacing:-.6px;color:var(--t1);line-height:1.1}
.home-hi-s{font-size:var(--fs-body);color:var(--t3);margin-top:5px}
.home-chip2{display:flex;align-items:center;gap:var(--sp3);background:var(--surf);border:var(--border);border-radius:var(--r12);padding:9px 13px;font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--t2)}
.home-chip2 b{color:var(--t1)}
.home-kpi{background:var(--surf);border:var(--border)}
/* hero mapa */
.home-hero{display:grid;grid-template-columns:360px 1fr;gap:20px;margin-bottom:18px;border:var(--border);border-radius:18px;overflow:hidden;background:var(--surf)}
.home-hero-hd{flex-wrap:wrap}
.home-hero-t{font-size:var(--fs-h3);font-weight:var(--fw-heavy);color:var(--t1);letter-spacing:-.2px}
.home-hero-hl{display:flex;align-items:center;gap:11px;min-width:0}
.home-hero-ic{width:38px;height:38px;border-radius:11px;background:var(--p2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.home-hero-tx{min-width:0}
.home-panel{background:var(--surf);border:var(--border);border-radius:18px;overflow:hidden;box-shadow:0 1px 4px rgba(15,23,42,.06);margin-bottom:14px}
.home-panel .home-hero{border:none;border-radius:0;box-shadow:none;background:transparent;margin-bottom:0}
.home-panel .home-grid{margin-bottom:0}
.home-panel .home-sec{border:none;border-radius:0;box-shadow:none;background:transparent;margin-bottom:0;border-top:1px solid var(--bg)}
.home-hero-s{font-size:var(--fs-ter);color:var(--t3);margin-top:4px;line-height:1.4}
.home-map{position:relative;height:380px;background:radial-gradient(circle at 50% 28%,rgba(13,148,136,.10),transparent 62%),linear-gradient(180deg,#f8fafc,#eef2f7);overflow:hidden;border-top:var(--border)}
.home-map::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(15,23,42,.04) 32px),repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(15,23,42,.04) 32px)}
@keyframes hmpulse{0%,100%{box-shadow:0 0 0 4px rgba(13,148,136,.14),0 0 18px rgba(13,148,136,.45)}50%{box-shadow:0 0 0 7px rgba(13,148,136,.08),0 0 26px rgba(13,148,136,.6)}}
.home-empty-map{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:var(--fs-body);z-index:2;padding:0 20px;text-align:center}
/* acciones */
.home-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp6);margin-bottom:18px}
.home-act{display:flex;flex-direction:column;background:var(--surf);border:var(--border);transition:var(--tr-16)}
.home-act:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,23,42,.10);border-color:var(--p)}
.home-act-ic{width:34px;height:34px;border-radius:var(--r10);display:flex;align-items:center;justify-content:center;margin-bottom:9px}
.home-act-t{font-size:var(--fs-body);font-weight:var(--fw-bold);color:var(--t1)}
.home-act-d{font-size:var(--fs-label);color:var(--t3);margin-top:3px;line-height:1.4;flex:1}
.home-act-cta{margin-top:11px;background:var(--p);color:var(--surf);border:none;border-radius:var(--r9);padding:8px 10px;font-size:var(--fs-label);font-weight:var(--fw-bold);cursor:pointer;font-family:inherit;transition:var(--tr-base)}
.home-act-cta:hover{background:var(--pd)}
/* tabla + alertas */
.home-sec{background:var(--surf);border:var(--border);margin-bottom:18px}
.home-sec-t{font-size:var(--fs-h3);font-weight:var(--fw-heavy);color:var(--t1);margin-bottom:2px}
.home-sec-hd{display:flex;align-items:center;gap:12px;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--bg)}
.home-sec-ic{width:38px;height:38px;border-radius:11px;background:var(--p2);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.home-sec-htx{min-width:0}
#main .home-sec-t{font-size:var(--fs-h2);letter-spacing:-.3px}
.home-sec .pdv-tbl thead th{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.5px;color:var(--t3);font-weight:var(--fw-bold);padding-bottom:11px}
.home-sec .pdv-tbl tbody tr{transition:background .12s}
.home-sec .pdv-tbl tbody tr:hover{background:var(--p2)}
.home-sec-s{font-size:var(--fs-ter);color:var(--t3);margin-bottom:14px}
.tag-neutral{background:rgba(100,116,139,.14);color:var(--t2)}
/* `.home-kpis` salió de acá: nunca ganaba, y ahora se adapta sola con `auto-fit`. */
@media(max-width:1080px){.home-acts{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.home-acts{grid-template-columns:1fr}.home-map{height:330px}.home-wrap{padding:22px 18px 56px}.home-hi{font-size:var(--fs-h1)}}
/* ===== HOME REDISEÑO ===== */
.home-wrap{padding:38px 56px 64px}
/* ═════════ EL HOME SE COMPONE, NO APARECE ═════════
   Los bloques entran en el orden en que hay que leerlos: primero el saludo y
   sus dos botones, despues los cuatro numeros, despues el mapa, y al final la
   tabla y los accesos. El escalonado NO es decoracion: es la jerarquia dicha
   con tiempo en vez de con tamano, y es lo que hace que una pantalla con seis
   bloques no se lea como seis cosas simultaneas.

   45ms entre hermanos y 150 entre bloques: la secuencia entera termina en
   ~520ms, que es el techo antes de que una entrada se sienta lenta. Y nada
   bloquea el clic —`animation` no intercepta eventos—: el que ya sabe adonde
   va toca en el cuadro uno.

   Keyframes y no transiciones, a proposito: esto corre UNA vez al montar el
   nodo, que es justo lo que un keyframe hace bien. Las transiciones se usan
   para lo que se dispara seguido y hay que poder interrumpir. */
/* EL ESTADO VISIBLE ES EL ESTADO NORMAL, y la animacion solo se encarga de
   COMO llega. Escrito al reves —`opacity:0` en la regla y la animacion
   encendiendolo con `forwards`— cualquier cosa que impida que el keyframe
   corra deja el home entero invisible y sin un solo error: una extension que
   apaga animaciones, un navegador viejo, o el propio Chrome pausando la
   pestana en segundo plano. Con `backwards` el elemento toma el cuadro inicial
   solo durante el retardo y despues vuelve a lo que es: visible. Si la
   animacion no corre, se ve igual. Eso es lo que tiene que pasar. */
.home-ent{animation:homeEnt var(--mo-4) var(--ez-out) backwards;
  animation-delay:var(--d,0ms)}
@keyframes homeEnt{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.home-kpis .home-kpi{animation:homeEnt var(--mo-3) var(--ez-out) backwards}
.home-kpis .home-kpi:nth-child(1){animation-delay:80ms}
.home-kpis .home-kpi:nth-child(2){animation-delay:110ms}
.home-kpis .home-kpi:nth-child(3){animation-delay:140ms}
.home-kpis .home-kpi:nth-child(4){animation-delay:170ms}
.home-acts>*{animation:homeEnt var(--mo-3) var(--ez-out) backwards}
/* MEDIDO CONTRA EL PRESUPUESTO, no a ojo: con 440ms de base, 45 de escalon y
   300 de duracion, el cuarto acceso terminaba de entrar a los 875ms. El techo
   de una secuencia escalonada es medio segundo; mas alla de eso la pantalla
   no se siente compuesta, se siente lenta. Con 230 de base y 30 de escalon
   cierra en 530 y se lee igual. */
.home-acts>*:nth-child(1){animation-delay:230ms}
.home-acts>*:nth-child(2){animation-delay:260ms}
.home-acts>*:nth-child(3){animation-delay:290ms}
.home-acts>*:nth-child(4){animation-delay:320ms}
/* EL MAPA NO ENTRA CON GOLPE. Leaflet pinta las teselas cuando llegan, asi que
   el cuadro pasa de un degrade vacio a una foto de golpe —y encima a destiempo
   del resto—. Con el fundido, el mapa termina de entrar cuando termina de
   entrar la tarjeta que lo contiene. */
/* mismo criterio: el mapa es visible salvo mientras `_homeInitMap` lo marca
   como «todavia no». La clase la pone y la saca JS, que ademas tiene su propio
   plazo maximo: si las teselas no llegan, el mapa se enciende igual. */
#home-leaflet{transition:opacity var(--mo-4) var(--ez-out)}
#home-leaflet.cargando{opacity:0}

.home-head{background:linear-gradient(120deg,rgba(19,193,172,.085),rgba(19,193,172,.015) 60%);border:var(--border);border-radius:var(--r20);padding:24px 28px;align-items:center;margin-bottom:20px}
.home-head-l{min-width:0;flex:1}
.home-hi{font-size:27px;display:flex;align-items:center;gap:var(--sp5);flex-wrap:wrap}
.home-hi-logo{height:30px;max-width:130px;object-fit:contain;border-radius:var(--r6)}
.home-head-r{display:flex;align-items:center;gap:var(--sp4);flex-wrap:wrap;justify-content:flex-end}
.home-cta{display:inline-flex;align-items:center;gap:var(--sp3);border-radius:var(--r12);padding:11px 15px;font-size:var(--fs-body);font-weight:var(--fw-bold);cursor:pointer;border:1px solid transparent;transition:var(--tr-base);font-family:inherit;line-height:1}
.home-cta-pri{background:var(--p);color:var(--surf);box-shadow:0 6px 16px rgba(19,193,172,.26)}
.home-cta-pri:hover{filter:brightness(1.05);transform:translateY(-1px)}
.home-cta-gh{background:var(--surf);color:var(--t1);border-color:var(--bd)}
.home-cta-gh:hover{border-color:var(--p);color:var(--pd)}
/* ══ LOS CUATRO KPI SE ACOMODAN SOLOS, Y ANTES DOS NO EXISTÍAN EN EL CELULAR ══
   Esto decía `repeat(4,1fr)`, fijo. Había DOS reglas responsive para arreglarlo
   —`@media(max-width:1080px)` más arriba en este mismo archivo, y
   `@media(max-width:560px)` en `plataforma.css`— y las dos PERDÍAN: misma
   especificidad, y ésta se declara después (y `campanas.css` carga después de
   `plataforma.css`, ver `ORDEN` en `dev/fuente.py`). Gana la última.

   Consecuencia medida a 390px: las cuatro pistas seguían midiendo 210+226+243+
   211 px dentro de un contenedor de 306. «Misiones realizadas hoy» y «Crédito
   disponible» quedaban en x=536 y x=795 — fuera de la pantalla—. Y no se
   alcanzaban con el dedo: `#campaign-center` está en `overflow:hidden`, así que
   no hay barra ni gesto. Dos de los cuatro indicadores directamente no existían
   para quien entra desde el teléfono, y el saldo es el que habilita lanzar
   misiones.

   `auto-fit` con `minmax` lo resuelve SIN media query, que es lo que evita que
   vuelva a pasar: no hay dos reglas peleando por la cascada, hay una que se
   adapta. Las dos que perdían se retiraron junto con este cambio. */
.home-kpis{margin-bottom:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:var(--sp7)}
.home-kpi{border-radius:18px;padding:var(--sp8);box-shadow:var(--sh-xs);transition:var(--tr-base);display:flex;align-items:center;gap:13px}
.home-kpi:hover{box-shadow:0 6px 18px rgba(15,23,42,.07)}
.home-kpi-ic{width:44px;height:44px;border-radius:var(--r12);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.home-kpi-ic svg{width:20px;height:20px}
.home-kpi-tx{min-width:0}
.home-kpi-v{font-size:23px;font-weight:var(--fw-heavy);letter-spacing:-.5px;color:var(--t1);line-height:1.05}
.home-kpi-l{font-size:var(--fs-sec);color:var(--t3);font-weight:var(--fw-semi);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.home-grid{display:grid;grid-template-columns:1fr;gap:var(--sp8);margin-bottom:14px;align-items:stretch}
.home-grid .home-hero{margin-bottom:0;display:flex;flex-direction:column}
.home-hero-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp5);padding:18px 20px 14px}
.home-legend2{display:inline-flex;gap:var(--sp6);font-size:var(--fs-ter);font-weight:var(--fw-semi);color:var(--t2);flex-shrink:0;padding-top:4px}
.home-legend2 span{display:inline-flex;align-items:center;gap:var(--sp2)}
.home-legend2 .hl-dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.home-grid .home-map{flex:1;height:auto;min-height:396px;border-radius:0}
.home-feed-i{display:flex;align-items:flex-start;gap:11px;padding:11px 2px;border-bottom:1px solid rgba(15,23,42,.06)}
.home-feed-i:last-child{border-bottom:none}
.home-feed-ic{width:30px;height:30px;border-radius:var(--r9);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.home-feed-tx{flex:1;min-width:0}
.home-feed-t{font-size:var(--fs-body);font-weight:var(--fw-semi);color:var(--t1);line-height:1.35}
.home-feed-badge{font-size:var(--fs-label);color:var(--t3);font-weight:var(--fw-med)}
.home-feed-time{font-size:var(--fs-label);color:var(--t3);flex-shrink:0;white-space:nowrap;padding-top:1px}
.home-feed-empty{font-size:var(--fs-body);color:var(--t3);padding:14px 2px}
.home-subt{font-size:var(--fs-h2);font-weight:var(--fw-heavy);color:var(--t1);margin:2px 0 14px;letter-spacing:-.3px}
.home-act{border-radius:16px;padding:16px 18px}
.home-sec{border-radius:18px;padding:22px}
@media(max-width:1080px){.home-grid{grid-template-columns:1fr}.home-grid .home-map{min-height:340px}}
@media(max-width:560px){.home-head-r{width:100%;justify-content:stretch}.home-cta{flex:1;justify-content:center}.home-wrap{padding:24px 16px 52px}}