/* ============================================================================
   Láminas "🗺️ Mapas y comparativas" (2026-10-03) — ver public/lib/laminasMapa.js.
   Sirve a las láminas de Carrusel (dentro de .crsl-slide.ccel, el estilo lo pone cada tema con crsl-tema-<id>) y a los
   Flyers «Mapa del ecosistema» y «Comparativa» (dentro de .flyer-slide: ahí las clases cmap-* se ven con las variables
   --crsl-* del flyer). Lo de abajo de "base" funciona SOLO con variables --crsl-*; los ajustes por estilo van aparte.
   html2canvas 1.4.1: sin box-shadow (sombras duras = bloque desplazado), sin filter ni mask.
   ============================================================================ */

/* ---------- base ---------- */
/* Flyers: el bloque se dibuja en una caja de tamaño fijo y se achica con transform para entrar en el alto del formato */
.flyer-cmap{position:relative; flex:none; align-self:center;}
.cmap-box{position:relative; transform-origin:top left;}
.cmap-abs{position:absolute;}
.cmap-lineas{position:absolute; pointer-events:none;}
.cmap-lineas svg{display:block;}
.cmap-nw, .cmap-nw *, .cmap-gan, .cmap-gan *, .cmap-centro, .cmap-centro *, .cmap-vs, .cmap-vs *{box-sizing:border-box;}
.cmap-nw i, .cmap-nw b, .cmap-gan i, .cmap-centro i, .cmap-vs i{font-style:normal;}
.cmap-nw{position:relative; width:100%; height:100%; border-radius:26px; background:var(--crsl-bg,#111);}
:where(.cmap-nodo, .cmap-izq){background:var(--crsl-bg,#111); border:3px solid var(--crsl-accent,#ffe000); border-radius:26px; color:var(--crsl-text-main,#fff);}

/* ---------- mapa: ramas ---------- */
.cmap-nodo{display:flex; align-items:center; gap:14px; width:100%; height:100%; padding:12px 16px; overflow:hidden; text-align:left;}
.cmap-chip{flex:none; border-radius:50%; background:var(--crsl-accent,#ffe000); color:var(--crsl-accent-oncolor, var(--crsl-on-accent,#000)); display:flex; align-items:center; justify-content:center; line-height:1; font-family:var(--crsl-font-display),sans-serif; font-weight:800;}
.cmap-nt{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.cmap-nn{font-family:var(--crsl-font-display),sans-serif; font-weight:800; line-height:1.08; overflow-wrap:anywhere;}
.cmap-nd{font-family:'Inter',sans-serif; font-weight:600; line-height:1.2; opacity:.78; overflow-wrap:break-word;}
.crsl-slide.ccel .cmap-nodo.crsl-box{display:flex; align-items:center; gap:14px; width:100%; height:100%; margin:0; padding:12px 16px; font-size:inherit; text-align:left;}
.crsl-slide.ccel .cmap-nodo .cmap-chip.crsl-check-icon{margin:0; flex:none;}

/* ---------- centro (círculo del color del estilo, con aro punteado) ---------- */
.cmap-centro{position:relative; width:100%; height:100%; --cmap-b:var(--crsl-accent,#ffe000); --cmap-t:var(--crsl-accent-oncolor, var(--crsl-on-accent,#000)); --cmap-r:50%; color:var(--cmap-t);}
.cmap-c-aro{position:absolute; display:block; left:-8%; top:-8%; width:116%; height:116%; border-radius:var(--cmap-r); border:3px dotted var(--crsl-accent,#ffe000); opacity:.7;}
.cmap-c-sh{position:absolute; display:none; left:0; top:0; width:100%; height:100%; border-radius:var(--cmap-r); background:#111; transform:translate(14px,14px);}
.cmap-c-main{position:absolute; left:0; top:0; width:100%; height:100%; border-radius:var(--cmap-r); background:var(--cmap-b); color:var(--cmap-t); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:9%; gap:2px;}
.cmap-c-txt{font-family:var(--crsl-font-display),sans-serif; font-weight:900; line-height:1; letter-spacing:-.01em; text-transform:uppercase; white-space:nowrap;}
.cmap-c-sub{font-family:'Inter',sans-serif; font-weight:800; letter-spacing:.2em; text-transform:uppercase; opacity:.8; margin-top:8px; white-space:nowrap;}

/* ---------- comparativa ---------- */
.cmap-card{position:relative; width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; --cmap-linea:rgba(127,127,127,.4);}
.cmap-izq{width:100%; height:100%; padding:0;}
.cmap-head{flex:none; padding:20px 22px 12px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:12px;}
.cmap-mk{width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Inter',sans-serif; font-weight:900; font-size:26px; line-height:1; flex:none;}
.cmap-mk.no{background:rgba(127,127,127,.28); color:inherit;}
.cmap-mk.si{background:var(--cmap-t,#000); color:var(--cmap-b,#fff);}
.cmap-h-t{font-family:var(--crsl-font-display),sans-serif; font-weight:900; line-height:1.05; text-transform:uppercase; letter-spacing:-.005em;}
.cmap-h-s{font-family:'Inter',sans-serif; font-weight:700; line-height:1.2; opacity:.85;}
.cmap-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px;}
.cmap-chip2{font-family:'Inter',sans-serif; font-weight:700; font-size:21px; line-height:1.2; padding:6px 15px; border-radius:999px; border:2px solid currentColor; opacity:.8; white-space:nowrap;}
.cmap-fila{flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; padding:0 18px; border-top:2px dashed var(--cmap-linea); overflow:hidden; text-align:center;}
.cmap-et{font-family:'Inter',sans-serif; font-weight:800; font-size:19px; letter-spacing:.16em; text-transform:uppercase; opacity:.7; line-height:1.15;}
.cmap-val{font-family:var(--crsl-font-display),sans-serif; font-weight:900; line-height:1.02; letter-spacing:-.01em;}
.cmap-card.compacto .cmap-fila{gap:5px;}
.cmap-card.compacto .cmap-et{font-size:17px;}
.cmap-card.compacto .cmap-pips{gap:7px;}
.cmap-card.compacto .cmap-pips i{width:22px; height:22px; border-width:2.5px;}
.cmap-pips{display:flex; gap:9px;}
.cmap-pips i{display:block; width:30px; height:30px; border-radius:50%; border:3px solid currentColor; opacity:.38;}
.cmap-pips i.on{background:currentColor; opacity:1;}
.cmap-gan{position:relative; width:100%; height:100%; --cmap-b:var(--crsl-accent,#ffe000); --cmap-t:var(--crsl-accent-oncolor, var(--crsl-on-accent,#000)); --cmap-r:26px; color:var(--cmap-t);}
.cmap-g-sh{position:absolute; display:none; left:0; top:0; width:100%; height:100%; border-radius:var(--cmap-r); background:#111; transform:translate(14px,14px);}
.cmap-g-main{position:absolute; left:0; top:0; width:100%; height:100%; border-radius:var(--cmap-r); background:var(--cmap-b); color:var(--cmap-t); --cmap-linea:rgba(0,0,0,.28);}
.cmap-vs{width:100%; height:100%; border-radius:50%; background:var(--crsl-text-main,#fff); color:var(--crsl-bg,#111); border:5px solid var(--crsl-bg,#111); display:flex; align-items:center; justify-content:center; z-index:5;}
.cmap-vs span{font-family:var(--crsl-font-display),sans-serif; font-weight:900; font-size:30px; line-height:1; letter-spacing:-.01em;}
.crsl-slide.ccel .cmap-izq.crsl-box{display:flex; flex-direction:column; width:100%; height:100%; margin:0; padding:0; text-align:center; font-size:inherit;}
.cmap-cierre{box-sizing:border-box;}
.cmap-cierre .bola{font-size:40px; line-height:1;}
.cmap-cierre .txt{flex:1; min-width:0;}
.cmap-cierre strong{display:block; white-space:nowrap;}
.crsl-slide.ccel .cmap-cierre{padding:14px 40px 14px 14px; max-width:none; width:100%;}
/* sin aire a los costados de una tarjeta: la pastilla del número de laminasCelular.css es angosta por defecto */

/* ---------- por estilo (Carrusel): mismos colores y formas que el sello de laminasCelular.css ---------- */
.crsl-tema-pop .cmap-centro, .crsl-tema-pop .cmap-gan, .crsl-tema-comic .cmap-centro, .crsl-tema-comic .cmap-gan{--cmap-b:#FFE14D; --cmap-t:#111;}
.crsl-tema-comic .cmap-centro, .crsl-tema-comic .cmap-gan{--cmap-b:#FFD400;}
.crsl-tema-pop .cmap-c-main, .crsl-tema-comic .cmap-c-main, .crsl-tema-pop .cmap-g-main, .crsl-tema-comic .cmap-g-main{border:6px solid #111;}
.crsl-tema-pop .cmap-c-sh, .crsl-tema-comic .cmap-c-sh, .crsl-tema-pop .cmap-g-sh, .crsl-tema-comic .cmap-g-sh{display:block;}
.crsl-tema-pop .cmap-c-aro, .crsl-tema-comic .cmap-c-aro{border-color:#111;}
.crsl-tema-pop .cmap-mk.si, .crsl-tema-comic .cmap-mk.si{background:#111; color:#FFE14D;}
.crsl-tema-rock .cmap-centro, .crsl-tema-rock .cmap-gan{--cmap-t:#fff; --cmap-r:0;}
.crsl-tema-premium .cmap-centro, .crsl-tema-editorial .cmap-centro, .crsl-tema-neon .cmap-centro,
.crsl-tema-premium .cmap-gan, .crsl-tema-editorial .cmap-gan, .crsl-tema-neon .cmap-gan{--cmap-b:var(--crsl-bg); --cmap-t:var(--crsl-accent-text);}
.crsl-tema-premium .cmap-c-main, .crsl-tema-editorial .cmap-c-main, .crsl-tema-premium .cmap-g-main, .crsl-tema-editorial .cmap-g-main{border:2px solid var(--crsl-accent);}
.crsl-tema-neon .cmap-c-main, .crsl-tema-neon .cmap-g-main{border:5px solid var(--crsl-accent2);}
.crsl-tema-neon .cmap-centro, .crsl-tema-neon .cmap-gan{--cmap-t:var(--crsl-accent);}
.crsl-tema-premium .cmap-g-main, .crsl-tema-editorial .cmap-g-main, .crsl-tema-neon .cmap-g-main{--cmap-linea:var(--crsl-accent-a25);}
.crsl-tema-premium .cmap-mk.si, .crsl-tema-editorial .cmap-mk.si, .crsl-tema-neon .cmap-mk.si{background:var(--crsl-accent); color:var(--crsl-bg);}
.crsl-tema-minimal .cmap-centro, .crsl-tema-minimal .cmap-gan{--cmap-b:var(--crsl-text-main); --cmap-t:var(--crsl-bg); --cmap-r:0;}
.crsl-tema-editorial .cmap-centro, .crsl-tema-editorial .cmap-gan{--cmap-r:0;}
.crsl-tema-brutalista .cmap-centro, .crsl-tema-brutalista .cmap-gan{--cmap-b:var(--crsl-accent2); --cmap-t:#0a0a0a; --cmap-r:0;}
.crsl-tema-brutalista .cmap-c-main, .crsl-tema-brutalista .cmap-g-main{border:6px solid #0a0a0a;}
.crsl-tema-brutalista .cmap-c-sh, .crsl-tema-brutalista .cmap-g-sh{display:block; background:#0a0a0a; transform:translate(12px,12px);}
.crsl-tema-scrapbook .cmap-centro, .crsl-tema-scrapbook .cmap-gan{--cmap-b:var(--crsl-accent); --cmap-t:#fff;}
.crsl-tema-zen .cmap-centro, .crsl-tema-wellness .cmap-centro, .crsl-tema-boho .cmap-centro,
.crsl-tema-zen .cmap-gan, .crsl-tema-wellness .cmap-gan, .crsl-tema-boho .cmap-gan{--cmap-t:#fff;}
/* formas de la tarjeta ganadora = las de la tarjeta de cada estilo (laminasCelular.css) */
.crsl-tema-pop .cmap-gan, .crsl-tema-neon .cmap-gan{--cmap-r:22px;}
.crsl-tema-minimal .cmap-gan, .crsl-tema-brutalista .cmap-gan{--cmap-r:0;}
.crsl-tema-clasico .cmap-gan, .crsl-tema-premium .cmap-gan, .crsl-tema-scrapbook .cmap-gan{--cmap-r:4px;}
.crsl-tema-comic .cmap-gan{--cmap-r:44px;}
.crsl-tema-mistico .cmap-gan{--cmap-r:30px;}
.crsl-tema-zen .cmap-gan{--cmap-r:38px;}
.crsl-tema-estiloGpt .cmap-gan{--cmap-r:20px;}
.crsl-tema-pop .cmap-vs, .crsl-tema-comic .cmap-vs{background:#fff; color:#111; border-color:#111;}
.crsl-tema-rock .cmap-vs, .crsl-tema-minimal .cmap-vs, .crsl-tema-brutalista .cmap-vs{border-radius:0;}
/* «Nico Alde Tips» */
.crsl-slide.natx .cmap-centro, .crsl-slide.natx .cmap-gan{--cmap-b:var(--crsl-accent); --cmap-t:#050505;}
.crsl-slide.natx.natx-amarillo .cmap-centro, .crsl-slide.natx.natx-amarillo .cmap-gan{--cmap-b:#050505; --cmap-t:var(--crsl-accent);}
.crsl-slide.natx .cmap-c-txt, .crsl-slide.natx .cmap-h-t, .crsl-slide.natx .cmap-val, .crsl-slide.natx .cmap-nn{font-family:'Montserrat',sans-serif; font-style:italic;}
.crsl-slide.natx .cmap-vs{background:#050505; color:var(--crsl-accent); border-color:var(--crsl-bg);}

/* Y2K: las cajas son ventanas con barra de título y 82 px de relleno (carruselTemasProA.css, con !important): en una rama o en la tarjeta de una comparativa no entran */
.crsl-tema-y2k.pa .cmap-nodo.crsl-box, .crsl-tema-y2k.pa .cmap-izq.crsl-box{padding:12px 16px !important;}
.crsl-tema-y2k.pa .cmap-izq.crsl-box{padding:0 !important;}
.crsl-tema-y2k.pa .cmap-nodo.crsl-box::before, .crsl-tema-y2k.pa .cmap-nodo.crsl-box::after, .crsl-tema-y2k.pa .cmap-izq.crsl-box::before, .crsl-tema-y2k.pa .cmap-izq.crsl-box::after{display:none !important;}