/* Goocy — app.css
 * Shell de la pantalla A2 (mapa principal de usuario). Mobile-first:
 * el mockup de referencia es de app móvil.
 */

:root {
    --goocy-color-primaria: #FF5A5F;
    --goocy-color-texto: #1A1A1A;
    --goocy-color-fondo-flotante: #FFFFFF;
    --goocy-sombra-flotante: 0 4px 16px rgba(0, 0, 0, 0.15);
    --goocy-radio-pill: 999px;
    --goocy-radio-card: 16px;
    --goocy-header-height: 64px;

    /* Paleta oficial (mockup Stitch) */
    --goocy-green: #009933;
    --goocy-yellow: #FFCC00;
    --promo-pink: #E62174;
    --whatsapp-green: #25D366;
    --goocy-red: #E20613;
    --goocy-gris-claro: #F4F6F5;
}

* {
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--goocy-color-texto);
    overscroll-behavior: none;
}

/* --- Mapa full-screen --- */
#mapa-goocy {
    position: fixed;
    inset: 0;
    z-index: 0;
}

/* --- Header (fijo arriba, por encima de todo lo demás) --- */
.goocy-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--goocy-header-height);
    z-index: 20;
    display: flex;
    align-items: center;
    padding: 0 16px;
    background: var(--goocy-red);
    box-shadow: var(--goocy-sombra-flotante);
}

/* Centrado solo cuando el header no tiene más contenido que el logo
   (index.php) — el header de Goocy Store (dashboard de comercio)
   también muestra el saldo a la derecha y no debe centrarse. */
.goocy-header-centrado {
    justify-content: center;
}

.goocy-header-logo {
    max-height: 70%;
    width: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.35));
}

/* --- Barra de categorías (píldora única translúcida, debajo del header) --- */
.barra-categorias {
    position: fixed;
    top: calc(var(--goocy-header-height) + 12px);
    left: 12px;
    right: 12px;
    z-index: 10;
    display: flex;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--goocy-radio-pill);
    box-shadow: var(--goocy-sombra-flotante);
    padding: 10px 4px;
}

.categoria-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-right: 1px solid rgba(0, 0, 0, 0.08);
    background: none;
    color: #9AA0A6;
    padding: 6px 2px;
    cursor: pointer;
    transition: transform 0.2s ease, color 0.2s ease;
}

.categoria-btn:last-child {
    border-right: none;
}

.categoria-btn.activa {
    color: var(--goocy-red);
    transform: scale(1.15);
}

.categoria-icono svg {
    width: 26px;
    height: 26px;
}

/* --- Chat Goocy (flotante, ocupa el lugar que dejó el bottom nav) --- */
.chat-goocy-bar {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 6px 6px 16px;
    background: var(--goocy-color-fondo-flotante);
    border-radius: var(--goocy-radio-pill);
    box-shadow: var(--goocy-sombra-flotante);
}

.chat-goocy-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 15px;
    background: transparent;
}

.chat-goocy-enviar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: var(--goocy-color-primaria);
    color: #FFFFFF;
    font-size: 16px;
    cursor: pointer;
}

/* --- Carrusel de Promociones (flotante, centrado, con margen visible
   al Chat Goocy) --- bottom = altura real del chat bar (~52px) + su
   offset (12px) + margen entre chat bar y carrusel (12px). El botón de
   colapsar quedó reposicionado al margen derecho (ver
   .carrusel-promos-toggle), ya no ocupa espacio arriba del carrusel. */
.carrusel-promos {
    position: fixed;
    left: 6px;
    right: 6px;
    bottom: 60px;
    z-index: 9;
    max-height: 320px;
    overflow: hidden;
    border-radius: var(--goocy-radio-card);
    transition: max-height 0.25s ease, opacity 0.2s ease;
}

.carrusel-promos.colapsado {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

/* Botón de colapsar: hermano fijo de .carrusel-promos (no anidado), para
   que siga accesible aunque el panel de promos esté colapsado del todo.
   Anclado al margen derecho, apoyado sobre la mitad vertical de la
   pantalla hacia arriba (no pegado abajo). Color de marca sólido para
   que contraste (antes era un botón blanco muy tímido).
   Posicionado con "bottom" directo (no "top:50% + transform") — el
   transform encadenado con otro transform de :active/animación es
   justo la clase de cálculo frágil que ya causó un bug real en
   .perfil-menu (ver más abajo); "bottom" es un solo valor, sin
   depender de la altura del propio elemento ni de un segundo
   transform superpuesto. */
.carrusel-promos-toggle {
    position: fixed;
    right: 16px;
    bottom: 50vh;
    z-index: 11;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: var(--goocy-red);
    color: #FFFFFF;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(226, 6, 19, 0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.carrusel-promos-toggle:active {
    transform: scale(0.9);
    box-shadow: 0 2px 8px rgba(226, 6, 19, 0.45);
}

.carrusel-promos-toggle svg {
    width: 22px;
    height: 22px;
    transition: transform 0.2s ease;
}

/* Colapsado = chevron apunta hacia arriba (el panel de promos está
   oculto, tocar de nuevo lo expande). */
.carrusel-promos-toggle.colapsado svg {
    transform: rotate(180deg);
}

/* --- Botón de perfil + menú desplegable ---
   Mismo anclaje que .carrusel-promos-toggle (margen derecho), apilado
   justo arriba (44px de alto + 12px de separación = 56px). z-index muy
   por encima del header (20) y de la ficha de comercio (30/31) — debe
   quedar flotante por encima de absolutamente todo. */
.perfil-toggle {
    position: fixed;
    right: 16px;
    bottom: calc(50vh + 56px);
    z-index: 40;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    background: var(--goocy-color-fondo-flotante);
    color: var(--goocy-red);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--goocy-sombra-flotante);
    transition: transform 0.15s ease;
}

.perfil-toggle svg {
    width: 22px;
    height: 22px;
}

.perfil-toggle:active {
    transform: scale(0.9);
}

/* Modal de aviso (perfil sin sesión), centrado como una alerta — no un
   popover anclado al botón. Se oscurece la pantalla detrás para
   resaltarlo (.perfil-backdrop), igual que el patrón ya usado en la
   ficha de comercio (.ficha-backdrop). */
.perfil-backdrop {
    position: fixed;
    inset: 0;
    z-index: 39;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.perfil-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.perfil-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 41;
    width: 300px;
    max-width: calc(100vw - 48px);
    max-height: 80vh;
    background: var(--goocy-color-fondo-flotante);
    border-radius: var(--goocy-radio-card);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    padding: 24px;
    overflow-y: auto;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.perfil-menu.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    pointer-events: auto;
}

.perfil-menu-prompt {
    text-align: center;
}

.perfil-menu-prompt .perfil-menu-avatar {
    width: 52px;
    height: 52px;
    margin: 0 auto 12px;
}

.perfil-menu-prompt .perfil-menu-avatar svg {
    width: 26px;
    height: 26px;
}

.perfil-menu-prompt-texto {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--goocy-color-texto);
    line-height: 1.4;
}

.perfil-menu-prompt-acciones {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.perfil-menu-btn {
    display: block;
    border: none;
    border-radius: var(--goocy-radio-pill);
    padding: 11px;
    font-weight: 700;
    font-size: 13px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.perfil-menu-btn:active {
    transform: scale(0.96);
}

.perfil-menu-btn-primario {
    background: var(--goocy-red);
    color: #FFFFFF;
}

.perfil-menu-btn-secundario {
    background: none;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--goocy-color-texto);
}

.perfil-menu-favoritos-titulo {
    font-size: 15px;
    font-weight: 800;
    margin: 0 0 12px;
}

.perfil-menu-link-comercio {
    display: block;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
    color: #6B7280;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.perfil-menu-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--goocy-gris-claro);
    color: #9AA0A6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.perfil-menu-avatar svg {
    width: 22px;
    height: 22px;
}

.carrusel-promos-track {
    display: flex;
    justify-content: center;
    gap: 14px;
    padding: 16px 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.carrusel-promos-track::-webkit-scrollbar {
    display: none;
}

.promo-card {
    flex: 0 0 100%;
    scroll-snap-align: start;
    padding: 14px;
    border-radius: 10px;
    background: var(--goocy-color-fondo-flotante);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.promo-card-bloque {
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-weight: 800;
    font-style: italic;
    font-size: 20px;
    letter-spacing: -0.5px;
    text-align: center;
    padding: 0 8px;
    margin-bottom: 10px;
}

.promo-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 16px;
    color: var(--goocy-color-texto);
}

.promo-card-check {
    width: 16px;
    height: 16px;
    color: var(--goocy-green);
    flex-shrink: 0;
}

.promo-card-ubicacion {
    margin: 4px 0 12px;
    font-size: 13px;
    color: #6B7280;
}

.promo-card-whatsapp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    border: none;
    border-radius: var(--goocy-radio-pill);
    background: var(--whatsapp-green);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 14px;
    padding: 10px;
    cursor: pointer;
}

.promo-card-whatsapp svg {
    width: 18px;
    height: 18px;
}

/* --- Pines de comercio en el mapa --- */
.pin-comercio {
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    font-size: 16px;
}

.pin-comercio-icono {
    transform: rotate(45deg);
}

/* --- Ficha de comercio (A3, bottom-sheet al tocar un pin) --- */
.ficha-backdrop {
    position: fixed;
    inset: 0;
    z-index: 30;
    background: rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ficha-backdrop.visible {
    opacity: 1;
    pointer-events: auto;
}

.ficha-comercio {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 31;
    max-height: 92vh;
    overflow-y: auto;
    background: var(--goocy-gris-claro);
    border-radius: var(--goocy-radio-card);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2);
    padding: 0 0 24px;
    transform: translateY(120%);
    transition: transform 0.25s ease;
}

.ficha-comercio-flyer {
    height: 40vh;
    border-radius: var(--goocy-radio-card) var(--goocy-radio-card) 0 0;
    display: flex;
    align-items: flex-end;
    background-size: cover;
    background-position: center;
    color: #FFFFFF;
    font-weight: 800;
    font-style: italic;
    font-size: 22px;
    letter-spacing: -0.5px;
    padding: 16px;
    margin-bottom: 16px;
}

.ficha-comercio-cuerpo {
    padding: 0 16px;
}

.ficha-comercio.visible {
    transform: translateY(0);
}

.ficha-comercio-cerrar {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #F2F2F2;
    color: var(--goocy-color-texto);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ficha-comercio-cerrar svg {
    width: 16px;
    height: 16px;
}

.ficha-comercio-promo {
    margin: 0 0 12px;
    padding: 8px 10px;
    background: #FFF6E5;
    border-radius: 8px;
    font-size: 13px;
    color: #7A5200;
}

.ficha-comercio-linea {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px;
    font-size: 13px;
    color: #6B7280;
}

.ficha-comercio-linea svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* --- Goocy Store (dashboard de comercio, B2-B4) --- */
.goocy-store-body {
    background: #F4F6F5;
}

.goocy-header-logo + .panel-comercio-saldo {
    margin-left: auto;
}

.panel-comercio-saldo {
    color: #FFFFFF;
    font-weight: 700;
    font-size: 13px;
}

.goocy-store-main {
    padding: calc(var(--goocy-header-height) + 20px) 16px 0;
}

.goocy-store-bienvenida {
    font-size: 15px;
    color: #555555;
}

.goocy-store-volver-mapa {
    display: inline-block;
    margin-top: 4px;
    color: var(--goocy-red);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.panel-comercio {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background: var(--goocy-color-fondo-flotante);
    border-radius: var(--goocy-radio-card) var(--goocy-radio-card) 0 0;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.15);
    padding: 20px 16px 28px;
    max-height: 60vh;
    overflow-y: auto;
    transition: max-height 0.25s ease, transform 0.25s ease;
    transform-origin: bottom center;
}

.panel-comercio-vacio {
    text-align: center;
    padding: 16px 0;
}

.panel-comercio-vacio p {
    color: #555555;
    margin-bottom: 16px;
}

.panel-comercio-btn-primario {
    width: 100%;
    border: none;
    border-radius: var(--goocy-radio-pill);
    background: var(--goocy-green);
    color: #FFFFFF;
    font-weight: 700;
    font-size: 15px;
    padding: 14px;
    cursor: pointer;
}

.panel-comercio-btn-secundario {
    flex: 1;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--goocy-radio-pill);
    background: none;
    color: var(--goocy-color-texto);
    font-weight: 600;
    font-size: 14px;
    padding: 12px;
    cursor: pointer;
}

.panel-comercio-activa .promo-card-bloque {
    height: 100px;
}

.panel-comercio-texto-activo {
    font-weight: 600;
    margin: 4px 0 8px;
}

/* Estado expandido: mismo lenguaje de "modal-expandible" ya usado en
   .carrusel-promos/.ficha-comercio, sumando el transform: scale() que
   marca la transición de "bloque chico" a "casi pantalla completa". */
.panel-comercio-formulario {
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: panel-comercio-expandir 0.25s ease;
}

@keyframes panel-comercio-expandir {
    from { transform: scale(0.96); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.panel-comercio:has(.panel-comercio-formulario) {
    max-height: 85vh;
}

.panel-comercio-label {
    font-size: 12px;
    font-weight: 700;
    color: #6B7280;
    margin-top: 8px;
}

.panel-comercio-input {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 14px;
}

.panel-comercio-duracion-row {
    display: flex;
    gap: 8px;
}

.panel-comercio-duracion-btn {
    flex: 0 0 auto;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: var(--goocy-radio-pill);
    background: none;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
}

.panel-comercio-duracion-btn.activa {
    background: var(--goocy-green);
    border-color: var(--goocy-green);
    color: #FFFFFF;
}

.panel-comercio-duracion-manual {
    flex: 1;
    min-width: 0;
}

.panel-comercio-preview img {
    max-width: 120px;
    max-height: 80px;
    border-radius: 8px;
    margin-top: 8px;
}

.panel-comercio-acciones {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.panel-comercio-acciones .panel-comercio-btn-primario {
    flex: 1;
}

.panel-comercio-mensaje {
    font-size: 13px;
    color: var(--goocy-green);
    min-height: 16px;
}

.panel-comercio-mensaje.error {
    color: #D32F2F;
}

/* --- Marcador "estás acá" (geolocalización real del usuario) --- */
.marcador-usuario {
    position: relative;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #4285F4;
    border: 3px solid #FFFFFF;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}

.marcador-usuario::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: rgba(66, 133, 244, 0.25);
    animation: pulso-ubicacion 2s ease-out infinite;
}

@keyframes pulso-ubicacion {
    0% { transform: scale(0.6); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* --- Inicio (A1, selección de rol) --- */
.inicio-body {
    background: var(--goocy-red);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.inicio-contenido {
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.inicio-logo {
    width: 200px;
    max-width: 60%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    margin-bottom: 12px;
}

.inicio-slogan {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    opacity: 0.9;
    margin: 0 0 40px;
}

.inicio-botones {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.inicio-btn {
    display: block;
    padding: 16px;
    border-radius: var(--goocy-radio-pill);
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    text-align: center;
    transition: transform 0.12s ease;
}

.inicio-btn:active {
    transform: scale(0.97);
}

.inicio-btn-primario {
    background: #FFFFFF;
    color: var(--goocy-red);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.inicio-btn-secundario {
    background: transparent;
    color: #FFFFFF;
    border: 2px solid rgba(255, 255, 255, 0.8);
}

/* --- Acceso / registro comercio (mismas clases para ambas pantallas,
   son el mismo template de card) --- */
.acceso-comercio-body {
    background: var(--goocy-red);
}

/* Sin barra de header separada — mismo criterio que inicio.php: el
   logo flota directo sobre el fondo de color, encima de la card. */
.acceso-comercio-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
}

.acceso-comercio-logo {
    width: 150px;
    max-width: 45%;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
    margin-bottom: 20px;
}

.acceso-comercio-form {
    width: 100%;
    max-width: 360px;
    background: var(--goocy-color-fondo-flotante);
    border-radius: var(--goocy-radio-card);
    box-shadow: var(--goocy-sombra-flotante);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
}

/* Formulario compacto: el mensaje de error/éxito no reserva espacio
   fijo cuando está vacío, y los links quedan pegados al botón. */
.acceso-comercio-form .panel-comercio-mensaje {
    min-height: 0;
    margin: 4px 0;
}

.acceso-comercio-titulo {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 800;
    text-align: center;
}

.acceso-comercio-subtitulo {
    margin: 0 0 20px;
    font-size: 13px;
    color: #6B7280;
    text-align: center;
}

.acceso-comercio-submit {
    margin-top: 12px;
}

.acceso-comercio-link {
    display: block;
    text-align: center;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--goocy-red);
    text-decoration: none;
}

.acceso-comercio-link-volver {
    color: #6B7280;
    font-weight: 600;
    margin-top: 4px;
}