/* Tu panteón de la izquierda · WeTheComuna
   Una sola columna: cabecera, progreso, cinco niveles, dos zonas y herramientas.
   Paleta de la marca: rojo, crema y negro. Tema único y deliberadamente claro. */

@font-face{font-family:'Rubik Mono One';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/rubik-mono-one-latin-400-normal.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}
@font-face{font-family:'Rubik Mono One';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/rubik-mono-one-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-sans-condensed-latin-400-normal.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}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:400;font-display:swap;src:url('assets/fonts/ibm-plex-sans-condensed-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ibm-plex-sans-condensed-latin-600-normal.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}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('assets/fonts/ibm-plex-sans-condensed-latin-ext-600-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/ibm-plex-sans-condensed-latin-700-normal.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}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/ibm-plex-sans-condensed-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --rojo:#D2231B; --rojo-osc:#A51D36; --negro:#1F1A17; --crema:#F1E8D5; --papel:#FBF6EC; --arena:#E4D8BF; --gris:#6E6258; --linea:#CDBF9F;
  --display:'Rubik Mono One','Arial Black',Impact,sans-serif;
  --texto:'IBM Plex Sans Condensed','Arial Narrow',system-ui,sans-serif;
  --tarjeta:84px;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--crema);color:var(--negro);font-family:var(--texto);font-size:16px;line-height:1.45;
  padding-inline:16px;padding-block:0 32px}
body.con-selector{padding-bottom:230px}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--rojo);outline-offset:2px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--negro);color:var(--papel);padding:8px 12px;z-index:50}
.skip:focus{left:16px}
[hidden]{display:none!important}

/* Cabecera */
.cabecera,#app,.pie{max-width:980px;margin-inline:auto}
.cabecera{padding-top:calc(20px + env(safe-area-inset-top,0px));text-align:left}
.marca{margin:0;font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--rojo-osc)}
h1{font-family:var(--display);font-weight:400;font-size:clamp(26px,7.2vw,46px);line-height:1.02;color:var(--rojo);margin:4px 0 12px;text-shadow:3px 3px 0 var(--negro);text-wrap:balance}
.pregunta{font-size:clamp(18px,4.6vw,23px);font-weight:700;line-height:1.25;margin:0 0 8px;max-width:38ch;text-wrap:balance}
.intro{margin:0 0 12px;max-width:64ch;color:#3A332E}
.enlaces-cabecera{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:16px}
.enlace{background:none;border:0;padding:4px 0;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer;color:var(--negro)}

/* Avisos y lista ajena */
.aviso{background:var(--papel);border:2px solid var(--negro);border-left:8px solid var(--rojo);padding:10px 12px;margin:0 0 14px;font-weight:600}
.ajena{background:var(--negro);color:var(--papel);padding:14px;margin:0 0 14px;border-left:8px solid var(--rojo)}
.ajena p{margin:0 0 10px;font-weight:700}
.fila-botones{display:flex;flex-wrap:wrap;gap:8px}

/* Progreso */
.progreso{margin:0 0 14px}
.barra{display:flex;height:10px;background:var(--papel);border:2px solid var(--negro);overflow:hidden}
.barra i{display:block;height:100%}
.b-val{background:var(--rojo)} .b-con{background:repeating-linear-gradient(45deg,var(--negro) 0 3px,var(--papel) 3px 6px)}
.cifras{list-style:none;display:flex;flex-wrap:wrap;gap:4px 18px;margin:6px 0 0;padding:0;font-size:14px;font-weight:600}
.cifras b{font-family:var(--display);font-weight:400;font-variant-numeric:tabular-nums}

/* Tablero */
.tablero{display:flex;flex-direction:column;gap:6px;outline:none}
.zona{display:grid;grid-template-columns:150px minmax(0,1fr);background:var(--papel);border:2px solid var(--negro);min-height:calc(var(--tarjeta) * 1.32 + 16px)}
.zona-cab{display:flex;flex-direction:column;justify-content:center;gap:2px;padding:8px 10px;color:#fff;border-right:2px solid var(--negro)}
.zona-letra{font-family:var(--display);font-size:34px;line-height:1}
.zona-nombre{font-size:14px;font-weight:700;line-height:1.15}
.zona-desc{font-size:12px;line-height:1.25;opacity:.85}
.zona-lista{list-style:none;margin:0;padding:8px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:6px;min-width:0;position:relative}
.zona-vacia{align-self:center;color:var(--gris);font-size:14px;font-weight:600;padding:4px 6px}
.zona.extra{margin-top:10px}
.zona.extra .zona-cab{background:var(--arena);color:var(--negro)}
.zona.pendientes{border-style:dashed}
.zona.destino{box-shadow:0 0 0 3px var(--rojo)}
.zona.destino .zona-vacia{color:var(--rojo);font-weight:700}
body.seleccionando .zona{cursor:pointer}
body.seleccionando .zona:hover,.zona.arrastre{background:#FFF0E8}

/* Tarjetas */
.tarjeta{position:relative;width:var(--tarjeta);flex:none}
.t-main{display:flex;flex-direction:column;align-items:stretch;width:100%;padding:0;border:2px solid var(--negro);background:#fff;cursor:pointer;text-align:center;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.t-retrato{display:block;aspect-ratio:4/5;background:var(--arena);position:relative;overflow:hidden;border-bottom:2px solid var(--negro)}
.t-retrato img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1)}
.iniciales{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:22px;color:var(--papel)}
.t-nombre{display:block;font-size:12px;font-weight:700;line-height:1.12;padding:4px 3px 5px;min-height:34px;overflow-wrap:anywhere;hyphens:auto}
.t-info{position:absolute;top:3px;right:3px;width:26px;height:26px;border-radius:50%;border:2px solid var(--negro);background:var(--papel);font-family:var(--display);font-size:12px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.t-info:hover{background:var(--negro);color:var(--papel)}
.tarjeta.sel .t-main{outline:4px solid var(--rojo);outline-offset:1px}
.tarjeta.arrastrando{opacity:.35}
.fantasma{position:fixed;left:0;top:0;z-index:40;pointer-events:none;box-shadow:6px 6px 0 rgba(31,26,23,.35);rotate:-3deg}
body.arrastrando-tarjeta{cursor:grabbing;user-select:none;-webkit-user-select:none}
.t-main{user-select:none;-webkit-user-select:none}
.tarjeta.insertar-antes::before{content:"";position:absolute;left:-5px;top:0;bottom:0;width:4px;background:var(--rojo)}
.tablero.solo-lectura .t-main{cursor:default}

/* Herramientas */
.herramientas{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.btn{background:var(--rojo);color:var(--papel);border:2px solid var(--negro);box-shadow:3px 3px 0 var(--negro);padding:10px 14px;font-weight:700;cursor:pointer;line-height:1.2;min-height:44px}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--negro)}
.btn-sec{background:var(--papel);color:var(--negro)}
.btn-peligro{background:var(--papel);color:var(--rojo-osc);margin-left:auto}
.btn-mini{padding:8px 10px;min-height:40px;font-size:14px}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
.pie{margin-top:28px;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gris)}

/* Barra de destino */
.selector{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--negro);color:var(--papel);border-top:4px solid var(--rojo);padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))}
.sel-int{max-width:980px;margin:0 auto}
.sel-titulo{margin:0;font-weight:700;font-size:16px}
.sel-actual{margin:0 0 8px;font-size:13px;opacity:.8}
.sel-niveles{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.sel-niveles .nv{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px solid var(--papel);color:#fff;padding:6px 2px;cursor:pointer;min-height:56px;justify-content:center}
.sel-niveles .nv b{font-family:var(--display);font-weight:400;font-size:20px;line-height:1}
.sel-niveles .nv span{font-size:11px;font-weight:600;line-height:1.1;text-align:center;hyphens:manual;max-width:100%}
.sel-niveles .nv.zona-x{grid-column:span 5;flex-direction:row;gap:8px;min-height:44px;background:var(--papel);color:var(--negro);border-color:var(--papel)}
.sel-niveles .nv.zona-x span{font-size:14px;font-weight:700}
.sel-niveles .nv[aria-current="true"]{box-shadow:inset 0 0 0 3px var(--negro),0 0 0 2px var(--rojo)}
.sel-extra{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}

/* Diálogos */
.dlg{border:3px solid var(--negro);box-shadow:8px 8px 0 var(--rojo-osc);background:var(--papel);color:var(--negro);padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 32px)}
.dlg::backdrop{background:rgba(31,26,23,.6)}
.dlg-peq{width:min(420px,calc(100vw - 24px))}
.dlg-int{padding:18px 18px 16px;overflow:auto;max-height:calc(100dvh - 38px)}
.dlg h2{font-family:var(--display);font-weight:400;font-size:20px;line-height:1.1;margin:0 0 10px;color:var(--rojo);text-wrap:balance}
.dlg h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rojo-osc);margin:16px 0 4px}
.dlg p,.dlg li{max-width:65ch}
.dlg ul{padding-left:20px;margin:4px 0}
.dlg-cerrar{position:sticky;top:0;float:right;margin:-6px -6px 0 8px;width:40px;height:40px;border:2px solid var(--negro);background:var(--papel);font-size:22px;line-height:1;cursor:pointer}
.ficha-cab{display:grid;grid-template-columns:96px minmax(0,1fr);grid-template-areas:'r n' 'r m';gap:4px 14px;align-items:start;margin-bottom:6px}
.ficha-cab .f-nombre{grid-area:n;padding-right:44px;margin:0}
.ficha-cab .t-retrato{grid-area:r}
.ficha-cab .f-meta{grid-area:m}
.ficha-cab .t-retrato{border:2px solid var(--negro)}
.ficha-cab .iniciales{font-size:28px}
.ficha-meta{font-size:14px;color:#3A332E;margin:2px 0}
.chip{display:inline-block;font-size:12px;font-weight:700;border:2px solid var(--negro);padding:2px 8px;margin-top:6px;background:#fff}
.fuentes{font-size:14px}
.fuentes a{color:var(--rojo-osc);overflow-wrap:anywhere}
.nota-retrato{font-size:12px;color:var(--gris);margin-top:4px}
.dlg-acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.img-prev{display:block;max-width:100%;height:auto;border:2px solid var(--negro);margin:8px 0}
.trad{margin:0 0 10px}.trad b{display:block}

/* Móvil */
@media (max-width:620px){
  :root{--tarjeta:74px}
  .zona{grid-template-columns:minmax(0,1fr)}
  .zona-cab{flex-direction:row;align-items:center;gap:10px;border-right:0;border-bottom:2px solid var(--negro);padding:6px 10px}
  .zona-letra{font-size:24px}
  .zona-desc{display:none}
  .btn-peligro{margin-left:0}
  .iniciales{font-size:18px}
  .ficha-cab{grid-template-columns:64px minmax(0,1fr);grid-template-areas:'n n' 'r m';gap:10px}
  .ficha-cab .iniciales{font-size:20px}
  .dlg h2{font-size:18px}
}
@media (max-width:360px){
  :root{--tarjeta:66px}
  .t-nombre{font-size:11px}
  .sel-niveles .nv span{font-size:10px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

.navegacion{display:flex;justify-content:space-between;gap:20px;margin-bottom:18px;font-weight:700}.navegacion a{color:var(--negro)}
#resumenProgreso{font-weight:700;margin:0 0 6px}.selector{max-height:80dvh;overflow:auto}.t-info{width:32px;height:32px}.nota-retrato a{color:var(--rojo-osc)}

.nivel[data-zona="A"] .zona-cab,.nivel[data-zona="B"] .zona-cab,.nivel[data-zona="C"] .zona-cab{color:var(--negro)}

.t-retrato img{object-position:50% 20%}