/* WondarCore — código propio, no generado. Se puede modificar libremente. */
/* Página de detalle de una Nota (/nota/{slug}-{id}) — mismo diseño que el modal de "leer la nota
   completa" de Gonzalo/red.html?tipo=nota (clases .wp-note-*, ver Gonzalo/perfil.css y
   Gonzalo/js/posts-shared.js: renderNoteModalBody), acá en una card estática de página completa en
   vez de un overlay (pedido de Agustin, 2026-07-30). Portada grande arriba, panel de contenido
   debajo — a diferencia de Foto/Video (que sí se muestran en modal con layout "tipo Instagram"
   partido en columnas), Nota nunca se divide en columnas en el diseño de Gonzalo, por eso acá no hay
   ningún equivalente a .wp-note-modal--split. Los sub-componentes reales (autor, tags, lugares,
   footer de likes/comentarios) siguen usando las clases reales de publicaciones-shared.js/.css
   (.pub-author, .pub-tags, .pub-lugares, .pub-card-footer, .pub-comments) para no duplicar esa
   lógica — acá solo se agregan los márgenes que Gonzalo les da dentro de este layout. */

.np-wrapper {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.np-breadcrumb {
  margin-bottom: 1.25rem;
}

.np-card {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
}

.wp-note-media { width: 100%; flex-shrink: 0; }
.wp-note-media:empty { display: none; }
.wp-note-panel { width: 100%; min-width: 0; }

.wp-note-hero {
  width: 100%;
  aspect-ratio: 16 / 8;
  background-size: cover;
  background-position: center;
  background-color: #f4f5f7;
  position: relative;
}

.wp-note-hero[data-photo-index] { cursor: pointer; }
.wp-note-hero--empty { background: linear-gradient(135deg, #1a1a2e, #2d1b4e); }

/* <img> real dentro de .wp-note-hero (antes background-image en el div, ver seo.md punto 4) —
   position:absolute+inset:0 para no empujar el badge, que va encima por orden de DOM. */
.wp-note-hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.wp-note-content { padding: 1.75rem 2rem 2.25rem; }

.wp-note-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1.25;
  margin: 0 0 1rem;
}

.wp-note-byline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1rem;
}

.wp-note-byline-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: #eee;
  flex-shrink: 0;
  object-fit: cover;
  object-position: center;
}

.wp-note-byline-avatar--iniciales {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wp-note-byline-text { display: flex; flex-direction: column; }
.wp-note-byline-name { font-size: 0.88rem; font-weight: 700; color: #1a1a2e; }
.wp-note-byline-date { font-size: 0.76rem; color: #888; }

.wp-note-content .pub-tags,
.wp-note-content .pub-lugares {
  margin-bottom: 1rem;
}

.wp-note-body-text {
  font-size: 1.05rem;
  line-height: 1.75;
  color: #2a2a3a;
  text-align: left;
  margin-bottom: 1.5rem;
}

.wp-note-body-text p { margin: 0 0 1em; }
.wp-note-body-text p:last-child { margin-bottom: 0; }

.wp-note-gallery-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin: 0 0 0.6rem;
}

.wp-note-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 1.5rem;
}

.wp-note-gallery-item {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  background-color: #f4f5f7;
  cursor: pointer;
  object-fit: cover;
  object-position: center;
}

.wp-note-links { margin-bottom: 1.25rem; }

.wp-note-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.wp-note-links-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #2563eb;
  text-decoration: underline;
  word-break: break-all;
}

.wp-note-content .pub-card-footer { margin-top: 0.5rem; }

@media (max-width: 600px) {
  .wp-note-content { padding: 1.25rem 1.25rem 1.75rem; }
  .wp-note-title { font-size: 1.4rem; }
  .wp-note-gallery { grid-template-columns: repeat(2, 1fr); }
}