/* ============================================================
   Estilos de los elementos de página GeoVillages (GVRenderer).
   Cargar SIEMPRE junto a renderer.js (editor y visor).
   ============================================================ */

.gv-page { overflow: hidden; }

.gv-el { overflow: hidden; }
.gv-el-heading, .gv-el-text { overflow: visible; word-wrap: break-word; }

.gv-richtext { width: 100%; height: 100%; outline: none; }
.gv-richtext p, .gv-richtext div { margin: 0; }
.gv-richtext ul, .gv-richtext ol { margin: 0; padding-left: 1.4em; }

/* Imagen */
.gv-img { width: 100%; height: 100%; display: block; pointer-events: none; }
.gv-img-empty, .gv-video-empty {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center;
  background: repeating-linear-gradient(45deg, #f1f5f9, #f1f5f9 12px, #e2e8f0 12px, #e2e8f0 24px);
  color: #64748b; font: 600 14px 'Inter', sans-serif;
  border-radius: inherit;
}
.gv-img-empty small, .gv-video-empty small { font-weight: 400; font-size: 11.5px; }

/* Vídeo */
.gv-el-video { background: #000; }
.gv-video-frame { width: 100%; height: 100%; display: block; border: 0; border-radius: inherit; }
.gv-embed-shield { position: absolute; inset: 0; z-index: 2; }

/* Botón */
.gv-btn-link {
  display: flex; width: 100%; height: 100%;
  align-items: center; justify-content: center;
  text-decoration: none; color: inherit;
  font: inherit; text-align: center; padding: 0 8px;
  border-radius: inherit; cursor: pointer;
}
a.gv-btn-link:hover { filter: brightness(1.1); }
.gv-btn-el { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

/* Marquee (¡como en los 90!) */
.gv-marquee { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; }
.gv-marquee-inner {
  display: inline-flex; white-space: nowrap; will-change: transform;
  animation: gv-marquee-scroll linear infinite;
}
.gv-marquee-inner span { display: inline-block; }
@keyframes gv-marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Contador de visitas retro */
.gv-counter {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.gv-counter-digits { display: flex; gap: 2px; }
.gv-counter-digits span {
  background: #0a0a0a; color: #39ff14;
  font: 700 1.35em 'Courier New', monospace;
  padding: 2px 5px; border: 1px solid #333; border-radius: 3px;
  text-shadow: 0 0 6px rgba(57, 255, 20, .8);
  min-width: .9em; text-align: center;
}
.gv-counter-label { font-size: .75em; opacity: .8; letter-spacing: .08em; text-transform: uppercase; }

/* Stickers */
.gv-sticker-emoji {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.25));
}
.gv-sticker-badge {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font: 900 1.6em Impact, 'Arial Black', sans-serif;
  letter-spacing: .04em;
  transform: rotate(-8deg);
  box-shadow: 3px 3px 0 rgba(0,0,0,.75);
  border: 3px solid #fff;
  text-shadow: 2px 2px 0 rgba(0,0,0,.35);
}
.gv-sticker-construction {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  background: #ffde00; border: 3px solid #111; border-radius: 6px;
  box-shadow: 4px 4px 0 rgba(0,0,0,.8);
  padding: 6px; overflow: hidden;
}
.gv-sc-stripes {
  height: 12px; flex: 0 0 12px;
  background: repeating-linear-gradient(-45deg, #111, #111 10px, #ffde00 10px, #ffde00 20px);
}
.gv-sc-text {
  text-align: center; font: 900 clamp(10px, 1em, 22px)/1.2 Impact, 'Arial Black', sans-serif;
  color: #111; letter-spacing: .03em; white-space: nowrap; overflow: hidden;
}

/* ============================================================
   Tablas (elemento 'table')
   El borde sale de variables inline puestas por el renderer:
   --gv-tb-w (ancho), --gv-tb-s (estilo), --gv-tb-c (color).
   Color y tamaño de fuente heredan del .gv-el.
   ============================================================ */
.gv-table {
  width: 100%; height: 100%;
  border-collapse: collapse; table-layout: fixed;
  color: inherit; font: inherit;
  --gv-tb-w: 1px; --gv-tb-s: solid; --gv-tb-c: #94a3b8;
}
.gv-table th, .gv-table td {
  border: var(--gv-tb-w) var(--gv-tb-s) var(--gv-tb-c);
  padding: 6px 8px;
  vertical-align: top; text-align: inherit;
  word-wrap: break-word; overflow-wrap: anywhere;
}
.gv-table thead th {
  background: rgba(15, 23, 42, .06);
  font-weight: 700; text-align: center;
}
.gv-table p, .gv-table div { margin: 0; }
.gv-table ul, .gv-table ol { margin: 0; padding-left: 1.3em; }

/* ============================================================
   Texto animado (clase gv-anim-<name> sobre .gv-richtext)
   Pensado para verse bien sobre fondos claros del tema.
   ============================================================ */
.gv-richtext[class*="gv-anim-"] { will-change: transform, opacity; }

/* blink — parpadeo clásico */
.gv-anim-blink { animation: gv-anim-blink 1s steps(1, end) infinite; }
@keyframes gv-anim-blink { 50% { opacity: 0; } }

/* rainbow — color cíclico recortado al texto */
.gv-anim-rainbow {
  background-image: linear-gradient(90deg,
    #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #a855f7, #ef4444);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gv-anim-rainbow 6s linear infinite;
}
@keyframes gv-anim-rainbow {
  to { background-position: 200% 0; }
}

/* wave — ondulación tipo shimmer (sin poder separar por letra) */
.gv-anim-wave {
  background-image: linear-gradient(90deg,
    currentColor 0%, currentColor 40%, rgba(255,255,255,.9) 50%, currentColor 60%, currentColor 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gv-anim-wave 2.4s linear infinite;
}
@keyframes gv-anim-wave {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

/* typewriter — máquina de escribir con caret */
.gv-anim-typewriter {
  display: inline-block; max-width: 100%;
  overflow: hidden; white-space: nowrap;
  border-right: .12em solid currentColor;
  animation: gv-anim-type 3.5s steps(30, end) infinite alternate,
             gv-anim-caret .8s step-end infinite;
}
@keyframes gv-anim-type {
  from { width: 0; }
  to { width: 100%; }
}
@keyframes gv-anim-caret {
  50% { border-color: transparent; }
}

/* glow — resplandor pulsante */
.gv-anim-glow { animation: gv-anim-glow 1.6s ease-in-out infinite; }
@keyframes gv-anim-glow {
  0%, 100% { text-shadow: 0 0 3px rgba(99,102,241,.35), 0 0 6px rgba(99,102,241,.25); }
  50% { text-shadow: 0 0 10px rgba(99,102,241,.85), 0 0 20px rgba(168,85,247,.7); }
}

/* shake — vibración */
.gv-anim-shake { animation: gv-anim-shake .5s ease-in-out infinite; }
@keyframes gv-anim-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}

/* bounce — rebote vertical */
.gv-anim-bounce {
  display: inline-block;
  animation: gv-anim-bounce 1.1s cubic-bezier(.28,.84,.42,1) infinite;
}
@keyframes gv-anim-bounce {
  0%, 100% { transform: translateY(0); }
  30% { transform: translateY(-22%); }
  50% { transform: translateY(0); }
  70% { transform: translateY(-10%); }
}

/* pulse — latido por escala */
.gv-anim-pulse {
  display: inline-block; transform-origin: center;
  animation: gv-anim-pulse 1.4s ease-in-out infinite;
}
@keyframes gv-anim-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}

/* flip — giro 3D en X */
.gv-anim-flip {
  display: inline-block; backface-visibility: hidden;
  animation: gv-anim-flip 2.6s ease-in-out infinite;
}
@keyframes gv-anim-flip {
  0%, 100% { transform: perspective(400px) rotateX(0); }
  50% { transform: perspective(400px) rotateX(360deg); }
}

/* Accesibilidad: sin movimiento si el usuario lo pide */
@media (prefers-reduced-motion: reduce) {
  .gv-anim-blink, .gv-anim-rainbow, .gv-anim-wave, .gv-anim-typewriter,
  .gv-anim-glow, .gv-anim-shake, .gv-anim-bounce, .gv-anim-pulse, .gv-anim-flip {
    animation: none !important;
  }
  .gv-anim-rainbow, .gv-anim-wave {
    -webkit-text-fill-color: currentColor; color: inherit;
  }
  .gv-anim-typewriter {
    max-width: none; overflow: visible; white-space: normal; border-right: 0;
  }
}