/* Añadidos de la web pública (sobre css/hub.css, copia del editor). */

/* Fuente Nunito servida desde la propia web (sin Google Fonts). Licencia: fonts/OFL.txt */
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Nada de edición, exportación ni recarga desde WikiDex */
#mode, .menu, .btn.add, [data-a="exp"], [data-a="bksnooze"], [data-a="wdre"],
[data-a="imp"], [data-a="icons"] { display: none !important; }

/* Cabecera (mejora 5). La del editor tiene más botones y se reparte en varias filas por
   debajo de 1540 px; la pública, con menos, se ordena así:
   - 761–1099 px: dos filas ordenadas, arriba logo con nombre, buscador y botones; abajo las
     secciones (antes los botones de tema/idioma caían sueltos en una segunda fila).
   - desde 1400 px: cabe todo en una fila con el nombre junto al logo. */
@media(min-width:761px) and (max-width:1099px){
  .nav{row-gap:6px}
  .nav .brand span{display:inline}
  .nav .srch{margin-left:auto}
  .nav .links{order:10;flex-basis:100%;justify-content:center;padding-top:6px;border-top:1px solid rgba(255,255,255,.12)}
  /* la cabecera mide ~110 px: que el sumario no deje los títulos debajo de ella */
  .sec,.art h2,.lart h3{scroll-margin-top:132px}
  .mgblk{scroll-margin-top:144px}
}
@media(min-width:1400px){
  .nav .brand span{display:inline;white-space:nowrap}
}

/* Enlaces reales sobre las tarjetas (mejora 10, js/publico.js): invisibles y por encima del
   contenido, salvo los enlaces que la tarjeta ya lleva dentro (p. ej. DeviantArt) */
.con-enlace{position:relative}
.enlace-tarjeta{position:absolute;inset:0;z-index:1;border-radius:inherit}
.enlace-tarjeta:focus{outline:none}
.pk a.da{position:relative;z-index:2}

/* «Saltar al contenido» (mejora 14, js/publico.js): solo se ve al llegar con el teclado */
.saltar{position:fixed;left:12px;top:-80px;z-index:100;background:#fff;color:#1d2240;padding:10px 18px;border-radius:999px;font-weight:900;text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.3)}
.saltar:focus{top:12px}
#hero h1:focus{outline:none}
#hero h1:focus-visible{outline:3px solid #ffb400;outline-offset:4px;border-radius:6px}

/* Pie: aviso de proyecto fan, encima del aviso de derechos del hub */
.legal .aviso-fan { font-weight: 700; }

/* Disuadir de descargar o arrastrar los diseños */
img, canvas, video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Campana de novedades (js/publico.js) */
.cmp-b{position:relative;font-size:1rem;padding:0 8px}
.cmp-n{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:#e3350d;color:#fff;font-size:.7rem;font-weight:900;line-height:19px;text-align:center;box-shadow:0 0 0 2px var(--nav)}
.cmp-n[hidden]{display:none}
.cmp-panel{position:fixed;right:16px;z-index:60;width:min(360px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;background:var(--card);color:var(--txt);border:1px solid var(--line);border-radius:14px;box-shadow:0 12px 32px rgba(0,0,0,.28)}
.cmp-t{font-weight:900;padding:12px 14px;border-bottom:1px solid var(--line);background:color-mix(in srgb,#0f8a5f 10%,var(--card))}
.cmp-f{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line);color:var(--txt);text-decoration:none}
.cmp-f:hover{background:var(--soft)}
.cmp-f img,.cmp-ic{width:38px;height:38px;object-fit:contain;flex:none;display:grid;place-items:center;font-size:1.3rem}
.cmp-f>span:last-child{display:grid;min-width:0}
.cmp-f b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cmp-f small{color:var(--mut);font-weight:700;font-size:.75rem}
.cmp-nota>span:last-child{display:block;font-size:.88rem}
.cmp-mas,.cmp-nada{margin:0;padding:10px 14px;color:var(--mut);font-weight:700;font-size:.85rem}
.cmp-todas{display:block;padding:11px 14px;font-weight:900;color:#0f8a5f;text-decoration:none;text-align:center}
.cmp-todas:hover{background:var(--soft)}
/* En móvil la campana queda siempre a la vista, junto al menú ☰ (no dentro de él) */
@media(max-width:760px){
  .nav .tbtn.cmp-b,.nav.open .tbtn.cmp-b{display:inline-flex;align-items:center;justify-content:center;order:3;flex:none;height:44px;min-width:44px}
}

/* Botones y enlaces de al menos 44 px de alto en el móvil (mejora 14). Los enlaces dentro
   del texto no cuentan. Las migas y el sumario solo amplían la zona que se puede tocar
   (relleno + margen negativo), sin mover nada. */
@media(max-width:760px){
  .nav .navback,.nav .navtog{width:44px;height:44px}
  .nav .brand{min-width:44px;min-height:44px;justify-content:center}
  .nav .tbtn{min-height:44px}
  .nav .srch input,.fbar input,.fbar select{min-height:44px}
  .tabs button{padding-top:11px;padding-bottom:11px}
  .plk{padding-top:12px;padding-bottom:12px}
  .btn.sm{padding-top:10px;padding-bottom:10px}
  .szt button{padding-top:10.5px;padding-bottom:10.5px}
  .tdl{min-height:44px;align-items:center}
  #hero .acts .btn{min-height:44px}
  .crumb button{padding-top:13px;padding-bottom:13px;margin-top:-13px;margin-bottom:-13px}
  nav.toc button{padding-top:10px;padding-bottom:10px;margin-top:-8px;margin-bottom:-8px}
}