/* Recursos · el HTML de cada recurso (04-10-2026): las piezas .rec-* del cuerpo y de la vista previa
   (contenido/recursos/README.md; hoja de referencia en scripts/banco-render/recursos-contenido.html), con la piel de la
   casa: los tokens --pc-* de marca.css. La usan la página pública (la vista previa) y la pantalla del recurso dentro de
   la cuenta (el cuerpo entero, con «Copiar», «Descargar» y la herramienta). Los párrafos llenan su caja. */
.rec-cuerpo{color:var(--pc-texto);font:400 17px/1.6 var(--pc-cuerpo);min-width:0}
.rec-cuerpo section{margin:0 0 36px;min-width:0}
.rec-cuerpo h2{margin:36px 0 12px;font:600 26px/1.18 var(--pc-display);color:var(--pc-tinta);letter-spacing:-.01em}
.rec-cuerpo section>h2:first-child{margin-top:0}
.rec-cuerpo h3{margin:24px 0 8px;font:600 19px/1.3 var(--pc-display);color:var(--pc-tinta)}
.rec-cuerpo p{margin:0 0 14px}
.rec-cuerpo .rec-entrada{font-size:20px;line-height:1.5;color:var(--pc-tinta);margin-bottom:22px}
.rec-cuerpo ul,.rec-cuerpo ol{padding-left:24px;margin:0 0 16px}
.rec-cuerpo li{margin:0 0 10px}
.rec-cuerpo .rec-pasos>li::marker{font:600 15px var(--pc-mono);color:var(--pc-oro-tinta)}
.rec-cuerpo strong{color:var(--pc-tinta);font-weight:600}
.rec-cuerpo a{color:var(--pc-tinta);text-decoration-color:var(--pc-oro);text-underline-offset:3px}
.rec-cita{margin:20px 0;padding:6px 0 6px 20px;border-left:3px solid var(--pc-oro)}
.rec-cita p{margin:0 0 6px;font-style:italic;font-size:18px;line-height:1.5;color:var(--pc-tinta)}
.rec-cita cite{font:500 14px/1.4 var(--pc-ui);font-style:normal;color:var(--pc-mudo)}
.rec-nota{background:var(--pc-hueso);padding:12px 16px;font:400 16px/1.55 var(--pc-cuerpo)!important;color:var(--pc-texto)}
.rec-fuente{margin-top:28px!important;padding-top:14px;border-top:1px solid var(--pc-filete);font:400 14px/1.5 var(--pc-ui);color:var(--pc-mudo)}
.rec-herramienta{margin:8px 0 12px;min-width:0}
.rec-acciones{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 18px!important}
.rec-copiar,.rec-descargar{min-height:44px;padding:10px 18px;border-radius:2px;border:1px solid var(--pc-tinta);background:var(--pc-blanco,#fff);
  color:var(--pc-tinta);font:600 15px/1.2 var(--pc-ui);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.rec-copiar:hover,.rec-descargar:hover{background:var(--pc-hueso)}
.rec-copiar.es-hecho{background:var(--pc-tinta);color:var(--pc-porcelana)}
.rec-tabla-caja{margin:12px 0 16px;overflow-x:auto}
.rec-tabla{width:100%;border-collapse:collapse;background:var(--pc-blanco,#fff);border:1px solid var(--pc-filete);font:400 15px/1.5 var(--pc-ui)}
.rec-tabla caption{text-align:left;font:500 11px/1.3 var(--pc-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pc-mudo);padding:0 0 8px}
.rec-tabla th{background:var(--pc-hueso);text-align:left;font:600 13px/1.35 var(--pc-ui);color:var(--pc-tinta);padding:12px 14px;border-bottom:1px solid var(--pc-filete)}
.rec-tabla td{padding:12px 14px;border-bottom:1px solid var(--pc-filete-suave);vertical-align:top;color:var(--pc-texto);height:auto;font-variant-numeric:normal}
.rec-tabla tr:last-child td{border-bottom:0}
.rec-tabla-vacia td{height:64px}
.rec-tabla-vacia td:first-child,.rec-tabla-vacia th:first-child{width:96px}
@media (max-width:720px){
  .rec-tabla-caja{overflow-x:visible}
  .rec-tabla,.rec-tabla tbody,.rec-tabla tr,.rec-tabla td{display:block;width:100%}
  .rec-tabla thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .rec-tabla{border:0;background:transparent}
  .rec-tabla tr{background:var(--pc-blanco,#fff);border:1px solid var(--pc-filete);margin:0 0 12px;padding:4px 0}
  .rec-tabla td{border:0;padding:8px 14px}
  .rec-tabla td::before{content:attr(data-col);display:block;font:500 11px/1.3 var(--pc-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pc-mudo);margin-bottom:2px}
  .rec-tabla-vacia td{height:auto;min-height:60px;border-bottom:1px dashed var(--pc-filete)}
  .rec-tabla-vacia td:last-child{border-bottom:0}
  .rec-tabla-vacia td:first-child{width:100%}
}
.rec-email{background:var(--pc-blanco,#fff);border:1px solid var(--pc-filete);border-top:3px solid var(--pc-tinta);padding:20px 18px;margin:0 0 20px;min-width:0}
.rec-email h3{margin:0 0 12px;display:flex;align-items:center;gap:12px;font:600 19px/1.3 var(--pc-display);color:var(--pc-tinta)}
.rec-num{flex:none;display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--pc-oro);color:var(--pc-tinta);font:600 15px/1 var(--pc-mono)}
.rec-ficha{display:grid;grid-template-columns:minmax(0,1fr);gap:2px 16px;margin:0 0 14px;font:400 15px/1.5 var(--pc-cuerpo)}
.rec-ficha dt{font:500 11px/1.3 var(--pc-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--pc-mudo);margin-top:8px}
.rec-ficha dd{margin:0}
@media (min-width:560px){.rec-ficha{grid-template-columns:96px minmax(0,1fr)}.rec-ficha dt{margin-top:3px}}
.rec-copiable{border:1px solid var(--pc-filete);background:var(--pc-porcelana);overflow:hidden;margin:0 0 12px}
.rec-copiable-cab{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:10px 12px 10px 16px;
  border-bottom:1px solid var(--pc-filete);background:var(--pc-blanco,#fff);font:600 15px/1.4 var(--pc-ui);color:var(--pc-tinta)}
.rec-copiable-cab span{min-width:0;overflow-wrap:anywhere}
.rec-texto{margin:0;padding:16px;white-space:pre-wrap;overflow-wrap:anywhere;font:400 15.5px/1.55 var(--pc-ui);color:var(--pc-texto)}
.rec-email .rec-nota{margin:0!important}
@container rc (min-width:900px){
  .rec-cuerpo section:has(>.rec-email){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
  .rec-cuerpo section:has(>.rec-email)>:not(.rec-email){grid-column:1/-1}
  .rec-cuerpo section:has(>.rec-email)>.rec-email{margin:0}
}
/* (04-10) dentro del CRM, `table tbody td{height:var(--h-row)}` (la densidad de las tablas del CRM) fijaba 34 px a cada
   celda: en el móvil, apiladas, el texto se montaba. Aquí la celda mide lo que su texto (height:auto, arriba) y sin las
   cifras tabulares de las tablas del CRM (separaban los dos puntos y el punto final). */
/* La vista previa de la página pública: el mismo HTML, más pequeño */
.rp-previa .rec-tabla{font-size:14px}
.rp-previa .rec-tabla-caja{margin:8px 0 12px}
.rp-previa p:last-child{margin-bottom:0}

/* ── (18-10) Informe de datos: portada, índice, cifras, embudo, tarjetas, avisos, niveles y gráficas ──
   Primero, el caso Globelusters 2021 (sus gráficas las pinta contenido/recursos/caso-globelusters.js). Solo tokens --pc-* de modules/recursos/marca.css; los únicos colores
   que no son un token salen de mezclarlos (color-mix), porque la marca no tiene un «claro sobre tinta». Todo bajo rec-*. */

/* Un número en el título de cada apartado (reusa .rec-num, el círculo de los correos) */
.rec-cuerpo h2:has(>.rec-num){display:flex;align-items:center;gap:12px}
.rec-cuerpo h2>.rec-num{flex:none}

/* Portada: tinta, el titular y las cinco cifras */
.rec-portada{margin:0 0 32px;padding:32px 30px;border-radius:14px;background:var(--pc-tinta);color:var(--pc-porcelana);container-type:inline-size}
.rec-cuerpo .rec-portada>p:first-child{margin:0 0 10px;font:500 12px/1.4 var(--pc-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pc-oro)}
.rec-cuerpo .rec-portada h2{margin:0 0 12px;font:600 clamp(26px,4vw,38px)/1.12 var(--pc-display);color:var(--pc-porcelana)}
.rec-cuerpo .rec-portada p{color:color-mix(in srgb,var(--pc-porcelana) 78%,var(--pc-tinta))}
.rec-portada .rec-kpis{grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;margin:24px 0 0;border-radius:10px;overflow:hidden;
  background:color-mix(in srgb,var(--pc-porcelana) 14%,var(--pc-tinta))}
.rec-portada .rec-kpi{border:0;border-radius:0;padding:16px 12px;text-align:center;background:color-mix(in srgb,var(--pc-porcelana) 7%,var(--pc-tinta))}
.rec-portada .rec-kpi strong{color:var(--pc-porcelana);font-size:24px;white-space:nowrap}
/* la portada mira su propio ancho, no el de la pantalla: en la vista previa (columna estrecha) las cinco cifras no caben */
@container (max-width:620px){
  .rec-portada .rec-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec-portada .rec-kpi:last-child{grid-column:1/-1}
  .rec-portada .rec-kpi strong{font-size:22px}
}
.rec-portada .rec-kpi span{color:color-mix(in srgb,var(--pc-porcelana) 62%,var(--pc-tinta));font:500 11px/1.35 var(--pc-mono);letter-spacing:.08em;text-transform:uppercase}

/* Índice */
.rec-indice{margin:0 0 36px;padding:20px 22px;border:1px solid var(--pc-filete);border-radius:12px;background:var(--pc-hueso)}
.rec-cuerpo .rec-indice>p{margin:0 0 12px;font:600 12px/1.3 var(--pc-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--pc-mudo)}
.rec-cuerpo .rec-indice ol{margin:0;padding:0;list-style:none;counter-reset:ri;columns:3 200px;column-gap:28px}
.rec-cuerpo .rec-indice li{counter-increment:ri;margin:0 0 8px;break-inside:avoid;font:400 15px/1.4 var(--pc-ui);color:var(--pc-texto)}
.rec-cuerpo .rec-indice li::before{content:counter(ri,decimal-leading-zero);margin-right:10px;font:500 12px var(--pc-mono);color:var(--pc-mudo)}

/* Cifras en tarjeta: etiqueta, número, de dónde sale */
.rec-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:16px 0 22px}
.rec-kpi{min-width:0;padding:16px 18px;border:1px solid var(--pc-filete);border-radius:12px;background:var(--pc-blanco)}
.rec-kpi span{display:block;font:500 13px/1.4 var(--pc-ui);color:var(--pc-mudo)}
.rec-kpi strong{display:block;margin:6px 0 4px;white-space:nowrap;font:600 30px/1.1 var(--pc-display);color:var(--pc-tinta);letter-spacing:-.01em;font-variant-numeric:lining-nums}
.rec-kpi small{display:block;font:400 13px/1.45 var(--pc-ui);color:var(--pc-mudo)}
.rec-kpi.rec-nivel-bien strong{color:var(--pc-verde)}
.rec-kpi.rec-nivel-medio strong{color:var(--pc-oro-tinta)}
.rec-kpi.rec-nivel-mal strong{color:var(--pc-rojo)}

/* Embudo: cada paso, una barra más corta que la anterior (escalera fija, no a escala) */
.rec-cuerpo .rec-embudo{margin:16px 0 22px;padding:0;list-style:none}
.rec-cuerpo .rec-embudo li{margin:0 0 10px}
.rec-embudo li strong{display:block;padding:11px 14px;border-radius:8px;font:600 16px/1.3 var(--pc-ui);color:var(--pc-porcelana);background:var(--pc-tinta)}
.rec-embudo li span{display:block;margin-top:4px;font:400 14px/1.45 var(--pc-ui);color:var(--pc-mudo)}
.rec-embudo li:nth-child(2) strong{width:80%;background:var(--pc-texto)}
.rec-embudo li:nth-child(3) strong{width:62%;background:var(--pc-oro-tinta)}
.rec-embudo li:nth-child(4) strong{width:44%;background:var(--pc-verde)}

/* Tarjetas (momentos destacados) y avisos */
.rec-tarjetas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:16px 0 22px}
.rec-tarjeta{min-width:0;padding:18px 20px;border:1px solid var(--pc-filete);border-radius:12px;background:var(--pc-blanco)}
.rec-cuerpo .rec-tarjeta h3{margin:0 0 8px;font-size:18px}
.rec-cuerpo .rec-tarjeta p{margin:0;font:400 15px/1.55 var(--pc-ui)}
.rec-tarjeta.rec-nivel-bien{background:var(--pc-verde-fondo);border-color:color-mix(in srgb,var(--pc-verde) 30%,var(--pc-verde-fondo))}
.rec-tarjeta.rec-nivel-medio{background:var(--pc-hueso)}
.rec-tarjeta.rec-nivel-mal{background:var(--pc-rojo-fondo);border-color:color-mix(in srgb,var(--pc-rojo) 25%,var(--pc-rojo-fondo))}
.rec-destacado{margin:18px 0 24px;padding:18px 20px;border-radius:12px;background:var(--pc-verde-fondo)}
.rec-cuerpo .rec-destacado p{margin:0 0 8px;font:400 16px/1.55 var(--pc-ui)}
.rec-cuerpo .rec-destacado p:last-child{margin:0}
.rec-cuerpo .rec-destacado p:first-child strong{font:600 18px/1.35 var(--pc-display)}
.rec-aviso{margin:18px 0 24px;padding:16px 18px;border:1px dashed var(--pc-filete);border-radius:12px;background:var(--pc-porcelana)}
.rec-cuerpo .rec-aviso p,.rec-cuerpo .rec-aviso li{font:400 15px/1.55 var(--pc-ui);color:var(--pc-texto)}
.rec-cuerpo .rec-aviso>:last-child{margin-bottom:0}

/* Niveles en la tabla */
.rec-tabla td.rec-nivel-bien{color:var(--pc-verde);font-weight:600}
.rec-tabla td.rec-nivel-medio{color:var(--pc-oro-tinta);font-weight:600}
.rec-tabla td.rec-nivel-mal{color:var(--pc-rojo);font-weight:600}
.rec-tabla-desliza td:not(:first-child){white-space:nowrap}

/* Glosario */
.rec-cuerpo .rec-glosario{display:grid;grid-template-columns:max-content 1fr;gap:10px 20px;margin:12px 0 22px;padding:16px 18px;border:1px solid var(--pc-filete);border-radius:12px;background:var(--pc-blanco)}
.rec-cuerpo .rec-glosario dt{font:600 15px/1.45 var(--pc-ui);color:var(--pc-tinta)}
.rec-cuerpo .rec-glosario dd{margin:0;font:400 15px/1.45 var(--pc-ui);color:var(--pc-texto)}

/* Gráficas (las pinta caso-globelusters.js en su .rec-herramienta) */
.rec-grafica{margin:16px 0 24px;padding:16px 16px 14px;border:1px solid var(--pc-filete);border-radius:12px;background:var(--pc-blanco)}
.rec-grafica-titulo{margin:0 0 10px;font:600 15px/1.35 var(--pc-ui);color:var(--pc-tinta)}
.rec-grafica-lienzo{min-width:0}
.rec-grafica svg{display:block;width:100%;height:auto;overflow:visible}
.rec-grafica text{font:500 11px var(--pc-ui);fill:var(--pc-mudo)}
.rec-grafica .rec-g-valor{fill:var(--pc-tinta);font-weight:600}
.rec-grafica .rec-g-texto-2{fill:var(--pc-oro-tinta)}
.rec-g-rejilla{stroke:var(--pc-filete-suave);stroke-width:1}
.rec-g-eje{stroke:var(--pc-filete);stroke-width:1}
.rec-grafica .rec-g-barra{fill:var(--pc-hueso);stroke:var(--pc-filete)}
.rec-grafica .rec-nivel-bien{fill:var(--pc-verde)}
.rec-grafica .rec-nivel-medio{fill:var(--pc-oro)}
.rec-grafica .rec-nivel-mal{fill:var(--pc-rojo)}
.rec-g-serie-1{fill:none;stroke:var(--pc-tinta);stroke-width:2}
.rec-g-serie-2{fill:none;stroke:var(--pc-oro-tinta);stroke-width:2;stroke-dasharray:6 4}
.rec-g-punto-1{fill:var(--pc-tinta)}
.rec-g-punto-2{fill:var(--pc-oro-tinta)}
.rec-grafica-leyenda{display:flex;flex-wrap:wrap;gap:6px 16px;margin:10px 0 0;padding:0;list-style:none;font:500 13px/1.4 var(--pc-ui);color:var(--pc-mudo)}
.rec-grafica-leyenda li{margin:0;display:flex;align-items:center}
.rec-g-muestra{flex:none;display:inline-block;width:12px;height:12px;margin-right:6px;border-radius:3px}
.rec-g-muestra.rec-nivel-bien{background:var(--pc-verde)}
.rec-g-muestra.rec-nivel-medio{background:var(--pc-oro)}
.rec-g-muestra.rec-nivel-mal{background:var(--pc-rojo)}
.rec-g-muestra.rec-g-barra{background:var(--pc-hueso);border:1px solid var(--pc-filete)}
.rec-g-muestra.rec-g-serie-1{background:var(--pc-tinta);stroke:none}
.rec-g-muestra.rec-g-serie-2{background:var(--pc-oro-tinta);stroke:none}

/* La tabla de doce meses no se apila en el móvil (doce tarjetas de nueve datos): se desliza en su caja.
   Pisa el apilado de .rec-tabla de max-width:720px solo para .rec-tabla-desliza. */
@media (max-width:720px){
  .rec-tabla-caja:has(>.rec-tabla-desliza){overflow-x:auto;-webkit-overflow-scrolling:touch}
  .rec-tabla.rec-tabla-desliza{display:table;width:auto;min-width:100%;border:1px solid var(--pc-filete);background:var(--pc-blanco)}
  .rec-tabla.rec-tabla-desliza thead{position:static;width:auto;height:auto;overflow:visible;clip:auto;display:table-header-group}
  .rec-tabla.rec-tabla-desliza tbody{display:table-row-group;width:auto}
  .rec-tabla.rec-tabla-desliza tr{display:table-row;width:auto;margin:0;padding:0;border:0;background:transparent}
  .rec-tabla.rec-tabla-desliza td{display:table-cell;width:auto;padding:10px 12px;border-bottom:1px solid var(--pc-filete-suave)}
  .rec-tabla.rec-tabla-desliza th{padding:10px 12px}
  .rec-tabla.rec-tabla-desliza td::before{content:none}
  /* la primera columna (el mes, la fila) se queda quieta al deslizar */
  .rec-tabla.rec-tabla-desliza th:first-child,.rec-tabla.rec-tabla-desliza td:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--pc-filete-suave)}
  .rec-tabla.rec-tabla-desliza td:first-child{background:var(--pc-blanco)}
  .rec-tabla.rec-tabla-desliza th:first-child{background:var(--pc-hueso)}
}

@media (max-width:640px){
  .rec-portada{padding:24px 18px}
  .rec-portada .rec-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rec-portada .rec-kpi:last-child{grid-column:1/-1}
  .rec-portada .rec-kpi strong{font-size:22px}
  .rec-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .rec-kpi{padding:14px}
  .rec-kpi strong{font-size:24px}
  .rec-kpis>.rec-kpi:last-child:nth-child(odd){grid-column:1/-1}
  .rec-cuerpo .rec-glosario{grid-template-columns:minmax(0,1fr);gap:2px;padding:14px}
  .rec-cuerpo .rec-glosario dd{margin:0 0 10px}
  .rec-cuerpo .rec-glosario dd:last-child{margin:0}
  .rec-tarjetas{grid-template-columns:minmax(0,1fr)}
  .rec-embudo li:nth-child(2) strong{width:88%}
  .rec-embudo li:nth-child(3) strong{width:76%}
  .rec-embudo li:nth-child(4) strong{width:64%}
  .rec-grafica{padding:12px 10px 12px}
}