/*
Theme Name: BlogHash Child - Planeta Android
Template: bloghash
Version: 1.0.0
Description: Child theme de BlogHash con rediseño tech oscuro para planetaandroid.net
Author: Planeta Android
*/

:root {
	--bloghash-primary: #5B7FFF;
	--bloghash-secondary: #0B0E14;
	--bloghash-gradient: linear-gradient(135deg, rgba(91,127,255,0.18), rgba(244,54,118,0.10));
	--bloghash-radius: 1rem;
	--bloghash-full-radius: 3rem;
	--bloghash-normal-radius: .6rem;
	--bloghash-font-sans-serif: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--pa-accent-2: #F43676;
	--pa-bg-dark: #0B0E14;
	--pa-card-dark: #151A24;
	--pa-border-dark: #232A38;
}

body {
	font-family: var(--bloghash-font-sans-serif);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title,
.bloghash-site-title,
.bloghash-hero-slider .entry-title {
	font-family: 'Sora', var(--bloghash-font-sans-serif);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* --- Tarjetas de posts: elevación sutil al hover, sensación mas "producto" --- */
.bloghash-post-item,
.bloghash-blog-entry {
	transition: var(--bloghash-transition-primary);
}

.bloghash-post-item:hover,
.bloghash-blog-entry:hover {
	transform: translateY(-4px);
}

.bloghash-post-item .post-thumbnail img,
.bloghash-blog-entry .post-thumbnail img {
	transition: transform .5s cubic-bezier(.25,.8,.25,1);
}

.bloghash-post-item:hover .post-thumbnail img,
.bloghash-blog-entry:hover .post-thumbnail img {
	transform: scale(1.05);
}

/* --- Dark mode: fondo mas "tech", tarjetas con borde sutil en vez de sombra dura --- */
html[data-darkmode="dark"] body {
	background-color: var(--pa-bg-dark);
}

html[data-darkmode="dark"] .bloghash-post-item,
html[data-darkmode="dark"] .bloghash-blog-entry,
html[data-darkmode="dark"] #secondary .bloghash-widget,
html[data-darkmode="dark"] #secondary .widget {
	background-color: var(--pa-card-dark);
	border: 1px solid var(--pa-border-dark);
}

html[data-darkmode="dark"] .site-header,
html[data-darkmode="dark"] #masthead {
	background-color: var(--pa-bg-dark);
	border-bottom: 1px solid var(--pa-border-dark);
}

/* --- Botones y enlaces con acento en gradiente sutil --- */
.bloghash-btn.btn-small,
.wp-block-button__link,
.bloghash-header-widgets .bloghash-header-widget .btn-small {
	background-image: linear-gradient(135deg, var(--bloghash-primary), var(--pa-accent-2));
	border: none;
}

/* --- Badges de categoria: mas compactos y con mejor contraste en oscuro --- */
.cat-links a,
.bloghash-post-item .post-category a,
.entry-category a {
	border-radius: var(--bloghash-normal-radius);
	font-weight: 600;
}

/* --- Grids del plugin "mostrar_entradas" (cluster-container): no traian modo oscuro,
   quedaban con fondo claro fijo y heredaban texto claro del tema -> ilegibles --- */
.cluster-container {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 22px;
}

/* Especificidad reforzada (.cluster-container .cluster-item, 0-2-0): el
   plugin que genera esta galeria imprime su propio <style> con reglas
   .cluster-item de la MISMA especificidad (0-1-0) mas tarde en el HTML,
   por lo que ganaba por orden de cascada pese a estar despues en mi CSS. */
.cluster-container .cluster-item {
	background-color: #f9f9f9;
	border: 1px solid #e5e5e5;
	border-radius: 30px;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.25,.8,.25,1), box-shadow .35s ease, border-color .35s ease;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0,0,0,.10);
	padding: 0;
	text-align: left;
}

.cluster-container .cluster-item .thumbnail {
	position: relative;
	aspect-ratio: 16 / 10;
	background-size: cover;
	background-position: center;
	transition: transform .6s cubic-bezier(.25,.8,.25,1);
	border-radius: 0;
}

.cluster-container .cluster-item .thumbnail::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.35) 100%);
	opacity: 0;
	transition: opacity .35s ease;
}

.cluster-container .cluster-item:hover .thumbnail {
	transform: scale(1.06);
}

.cluster-container .cluster-item:hover .thumbnail::after {
	opacity: 1;
}

.cluster-container .cluster-item h2 {
	color: #1a1a1a;
	font-family: 'Sora', var(--bloghash-font-sans-serif);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.38;
	margin: 16px 18px 4px;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: calc(18px * 1.38 * 2);
}

.cluster-container .cluster-item a {
	color: var(--bloghash-primary);
	font-size: 14px;
	font-weight: 600;
	margin: auto 18px 16px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	width: fit-content;
	text-decoration: none;
	transition: gap .25s ease, color .25s ease;
}

.cluster-container .cluster-item a::after {
	content: "\2192";
	transition: transform .25s ease;
}

.cluster-container .cluster-item a:hover {
	gap: 9px;
}

html[data-darkmode="dark"] .cluster-container .cluster-item {
	background-color: var(--pa-card-dark);
	border-color: var(--pa-border-dark);
	box-shadow: 0 12px 28px rgba(0,0,0,.32);
}

html[data-darkmode="dark"] .cluster-container .cluster-item h2 {
	color: #ffffff;
}

html[data-darkmode="dark"] .cluster-container .cluster-item a {
	color: var(--pa-accent-2);
}

.cluster-container .cluster-item:hover {
	transform: translateY(-6px);
	border-color: var(--bloghash-primary);
}

html[data-darkmode="dark"] .cluster-container .cluster-item:hover {
	box-shadow: 0 20px 40px rgba(0,0,0,.5);
}

/* --- Ticker "Noticias destacadas": con muchos items la formula de velocidad
   del plugin (vanilla-marquee, speed en px/s sobre el ancho total del contenido)
   da una duracion de ~600s (10+ min por vuelta) -> se ve congelado a simple vista.
   Se fuerza una duracion fija y razonable via !important (gana a la animacion
   inline sin !important que pone el JS). --- */
.bloghash-ticker.one-ticker .ticker-slider-wrap .js-marquee-wrapper {
	animation-duration: 500s !important;
}

/* --- Logo: version blanca en modo oscuro. custom_logo apunta a logo-dark.svg
   (version clara, la que ven crawlers/redes sociales); en el header con
   data-darkmode="dark" se sustituye por logo-white.svg via CSS puro. --- */
html[data-darkmode="dark"] img.bloghash-svg-logo {
	content: url('https://planetaandroid.net/wp-content/uploads/2026/09/logo-white.svg');
}

/* El tema limita el logo a max-width:100% de su celda en el header (~211px).
   Se agranda con un ancho fijo explicito para que resalte mas. */
.bloghash-logo a img.bloghash-svg-logo {
	max-width: none !important;
	max-height: none !important;
	width: 280px !important;
	height: auto !important;
}

/* ==========================================================================
   Footer: logo blanco, enlaces legibles (tenian color:#000000 fijo por
   inline-style desde el widget, invisibles sobre el fondo oscuro) y mejor
   orden/espaciado entre columnas.
   ========================================================================== */

/* Textura del footer: puntos sutiles + dos brillos radiales (azul/rosa).
   100% CSS, sin imagenes ni peticiones extra -> costo de rendimiento nulo. */
#bloghash-footer {
	position: relative;
	background-image:
		radial-gradient(650px circle at 10% 10%, rgba(91,127,255,.24), transparent 62%),
		radial-gradient(550px circle at 90% 85%, rgba(244,54,118,.20), transparent 62%),
		radial-gradient(circle at 1px 1px, rgba(255,255,255,.14) 1.3px, transparent 0);
	background-size: auto, auto, 22px 22px;
}

#bloghash-footer-widgets {
	padding-top: 20px;
	position: relative;
}

#bloghash-footer-widgets .bloghash-container {
	max-width: 1220px;
}

#bloghash-footer-widgets .bloghash-footer-column {
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Logo del footer: mismo SVG, forzado a blanco (el footer siempre es oscuro) */
#block-42 img {
	content: url('https://planetaandroid.net/wp-content/uploads/2026/09/logo-white.svg');
	width: 280px;
	height: auto;
	max-width: 100%;
}

#block-42 .wp-block-image figure {
	margin: 0 0 14px;
}

#block-50 p {
	max-width: 260px;
	line-height: 1.5;
	margin: 0 auto;
}

/* Titulos de columna: mismo estilo Sora + linea de acento debajo */
#bloghash-footer-widgets h3 {
	font-family: 'Sora', var(--bloghash-font-sans-serif);
	font-size: 17px;
	position: relative;
	padding-bottom: 10px;
	margin-bottom: 16px !important;
}

#bloghash-footer-widgets h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 36px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--bloghash-primary), var(--pa-accent-2));
}

#bloghash-footer-widgets .bloghash-footer-widget > div > div:has(> a) {
	margin-bottom: 9px;
}

#bloghash-footer-widgets .bloghash-footer-widget a {
	color: #c7cdd6 !important;
	transition: color .2s ease, padding-left .2s ease;
	display: inline-block;
}

#bloghash-footer-widgets .bloghash-footer-widget a:hover {
	color: var(--bloghash-primary) !important;
	padding-left: 4px;
}

/* --- Anuncios manuales in-article (Fase 3). min-height reservado para que
   el layout no salte cuando el anuncio termina de cargar. --- */
.pa-inarticle-ad {
	margin: 32px 0;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.pa-inarticle-ad__label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted, #8a8fa3);
	opacity: .7;
}

.pa-inarticle-ad ins.adsbygoogle {
	width: 100%;
}

/* --- Tablas dentro del contenido (wp-block-table): varios posts (11 en total)
   traen filas con fondo claro fijo por inline-style (white/#f2f2f2). El texto
   heredaba el color claro del modo oscuro -> invisible (texto claro sobre
   fondo claro). Se fuerza texto oscuro + fondo blanco de forma consistente,
   sin pelear con los colores alternados que ya traen esas filas. --- */
.entry-content .wp-block-table table,
.entry-content table {
	background-color: #ffffff;
}

.entry-content .wp-block-table table td,
.entry-content .wp-block-table table th,
.entry-content table td,
.entry-content table th {
	color: #1a1a1a !important;
	border-color: #e5e5e5;
}

.entry-content .wp-block-table table strong,
.entry-content table strong {
	color: #12141a;
}

/* --- Boton "Quick Download Button" (4 posts): el plugin nunca define color
   de texto propio, solo fondo blanco inline. Funcionaba con el tema claro
   original; con el modo oscuro el texto se volvia invisible. --- */
[data-plugin-name="qdbn"] button.g-btn.f-l,
[data-plugin-name="qdbn"] button.g-btn.f-l span {
	color: #1a1a1a !important;
}

/* --- PageSpeed / Accesibilidad: contraste insuficiente ---
   1) Badges de categoria: texto del mismo color que el fondo claro tras el
      luminance() del tema -> ratios de 1.5:1 a 3.3:1. color-mix() oscurece
      el texto un 45% hacia negro conservando el tono de cada categoria;
      verificado matematicamente que las 12 combinaciones de la paleta pasan
      4.5:1 AA con ese porcentaje.
   2) "Buscar" (boton) y titulo del ticker: blanco sobre el azul de acento
      da 3.54:1. Se oscurece solo el fondo de esos dos casos puntuales. */
.post-category .cat-links a,
.entry-category a {
	color: color-mix(in srgb, var(--bloghash-primary) 55%, black) !important;
}

.wp-block-search__button.wp-element-button,
.bloghash-ticker .widget-title {
	background-color: #3D63F0 !important;
}

/* ==========================================================================
   Movil: area tactil del menu hamburguesa (20x11px real, muy por debajo del
   minimo recomendado 44x44) y ancho del contenido (padding duplicado entre
   .bloghash-container y article -> el texto usaba solo ~75% del viewport).
   ========================================================================== */
@media only screen and (max-width: 767px) {

	.bloghash-hamburger {
		min-width: 44px;
		min-height: 44px;
		justify-content: center;
	}

	article {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.bloghash-container {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}

/* --- GEO: recuadro de respuesta directa al inicio del articulo (parrafo
   con clase geo-direct-answer). Ayuda a lectores humanos Y a que los
   motores de IA extraigan la respuesta puntual mas facilmente. --- */
.entry-content p.geo-direct-answer {
	background: linear-gradient(135deg, rgba(91,127,255,.10), rgba(244,54,118,.06));
	border-left: 3px solid var(--bloghash-primary, #5B7FFF);
	border-radius: 10px;
	padding: 16px 20px;
	margin: 4px 0 24px;
	font-size: 16px;
	line-height: 1.6;
}

/* --- FAQ de Rank Math: que combine con el diseño oscuro del sitio --- */
.rank-math-block .rank-math-list-item {
	list-style: none;
	margin-bottom: 18px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--pa-border-dark, #232A38);
}

.rank-math-block .rank-math-question {
	font-family: 'Sora', var(--bloghash-font-sans-serif);
	font-size: 17px;
	margin-bottom: 6px;
}

html[data-darkmode="dark"] .rank-math-block .rank-math-answer {
	color: #c7cdd6;
}