/* ==================================================================
   BUSCADOR DE HOGARES — tema CLARO.
   Fondo blanco, letras negras, dorado más brillante en los acentos.

   Acotado a `body:has(.es-properties)`: el buscador, la vista de mapa y los
   resultados de búsqueda. La ficha individual sigue en oscuro (fosc.css).

   SOBRE EL DORADO — la parte que no es obvia:
   sobre blanco, cuanto MÁS brillante es un dorado, MENOS se lee. Son cosas
   opuestas. Así que el dorado va donde de verdad luce:
     · fondos de botón (con el texto oscuro encima) -> #D4AF37, bien brillante
     · filetes, iconos, estados activos             -> #D4AF37
     · texto dorado sobre blanco (el precio)        -> #B8860B, más profundo,
       porque el brillante ahí daría un contraste de 2.2 y sería ilegible.
   ================================================================== */

body:has(.es-properties) {
	--mg-or-vius:  #D4AF37;   /* dorado brillante: fondos, filetes, iconos */
	--mg-or-text:  #B8860B;   /* dorado legible sobre blanco: precios */
	--mg-tinta:    #14110E;   /* la "letra negra" */
	--mg-tinta-2:  #4A443C;   /* secundario, aún con contraste de sobra */
}

/* --- Fondo y texto base --- */
body:has(.es-properties),
body:has(.es-properties) #content,
body:has(.es-properties) .site-content,
body:has(.es-properties) .site-primary-header-wrap,
body:has(.es-properties) .ast-primary-header-bar {
	background: #FFFFFF;
}

body:has(.es-properties),
body:has(.es-properties) .entry-content,
body:has(.es-properties) .es-listings__wrap-inner,
body:has(.es-properties) .es-listing,
body:has(.es-properties) .es-title,
body:has(.es-properties) .es-field,
body:has(.es-properties) h1,
body:has(.es-properties) h2,
body:has(.es-properties) h3 {
	color: var(--mg-tinta, #14110E);
}

/* --- Nada apagado: los grises del plugin suben de contraste --- */
body:has(.es-properties) .es-total,
body:has(.es-properties) .es-field__label,
body:has(.es-properties) .es-address {
	color: var(--mg-tinta-2, #4A443C) !important;
}

/* --- Tarjetas del listado: blancas, con filete y sombra suave --- */
body:has(.es-properties) .es-listing {
	background: #FFFFFF;
	border: 1px solid rgba(20, 17, 14, .10);
	border-radius: 13px;
	overflow: hidden;
	box-shadow: 0 2px 10px rgba(20, 17, 14, .06);
	transition: box-shadow 250ms var(--mg-ease, ease), border-color 250ms var(--mg-ease, ease);
}

body:has(.es-properties) .es-listing:hover {
	border-color: var(--mg-or-vius, #D4AF37);
	box-shadow: 0 8px 24px rgba(20, 17, 14, .12);
}

body:has(.es-properties) .es-listing a {
	color: var(--mg-tinta, #14110E);
}

body:has(.es-properties) .es-listing a:hover {
	color: var(--mg-or-text, #B8860B);
}

/* --- El precio: dorado legible, y bastante más grande --- */
body:has(.es-properties) .es-price,
body:has(.es-properties) .es-listing__price {
	color: var(--mg-or-text, #B8860B) !important;
	font-size: 22px !important;
	font-weight: 700;
	letter-spacing: .01em;
}

/* --- Título de cada propiedad, más presente --- */
body:has(.es-properties) .es-listing__title,
body:has(.es-properties) .es-listing a[class*="title"],
body:has(.es-properties) .es-listing h3 a {
	font-size: 18px !important;
	font-weight: 700;
}

/* --- Campos del buscador --- */
body:has(.es-properties) .es-field__input,
body:has(.es-properties) input[type="text"],
body:has(.es-properties) input[type="email"],
body:has(.es-properties) input[type="tel"],
body:has(.es-properties) select,
body:has(.es-properties) textarea {
	background: #FFFFFF;
	border: 1px solid rgba(20, 17, 14, .22);
	color: var(--mg-tinta, #14110E);
}

body:has(.es-properties) .es-field__input:focus,
body:has(.es-properties) select:focus {
	border-color: var(--mg-or-vius, #D4AF37);
	outline: none;
}

body:has(.es-properties) .es-field__input::placeholder {
	color: rgba(20, 17, 14, .48);
}

/* --- Botones: aquí es donde el dorado brillante luce --- */
body:has(.es-properties) .es-btn {
	background: var(--mg-or-vius, #D4AF37) !important;
	border: 0;
	color: #14110E !important;
	font-weight: 700;
}

body:has(.es-properties) .es-btn:hover {
	filter: brightness(1.06);
	color: #14110E !important;
}

body:has(.es-properties) .es-btn--secondary {
	background: transparent !important;
	border: 1px solid var(--mg-or-vius, #D4AF37);
	color: var(--mg-or-text, #B8860B) !important;
}

/* --- Chips de filtro --- */
body:has(.es-properties) .es-search-nav__item,
body:has(.es-properties) .js-es-search-nav__label,
body:has(.es-properties) .es-search-nav__label {
	background: #FFFFFF;
	color: var(--mg-tinta, #14110E) !important;
	border-color: rgba(20, 17, 14, .22);
}

/* --- Tamaños: todo lo que estaba a 12 px sube a 14 --- */
body:has(.es-properties) .js-es-search-nav__label,
body:has(.es-properties) .es-search-nav__label,
body:has(.es-properties) .es-address,
body:has(.es-properties) .es-listing span,
body:has(.es-properties) .es-listing b,
body:has(.es-properties) .es-btn {
	font-size: 14px !important;
}

body:has(.es-properties) .es-total,
body:has(.es-properties) .es-field__label {
	font-size: 15px !important;
}

/* --- Menú del sitio: tinta sobre blanco, activo en dorado --- */
body:has(.es-properties) .site-header .site-navigation a,
body:has(.es-properties) .site-header .ast-nav-menu a {
	color: var(--mg-tinta, #14110E) !important;
}

body:has(.es-properties) .site-header .ast-nav-menu .current-menu-item > a,
body:has(.es-properties) .site-header .ast-nav-menu .current_page_item > a,
body:has(.es-properties) .site-header .site-navigation a:hover {
	color: var(--mg-or-text, #B8860B) !important;
}

/* --- Fuera el verde azulado que traía el plugin --- */
body:has(.es-properties) [style*="13a48e"],
body:has(.es-properties) [style*="13A48E"] {
	color: var(--mg-or-text, #B8860B) !important;
}

/* --- Botones de vista (cuadrícula / lista / medio mapa) ---
   Son botones de ICONO: llevan dentro una etiqueta de texto ("Grid", "List",
   "Half Map") que debe quedar oculta. Mi regla general de `.es-btn` les puso
   fondo dorado y agrandó esa etiqueta, que se destapó encima del icono.
   Aquí se les devuelve su aspecto propio. */
body:has(.es-properties) .es-btn--icon {
	/* Centrado real del icono dentro del recuadro: flex en vez de confiar en
	   el interlineado, que dejaba el dibujo descolocado. */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 !important;
	background: #FFFFFF !important;
	border: 1px solid rgba(20, 17, 14, .22) !important;
	border-radius: 6px !important;
	color: var(--mg-tinta, #14110E) !important;
	font-size: 0 !important;        /* oculta la etiqueta de texto */
	line-height: 0 !important;
}

body:has(.es-properties) .es-btn--icon .es-icon {
	display: block !important;
	font-size: 18px !important;
	line-height: 1 !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	color: var(--mg-tinta, #14110E) !important;
}

body:has(.es-properties) .es-btn--icon:hover,
body:has(.es-properties) .es-btn--icon.es-btn--active,
body:has(.es-properties) .es-btn--icon.is-active,
body:has(.es-properties) .es-btn--icon.active {
	background: var(--mg-or-vius, #D4AF37) !important;
	border-color: var(--mg-or-vius, #D4AF37) !important;
}

body:has(.es-properties) .es-btn--icon:hover .es-icon,
body:has(.es-properties) .es-btn--icon.es-btn--active .es-icon,
body:has(.es-properties) .es-btn--icon.is-active .es-icon,
body:has(.es-properties) .es-btn--icon.active .es-icon {
	color: #14110E !important;
}

/* El crédito "Powered by Estatik" quedaba en crema sobre blanco (ratio 1.1,
   invisible) y a 12 px. Se apunta por su destino, que es lo único estable
   que tiene: no lleva clase propia. */
body:has(.es-properties) a[href*="estatik"] {
	color: rgba(20, 17, 14, .55) !important;
	font-size: 13px !important;
}


/* ==================================================================
   LA FICHA DE PROPIEDAD, con la misma lógica que el buscador.
   Blanco, letra negra, dorado en los acentos. (Alex, 2026-09-10)

   Los componentes propios —pestañas, tarjetas de "Lo esencial" y formulario—
   se construyeron oscuros. Aquí se les da la vuelta. Sus ficheros originales
   (`medios.css`, `fitxa.css`, `formulari.css`) no se tocan, para poder volver
   al oscuro descomentando `fosc.css` y quitando este bloque.
   ================================================================== */

body.single-properties {
	--mg-or-vius:  #D4AF37;
	--mg-or-text:  #B8860B;
	--mg-tinta:    #14110E;
	--mg-tinta-2:  #4A443C;
	background: #FFFFFF;
}

body.single-properties #content,
body.single-properties .site-content,
body.single-properties .site-primary-header-wrap,
body.single-properties .ast-primary-header-bar {
	background: #FFFFFF;
}

body.single-properties,
body.single-properties .es-single,
body.single-properties h1,
body.single-properties h2,
body.single-properties h3,
body.single-properties .es-property-section__title,
body.single-properties .es-property-field__value,
body.single-properties .es-entity-field__value,
body.single-properties .es-property-field__value p,
body.single-properties .property-title {
	color: var(--mg-tinta, #14110E) !important;
}

body.single-properties .es-breadcrumbs__item,
body.single-properties .es-address,
body.single-properties .es-property-field__label {
	color: var(--mg-tinta-2, #4A443C) !important;
}

body.single-properties .es-breadcrumbs__item a {
	color: var(--mg-or-text, #B8860B) !important;
}

/* Menú del sitio */
body.single-properties .site-header .site-navigation a,
body.single-properties .site-header .ast-nav-menu a {
	color: var(--mg-tinta, #14110E) !important;
}
body.single-properties .site-header .ast-nav-menu .current-menu-item > a,
body.single-properties .site-header .site-navigation a:hover {
	color: var(--mg-or-text, #B8860B) !important;
}

/* --- Pestañas Fotos / Vídeo / Tour --- */
body.single-properties .mg-medios .mg-medios__barra {
	background: #FFFFFF;
	border: 1px solid rgba(20, 17, 14, .14);
	border-bottom: 0;
}

body.single-properties .mg-medios .mg-medios__pestanya {
	background: #FFFFFF;
	color: var(--mg-tinta-2, #4A443C);
	border-bottom: 3px solid transparent;
}

body.single-properties .mg-medios .mg-medios__pestanya:hover {
	background: rgba(212, 175, 55, .10);
	color: var(--mg-tinta, #14110E);
}

/* La activa: dorado brillante de fondo, con la letra oscura encima.
   Aquí el dorado luce sin perder legibilidad. */
body.single-properties .mg-medios .mg-medios__pestanya.es-activa,
body.single-properties .mg-medios .mg-medios__pestanya.es-activa:hover {
	background: var(--mg-or-vius, #D4AF37);
	color: #14110E;
	border-bottom-color: var(--mg-or-vius, #D4AF37);
}

body.single-properties .mg-medios .mg-medios__contador {
	color: #14110E;
}

body.single-properties .mg-medios .mg-medios__panel {
	background: #FFFFFF;
	border-color: rgba(20, 17, 14, .14);
}

/* --- "Lo esencial": tarjetas claras --- */
body.single-properties .es-property_section--basic-facts {
	background: #FFFFFF;
	border: 1px solid rgba(20, 17, 14, .12);
}

body.single-properties .mg-fitxes .mg-fitxa {
	background: #FFFFFF;
	border: 1px solid rgba(20, 17, 14, .12);
	box-shadow: 0 2px 8px rgba(20, 17, 14, .05);
}

body.single-properties .mg-fitxes .mg-fitxa:hover {
	border-color: var(--mg-or-vius, #D4AF37);
	box-shadow: 0 8px 20px rgba(20, 17, 14, .10);
}

body.single-properties .mg-fitxa__icona {
	background: rgba(212, 175, 55, .14);
	color: var(--mg-or-text, #B8860B);
}

body.single-properties .mg-fitxes .mg-fitxa__etiqueta {
	color: var(--mg-tinta-2, #4A443C);
	font-size: 13px;
}

body.single-properties .mg-fitxes .mg-fitxa__valor {
	color: var(--mg-tinta, #14110E);
	font-size: 20px;
}

/* --- Formulario lateral --- */
body.single-properties .mg-contacte {
	background: #FFFFFF;
	border: 1px solid rgba(20, 17, 14, .12);
	box-shadow: 0 2px 12px rgba(20, 17, 14, .06);
}

body.single-properties .mg-contacte h3.mg-contacte__titol {
	color: var(--mg-tinta, #14110E);
}

body.single-properties .mg-contacte p.mg-contacte__entrada {
	color: var(--mg-tinta-2, #4A443C);
	font-size: 15px;
}

body.single-properties .mg-contacte input.es-field__input,
body.single-properties .mg-contacte textarea.es-field__input,
body.single-properties .mg-contacte .es-field input,
body.single-properties .mg-contacte .es-field textarea,
body.single-properties .mg-contacte select {
	background: #FFFFFF;
	border: 1px solid rgba(20, 17, 14, .22);
	color: var(--mg-tinta, #14110E);
}

body.single-properties .mg-contacte input.es-field__input::placeholder {
	color: rgba(20, 17, 14, .48);
}

body.single-properties .mg-contacte .es-field__label,
body.single-properties .mg-contacte label {
	color: var(--mg-tinta-2, #4A443C);
	font-size: 13px;
}

body.single-properties .mg-contacte button[type="submit"],
body.single-properties .mg-contacte .es-btn,
body.single-properties .es-btn {
	background: var(--mg-or-vius, #D4AF37) !important;
	color: #14110E !important;
	border: 0;
}

/* --- Precio y datos de cabecera, más grandes --- */
body.single-properties .es-price,
body.single-properties .es-listing__price {
	color: var(--mg-or-text, #B8860B) !important;
	font-size: 30px !important;
	font-weight: 700;
}

body.single-properties .es-listing__meta,
body.single-properties .es-listing__meta span,
body.single-properties .es-listing__meta b {
	font-size: 15px !important;
	color: var(--mg-tinta, #14110E);
}

body.single-properties .es-address {
	font-size: 14px !important;
}

/* --- Restos de bajo contraste y letra pequeña en la ficha (medidos) ---
     .author-name / .published   #F1DB95 sobre blanco, ratio 1.4
     a[href*=estatik]            crema sobre blanco, ratio 1.1
     .es-breadcrumbs__item       12 px
     .es-btn__label              12 px  ("Salvar" / "Cuota" de la galería)   */

body.single-properties .author-name,
body.single-properties .author-name a,
body.single-properties .published,
body.single-properties .posted-on,
body.single-properties .entry-meta,
body.single-properties .entry-meta a {
	color: var(--mg-tinta-2, #4A443C) !important;
}

body.single-properties a[href*="estatik"] {
	color: rgba(20, 17, 14, .55) !important;
	font-size: 13px !important;
}

body.single-properties .es-breadcrumbs__item,
body.single-properties .es-breadcrumbs__item a {
	font-size: 14px !important;
}

body.single-properties .es-btn__label {
	font-size: 13px !important;
}

/* Los botones flotantes de la galería (Salvar / Cuota) sobre foto:
   fondo blanco sólido para que se lean encima de cualquier imagen. */
body.single-properties .es-property__control .es-btn,
body.single-properties .es-gallery .es-btn {
	background: rgba(255, 255, 255, .94) !important;
	color: var(--mg-tinta, #14110E) !important;
	border: 1px solid rgba(20, 17, 14, .14);
}

/* El recuadro de los botones de vista salía 35x40, no cuadrado: el ancho
   fijado perdía contra el CSS del plugin. Con min/max queda 40x40 exacto y
   el icono centrado dentro. */
body:has(.es-properties) .es-btn--icon {
	min-width: 40px !important;
	max-width: 40px !important;
	min-height: 40px !important;
	max-height: 40px !important;
	box-sizing: border-box !important;
	flex: 0 0 40px !important;
}

body.single-properties .es-terms-text,
body:has(.es-properties) .es-terms-text {
	font-size: 13px !important;
}

/* --- Retoques pedidos por Alex (2026-09-10) --- */

/* 1. Fuera la firma "Por admin / 20 de agosto de 2026". Es la meta de autor y
      fecha que pone WordPress por defecto: en una ficha de inmueble no aporta
      nada y además delata cuánto lleva publicado el anuncio.
      Para recuperarla, borrar esta regla. */
body.single-properties .entry-meta,
body.single-properties .ast-single-post-meta,
body.single-properties .post-meta,
body.single-properties .author-name,
body.single-properties .published,
body.single-properties .posted-on {
	display: none !important;
}

/* 2. El recuadro de Fotos / Vídeo / Tour, con filete dorado en todo el
      contorno en vez del gris casi invisible. */
body.single-properties .mg-medios .mg-medios__barra {
	border: 1px solid var(--mg-or-vius, #D4AF37);
	border-bottom: 0;
}

body.single-properties .mg-medios .mg-medios__panel {
	border: 1px solid var(--mg-or-vius, #D4AF37);
	border-top: 0;
}

/* La pestaña inactiva necesita su propia separación, que antes daba el gris. */
body.single-properties .mg-medios .mg-medios__pestanya + .mg-medios__pestanya {
	border-left: 1px solid rgba(212, 175, 55, .45);
}

/* 3. El precio, más grande. Es el dato que más se mira. */
body.single-properties .es-price,
body.single-properties .es-listing__price {
	font-size: 40px !important;
	line-height: 1.1;
}

@media (max-width: 782px) {
	body.single-properties .es-price,
	body.single-properties .es-listing__price {
		font-size: 30px !important;
	}
}

/* El panel de Fotos nació sin borde a propósito (Fase 3), para que la galería
   no quedara metida en una caja. Pero el recuadro dorado tiene que envolver el
   conjunto entero, así que se lo devolvemos. */
body.single-properties .mg-medios .mg-medios__panel#mg-panel-fotos {
	border: 1px solid var(--mg-or-vius, #D4AF37);
	border-top: 0;
	border-radius: 0 0 4px 4px;
	overflow: hidden;
}

/* --- "Lo esencial": que ningún valor se salga de su tarjeta (Alex, 2026-10-01) ---
   En móvil la tarjeta medía 156 px y, con el icono al lado, al texto le quedaban 84 px:
   «Disponible» (96 px) y «Local comercial» se salían. Además mg-property-inventory.php
   pone overflow-wrap:normal en el valor, así que no podía partirse.
   - Columnas automáticas: tantas como quepan con al menos 190 px cada una.
   - En móvil, dos columnas con el icono ENCIMA del texto, que así tiene todo el ancho.
   - Último recurso: partir con guion (hyphens) antes que salirse. */
body.single-properties .mg-fitxes {
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}
body.single-properties .mg-fitxes .mg-fitxa__valor,
body.single-properties .mg-fitxes .mg-fitxa__etiqueta {
	overflow-wrap: break-word !important;
	hyphens: auto;
}
@media (max-width: 560px) {
	body.single-properties .mg-fitxes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	body.single-properties .mg-fitxes .mg-fitxa {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
		padding: 14px 14px 16px;
	}
	body.single-properties .mg-fitxes .mg-fitxa__text {
		width: 100%;
	}
	body.single-properties .mg-fitxes .mg-fitxa__valor {
		font-size: clamp(16px, 4.9vw, 19px);
	}
	body.single-properties .mg-fitxes .mg-fitxa__etiqueta {
		font-size: 12px;
	}
}

/* --- Legibilidad (revisión antes de publicar, 2026-10-01) ---
   Restos de la ficha oscura: el kit de Elementor pinta todos los enlaces en crema (#F4EFE4),
   y sobre blanco no se leían el barrio ni las características («Acceso a pie de calle»…).
   «Propiedad anterior / siguiente» salía en dorado pálido (1,4:1). Los precios pequeños del
   buscador, en #B8860B, se quedaban en 3,25:1; pasan al dorado oscuro #7A6219 (5,9:1). */
body.single-properties .es-property-field__value a,
body.single-properties .es-property-field__terms a,
body.single-properties .es-entity-field a {
	color: var(--mg-tinta, #14110E) !important;
	text-decoration: underline;
	text-decoration-color: rgba(184, 134, 11, .55);
	text-underline-offset: 3px;
}
body.single-properties .post-navigation a,
body.single-properties .post-navigation a:visited {
	color: #7A6219 !important;
	font-weight: 600;
}
body.single-properties .post-navigation a:hover,
body.single-properties .post-navigation a:focus-visible {
	color: var(--mg-tinta, #14110E) !important;
}
body:has(.es-properties) .es-listing .es-price,
body.single-properties .es-listing .es-price {
	color: #7A6219 !important;
}
/* «Powered by Estatik»: crédito del plugin que salía en el buscador y en cada ficha. */
.es-powered {
	display: none !important;
}