/* Mismo marco editorial que el home. La paleta del lienzo sigue siendo del pueblo. */
:root{--com-naranja:#F66227;--com-violeta:#9E6FF8;--com-negro:#1a1a1a;--com-header:#202020;--com-alto:var(--site-header-height,78px)}
#portada{background:var(--com-negro)}#portada.portada--sale{background:transparent}
html,body{background:var(--com-negro)}



#portada{top:var(--com-alto)}.bloque{background:var(--com-negro);color:#f5f2eb;gap:22px;padding:24px}.bloque .titulo{font-size:clamp(28px,4.3vw,66px);font-weight:500;line-height:1.05;letter-spacing:-.04em}.bloque .bajada{font-size:14px;line-height:1.5;max-width:52ch;color:#bbb;opacity:1}
.bloque .boton{background:var(--com-naranja);border-color:var(--com-naranja);color:var(--com-negro);padding:16px 26px;opacity:1;font-weight:500;position:relative;min-height:48px}
.bloque .boton::before,.bloque .boton::after{content:'';width:10px;height:10px;position:absolute;background:var(--com-naranja);left:-10px;top:0;transition:transform .2s ease-out}.bloque .boton::after{left:auto;right:-10px;top:auto;bottom:0}.bloque .boton:hover{background:var(--com-violeta);border-color:var(--com-violeta);color:var(--com-negro)}.bloque .boton:hover::before{transform:translateY(38px)}.bloque .boton:hover::after{transform:translateY(-38px)}
#taller{height:calc(100% - var(--com-alto));top:var(--com-alto)}
.barra{background:var(--com-header);color:#eee;--tinta:#eee;--fondo:#202020;--suave:#bbb;--linea:#454545;--toque:#ffffff12;--toque-fuerte:#ffffff22}
.barra .marca{display:none}.barra .barra__sub{color:var(--com-violeta);font-size:11px;letter-spacing:.07em}
.rail{background:#202020;--tinta:#eee;--fondo:#202020;--suave:#bbb;--linea:#4b4b4b;--toque:#ffffff12;--toque-fuerte:#ffffff22;color:#eee}
.rail .pueblos button[aria-pressed=true]{background:#35303f;border-color:var(--com-violeta)}.rail .rotulo{color:var(--com-violeta)}
.rail .segm button[aria-pressed=true]{background:var(--com-naranja);color:var(--com-negro)}.rail input,.rail select{accent-color:var(--com-naranja)}
.acciones .accion{background:var(--com-header);color:var(--com-naranja);border:1px solid var(--com-header);border-radius:0;box-shadow:4px 6px 12px #0003;position:relative}
.acciones .accion--fuerte,.acciones .accion--compartir{background:var(--com-naranja);color:var(--com-negro)}.acciones .accion--compartir{width:auto;padding:0 18px;gap:8px;display:flex;align-items:center;font-size:12px;font-weight:500}
.acciones .accion::before{content:'';position:absolute;right:-6px;top:-6px;width:7px;height:7px;background:var(--com-header);transition:transform .15s}.acciones .accion:active::before{transform:translate(-12px,12px)}
.acciones .accion:hover{background:var(--com-violeta);color:var(--com-negro)}.icono--falso{display:none}
.bloque .boton,.compartir__acciones .boton,.acciones .accion--fuerte,.acciones .accion--compartir{--pixel-base:var(--com-naranja);--pixel-tinta:var(--com-negro)}
.acciones .accion{--pixel-base:var(--com-header);--pixel-tinta:var(--com-naranja)}
.acciones .accion--fuerte,.acciones .accion--compartir{--pixel-base:var(--com-naranja);--pixel-tinta:var(--com-negro)}
.compartir{border:0;padding:30px;background:var(--com-header);color:#f5f2eb;max-width:620px;width:calc(100% - 32px);max-height:calc(100svh - 32px);overflow:auto;margin:auto;font-family:'Space Grotesk',sans-serif;box-shadow:12px 20px 70px #0006}
.compartir::backdrop{background:#000b}.compartir__cabecera{display:flex;justify-content:space-between;align-items:center;color:var(--com-violeta);font-size:11px;letter-spacing:.06em;margin-bottom:14px}.compartir__cabecera .icono{color:var(--com-naranja);border:0;min-width:40px;min-height:40px}
.compartir h2{font-weight:400;font-size:32px;line-height:1.15;letter-spacing:-.03em;margin:0 0 24px}.compartir__cuerpo{display:grid;grid-template-columns:180px 1fr;gap:24px;align-items:center}.compartir canvas{width:100%;height:auto;image-rendering:pixelated}.compartir label{font-size:13px;display:block}.compartir input{display:block;width:100%;margin-top:8px;padding:12px;border:1px solid #696969;background:#1a1a1a;color:white;font:inherit;font-size:14px;border-radius:0}
.compartir__cuerpo p{font-size:12px;line-height:1.5;color:#bbb;margin-top:14px}.compartir__nota{font-size:12px;line-height:1.55;color:#bbb;margin:24px 0}.compartir__acciones{display:flex;flex-wrap:wrap;gap:12px}.compartir .boton{color:var(--com-negro);background:var(--com-naranja);border:0;padding:14px 18px;min-height:44px;font-weight:500;letter-spacing:0}.compartir #enlace-simbolo{background:var(--com-violeta)}.compartir .boton:disabled{opacity:.5;cursor:default}.compartir__tablero{display:inline-flex;gap:8px;align-items:center;color:var(--com-violeta);font-size:13px;margin-top:14px}.compartir__tablero .ic{transform:rotate(180deg)}#compartir-estado{font-size:13px;line-height:1.5;color:#eee;margin-top:16px}.enlace-manual{margin-top:16px}
:is(.compartir,.bloque,.barra,.rail,.acciones) :is(button,a,input,select):focus-visible{outline:3px solid var(--com-violeta);outline-offset:4px}
@media(max-width:700px){.bloque{gap:14px;padding:16px}.bloque .titulo{font-size:clamp(24px,6vw,40px)}.bloque .bajada{font-size:12px;line-height:1.4}.bloque .boton{padding:12px 20px;min-height:44px}.compartir{padding:22px}.compartir h2{font-size:26px}.compartir__cuerpo{grid-template-columns:110px 1fr;gap:16px}.compartir__acciones .boton{flex:1;justify-content:center;font-size:11px;padding:12px}.rail--izq{top:var(--com-alto)}.barra .barra__sub{display:none}}
@media(prefers-reduced-motion:reduce){.bloque .boton::before,.bloque .boton::after,.acciones .accion::before{transition:none}}
@media(max-width:760px){.rail--der .paleta button,.rail--der .paleta .mas{aspect-ratio:auto;min-height:36px;height:36px}.rail--der{gap:6px}.rail--izq{background:#202020;top:var(--com-alto)}}
@font-face{font-family:Archivo;font-style:normal;font-weight:400;font-display:swap;src:url('../../assets/ranking/archivo-regular.ttf') format('truetype')}
/* Overlays de confirmación: mismo sistema en el generador de símbolos y en eventos */
dialog.confirmar-dialogo{box-sizing:border-box;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:30px;border:0;border-radius:0;background:#222;color:#f5f2eb;box-shadow:12px 20px 70px #0008;font-family:'Space Grotesk',Arial,sans-serif;overflow:auto}
dialog.confirmar-dialogo::backdrop{background:rgb(16 16 16 / .66);backdrop-filter:blur(5px)}
.confirmar-dialogo__rotulo{margin:0 0 12px;font:500 12px/1.2 'Space Grotesk',Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#cbb0f7}
.confirmar-dialogo h2{margin:0 0 16px;font:500 28px/1.1 'Space Grotesk',Arial,sans-serif;letter-spacing:-.02em;color:#e4fe44}
.confirmar-dialogo__texto{margin:0;font:400 15px/1.5 Archivo,Arial,sans-serif;color:#ddd}
.confirmar-dialogo__acciones{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.confirmar-boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:0;width:100%;height:52px;padding:0 16px;border:2px solid #f66227;border-radius:0;background:#f66227;color:#1a1a1a;font:500 15px/1 'Space Grotesk',Arial,sans-serif;letter-spacing:0;text-transform:none;box-shadow:none;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease}
.confirmar-boton svg{display:block;width:20px;height:20px;flex:none;fill:currentColor}
.confirmar-boton--cancelar{background:transparent;border-color:#6b6b6b;color:#f5f2eb}
.confirmar-boton--cancelar:hover{background:#d93a2f;border-color:#d93a2f;color:#fff}
.confirmar-boton--aceptar:hover{background:#6a40bc;border-color:#6a40bc;color:#fff}
.confirmar-boton:focus-visible{outline:3px solid #b58aff;outline-offset:3px}
@media(max-width:560px){dialog.confirmar-dialogo{padding:22px}.confirmar-dialogo h2{font-size:24px}}
html[data-color=contraste] dialog.confirmar-dialogo{background:#fff;color:#000;border:2px solid #111}
html[data-color=contraste] .confirmar-dialogo :is(h2,p){color:#000}
/* El generador suma la vista previa del símbolo junto al texto */
.confirmar-publicar__cuerpo{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center}
.confirmar-publicar canvas{width:100%;height:auto;image-rendering:pixelated}
@media(max-width:560px){.confirmar-publicar__cuerpo{grid-template-columns:72px 1fr;gap:14px}}