/* Publications: isolated styles; breadcrumbs inherit codigo.css. */
.publications.container{
  --pub-accent:var(--accent-color,#a50000);
  padding:0 20px 70px;
  min-height:420px;
  color:#eee;
}

.pub-intro{
  max-width:540px;
  margin:24px auto 86px;
  text-align:center;
  color:#929292;
  font:15px/1.7 Arial,sans-serif;
}

.pub-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:28px;
}

.publications button{
  cursor:pointer;
  color:#eee;
}

.publications .pub-card{
  display:block;
  min-width:0;
  margin:0;
  padding:26px 26px 38px;
  border:1px solid #242424;
  border-radius:0;
  background:linear-gradient(155deg,#151515,#090909 80%);
  text-align:left;
  transition:border-color .2s,transform .2s;
}

.publications .pub-card:hover,
.publications .pub-card:focus-visible{
  border-color:var(--pub-accent);
  transform:translateY(-3px);
}

/* The catalog is ordered newest first; only its first card is highlighted. */
.publications .pub-card--latest{
  position:relative;
  isolation:isolate;
  border-color:var(--pub-accent);
}

.pub-card--latest::before{
  content:"";
  position:absolute;
  inset:-1px;
  border:1px solid var(--pub-accent);
  box-shadow:0 0 20px var(--pub-accent);
  opacity:.18;
  pointer-events:none;
  animation:pub-latest-glow 3.6s ease-in-out infinite;
}

.pub-latest-badge{
  position:absolute;
  z-index:1;
  top:-12px;
  left:20px;
  max-width:calc(100% - 40px);
  box-sizing:border-box;
  padding:7px 12px;
  background:var(--pub-accent);
  color:#fff;
  font:700 10px/1.2 Arial,sans-serif;
  letter-spacing:.14em;
  pointer-events:none;
}

@keyframes pub-latest-glow{
  0%,100%{opacity:.18}
  50%{opacity:.5}
}

@media(prefers-reduced-motion:reduce){
  .pub-card--latest::before{
    animation:none;
    opacity:.25;
  }
}

.pub-cover{
  position:relative;
  overflow:hidden;
  background:transparent;
}

.pub-cover img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  transition:filter .25s;
}

.pub-cover>span{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  padding:16px 22px;
  white-space:nowrap;
  background:var(--pub-accent);
  color:#fff;
  font:700 12px/1 Arial,sans-serif;
  letter-spacing:.12em;
  opacity:0;
  transition:opacity .2s;
}

.pub-card:hover .pub-cover img,
.pub-card:focus-visible .pub-cover img{
  filter:brightness(.55);
}

.pub-card:hover .pub-cover>span,
.pub-card:focus-visible .pub-cover>span{
  opacity:1;
}

.pub-card-info{
  padding:24px 8px 0;
}

.publications .pub-card h2{
  margin:0 0 10px;
  font:600 19px/1.35 Georgia,serif;
  text-transform:none;
  letter-spacing:normal;
  color:#eee;
  overflow-wrap:anywhere;
}

.pub-card-info time{
  color:var(--pub-accent);
  font:13px/1.5 Arial,sans-serif;
}

.publications .pub-special-edition{
  margin:0 0 10px;
  color:var(--pub-accent);
  font:600 12px/1.5 Arial,sans-serif;
  letter-spacing:.06em;
}

.pub-empty{
  grid-column:1/-1;
  padding:50px 0;
  text-align:center;
  color:#888;
}

.pub-publish-actions{
  display:flex;
  justify-content:flex-end;
  gap:12px;
  margin:0 0 24px;
}

.publications #publish-toggle,
.publications #publish-panel button,
#delete-toggle,
#publication-delete button{
  padding:12px 20px;
  border:1px solid var(--accent-color,#a50000);
  background:var(--accent-color,#a50000);
  color:#fff;
  cursor:pointer;
  font:700 12px Arial,sans-serif;
  letter-spacing:.06em;
}

#publish-panel,
#delete-panel{
  padding:24px;
  margin-bottom:32px;
  border:1px solid var(--accent-color,#a50000);
  background:#111;
}

#publish-panel label{
  display:block;
  margin:18px 0;
}

#publish-panel input{
  display:block;
  max-width:100%;
  box-sizing:border-box;
  margin-top:8px;
  padding:12px;
  border:1px solid #555;
  background:#171717;
  color:#fff;
}

#publish-panel input[type=text]{
  width:100%;
}

#delete-magazine{
  display:block;
  width:100%;
  margin:12px 0 20px;
  padding:12px;
  border:1px solid #555;
  background:#222;
  color:#eee;
}

#upload-progress{
  width:100%;
  margin-top:15px;
}

.publications button:focus-visible,
#magazine-reader button:focus-visible{
  outline:2px solid var(--accent-color,#a50000);
  outline-offset:4px;
}

#magazine-reader{
  box-sizing:border-box;
  width:min(1060px,92vw);
  max-width:92vw;
  height:min(850px,88dvh);
  max-height:88dvh;
  margin:auto;
  padding:0;
  border:1px solid #303030;
  background:#4b4b4b;
  color:#eee;
  overflow:hidden;
  box-shadow:0 20px 80px #0009;
}

#magazine-reader[open]{
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr) auto;
}

#magazine-reader::backdrop{
  background:rgba(0,0,0,.8);
}

#magazine-reader .pub-reader-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:12px 16px;
  border-bottom:1px solid #292929;
  background:#0b0b0b;
}

#reader-title{
  margin:0;
  overflow:hidden;
  color:#eee;
  font:600 18px/1.4 'Merriweather',Georgia,serif;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.pub-reader-actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}

#magazine-reader #reader-fullscreen{
  padding:8px 12px;
  border:1px solid var(--accent-color,#a50000);
  background:var(--accent-color,#a50000);
  font:700 11px/1.2 Arial,sans-serif;
  letter-spacing:.02em;
  white-space:nowrap;
}

#magazine-reader #reader-fullscreen:hover{
  background:#c10a0a;
}

#magazine-reader button{
  padding:10px 14px;
  border:1px solid transparent;
  background:transparent;
  color:#eee;
  cursor:pointer;
  font:14px Arial,sans-serif;
}

#magazine-reader button:hover{
  background:#ffffff15;
}

#magazine-reader #reader-close{
  padding:0 4px;
  color:#aaa;
  font-size:20px;
}

#reader-status{
  min-height:17px;
  margin:12px 14px;
  color:#ddd;
  text-align:center;
  font:12px/1.4 Arial,sans-serif;
}

#reader-spread{
  position:relative;
  min-height:0;
  height:100%;
}

#book-stage{
  display:flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-height:0;
  height:100%;
  padding:0 24px;
  overflow:hidden;
}

#magazine-book{
  margin:auto;
  transition:transform .45s ease;
}

.magazine-page{
  overflow:hidden;
  background:#faf8f3;
  color:#555;
}

.magazine-page canvas{
  width:100%;
  height:100%;
  object-fit:contain;
}

.magazine-page .page-loading{
  position:absolute;
  inset:45% 0;
  text-align:center;
}

#magazine-reader button:disabled{
  opacity:.35;
  cursor:default;
}

#magazine-reader .reader-side{
  position:absolute;
  z-index:20;
  top:50%;
  padding:12px 6px;
  border-radius:3px;
  background:#2228;
  font-size:28px;
  transform:translateY(-50%);
}

.reader-side-prev{
  left:4px;
}

.reader-side-next{
  right:4px;
}

#magazine-reader .pub-reader-footer{
  display:grid;
  grid-template-columns:auto minmax(260px,640px) auto auto;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:10px 16px;
  background:#424242;
}

.reader-page-scrubber{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  width:100%;
}

#page-label{
  min-width:68px;
  color:#eee;
  text-align:center;
  font:12px Arial,sans-serif;
  white-space:nowrap;
}

#page-scrubber{
  width:100%;
  height:5px;
  margin:0;
  border:0;
  border-radius:999px;
  background:#b8b8b8;
  cursor:pointer;
  outline:none;
  appearance:none;
}

#page-scrubber::-webkit-slider-runnable-track{
  height:5px;
  border-radius:999px;
  background:transparent;
}

#page-scrubber::-webkit-slider-thumb{
  width:15px;
  height:15px;
  margin-top:-5px;
  border:2px solid #eee;
  border-radius:50%;
  background:var(--accent-color,#a50000);
  box-shadow:0 1px 3px #0008;
  appearance:none;
}

#page-scrubber::-moz-range-track{
  height:5px;
  border-radius:999px;
  background:#b8b8b8;
}

#page-scrubber::-moz-range-progress{
  height:5px;
  border-radius:999px;
  background:var(--accent-color,#a50000);
}

#page-scrubber::-moz-range-thumb{
  width:12px;
  height:12px;
  border:2px solid #eee;
  border-radius:50%;
  background:var(--accent-color,#a50000);
  box-shadow:0 1px 3px #0008;
}

#page-scrubber-preview{
  position:absolute;
  z-index:60;
  bottom:calc(100% + 12px);
  left:50%;
  display:none;
  width:132px;
  padding:5px;
  border:1px solid #777;
  background:#111;
  box-shadow:0 8px 20px #000b;
  transform:translateX(-50%);
  pointer-events:none;
}

#page-scrubber-preview.is-visible{
  display:block;
}

#page-scrubber-preview img{
  display:block;
  width:132px;
  height:112px;
  background:#050505;
  object-fit:contain;
}

#page-scrubber-preview span{
  display:block;
  padding-top:4px;
  color:#fff;
  text-align:center;
  font:700 11px/1 Arial,sans-serif;
}

body.reading-magazine{
  overflow:hidden;
}

/*
  No se usa document.requestFullscreen(): Chrome rompe el diseño cuando
  intenta combinar una ventana <dialog> abierta con Fullscreen API.
*/
#magazine-reader.reader-fullscreen[open]{
  position:fixed;
  z-index:2147483647;
  inset:0;
  display:grid;
  width:100vw;
  max-width:none;
  min-height:100dvh;
  height:100dvh;
  max-height:none;
  margin:0;
  border:0;
  background:#4b4b4b;
  box-shadow:none;
}

#magazine-reader.reader-fullscreen #book-stage{
  padding-right:88px;
  padding-left:88px;
}

@media(max-width:1100px){
  .pub-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .publications .pub-card{
    padding:20px 20px 30px;
  }
}

@media(max-width:800px){
  .pub-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }

  .pub-intro{
    margin-bottom:48px;
  }
}

@media(max-width:620px){
  #magazine-reader .pub-reader-footer{
    grid-template-columns:auto minmax(0,1fr) auto;
    gap:6px;
    padding:8px;
  }

  .reader-page-scrubber{
    gap:7px;
  }

  #reader-sound{
    grid-column:1/-1;
    justify-self:center;
    padding:4px 8px !important;
  }

  #page-label{
    min-width:52px;
    font-size:10px;
  }

  #magazine-reader #reader-fullscreen{
    padding:7px 8px;
    font-size:10px;
  }

  #magazine-reader.reader-fullscreen #book-stage{
    padding-right:16px;
    padding-left:16px;
  }

  #page-scrubber-preview{
    width:104px;
  }

  #page-scrubber-preview img{
    width:104px;
    height:88px;
  }
}

@media(max-width:500px){
  .publications.container{
    padding:0 16px 40px;
  }

  .pub-grid{
    grid-template-columns:1fr;
    gap:24px;
  }

  .pub-intro{
    margin-bottom:36px;
    font-size:14px;
  }

  .publications .pub-card{
    padding:24px;
  }

  .pub-card-info{
    padding:20px 0 0;
  }

  #magazine-reader{
    width:96vw;
    max-width:96vw;
    height:90dvh;
    max-height:90dvh;
  }

  #book-stage{
    padding:0 8px;
  }

  #magazine-reader .pub-reader-header{
    gap:8px;
    padding:10px;
  }

  #reader-title{
    font-size:15px;
  }

  .pub-reader-actions{
    gap:6px;
  }
}

@media(hover:none){
  .pub-cover>span{
    top:auto;
    bottom:12px;
    padding:12px 18px;
    opacity:1;
    transform:translateX(-50%);
  }
}

@media(prefers-reduced-motion:reduce){
  .publications .pub-card,
  .pub-cover img,
  .pub-cover>span{
    transition:none;
  }

  .publications .pub-card:hover{
    transform:none;
  }

  .pub-card--latest::before{
    animation:none;
  }
}