.cmr-diff-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--crema);
}

.cmr-diff-resumen {
  font-family: var(--sans); font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: rgba(26,26,26,0.6);
}

.cmr-diff-titulo { margin-bottom: 0.7rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--crema); }

.cmr-diff-titulo-lbl {
  display: block; margin-bottom: 0.3rem; font-family: var(--sans); font-size: 0.7rem;
  font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--verde);
}

.cmr-diff-cuerpo { max-height: 46vh; overflow-y: auto; }

.cmr-diff-linea {
  display: flex; gap: 0.55rem; align-items: baseline;
  padding: 0.28rem 0.45rem; border-radius: 4px;
  font-family: var(--sans); font-size: 0.92rem; line-height: 1.55;
}

.cmr-diff-linea.igual { color: rgba(26,26,26,0.45); }

.cmr-diff-linea.puesto { background: rgba(31,157,87,0.10); }

.cmr-diff-linea.quitado { background: rgba(160,32,25,0.09); }

.cmr-diff-signo {
  flex: none; width: 1ch; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-weight: 700; opacity: 0.75;
}

.cmr-diff-linea.puesto  .cmr-diff-signo { color: #0d5c4a; }

.cmr-diff-linea.quitado .cmr-diff-signo { color: var(--verde); }

.cmr-diff-linea.quitado .cmr-diff-txt { text-decoration: line-through; text-decoration-thickness: 1px;
  text-decoration-color: rgba(160,32,25,0.4); }

.cmr-diff-w { border-radius: 3px; padding: 0 0.12em; font-weight: 600; }

.cmr-diff-w.puesto { background: rgba(31,157,87,0.30); }

.cmr-diff-w.quitado { background: rgba(160,32,25,0.26); }

.cmr-preview-body .cmr-serie-kicker {
  font-family: var(--sans); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--verde);
  margin: 0 0 1.4rem; padding-bottom: 0.7rem;
  border-bottom: 2px solid var(--crema);
  display: inline-block;
}

.cmr-preview-body .cmr-serie-nota {
  margin: 2.2rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--crema);
  font-family: var(--sans); font-size: 0.85rem; line-height: 1.6;
  color: rgba(26,26,26,0.6);
}

.cmr-preview-body .cmr-pie-foto {
  margin: -0.6rem 0 1.8rem; font-family: var(--sans); font-size: 0.78rem;
  line-height: 1.5; color: rgba(26,26,26,0.55); clear: both;
}

.cmr-bubble-enlace { display: flex; align-items: center; gap: 0.3rem; padding: 0 0.15rem; }

.cmr-bubble-enlace input {
  width: 260px; max-width: 42vw; font-family: var(--sans); font-size: 0.8rem;
  padding: 0.3rem 0.5rem; border-radius: 6px; border: 1px solid rgba(255,255,255,0.25);
  background: rgba(255,255,255,0.1); color: #fff; outline: none;
}

.cmr-bubble-enlace input::placeholder { color: rgba(255,255,255,0.5); }

.cmr-bubble-enlace input:focus { border-color: rgba(255,255,255,0.6); }

.cmr-meta { border: 1px solid var(--crema); border-radius: 10px; margin: 0.6rem 0 1rem; }

.cmr-meta-cab {
  display: flex; align-items: center; gap: 0.45rem; width: 100%;
  background: none; border: 0; cursor: pointer; padding: 0.5rem 0.8rem;
  font-family: var(--sans); font-size: 0.85rem; color: var(--tinta); text-align: left;
}

.cmr-meta-cab:hover { background: rgba(26,26,26,0.03); }

.cmr-meta-cab-lbl { font-weight: 600; }

.cmr-meta-resumen { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin-left: 0.3rem; }

.cmr-meta-dato { font-size: 0.78rem; color: var(--gris); }

.cmr-meta-dato.es-destacado { color: var(--verde); font-weight: 600; }

.cmr-meta-slug { font-size: 0.74rem; color: var(--gris); background: rgba(26,26,26,0.06); padding: 0.1em 0.4em; border-radius: 4px; }

.cmr-meta-campos {
  display: grid; gap: 0.9rem; padding: 0.8rem;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  border-top: 1px solid var(--crema);
}

.cmr-publicar-head { display: flex; align-items: baseline; gap: 0.9rem; margin-bottom: 0.8rem; }

.cmr-publicar-head h1 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2rem); }

.cmr-publicar-volver {
  display: inline-flex; align-items: center; gap: 0.3rem; margin-left: auto;
  font-family: var(--sans); font-size: 0.82rem; text-decoration: none; color: var(--gris);
}

.cmr-publicar-volver:hover { color: var(--tinta); }

.cmr-publicar-grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 2rem; }

.cmr-publicar-grid.is-solo { grid-template-columns: minmax(0, 1fr); }

.cmr-publicar-doc { min-width: 0; }

.cmr-publicar-lateral {
  position: sticky; top: 88px; align-self: start;
  max-height: calc(100vh - 108px); display: flex; min-width: 0;
}

.cmr-publicar-lateral .cmr-rd {
  margin: 0; display: flex; flex-direction: column; width: 100%; min-height: 0;
}

.cmr-publicar-lateral .cmr-rd-borrador { margin-top: 0; }

.cmr-publicar-lateral .cmr-rd-img { flex-wrap: wrap; }

.cmr-publicar-lateral .cmr-rd-img-acc { margin-left: 2rem; }

.cmr-publicar-lateral .cmr-rd-chips { flex-direction: column; align-items: flex-start; }

.cmr-publicar-lateral {
  
  height: auto; max-height: calc(100dvh - 110px);
}

.cmr-publicar-lateral .cmr-rd { height: auto; max-height: 100%; }

.cmr-publicar, .cmr-est { position: relative; z-index: 0; }

/* El panel va sin `z-index`, a diferencia de sus vecinos, y no es un descuido:
   con `z-index: 0` creaba contexto de apilamiento, y entonces su `::before`
   —el de la cuadrícula, con `z-index: -1`— se quedaba atrapado dentro y se
   pintaba ENCIMA del fondo de la tarjeta en vez de debajo. Sin contexto
   propio, la capa cae al fondo de la página, que es su sitio. */
.cmr-panel { position: relative; }

/* La cuadrícula del fondo. `background-color` decía `var(--serif)`, que es una
   familia tipográfica y no un color: la declaración era inválida, la capa
   nunca llegó a ser opaca y las líneas acababan pasando por debajo del texto
   del panel. */
.cmr-publicar::before, .cmr-panel::before, .cmr-est::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--papel);
  background-image:
    linear-gradient(rgba(26,26,26,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26,26,26,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* Y el panel va sobre papel liso, no sobre la cuadrícula. Una tabla de
   solicitudes con líneas de 28 px cruzándola por detrás se lee mal: la
   cuadrícula compite con las filas, que son lo que hay que seguir con el ojo.
   Queda de fondo alrededor, que es donde decora sin estorbar.

   El hueco de la cabecera pasa de `padding` a `margin`: dentro de la tarjeta
   era un vacío de siete centímetros antes del título. */
.cmr-panel {
  margin-top: calc(var(--nav-alto) + 1rem);
  margin-bottom: 3rem;
  padding-top: 2.2rem;
  padding-bottom: 2.6rem;
  background: var(--blanco);
  border: 1px solid var(--crema);
  border-radius: 12px;
  box-shadow: var(--sombra);
}

.cmr-publicar .cmr-form, .cmr-publicar .cmr-toolbar, .cmr-publicar .cmr-editor-area,
.cmr-est .cmr-est-cifra {
  background-color: var(--blanco);
}

.cmr-publicar .cmr-form { padding: 1rem 1.2rem 1.4rem; border-radius: 12px; border: 1px solid var(--crema); }

@media (prefers-reduced-motion: reduce) {
  .cmr-preview-body img { transition: none; }
}