/* ================================================================
   LM-BLOG.CSS · Blog (/blog/) y Escritorio (/escritorio/) (v1)
   Va después de luena-v2.css y lm-lecciones.css y usa sus colores (--lm-*).
   ================================================================ */

/* ================== 1. LISTA DEL BLOG ================== */
.lm-blog-pagina {
  background: var(--lm-papel);    /* Lectura sobre papel claro */
}
.lm-blog-temas {
  display: flex;                  /* Temas en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 8px;                       /* Separación */
}
.lm-blog-temas .lm-chip {
  text-decoration: none;          /* Son enlaces con forma de chip */
  display: inline-flex;           /* Centrado */
  align-items: center;            /* Centrado vertical */
}
.lm-blog-temas .lm-chip[aria-current="page"] {
  border-color: var(--lm-oro);    /* El tema actual, en dorado */
  background: rgba(212, 175, 55, .12); /* Velo dorado */
}
.lm-blog-tarjetas {
  display: grid;                  /* Rejilla de tarjetas */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); /* Las que quepan, nunca más estrechas de 300 px */
  gap: 24px;                      /* Separación */
  list-style: none;               /* Sin viñetas */
  margin: 0;                      /* Sin márgenes */
  padding: 0;                     /* Sin sangría */
}
.lm-blog-tarjeta > a {
  display: flex;                  /* Imagen arriba, texto abajo */
  flex-direction: column;         /* En columna */
  height: 100%;                   /* Todas igual de altas en la fila */
  background: var(--lm-blanco);   /* Tarjeta blanca */
  border: 1px solid var(--lm-linea); /* Borde suave */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta la imagen */
  color: var(--lm-tinta);         /* Texto oscuro */
  text-decoration: none;          /* Sin subrayado */
  transition: border-color .15s ease, transform .15s ease; /* Suave */
}
.lm-blog-tarjeta > a:hover {
  border-color: var(--lm-bronce); /* Borde bronce al pasar */
}
@media (prefers-reduced-motion: no-preference) {
  .lm-blog-tarjeta > a:hover { transform: translateY(-2px); } /* Se levanta un poco */
}
.lm-blog-tarjeta__img {
  display: block;                 /* Bloque */
  aspect-ratio: 16 / 9;           /* Proporción de vídeo */
  background: var(--lm-grafito);  /* Fondo mientras carga */
  overflow: hidden;               /* Recorta */
}
.lm-blog-tarjeta__img img {
  width: 100%;                    /* Llena el hueco */
  height: 100%;                   /* Llena el hueco */
  object-fit: cover;              /* Recorta sin deformar */
  display: block;                 /* Sin hueco inferior */
}
.lm-blog-tarjeta__img--vacia {
  display: grid;                  /* Centra el icono */
  place-items: center;            /* Centrado */
  background: radial-gradient(circle at 30% 30%, #202733, var(--lm-grafito)); /* Degradado oscuro */
  color: var(--lm-oro);           /* Icono dorado */
  font-size: 2.6rem;              /* Grande */
}
.lm-blog-tarjeta__cuerpo {
  display: grid;                  /* Textos apilados */
  gap: 8px;                       /* Separación */
  padding: 18px 20px 22px;        /* Relleno */
  flex: 1;                        /* Ocupa el resto */
  align-content: start;           /* Arriba */
}
.lm-blog-tarjeta__tema {
  font-size: var(--lm-t-xs);      /* 13 px */
  font-weight: 700;               /* Negrita */
  letter-spacing: .06em;          /* Aire */
  text-transform: uppercase;      /* Mayúsculas */
  color: var(--lm-bronce);        /* Bronce */
}
.lm-blog-tarjeta__titulo {
  font-size: 1.4rem;              /* Grande */
  font-weight: 800;               /* Muy negrita */
  font-stretch: var(--lm-estrecha); /* Condensado */
  line-height: 1.08;              /* Apretado */
}
.lm-blog-tarjeta__resumen {
  color: var(--lm-tinta-2);       /* Gris */
  font-size: var(--lm-t-s);       /* 15 px */
  line-height: 1.5;               /* Lectura */
  display: -webkit-box;           /* Como mucho 3 líneas */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lm-blog-tarjeta__meta {
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-tinta-2);       /* Gris */
  margin-top: auto;               /* Al fondo de la tarjeta */
}
/* La más reciente, en grande (solo en la primera página) */
.lm-blog-tarjeta--destacada {
  grid-column: 1 / -1;            /* Toda la fila */
}
@media (min-width: 820px) {
  .lm-blog-tarjeta--destacada > a {
    display: grid;                /* Imagen | texto */
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); /* Imagen algo más ancha */
  }
  .lm-blog-tarjeta--destacada .lm-blog-tarjeta__img {
    aspect-ratio: auto;           /* Ocupa la altura del texto */
    min-height: 300px;            /* Sin quedarse corta */
  }
  .lm-blog-tarjeta--destacada .lm-blog-tarjeta__cuerpo {
    padding: 32px 34px;           /* Más aire */
    align-content: center;        /* Centrado vertical */
  }
  .lm-blog-tarjeta--destacada .lm-blog-tarjeta__titulo {
    font-size: clamp(1.8rem, 3vw, 2.4rem); /* Más grande */
  }
}
@media (min-width: 960px) {
  .lm-blog-tarjetas--tres {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* Tres en fila (Sigue leyendo) */
  }
}
.lm-blog-paginas {
  display: flex;                  /* En fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  justify-content: center;        /* Centrados */
  align-items: center;            /* Centrados */
  gap: 12px 20px;                 /* Separación */
  margin-top: 36px;               /* Separación */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-blog-paginas .lm-btn--linea {
  color: var(--lm-tinta);         /* Sobre claro */
  border-color: var(--lm-linea);  /* Borde suave */
}
.lm-blog-vacio {
  text-align: center;             /* Centrado */
  max-width: 36rem;               /* Estrecho */
  margin: 0 auto;                 /* Centrado */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-blog-vacio__titulo {
  font-size: var(--lm-t-l);       /* 21 px */
  font-weight: 700;               /* Negrita */
  color: var(--lm-tinta);         /* Oscuro */
}
.lm-blog-vacio a {
  color: var(--lm-bronce);        /* Bronce */
  font-weight: 700;               /* Negrita */
}

/* ================== 2. UNA ENTRADA ================== */
.lm-blog-previa {
  position: sticky;               /* Siempre a la vista */
  top: var(--nav-h);              /* Bajo el menú */
  z-index: 50;                    /* Encima del texto */
  background: var(--lm-teal);     /* Teal: es un aviso del sistema */
  color: var(--lm-grafito);       /* Texto oscuro */
  padding: 10px 0;                /* Relleno */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-blog-entrada__cabeza {
  padding-top: calc(var(--nav-h) + 40px); /* Deja sitio al menú fijo */
}
.lm-blog-previa + .lm-blog-entrada .lm-blog-entrada__cabeza {
  padding-top: 32px;              /* El aviso ya deja el hueco */
}
.lm-blog-pagina main > .lm-blog-previa:first-child {
  margin-top: var(--nav-h);       /* El aviso empieza bajo el menú */
}
.lm-blog-entrada__cabeza > * {
  max-width: 46rem;               /* Misma anchura que el texto */
}
.lm-migas--claro,
.lm-migas--claro a {
  color: var(--lm-tinta-2);       /* Migas sobre fondo claro */
}
.lm-migas--claro a:hover {
  color: var(--lm-bronce);        /* Bronce al pasar */
}
.lm-blog-entrada__titulo {
  font-size: clamp(2.1rem, 5.4vw, 3.6rem); /* Titular grande */
  font-weight: 800;               /* Muy negrita */
  font-stretch: 70%;              /* Condensado, como las guías */
  line-height: 1;                 /* Apretado */
  color: var(--lm-tinta);         /* Oscuro */
  margin: 0 0 18px;               /* Separación */
}
.lm-blog-entrada__entradilla {
  font-size: var(--lm-t-l);       /* 21 px */
  line-height: 1.5;               /* Lectura */
  color: var(--lm-tinta-2);       /* Gris oscuro */
  margin: 0 0 18px;               /* Separación */
}
.lm-blog-entrada__meta {
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-tinta-2);       /* Gris */
  margin: 0;                      /* Sin márgenes */
}
.lm-blog-entrada__meta a {
  color: var(--lm-bronce);        /* Bronce */
  font-weight: 700;               /* Negrita */
}
.lm-blog-entrada__medio {
  margin-top: 32px;               /* Separación con la cabecera */
  margin-bottom: 8px;             /* Separación con el texto */
}
.lm-blog-entrada__medio > * {
  max-width: 62rem;               /* Algo más ancho que el texto */
}
.lm-blog-portada {
  padding: 0 var(--gutter, 16px); /* Margen lateral en móvil (es un .container) */
}
.lm-blog-portada img,
.lm-blog-foto img {
  display: block;                 /* Sin hueco inferior */
  width: 100%;                    /* Ancho completo */
  height: auto;                   /* Proporción */
  border-radius: var(--lm-radio-m); /* Esquinas */
}
.lm-blog-texto {
  padding-top: 28px;              /* Separación */
  padding-bottom: 8px;            /* Separación */
  font-size: var(--lm-t-m);       /* 17 px */
  line-height: 1.7;               /* Lectura cómoda */
}
.lm-blog-texto h2 {
  margin-top: 44px;               /* Aire antes de cada apartado */
}
.lm-blog-texto h2,
.lm-blog-texto h3 {
  scroll-margin-top: calc(var(--nav-h) + 16px); /* Las anclas no quedan bajo el menú */
}
.lm-blog-texto a {
  color: var(--lm-bronce);        /* Enlaces bronce */
  text-decoration-thickness: 1px; /* Subrayado fino */
  text-underline-offset: 3px;     /* Separado del texto */
}
.lm-blog-texto ol {
  padding-left: 1.4em;            /* Sangría de número */
  margin: 0 0 16px;               /* Separación */
}
.lm-blog-texto mark {
  background: rgba(212, 175, 55, .35); /* Subrayador dorado */
  padding: 0 .15em;               /* Aire */
}
.lm-blog-texto code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Monoespaciada */
  font-size: .9em;                /* Algo menor */
  background: var(--lm-hueso);    /* Fondo hueso */
  padding: .1em .35em;            /* Aire */
  border-radius: 4px;             /* Esquinas */
}
.lm-blog-check {
  list-style: none;               /* Sin viñetas: casillas */
  padding-left: 0 !important;     /* Sin sangría */
}
.lm-blog-check li {
  position: relative;             /* Para la casilla */
  padding-left: 1.8em;            /* Sitio para la casilla */
}
.lm-blog-check li::before {
  content: "";                    /* Casilla */
  position: absolute;             /* A la izquierda */
  left: 0;                        /* Pegada */
  top: .3em;                      /* A la altura del texto */
  width: 1.05em;                  /* Tamaño */
  height: 1.05em;                 /* Tamaño */
  border: 2px solid var(--lm-bronce); /* Contorno bronce */
  border-radius: 4px;             /* Esquinas */
}
.lm-blog-check li.is-hecho::before {
  background: var(--lm-bronce) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m3.5 8.5 3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4'/%3E%3C/svg%3E") center / 80% no-repeat; /* Marcada */
}
.lm-blog-cita {
  margin: 28px 0;                 /* Separación */
  padding: 4px 0 4px 22px;        /* Sangría */
  border-left: 4px solid var(--lm-oro); /* Barra dorada */
}
.lm-blog-cita p {
  font-size: var(--lm-t-l);       /* 21 px */
  font-style: italic;             /* Cursiva */
  line-height: 1.45;              /* Lectura */
  margin: 0 0 6px;                /* Separación */
}
.lm-blog-cita cite {
  font-style: normal;             /* Sin cursiva */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-blog-cita cite::before {
  content: "— ";                  /* Raya */
}
.lm-blog-foto,
.lm-blog-video,
.lm-blog-acorde {
  margin: 28px 0;                 /* Separación */
}
.lm-blog-foto figcaption,
.lm-blog-video figcaption,
.lm-blog-acorde figcaption {
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-tinta-2);       /* Gris */
  margin-top: 8px;                /* Separación */
  line-height: 1.5;               /* Lectura */
}
.lm-blog-separador {
  display: block;                 /* Bloque */
  border: 0;                      /* Sin línea por defecto */
  height: auto;                   /* Alto del contenido */
  overflow: visible;              /* Que se vean los puntos */
  text-align: center;             /* Centrado */
  margin: 36px 0;                 /* Aire */
  max-width: 46rem;               /* Anchura del texto */
  line-height: 1;                 /* Sin aire extra */
}
.lm-blog-separador::after {
  content: "• • •";               /* Tres puntos */
  color: var(--lm-bronce);        /* Bronce */
  font-size: 1.1rem;              /* Tamaño */
  letter-spacing: .8em;           /* Aire entre puntos */
}
.lm-blog-enlace a {
  text-decoration: none;          /* El recuadro ya indica que es un enlace */
}
/* Vídeo de YouTube ligero */
.lm-blog-video__boton {
  position: relative;             /* Para el botón de play */
  display: block;                 /* Bloque */
  width: 100%;                    /* Ancho completo */
  aspect-ratio: 16 / 9;           /* Proporción de vídeo */
  padding: 0;                     /* Sin relleno */
  border: 0;                      /* Sin borde */
  border-radius: var(--lm-radio-m); /* Esquinas */
  overflow: hidden;               /* Recorta */
  background: var(--lm-grafito);  /* Fondo */
  cursor: pointer;                /* Mano */
}
.lm-blog-video__boton img {
  width: 100%;                    /* Llena */
  height: 100%;                   /* Llena */
  object-fit: cover;              /* Sin bandas negras */
  display: block;                 /* Sin hueco */
  opacity: .9;                    /* Algo apagada */
  transition: opacity .15s ease;  /* Suave */
}
.lm-blog-video__boton:hover img {
  opacity: 1;                     /* Se ilumina al pasar */
}
.lm-blog-video__play {
  position: absolute;             /* Encima de la miniatura */
  inset: 50% auto auto 50%;       /* En el centro */
  width: 72px;                    /* Tamaño */
  height: 50px;                   /* Tamaño */
  transform: translate(-50%, -50%); /* Centrado exacto */
  border-radius: 12px;            /* Esquinas */
  background: rgba(11, 14, 19, .82); /* Grafito translúcido */
  transition: background-color .15s ease; /* Suave */
}
.lm-blog-video__play::after {
  content: "";                    /* Triángulo */
  position: absolute;             /* Centrado */
  inset: 50% auto auto 54%;       /* Un poco a la derecha (se ve centrado) */
  transform: translate(-50%, -50%); /* Centrado exacto */
  border-style: solid;            /* Triángulo hecho con bordes */
  border-width: 11px 0 11px 18px; /* Tamaño */
  border-color: transparent transparent transparent #fff; /* Blanco */
}
.lm-blog-video__boton:hover .lm-blog-video__play,
.lm-blog-video__boton:focus-visible .lm-blog-video__play {
  background: #E62117;            /* Rojo de YouTube al pasar */
}
.lm-blog-video__iframe {
  display: block;                 /* Bloque */
  width: 100%;                    /* Ancho completo */
  aspect-ratio: 16 / 9;           /* Proporción */
  border: 0;                      /* Sin borde */
  border-radius: var(--lm-radio-m); /* Esquinas */
}
/* Diagrama de acorde */
.lm-blog-acorde {
  display: grid;                  /* Diagrama, botón y pie */
  justify-items: start;           /* A la izquierda */
  gap: 8px;                       /* Separación */
  padding: 18px 20px;             /* Relleno */
  background: var(--lm-blanco);   /* Tarjeta blanca */
  border: 1px solid var(--lm-linea); /* Borde */
  border-radius: var(--lm-radio-m); /* Esquinas */
  width: fit-content;             /* Lo que ocupe */
  max-width: 100%;                /* Sin salirse */
}
.lm-blog-acorde__dibujo svg {
  display: block;                 /* Sin hueco */
  transition: filter .2s ease;    /* Brillo al sonar */
}
.lm-blog-acorde.is-sonando .lm-blog-acorde__dibujo svg {
  filter: drop-shadow(0 0 6px rgba(0, 194, 199, .7)); /* Brillo teal mientras suena */
}
.lm-blog-acorde__oir {
  display: inline-flex;           /* Icono y texto */
  align-items: center;            /* Centrados */
  gap: 6px;                       /* Separación */
  min-height: 40px;               /* Táctil */
  padding: 0 14px;                /* Relleno */
  border: 1.5px solid var(--lm-teal); /* Teal: sonido */
  border-radius: var(--lm-radio-s); /* Esquinas */
  background: transparent;        /* Sin fondo */
  color: var(--lm-tinta);         /* Texto oscuro */
  font: 700 var(--lm-t-s) var(--lm-fuente); /* 15 px negrita */
  cursor: pointer;                /* Mano */
}
.lm-blog-acorde__oir:hover {
  background: rgba(0, 194, 199, .1); /* Velo teal */
}
/* Autor */
.lm-blog-autor {
  display: flex;                  /* Foto | texto */
  gap: 20px;                      /* Separación */
  align-items: flex-start;        /* Arriba */
  max-width: 46rem;               /* Anchura del texto */
  margin: 36px 0 56px;            /* Separación */
  padding: 22px 24px;             /* Relleno */
  background: var(--lm-blanco);   /* Tarjeta blanca */
  border: 1px solid var(--lm-linea); /* Borde */
  border-radius: var(--lm-radio-m); /* Esquinas */
}
.lm-blog-autor__foto {
  width: 72px;                    /* Foto pequeña */
  height: 90px;                   /* Proporción 4:5 */
  object-fit: cover;              /* Recorta */
  border-radius: var(--lm-radio-s); /* Esquinas */
  flex: none;                     /* No encoge */
}
.lm-blog-autor p {
  margin: 0 0 8px;                /* Separación */
  color: var(--lm-tinta-2);       /* Gris */
  font-size: var(--lm-t-s);       /* 15 px */
  line-height: 1.55;              /* Lectura */
}
.lm-blog-autor__nombre {
  font-weight: 800;               /* Negrita */
  color: var(--lm-tinta) !important; /* Oscuro */
  font-size: var(--lm-t-m) !important; /* 17 px */
}
.lm-blog-autor__enlaces {
  margin-bottom: 0 !important;    /* Sin hueco final */
}
.lm-blog-autor__enlaces a {
  color: var(--lm-bronce);        /* Bronce */
  font-weight: 700;               /* Negrita */
}
@media (max-width: 520px) {
  .lm-blog-autor {
    gap: 14px;                    /* Menos separación en móvil */
    padding: 18px;                /* Menos relleno */
  }
  .lm-blog-autor__foto {
    width: 52px;                  /* Foto más pequeña: más sitio para el texto */
    height: 65px;                 /* 4:5 */
  }
}
.lm-blog-relacionadas .lm-h2 {
  margin-bottom: 24px;            /* Separación con las tarjetas */
}

/* ================== 3. ESCRITORIO ================== */
.lm-esc-pagina {
  background: var(--lm-papel);    /* Fondo claro */
}
.lm-esc__puerta {
  padding-top: calc(var(--nav-h) + 24px); /* Bajo el menú */
}
.lm-esc__puerta h1,
.lm-esc__titulo {
  font-size: clamp(2rem, 5vw, 3rem); /* Titular */
  font-weight: 800;               /* Negrita */
  font-stretch: 70%;              /* Condensado */
  line-height: 1;                 /* Apretado */
  margin: 0 0 12px;               /* Separación */
}
.lm-esc__lista {
  padding-top: calc(var(--nav-h) + 32px); /* Bajo el menú */
}
.lm-esc__lista .lm-migas,
.lm-esc__lista .lm-migas a {
  color: var(--lm-tinta-2);       /* Migas sobre claro */
}
.lm-esc__cabeza {
  display: flex;                  /* Título | botón */
  flex-wrap: wrap;                /* Bajan si no caben */
  justify-content: space-between; /* A los extremos */
  align-items: flex-end;          /* Abajo */
  gap: 16px;                      /* Separación */
  margin-bottom: 24px;            /* Separación */
}
.lm-esc__hola {
  margin: 0;                      /* Sin márgenes */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-esc__hola a {
  color: var(--lm-bronce);        /* Bronce */
}
.lm-esc__entradas {
  list-style: none;               /* Sin viñetas */
  margin: 0 0 28px;               /* Separación */
  padding: 0;                     /* Sin sangría */
  border: 1px solid var(--lm-linea); /* Marco */
  border-radius: var(--lm-radio-m); /* Esquinas */
  background: var(--lm-blanco);   /* Blanco */
  overflow: hidden;               /* Recorta */
}
.lm-esc__entrada {
  padding: 16px 20px;             /* Relleno */
  border-bottom: 1px solid var(--lm-linea); /* Filete */
  display: grid;                  /* Título, datos y acciones */
  gap: 4px;                       /* Separación */
}
.lm-esc__entrada:last-child {
  border-bottom: 0;               /* Sin filete al final */
}
.lm-esc__entrada-titulo {
  font-size: var(--lm-t-l);       /* 21 px */
  font-weight: 800;               /* Negrita */
  font-stretch: 85%;              /* Algo condensado */
  color: var(--lm-tinta);         /* Oscuro */
  text-decoration: none;          /* Sin subrayado */
}
.lm-esc__entrada-titulo:hover {
  color: var(--lm-bronce);        /* Bronce al pasar */
}
.lm-esc__entrada-meta,
.lm-esc__entrada-acciones {
  margin: 0;                      /* Sin márgenes */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-esc__entrada-acciones a {
  color: var(--lm-bronce);        /* Bronce */
  font-weight: 700;               /* Negrita */
}
.lm-esc__estado {
  display: inline-block;          /* Etiqueta */
  padding: 2px 8px;               /* Relleno */
  border-radius: 999px;           /* Pastilla */
  font-size: var(--lm-t-xs);      /* 13 px */
  font-weight: 700;               /* Negrita */
  margin-right: 6px;              /* Separación */
}
.lm-esc__estado--borrador { background: #ECE7DE; color: #4A515C; }   /* Gris cálido */
.lm-esc__estado--publicada { background: #E7F4EC; color: #1C7547; }  /* Verde */
.lm-esc__estado--programada { background: #E3F6F7; color: #0B6E72; } /* Teal */
.lm-esc__vacio {
  padding: 28px;                  /* Relleno */
  border: 1.5px dashed var(--lm-linea); /* Borde discontinuo */
  border-radius: var(--lm-radio-m); /* Esquinas */
  margin-bottom: 28px;            /* Separación */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-esc__ayuda {
  background: var(--lm-blanco);   /* Blanco */
  border: 1px solid var(--lm-linea); /* Borde */
  border-radius: var(--lm-radio-m); /* Esquinas */
  padding: 14px 18px;             /* Relleno */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-esc__ayuda summary {
  cursor: pointer;                /* Mano */
  font-weight: 700;               /* Negrita */
  color: var(--lm-tinta);         /* Oscuro */
}
.lm-esc__ayuda ul {
  margin: 12px 0 0;               /* Separación */
  padding-left: 1.2em;            /* Sangría */
  display: grid;                  /* Puntos */
  gap: 8px;                       /* Separación */
}

/* ----- Editor ----- */
.lm-esc__barra {
  position: sticky;               /* Siempre a la vista */
  top: var(--nav-h);              /* Bajo el menú */
  z-index: 60;                    /* Encima del editor */
  margin-top: var(--nav-h);       /* Empieza bajo el menú fijo */
  background: var(--lm-grafito);  /* Oscuro, como el menú */
  border-top: 1px solid var(--lm-grafito-3); /* Filete */
  color: var(--lm-hueso);         /* Texto claro */
}
.lm-esc__barra-dentro {
  display: flex;                  /* En fila */
  align-items: center;            /* Centrados */
  gap: 10px 16px;                 /* Separación */
  min-height: 64px;               /* Altura */
  flex-wrap: wrap;                /* En móvil, dos filas */
  padding-top: 8px;               /* Relleno */
  padding-bottom: 8px;            /* Relleno */
}
.lm-esc__volver {
  color: var(--lm-niquel);        /* Gris claro */
  text-decoration: none;          /* Sin subrayado */
  font-weight: 700;               /* Negrita */
  font-size: var(--lm-t-s);       /* 15 px */
  white-space: nowrap;            /* Una línea */
}
.lm-esc__volver:hover {
  color: var(--lm-hueso);         /* Claro al pasar */
}
.lm-esc__aviso {
  flex: 1;                        /* Ocupa el hueco del medio */
  margin: 0;                      /* Sin márgenes */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-niquel);        /* Gris */
  min-width: 10rem;               /* Sitio mínimo */
}
.lm-esc__aviso.is-ok { color: #5FD39A; }        /* Verde: guardado */
.lm-esc__aviso.is-error { color: #FF8A8E; }     /* Rojo claro: error */
.lm-esc__aviso.is-pendiente { color: var(--lm-oro); } /* Dorado: sin guardar */
.lm-esc__botones {
  display: flex;                  /* Botones en fila */
  flex-wrap: wrap;                /* Bajan si no caben */
  gap: 8px;                       /* Separación */
}
.lm-esc__botones .lm-btn {
  min-height: 40px;               /* Algo más bajos que los normales */
  padding: .5rem 1rem;            /* Relleno */
}
.lm-esc__rejilla {
  display: grid;                  /* Texto | ajustes */
  grid-template-columns: minmax(0, 1fr) 320px; /* Ajustes a la derecha */
  gap: 32px;                      /* Separación */
  padding-top: 28px;              /* Separación con la barra */
  padding-bottom: 72px;           /* Aire al final */
  align-items: start;             /* Arriba */
}
.lm-esc__principal {
  background: var(--lm-blanco);   /* Hoja blanca */
  border: 1px solid var(--lm-linea); /* Borde */
  border-radius: var(--lm-radio-m); /* Esquinas */
  padding: 28px clamp(16px, 4vw, 56px) 40px; /* Relleno (con sitio para el + del editor) */
  min-height: 70vh;               /* Hoja grande */
}
.lm-esc__principal > .lm-alerta {
  margin-bottom: 16px;            /* Separación */
}
.lm-esc__titulo-campo {
  display: block;                 /* Bloque */
  width: 100%;                    /* Ancho completo */
  resize: none;                   /* Crece solo (JavaScript) */
  overflow: hidden;               /* Sin barra */
  border: 0;                      /* Sin borde */
  padding: 0;                     /* Sin relleno */
  margin: 0 0 18px;               /* Separación con el texto */
  background: transparent;        /* Sin fondo */
  font: 800 clamp(2rem, 4.6vw, 3.1rem)/1.02 var(--lm-fuente); /* Como el titular de la entrada */
  font-stretch: 70%;              /* Condensado */
  color: var(--lm-tinta);         /* Oscuro */
}
.lm-esc__titulo-campo:focus {
  outline: none;                  /* Sin recuadro: es una hoja */
}
.lm-esc__titulo-campo::placeholder {
  color: #B9B2A6;                 /* Gris claro */
}
.lm-esc__ajustes {
  display: grid;                  /* Cajas apiladas */
  gap: 16px;                      /* Separación */
  position: sticky;               /* Acompaña al bajar */
  top: calc(var(--nav-h) + 80px); /* Bajo la barra */
  max-height: calc(100vh - var(--nav-h) - 96px); /* Cabe en la pantalla */
  overflow-y: auto;               /* Con su propio scroll */
  padding-bottom: 8px;            /* Aire */
}
.lm-esc__caja {
  background: var(--lm-blanco);   /* Blanco */
  border: 1px solid var(--lm-linea); /* Borde */
  border-radius: var(--lm-radio-m); /* Esquinas */
  padding: 16px 18px;             /* Relleno */
  display: grid;                  /* Campos apilados */
  gap: 10px;                      /* Separación */
}
.lm-esc__caja h2 {
  margin: 0;                      /* Sin márgenes */
  font-size: var(--lm-t-s);       /* 15 px */
  font-weight: 800;               /* Negrita */
  text-transform: uppercase;      /* Mayúsculas */
  letter-spacing: .06em;          /* Aire */
  color: var(--lm-bronce);        /* Bronce */
}
.lm-esc__campo {
  display: grid;                  /* Etiqueta encima */
  gap: 6px;                       /* Separación */
  font-size: var(--lm-t-s);       /* 15 px */
  font-weight: 700;               /* Negrita */
  color: var(--lm-tinta);         /* Oscuro */
}
.lm-esc__campo > span:first-child {
  display: flex;                  /* Etiqueta y contador */
  justify-content: space-between; /* A los extremos */
}
.lm-esc__campo small {
  font-weight: 400;               /* Normal */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-esc__campo small.is-corto { color: #A86A00; } /* Naranja: muy corto */
.lm-esc__campo small.is-bien { color: #1C7547; }  /* Verde: bien */
.lm-esc__campo small.is-largo { color: #C0383E; } /* Rojo: Google lo cortará */
.lm-esc__campo input,
.lm-esc__campo textarea,
.lm-esc__campo select,
.lm-esc-bloque input,
.lm-esc-bloque select {
  width: 100%;                    /* Ancho completo */
  min-height: 42px;               /* Táctil */
  padding: 9px 11px;              /* Relleno */
  border: 1.5px solid var(--lm-linea); /* Borde */
  border-radius: var(--lm-radio-s); /* Esquinas */
  background: var(--lm-blanco);   /* Blanco */
  color: var(--lm-tinta);         /* Oscuro */
  font: 400 var(--lm-t-s)/1.4 var(--lm-fuente); /* 15 px */
}
.lm-esc__campo textarea {
  resize: vertical;               /* Solo hacia abajo */
}
.lm-esc__campo input:focus,
.lm-esc__campo textarea:focus,
.lm-esc__campo select:focus,
.lm-esc-bloque input:focus,
.lm-esc-bloque select:focus {
  outline: none;                  /* Sin contorno del navegador */
  border-color: var(--lm-teal);   /* Teal al escribir */
}
.lm-esc__campo input.is-error,
.lm-esc-bloque input.is-error {
  border-color: #D93F45;          /* Rojo: no es un vídeo de YouTube */
}
.lm-esc__slug {
  display: flex;                  /* Prefijo y campo */
  align-items: center;            /* Centrados */
  border: 1.5px solid var(--lm-linea); /* Borde */
  border-radius: var(--lm-radio-s); /* Esquinas */
  overflow: hidden;               /* Recorta */
}
.lm-esc__slug small {
  padding: 0 4px 0 10px;          /* Relleno */
  white-space: nowrap;            /* Una línea */
  font-size: var(--lm-t-xs);      /* 13 px */
}
.lm-esc__slug input {
  border: 0 !important;           /* El borde lo pone el contenedor */
  padding-left: 2px !important;   /* Pegado al prefijo */
  min-width: 0;                   /* Puede encoger */
}
.lm-esc__nota {
  margin: 0;                      /* Sin márgenes */
  font-size: var(--lm-t-xs);      /* 13 px */
  color: var(--lm-tinta-2);       /* Gris */
  line-height: 1.45;              /* Lectura */
}
.lm-esc__estado-linea {
  margin: 0;                      /* Sin márgenes */
  font-size: var(--lm-t-s);       /* 15 px */
  color: var(--lm-tinta-2);       /* Gris */
}
.lm-esc__ver {
  font-weight: 700;               /* Negrita */
  color: var(--lm-bronce);        /* Bronce */
  font-size: var(--lm-t-s);       /* 15 px */
}
.lm-esc__portada img,
.lm-esc__miniatura {
  display: block;                 /* Bloque */
  width: 100%;                    /* Ancho de la caja */
  height: auto;                   /* Proporción */
  border-radius: var(--lm-radio-s); /* Esquinas */
}
.lm-esc__portada {
  margin: 0;                      /* Sin márgenes */
}
.lm-esc__portada-botones {
  display: flex;                  /* En fila */
  align-items: center;            /* Centrados */
  gap: 14px;                      /* Separación */
}
.lm-esc__subir {
  color: var(--lm-tinta) !important; /* Botón sobre claro */
  border-color: var(--lm-linea) !important; /* Borde suave */
  min-height: 40px;               /* Algo más bajo */
  cursor: pointer;                /* Mano */
}
.lm-esc__subir:focus-within {
  border-color: var(--lm-teal) !important; /* Foco con teclado */
}
.lm-esc__enlace {
  border: 0;                      /* Botón con aspecto de enlace */
  background: none;               /* Sin fondo */
  padding: 0;                     /* Sin relleno */
  color: var(--lm-bronce);        /* Bronce */
  font: 700 var(--lm-t-s) var(--lm-fuente); /* 15 px negrita */
  text-decoration: underline;     /* Subrayado */
  cursor: pointer;                /* Mano */
}
.lm-esc__borrar {
  color: #C0383E;                 /* Rojo */
}
.lm-esc__caja--peligro {
  background: transparent;        /* Sin fondo */
  border-style: dashed;           /* Discontinuo */
}
.lm-esc__barra .lm-btn--linea {
  color: var(--lm-hueso);         /* Sobre la barra oscura */
}
.lm-esc__ajustes .lm-esc__ayuda {
  order: 10;                      /* Al final */
}
@media (max-width: 960px) {
  .lm-esc__rejilla {
    grid-template-columns: 1fr;   /* Ajustes debajo del texto */
  }
  .lm-esc__ajustes {
    position: static;             /* Sin fijar */
    max-height: none;             /* Sin límite */
    overflow: visible;            /* Sin scroll propio */
  }
}
@media (max-width: 600px) {
  .lm-esc__botones {
    width: 100%;                  /* Fila completa */
  }
  .lm-esc__botones .lm-btn {
    flex: 1;                      /* Botones repartidos */
    padding: .5rem .6rem;         /* Menos relleno */
  }
  .lm-esc__botones [data-previa] span {
    display: none;                /* Solo el ojo: no cabe el texto */
  }
  .lm-esc__principal {
    padding-top: 20px;            /* Menos aire */
  }
}

/* ----- Editor.js con el aspecto del blog ----- */
.lm-esc .codex-editor {
  font-family: var(--lm-fuente);  /* Archivo */
  font-size: var(--lm-t-m);       /* 17 px, como el blog */
  line-height: 1.7;               /* Lectura */
  color: var(--lm-tinta);         /* Oscuro */
}
.lm-esc .ce-block__content,
.lm-esc .ce-toolbar__content {
  max-width: 46rem;               /* Misma anchura que la entrada publicada */
}
.lm-esc .ce-header {
  font-weight: 800;               /* Como en el blog */
  font-stretch: var(--lm-estrecha); /* Condensado */
  line-height: 1.1;               /* Apretado */
  color: var(--lm-bronce);        /* Bronce */
  padding: .6em 0 .2em;           /* Aire */
}
.lm-esc h2.ce-header { font-size: var(--lm-t-xl); } /* Título de apartado */
.lm-esc h3.ce-header { font-size: var(--lm-t-l); color: var(--lm-tinta); font-stretch: 85%; } /* Subtítulo */
.lm-esc .cdx-quote__text {
  font-style: italic;             /* Cursiva, como en el blog */
  min-height: 60px;               /* Más bajo que el de serie */
}
.lm-esc .cdx-warning {
  background: var(--lm-hueso);    /* Como el recuadro del blog */
  border-left: 4px solid var(--lm-bronce); /* Barra bronce */
  border-radius: 0 var(--lm-radio-s) var(--lm-radio-s) 0; /* Esquinas */
  padding: 14px 18px;             /* Relleno */
}
.lm-esc .cdx-warning::before {
  display: none;                  /* Sin el icono de serie */
}
.lm-esc .image-tool__image-picture {
  border-radius: var(--lm-radio-m); /* Esquinas como en el blog */
}
.lm-esc .ce-delimiter {
  line-height: 1.6em;             /* Más compacto */
}
.lm-esc .ce-delimiter::before {
  content: "· · ·";               /* Como en el blog */
  color: var(--lm-bronce);        /* Bronce */
  letter-spacing: .5em;           /* Aire */
  font-size: 1.4rem;              /* Grande */
}
.lm-esc .cdx-search-field__input {
  border: 0;                      /* El buscador del menú de bloques, sin el borde de los campos de la web */
  box-shadow: none;               /* Sin sombra */
  background: transparent;        /* Sin fondo */
  min-height: 0;                  /* Altura propia */
  padding: 0;                     /* Sin relleno */
  outline: none;                  /* Sin contorno */
}
/* Bloques propios (vídeo, acorde, enlace) */
.lm-esc-bloque {
  display: grid;                  /* Campos apilados */
  gap: 10px;                      /* Separación */
  padding: 16px;                  /* Relleno */
  margin: 8px 0;                  /* Separación */
  border: 1.5px dashed var(--lm-linea); /* Borde discontinuo: es un bloque especial */
  border-radius: var(--lm-radio-m); /* Esquinas */
  background: #FDFCF9;            /* Casi blanco */
}
.lm-esc-bloque__etiqueta {
  font-size: var(--lm-t-xs);      /* 13 px */
  font-weight: 700;               /* Negrita */
  color: var(--lm-bronce);        /* Bronce */
  text-transform: uppercase;      /* Mayúsculas */
  letter-spacing: .05em;          /* Aire */
}
.lm-esc-bloque .lm-esc-bloque__pie {
  font-size: var(--lm-t-xs);      /* Pie más pequeño */
  min-height: 36px;               /* Más bajo */
}
.lm-esc-video__vista {
  width: 100%;                    /* Ancho completo */
  max-width: 420px;               /* Sin pasarse */
  border-radius: var(--lm-radio-s); /* Esquinas */
}
.lm-esc-acorde__fila {
  display: grid;                  /* Cuatro desplegables */
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* En fila */
  gap: 8px;                       /* Separación */
}
.lm-esc-acorde__dibujo svg {
  display: block;                 /* Sin hueco */
}
.lm-esc-acorde__oir {
  justify-self: start;            /* A su tamaño */
  min-height: 38px;               /* Táctil */
  padding: 0 14px;                /* Relleno */
  border: 1.5px solid var(--lm-teal); /* Teal: sonido */
  border-radius: var(--lm-radio-s); /* Esquinas */
  background: transparent;        /* Sin fondo */
  font: 700 var(--lm-t-s) var(--lm-fuente); /* 15 px negrita */
  cursor: pointer;                /* Mano */
}
@media (max-width: 600px) {
  .lm-esc-acorde__fila {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* Dos y dos en móvil */
  }
}