/* ===== Nota estilo artículo (Hector, 14/10): portada, título, pills amarillas de sección, fecha · autor, Compartir y el texto con imágenes.
   Va DESPUÉS de style.css y de dark-theme-overrides.css; solo toca la página de la nota (.nota-*), no la lista ni el Home. ===== */
.nota-page-layout{max-width:760px;padding:18px 18px 80px}
.nota-back{margin-bottom:16px;font-weight:500}

.nota-cover{border-radius:18px;margin-bottom:26px;box-shadow:0 12px 32px rgba(15,27,45,.16)}

.nota-headline{margin:0 0 16px;font-size:clamp(1.65rem,3.2vw + .7rem,2.55rem);line-height:1.12;letter-spacing:-.022em;font-weight:800;text-wrap:balance}

/* Pills amarillas (mismo amarillo del sello del Home) */
.nota-pills{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.nota-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 13px;border-radius:999px;background:#FDF83C;color:#111;font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;line-height:1}

.nota-byline{margin:0 0 18px;padding:0;border-bottom:0;font-size:.9rem;gap:7px}
.nota-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px;padding-bottom:20px;border-bottom:1px solid #e5e7eb}
.nota-share-btn{min-height:40px;padding:0 16px;border-radius:12px;font-size:.85rem;font-weight:600}

/* ----- Cuerpo del artículo ----- */
.nota-content{font-size:1.07rem;line-height:1.82;color:#262c35}
.nota-content > p:first-child:not(:has(img)){font-size:1.2em;line-height:1.62;color:#111;font-weight:500}
.nota-content p{margin:0 0 1.25em}
.nota-content h2{margin:2.1em 0 .6em;font-size:1.55em;line-height:1.2;letter-spacing:-.012em;font-weight:800}
.nota-content h2::before{content:"";display:block;width:38px;height:4px;border-radius:2px;background:#F4C430;margin-bottom:14px}
.nota-content h3{margin:1.8em 0 .5em;font-size:1.2em;line-height:1.25;font-weight:700}
.nota-content strong{font-weight:700;color:#111}
.nota-content a{color:#0056A3;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.nota-content ul,.nota-content ol{margin:0 0 1.35em;padding-left:1.35em}
.nota-content li{margin:.55em 0;padding-left:.2em}
.nota-content li::marker{color:#D9A400;font-weight:800}
.nota-content hr{border:0;height:1px;background:#e5e7eb;margin:2.4em 0}

/* Imágenes dentro del texto: a todo el ancho, con pie de foto (un párrafo en cursiva justo debajo de la imagen) */
.nota-content img{width:100%;height:auto;border-radius:14px;margin:0;display:block;box-shadow:0 8px 24px rgba(15,27,45,.12)}
.nota-content p:has(> img:only-child){margin:2em 0 .65em}
.nota-content p:has(> img:only-child) + p:has(> em:only-child){margin:0 0 2em;font-size:.84rem;line-height:1.5;color:#6b7482;text-align:center}
.nota-content p:has(> img:only-child) + p:has(> em:only-child) em{font-style:normal}

/* Cita destacada */
.nota-content blockquote{margin:2em 0;padding:.15em 0 .15em 1.25em;border-left:4px solid #F4C430;font-size:1.2em;line-height:1.55;font-style:normal;font-weight:600;color:#111}
.nota-content blockquote p{margin:0}

@media(max-width:560px){
  .nota-page-layout{padding:14px 16px 72px}
  .nota-cover{border-radius:16px;margin-bottom:22px}
  .nota-content{font-size:1.03rem;line-height:1.78}
  .nota-content h2{font-size:1.4em}
}

/* ----- Tema oscuro (las reglas viejas usan !important: aquí se sube la especificidad) ----- */
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-cover{box-shadow:0 12px 32px rgba(0,0,0,.45)}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-actions{border-bottom-color:var(--dt-border)!important}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content,
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content p,
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content li{color:rgba(234,240,248,.88)!important}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content > p:first-child:not(:has(img)){color:var(--dt-text)!important}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content strong,
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content blockquote,
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content blockquote p{color:var(--dt-text)!important}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content h2::before{background:#FDF83C}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content blockquote{border-left-color:#FDF83C}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content li::marker{color:#FDF83C}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content a{color:var(--dt-accent,#76B7FF)!important}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content img{box-shadow:0 8px 24px rgba(0,0,0,.5)}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content p:has(> img:only-child) + p:has(> em:only-child),
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content p:has(> img:only-child) + p:has(> em:only-child) em{color:var(--dt-muted)!important}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-content hr{background:var(--dt-border)}

/* ----- "En esta nota": índice de temas (aparece solo si la nota tiene 3 o más) ----- */
.nota-content h2{scroll-margin-top:84px}
.nota-toc{margin:1.9em 0 2.1em;padding:18px 18px 12px;border:1px solid #e5e7eb;border-radius:16px;background:#f8f9fa}
.nota-toc-title{margin:0 0 8px;font-size:.74rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5b6675}
.nota-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc}
.nota-toc li{counter-increment:toc;margin:0;padding:0}
.nota-toc-link{all:unset;box-sizing:border-box;display:flex;gap:12px;align-items:center;width:100%;padding:9px 4px;cursor:pointer;font-size:.98rem;line-height:1.35;font-weight:600;color:#111;border-radius:10px}
.nota-toc-link::before{content:counter(toc);flex:0 0 26px;height:26px;border-radius:50%;background:#FDF83C;color:#111;font-size:.78rem;font-weight:800;display:grid;place-items:center}
.nota-toc-link:hover{color:#0056A3}
.nota-toc-link:focus-visible{outline:3px solid #F4C430;outline-offset:1px}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-toc{background:var(--dt-surface)!important;border-color:var(--dt-border)!important}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-toc-title{color:var(--dt-muted)!important}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-toc-link{color:var(--dt-text)!important}
body.dark-theme:not(.rider-room-active):not(.player-dark) .nota-page .nota-toc-link:hover{color:var(--dt-accent,#76B7FF)!important}