/**
 * Estilos para todos los bloques de Gutenberg
 * Estos estilos aseguran que los bloques funcionen correctamente
 * dentro del tema personalizado, sobrescribiendo conflictos con Tailwind
 */

/* ==========================================================================
   LAYOUT GENERAL - is-layout-flex, is-layout-flow, is-layout-constrained
   ========================================================================== */

.article-content .is-layout-flex {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
}

.article-content .is-layout-flow > * + * {
	margin-top: 1.5rem;
}

/* ==========================================================================
   COLUMNAS - wp-block-columns
   ========================================================================== */

.article-content .wp-block-columns {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 2rem !important;
	margin-bottom: 1.75rem;
}

.article-content .wp-block-columns.is-layout-flex {
	flex-wrap: nowrap !important;
}

.article-content .wp-block-columns.are-vertically-aligned-top {
	align-items: flex-start !important;
}

.article-content .wp-block-columns.are-vertically-aligned-center {
	align-items: center !important;
}

.article-content .wp-block-columns.are-vertically-aligned-bottom {
	align-items: flex-end !important;
}

.article-content .wp-block-column {
	flex-grow: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

.article-content .wp-block-column:not([style*="flex-basis"]) {
	flex-basis: 0;
}

@media (max-width: 781px) {
	.article-content .wp-block-columns {
		flex-wrap: wrap !important;
	}
	.article-content .wp-block-columns:not(.is-not-stacked-on-mobile) {
		flex-direction: column !important;
	}
	.article-content .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (max-width: 599px) {
	.article-content .wp-block-columns {
		flex-direction: column !important;
	}
	.article-content .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ==========================================================================
   GALERIA - wp-block-gallery
   ========================================================================== */

.article-content .wp-block-gallery {
	display: flex !important;
	flex-wrap: wrap !important;
	list-style-type: none !important;
	padding: 0 !important;
	margin: 0 0 1.75rem 0 !important;
	gap: 1rem !important;
}

.article-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	margin: 0 !important;
	padding: 0 !important;
}

.article-content .wp-block-gallery.has-nested-images figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Galeria con columnas especificas */
.article-content .wp-block-gallery.columns-1 .wp-block-image {
	width: 100% !important;
	flex-grow: 0 !important;
}

.article-content .wp-block-gallery.columns-2 .wp-block-image {
	width: calc(50% - 0.5rem) !important;
	flex-grow: 0 !important;
}

.article-content .wp-block-gallery.columns-3 .wp-block-image {
	width: calc(33.333% - 0.67rem) !important;
	flex-grow: 0 !important;
}

.article-content .wp-block-gallery.columns-4 .wp-block-image {
	width: calc(25% - 0.75rem) !important;
	flex-grow: 0 !important;
}

.article-content .wp-block-gallery.columns-5 .wp-block-image {
	width: calc(20% - 0.8rem) !important;
	flex-grow: 0 !important;
}

.article-content .wp-block-gallery.columns-6 .wp-block-image {
	width: calc(16.666% - 0.83rem) !important;
	flex-grow: 0 !important;
}

.article-content .wp-block-gallery.columns-default .wp-block-image {
	width: calc(33.333% - 0.67rem) !important;
	flex-grow: 0 !important;
}

/* Galeria - Caption */
.article-content .wp-block-gallery figcaption {
	flex-basis: 100%;
	text-align: center;
	font-size: 0.875rem;
	color: #555;
	margin-top: 0.5rem;
}

.article-content .wp-block-gallery .wp-block-image figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(transparent, rgba(0,0,0,0.7));
	color: #fff;
	padding: 2rem 0.5rem 0.5rem;
	font-size: 0.8rem;
	margin: 0;
}

.article-content .wp-block-gallery.has-nested-images figure.wp-block-image {
	position: relative;
	overflow: hidden;
}

/* Galeria responsive */
@media (max-width: 600px) {
	.article-content .wp-block-gallery.columns-3 .wp-block-image,
	.article-content .wp-block-gallery.columns-4 .wp-block-image,
	.article-content .wp-block-gallery.columns-5 .wp-block-image,
	.article-content .wp-block-gallery.columns-6 .wp-block-image,
	.article-content .wp-block-gallery.columns-default .wp-block-image {
		width: calc(50% - 0.5rem) !important;
	}
}

@media (max-width: 400px) {
	.article-content .wp-block-gallery .wp-block-image {
		width: 100% !important;
	}
}

/* ==========================================================================
   IMAGEN - wp-block-image
   ========================================================================== */

.article-content .wp-block-image {
	margin: 0 0 1.75rem 0;
}

.article-content .wp-block-image img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

.article-content .wp-block-image figcaption {
	margin-top: 0.5rem;
	color: #555;
	font-size: 0.875rem;
	text-align: center;
}

.article-content .wp-block-image.alignleft {
	float: left;
	margin-right: 1.5rem;
	margin-bottom: 1rem;
}

.article-content .wp-block-image.alignright {
	float: right;
	margin-left: 1.5rem;
	margin-bottom: 1rem;
}

.article-content .wp-block-image.aligncenter {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.article-content .wp-block-image.is-style-rounded img {
	border-radius: 9999px;
}

/* ==========================================================================
   CITAS - wp-block-quote, wp-block-pullquote
   ========================================================================== */

.article-content .wp-block-quote {
	border-left: 4px solid #000;
	margin: 1.75rem 0;
	padding: 1rem 1.5rem;
	font-style: italic;
	background-color: #f9f9f9;
}

.article-content .wp-block-quote p {
	margin: 0 0 1rem 0;
	font-size: 1.1rem;
	line-height: 1.6;
}

.article-content .wp-block-quote p:last-of-type {
	margin-bottom: 0;
}

.article-content .wp-block-quote cite,
.article-content .wp-block-quote footer {
	display: block;
	font-size: 0.875rem;
	font-style: normal;
	margin-top: 1rem;
	color: #666;
}

.article-content .wp-block-quote cite::before {
	content: "— ";
}

.article-content .wp-block-quote.is-style-large {
	border: none;
	padding: 0;
}

.article-content .wp-block-quote.is-style-large p {
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.4;
}

/* Pullquote */
.article-content .wp-block-pullquote {
	border-top: 4px solid #000;
	border-bottom: 4px solid #000;
	margin: 2rem 0;
	padding: 2rem 0;
	text-align: center;
}

.article-content .wp-block-pullquote blockquote {
	margin: 0;
	padding: 0;
	border: none;
}

.article-content .wp-block-pullquote p {
	font-size: 1.5rem;
	line-height: 1.4;
	margin: 0 0 1rem 0;
}

.article-content .wp-block-pullquote cite {
	display: block;
	font-size: 0.875rem;
	text-transform: uppercase;
	color: #666;
}

/* ==========================================================================
   BOTONES - wp-block-button, wp-block-buttons
   ========================================================================== */

.article-content .wp-block-buttons {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.75rem 0;
}

.article-content .wp-block-buttons.is-layout-flex {
	gap: 0.5rem;
}

.article-content .wp-block-buttons.is-content-justification-center {
	justify-content: center;
}

.article-content .wp-block-buttons.is-content-justification-right {
	justify-content: flex-end;
}

.article-content .wp-block-button {
	display: inline-block;
}

.article-content .wp-block-button__link {
	display: inline-block;
	padding: 0.75rem 1.5rem;
	background-color: #32373c;
	color: #fff !important;
	text-decoration: none !important;
	border-radius: 4px;
	font-size: 1rem;
	line-height: 1.5;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
	border: none;
}

.article-content .wp-block-button__link:hover {
	background-color: #1d2327;
	transform: translateY(-1px);
}

.article-content .wp-block-button.is-style-outline .wp-block-button__link {
	background-color: transparent;
	border: 2px solid currentColor;
	color: #32373c !important;
}

.article-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background-color: #32373c;
	color: #fff !important;
}

/* ==========================================================================
   SEPARADORES - wp-block-separator
   ========================================================================== */

.article-content .wp-block-separator {
	border: none !important;
	border-top: 2px solid #ddd !important;
	margin: 2rem auto !important;
	width: 100%;
	max-width: 100px;
}

.article-content .wp-block-separator.is-style-wide {
	max-width: 100%;
}

.article-content .wp-block-separator.is-style-dots {
	border: none !important;
	text-align: center;
	max-width: 100%;
	background: none !important;
}

.article-content .wp-block-separator.is-style-dots::before {
	content: "···";
	font-size: 1.5rem;
	letter-spacing: 2em;
	padding-left: 2em;
	color: #333;
}

/* ==========================================================================
   ESPACIADOR - wp-block-spacer
   ========================================================================== */

.article-content .wp-block-spacer {
	clear: both;
}

/* ==========================================================================
   TABLAS - wp-block-table
   ========================================================================== */

.article-content .wp-block-table {
	margin: 1.75rem 0;
	overflow-x: auto;
	width: 100%;
}

.article-content .wp-block-table table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
}

.article-content .wp-block-table th,
.article-content .wp-block-table td {
	padding: 0.75rem 1rem;
	border: 1px solid #ddd;
	text-align: left;
}

.article-content .wp-block-table th {
	background-color: #f5f5f5;
	font-weight: 600;
}

.article-content .wp-block-table tr:nth-child(even) {
	background-color: #fafafa;
}

.article-content .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
	background-color: #f9f9f9;
}

.article-content .wp-block-table figcaption {
	font-size: 0.875rem;
	color: #555;
	text-align: center;
	margin-top: 0.5rem;
}

/* ==========================================================================
   LISTA - wp-block-list
   ========================================================================== */

.article-content ul.wp-block-list,
.article-content ol.wp-block-list {
	margin: 1.75rem 0;
	padding-left: 1.5rem;
}

.article-content ul.wp-block-list {
	list-style-type: disc !important;
}

.article-content ol.wp-block-list {
	list-style-type: decimal !important;
}

.article-content .wp-block-list li {
	margin-bottom: 0.5rem;
	padding-left: 0.25rem;
}

.article-content .wp-block-list li::before {
	content: none !important;
}

/* ==========================================================================
   CODIGO - wp-block-code, wp-block-preformatted
   ========================================================================== */

.article-content .wp-block-code {
	margin: 1.75rem 0;
	padding: 1rem 1.5rem;
	background-color: #1e1e1e;
	border-radius: 4px;
	overflow-x: auto;
}

.article-content .wp-block-code code {
	color: #f8f8f2;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.875rem;
	line-height: 1.6;
	white-space: pre;
}

.article-content .wp-block-preformatted {
	margin: 1.75rem 0;
	padding: 1rem 1.5rem;
	background-color: #f5f5f5;
	border-radius: 4px;
	overflow-x: auto;
	white-space: pre-wrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	font-size: 0.875rem;
}

/* ==========================================================================
   VERSE - wp-block-verse
   ========================================================================== */

.article-content .wp-block-verse {
	margin: 1.75rem 0;
	padding: 1rem 1.5rem;
	font-family: Georgia, serif;
	font-style: italic;
	white-space: pre-wrap;
	background-color: #f9f9f9;
	border-left: 4px solid #ddd;
}

/* ==========================================================================
   GRUPO - wp-block-group
   ========================================================================== */

.article-content .wp-block-group {
	margin: 1.75rem 0;
}

.article-content .wp-block-group.has-background {
	padding: 1.5rem;
	border-radius: 4px;
}

/* ==========================================================================
   COVER - wp-block-cover
   ========================================================================== */

.article-content .wp-block-cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 430px;
	margin: 1.75rem 0;
	padding: 1rem;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

.article-content .wp-block-cover__background,
.article-content .wp-block-cover .has-background-dim {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
}

.article-content .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
	color: #fff;
	text-align: center;
}

.article-content .wp-block-cover img.wp-block-cover__image-background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   MEDIA & TEXT - wp-block-media-text
   ========================================================================== */

.article-content .wp-block-media-text {
	display: grid !important;
	grid-template-columns: 50% 50%;
	gap: 1rem;
	margin: 1.75rem 0;
	align-items: center;
}

.article-content .wp-block-media-text.has-media-on-the-right {
	grid-template-columns: 50% 50%;
}

.article-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
	order: 2;
}

.article-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
	order: 1;
}

.article-content .wp-block-media-text__media img {
	width: 100%;
	height: auto;
}

.article-content .wp-block-media-text__content {
	padding: 0 1rem;
}

.article-content .wp-block-media-text.is-stacked-on-mobile {
	grid-template-columns: 1fr;
}

@media (max-width: 600px) {
	.article-content .wp-block-media-text {
		grid-template-columns: 1fr !important;
	}
	.article-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__media {
		order: 1;
	}
	.article-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
		order: 2;
	}
}

/* ==========================================================================
   EMBED - wp-block-embed
   ========================================================================== */

.article-content .wp-block-embed {
	margin: 1.75rem 0;
}

.article-content .wp-block-embed__wrapper {
	position: relative;
}

.article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	height: 0;
	overflow: hidden;
}

.article-content .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.article-content .wp-block-embed figcaption {
	font-size: 0.875rem;
	color: #555;
	text-align: center;
	margin-top: 0.5rem;
}

/* YouTube, Vimeo, etc */
.article-content .wp-block-embed-youtube .wp-block-embed__wrapper,
.article-content .wp-block-embed-vimeo .wp-block-embed__wrapper {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}

.article-content .wp-block-embed-youtube .wp-block-embed__wrapper iframe,
.article-content .wp-block-embed-vimeo .wp-block-embed__wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* Twitter/X */
.article-content .wp-block-embed-twitter {
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   VIDEO - wp-block-video
   ========================================================================== */

.article-content .wp-block-video {
	margin: 1.75rem 0;
}

.article-content .wp-block-video video {
	max-width: 100%;
	height: auto;
}

.article-content .wp-block-video figcaption {
	font-size: 0.875rem;
	color: #555;
	text-align: center;
	margin-top: 0.5rem;
}

/* ==========================================================================
   AUDIO - wp-block-audio
   ========================================================================== */

.article-content .wp-block-audio {
	margin: 1.75rem 0;
}

.article-content .wp-block-audio audio {
	width: 100%;
}

.article-content .wp-block-audio figcaption {
	font-size: 0.875rem;
	color: #555;
	text-align: center;
	margin-top: 0.5rem;
}

/* ==========================================================================
   FILE - wp-block-file
   ========================================================================== */

.article-content .wp-block-file {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.75rem 0;
	padding: 1rem;
	background-color: #f5f5f5;
	border-radius: 4px;
}

.article-content .wp-block-file a:not(.wp-block-file__button) {
	flex-grow: 1;
	color: #0073aa;
	text-decoration: none;
}

.article-content .wp-block-file__button {
	display: inline-block;
	padding: 0.5rem 1rem;
	background-color: #32373c;
	color: #fff !important;
	text-decoration: none;
	border-radius: 4px;
	font-size: 0.875rem;
}

/* ==========================================================================
   DETAILS / ACCORDION - wp-block-details
   ========================================================================== */

.article-content .wp-block-details {
	margin: 1.75rem 0;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.article-content .wp-block-details summary {
	padding: 1rem;
	cursor: pointer;
	font-weight: 600;
	background-color: #f9f9f9;
	list-style: none;
}

.article-content .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.article-content .wp-block-details summary::before {
	content: "+";
	margin-right: 0.5rem;
	font-weight: bold;
}

.article-content .wp-block-details[open] summary::before {
	content: "−";
}

.article-content .wp-block-details > *:not(summary) {
	padding: 1rem;
}

/* ==========================================================================
   FOOTNOTES - wp-block-footnotes
   ========================================================================== */

.article-content .wp-block-footnotes {
	margin: 2rem 0;
	padding-top: 1rem;
	border-top: 1px solid #ddd;
	font-size: 0.875rem;
}

.article-content .wp-block-footnotes ol {
	margin: 0;
	padding-left: 1.5rem;
}

/* ==========================================================================
   SOCIAL LINKS - wp-block-social-links
   ========================================================================== */

.article-content .wp-block-social-links {
	display: flex !important;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0 !important;
	margin: 1.75rem 0;
	list-style: none !important;
}

.article-content .wp-block-social-link {
	display: inline-flex !important;
	margin: 0 !important;
}

.article-content .wp-block-social-link a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem;
	background-color: #32373c;
	color: #fff !important;
	border-radius: 4px;
	transition: background-color 0.2s ease;
}

.article-content .wp-block-social-link a:hover {
	background-color: #1d2327;
}

.article-content .wp-block-social-links.is-style-logos-only .wp-block-social-link a {
	background: none;
	padding: 0;
}

/* ==========================================================================
   SEARCH - wp-block-search
   ========================================================================== */

.article-content .wp-block-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1.75rem 0;
}

.article-content .wp-block-search__input {
	flex-grow: 1;
	padding: 0.75rem 1rem;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 1rem;
}

.article-content .wp-block-search__button {
	padding: 0.75rem 1.5rem;
	background-color: #32373c;
	color: #fff;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

/* ==========================================================================
   ALINEACIONES
   ========================================================================== */

.article-content .alignleft {
	float: left;
	margin-right: 1.5rem;
	margin-bottom: 1rem;
	max-width: 50%;
}

.article-content .alignright {
	float: right;
	margin-left: 1.5rem;
	margin-bottom: 1rem;
	max-width: 50%;
}

.article-content .aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.article-content .alignwide {
	margin-left: -10%;
	margin-right: -10%;
	max-width: 120%;
	width: 120%;
}

.article-content .alignfull {
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
	max-width: 100vw;
	width: 100vw;
}

@media (max-width: 781px) {
	.article-content .alignleft,
	.article-content .alignright {
		float: none;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}

	.article-content .alignwide {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: 100%;
	}
}

/* ==========================================================================
   COLORES DE FONDO Y TEXTO
   ========================================================================== */

.article-content .has-background {
	padding: 1.25rem 1.5rem;
}

.article-content .has-white-background-color { background-color: #fff; }
.article-content .has-black-background-color { background-color: #000; }
.article-content .has-cyan-bluish-gray-background-color { background-color: #abb8c3; }
.article-content .has-pale-pink-background-color { background-color: #f78da7; }
.article-content .has-vivid-red-background-color { background-color: #cf2e2e; }
.article-content .has-luminous-vivid-orange-background-color { background-color: #ff6900; }
.article-content .has-luminous-vivid-amber-background-color { background-color: #fcb900; }
.article-content .has-light-green-cyan-background-color { background-color: #7bdcb5; }
.article-content .has-vivid-green-cyan-background-color { background-color: #00d084; }
.article-content .has-pale-cyan-blue-background-color { background-color: #8ed1fc; }
.article-content .has-vivid-cyan-blue-background-color { background-color: #0693e3; }
.article-content .has-vivid-purple-background-color { background-color: #9b51e0; }

.article-content .has-white-color { color: #fff; }
.article-content .has-black-color { color: #000; }
.article-content .has-cyan-bluish-gray-color { color: #abb8c3; }
.article-content .has-pale-pink-color { color: #f78da7; }
.article-content .has-vivid-red-color { color: #cf2e2e; }
.article-content .has-luminous-vivid-orange-color { color: #ff6900; }
.article-content .has-luminous-vivid-amber-color { color: #fcb900; }
.article-content .has-light-green-cyan-color { color: #7bdcb5; }
.article-content .has-vivid-green-cyan-color { color: #00d084; }
.article-content .has-pale-cyan-blue-color { color: #8ed1fc; }
.article-content .has-vivid-cyan-blue-color { color: #0693e3; }
.article-content .has-vivid-purple-color { color: #9b51e0; }

/* ==========================================================================
   TAMAÑOS DE FUENTE
   ========================================================================== */

.article-content .has-small-font-size { font-size: 0.8125rem; }
.article-content .has-normal-font-size { font-size: 1rem; }
.article-content .has-medium-font-size { font-size: 1.25rem; }
.article-content .has-large-font-size { font-size: 2.25rem; }
.article-content .has-x-large-font-size { font-size: 2.625rem; }
.article-content .has-huge-font-size { font-size: 2.625rem; }

/* ==========================================================================
   CLEARFIX
   ========================================================================== */

.article-content::after {
	content: "";
	display: table;
	clear: both;
}