/* ============================================================================
   Contenido de páginas y entradas — lo que se escribe en el editor.
   ============================================================================

   Este archivo se carga en el FRENTE y DENTRO DEL EDITOR (hook
   `enqueue_block_assets`, ver inc/contenido.php), sin prefijos.

   Por eso la GEOMETRÍA (líneas, márgenes, sangrías) se escribe para los dos
   contenedores a la vez:

       :where(.page-content, .editor-styles-wrapper) blockquote { … }

   `.page-content` es el del frente (page.php) y `.editor-styles-wrapper` el
   lienzo del editor. Va en `:where()` para que la especificidad quede en cero y
   cualquier regla del tema o del usuario pueda ganarle sin pelear.

   Los COLORES DE TEXTO, en cambio, solo se aplican en el frente. El lienzo del
   editor es blanco —y así se queda, no se le toca el fondo— así que el gris
   claro del tema no se leería ahí. En el editor el texto se deja con el color
   que trae WordPress; la línea cian sí se pinta en los dos sitios, porque se ve
   igual de bien sobre blanco que sobre oscuro.

   NO se usa `add_editor_style()`: esa función prefija TODOS los selectores con
   `.editor-styles-wrapper`, y los nuestros ya lo llevan dentro del `:where()`.
*/

/* ── Ancho del lienzo del editor — NO QUITAR ────────────────────────────────

   En cuanto un tema tiene `theme.json`, WordPress deja de aplicar su regla de
   siempre para temas clásicos:

       html :where(.wp-block){ max-width:840px; margin-top:28px; margin-bottom:28px }
       html :where(.wp-block)[data-align="wide"]{ max-width:1100px }

   …y espera que el tema declare `settings.layout.contentSize`. Como este tema
   no la tenía, al añadir el `theme.json` (para poder redondear las imágenes)
   los bloques del editor pasaron a ocupar todo el ancho y quedaron pegados a la
   izquierda.

   Se restaura AQUÍ y no en `theme.json` a propósito: `layout.contentSize`
   también afecta al FRENTE —le pondría un `max-width` a lo que va dentro de los
   grupos, que hoy ocupa los 1176 px del contenedor— y eso no se pidió. Estas
   clases (`.wp-block`, `.editor-styles-wrapper`) solo existen en el editor, así
   que la web publicada no se entera.

   Los valores son exactamente los que usaba WordPress antes. Medido: bloque de
   840 px centrado en un lienzo de 969 px. */
:where(.editor-styles-wrapper) .wp-block {
  max-width: 840px;
  margin-top: 28px;
  margin-bottom: 28px;
  /* El centrado también lo perdía: sin esto quedan pegados a la izquierda. */
  margin-left: auto;
  margin-right: auto;
}
:where(.editor-styles-wrapper) .wp-block[data-align="wide"] { max-width: 1100px; }
:where(.editor-styles-wrapper) .wp-block[data-align="full"] { max-width: none; }
/* Dentro de columnas cada bloque llena su columna, como en el núcleo. */
:where(.editor-styles-wrapper) .wp-block-columns .wp-block {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ── Citas ──────────────────────────────────────────────────────────────────
   La línea a la izquierda. Es lo que sale con el bloque «Cita». */
/* OJO con los márgenes: aquí solo se toca el VERTICAL (`margin-block`).
   Con el atajo `margin: 26px 0` los laterales quedaban en 0, y como esta regla
   tiene la misma especificidad que la del ancho del editor y va después, le
   ganaba al `margin-inline: auto` y la cita se iba a la izquierda mientras el
   resto del contenido seguía centrado. Lo mismo vale para los estilos de abajo.
   El `box-sizing` es por lo mismo: sin él, el relleno y el borde se sumaban al
   ancho y el bloque medía 863 px en vez de 840, así que tampoco cuadraba. */
:where(.page-content, .editor-styles-wrapper) blockquote,
:where(.page-content, .editor-styles-wrapper) .wp-block-quote {
  box-sizing: border-box;
  margin-block: 26px;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--cy-txt, #00b5d4);
  border-radius: 0;
  font-style: italic;
}
/* En el frente sí hay que matar la sangría de 40 px que el navegador le pone
   por defecto a `blockquote`; en el editor esos laterales los usa el centrado. */
:where(.page-content) blockquote { margin-inline: 0; color: var(--muted); }

/* El párrafo de dentro conserva su margen del navegador (1em arriba y abajo).
   Como la cita ya tiene su propio espaciado, ese margen empujaba el texto hacia
   abajo y la línea sobresalía por arriba, como si hubiera un renglón vacío. */
:where(.page-content, .editor-styles-wrapper) blockquote > :first-child { margin-top: 0; }
:where(.page-content, .editor-styles-wrapper) blockquote > :last-child { margin-bottom: 0; }

:where(.page-content, .editor-styles-wrapper) blockquote cite,
:where(.page-content, .editor-styles-wrapper) .wp-block-quote__citation {
  display: block; margin-top: 10px; font-style: normal; font-size: 13px;
}
:where(.page-content) blockquote cite,
:where(.page-content) .wp-block-quote__citation { color: var(--faint); }

/* ── Estilos de bloque que se eligen en la barra lateral ─────────────────────
   Registrados en inc/contenido.php. Sirven para cualquier párrafo, lista o
   grupo, sin tener que convertirlo en cita. */

/* «Nota»: solo la línea, como la cita pero sin cursiva. */
:where(.page-content, .editor-styles-wrapper) .is-style-owari-nota {
  box-sizing: border-box;
  margin-block: 22px;
  padding: 2px 0 2px 20px;
  border-left: 3px solid var(--cy-txt, #00b5d4);
}
:where(.page-content) .is-style-owari-nota { color: var(--muted); }

/* «Aviso»: la línea y además el panel, para lo que tiene que destacar. */
:where(.page-content, .editor-styles-wrapper) .is-style-owari-aviso {
  box-sizing: border-box;
  margin-block: 22px;
  padding: 16px 20px;
  border-left: 3px solid var(--cy-txt, #00b5d4);
  border-radius: 0 14px 14px 0;
}
:where(.page-content) .is-style-owari-aviso { background: var(--panel); color: var(--text); }
/* En el editor, sobre blanco, un gris muy suave para que se note el recuadro. */
:where(.editor-styles-wrapper) .is-style-owari-aviso { background: rgba(0, 181, 212, .06); }

:where(.page-content, .editor-styles-wrapper) .is-style-owari-nota > :first-child,
:where(.page-content, .editor-styles-wrapper) .is-style-owari-aviso > :first-child { margin-top: 0; }
:where(.page-content, .editor-styles-wrapper) .is-style-owari-nota > :last-child,
:where(.page-content, .editor-styles-wrapper) .is-style-owari-aviso > :last-child { margin-bottom: 0; }

/* En listas la línea necesita sitio para las viñetas, que si no se salen. */
:where(.page-content, .editor-styles-wrapper) ul.is-style-owari-nota,
:where(.page-content, .editor-styles-wrapper) ol.is-style-owari-nota,
:where(.page-content, .editor-styles-wrapper) ul.is-style-owari-aviso,
:where(.page-content, .editor-styles-wrapper) ol.is-style-owari-aviso {
  padding-left: 42px;
}

/* ── Imágenes ───────────────────────────────────────────────────────────────
   Un redondeo suave por defecto, acorde con las tarjetas del tema. Va en
   `:where()` (especificidad 0) a propósito: el radio que se ponga a UNA imagen
   desde la barra lateral se escribe como estilo en línea y siempre gana. */
:where(.page-content, .editor-styles-wrapper) .wp-block-image img,
:where(.page-content, .editor-styles-wrapper) figure.wp-block-image > img {
  border-radius: 12px;
}