/* Diario: solo lo propio del blog. Menú, colores y pie vienen de /css/sitio.css */
body.diario{--muted:#a7aeb8}  /* gris un poco más claro: se lee mejor en textos largos */
:root[data-tema="claro"] body.diario{--muted:#4f4a45}  /* en claro, un poco más oscuro por lo mismo */

/* LISTA DE ENTRADAS */
.lista{display:grid;gap:18px;padding:30px 0 80px}
.entrada{position:relative;display:block;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px 28px;transition:.2s}
.entrada:hover,.entrada:focus-within{border-color:var(--accent);transform:translateY(-2px)}
.entrada .fecha{color:var(--accent2);font-size:.95rem}
.entrada h2{font-size:1.45rem;line-height:1.3;margin:6px 0 8px}
/* El enlace del título cubre toda la tarjeta; las etiquetas quedan por encima y se pueden pulsar aparte */
.entrada .abrir{color:inherit;text-decoration:none}
.entrada .abrir::after{content:"";position:absolute;inset:0;border-radius:inherit}
.entrada .abrir:focus-visible{outline:none}
.entrada:has(.abrir:focus-visible){outline:3px solid var(--accent);outline-offset:2px}
.etiquetas{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.etiqueta{display:inline-block;font-size:.95rem;font-weight:600;color:var(--accent2);background:var(--bg2);border:1px solid var(--tag-borde);border-radius:8px;padding:5px 12px;text-decoration:none;line-height:1.3}
.etiqueta:hover,.etiqueta:focus-visible{border-color:var(--accent);color:var(--text)}
.entrada p{color:var(--muted);font-size:1.08rem}
.entrada .leer{display:inline-block;margin-top:14px;color:var(--accent);font-weight:600}
.sin-entradas{color:var(--muted);font-size:1.15rem;padding:36px 0 10px}
.filtro{margin-top:18px}
.cabecera .lead a{color:var(--accent2);text-underline-offset:3px}  /* el enlace a Temas de la entradilla */

/* ARTÍCULO: pensado para leer con calma */
.volver{display:inline-block;margin:28px 0 0;color:var(--accent2);text-decoration:none;font-size:1.05rem}
.volver:hover{text-decoration:underline}
.volver[hidden]{display:none}
article{padding:10px 0 90px}
article h1{font-size:clamp(2rem,5vw,3rem);line-height:1.12}
article .meta{color:var(--muted);font-size:1.05rem;margin:14px 0 34px}
article .meta a{color:var(--accent2);text-underline-offset:3px}
.aviso{background:rgba(255,179,71,.1);border:1px solid rgba(255,179,71,.4);color:var(--accent2);border-radius:12px;padding:14px 18px;margin:26px 0 0;font-size:1rem}
/* Portada: a lo ancho si es apaisada; si es vertical, entera pero con altura máxima (no ocupa toda la pantalla) */
.portada{display:block;width:auto;max-width:100%;height:auto;max-height:min(70vh,560px);margin:0 auto 30px;border-radius:var(--radius)}
.texto{font-size:1.22rem;line-height:1.8}
.texto p,.texto ul,.texto ol,.texto blockquote,.texto .foto{margin-bottom:1.15em}
.texto h2{font-size:1.6rem;line-height:1.3;margin:1.8em 0 .6em}
.texto h3{font-size:1.3rem;margin:1.5em 0 .5em}
.texto strong{color:var(--fuerte)}
.texto a{color:var(--accent2);text-underline-offset:3px}
.texto ul,.texto ol{padding-left:1.4em}
.texto li{margin-bottom:.4em}
.texto blockquote{border-left:4px solid var(--accent);padding:4px 0 4px 18px;color:var(--muted)}
.texto hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.texto code{font-family:"JetBrains Mono",monospace;font-size:.85em;background:var(--bg2);padding:2px 6px;border-radius:6px}
.texto img{max-width:100%;height:auto;border-radius:12px;display:block}
.texto .foto{display:block}
.texto .pie{display:block;color:var(--muted);font-size:.95rem;text-align:center;margin-top:8px}

/* COMENTARIOS: letra grande y texto siempre plano (white-space respeta los saltos de línea) */
.comentarios{border-top:1px solid var(--line);padding:40px 0 90px}
.comentarios[hidden]{display:none}
.comentarios h2{font-size:1.6rem;margin-bottom:20px}
.comentarios h3{font-size:1.3rem;margin:40px 0 14px}
.comentario{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:14px}
.comentario .quien{color:var(--muted);font-size:1.05rem;margin-bottom:8px}
.comentario .quien strong{color:var(--text)}
.comentario .dice{font-size:1.2rem;line-height:1.7;white-space:pre-line;overflow-wrap:anywhere}
.sin-comentarios{color:var(--muted);font-size:1.15rem}
.comentarios label{font-size:1rem}
.comentarios input,.comentarios textarea{font-size:1.1rem}
.estado-comentario{color:var(--accent2);font-size:1.05rem;min-height:1.2em}
.estado-comentario:empty{display:none}
.datos-comentario{color:var(--muted);font-size:.95rem}

@media (max-width:760px){
  .entrada{padding:22px}
  .texto{font-size:1.15rem}
}