/* Carrusel de fotos de la Galería (tarjetas y visor).
   Desliza con el dedo (scroll-snap nativo), flechas en PC, contador/puntos, teclado y rotación automática suave. */

.gcar { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #000; border: 1px solid #262626; outline: none; -webkit-tap-highlight-color: transparent; }
.gcar:focus-visible { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.85); }

.gcar__viewport { position: relative; width: 100%; aspect-ratio: 4 / 3; }   /* proporción fija: sin saltos de diseño al cargar */

.gcar__pista {
    display: flex; height: 100%; margin: 0; padding: 0; list-style: none;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y pinch-zoom;
}
.gcar__pista::-webkit-scrollbar { display: none; }

.gcar__slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; align-items: center; justify-content: center; background: #050505; cursor: zoom-in; }
.gcar__slide img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; -webkit-user-drag: none; }
.gcar--grande .gcar__slide { cursor: default; }
.gcar--grande .gcar__slide img { object-fit: contain; }

/* Foto que no carga: se muestra un marcador en vez de un hueco en blanco */
.gcar__slide.is-rota img { display: none; }
.gcar__rota { display: none; flex-direction: column; align-items: center; gap: 8px; padding: 16px; text-align: center; color: #9ca3af; font-size: 13px; }
.gcar__rota i { font-size: 28px; color: #6b7280; }
.gcar__slide.is-rota .gcar__rota { display: flex; }

/* Flechas (PC): 44 px, visibles al pasar el mouse o enfocar; en pantallas táctiles no hacen falta (se desliza) */
.gcar__flecha {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 16px; cursor: pointer;
    opacity: 0; transition: opacity 0.2s, background 0.2s;
}
.gcar__flecha--ant { left: 8px; }
.gcar__flecha--sig { right: 8px; }
.gcar:hover .gcar__flecha, .gcar:focus-within .gcar__flecha { opacity: 1; }
.gcar__flecha:hover { background: rgba(46, 125, 50, 0.9); }
.gcar__flecha:focus-visible { opacity: 1; outline: 3px solid #4ade80; outline-offset: 2px; }
@media (hover: none) { .gcar__flecha { display: none; } .gcar--grande .gcar__flecha { display: flex; opacity: 1; } }

/* Contador "2 / 5" y puntos */
.gcar__contador { position: absolute; top: 8px; right: 8px; z-index: 3; padding: 3px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.62); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; pointer-events: none; font-variant-numeric: tabular-nums; }
.gcar__puntos { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 3; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.gcar__punto { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.5); transition: background 0.2s, transform 0.2s; }
.gcar__punto.is-activo { background: #fff; transform: scale(1.25); }

/* Galería vacía */
.gcar-vacia { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 16px; border: 1px dashed #333; border-radius: 10px; background: #0d0d0d; color: #8a8f98; font-size: 13px; text-align: center; line-height: 1.5; }

/* Tarjeta de la lista */
.gcard .gcar, .gcard .gcar-vacia { margin-bottom: 16px; }
.gcard__pie { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.gcard__pie .btn-action { min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }

/* Visor de la galería abierta */
.glb { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: max(14px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); box-sizing: border-box; background: rgba(0, 0, 0, 0.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); overscroll-behavior: contain; }
.glb__cerrar { position: absolute; top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); z-index: 5; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 50%; background: rgba(24, 24, 27, 0.9); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.glb__cerrar:hover { background: #b91c1c; }
.glb .gcar { max-width: min(1100px, 100%); border-color: #1f1f1f; }
.gcar--grande .gcar__viewport { aspect-ratio: auto; height: min(74vh, 74dvh); }
.glb__pie { margin: 0; max-width: 720px; padding: 0 10px; text-align: center; color: #e4e4e7; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
html.glb-abierto, html.glb-abierto body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .gcar__flecha, .gcar__punto { transition: none; }
}

/* «Me gusta»: corazón con contador, abajo a la izquierda de la foto */
.gcar__like { position: absolute; left: 8px; bottom: 8px; z-index: 4; display: flex; align-items: center; gap: 2px; padding-right: 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.58); color: #fff; }
.gcar__corazon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: transparent; color: #fff; font-size: 20px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gcar__corazon:focus-visible { outline: 3px solid #4ade80; outline-offset: -2px; }
.gcar__like.is-mia .gcar__corazon { color: #ff3b5c; }
.gcar__n { min-width: 1ch; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.gcar__like.is-bump .gcar__corazon i { animation: gcarLatido 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes gcarLatido { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Corazón grande al dar doble toque */
.gcar__burst { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #fff; font-size: 84px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.55)); animation: gcarExplosion 0.8s ease-out forwards; }
@keyframes gcarExplosion { 0% { opacity: 0; transform: scale(0.3); } 25% { opacity: 1; transform: scale(1.15); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.1); } }

/* Aviso breve (por ejemplo, si el servidor rechaza el voto) */
.gcar__aviso { position: absolute; left: 0; bottom: 52px; max-width: min(260px, 80vw); padding: 7px 10px; border-radius: 10px; background: rgba(127, 29, 29, 0.95); color: #fff; font-size: 12px; line-height: 1.4; display: none; }
.gcar__aviso.is-visible { display: block; }

/* Con el contador arriba a la derecha y los puntos centrados, el corazón no los tapa en pantallas angostas */
@media (max-width: 420px) { .gcar__puntos { left: 56px; right: 8px; justify-content: flex-end; } }

@media (prefers-reduced-motion: reduce) {
    .gcar__like.is-bump .gcar__corazon i, .gcar__burst { animation: none; }
}