/* public/css/style.css
   Identidad visual: "cuaderno de apuntes de desarrollo" — editorial, legible,
   con acentos de color puntuales en vez de tarjetas genéricas con sombra. */

:root {
  --bg: #eef1f6;
  --bg-elevada: #ffffff;
  --tinta: #1b2430;
  --tinta-tenue: #5b6472;
  --borde: #d8deea;
  --acento: #2f5de3;
  --acento-calido: #d98324;
  --fuente-titular: "Fraunces", Georgia, serif;
  --fuente-cuerpo: "IBM Plex Sans", system-ui, sans-serif;
  --fuente-mono: "IBM Plex Mono", monospace;
}

/* Modo oscuro: sigue el ajuste del sistema operativo/navegador del lector.
   Se reutiliza la misma paleta (mismos acentos, algo mas claros para
   mantener contraste), asi que el sitio se sigue sintiendo igual, solo que
   invertido. */
/* Modo oscuro manual: el boton de la cabecera guarda la preferencia en
   localStorage y la aplica como atributo data-theme en <html>. Mientras no
   haya una eleccion manual (sin atributo, o "auto"), se sigue respetando la
   preferencia del sistema operativo mediante prefers-color-scheme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10151d;
    --bg-elevada: #1a212c;
    --tinta: #eef1f6;
    --tinta-tenue: #9aa7b8;
    --borde: #2b3542;
    --acento: #6c93ff;
    --acento-calido: #e2984a;
  }

  :root:not([data-theme="light"]) .mensaje-error {
    background: rgba(185, 28, 28, 0.18);
    color: #ff8080;
  }

  :root:not([data-theme="light"]) .etiqueta-estado--publicado {
    color: #4ade80;
    border-color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
  }

  :root:not([data-theme="light"]) .form-borrar button {
    color: #ff8080;
  }
}

:root[data-theme="dark"] {
  --bg: #10151d;
  --bg-elevada: #1a212c;
  --tinta: #eef1f6;
  --tinta-tenue: #9aa7b8;
  --borde: #2b3542;
  --acento: #6c93ff;
  --acento-calido: #e2984a;
}

:root[data-theme="dark"] .mensaje-error {
  background: rgba(185, 28, 28, 0.18);
  color: #ff8080;
}

:root[data-theme="dark"] .etiqueta-estado--publicado {
  color: #4ade80;
  border-color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

:root[data-theme="dark"] .form-borrar button {
  color: #ff8080;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  color: var(--tinta);
  background: var(--bg);
  line-height: 1.6;
}

.contenedor {
  max-width: 700px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  min-height: 70vh;
}

/* Variante de portada/artículo: dos columnas (contenido + barra lateral)
   en pantallas anchas, para que la pagina no se quede con los laterales
   vacios. El panel de admin no usa esta variante. */
.contenedor--con-barra {
  max-width: 1060px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 3rem;
  align-items: start;
}

.col-principal {
  min-width: 0;
}

.barra-lateral {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  position: sticky;
  top: 5.5rem;
}

.widget-lateral h2 {
  font-family: var(--fuente-titular);
  font-size: 1.05rem;
  margin: 0 0 0.8rem;
}

.widget-lateral p {
  margin: 0;
  color: var(--tinta-tenue);
  font-size: 0.9rem;
  line-height: 1.55;
}

.widget-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.widget-lista a {
  color: var(--tinta-tenue);
  text-decoration: none;
  font-size: 0.9rem;
  line-height: 1.4;
}

.widget-lista a:hover {
  /* Si el enlace trae su propio --color-cat (una categoria con color
     asignado), se usa ese; si no, el acento general del sitio. */
  color: var(--color-cat, var(--acento));
}

@media (max-width: 900px) {
  .contenedor--con-barra {
    grid-template-columns: 1fr;
    max-width: 700px;
  }

  .barra-lateral {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    margin-top: 1rem;
    padding-top: 2rem;
    border-top: 1px solid var(--borde);
  }

  .widget-lateral {
    flex: 1 1 220px;
  }
}

/* Cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  padding: 1.1rem 2rem;
  background: var(--bg-elevada);
  border-bottom: 1px solid var(--borde);
  box-shadow: 0 1px 3px rgba(27, 36, 48, 0.04);
}

.logo {
  flex-shrink: 0;
  font-family: var(--fuente-mono);
  font-size: 1.15rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--tinta);
  letter-spacing: -0.02em;
}

.logo-punto {
  color: var(--acento);
}

.cabecera nav {
  flex-shrink: 0;
}

.cabecera nav a {
  margin-left: 1.3rem;
  text-decoration: none;
  color: var(--tinta-tenue);
  font-size: 0.95rem;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.cabecera nav a:hover {
  color: var(--tinta);
  border-bottom-color: var(--acento);
}

/* Boton de modo claro/oscuro: icono de sol o luna segun el tema activo.
   Los dos SVG conviven en el DOM y CSS decide cual se ve segun el atributo
   data-theme del <html> (logica de alternancia en un script al final de
   este partial). */
.boton-tema {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  margin-left: 1.1rem;
  padding: 0;
  background: none;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: var(--tinta-tenue);
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.boton-tema:hover {
  color: var(--tinta);
  border-color: var(--acento);
}

.boton-tema .icono-luna {
  display: none;
}

:root[data-theme="dark"] .boton-tema .icono-sol {
  display: none;
}

:root[data-theme="dark"] .boton-tema .icono-luna {
  display: block;
}

/* Sin eleccion manual guardada, el icono tambien sigue la preferencia del
   sistema (misma logica que los colores): en modo oscuro del sistema se ve
   la luna salvo que el visitante haya fijado el tema claro a mano. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .boton-tema .icono-sol {
    display: none;
  }

  :root:not([data-theme="light"]) .boton-tema .icono-luna {
    display: block;
  }
}

/* Barra de búsqueda */
.barra-busqueda {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  max-width: 340px;
  padding: 0.5rem 0.9rem;
  background: var(--bg);
  border: 1px solid var(--borde);
  border-radius: 999px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.barra-busqueda:focus-within {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(47, 93, 227, 0.12);
}

.icono-busqueda {
  flex-shrink: 0;
  color: var(--tinta-tenue);
}

.barra-busqueda input {
  flex: 1;
  min-width: 0;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 0.92rem;
  color: var(--tinta);
}

.barra-busqueda input:focus {
  outline: none;
}

.barra-busqueda input::placeholder {
  color: var(--tinta-tenue);
}

.barra-busqueda input::-webkit-search-cancel-button {
  cursor: pointer;
}

/* Resultado de búsqueda */
.resultado-busqueda {
  color: var(--tinta-tenue);
  font-size: 0.92rem;
  margin: -1rem 0 1.6rem;
}

.resultado-busqueda strong {
  color: var(--tinta);
  font-weight: 600;
}

.limpiar-busqueda {
  margin-left: 0.6rem;
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.limpiar-busqueda:hover {
  border-bottom-color: var(--acento);
}

.form-logout {
  display: inline;
}

.form-logout button {
  background: none;
  border: none;
  color: var(--tinta-tenue);
  cursor: pointer;
  font: inherit;
  font-size: 0.95rem;
  margin-left: 1.3rem;
  padding: 0;
}

.form-logout button:hover {
  color: var(--tinta);
}

/* Hero */
.hero {
  margin-bottom: 2.2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--borde);
}

.hero-etiqueta {
  font-family: var(--fuente-mono);
  font-size: 0.85rem;
  color: var(--acento);
  margin: 0 0 0.7rem;
}

.hero h1 {
  font-family: var(--fuente-titular);
  font-weight: 500;
  font-style: italic;
  font-size: 2rem;
  line-height: 1.3;
  margin: 0;
  max-width: 22ch;
}

/* Articulo destacado: un hueco especial en la portada, mas grande que una
   fila normal del listado, para dirigir la atencion hacia un articulo en
   concreto en vez de dejarlo compitiendo solo por orden cronologico. */
.destacado-post {
  display: flex;
  gap: 1.6rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  margin-bottom: 2.2rem;
  padding: 1.4rem;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--bg-elevada);
  transition: border-color 0.15s ease;
}

.destacado-post:hover {
  border-color: var(--acento);
}

.destacado-post-img {
  width: 200px;
  height: 150px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 6px;
}

.destacado-post-contenido {
  min-width: 0;
}

.destacado-post-etiqueta {
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--acento);
  margin: 0 0 0.4rem;
}

.destacado-post-contenido h2 {
  margin: 0 0 0.5rem;
}

/* Tabs de categorías */
.tabs-categorias {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin-bottom: 2.2rem;
  border-bottom: 1px solid var(--borde);
  padding-bottom: 0.9rem;
}

.tabs-categorias a {
  text-decoration: none;
  color: var(--tinta-tenue);
  font-size: 0.95rem;
  padding-bottom: 0.9rem;
  margin-bottom: -1rem;
  border-bottom: 2px solid transparent;
}

.tabs-categorias a:hover {
  color: var(--tinta);
  border-bottom-color: var(--color-cat, var(--acento));
}

.tabs-categorias a.tab-activa {
  color: var(--tinta);
  border-bottom-color: var(--color-cat, var(--acento));
  font-weight: 500;
}

/* Listado de posts: filas editoriales, no tarjetas */
.fila-post {
  display: flex;
  gap: 1.3rem;
  padding: 1.8rem 0;
  border-bottom: 1px solid var(--borde);
}

.fila-post:first-child {
  padding-top: 0;
}

.fila-post-img-envoltorio {
  flex-shrink: 0;
}

.fila-post-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.fila-post-img-envoltorio {
  overflow: hidden;
  border-radius: 6px;
}

.fila-post-img-envoltorio:hover .fila-post-img {
  transform: scale(1.05);
}

/* Post sin imagen propia: degradado de marca + inicial del titulo, para que
   ninguna fila del listado quede "coja" frente a las que si tienen foto. */
.fila-post-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--acento) 0%, var(--acento-calido) 100%);
}

.fila-post-img-placeholder span {
  font-family: var(--fuente-titular);
  font-style: italic;
  font-size: 2.6rem;
  color: rgba(255, 255, 255, 0.92);
}

.fila-post-meta {
  font-family: var(--fuente-mono);
  font-size: 0.78rem;
  color: var(--acento-calido);
  margin: 0 0 0.4rem;
}

.fila-post-contenido h2 {
  margin: 0 0 0.4rem;
  font-family: var(--fuente-titular);
  font-size: 1.35rem;
  font-weight: 600;
  line-height: 1.3;
}

.fila-post-contenido h2 a {
  text-decoration: none;
  color: var(--tinta);
}

.fila-post-contenido h2 a:hover {
  color: var(--acento);
}

.fila-post-resumen {
  color: var(--tinta-tenue);
  margin: 0 0 0.6rem;
  font-size: 0.96rem;
}

.leer-mas {
  color: var(--acento);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.92rem;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease;
}

.leer-mas:hover {
  border-bottom-color: var(--acento);
}

.paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.paginacion .boton {
  margin-top: 0;
}

.paginacion-actual {
  color: var(--tinta-tenue);
  font-size: 0.9rem;
  text-align: center;
  flex: 1;
}

.vacio {
  color: var(--tinta-tenue);
  padding: 2rem 0;
}

/* Detalle de post */
.volver {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: var(--tinta-tenue);
  text-decoration: none;
  font-size: 0.92rem;
}

.volver:hover {
  color: var(--acento);
}

/* Migas de pan */
.migas {
  margin-bottom: 1.2rem;
  font-size: 0.88rem;
  color: var(--tinta-tenue);
}

.migas a {
  color: var(--tinta-tenue);
  text-decoration: none;
}

.migas a:hover {
  color: var(--acento);
}

.migas-sep {
  margin: 0 0.4rem;
}

.migas-actual {
  color: var(--tinta);
}

.acciones-articulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
  margin: 0 0 1.5rem;
}

.boton-compartir {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--tinta-tenue);
  font: inherit;
  font-size: 0.92rem;
  text-decoration: underline;
  text-decoration-color: transparent;
  cursor: pointer;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

.boton-compartir:hover {
  color: var(--acento);
  text-decoration-color: var(--acento);
}

/* Modo lectura: oculta cabecera, pie, barra lateral y comentarios para
   dejar solo el articulo, con mas tamaño de letra para leer comodo. */
body.modo-lectura .cabecera,
body.modo-lectura .pie,
body.modo-lectura .barra-lateral,
body.modo-lectura .migas,
body.modo-lectura .boton-arriba,
body.modo-lectura .relacionados,
body.modo-lectura .comentarios {
  display: none;
}

body.modo-lectura .contenedor--con-barra {
  grid-template-columns: 1fr;
}

body.modo-lectura .col-principal {
  max-width: 700px;
  margin: 0 auto;
}

body.modo-lectura .post-detalle-contenido {
  font-size: 1.15rem;
  line-height: 1.85;
}

.post-detalle h1 {
  font-family: var(--fuente-titular);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0.3rem 0 0.5rem;
}

.fecha {
  color: var(--tinta-tenue);
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
}

.fecha-actualizado {
  font-style: italic;
}

.post-detalle-img {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 1.5rem;
}

/* Indice automatico (solo aparece si el articulo tiene 2 o mas apartados) */
.indice-articulo {
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0 2rem;
}

.indice-titulo {
  margin: 0 0 0.6rem;
  font-family: var(--fuente-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tinta-tenue);
}

.indice-lista {
  margin: 0;
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.indice-lista a {
  color: var(--acento);
  text-decoration: none;
  font-size: 0.92rem;
}

.indice-lista a:hover {
  text-decoration: underline;
}

.post-detalle-contenido {
  font-size: 1.05rem;
}

.post-detalle-contenido h2 {
  font-family: var(--fuente-titular);
  font-size: 1.4rem;
  margin-top: 2rem;
}

.post-detalle-contenido p {
  margin-bottom: 1.1rem;
}

/* Bloques de codigo (resaltados con Prism.js) y codigo en linea */
.post-detalle-contenido pre {
  margin: 1.4rem 0;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.55;
}

.post-detalle-contenido pre[class*="language-"] {
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.post-detalle-contenido :not(pre) > code {
  font-family: var(--fuente-mono);
  font-size: 0.88em;
  background: rgba(47, 93, 227, 0.09);
  color: var(--acento);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

/* Articulos relacionados */
.relacionados {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}

.relacionados h2 {
  font-family: var(--fuente-titular);
  font-size: 1.3rem;
  margin: 0 0 1.2rem;
}

.relacionados-lista {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.relacionado-item {
  display: block;
  text-decoration: none;
  color: inherit;
}

.relacionado-img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.6rem;
}

.relacionado-img.fila-post-img-placeholder span {
  font-size: 1.8rem;
}

.relacionado-titulo {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--tinta);
  line-height: 1.35;
}

.relacionado-item:hover .relacionado-titulo {
  color: var(--acento);
}

@media (max-width: 640px) {
  .relacionados-lista {
    grid-template-columns: 1fr;
  }
}

/* Comentarios */
.comentarios {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--borde);
}

.comentarios h2 {
  font-family: var(--fuente-titular);
  font-size: 1.3rem;
  margin: 0 0 1rem;
}

.comentarios h3 {
  font-family: var(--fuente-titular);
  font-size: 1.05rem;
  margin: 2rem 0 0;
}

.lista-comentarios {
  list-style: none;
  margin: 0;
  padding: 0;
}

.comentario {
  padding: 1rem 0;
  border-bottom: 1px solid var(--borde);
}

.comentario-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

.comentario-nombre {
  font-weight: 600;
}

.comentario-fecha {
  color: var(--tinta-tenue);
  font-size: 0.82rem;
  white-space: nowrap;
}

.comentario-contenido {
  margin: 0.35rem 0 0;
  white-space: pre-wrap;
}

.formulario-comentario {
  max-width: 480px;
}

/* Formularios (login, crear/editar post, categorías) */
.form-caja {
  max-width: 480px;
  margin: 0 auto;
  background: var(--bg-elevada);
  padding: 2rem;
  border-radius: 6px;
  border: 1px solid var(--borde);
}

.form-caja h1 {
  font-family: var(--fuente-titular);
  font-size: 1.5rem;
  margin-top: 0;
}

.formulario {
  display: flex;
  flex-direction: column;
}

.formulario label {
  margin-top: 1.1rem;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--tinta-tenue);
}

.formulario input,
.formulario textarea,
.formulario select {
  padding: 0.6rem;
  margin-top: 0.35rem;
  border: 1px solid var(--borde);
  border-radius: 4px;
  font: inherit;
  background: var(--bg-elevada);
  color: var(--tinta);
}

.formulario input:focus,
.formulario textarea:focus,
.formulario select:focus {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}

.formulario button,
.boton {
  margin-top: 1.6rem;
  background: var(--acento);
  color: white;
  border: none;
  padding: 0.65rem 1.2rem;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  font: inherit;
  text-decoration: none;
  display: inline-block;
  text-align: center;
}

.formulario button:hover,
.boton:hover {
  opacity: 0.9;
}

.mensaje-error {
  background: #fde8e8;
  color: #b91c1c;
  padding: 0.7rem;
  border-radius: 4px;
  font-size: 0.92rem;
}

.form-imagen-actual {
  margin-top: 0.5rem;
  max-width: 220px;
  max-height: 140px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid var(--borde);
  display: block;
}

.form-imagen-nota {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--tinta-tenue);
}

.ayuda {
  margin-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--tinta-tenue);
  text-align: center;
}

/* Dashboard admin */
.dashboard-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.6rem;
}

.dashboard-cabecera h1 {
  font-family: var(--fuente-titular);
  font-size: 1.6rem;
  margin: 0;
}

.stats-resumen {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.6rem;
}

.stat-tarjeta {
  flex: 1 1 140px;
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: 8px;
  padding: 1rem 1.2rem;
}

.stat-tarjeta--ancha {
  flex: 2 1 260px;
}

.stat-numero {
  margin: 0;
  font-family: var(--fuente-titular);
  font-size: 1.8rem;
  font-weight: 600;
}

.stat-etiqueta {
  margin: 0.2rem 0 0;
  font-size: 0.8rem;
  color: var(--tinta-tenue);
}

.stat-destacado {
  margin: 0.3rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.tabla-admin {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: 6px;
  overflow: hidden;
}

.tabla-admin th {
  font-size: 0.82rem;
  color: var(--tinta-tenue);
  font-weight: 600;
}

.tabla-admin th,
.tabla-admin td {
  padding: 0.8rem;
  border-bottom: 1px solid var(--borde);
  text-align: left;
}

.acciones a,
.acciones button {
  margin-right: 0.8rem;
  color: var(--acento);
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  text-decoration: none;
}

.form-borrar,
.form-estado,
.form-destacar {
  display: inline;
}

.form-color-categoria {
  display: inline-flex;
}

.form-color-categoria input[type="color"] {
  width: 36px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: 4px;
  cursor: pointer;
}

.etiqueta-estado {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--borde);
}

.etiqueta-estado--publicado {
  color: #1a7f4b;
  border-color: #1a7f4b;
  background: rgba(26, 127, 75, 0.08);
}

.etiqueta-estado--borrador {
  color: var(--tinta-tenue);
}

.etiqueta-destacado {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--acento);
  border: 1px solid var(--acento);
  background: rgba(47, 93, 227, 0.08);
}

.celda-comentario {
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.celda-visitas {
  font-variant-numeric: tabular-nums;
  color: var(--tinta-tenue);
}

.form-borrar button {
  color: #c0392b;
}

/* Botón secundario y formulario inline (categorías) */
.boton-secundario {
  background: var(--bg-elevada);
  color: var(--tinta);
  border: 1px solid var(--borde);
  margin-right: 0.6rem;
  margin-top: 0;
}

.formulario-inline {
  flex-direction: row;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.formulario-inline input {
  margin-top: 0;
  flex: 1;
}

.formulario-inline input[type="color"] {
  flex: 0 0 auto;
  width: 44px;
  height: 38px;
  padding: 2px;
  cursor: pointer;
}

.formulario-inline button {
  margin-top: 0;
}

/* Boton flotante "volver arriba" */
.boton-arriba {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--acento);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(27, 36, 48, 0.22);
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 20;
}

.boton-arriba:hover {
  transform: translateY(-2px);
}

.boton-arriba[hidden] {
  display: none;
}

/* Pagina de error 404 */
.pagina-error {
  text-align: center;
  padding: 3rem 1rem 2rem;
}

.error-codigo {
  font-family: var(--fuente-titular);
  font-style: italic;
  font-size: 5rem;
  margin: 0;
  color: var(--acento);
  opacity: 0.35;
  line-height: 1;
}

.pagina-error h1 {
  font-family: var(--fuente-titular);
  font-size: 1.7rem;
  margin: 0.5rem 0 0.6rem;
}

.pagina-error p {
  color: var(--tinta-tenue);
}

.error-acciones {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.error-acciones .boton {
  margin-top: 0;
}

/* Pie de página */
.pie {
  text-align: center;
  padding: 1.5rem;
  color: var(--tinta-tenue);
  font-size: 0.85rem;
  border-top: 1px solid var(--borde);
}

.pie-legal {
  margin-top: 0.5rem;
}

.pie-legal a {
  color: var(--tinta-tenue);
  text-decoration: none;
}

.pie-legal a:hover {
  color: var(--acento);
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 640px) {
  .cabecera {
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
  }

  .barra-busqueda {
    order: 3;
    max-width: none;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .fila-post {
    flex-direction: column;
  }

  .fila-post-img {
    width: 100%;
    height: 180px;
  }

  .hero h1 {
    font-size: 1.6rem;
  }

  .destacado-post {
    flex-direction: column;
  }

  .destacado-post-img {
    width: 100%;
    height: 180px;
  }
}

/* ---------------------------------------------------------------------
   Impresión / guardar como PDF: solo el articulo, sin cabecera, barra
   lateral, botones ni comentarios. Pensado para tutoriales largos que
   alguien quiera imprimir o guardar aparte para seguir paso a paso.
   --------------------------------------------------------------------- */
@media print {
  .cabecera,
  .pie,
  .barra-lateral,
  .boton-arriba,
  .boton-compartir,
  #boton-modo-lectura,
  .acciones-articulo,
  .relacionados,
  .comentarios,
  .fecha-actualizado {
    display: none !important;
  }

  .contenedor--con-barra {
    display: block;
    max-width: none;
  }

  .col-principal {
    max-width: none;
    margin: 0;
  }

  body,
  .post-detalle-contenido {
    color: #000;
    background: #fff;
    font-size: 12pt;
    line-height: 1.5;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  .post-detalle-img {
    max-width: 100%;
  }
}

/* ---------------------------------------------------------------------
   Herramientas (formateador JSON y futuras utilidades del blog)
   --------------------------------------------------------------------- */

/* Pastilla "Nuevo" junto a un enlace de la cabecera */
.pastilla-nueva {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: white;
  background: var(--acento-calido);
  border-radius: 999px;
  vertical-align: middle;
}

/* Variante ancha de .contenedor para paginas de herramienta: el editor de
   texto necesita mas espacio horizontal que un articulo normal. */
.contenedor--ancho {
  max-width: 860px;
}

.pagina-herramienta .cabecera-herramienta {
  padding-top: 0.2rem;
}

.pagina-herramienta h1 {
  font-family: var(--fuente-titular);
  font-size: 2.1rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0.3rem 0 0.6rem;
}

.pagina-herramienta .intro {
  color: var(--tinta-tenue);
  font-size: 1.05rem;
  line-height: 1.6;
  max-width: 62ch;
  margin: 0 0 1.6rem;
}

.pagina-herramienta .intro strong {
  color: var(--tinta);
}

.caja-autor {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  padding: 1.1rem 1.2rem;
  margin: 2.2rem 0 0;
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: 10px;
}

.caja-autor-inicial {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-family: var(--fuente-titular);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caja-autor-nombre {
  margin: 0 0 0.25rem;
  font-weight: 600;
  color: var(--tinta);
}

.caja-autor-bio {
  margin: 0;
  color: var(--tinta-tenue);
  font-size: 0.92rem;
  line-height: 1.5;
}

.aviso-privacidad {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.9rem 1.1rem;
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: 8px;
  font-size: 0.9rem;
  color: var(--tinta-tenue);
  margin-bottom: 2rem;
}

.aviso-privacidad svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: var(--acento);
}

.aviso-privacidad strong {
  color: var(--tinta);
}

.panel-herramienta {
  background: var(--bg-elevada);
  border: 1px solid var(--borde);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 2.2rem;
}

.barra-herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 1.1rem;
  border-bottom: 1px solid var(--borde);
  background: var(--bg);
}

/* Reinicio de .boton dentro de la barra de herramientas: el .boton global
   (pensado para formularios del panel admin) lleva margin-top y siempre
   fondo de acento, lo cual no encaja en una fila de botones en linea.
   Mismo patron que .paginacion .boton / .error-acciones .boton. */
.barra-herramientas .boton {
  margin-top: 0;
  padding: 0.5rem 0.9rem;
  font-size: 0.88rem;
  background: var(--bg-elevada);
  color: var(--tinta);
  border: 1px solid var(--borde);
}

.barra-herramientas .boton:hover {
  opacity: 1;
  border-color: var(--acento);
  color: var(--acento);
}

.barra-herramientas .boton.boton--principal {
  background: var(--acento);
  color: white;
  border-color: var(--acento);
}

.barra-herramientas .boton.boton--principal:hover {
  opacity: 0.9;
  color: white;
}

.selector-indent {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.45rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--borde);
  background: var(--bg-elevada);
  color: var(--tinta);
}

.espaciador {
  flex: 1;
}

.estado {
  font-size: 0.85rem;
  font-weight: 500;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}

.estado--ok {
  color: #1a7f4b;
  background: rgba(26, 127, 75, 0.1);
}

.estado--error {
  color: #b91c1c;
  background: rgba(185, 28, 28, 0.1);
}

.estado--neutro {
  color: var(--tinta-tenue);
  background: var(--bg);
}

.zona-editor {
  display: grid;
  grid-template-columns: 1fr;
}

#entrada-json {
  width: 100%;
  min-height: 340px;
  padding: 1.1rem;
  border: none;
  resize: vertical;
  font-family: var(--fuente-mono);
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--bg-elevada);
}

#entrada-json:focus {
  outline: none;
}

.mensaje-error-json {
  margin: 0;
  padding: 0.7rem 1.1rem;
  background: rgba(185, 28, 28, 0.08);
  border-top: 1px solid var(--borde);
  color: #b91c1c;
  font-family: var(--fuente-mono);
  font-size: 0.82rem;
}

.mensaje-error-json[hidden] {
  display: none;
}

.bloque-apoyo {
  margin-bottom: 2.2rem;
}

.bloque-apoyo h2 {
  font-family: var(--fuente-titular);
  font-size: 1.35rem;
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.bloque-apoyo p,
.bloque-apoyo li {
  color: var(--tinta-tenue);
  line-height: 1.65;
  font-size: 0.98rem;
}

.faq dt {
  font-family: var(--fuente-titular);
  font-weight: 600;
  color: var(--tinta);
  margin-top: 1.1rem;
}

.faq dd {
  margin: 0.3rem 0 0;
  color: var(--tinta-tenue);
  line-height: 1.6;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .estado--ok {
    color: #4ade80;
    background: rgba(74, 222, 128, 0.12);
  }

  :root:not([data-theme="light"]) .estado--error {
    color: #ff8080;
    background: rgba(185, 28, 28, 0.18);
  }

  :root:not([data-theme="light"]) .mensaje-error-json {
    background: rgba(185, 28, 28, 0.18);
    color: #ff8080;
  }
}

:root[data-theme="dark"] .estado--ok {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
}

:root[data-theme="dark"] .estado--error {
  color: #ff8080;
  background: rgba(185, 28, 28, 0.18);
}

:root[data-theme="dark"] .mensaje-error-json {
  background: rgba(185, 28, 28, 0.18);
  color: #ff8080;
}

@media (max-width: 640px) {
  .pagina-herramienta h1 {
    font-size: 1.6rem;
  }
}