/* ========================================================================
   COMPARTIR / «Recomendá Tramperas a tus contactos»
   ------------------------------------------------------------------------
   Panel para enviar el enlace del sitio por WhatsApp, Facebook, Telegram o
   correo, copiarlo (TikTok e Instagram no permiten compartir desde una
   página web) o usar la hoja de compartir del celular.
   Portado del mismo panel de taxiyape (frontend/src/components/
   RecomendarContactos.vue), adaptado a este sitio: sin Vue ni Tailwind, con
   los iconos de Font Awesome que ya carga cada página.
   Son enlaces normales a la página de compartir de cada red: no se carga
   ningún script ni botón de terceros, así que ninguna red rastrea a quien
   visita el sitio.

   Dos formas según el tamaño de pantalla:
     - escritorio: panel flotante anclado debajo del botón.
     - celular (<=768px): hoja desde abajo, como el panel de actividad en
       vivo — en una pantalla angosta un panel flotante se sale de la
       pantalla o tapa la cabecera.
   Lógica: assets/js/compartir.js
   ======================================================================== */

/* ----- Botón de la cabecera ----- */
.btn--compartir {
    background: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
    color: #fff !important;
}

.btn--compartir:hover {
    background: #0284c7 !important;
    border-color: #0284c7 !important;
}

/* ----- Panel ----- */
.compartir-panel {
    position: fixed;
    z-index: 100001; /* por encima del modal +18 (100000) por si se abre ahí */
    width: 320px;
    max-width: calc(100vw - 24px);
    background: #fff;
    color: #0f172a;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(2, 6, 23, 0.28);
    padding: 1rem;
    box-sizing: border-box;
    animation: compartir-entrar 0.18s ease-out;
}

.compartir-panel[hidden] {
    display: none !important;
}

@keyframes compartir-entrar {
    from { transform: translateY(-6px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

.compartir-panel__titulo {
    margin: 0;
    font-size: 1rem;
    font-weight: 900;
    color: #0f172a;
}

.compartir-panel__sub {
    margin: 0.15rem 0 0.8rem;
    font-size: 0.82rem;
    color: #64748b;
}

/* Rejilla de 2 columnas, igual que el panel original */
.compartir-panel__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.compartir-panel__lista li.ancho-completo {
    grid-column: 1 / -1;
}

.compartir-opcion {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 44px; /* cómodo para el dedo */
    padding: 0.5rem 0.75rem;
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 12px;
    background: #f8fafc;
    color: #1e293b;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.compartir-opcion:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}

.compartir-opcion i {
    width: 1.1rem;
    flex: 0 0 auto;
    text-align: center;
    font-size: 1rem;
}

/* Color de cada red, solo en el icono */
.compartir-opcion[data-red="whatsapp"] i  { color: #25D366; }
.compartir-opcion[data-red="facebook"] i  { color: #1877F2; }
.compartir-opcion[data-red="tiktok"] i    { color: #010101; }
.compartir-opcion[data-red="instagram"] i { color: #E1306C; }
.compartir-opcion[data-red="telegram"] i  { color: #229ED9; }
.compartir-opcion[data-red="correo"] i    { color: #64748b; }
.compartir-opcion[data-red="copiar"] i,
.compartir-opcion[data-red="mas"] i       { color: #7c3aed; }

/* Aviso de «enlace copiado» — siempre en la página para que los lectores
   de pantalla lo anuncien (role="status"); vacío no ocupa lugar. */
.compartir-panel__aviso {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    font-weight: 800;
    line-height: 1.35;
    color: #065f46;
}

.compartir-panel__aviso:empty {
    display: none;
}

/* Si el navegador no deja copiar, se muestra el enlace para copiarlo a mano */
.compartir-panel__manual {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(15, 23, 42, 0.2);
    border-radius: 8px;
    font-size: 0.8rem;
    box-sizing: border-box;
}

.compartir-panel__manual[hidden] {
    display: none !important;
}

/* Fondo oscuro: solo en la hoja de celular */
.compartir-fondo {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(2, 6, 23, 0.5);
}

.compartir-fondo[hidden] {
    display: none !important;
}

/* ----- Celular: hoja desde abajo ----- */
@media (max-width: 768px) {
    .compartir-panel {
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100%;
        max-width: 100%;
        border-radius: 18px 18px 0 0;
        padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
        animation: compartir-subir 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    @keyframes compartir-subir {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }

    /* Asa, como en la hoja de actividad en vivo */
    .compartir-panel::before {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        margin: 0 auto 0.7rem;
        border-radius: 999px;
        background: rgba(15, 23, 42, 0.18);
    }
}

@media (prefers-reduced-motion: reduce) {
    .compartir-panel { animation: none; }
}