:root{--jn:#1C1B2E;--jb:#5B2BB0;--jbg:#FAF9FC;--jc:#fff;--jbd:#E8E5EF;--jt:#1C1B2E;--jm:#6E6885;--jf:#8B8499;
--jrojo:#e5484d;--jamb:#f5a524;--jverde:#30a46c;--jrbg:#fdf0f0;--jabg:#fef7e8;--jvbg:#eefaf3}
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
/* Block A · TAMAÑO FIJO: las tarjetas de una fila comparten box (stretch) y cada
   .j-card reserva una altura mínima → el estado vacío/cargando NO colapsa y no hay
   layout shift cuando llega el dato (el skeleton/'Cargando…' ocupa el box reservado).
   Las j-s2/j-s3 reservan un poco más por ser más anchas/densas. */
/* MSCOPE flat: sin cajas. El grid usa gap:1px sobre fondo gris → las secciones se
   separan por hairlines (vertical entre columnas, horizontal entre filas), no por
   recuadros. Cards blancas, sin border/shadow/radius, padding vertical generoso.
   Se conserva el invariante anti-shift (min-height por tipo + skeleton dentro). */
.j-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;background:#fff;align-items:stretch}
/* Divisiones como BORDES REALES de 1px (no fondo gris): border-right entre
   columnas, border-bottom entre filas. Página 100% blanca, solo hairlines grises. */
.j-card{background:#fff;border:none;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:0;box-shadow:none;padding:20px 24px;display:flex;flex-direction:column;min-height:150px}
.j-card.j-s2{min-height:180px}
.j-card.j-s3{min-height:200px}
/* Skeleton para el estado de carga — se pinta DENTRO del box reservado, sin shift */
@keyframes jSk{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.j-sk{border-radius:7px;background:#E8E5EF;background-image:linear-gradient(90deg,#E8E5EF 0px,#F5F3FA 100px,#E8E5EF 200px);background-size:200px 100%;background-repeat:no-repeat;animation:jSk 1.2s ease-in-out infinite}
.j-card .j-expl:only-child{color:var(--jm)}
/* Títulos de sección MSCOPE: pequeños, MAYÚSCULAS, letter-spacing, gris medio,
   con icono chico gris en línea. Nada de títulos grandes en negrita. */
/* Acabado C: rótulos de sección en AZUL #5B2BB0 (icono en el mismo azul), peso 600.
   Datos/números y nombres de microsector siguen navy; .j-src sigue gris. */
.j-card h3{font-family:'DM Sans',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#5B2BB0;margin:0 0 13px;display:flex;align-items:center;gap:6px}
.j-card h3 svg{width:13px;height:13px;color:#5B2BB0;flex-shrink:0}
/* Acabado 3: header por módulo → breadcrumb chico, SIN logo/icono decorativo ni
   título grande (el sidebar ya indica el módulo). Data-first como MSCOPE. */
/* Acabado B: fuera el breadcrumb/título de módulo; queda SOLO la línea de contexto
   personalizada (desde KrevoPerfil), gris #6E6885 ~13px. */
/* GLOBAL: fuera TODO el encabezado de módulo (título + línea de contexto). El
   contenido arranca en el tope — acceso directo, sin scrollear. */
.page-head,.page-head-title,.page-head-sub,.mn-sub,.mn-head h1{display:none!important}
/* Mi Negocio: la mascota flota arriba-derecha (absolute) para que el contenido
   suba al tope sin dejar banda superior; el sprite queda alineado, no desfasado. */
.mn-head{position:absolute!important;top:6px;right:24px;margin:0!important;z-index:3;pointer-events:none;gap:0!important}
.j-s2{grid-column:span 2}.j-s3{grid-column:span 3}
.j-src{margin-top:auto;padding-top:10px;font-size:10.5px;color:var(--jf);display:flex;align-items:flex-start;gap:5px;line-height:1.4}
.j-src svg{width:10px;height:10px;flex-shrink:0;opacity:.75;margin-top:2px}
.j-mtx{display:flex}
.j-mtx div{width:52px;height:52px;display:flex;align-items:center;justify-content:center;font-family:'DM Sans',sans-serif;font-weight:700;font-size:25px}
.j-mtx .L{background:var(--jvbg);color:var(--jverde);border-radius:11px 0 0 11px}
.j-mtx .LB{background:#f1f3f7;color:var(--jn)}.j-mtx .LC{background:var(--jrbg);color:var(--jrojo)}
.j-mtx .N{background:#F0EDF6;color:var(--jn);border-radius:0 11px 11px 0}
.j-mtx .off{background:#f4f5f7;color:#E8E5EF}
.j-expl{font-size:12.5px;color:var(--jm);line-height:1.5;margin-top:10px}
.j-expl b{color:var(--jn)}
.j-ind{display:flex;justify-content:space-between;align-items:baseline;padding:8px 0;border-bottom:1px dashed var(--jbd);font-size:13px}
.j-ind:last-child{border:0}
.j-ind b{font-family:'DM Sans',sans-serif;font-size:14.5px;color:var(--jn)}
.j-ind em{font-style:normal;font-size:10px;color:var(--jf);display:block;margin-top:1px}
.j-up{color:var(--jverde);font-size:11.5px;font-weight:600}.j-dn{color:var(--jrojo);font-size:11.5px;font-weight:600}
.j-per{margin-left:auto;display:flex;gap:1px}
.j-per s{text-decoration:none;font-size:10px;font-weight:600;color:#E8E5EF;padding:2px 5px;border-radius:5px;cursor:pointer;letter-spacing:.3px}
.j-per s:hover{color:var(--jm);background:#F5F3FA}
.j-per s.on{color:var(--jb);background:#F3EEFB}
.j-sg{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--jbd)}
.j-sg:last-child{border:0;padding-bottom:0}
.j-dot{width:9px;height:9px;border-radius:50%;margin-top:5px;flex-shrink:0}
.j-dr{background:var(--jrojo)}.j-da{background:var(--jamb)}.j-dv{background:var(--jverde)}
.j-sg .t{font-size:13px;font-weight:600;color:var(--jn);line-height:1.35}
.j-sg .im{font-size:12px;color:var(--jt);margin-top:3px;background:#f8f9fb;border-radius:7px;padding:6px 8px;line-height:1.4}
.j-sg .im b{color:var(--jb)}
.j-sg .sc{font-size:10px;color:var(--jf);margin-top:3px}
.j-pill{display:inline-block;background:var(--jvbg);color:#1d7a4f;font-size:10.5px;font-weight:700;border-radius:99px;padding:3px 9px}
/* Acabado 4: identidad (nombre de microsector, línea de sector) en oscuro/navy,
   NO en el gris de sección — el gris se reserva para rótulos MAYÚSCULAS y .j-src. */
.j-path{font-size:10.5px;color:#47425C;font-weight:500}
.j-nm{font-family:'DM Sans',sans-serif;font-weight:600;font-size:14.5px;color:#1C1B2E;margin:2px 0 8px}
.j-pj{margin-top:10px;font-size:11.5px;color:var(--jm)}
.j-pj b{display:block;font-size:20px;font-family:'DM Sans',sans-serif;color:var(--jverde)}
.j-dim{display:flex;align-items:center;gap:8px;font-size:11.5px;margin:6px 0}
.j-dim span{width:88px;color:var(--jm)}
.j-bar{flex:1;height:6px;background:#f0f2f6;border-radius:9px;overflow:hidden}
.j-bar i{display:block;height:100%;background:var(--jverde);border-radius:9px}
.j-bar i.m{background:var(--jamb)}.j-bar i.l{background:var(--jrojo)}
.j-dim b{width:30px;text-align:right;color:var(--jn);font-family:'DM Sans',sans-serif}
.j-ev{background:linear-gradient(90deg,#fff8f0,#fff);border:1px solid #f5d9a8;border-left:4px solid var(--jamb);border-radius:13px;padding:14px 18px;margin-bottom:13px;display:flex;align-items:center;gap:15px}
.j-ev .t{font-family:'DM Sans',sans-serif;font-weight:700;font-size:13.5px;color:var(--jn)}
.j-ev .d{font-size:12.5px;color:var(--jm);margin-top:2px}
.j-ev .b{margin-left:auto;background:var(--jn);color:#fff;font-size:12px;font-weight:600;border-radius:9px;padding:8px 14px;white-space:nowrap}
.j-spark{display:flex;align-items:flex-end;gap:2px;height:26px;margin:6px 0 2px}
.j-spark i{flex:1;background:#E8E5EF;border-radius:1px}
@media(max-width:900px){.j-grid{grid-template-columns:1fr}.j-s2,.j-s3{grid-column:span 1}}

/* UI-1 · Selector de categorías de "Tus indicadores" (debajo del bloque, mismo tema).
   Las filas del selector reusan .j-ind — cero estilo nuevo para las tarjetas. */
/* UI-2 · chips proporcionados y de alto UNIFORME. .j-catsel NO se comprime
   (flex:0 0 auto) — antes, dentro del card de alto fijo, el flex lo aplastaba a
   ~15px y cortaba los chips. inline-flex + height fijo + line-height:1 → el ★ y el
   texto quedan centrados y ningún chip se deforma; si no caben, scroll horizontal. */
.j-catsel{display:flex;align-items:center;gap:7px;overflow-x:auto;margin:14px 0 8px;padding-bottom:5px;flex:0 0 auto;-webkit-overflow-scrolling:touch}
.j-catsel::-webkit-scrollbar{height:0}
.j-cattab{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;height:28px;background:#fff;border:1px solid var(--jbd);color:var(--jm);font-size:11.5px;font-weight:600;padding:0 13px;border-radius:999px;cursor:pointer;white-space:nowrap;line-height:1;letter-spacing:.02em;transition:.15s}
.j-cattab:hover{color:var(--jt);border-color:#E8E5EF}
.j-cattab.on{background:var(--jb);border-color:var(--jb);color:#fff}

/* UI-2 · pie de bloque: (i) discreto + fecha opcional. Reemplaza los .j-src con
   texto de fuente/metodología a la vista — ahora ese texto vive DENTRO del tooltip.
   Pinned al fondo del card (margin-top:auto) y sin comprimirse (flex-shrink:0). */
.j-foot{margin-top:auto;flex-shrink:0;display:flex;align-items:center;gap:9px;padding-top:10px;min-height:20px}
.j-info{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border:none;background:none;color:var(--jf);cursor:pointer;opacity:.7;transition:opacity .15s,color .15s;flex-shrink:0;-webkit-tap-highlight-color:transparent}
.j-info:hover,.j-info[aria-expanded="true"]{opacity:1;color:var(--jb)}
.j-info svg{width:14px;height:14px}
.j-date{font-size:10.5px;color:var(--jf);letter-spacing:.02em;white-space:nowrap}
/* Tooltip reutilizable (uno solo, montado en <body> → nunca lo recorta overflow:hidden del card) */
.j-tip{position:fixed;z-index:2147483000;max-width:300px;background:var(--jn);color:#fff;font-size:11.5px;font-weight:500;line-height:1.5;padding:10px 13px;border-radius:10px;box-shadow:0 10px 30px rgba(15,26,61,.24);pointer-events:none;visibility:visible;opacity:0;transform:translateY(4px);transition:opacity .14s ease,transform .14s ease}
.j-tip.on{opacity:1;transform:translateY(0)}
.next-action{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(220px,.9fr) auto;gap:20px;align-items:center;margin:0 0 16px;padding:18px 20px;border:1px solid #ded9eb;border-left:4px solid #6231b5;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(38,24,75,.04)}
.next-action-eyebrow,.next-action-proof>span{display:block;margin-bottom:5px;color:#6b4baa;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase}
.next-action h2{margin:0 0 5px;color:#211d35;font-size:17px;line-height:1.25}
.next-action p{margin:0;color:#625d72;font-size:12.5px;line-height:1.5}
.next-action-proof{padding-left:18px;border-left:1px solid #ebe7f1}
.next-action-cta{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 14px;border-radius:9px;background:#5c2caf;color:#fff;text-decoration:none;font-size:12px;font-weight:750;white-space:nowrap}
.next-action-cta:hover{background:#49218e}
@media(max-width:900px){.next-action{grid-template-columns:1fr}.next-action-proof{padding:12px 0 0;border-left:0;border-top:1px solid #ebe7f1}.next-action-cta{justify-self:start}}
.view-tlx-cta{position:fixed;z-index:1200;right:22px;bottom:22px;display:flex;align-items:center;gap:10px;padding:9px 13px 9px 9px;border:1px solid #49218e;border-radius:13px;background:#2e1954;color:#fff;box-shadow:0 8px 24px rgba(34,21,67,.24);cursor:pointer;font-family:inherit;text-align:left}
.view-tlx-cta:hover{background:#3b206d;transform:translateY(-1px)}
.view-tlx-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:#5c2caf;font-size:10px;font-weight:850;letter-spacing:.04em}
.view-tlx-cta b,.view-tlx-cta small{display:block}.view-tlx-cta b{font-size:11.5px;line-height:1.25}.view-tlx-cta small{margin-top:2px;color:#d9cfee;font-size:9px}
.block-tlx-action{float:right;margin:-3px 0 0 12px;padding:6px 9px;border:1px solid #d8d1e6;border-radius:8px;background:#fff;color:#5930a0;font:700 10px/1.2 Inter,sans-serif;letter-spacing:0;text-transform:none;cursor:pointer}
.block-tlx-action:hover,.block-tlx-action:focus-visible{border-color:#5930a0;background:#f6f2fb;outline:2px solid transparent}
@media(max-width:768px){.view-tlx-cta{right:12px;bottom:76px}.view-tlx-cta small{display:none}}