/* ============================================================
   Archivo · La Revista Visión
   Tokens copiados del sistema vd- de larevistavision.com
   ============================================================ */

:root{
  --vd-ink:     #15130f;
  --vd-paper:   #fdfcfa;
  --vd-paper-2: #f4f2ed;
  --vd-rule:    #e3ded3;
  --vd-brand:   #e00000;
  --vd-mute:    #8a8576;
  --vd-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --vd-sans:  'Hind', Arial, sans-serif;

  /* alias internos del archivo */
  --rojo:var(--vd-brand);
  --tinta:var(--vd-ink);
  --tinta-suave:var(--vd-mute);
  --papel:var(--vd-paper);
  --papel-hueso:var(--vd-paper-2);
  --linea:var(--vd-rule);
  --sombra:0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.10);
  --ancho:1140px;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--vd-paper);
  color:var(--vd-ink);
  font-family:var(--vd-sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none}

/* ---------- Cabecera del sitio (copiada de index.php) ---------- */

.vd-eyebrow{
  font-family:var(--vd-sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
}

.vd-datebar{
  background:var(--vd-ink);
  color:#cfcabb;
  font-family:var(--vd-sans);
  font-size:11.5px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  padding:7px 24px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  overflow:hidden;
  position:relative;
}

.vd-masthead{
  background:var(--vd-paper);
  border-bottom:3px solid var(--vd-ink);
  padding:22px 24px 16px;
  text-align:center;
}
.vd-masthead-title{display:inline-block;line-height:0}
.vd-masthead-logo{height:64px;width:auto;display:block;margin:0 auto}

.vd-subnav{
  background:var(--vd-paper);
  border-bottom:1px solid var(--vd-rule);
  position:sticky;
  top:0;
  z-index:500;
}
.vd-subnav-inner{
  max-width:1140px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:28px;
  padding:13px 24px;
  position:relative;
}
.vd-subnav-inner a{
  font-family:var(--vd-sans);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--vd-ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  transition:opacity .15s;
}
.vd-subnav-inner a:hover{opacity:.6}
.vd-subnav-inner a.vd-actual{color:var(--vd-brand)}

@media (max-width:600px){
  .vd-masthead{padding:16px 16px 12px}
  .vd-masthead-logo{height:44px}
  .vd-subnav-inner{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:20px;
    padding:11px 16px;
    scrollbar-width:none;
  }
  .vd-subnav-inner::-webkit-scrollbar{display:none}
}

/* ---------- Entradilla ---------- */

.intro{
  max-width:var(--ancho);
  margin:0 auto;
  padding:36px 24px 26px;
  text-align:center;
  border-bottom:1px solid var(--vd-rule);
}
.intro .vd-eyebrow{color:var(--vd-brand);display:block}
.intro h1{
  font-family:var(--vd-serif);
  font-style:italic;
  font-weight:600;
  font-size:clamp(22px,4.5vw,30px);
  color:var(--vd-ink);
  margin:6px 0 10px;
}
.intro p{
  margin:0 auto;
  max-width:56ch;
  font-size:14.5px;
  color:var(--vd-mute);
}

.conteo{
  display:inline-block;
  margin-left:8px;
  font-family:var(--vd-sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--vd-brand);
}

/* ---------- Años ---------- */

.contenido{max-width:var(--ancho);margin:0 auto;padding:0 20px 80px}

.anio{padding-top:44px}

.anio-titulo{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0 0 22px;
  font-family:var(--vd-sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--vd-brand);
}
.anio-titulo span{flex:0 0 auto}
.anio-titulo em{
  flex:0 0 auto;
  order:3;
  font-style:normal;
  letter-spacing:1.2px;
  color:var(--vd-mute);
}
.anio-titulo::after{
  content:'';
  flex:1 1 auto;
  height:1px;
  background:var(--vd-rule);
}

/* ---------- Rejilla de portadas ---------- */

.rejilla{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:26px 20px;
  align-items:start;
}

.tarjeta{display:block}

/* Todas las portadas ocupan el mismo marco, sea cual sea la proporción
   del archivo original (escaneo alto, portada de tienda casi cuadrada).
   La imagen se recorta desde arriba, donde están el logo y el titular. */
.portada{
  position:relative;
  background:var(--papel);
  border-radius:2px;
  overflow:hidden;
  box-shadow:var(--sombra);
  aspect-ratio:1 / 1.294;
  transition:transform .25s ease, box-shadow .25s ease;
}
/* lomo: la franja que hace que se lea como objeto impreso */
.portada::before{
  content:'';
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(90deg,rgba(0,0,0,.16),rgba(0,0,0,0));
  z-index:2;
  pointer-events:none;
}
.portada img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
  background:var(--linea);
}

.tarjeta:hover .portada,
.tarjeta:focus-visible .portada{
  transform:translateY(-4px);
  box-shadow:0 2px 4px rgba(0,0,0,.07), 0 16px 34px rgba(0,0,0,.16);
}
.tarjeta:focus-visible{outline:2px solid var(--rojo);outline-offset:6px;border-radius:3px}

.pie{display:block;padding:12px 2px 0}
.titulo{
  display:block;
  font-family:var(--vd-serif);
  font-weight:600;
  font-size:15px;
  line-height:1.25;
  color:var(--vd-ink);
}
/* Máximo dos líneas en las tarjetas, para que un título largo no
   desordene la fila. */
.pie .titulo{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.fecha{
  display:block;
  margin-top:4px;
  font-family:var(--vd-sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--vd-brand);
}
.paginas{
  display:block;
  margin-top:2px;
  font-family:var(--vd-sans);
  font-size:12px;
  color:var(--vd-mute);
}

.vacio{
  padding:70px 0;
  text-align:center;
  color:var(--tinta-suave);
}

/* ---------- Pie del sitio (copiado de index.php) ---------- */

.footer-main{
  background:var(--vd-paper);
  border-top:3px solid var(--vd-ink);
  padding:44px 0 0;
  margin-top:50px;
}
.footer-main .container{
  max-width:1140px;
  margin:0 auto;
  padding:0 24px 40px;
}

.ftr-social{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  list-style:none;
  margin:0 0 30px;
  padding:0;
}
.ftr-social li{padding:0 20px;border-left:1px solid var(--vd-rule)}
.ftr-social li:first-child{border-left:none}
.ftr-social a{
  font-family:var(--vd-sans);
  font-size:12px;
  font-weight:700;
  letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--vd-ink);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:color .15s ease;
}
.ftr-social a:hover{color:var(--vd-brand)}
.ftr-social a i,.ftr-social a svg{opacity:.85}
#iconxxx{width:14px}

.footer-main .copyright{text-align:center}
.footer-main .copyright p{
  font-family:var(--vd-sans);
  font-size:12.5px;
  color:var(--vd-mute);
  margin:0 0 6px;
}
.footer-main .copyright a{
  color:var(--vd-ink);
  text-decoration:none;
  border-bottom:1px solid var(--vd-brand);
  padding-bottom:2px;
}
.footer-main .copyright a:hover{color:var(--vd-brand)}

@media (max-width:600px){
  .ftr-social li{padding:0 12px}
  .ftr-social a{font-size:11px;letter-spacing:.8px}
}

/* ============================================================
   Visor
   ============================================================ */

body.modo-lectura{
  background:#1c1a16;
  color:#fff;
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}

.barra{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  align-items:center;
  gap:14px;
  padding:9px 16px;
  background:var(--papel);
  border-bottom:1px solid var(--linea);
}

.barra-logo{flex:0 0 auto;display:block}
.barra-logo img{display:block;height:26px;width:auto}

.barra-centro{flex:1 1 auto;min-width:0;line-height:1.2}
.barra-titulo{
  display:block;
  font-family:'Fraunces',Georgia,serif;
  font-size:.98rem;
  color:var(--tinta);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.barra-fecha{
  display:block;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--rojo);
  font-weight:600;
}

.barra-contador{
  flex:0 0 auto;
  font-variant-numeric:tabular-nums;
  font-size:.86rem;
  color:var(--tinta-suave);
}
.barra-contador span{color:var(--tinta);font-weight:600}
.barra-contador i{margin:0 3px;font-style:normal;opacity:.4}

.visor{
  max-width:960px;
  margin:0 auto;
  padding:16px 10px 60px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.hoja{
  position:relative;
  margin:0;
  width:100%;
  background-color:#262626;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-radius:2px;
  box-shadow:0 6px 22px rgba(0,0,0,.45);
  overflow:hidden;
}

.hoja-numero{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-family:'Fraunces',Georgia,serif;
  font-size:1.4rem;
  color:rgba(255,255,255,.18);
  transition:opacity .3s ease;
}
.hoja.cargada .hoja-numero{opacity:0}

/* Páginas que el escáner marcó boca abajo. Se giran aquí en vez de
   recomprimir el JPEG: así la imagen sigue siendo la del original.
   La marca de agua y el número se giran otra vez para quedar derechos. */
.hoja.girada{transform:rotate(180deg)}
.hoja.girada .escudo,
.hoja.girada .hoja-numero{transform:rotate(180deg)}

.hoja.fallo{background-color:#3a2020}
.hoja.fallo .hoja-numero{
  font-family:'Hind',sans-serif;
  font-size:.9rem;
  color:rgba(255,255,255,.55);
  padding:0 24px;
  text-align:center;
}

/* Capa encima de la página. Hace dos cosas: bloquea el arrastrar y el
   "guardar imagen", y lleva la marca de agua. Va aquí y no quemada en
   el JPEG porque recomprimir un escaneo lo agranda ~30% y le quita
   nitidez a la letra. */
.escudo{
  position:absolute;
  inset:0;
  z-index:3;
  background-image:var(--marca);
  background-repeat:no-repeat;
  background-position:right 2.6% bottom 1.8%;
  background-size:var(--marca-w, 13%) auto;
  opacity:0;
  transition:opacity .4s ease;
}
.hoja.cargada .escudo{opacity:var(--marca-op, .3)}

.salto{
  position:fixed;
  right:14px;
  bottom:18px;
  z-index:20;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.salto button{
  width:42px;height:42px;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  color:#fff;
  font-size:1rem;
  cursor:pointer;
  backdrop-filter:blur(8px);
  transition:background .2s ease;
}
.salto button:hover{background:var(--rojo)}
.salto button:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (max-width:600px){
  .visor{padding:10px 6px 50px;gap:10px}
  .salto{display:none}
}

.error-pagina{
  max-width:520px;
  margin:0 auto;
  padding:90px 20px;
  text-align:center;
}
.error-pagina h1{font-family:'Fraunces',Georgia,serif;font-size:1.8rem;margin:0 0 10px}
.error-pagina p{color:rgba(255,255,255,.6);margin:0 0 26px}

/* .boton se define abajo, junto a .boton-suave, para que la página de
   error y la de acceso usen exactamente el mismo botón. */

/* Imprimir o "guardar como PDF" no debe entregar la revista. */
@media print{
  body.modo-lectura *{display:none !important}
  body.modo-lectura::before{
    content:'Este archivo es solo para lectura en línea — archivo.larevistavision.com';
    display:block;
    padding:40px;
    font-family:Georgia,serif;
  }
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important;animation:none !important;scroll-behavior:auto !important}
}

/* ============================================================
   Panel
   ============================================================ */

body.panel{background:var(--papel-hueso)}

.p-envoltura{max-width:900px;margin:0 auto;padding:26px 20px 70px}

.p-cabecera{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  padding-bottom:16px;
  border-bottom:2px solid var(--tinta);
  margin-bottom:26px;
}
.p-cabecera h1{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.55rem;
  margin:0;
}
.p-cabecera nav{display:flex;gap:16px;font-size:.88rem}
.p-cabecera nav a{color:var(--tinta-suave)}
.p-cabecera nav a:hover,.p-cabecera nav a.activo{color:var(--rojo);font-weight:600}

.p-caja{
  background:var(--papel);
  border:1px solid var(--linea);
  border-radius:3px;
  padding:22px;
  margin-bottom:20px;
}
.p-caja h2{
  font-family:'Fraunces',Georgia,serif;
  font-size:1.1rem;
  margin:0 0 4px;
}
.p-caja .ayuda{margin:0 0 18px;color:var(--tinta-suave);font-size:.9rem}

.campo{margin-bottom:14px}
.campo label{
  display:block;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--tinta-suave);
  margin-bottom:5px;
}
.campo input,.campo select,.campo textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid var(--linea);
  border-radius:2px;
  font-family:inherit;
  font-size:.95rem;
  background:var(--papel);
  color:var(--tinta);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;
  border-color:var(--rojo);
  box-shadow:0 0 0 3px rgba(224,0,0,.12);
}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.btn{
  display:inline-block;
  padding:11px 20px;
  border:0;
  border-radius:2px;
  background:var(--tinta);
  color:#fff;
  font-family:inherit;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
}
.btn:hover{background:var(--rojo)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn.rojo{background:var(--rojo)}
.btn.rojo:hover{background:#b80000}
.btn.fantasma{background:transparent;color:var(--tinta-suave);border:1px solid var(--linea)}
.btn.fantasma:hover{color:var(--rojo);border-color:var(--rojo);background:transparent}

.aviso{
  padding:11px 14px;
  border-radius:2px;
  font-size:.9rem;
  margin-bottom:16px;
  border-left:3px solid;
}
.aviso.error{background:#fdf0f0;border-color:var(--rojo);color:#8d1010}
.aviso.ok{background:#eef7ef;border-color:#2e7d32;color:#1e5c22}
.aviso.nota{background:#fdf8ec;border-color:#c99a2e;color:#7a5a10}

.soltar{
  border:2px dashed var(--linea);
  border-radius:3px;
  padding:34px 20px;
  text-align:center;
  color:var(--tinta-suave);
  cursor:pointer;
  transition:border-color .2s ease,background .2s ease;
}
.soltar:hover,.soltar.encima{border-color:var(--rojo);background:#fff8f8}
.soltar strong{display:block;color:var(--tinta);font-size:1rem;margin-bottom:4px}

.progreso{margin-top:18px;display:none}
.progreso.visible{display:block}
.barra-progreso{height:6px;background:var(--linea);border-radius:99px;overflow:hidden}
.barra-progreso i{display:block;height:100%;width:0;background:var(--rojo);transition:width .2s ease}
.progreso-texto{margin-top:8px;font-size:.86rem;color:var(--tinta-suave)}

.lista-ed{width:100%;border-collapse:collapse;font-size:.92rem}
.lista-ed th{
  text-align:left;
  font-size:.72rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--tinta-suave);
  padding:0 10px 8px;
  border-bottom:1px solid var(--linea);
}
.lista-ed td{padding:11px 10px;border-bottom:1px solid var(--linea);vertical-align:middle}
.lista-ed tr:last-child td{border-bottom:0}
.lista-ed .nombre{font-family:'Fraunces',Georgia,serif;font-size:1rem}
.lista-ed .acciones{text-align:right;white-space:nowrap}
.lista-ed .acciones a,.lista-ed .acciones button{
  font-size:.82rem;
  color:var(--tinta-suave);
  background:none;border:0;padding:4px 6px;cursor:pointer;font-family:inherit;
}
.lista-ed .acciones a:hover,.lista-ed .acciones button:hover{color:var(--rojo)}

.etiqueta{
  display:inline-block;
  padding:2px 8px;
  border-radius:99px;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
}
.etiqueta.si{background:#e8f4e9;color:#2e7d32}
.etiqueta.no{background:#f2f0ee;color:var(--tinta-suave)}

.p-acceso{max-width:360px;margin:11vh auto;padding:0 20px}
.p-acceso .marca-mini{
  font-family:'Fraunces',Georgia,serif;
  font-weight:800;
  font-size:1.8rem;
  margin:0 0 4px;
}
.p-acceso .sub{margin:0 0 24px;color:var(--tinta-suave);font-size:.9rem}

@media (max-width:560px){
  .fila{grid-template-columns:1fr}
  .lista-ed .oculta-movil{display:none}
}


/* ---------- Acceso de suscriptores ---------- */

.candado{
  position:absolute;
  z-index:3;
  left:0;
  bottom:0;
  padding:4px 9px;
  background:var(--vd-brand);
  color:#fff;
  font-family:var(--vd-sans);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1.4px;
  text-transform:uppercase;
}

/* Pantalla de acceso.
   Dos columnas asimétricas en vez de la pila centrada: la portada es
   el mejor activo que hay y merece el peso. El apilado de detrás
   insinúa que hay una revista entera, no una sola cara. */

.puerta{
  max-width:960px;
  margin:0 auto;
  padding:clamp(40px,7vw,88px) 24px 90px;
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr);
  gap:clamp(32px,6vw,72px);
  align-items:center;
  position:relative;
}

/* Luz cálida detrás de la portada, para que no flote sobre plano. */
.puerta::before{
  content:'';
  position:absolute;
  left:12%;
  top:38%;
  width:min(420px,60vw);
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(224,0,0,.16), rgba(224,0,0,0) 68%);
  pointer-events:none;
  z-index:0;
}

.puerta-visual,.puerta-texto{position:relative;z-index:1}

/* ---------- La portada y su pila ---------- */

.pila{
  position:relative;
  display:block;
  width:clamp(190px,26vw,300px);
  animation:puerta-entra .7s cubic-bezier(.22,1,.36,1) both;
}
.pila img{
  display:block;
  position:relative;
  z-index:3;
  width:100%;
  height:auto;
  border-radius:2px;
  box-shadow:
    0 2px 6px rgba(0,0,0,.5),
    0 26px 60px rgba(0,0,0,.55);
}
/* Dos hojas asomando: el volumen de las 51 páginas. */
.pila::before,
.pila::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:2px;
  background:#ded6c6;
  transform-origin:bottom left;
}
.pila::before{z-index:2;transform:rotate(1.6deg) translate(7px,4px)}
.pila::after{z-index:1;transform:rotate(3.4deg) translate(14px,8px);background:#c9c0ae}

@keyframes puerta-entra{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:none}
}

/* ---------- La columna de texto ---------- */

.puerta-etiqueta{
  display:inline-block;
  padding:4px 10px;
  background:var(--vd-brand);
  color:#fff;
  font-family:var(--vd-sans);
  font-size:10px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
}

.puerta h1{
  font-family:var(--vd-serif);
  font-weight:600;
  font-size:clamp(1.7rem,4.4vw,2.5rem);
  line-height:1.12;
  letter-spacing:-.01em;
  color:#fff;
  margin:16px 0 0;
  max-width:16ch;
}

/* Fecha y páginas como ficha, no como línea suelta de metadatos. */
.puerta-datos{
  display:flex;
  gap:36px;
  margin:22px 0 0;
  padding:16px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.puerta-datos dt{
  font-family:var(--vd-sans);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:rgba(255,255,255,.38);
  margin:0 0 3px;
}
.puerta-datos dd{
  margin:0;
  font-family:var(--vd-serif);
  font-size:17px;
  color:#fff;
}

.puerta-cuerpo{
  margin:22px 0 0;
  max-width:44ch;
  color:rgba(255,255,255,.62);
  font-size:15px;
  line-height:1.7;
}

.puerta-acciones{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:30px;
}

.boton,.boton-suave{
  display:inline-block;
  padding:12px 24px;
  border-radius:2px;
  font-family:var(--vd-sans);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.02em;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}
.boton{background:var(--vd-brand);color:#fff;border:1px solid var(--vd-brand)}
.boton:hover{background:#b80000;border-color:#b80000}
.boton-suave{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.26)}
.boton-suave:hover{border-color:#fff}

.puerta-vuelta{margin:28px 0 0;font-size:13px}
.puerta-vuelta a{color:rgba(255,255,255,.45)}
.puerta-vuelta a:hover{color:#fff}

/* ---------- Móvil: una columna, alineada a la izquierda ---------- */
@media (max-width:760px){
  .puerta{
    grid-template-columns:1fr;
    gap:34px;
    padding:34px 20px 70px;
  }
  .puerta::before{left:34%;top:22%}
  .pila{width:clamp(150px,42vw,210px)}
  .puerta h1{max-width:none}
  .puerta-datos{gap:28px}
}
@media (max-width:400px){
  .puerta-acciones{flex-direction:column;align-items:stretch}
  .boton,.boton-suave{text-align:center}
}

@media (prefers-reduced-motion:reduce){
  .pila{animation:none}
}

/* Bloque de borrado masivo: separado y marcado, para que no se pulse
   por descuido junto a las acciones normales. */
.zona-riesgo{border-color:rgba(224,0,0,.35)}
.zona-riesgo h2{color:var(--vd-brand)}
.zona-riesgo .armar{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  font-size:.9rem;
  color:var(--tinta-suave);
  cursor:pointer;
}
.zona-riesgo .armar input{width:auto;margin:0}

/* Borrado por lote en el panel */
.lista-ed .col-sel{width:34px;padding-right:0}
.lista-ed .col-sel input{width:auto;margin:0;cursor:pointer}
.lote{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px}
.lote-ayuda{font-size:.85rem;color:var(--tinta-suave)}
.etiqueta.rehacer{background:#fdecea;color:#b71c1c;margin-left:6px;vertical-align:2px}
.fila.fila-3{grid-template-columns:90px 1fr 1fr}
@media (max-width:560px){.fila.fila-3{grid-template-columns:1fr}}