/* ==========================================================================
   Fuentes de Letras — Tema 2026 (se carga después de Bootstrap y del CSS base)
   Paleta: tinta #1B123A · violeta #5B2EFF · magenta #B321E0 · rosa #FF3D8B
           sol #FFC53D · papel #FAF8FF
   ========================================================================== */
:root{
  --ink:#1B123A; --ink-2:#3A2F5C; --muted:#5E5678;
  --violet:#5B2EFF; --violet-d:#4318E0; --magenta:#B321E0; --pink:#FF3D8B; --pink-d:#E0226F;
  --sun:#FFC53D; --paper:#FAF8FF; --line:#E7E1F7; --card:#FFFFFF;
  --grad:linear-gradient(135deg,#5B2EFF 0%,#B321E0 55%,#FF3D8B 100%);
  --display:"Bricolage Grotesque","Lexend Deca",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r-lg:22px; --r-md:14px; --r-sm:10px;
}

/* ---------- Base ---------- */
body{background:var(--paper)!important;color:var(--ink)!important;font-size:1.0625rem;line-height:1.65}
::selection{background:#FFE08A;color:var(--ink)}
a{color:var(--violet-d)}
a:hover{color:var(--pink-d)}
.text-primary{color:var(--violet-d)!important}
a.text-primary:hover,a.text-primary:focus{color:var(--pink-d)!important}
.text-muted{color:var(--muted)!important}
:focus-visible{outline:3px solid var(--sun)!important;outline-offset:2px}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:none!important}
.skip-link{position:absolute;top:-200px;left:8px;right:auto;z-index:2000;background:var(--ink);color:#fff!important;padding:.5rem 1rem;border-radius:8px}
[dir=rtl] .skip-link{left:auto;right:8px}
.skip-link:focus{top:8px}
h1,h2,h3,.h4,.title,.navbar-brand{font-family:var(--display);letter-spacing:-.01em}

/* ---------- Navbar con logo ---------- */
.navbar{background:rgba(255,255,255,.92)!important;-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);box-shadow:none!important;border-bottom:1px solid var(--line)}
.navbar-brand{display:inline-flex!important;align-items:center;gap:.55rem;font-weight:800!important;font-size:1.28rem!important;color:var(--ink)!important}
.navbar-brand img{width:36px;height:36px;border-radius:10px;flex:none}
.nav-link{color:var(--ink-2)!important;font-weight:600!important;border-radius:10px}
.nav-link:hover,.nav-link:focus{color:var(--violet-d)!important;background:#F1ECFF}
.dropdown-menu{border:1px solid var(--line)!important;border-radius:var(--r-md)!important;box-shadow:0 18px 40px -18px rgba(27,18,58,.35)!important;padding:.4rem!important}
.dropdown-item{border-radius:8px;padding:.45rem .8rem;font-weight:500}
.dropdown-item:hover,.dropdown-item:focus{background:#F1ECFF;color:var(--violet-d)}
.dropdown-item.active,.dropdown-item:active{background:var(--violet)!important;color:#fff!important}

/* ---------- Hero: el título de cada página ---------- */
.container>section:first-of-type>.col.text-center{
  position:relative;overflow:hidden;margin:1.2rem 0 1.4rem;padding:2.6rem 1.25rem 2.3rem!important;
  background:var(--ink);border-radius:var(--r-lg);color:#fff;isolation:isolate}
.container>section:first-of-type>.col.text-center::before{
  content:"";position:absolute;inset:-40% -10% auto auto;width:520px;height:520px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,61,139,.55),transparent);z-index:-1}
.container>section:first-of-type>.col.text-center::after{
  content:"";position:absolute;inset:auto auto -55% -12%;width:560px;height:560px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(91,46,255,.6),transparent);z-index:-1}
.container>section:first-of-type h1.title{
  color:#fff!important;font-weight:800!important;font-size:clamp(2rem,1.2rem + 3.4vw,3.5rem)!important;line-height:1.08;margin:0 auto .7rem;max-width:18ch}
.container>section:first-of-type .col.text-center p{color:#D8D0F5!important;font-size:1.12rem;max-width:56ch;margin:0 auto}
.container>section:first-of-type .col.text-center .btn-primary{background:var(--sun)!important;border-color:var(--sun)!important;color:var(--ink)!important}

/* ---------- Generador principal (Vue, home y redes) ---------- */
#app{background:transparent!important;box-shadow:none!important;padding:0!important}
#app>.card{border-radius:var(--r-lg)!important;box-shadow:0 0 0 1px var(--line),0 24px 48px -28px rgba(27,18,58,.35)!important;background:var(--card)!important;overflow:hidden}
#app .card-header{background:#fff!important;border-bottom:1px solid var(--line)!important;padding:.9rem}
#app .card-header .btn{min-width:2.4rem;min-height:2.4rem;font-size:1.15rem;border-radius:10px;margin:.12rem;background:#F4F0FF!important;border:1px solid var(--line)!important;color:var(--ink)!important;box-shadow:none!important}
#app .card-header .btn:hover{background:#FFF3CF!important;border-color:var(--sun)!important}
#app .blue-1{background:linear-gradient(180deg,#F4F0FF,#fff)!important;padding:1.1rem 1.2rem!important}
#app input.estilo,#app .estilo{height:auto!important;padding:1rem 1.25rem!important;font-size:1.3rem!important;border:2px solid #CFC3FF!important;border-radius:16px!important;background:#fff}
#app input.estilo:focus{border-color:var(--violet)!important;box-shadow:0 0 0 4px rgba(91,46,255,.15)!important}
#app .card-footer{background:#fff!important;border-top:1px solid var(--line)!important}
/* Resultados: letras más grandes y legibles */
#result .list-group{gap:.55rem;display:flex;flex-direction:column}
#result .list-group-item{
  border:1px solid var(--line)!important;border-radius:var(--r-md)!important;background:#fff;
  font-size:1.45rem;line-height:1.5;padding:.9rem 1rem .9rem 1.15rem;word-break:break-word;
  display:flex;align-items:center;justify-content:space-between;gap:.8rem}
#result .list-group-item:hover{border-color:#CFC3FF!important;background:#FCFBFF}
#result .list-group-item .btn.float-right{float:none!important;flex:none;order:2}
#result .list-group-item:last-child{justify-content:center;flex-wrap:wrap;font-size:1rem}
.btn-success{background:var(--pink)!important;border-color:var(--pink)!important;color:#fff!important;font-weight:700!important}
.btn-success:hover{background:var(--pink-d)!important;border-color:var(--pink-d)!important}
.btn-danger{background:#fff!important;color:var(--ink)!important;border:1.5px solid var(--ink)!important;font-weight:700!important}
.btn-danger:hover{background:var(--ink)!important;color:#fff!important}
.btn-primary{background:var(--violet)!important;border-color:var(--violet)!important;font-weight:700}
.btn-primary:hover{background:var(--violet-d)!important;border-color:var(--violet-d)!important}
.btn-outline-primary{color:var(--violet-d)!important;border-color:#CFC3FF!important;border-radius:999px!important}
.btn-outline-primary:hover{background:var(--violet)!important;color:#fff!important}
.btn-outline-secondary{border-radius:10px!important}

/* ---------- Herramientas (páginas generadas) ---------- */
.out-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
.tool-box h2,.tool-box h3{color:var(--ink)!important;font-weight:800}
.tool-box{border-radius:var(--r-lg)!important;box-shadow:0 0 0 1px var(--line),0 24px 48px -30px rgba(27,18,58,.35)!important;padding:1.4rem!important}
.tool-box textarea,.tool-box input[type=text],.tool-box input[type=search]{font-size:1.2rem!important;border:2px solid #CFC3FF!important;border-radius:16px!important}
.tool-box textarea:focus,.tool-box input:focus{outline:none;border-color:var(--violet)!important;box-shadow:0 0 0 4px rgba(91,46,255,.15)!important}
.out-card{background:#fff!important;border:1px solid var(--line)!important;border-radius:var(--r-md)!important}
.out-card:hover{border-color:var(--pink)!important;box-shadow:0 10px 24px -16px rgba(255,61,139,.6)!important}
.out-card .val{font-size:1.4rem!important;line-height:1.45}
.out-card small{color:var(--muted)!important;letter-spacing:0!important;text-transform:none!important;font-weight:600}
.stat{background:#F4F0FF!important;border-radius:var(--r-md)!important}
.stat b{color:var(--ink)!important;font-family:var(--display)}
.stat span{text-transform:none!important;letter-spacing:0!important;font-weight:600}
.copy-note{color:var(--pink-d)!important}

/* ---------- Artículos: lectura cómoda ---------- */
article{background:#fff!important;border-radius:var(--r-lg)!important;box-shadow:0 0 0 1px var(--line)!important;padding:clamp(1.3rem,1rem + 2vw,3rem)!important}
article>*{max-width:76ch}
article h2{font-size:clamp(1.45rem,1.2rem + 1vw,1.95rem);font-weight:800!important;color:var(--ink);margin-top:2.2rem!important}
article h3,article .h4{font-size:1.25rem!important;font-weight:700!important;color:var(--ink-2)}
article p,article li{font-size:1.08rem;color:#2C2448}
article img{border-radius:var(--r-md);max-width:100%;height:auto}
article table{font-size:1rem}
.card{box-shadow:0 0 0 1px var(--line)!important;background:#fff!important;border-radius:var(--r-md)!important}
details.faq{border:1px solid var(--line)!important;border-radius:var(--r-md)!important;padding:1rem 1.2rem!important}
details.faq[open]{border-color:#CFC3FF!important;background:#FCFBFF}
details.faq summary{font-size:1.08rem;color:var(--ink)}
details.faq summary::marker{color:var(--pink)}

/* ---------- Tarjetas "Más herramientas" ---------- */
.tool-nav-cards a{border:1px solid var(--line)!important;border-radius:var(--r-md)!important;box-shadow:none!important}
.tool-nav-cards a:hover{border-color:var(--violet)!important;transform:none!important;box-shadow:0 12px 26px -18px rgba(91,46,255,.7)!important}
.tool-nav-cards .emoji{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:12px;background:#F4F0FF;font-size:1.35rem!important}
.tool-nav-cards strong{font-family:var(--display);font-size:1.05rem}
.tool-nav-cards small{color:var(--muted)!important}

/* ---------- Footer ---------- */
footer{background:var(--ink)!important;color:#CFC6EE;border-top:0!important;padding:2.6rem 0 1.4rem!important;margin-top:2rem}
footer strong{color:#fff}
footer a,footer a.text-primary{color:#E4DCFF!important;font-weight:500!important}
footer a:hover,footer a.text-primary:hover{color:var(--sun)!important}
footer .fbottom{border-top-color:rgba(255,255,255,.12)!important}
footer .fbrand{display:inline-flex;align-items:center;gap:.5rem;vertical-align:middle}
footer .fbrand img{width:26px;height:26px;border-radius:7px}

/* ---------- Toast "Copiado" ---------- */
.b-toast .toast{border-radius:14px!important;border:0!important;box-shadow:0 16px 36px -16px rgba(27,18,58,.5)!important}

@media (max-width:767.98px){
  body{font-size:1rem}
  .container>section:first-of-type>.col.text-center{margin:.8rem 0 1rem;padding:2rem 1rem 1.8rem!important;border-radius:18px}
  #result .list-group-item{font-size:1.3rem;padding:.8rem .9rem}
  .navbar-brand{font-size:1.12rem!important}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Filtros del generador de nicks ---------- */
.nk-chip{border-radius:999px!important;border-color:var(--line)!important}
.nk-chip:hover{border-color:var(--violet)!important}
.nk-chip.active{background:var(--violet)!important;border-color:var(--violet)!important;color:#fff!important}

/* ---------- Widget multiestilo: letras más grandes ---------- */
.ms-row{border-bottom-color:var(--line)!important;padding:.7rem 0!important}
.ms-out{font-size:1.5rem!important;line-height:1.4;color:var(--ink)}
.ms-name{font-weight:600;color:var(--muted)!important}
@media (max-width:767.98px){.ms-out{font-size:1.3rem!important}}

/* ---------- Insignia del hero ---------- */
.hero-badge{display:inline-block;margin-top:.9rem!important;padding:.35rem .9rem;border-radius:999px;background:rgba(255,197,61,.16);color:var(--sun)!important;font-weight:700;font-size:.95rem!important}
.inv-row .ms-name small{color:var(--muted)}
.inv-row{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;border-bottom:1px solid var(--line);padding:.7rem 0}
.inv-row .ms-name small{display:block;font-weight:500}
.inv-row .ms-out{font-size:1rem!important;color:var(--ink-2)}

/* ---------- Controles de herramientas (imagen / moldes) ---------- */
.img-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:.7rem;margin:.9rem 0}
.img-grid label{display:flex;flex-direction:column;gap:.3rem;font-weight:600;font-size:.9rem;margin:0}
.img-grid input[type=color]{height:42px;padding:.2rem;width:100%}

/* ==========================================================================
   MODO OSCURO — [data-theme="dark"] (sigue al sistema; el usuario puede cambiarlo)
   ========================================================================== */
.theme-toggle{border:1px solid var(--line);background:transparent;border-radius:12px;width:42px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;font-size:1.15rem;cursor:pointer;line-height:1;padding:0}
.theme-toggle::before{content:"🌙"}
[data-theme="dark"] .theme-toggle::before{content:"☀️"}
@media (max-width:767.98px){.navbar .theme-toggle{order:1;margin-left:auto;margin-right:.5rem}.navbar .navbar-toggler{order:2}.navbar .navbar-collapse{order:3}}
@media (min-width:768px){.navbar .theme-toggle{order:3;margin-left:.6rem}.navbar .navbar-collapse{order:2}}

[data-theme="dark"]{--ink:#ECE8FF;--ink-2:#CFC6F2;--muted:#A79FC8;--paper:#0E0A1F;--line:#2C2450;--card:#17122E;--violet-d:#A58BFF;--pink-d:#FF7AAE;color-scheme:dark}
[data-theme="dark"] body{background:var(--paper)!important;color:var(--ink)!important}
[data-theme="dark"] ::selection{background:#5B2EFF;color:#fff}
[data-theme="dark"] .navbar{background:rgba(18,12,38,.92)!important;border-bottom-color:var(--line)}
[data-theme="dark"] .navbar-toggler{border-color:var(--line)!important}
[data-theme="dark"] .navbar-toggler-icon{filter:invert(1)}
[data-theme="dark"] .nav-link:hover,[data-theme="dark"] .nav-link:focus,[data-theme="dark"] .dropdown-item:hover,[data-theme="dark"] .dropdown-item:focus{background:#241C45!important;color:#fff!important}
[data-theme="dark"] .dropdown-item{color:var(--ink)!important}
[data-theme="dark"] .tool-box,[data-theme="dark"] article,[data-theme="dark"] .card,[data-theme="dark"] .card-body,
[data-theme="dark"] .list-group-item,[data-theme="dark"] .tool-nav-cards a,[data-theme="dark"] .tool-card,[data-theme="dark"] details,
[data-theme="dark"] .out-card,[data-theme="dark"] .stat,[data-theme="dark"] .ex-item,[data-theme="dark"] .nk-chip,
[data-theme="dark"] .dropdown-menu,[data-theme="dark"] .back-home a,[data-theme="dark"] .jumbotron,[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light{background:var(--card)!important;color:var(--ink)!important;border-color:var(--line)!important}
[data-theme="dark"] .nk-chip.active{background:var(--violet)!important;color:#fff!important;border-color:var(--violet)!important}
[data-theme="dark"] textarea,[data-theme="dark"] select,[data-theme="dark"] .form-control,
[data-theme="dark"] input:not([type=color]):not([type=checkbox]):not([type=range]):not([type=radio]){background:#0F0A22!important;color:var(--ink)!important;border-color:#3A2F66!important}
[data-theme="dark"] textarea::placeholder,[data-theme="dark"] input::placeholder{color:#8E86B0!important}
[data-theme="dark"] .btn-light,[data-theme="dark"] .btn-outline-secondary,[data-theme="dark"] .btn-secondary{background:#221A40!important;color:var(--ink)!important;border-color:#3A2F66!important}
[data-theme="dark"] .btn-outline-primary{color:#C9B8FF!important;border-color:#6A4BFF!important}
[data-theme="dark"] .btn-outline-primary:hover{background:var(--violet)!important;color:#fff!important}
[data-theme="dark"] .ms-row,[data-theme="dark"] .nk-row,[data-theme="dark"] .inv-row,[data-theme="dark"] hr,[data-theme="dark"] td,[data-theme="dark"] th{border-color:var(--line)!important}
[data-theme="dark"] .ms-name,[data-theme="dark"] .text-muted,[data-theme="dark"] small{color:var(--muted)!important}
[data-theme="dark"] .text-dark,[data-theme="dark"] h1,[data-theme="dark"] h2,[data-theme="dark"] h3,[data-theme="dark"] h4,[data-theme="dark"] .h4,[data-theme="dark"] strong,[data-theme="dark"] summary{color:var(--ink)!important}
[data-theme="dark"] table{color:var(--ink)!important}
[data-theme="dark"] code{background:#241C45!important;color:#FFC53D!important}
[data-theme="dark"] .nk-star{color:#5F5785}
[data-theme="dark"] .nk-star.on{color:#FFC53D}
/* El papel de los moldes y la vista previa de imagen se mantienen claros */
[data-theme="dark"] .mold-page{background:#fff!important;border-color:#fff!important}
[data-theme="dark"] p,[data-theme="dark"] li,[data-theme="dark"] dd,[data-theme="dark"] dt,[data-theme="dark"] label,
[data-theme="dark"] blockquote,[data-theme="dark"] figcaption,[data-theme="dark"] .lead,[data-theme="dark"] .subtitle{color:var(--ink-2)!important}
[data-theme="dark"] article a:not(.btn),[data-theme="dark"] .tool-box a:not(.btn){color:#B9A5FF!important}
[data-theme="dark"] .hero p,[data-theme="dark"] .hero .lead,[data-theme="dark"] .hero .subtitle,[data-theme="dark"] footer p,[data-theme="dark"] footer li{color:inherit!important}
[data-theme="dark"] .container>section:first-of-type>.col.text-center{background:#1E1542;border:1px solid #33285E}
[data-theme="dark"] .skip-link{background:#1B123A}
[data-theme="dark"] footer{background:#08051A!important;border-top:1px solid #241C45!important}
[data-theme="dark"] .container>section:first-of-type .col.text-center .btn-primary{color:#1B123A!important}
[data-theme="dark"] #app .card-header,[data-theme="dark"] .card-header{background:#130E29!important;border-color:var(--line)!important}
[data-theme="dark"] #app .card-header .btn{background:#221A40!important;color:var(--ink)!important;border-color:#3A2F66!important}
[data-theme="dark"] .btn-danger{background:transparent!important;color:var(--ink)!important;border-color:#8E86B0!important}
[data-theme="dark"] .btn-danger:hover{background:#ECE8FF!important;color:#1B123A!important}
[data-theme="dark"] #app .blue-1,[data-theme="dark"] .blue-1{background:linear-gradient(180deg,#1E1542,#17122E)!important}
[data-theme="dark"] #app .btn-outline-primary,[data-theme="dark"] #app .btn-link{color:#C9B8FF!important;border-color:#6A4BFF!important;background:transparent!important}
[data-theme="dark"] .card-footer,[data-theme="dark"] .modal-content,[data-theme="dark"] .popover,[data-theme="dark"] .toast{background:#130E29!important;border-color:var(--line)!important;color:var(--ink)!important}
[data-theme="dark"] #app .card-footer{background:#130E29!important}
[data-theme="dark"] #app .card-header .btn:hover{background:#3A2F66!important;color:#fff!important}
[data-theme="dark"] #app input.estilo,[data-theme="dark"] #app .estilo{background:#0F0A22!important;border-color:#5B2EFF!important;color:var(--ink)!important}
[data-theme="dark"] #app .list-group-item{background:var(--card)!important;color:var(--ink)!important;border-color:var(--line)!important}
@media (max-width:767.98px){
  .navbar>.container,.navbar{flex-wrap:wrap}
  .navbar-brand{min-width:0;max-width:calc(100% - 112px);overflow:hidden;white-space:nowrap;font-size:1.05rem!important;margin-right:0}
  .navbar-brand img{width:32px;height:32px}
}
@media (max-width:359.98px){.navbar-brand{font-size:.95rem!important}}

/* Aviso flotante y subtítulos compartidos (kaomojis, decorador de nombres) */
.kao-h{font-size:1.05rem;margin:1rem 0 .5rem;font-weight:700}
.kao-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(120%);background:#1B123A;color:#fff;padding:.6rem 1.1rem;
  border-radius:999px;font-weight:600;opacity:0;transition:.25s;z-index:1080;max-width:92vw;text-align:center;pointer-events:none}
.kao-toast.show{transform:translateX(-50%) translateY(0);opacity:1}
[data-theme="dark"] .kao-toast{background:#ECE8FF;color:#1B123A!important}
.bio-cta{background:linear-gradient(135deg,#F4F0FF,#FFF0F6);border:1px solid var(--line);border-radius:14px;padding:.8rem 1rem;font-size:1.02rem}
[data-theme="dark"] .bio-cta{background:#1E1542!important}
.bio-tool .form-control{font-size:1rem!important;padding:.45rem .7rem!important;height:auto!important;min-height:2.6rem;border-radius:10px!important}

/* Menú de escritorio compacto entre 768 y 1199 px (tablets y laptops pequeñas): evita que se parta en varias
   filas y que el botón de tema se salga de la pantalla. El logo queda sin texto y los enlaces sin salto de línea. */
@media (min-width:768px) and (max-width:1199.98px){
  .navbar-brand{font-size:0!important;gap:0!important;margin-right:.4rem!important}
  .navbar-brand img{width:34px!important;height:34px!important}
  .navbar .navbar-nav{flex-wrap:nowrap}
  .navbar .nav-link{font-size:.9rem!important;padding:.45rem .5rem!important;white-space:nowrap}
}
/* Tablets en vertical: los 4 enlaces de redes se ocultan del menú (siguen en el HTML y en el contenido) */
@media (min-width:768px) and (max-width:991.98px){
  .navbar .navbar-nav>.nav-item:not(.dropdown):nth-child(-n+4){display:none}
}
/* Artículo: la columna de lectura (76ch) queda centrada dentro de la tarjeta, no pegada a un lado */
article>*{max-width:100%!important;margin-left:0!important;margin-right:0!important}
/* Nada dentro del contenido puede salirse de su recuadro */
article img,article picture,article video,article iframe,article svg,.tool-box img,.tool-box picture{max-width:100%!important;height:auto!important}
article picture,article picture img{display:block}
article table{display:block;max-width:100%;overflow-x:auto}
article pre,article code{white-space:pre-wrap;word-break:break-word}
article,.tool-box{overflow-wrap:anywhere}
article>ul,article>ol{padding-left:1.4rem}
[dir=rtl] article>ul,[dir=rtl] article>ol{padding-left:0;padding-right:1.4rem}
/* Modo oscuro: los iframes (anuncios de AdSense) usan el esquema normal; si no coincide con su documento, el navegador los pinta con fondo blanco opaco */
[data-theme="dark"] iframe,[data-theme="dark"] ins.adsbygoogle{color-scheme:normal}