es: Convert noteblocks to GFM Alerts (part 6) (#22669)

This PR converts the noteblocks for the Spanish locale to GFM Alerts syntax, using a [conversion script](https://github.com/queengooborg/mdn-toolkit/blob/main/upgrade-noteblock.js). This is part 6. Note: manual adjustments have also been made to correct some issues, including capitalization, syntax, duplicated keywords and more.

files/es/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.md

@@ -26,7 +26,8 @@ Las propiedades que veremos en esta guía son las siguientes.
 
 También descubriremos cómo se pueden usar los márgenes automáticos para la alineación en flexbox
 
-> **Nota:** Nota: Las propiedades de alineación en Flexbox se han colocado en su propia especificación — [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/). Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.
+> [!NOTE]
+> Las propiedades de alineación en Flexbox se han colocado en su propia especificación — [CSS Box Alignment Level 3](https://www.w3.org/TR/css-align-3/). Se espera que esta especificación finalmente reemplace las propiedades tal como se definen en Flexbox Nivel Uno.
 
 ## El eje transversal
 
@@ -100,7 +101,8 @@ Una vez mas podemos cambiar nuestra `flex-direction` a `column` para ver como es
 
 {{EmbedGHLiveSample("css-examples/flexbox/alignment/align-content-column.html", '100%', 860)}}
 
-> **Nota:** El valor `space-evenly` no está definido en las especificaciones de flexbox y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.
+> [!NOTE]
+> El valor `space-evenly` no está definido en las especificaciones de flexbox y la ultima adiccion a las especificaciones de Alineacion de cajas Box Alignment . El soporte del navegador para este valor no es tan bueno como el de los valores definidos en la especificación de flexbox.
 
 Revise la [documentacion para `justify-content` en MDN](/es/docs/Web/CSS/justify-content) para encontrar más detalles de todos sus valores y el soporte de los navegadores.
 

files/es/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.md

@@ -141,7 +141,8 @@ Así como la propiedad `flex-grow` se encarga de añadir espacio sobre el eje pr
 
 El tamaño mínimo del ítem tendrá que ser considerado cuando se determine un valor de contracción que pueda funcionar, esto significa que flex-shrink tiene el potencial de comportarse menos consistentemente que flex-grow . Por lo tanto, haremos una revisión más detallada de cómo este algoritmo trabaja en el artículo Controlling Ratios de los ítems sobre el eje principal.
 
-> **Nota:** Nótese que los valores de `flex-grow` y `flex-shrink` son proporciones. Típicamente si pusiéramos todos los ítems flex: `1 1 200px` y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: `2 1 200px`. Aunque igualmente podemos colocar flex: `10 1 200px` y flex: `20 1 200px` si quisiéramos.
+> [!NOTE]
+> Nótese que los valores de `flex-grow` y `flex-shrink` son proporciones. Típicamente si pusiéramos todos los ítems flex: `1 1 200px` y luego quisiéramos que un ítem creciera al doble, deberíamos ponerlo con flex: `2 1 200px`. Aunque igualmente podemos colocar flex: `10 1 200px` y flex: `20 1 200px` si quisiéramos.
 
 ### Valores abreviados para las propiedades flex
 

files/es/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.md

@@ -429,7 +429,8 @@ Las canaletas o callejones entre las celdas de la cuadrícula se pueden crear us
 }
 ```
 
-> **Nota:** Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo `grid-` como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.
+> [!NOTE]
+> Los navegadores más antigüos tienen {{cssxref("column-gap")}}, {{cssxref("row-gap")}} y {{cssxref("gap")}} prefijadas con el prefijo `grid-` como {{cssxref("grid-column-gap")}}, {{cssxref("grid-row-gap")}} y {{cssxref("grid-gap")}} respectivamente.
 
 ```html
 <div class="wrapper">
@@ -542,7 +543,8 @@ En este caso, la cuadrícula anidada no tiene ninguna relación con el padre. Co
 
 En la especificación de grid de nivel 1 hay una característica llamada _subgrid_ que nos permitiría crear cuadrículas anidadas que usan la definición de la vía de la cuadrícula padre.
 
-> **Nota:** Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.
+> [!NOTE]
+> Las Subgrids aún no están implementadas en ningún navegador y la especificación está sujeta a cambio.
 
 En la especificación actual, editaríamos el ejemplo de cuadrícula anidada arriba para usar `display: subgrid` en lugar de `display: grid`, y luego eliminar la definición de vía. La cuadrícula anidada utilizará las vías de la cuadrícula principal para posicionar los elementos.
 

files/es/web/css/css_grid_layout/relationship_of_grid_layout_with_other_layout_methods/index.md

@@ -5,7 +5,8 @@ slug: Web/CSS/CSS_grid_layout/Relationship_of_grid_layout_with_other_layout_meth
 
 CSS Grid Layout ha sido diseñado para trabajar junto con otros elementos de CSS, como parte de un sistema completo para hacer el diseño. En esta guía explicaré cómo se ajusta _Grid_ junto con otras técnicas que ya se estén usando.
 
-> **Nota:** Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será _Grid_.
+> [!NOTE]
+> Las traducciones posibles a la palabra Grid en este contexto son: Grilla, Rejilla, Cuadrícula, Malla. Para efecto del contenido será _Grid_.
 
 ## Grid y flexbox
 

files/es/web/css/css_logical_properties_and_values/basic_concepts_of_logical_properties_and_values/index.md

@@ -51,7 +51,8 @@ Las Propiedades y Valores lógicos pueden ser considerados como un par de grupos
 
 Hay otro grupo de estas propiedades lógicas que no tienen una asignación directa con las propiedades físicas existentes. Estas son abreviaturas posibles gracias al hecho de que podemos referirnos a ambos bordes del bloque o dimensión en línea a la vez. Un ejemplo sería {{CSSxRef("margin-block")}}, que es una abreviación de {{CSSxRef("margin-block-start")}} y {{CSSxRef("margin-block-end")}}. Actualmente, estas propiedades no tiene soporte en navegadores.
 
-> **Nota:** CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es [#1282](https://github.com/w3c/csswg-drafts/issues/1282).
+> [!NOTE]
+> CSS Working Group está intentando decidir qué hacer con los valores abreviados de cuatro valores para las propiedades lógicas, por ejemplo, los equivalentes para configurar cuatro propiedades físicas a la vez, como márgenes con la propiedad {{CSSxRef("margin")}}. Necesitaríamos algún tipo de modificador si tuviéramos que reutilizar el margen para las propiedades relativas al flujo. Si deseas leer las sugerencias o comentarlas, el problema relevante de GitHub es [#1282](https://github.com/w3c/csswg-drafts/issues/1282).
 
 ### Pruebas para el soporte en navegadores
 

files/es/web/css/css_logical_properties_and_values/floating_and_positioning/index.md

@@ -60,7 +60,8 @@ Al igual que con otras propiedades en la especificación, tenemos algunas propie
 - {{cssxref("inset-inline")}} — pone los dos en línea juntos.
 - {{cssxref("inset-block")}} — pone los dos bloques juntos.
 
-> **Nota:** Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles.
+> [!NOTE]
+> Los navegadores que han implementado la especificación de propiedades lógicas han implementado hasta ahora las asignaciones directas y no las abreviaturas nuevas. Consulte la sección de datos de compatibilidad del navegador en cada referencia de página de propiedades para obtener más detalles.
 
 ## Ejemplo: Valores lógicos para text-align
 

files/es/web/css/css_logical_properties_and_values/margins_borders_padding/index.md

@@ -87,7 +87,8 @@ En un modo de escritura horizontal este CSS aplicaría un margen de 5px arriba d
 }
 ```
 
-> **Nota:** Las propiedades abreviadas `margin-inline` y `margin-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.
+> [!NOTE]
+> Las propiedades abreviadas `margin-inline` y `margin-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.
 
 ## Ejemplos para rellenos (Paddings)
 
@@ -113,7 +114,8 @@ En un modo de escritura horizontal este CSS aplicaría un relleno de 5px arriba
 }
 ```
 
-> **Nota:** Las abreviaciones de las propiedades `padding-inline` y `padding-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.
+> [!NOTE]
+> Las abreviaciones de las propiedades `padding-inline` y `padding-block` se enviaron en Firefox 66. Como hay nuevas propiedades, mira el soporte en el navegador antes de usarlas.
 
 ## Ejemplos para bordes
 
@@ -136,7 +138,8 @@ Hay valores abreviados de dos valores para establecer el ancho, el estilo y el c
 }
 ```
 
-> **Nota:** Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.
+> [!NOTE]
+> Estas dos abreviaciones fueron enviadas en Firefox 66, mira el soporte en los navegadores antes de usar estas propiedades ya que puede que en otros navegadores aún no estén implementadas.
 
 ### Flujo de propiedades relativas del border-radius
 

files/es/web/css/css_media_queries/using_media_queries/index.md

@@ -12,7 +12,8 @@ Las _media queries_ se utilizan para lo siguiente:
 - Para segmentar medios específicos para {{HTMLElement("style")}}, {{HTMLElement("link")}}, {{HTMLElement("source")}} y otros [HTML](/es/docs/Web/HTML) con el atributo `media=`.
 - Para [probar y monitorear los estados de los medios](/es/docs/Web/CSS/Media_Queries/Testing_media_queries) usando los métodos {{domxref("Window.matchMedia()")}} y {{domxref("EventTarget.addEventListener()")}}.
 
-> **Nota:** Los ejemplos en esta página usan `@media` de CSS con fines ilustrativos, pero la sintaxis básica sigue siendo la misma para todos los tipos de consultas de medios.
+> [!NOTE]
+> Los ejemplos en esta página usan `@media` de CSS con fines ilustrativos, pero la sintaxis básica sigue siendo la misma para todos los tipos de consultas de medios.
 
 ## Sintaxis
 
@@ -65,7 +66,8 @@ Las consultas de medios no distinguen entre mayúsculas y minúsculas.
 Una _media query_ se calcula como `true` cuando el tipo de medio (si se especifica) coincide con el dispositivo en el que se muestra un documento y todas las expresiones de características de medios se computan como verdaderas.
 Las consultas que involucran tipos de medios desconocidos siempre son falsas.
 
-> **Nota:** Una hoja de estilo con una _media query_ adjunta a su etiqueta {{HTMLElement("link")}} [se descargará](https://scottjehl.github.io/CSS-Download-Tests/) incluso si la consulta devuelve `false`, la descarga se realizará pero la prioridad de la descarga será mucho menor.
+> [!NOTE]
+> Una hoja de estilo con una _media query_ adjunta a su etiqueta {{HTMLElement("link")}} [se descargará](https://scottjehl.github.io/CSS-Download-Tests/) incluso si la consulta devuelve `false`, la descarga se realizará pero la prioridad de la descarga será mucho menor.
 > No obstante, su contenido no se aplicará a menos que y hasta que el resultado de la consulta cambie a `true`.
 > Puede leer por qué sucede esto en el blog de Tomayac [Por qué el navegador descarga hojas de estilo con consultas de medios que no coinciden](https://medium.com/@tomayac/why-browsers-download-stylesheets-with-non-matching-media-consultas-eb61b91b85a2).
 
@@ -136,7 +138,8 @@ En el ejemplo anterior, ya vimos el operador `and` usado para agrupar un _tipo_
 El operador `and` también puede combinar múltiples características de medios en una sola _media query_. Mientras tanto, el operador `not` niega una _media query_, básicamente invirtiendo su significado normal.
 El operador `only` evita que los navegadores antiguos apliquen los estilos.
 
-> **Nota:** En la mayoría de los casos, el tipo de medios `all` se usa de forma predeterminada cuando no se especifica ningún otro tipo.
+> [!NOTE]
+> En la mayoría de los casos, el tipo de medios `all` se usa de forma predeterminada cuando no se especifica ningún otro tipo.
 > Sin embargo, si usa los operadores `not` u `only`, debe especificar explícitamente un tipo de medio.
 
 ### Combinación de múltiples tipos o características
@@ -233,7 +236,8 @@ _No tiene efecto en los navegadores modernos._
 La especificación Media Queries Level 4 incluye algunas mejoras de sintaxis para hacer que las _media queries_ utilicen características que tienen un tipo de "rango", por ejemplo, ancho o alto, menos detallado.
 El nivel 4 agrega un _contexto de rango_ para escribir tales consultas. Por ejemplo, usando la funcionalidad `max-` para el ancho, podríamos escribir lo siguiente:
 
-> **Nota:** La especificación Media Queries Level 4 tiene un soporte razonable en los navegadores modernos, pero algunas características multimedia no son compatibles.
+> [!NOTE]
+> La especificación Media Queries Level 4 tiene un soporte razonable en los navegadores modernos, pero algunas características multimedia no son compatibles.
 > Consulte la [tabla de compatibilidad del navegador de `@media`](/es/docs/Web/CSS/@media#browser_compatibility) para obtener más detalles.
 
 ```css

files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context/index.md

@@ -35,7 +35,8 @@ En resumen:
 - Cada contexto de apilamiento es completamente independiente de sus hermanos: solo los elementos descendientes son considerados cuando el apilamiento es procesado.
 - Cada contexto de apilamiento es auto contenido: luego que los contenidos del elemento son apilados, el elemento completo es considerado en el orden de apilamiento del contexto del padre.
 
-> **Nota:** La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
+> [!NOTE]
+> La jerarquía de apilar contextos es un sub conjunto de la jerarquía de elementos HTML, porque solo ciertos elementos crean contextos de apilamiento. Podemos decir que los elementos que no crean sus propios contextos de apilamiento son asimilados por el contexto de apilamiento padre.
 
 ## El ejemplo
 
@@ -55,7 +56,7 @@ En este ejemplo cada elemento posicionado crea su propio contexto de apilamiento
 
 Es importante notar que el DIV #4, DIV #5 y el DIV #6 son hijos del DIV #3, así que el apilamiento de esos elementos es completamente resuelto dentro del DIV#3. Una vez que el apilamiento y el renderizado dentro del DIV#3 ha sido completado, todo el elemento DIV#3 es apilado en el elemento raíz con respecto a sus DIV hermanos.
 
-> **Nota:**
+> [!NOTE]
 >
 > - DIV #4 es renderizado debajo de DIV #1 porque el z-index (5) de DIV #1 es válido dentro del contexto de apilamiento del elemento raiz, mientras que el z-index (6) de DIV #4 es válido dentro del contexto de apilamiento de DIV #3. Así que DIV #4 está debajo de DIV #1, porque DIV #4 pertenece a DIV #3, que tiene un valor z-index menor.
 > - Por la misma razón DIV #2 (z-index 2) es renderizado bajo DIV#5 (z-index 1) porque DIV #5 pertenece a DIV #3, que tiene un valor z-index mayor.

files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_1/index.md

@@ -30,7 +30,8 @@ En términos de contextos de apilamiento, el DIV #1 y el DIV #3 son simplemente
   - DIV #2 (z-index 1)
   - DIV #4 (z-index 2)
 
-> **Nota:** El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
+> [!NOTE]
+> El DIV #1 y el DIV #3 no son translúcidos. Es importante recordar que asignar una opacidad menor a 1 a un elemento posicionado implica la creación de un contexto de apilamiento, como ocurre cuando se añade un valor z-index. Y este ejemplo muestra que ocurre cuando un elemento padre no crea un contexto de apilamiento.
 
 ## Ejemplo
 

files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_2/index.md

@@ -22,7 +22,8 @@ Para entender mejor esta situación, esta es la jerarquía del contexto de apila
 
     - DIV #4 (z-index 10)
 
-> **Nota:** Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
+> [!NOTE]
+> Vale la pena recordar que en general la jerarquía HTML es diferente de la jerarquía del contexto de apilamiento. En la jerarquía del contexto de apilamiento, los elementos que no crean un contexto de apilamiento son colapsados en sus padres.
 
 ### Código fuente de ejemplo
 

files/es/web/css/css_positioned_layout/understanding_z-index/stacking_context_example_3/index.md

@@ -41,7 +41,8 @@ Para entender mejor la situación, esta es la jerarquía del contexto de apilami
 
 Este problema puede ser evitado al remover la superposición entre menus de diferentes niveles, o usando valores z-index individuales (y diferentes) asignados a través del selector id en lugar de un selector de clase, o aplanando la jerarquía HTML.
 
-> **Nota:** En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
+> [!NOTE]
+> En el código fuente vas a ver que los menus de segundo y tercer nivel están hechos de varios DIVs contenidos en un contenedor con posición absoluta. Esto es útil para agrupar y posicionarlos todos a la vez.
 
 ### Código fuente de ejemplo
 

files/es/web/css/css_positioned_layout/understanding_z-index/stacking_floating_elements/index.md

@@ -24,7 +24,8 @@ Este comportamiento puede ser explicado con una versión mejorada de la lista pr
 4. Descendientes en línea en el flujo normal
 5. Elementos posicionados descendentemente , en orden de aparición (en HTML)
 
-> **Nota:** En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
+> [!NOTE]
+> En el ejemplo debajo, todos los bloques excepto el no posicionado son translúcidos para mostrar el orden de apilamiento. Si la opacidad del bloque no posicionado (DIV #4) es reducida, entonces algo extraño ocurre: el fondo y el borde de ese bloque sobresale por encima de los bloques flotantes, pero aun debajo de los bloques posicionados. Yo no pude entender si esto es un bug o una interpretación peculiar de la especificación. (Aplicar opacidad debería crear implícitamente un contexto de apilamiento.)
 
 ## Código fuente de ejemplo
 

files/es/web/css/css_positioned_layout/understanding_z-index/stacking_without_z-index/index.md

@@ -15,7 +15,7 @@ Cuando ningún elemento tiene z-index, los elementos son apilados en este orden
 
 En el siguiente ejemplo, los bloques con posiciones absolutas y relativas son apropiadamente dimensionados y posicionados para ilustrar las reglas de apilamiento.
 
-> **Nota:**
+> [!NOTE]
 >
 > - Dado un grupo homogéneo de elementos sin propiedad z-index, tales como los bloques posicionados (DIV #1 al #4) en el ejemplo, el orden de apilamiento de los elementos es su orden en la jerarquía HTML, independientemente de su posición.
 > - Bloques estándar (DIV #5) en el flujo normal, sin ninguna propiedad de posicionamiento, siempre son renderizados antes de los elementos posicionados y aparecen debajo de los mismos, incluso si están después en la jerarquía HTML.