/*
Theme Name: Imbalance 2 – Alejandro Tux
Template: imbalance2
Description: Tema hijo de Imbalance 2 para alejandrotux.com. Agrega diseño responsivo para celular y tablet; en pantallas de escritorio el sitio se ve igual que antes.
Author: Alejandro Tux
Version: 1.4.1
Text Domain: imbalance2
*/

/*
 * Cómo está organizado:
 *   1. Todas las pantallas: ajustes de seguridad (imágenes y videos no se salen).
 *   2. Pantallas táctiles: sin el recuadro de color que aparece al pasar el mouse.
 *   3. Tablet (750–999 px): misma estructura, 3 columnas.
 *   4. Celular (menos de 750 px): ancho fluido, 2 columnas; 1 columna en menos de 520 px.
 * De 1000 px en adelante se usa el diseño original sin cambios.
 */

/* ---------- 1. Todas las pantallas ---------- */

/* Respaldo de Average: Palatino (ya instalada en Mac y Windows), reducida
   al 94 % para que ocupe el mismo ancho que Average. Se usa mientras Average
   carga o si Google Fonts no responde. Medido: 100.1 % del ancho de Average. */
@font-face {
	font-family: "Average Respaldo";
	src: local("Palatino"), local("Palatino-Roman"), local("Palatino Linotype"), local("Book Antiqua");
	size-adjust: 94%;
}

@font-face {
	font-family: "Average Respaldo";
	src: local("Palatino Bold"), local("Palatino-Bold"), local("Palatino Linotype Bold"), local("Book Antiqua Bold");
	font-weight: 700;
	size-adjust: 94%;
}

/* Una sola tipografía en todo el sitio: Average (Google Fonts, la carga
   functions.php). Respaldo: Palatino ajustada; si no existe (Android, Linux),
   Georgia o la letra con serifas del sistema. */
body,
h1, h2, h3, h4, h5, h6,
p, li, blockquote,
input, textarea, select, button {
	font-family: "Average", "Average Respaldo", Georgia, "Times New Roman", serif;
}

/* Negritas: Average no tiene versión en negrita y la que simula el navegador
   casi no se nota. Se refuerza el trazo de la misma letra para que las
   negritas del texto (CV, entradas, páginas) sí se distingan. */
.entry-content strong,
.entry-content b,
.entry-content-right strong,
.entry-content-right b {
	font-weight: 400;
	-webkit-text-stroke: 0.035em currentColor;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

.entry-content-right img,
.entry-content img,
#wides img {
	max-width: 100%;
	height: auto;
}

.entry-content-right iframe,
.entry-content-right embed,
.entry-content-right video,
.entry-content iframe,
.entry-content embed,
.entry-content video,
#wides iframe {
	max-width: 100%;
}

.entry-content-right,
.entry-content {
	overflow-wrap: break-word;
}

/* Barra "Compartir" al final de cada entrada */
.tux-compartir {
	padding: 24px 0 0;
	line-height: 2;
}

.tux-compartir-titulo {
	color: #999;
	margin-right: 6px;
}

.tux-compartir a {
	white-space: nowrap;
}

/* Menú con subcategorías (ver también functions.php, sección 6).
   En todos los dispositivos: el botón "+" despliega las subcategorías
   debajo de su categoría; "−" las vuelve a ocultar. */
#header .menu .sub-menu {
	display: none;
	padding: 9px 0 0 14px;
}

#header .menu li.tux-abierto > .sub-menu {
	display: block;
}

.tux-submenu-boton {
	display: inline-block;
	height: 13px; /* misma altura de renglón que los enlaces del menú */
	margin: 0 0 0 2px;
	padding: 0 8px;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	line-height: 13px;
	color: #a1a1a1;
	vertical-align: top;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.tux-submenu-boton:hover {
	color: #303030;
}

.tux-submenu-boton:focus {
	outline: none;
}

.tux-submenu-boton:focus-visible {
	outline: 1px dotted #a1a1a1;
}

/* ---------- 2. Pantallas táctiles ---------- */

@media (hover: none) {
	.box .texts {
		display: none !important;
	}
}

/* ---------- 3. Tablet y menores (hasta 999 px) ---------- */

@media (max-width: 999px) {

	.wrapper {
		width: 710px !important;
		margin: 0 auto !important;
	}

	/* Encabezado: el nombre arriba; los dos menús y el buscador debajo */
	#site-title {
		float: none;
		width: auto;
		padding: 0 0 25px;
	}

	/* Entradas y páginas: sin la columna vacía de la izquierda */
	.post_title h1,
	.entry-title,
	.page-title {
		margin-left: 0;
		width: auto;
	}

	#nav-above {
		float: none;
		width: auto;
		padding: 0 0 6px;
		text-align: left;
	}

	#content > table[id^="post-"],
	#content > table[id^="post-"] > tbody,
	#content > table[id^="post-"] > tbody > tr,
	#content > table[id^="post-"] > tbody > tr > td {
		display: block;
		width: auto;
	}

	.entry-aside {
		padding: 0;
	}

	.entry-content {
		width: auto;
		margin-left: 0;
	}

	#comments {
		width: auto;
		padding-left: 0;
	}

	/* Pie de página: la frase arriba, los menús debajo */
	#footer {
		display: flex;
		flex-wrap: wrap;
	}

	#site-info {
		float: none;
		width: 100%;
		padding: 0 0 20px;
	}

	#footer-left {
		order: 2;
		float: none;
	}

	#footer-right {
		order: 3;
		float: none;
	}

	#footer .clear {
		display: none;
	}
}

/* ---------- 4. Celular (hasta 749 px) ---------- */

@media (max-width: 749px) {

	/* Margen de página en porcentaje del ancho de pantalla: deja espacio
	   para el recuadro de color sin que se salga de la pantalla */
	.wrapper {
		width: auto !important;
		margin: 0 !important;
		padding: 24px 5vw 0;
	}

	/* Encabezado */
	#header {
		padding-bottom: 20px;
	}

	#site-title {
		padding-bottom: 16px;
	}

	#header-left,
	#header-center {
		float: left;
		width: 50%;
		padding-right: 0;
		box-sizing: border-box;
	}

	#header-left {
		padding-right: 12px;
	}

	.menu ul li {
		padding-bottom: 0;
	}

	.menu ul a {
		display: inline-block;
		padding: 5px 0;
		line-height: 1.35;
		font-size: 15px;
	}

	#search {
		float: none;
		clear: both;
		width: auto;
		padding-top: 14px;
	}

	#search input[type=text] {
		width: 100%;
		box-sizing: border-box;
		padding: 10px 12px;
		font-size: 16px; /* 16 px evita que el iPhone haga zoom al tocar el buscador */
	}

	#header-right {
		margin: 12px 0 0;
	}

	#header .menu .sub-menu {
		padding: 2px 0 6px 14px;
	}

	.tux-submenu-boton {
		height: auto;
		padding: 5px 10px;
		font-size: 17px;
		line-height: 1.2;
	}

	/* Cuadrícula de obras: anula el acomodo automático del escritorio */
	#boxes,
	#related {
		position: static !important;
		height: auto !important;
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 8.6957%; /* el doble del borde del recuadro, como en escritorio (40 px entre columnas de 210 px) */
		row-gap: 0; /* el espacio vertical lo da el margen inferior de cada obra (abajo) */
	}

	#boxes {
		margin-top: 24px;
	}

	/* Espacio vertical entre obras = el mismo que entre columnas: el doble del
	   borde del recuadro, 19.0476 % del ancho de la obra (en porcentaje, el
	   margen se calcula sobre el ancho de la columna, en 1 o 2 columnas). */
	#boxes .box,
	#related .box {
		position: static !important;
		top: auto !important;
		left: auto !important;
		width: auto;
		margin: 0 0 19.0476%;
	}

	.box img {
		width: 100%;
		height: auto;
	}

	/* Recuadro de color al pasar el mouse, con la misma proporción que en
	   escritorio: borde de 20 px por cada 210 px de columna = 9.5238 %.
	   El borde se hace con relleno (padding) porque solo el relleno y los
	   márgenes aceptan porcentajes. En pantallas táctiles sigue apagado
	   (ver sección 2). */
	.box .texts {
		top: 0;
		left: 0;
		width: 100%;
		margin: -9.5238% 0 0 -9.5238%;
		padding: 9.5238%;
		border-width: 0;
	}

	/* 8 % del recuadro completo = el mismo borde (20 de 250 px en escritorio) */
	.box .texts .abs {
		top: 0;
		left: 8%;
		right: 8%;
		margin-top: 8%;
	}

	.box .categories {
		padding-top: 12px;
		padding-bottom: 6px;
	}

	.box h1 {
		font-size: 17px;
		line-height: 1.3;
		padding-bottom: 6px;
	}

	.box p {
		font-size: 14px;
		line-height: 1.5;
	}

	.box .posted {
		font-size: 12px;
	}

	.fetch {
		width: auto;
	}

	/* Entradas y páginas */
	.post_title {
		margin-top: 24px;
	}

	.post_title h1,
	.entry-title,
	.page-title {
		margin-top: 24px;
		font-size: 22px;
		line-height: 1.3;
	}

	.post_title h1 {
		margin-top: 0;
	}

	.entry-meta {
		padding-bottom: 18px;
	}

	.entry-content-right,
	.entry-content {
		font-size: 16px;
		line-height: 1.6;
	}

	blockquote {
		margin-left: 0;
		padding-left: 14px;
		font-size: 16px;
	}

	.post .alignleft,
	.page .alignleft,
	.post .alignright,
	.page .alignright {
		float: none;
		display: block;
		margin: 20px 0;
	}

	.comment-form-author,
	.comment-form-email,
	.comment-form-url,
	.comment-form-comment,
	.form-submit input,
	#comments input[type="text"],
	#comments textarea {
		width: 100%;
		box-sizing: border-box;
	}

	/* Pie de página */
	#footer {
		padding: 24px 0 40px;
	}

	#footer-left,
	#footer-right {
		width: 50%;
		padding-right: 0;
	}
}

/* Celular angosto: una sola columna */
@media (max-width: 519px) {

	#boxes,
	#related {
		grid-template-columns: 1fr;
	}

	/* Una columna: un poco más de margen para que el recuadro quepa completo */
	.wrapper {
		padding-left: 9vw;
		padding-right: 9vw;
	}
}