/*
 * Separador (core/separator): Horizontal / Vertical con grosor --hr-w.
 * Ver separator-line.php. Se carga en frontend y en el iframe del editor.
 *
 * Los !important de height ganan a la regla de core
 * .wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots)
 * (height: 2px al elegir color), y los de width/margin/padding de la vertical
 * a .alignwide/.alignfull de main.css (width: 100vw !important).
 */

/* Horizontal (hr: gana a la regla base de core sin depender del orden) */
hr.wp-block-separator {
  border: 0;
  border-top: var(--hr-w, 1px) solid;
  height: 0 !important;
}

/* Quita el margen del hr del navegador (0.5em arriba/abajo, auto a los
   lados). Con :where (especificidad 0) para que sigan ganando los márgenes
   negativos de .alignwide/.alignfull y el margin:auto del editor en los
   bloques de primer nivel. */
:where(hr.wp-block-separator) {
  margin: 0;
}

/* Amplio: .alignwide es a sangre (100vw) con el medianil como padding, así
   que la línea se pinta como fondo recortado al content-box en vez de
   border (que cruzaría el padding). Completo sigue de borde a borde. */
hr.wp-block-separator.alignwide:not(.is-style-vertical) {
  border-top: 0;
  height: var(--hr-w, 1px) !important;
  background: currentColor content-box;
}

@media only screen and (min-width: 1024px) {
  hr.wp-block-separator.alignwide:not(.is-style-vertical) {
    padding-left: var(--gutter-wide);
    padding-right: var(--gutter-wide);
  }
}

.wp-block-group.is-layout-flex > .wp-block-separator:not(.is-style-vertical),
.editor-styles-wrapper .wp-block-separator:not(.is-style-vertical, .alignwide, .alignfull) {
  width: 100%;
}

/* Editor: core añade un padding de .1px; fuera del amplio, que lo usa. */
.editor-styles-wrapper .wp-block-separator:not(.alignwide) {
  padding: 0 !important;
}

/* Vertical: sin alineación, la altura del contenido del padre (stretch en
   Fila/Columnas); fuera de un flex no hay altura que tomar → mínimo 1em. */
.wp-block-separator.is-style-vertical {
  border: 0;
  border-left: var(--hr-w, 1px) solid;
  width: 0 !important;
  max-width: none;
  height: auto !important;
  min-height: 1em;
  margin: 0 !important;
  padding: 0 !important;
  align-self: stretch;
  flex-shrink: 0;
}

/* Vertical amplio/completo dentro de un bloque: el <hr> reserva el hueco y
   la línea la pinta su ::before, absoluto contra el padre (top/bottom 0 =
   toda su altura, padding incluido; sin left queda en la posición del hr). */
.wp-block-separator.is-style-vertical:is(.alignwide, .alignfull):not(.hr-root) {
  border-left: 0;
  width: var(--hr-w, 1px) !important;
  height: 0 !important;
  min-height: 0;
  align-self: auto;
  position: static !important; /* el editor pone relative a todos los bloques */
}

.wp-block-separator.is-style-vertical:is(.alignwide, .alignfull):not(.hr-root)::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  border-left: var(--hr-w, 1px) solid;
}

:where(:has(> .wp-block-separator.is-style-vertical:is(.alignwide, .alignfull):not(.hr-root))) {
  position: relative;
}

/* Vertical amplio/completo en la raíz: alto de pantalla. */
.wp-block-separator.is-style-vertical.hr-root:is(.alignwide, .alignfull) {
  height: 100svh !important;
}