/* ==========================================================================
   PRB Base - Base compartida y contenido de Gutenberg

   Este archivo se carga SIEMPRE en el frontend, y ademas dentro del editor
   de Gutenberg. Por eso esta dividido en tres zonas:

   ZONA A - Sin prefijo. WordPress las reescribe dentro del editor, asi que
            valen en los dos lados. Aqui van los elementos que deben verse
            igual escribiendo y publicado.

   ZONA B - Con .prb-entry-content. Solo frontend: ritmo vertical y
            alineaciones ancha y completa, que en el editor ya resuelve
            Gutenberg por su cuenta.

   ZONA C - Piezas compartidas de la interfaz que usan varias plantillas:
            migas de pan, cabeceras, buscador, 404. Estan aqui y no en
            blog.css porque tambien las usan las paginas y el 404, que no
            cargan blog.css.

   No muevas una regla de zona sin saber cual es cual.
   ========================================================================== */


/* ==========================================================================
   ZONA A - Frontend y editor
   ========================================================================== */

/* --- Parrafos y listas -------------------------------------------------- */
p { text-wrap: pretty; }

/* Acotadas al contenido y al editor a proposito.
   Sin acotar, "li + li" alcanzaba tambien al menu de la cabecera y al del
   pie, y empujaba hacia abajo a todas las opciones menos a la primera. */
:is(.prb-entry-content, .block-editor-block-list__layout) ul,
:is(.prb-entry-content, .block-editor-block-list__layout) ol { padding-left: 1.35em; }

:is(.prb-entry-content, .block-editor-block-list__layout) li + li { margin-top: 0.35em; }

:is(.prb-entry-content, .block-editor-block-list__layout) li > ul,
:is(.prb-entry-content, .block-editor-block-list__layout) li > ol { margin-top: 0.35em; }

/* --- Citas -------------------------------------------------------------- */
.wp-block-quote {
	padding-left: var(--prb-space-m);
	border-left: 3px solid var(--prb-color-secondary);
	font-style: italic;
	color: var(--prb-color-primary);
}

.wp-block-quote cite,
.wp-block-quote .wp-block-quote__citation {
	display: block;
	margin-top: var(--prb-space-2xs);
	font-size: var(--prb-text-s);
	font-style: normal;
	color: var(--prb-color-muted);
}

.wp-block-pullquote {
	padding: var(--prb-space-l) var(--prb-space-m);
	border-top: 2px solid var(--prb-color-border);
	border-bottom: 2px solid var(--prb-color-border);
	text-align: center;
}

.wp-block-pullquote p {
	font-family: var(--prb-font-heading);
	font-size: var(--prb-text-l);
	line-height: 1.35;
}

/* --- Imagenes y pies de foto -------------------------------------------- */
figure { margin: 0; }

figcaption,
.wp-element-caption {
	margin-top: var(--prb-space-2xs);
	font-size: var(--prb-text-s);
	line-height: 1.5;
	color: var(--prb-color-muted);
	text-align: center;
}

.wp-block-image img { border-radius: var(--prb-radius); }

.wp-block-image.is-style-rounded img { border-radius: var(--prb-radius-lg); }

.wp-lightbox-container img { cursor: zoom-in; }

/* --- Galerias ----------------------------------------------------------- */
.wp-block-gallery figcaption { text-align: left; }

/* --- Tablas ------------------------------------------------------------- */
.wp-block-table { overflow-x: auto; }

/* Acotadas igual que las listas: una tabla de un plugin no debe heredar
   los estilos de contenido del tema. */
:is(.prb-entry-content, .block-editor-block-list__layout) table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--prb-text-s);
}

:is(.prb-entry-content, .block-editor-block-list__layout) th,
:is(.prb-entry-content, .block-editor-block-list__layout) td {
	padding: var(--prb-space-2xs) var(--prb-space-xs);
	border: 1px solid var(--prb-color-border);
	text-align: left;
	vertical-align: top;
}

:is(.prb-entry-content, .block-editor-block-list__layout) thead th {
	background: var(--prb-color-surface);
	font-family: var(--prb-font-heading);
	font-weight: 600;
	color: var(--prb-color-primary);
}

:is(.prb-entry-content, .block-editor-block-list__layout) tbody tr:nth-child(even) {
	background: color-mix(in srgb, var(--prb-color-surface) 55%, transparent);
}

.wp-block-table figcaption { text-align: left; }

/* --- Codigo ------------------------------------------------------------- */
code, kbd, samp {
	padding: 0.15em 0.4em;
	background: var(--prb-color-surface);
	border-radius: 3px;
	font-family: var(--prb-font-mono);
	font-size: 0.9em;
}

pre {
	overflow-x: auto;
	padding: var(--prb-space-s);
	background: var(--prb-color-surface);
	border: 1px solid var(--prb-color-border);
	border-radius: var(--prb-radius);
	font-family: var(--prb-font-mono);
	font-size: 0.875rem;
	line-height: 1.6;
}

pre code {
	padding: 0;
	background: none;
	font-size: inherit;
}

/* --- Separadores -------------------------------------------------------- */
hr,
.wp-block-separator {
	height: 0;
	border: 0;
	border-top: 1px solid var(--prb-color-border);
	opacity: 1;
}

.wp-block-separator.is-style-dots {
	border: 0;
	text-align: center;
	line-height: 1;
	color: var(--prb-color-secondary);
}

/* --- Botones ------------------------------------------------------------ */
.prb-btn,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--prb-space-3xs);
	padding: 0.85em 1.8em;
	background: var(--prb-color-primary);
	color: var(--prb-color-bg);
	border: 2px solid var(--prb-color-primary);
	border-radius: var(--prb-radius);
	font-weight: 600;
	font-size: var(--prb-text-base);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--prb-transition), color var(--prb-transition), border-color var(--prb-transition);
}

.prb-btn:hover,
.wp-block-button__link:hover {
	background: var(--prb-color-secondary);
	border-color: var(--prb-color-secondary);
	color: var(--prb-color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--prb-color-primary);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--prb-color-primary);
	color: var(--prb-color-bg);
}

/* --- Columnas: en movil siempre apiladas -------------------------------- */
@media (max-width: 47.99em) {
	.wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; }
	.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100% !important; }
}

/* --- Portada e incrustados ---------------------------------------------- */
.wp-block-cover { border-radius: var(--prb-radius); }

.wp-block-embed iframe { border-radius: var(--prb-radius); }


/* ==========================================================================
   ZONA B - Contenido, solo frontend
   ========================================================================== */

/* Evita que una alineacion completa genere barra horizontal.
   Se usa clip y no hidden porque hidden romperia cualquier position: sticky. */
.prb-site-main { overflow-x: clip; }

/* Ritmo vertical: todo separa igual, sin margenes sueltos por elemento. */
.prb-entry-content > * + * { margin-top: var(--prb-space-m); }

.prb-entry-content > h2,
.prb-entry-content > h3,
.prb-entry-content > h4 { margin-top: var(--prb-space-xl); }

.prb-entry-content > h2 + *,
.prb-entry-content > h3 + *,
.prb-entry-content > h4 + * { margin-top: var(--prb-space-s); }

.prb-entry-content > figure,
.prb-entry-content > .wp-block-image,
.prb-entry-content > .wp-block-gallery,
.prb-entry-content > .wp-block-embed,
.prb-entry-content > .wp-block-table,
.prb-entry-content > pre { margin-block: var(--prb-space-l); }

/* Enlaces dentro del texto: subrayados de verdad, no solo un color.
   Distinguir un enlace unicamente por color incumple WCAG 1.4.1. */
.prb-entry-content a:not(.wp-block-button__link):not(.prb-btn) {
	color: var(--prb-color-primary);
	text-decoration: underline;
	text-decoration-color: var(--prb-color-secondary);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.prb-entry-content a:not(.wp-block-button__link):not(.prb-btn):hover {
	text-decoration-color: var(--prb-color-primary);
}

/* --- Alineaciones ------------------------------------------------------- */
.prb-entry-content .alignwide {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--prb-wide-width), calc(100vw - var(--prb-gutter) * 2));
	max-width: none;
}

.prb-entry-content .alignfull {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: 100vw;
	max-width: 100vw;
}

.prb-entry-content .alignfull img { border-radius: 0; }

.prb-entry-content .aligncenter {
	margin-inline: auto;
	text-align: center;
}

@media (min-width: 48em) {

	.prb-entry-content .alignleft {
		float: left;
		margin: 0.4em var(--prb-space-m) var(--prb-space-s) 0;
		max-width: 50%;
	}

	.prb-entry-content .alignright {
		float: right;
		margin: 0.4em 0 var(--prb-space-s) var(--prb-space-m);
		max-width: 50%;
	}

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

/* --- Paginacion interna de una entrada larga ---------------------------- */
.prb-page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--prb-space-2xs);
	margin-top: var(--prb-space-l);
	font-size: var(--prb-text-s);
}

.prb-page-links a,
.prb-page-links > span:not(:first-child) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--prb-space-3xs);
	border: 1px solid var(--prb-color-border);
	border-radius: var(--prb-radius);
	text-decoration: none;
}

.prb-page-links a:hover {
	border-color: var(--prb-color-primary);
	background: var(--prb-color-primary-soft);
}


/* ==========================================================================
   ZONA C - Piezas compartidas entre plantillas
   Las usan entradas, paginas, archivos, busqueda y 404. Por eso viven aqui
   y no en blog.css, que no se carga en paginas ni en el 404.
   ========================================================================== */

/* --- Iconos ------------------------------------------------------------- */
.prb-icon {
	flex-shrink: 0;
	color: var(--prb-color-secondary);
}

/* --- Migas de pan ------------------------------------------------------- */
.prb-breadcrumbs {
	margin-bottom: var(--prb-space-m);
	font-size: var(--prb-text-s);
	color: var(--prb-color-muted);
}

.prb-breadcrumbs ol,
.prb-breadcrumbs ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--prb-space-3xs) var(--prb-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.prb-breadcrumbs li {
	display: flex;
	align-items: center;
	gap: var(--prb-space-3xs) var(--prb-space-2xs);
	margin: 0;
}

.prb-breadcrumbs li:not(:last-child)::after {
	content: "/";
	color: var(--prb-color-border);
}

.prb-breadcrumbs a {
	color: var(--prb-color-muted);
	text-decoration: none;
}

.prb-breadcrumbs a:hover {
	color: var(--prb-color-primary);
	text-decoration: underline;
}

.prb-breadcrumbs [aria-current="page"],
.prb-breadcrumbs .breadcrumb_last { color: var(--prb-color-text); }

/* --- Cabecera de entrada o pagina --------------------------------------- */
.prb-entry-header { margin-bottom: var(--prb-space-l); }

.prb-entry-title { margin-bottom: var(--prb-space-s); }

.prb-entry-figure { margin-bottom: var(--prb-space-l); }

.prb-entry-figure img {
	width: 100%;
	border-radius: var(--prb-radius-lg);
}

.prb-entry-figure figcaption {
	margin-top: var(--prb-space-2xs);
	font-size: var(--prb-text-s);
	color: var(--prb-color-muted);
	text-align: center;
}

/* --- Buscador ----------------------------------------------------------- */
.prb-searchform {
	display: flex;
	gap: var(--prb-space-3xs);
	width: 100%;
}

.prb-searchform-input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0.7em 1em;
	background: var(--prb-color-bg);
	border: 1px solid var(--prb-color-border);
	border-radius: var(--prb-radius);
	font-size: var(--prb-text-base);
}

.prb-searchform-input:focus {
	outline: none;
	border-color: var(--prb-color-primary);
	box-shadow: 0 0 0 3px var(--prb-color-primary-soft);
}

.prb-searchform-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	flex-shrink: 0;
	background: var(--prb-color-primary);
	border: 1px solid var(--prb-color-primary);
	border-radius: var(--prb-radius);
	color: var(--prb-color-bg);
	transition: background var(--prb-transition);
}

.prb-searchform-btn .prb-icon { color: currentColor; }

.prb-searchform-btn:hover { background: var(--prb-color-primary-hover); }

/* --- Sin resultados y 404 ----------------------------------------------- */
.prb-no-results,
.prb-404 {
	max-width: 34rem;
	margin-inline: auto;
	padding-block: var(--prb-space-xl);
	text-align: center;
}

.prb-no-results h2,
.prb-404-title { margin-bottom: var(--prb-space-s); }

.prb-no-results p,
.prb-404-text {
	margin-bottom: var(--prb-space-m);
	color: var(--prb-color-muted);
}

.prb-no-results .prb-searchform,
.prb-404-search {
	margin-inline: auto;
	max-width: 26rem;
}

.prb-404-code {
	margin: 0 0 var(--prb-space-2xs);
	font-family: var(--prb-font-heading);
	font-size: clamp(4.5rem, 18vw, 8rem);
	font-weight: 700;
	line-height: 1;
	color: var(--prb-color-border);
	letter-spacing: -0.03em;
}

.prb-404-home { margin-top: var(--prb-space-m); }

.prb-404-recent {
	margin-top: var(--prb-space-2xl);
	padding-top: var(--prb-space-m);
	border-top: 1px solid var(--prb-color-border);
	text-align: left;
}

.prb-404-recent h2 {
	margin-bottom: var(--prb-space-2xs);
	font-size: var(--prb-text-m);
}

.prb-404-recent ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.prb-404-recent li + li {
	margin-top: 0;
	border-top: 1px solid var(--prb-color-border);
}

.prb-404-recent a {
	display: block;
	padding: var(--prb-space-2xs) 0;
	text-decoration: none;
}

.prb-404-recent a:hover { text-decoration: underline; }

/* --- Paginas construidas con el constructor ------------------------------
   Las secciones traen sus propios espaciados. Si el tema anadiera los suyos,
   quedaria un hueco vacio entre la cabecera y la primera seccion. */
.prb-has-builder .prb-site-main { padding-block: 0; }

.prb-has-builder .prb-entry-content:last-child { padding-bottom: var(--prb-space-2xl); }