/* ============================================================================
   Lámina "🧾 Ficha numerada" (2026-10-04) — ver public/lib/laminasFicha.js.
   La ventana, la línea de máquina y los puntos toman los colores del estilo activo (variables --crsl-*). Sin
   box-shadow/filter/mask (html2canvas 1.4.1): bordes, fondos y degradés que no se repiten.
   ============================================================================ */
.cfi-vent, .cfi-vent *, .cfi-pts, .cfi-pts *{box-sizing:border-box;}
.cfi-vent i, .cfi-pts i{font-style:normal;}

/* la línea chica en letra de máquina */
.cfi-sub{font-family:'JetBrains Mono','Courier New',monospace; font-weight:700; font-size:34px; letter-spacing:.01em; color:var(--crsl-text-muted,#6b6258); line-height:1.2; max-width:900px; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ventana de navegador */
.cfi-vent{position:relative; width:100%; height:100%; border-radius:30px; overflow:hidden; background:#fff; border:3px solid var(--crsl-card-border,#d8cdb8);}
.cfi-barra{position:absolute; left:0; top:0; right:0; display:flex; align-items:center; gap:12px; padding:0 22px; background:var(--crsl-box-neutral-bg,#f3ece0); border-bottom:3px solid var(--crsl-card-border,#d8cdb8);}
.cfi-barra i{display:block; width:16px; height:16px; border-radius:50%; flex:none;}
.cfi-barra i.a{background:#E0705A;} .cfi-barra i.b{background:#E7B54A;} .cfi-barra i.c{background:#79B26A;}
.cfi-url{flex:1; margin-left:14px; height:30px; border-radius:15px; background:rgba(0,0,0,.06); padding:0 16px; display:flex; align-items:center; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:19px; color:var(--crsl-text-faint,#8a8070); white-space:nowrap; overflow:hidden;}
.cfi-pant{position:absolute; left:0; right:0; bottom:0; overflow:hidden; background:#fbf7ee;}
.cfi-img{position:absolute; left:0; top:0; right:0; bottom:0; background-repeat:no-repeat; background-size:cover;}

/* ventana vacía: tu personaje de la app sobre un aro del color del estilo y un tramado de puntitos */
.cfi-vacia{position:absolute; left:0; top:0; right:0; bottom:0; display:flex; align-items:flex-end; justify-content:center; background:var(--crsl-accent-a18, rgba(210,105,74,.12));}
.cfi-aro{position:absolute; left:50%; top:50%; border-radius:50%; background:var(--crsl-accent-a18, rgba(210,105,74,.18));}
.cfi-pj{position:relative; z-index:1;}
.cfi-pj svg{display:block; width:100%; height:100%;}
.cfi-ico{position:relative; z-index:1; align-self:center; font-size:220px; line-height:1;}

/* puntos: viñeta + texto, con un filete fino abajo de cada uno */
.cfi-pts{display:flex; flex-wrap:wrap; width:100%;}
.cfi-pt{display:flex; align-items:center; gap:18px; border-bottom:2px solid var(--crsl-card-border,#d8cdb8); flex:none;}
.cfi-pt i{display:block; width:18px; height:18px; border-radius:50%; background:var(--crsl-accent,#D2694A); flex:none;}
.cfi-pt span{display:block; min-width:0; font-family:var(--crsl-font-body,'Nunito','Baloo 2',sans-serif); font-weight:800; line-height:1.16; color:var(--crsl-text-main,#1b130e); overflow-wrap:break-word;}

/* en «Terracota · Guía» la letra de los puntos es la redonda amigable del estilo, no la serif de los títulos */
.crsl-tema-terracota .cfi-pt span{font-family:'Nunito','Baloo 2',sans-serif; font-weight:800; color:#2B211A;}
.crsl-tema-terracota .cfi-vent{border-color:#DDD1BD; background:#FBF6EC;}
.crsl-tema-terracota .cfi-barra{background:#F1E9DA; border-bottom-color:#DDD1BD;}
.crsl-tema-terracota .cfi-pt{border-bottom-color:#D8CCB7;}
.crsl-tema-terracota .cfi-vacia{background:#F2E7D6;}
.crsl-tema-terracota .cfi-aro{background:#E9D2BA;}