/*
Theme Name: SomosTingoMaria
Theme URI: https://somostingomaria.pe
Author: SomosTingoMaria
Description: Tema turístico para Tingo María — inspirado en el diseño "Jungle Modern". Muestra hoteles, restaurantes, tours, recreación y salud a partir del directorio de Negocios (plugin SomosTingoMaria - Negocios). Cada negocio es administrado por su propio dueño desde el front-end.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: tingoexplore
*/

body { min-height: max(884px, 100dvh); }

/* Fondo de patrón (prueba a pedido del usuario) */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	background-image: url('/tingomaria/wp-content/uploads/2026/rombos.svg');
	background-repeat: repeat;
	opacity: 0.3;
	pointer-events: none;
	z-index: -1;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---- Hojas cayendo (solo Inicio), de extremo a extremo de la pantalla ---- */
.tgx-hojas { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 30; }
.tgx-hoja { position: absolute; top: -8%; opacity: 0.55; animation-name: tgx-caer; animation-timing-function: linear; animation-iteration-count: infinite; }
.tgx-hoja-1 { left: 0%;   width: 32px; animation-duration: 16s; animation-delay: 0s;  color: #7c9473; }
.tgx-hoja-2 { left: 19%;  width: 24px; animation-duration: 21s; animation-delay: -6s; color: #c9a227; }
.tgx-hoja-3 { left: 38%;  width: 29px; animation-duration: 18s; animation-delay: -11s; color: #8a9a3f; }
.tgx-hoja-4 { left: 58%;  width: 23px; animation-duration: 23s; animation-delay: -3s; color: #b5762c; }
.tgx-hoja-5 { left: 78%;  width: 31px; animation-duration: 17s; animation-delay: -14s; color: #7c9473; }
.tgx-hoja-6 { left: 96%;  width: 22px; animation-duration: 20s; animation-delay: -8s;  color: #c9a227; }
@keyframes tgx-caer {
	0%   { transform: translate(0, 0) rotate(0deg); }
	25%  { transform: translate(18px, 28vh) rotate(90deg); }
	50%  { transform: translate(-14px, 55vh) rotate(190deg); }
	75%  { transform: translate(16px, 82vh) rotate(280deg); }
	100% { transform: translate(-8px, 112vh) rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) { .tgx-hojas { display: none; } }

/* ---- Galería "Momentos en Tingo María" — botón de like ---- */
.tgx-like {
	position: absolute; top: 8px; right: 8px; z-index: 2;
	display: flex; align-items: center; gap: 4px;
	background: rgba(255,255,255,0.9); backdrop-filter: blur(4px);
	border: none; border-radius: 9999px; padding: 5px 9px;
	font-size: 12px; font-weight: 600; color: #3c4949;
	cursor: pointer; transition: background-color .2s, transform .15s;
}
.tgx-like:hover { background: #fff; }
.tgx-like:active { transform: scale(0.92); }
.tgx-like .tgx-like-icono { font-size: 16px; color: #9aa6a5; font-variation-settings: 'FILL' 0; transition: color .15s; }
.tgx-like.tgx-like-activo .tgx-like-icono { color: #e0245e; }
.tgx-like-contador { min-width: 9px; text-align: left; }

/* ---- Formularios del plugin (registro / mi negocio) ---- */
.tgx-form { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.tgx-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; color: #3c4949; font-size: 14px; }
.tgx-form input[type="text"],
.tgx-form input[type="email"],
.tgx-form input[type="password"],
.tgx-form select,
.tgx-form textarea,
.tgx-form input[type="file"] {
	border: 1px solid #bbc9c8;
	border-radius: 0.5rem;
	padding: 10px 14px;
	font-weight: 400;
	font-size: 16px;
	color: #1b1c1c;
	background: #fff;
}
.tgx-form textarea { resize: vertical; }
.tgx-btn {
	display: inline-block;
	background: #006a68;
	color: #fff;
	border: none;
	border-radius: 9999px;
	padding: 12px 24px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	width: fit-content;
}
.tgx-btn:hover { background: #00504f; color: #fff; }
.tgx-btn-secundario { background: transparent; color: #006a68; border: 2px solid #006a68; padding: 10px 22px; }
.tgx-error { color: #ba1a1a; font-weight: 600; }
.tgx-success { color: #006e01; font-weight: 600; }
.tgx-aviso { background: #f0eded; border-radius: 0.75rem; padding: 24px; }
.tgx-panel { background: #f6f3f2; border-radius: 1rem; padding: 24px; }
.tgx-estado { margin-bottom: 16px; color: #3c4949; }
.tgx-thumb-actual img { border-radius: 0.5rem; max-width: 200px; margin-top: 8px; }
.tgx-login-link { font-size: 14px; color: #3c4949; }
.tgx-galeria-actual { display: flex; flex-wrap: wrap; gap: 12px; }
.tgx-galeria-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 400; font-size: 12px; }
.tgx-galeria-item img { width: 90px; height: 90px; object-fit: cover; border-radius: 0.5rem; }
.tgx-categorias { border: 1px solid #bbc9c8; border-radius: 0.5rem; padding: 14px 16px; }
.tgx-categorias legend { font-weight: 600; color: #3c4949; font-size: 14px; padding: 0 4px; }
.tgx-categoria-opcion { flex-direction: row !important; align-items: center; gap: 8px !important; font-weight: 400 !important; margin-top: 8px; }
.tgx-categoria-opcion input[type="checkbox"] { width: 18px; height: 18px; accent-color: #006a68; }

/* ---- Mapa Turístico (Leaflet + OpenStreetMap) ---- */
#tgx-mapa { z-index: 0; }
.tgx-mapa-pin { position: relative; width: 34px; height: 44px; }
.tgx-mapa-pin-circulo {
	display: flex; align-items: center; justify-content: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: #006a68;
	box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.tgx-mapa-pin-circulo .material-symbols-outlined { color: #fff; font-size: 18px; }
.tgx-mapa-pin-punta {
	position: absolute; left: 50%; top: 31px; transform: translateX(-50%);
	width: 0; height: 0;
	border-left: 6px solid transparent; border-right: 6px solid transparent;
	border-top: 9px solid #006a68;
}
.tgx-mapa-popup { display: flex; flex-direction: column; gap: 2px; min-width: 160px; }
.tgx-mapa-popup-imagen { width: 100%; height: 90px; object-fit: cover; border-radius: 0.4rem; margin-bottom: 4px; }
.tgx-mapa-popup-cat { font-size: 11px; text-transform: uppercase; letter-spacing: 0.03em; color: #006a68; font-weight: 600; }
.tgx-mapa-popup strong { font-size: 15px; color: #1b1c1c; }
.tgx-mapa-popup-precio { font-size: 13px; color: #3c4949; }
.tgx-mapa-popup a { font-size: 13px; color: #006a68; font-weight: 600; margin-top: 4px; text-decoration: none; }
.tgx-mapa-popup a:hover { text-decoration: underline; }

/* ---- Lightbox de la galería en la ficha del negocio ---- */
.tgx-lightbox {
	position: fixed; inset: 0; background: rgba(0,0,0,0.9);
	display: none; align-items: center; justify-content: center;
	z-index: 999; padding: 24px;
}
.tgx-lightbox.tgx-abierto { display: flex; }
.tgx-lightbox-cerrar {
	position: absolute; top: 20px; right: 24px; color: #fff;
	font-size: 32px; line-height: 1; cursor: pointer; background: none; border: none;
	z-index: 2;
}
.tgx-lightbox-viewport { width: 100%; max-width: 960px; overflow: hidden; }
.tgx-lightbox-pista {
	display: flex;
	transition: transform 0.35s ease;
}
.tgx-lightbox-slide {
	flex: 0 0 100%;
	display: flex; align-items: center; justify-content: center;
}
.tgx-lightbox-slide img { max-width: 100%; max-height: 85vh; border-radius: 0.5rem; }
.tgx-lightbox-flecha {
	position: absolute; top: 50%; transform: translateY(-50%);
	background: rgba(255,255,255,0.15); color: #fff; border: none;
	width: 48px; height: 48px; border-radius: 9999px;
	font-size: 18px; cursor: pointer; z-index: 2;
	display: flex; align-items: center; justify-content: center;
}
.tgx-lightbox-flecha:hover { background: rgba(255,255,255,0.3); }
.tgx-lightbox-anterior { left: 12px; }
.tgx-lightbox-siguiente { right: 12px; }
.tgx-lightbox-contador {
	position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
	color: #fff; font-size: 13px; background: rgba(0,0,0,0.4);
	padding: 4px 12px; border-radius: 9999px;
}