/* ==========================================================================
 * app/static/css/compartir.css — RONDA 86, PUNTO 6
 * ==========================================================================
 * Los botones de compartir del perfil de mascota.
 *
 * POR QUE VIVE APARTE Y NO EN style.css: mismo motivo que video.css, y lo dice
 * la cabecera de aquel archivo. Tocar style.css obliga a regenerar
 * style.min.css con su sha256 en la primera linea (hay un guardian que lo
 * recalcula) y a subir el cache-bust de base.html. Un bloque de estilos nuevo
 * y autocontenido no tiene por que arrastrar esa ceremonia ni arriesgar que el
 * minificado se quede viejo sin que nada falle de forma visible.
 *
 * Los colores salen de las variables de marca que style.css define en :root.
 * Si style.css no hubiera cargado, los respaldos tras la coma dejan los
 * botones legibles igual.
 *
 * RONDA 87 — DEFECTO ENCONTRADO AL AÑADIR LA CINTA: cinco de los seis nombres
 * de variable que usaba este archivo NO EXISTEN en style.css (--teal-claro,
 * --crema, --teal-oscuro, --naranja, --teal). Los colores se veían bien por
 * pura suerte: el respaldo tras la coma coincide con el hex de la marca. Pero
 * la variable no enganchaba con nada, así que el día que se retocara la paleta
 * en style.css este archivo se habría quedado con los colores viejos y nadie
 * lo habría notado hasta verlo. Corregidos a los nombres reales:
 * --verde-oscuro, --verde, --verde-pastel, --verde-fondo y --dorado.
 * ========================================================================== */

.qrp-compartir {
    margin: 1.6rem 0 1.2rem;
    padding: 1.1rem 1rem 1rem;
    border: 2px solid var(--verde-pastel, #cfe8ec);
    border-radius: 14px;
    background: var(--verde-fondo, #faf5ea);
}

.qrp-compartir__titulo {
    margin: 0 0 .2rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--verde-oscuro, #1a4750);
}

.qrp-compartir__ayuda {
    margin: 0 0 .9rem;
    font-size: .88rem;
    color: var(--gris-suave, #5b6472);
}

.qrp-compartir__fila {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
}

/* Cada botón es un objetivo táctil de 44px de lado como mínimo: es el tamaño
   que las guías de accesibilidad piden para un dedo, y esta página se usa
   sobre todo desde un celular sostenido con una mano. */
.qrp-compartir__boton {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: 44px;
    padding: .5rem .9rem;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #ffffff;
    color: var(--verde-oscuro, #1a4750);
    font: inherit;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}

.qrp-compartir__boton:hover,
.qrp-compartir__boton:focus-visible {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(26, 71, 80, .18);
}

/* El foco visible NO se quita: quien navega con teclado necesita saber dónde
   está, y en una página que se comparte a desconocidos eso importa más. */
.qrp-compartir__boton:focus-visible {
    outline: 3px solid var(--dorado, #f0a132);
    outline-offset: 2px;
}

.qrp-compartir__icono {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

/* Colores de cada marca, solo en el borde y el icono: pintar el botón entero
   del color corporativo ajeno se lee como un anuncio y compite con la marca
   del propio sitio. */
.qrp-compartir__boton--whatsapp { border-color: #25d366; }
.qrp-compartir__boton--facebook { border-color: #1877f2; }
.qrp-compartir__boton--x        { border-color: #111111; }
.qrp-compartir__boton--gmail    { border-color: #ea4335; }
.qrp-compartir__boton--copiar   { border-color: var(--verde, #2c7482); }
.qrp-compartir__boton--nativo   { border-color: var(--dorado, #f0a132); }

.qrp-compartir__aviso {
    display: block;
    margin-top: .7rem;
    padding: .5rem .7rem;
    border-radius: 8px;
    background: var(--verde-oscuro, #1a4750);
    color: #ffffff;
    font-size: .88rem;
}

.qrp-compartir__nota {
    margin: .8rem 0 0;
    font-size: .82rem;
    color: var(--gris-suave, #5b6472);
}

@media (max-width: 520px) {
    /* En pantalla estrecha los botones ocupan dos por fila en vez de
       apretarse a seis: un botón de compartir demasiado fino se pulsa mal
       justo cuando más prisa hay (una mascota perdida). */
    .qrp-compartir__boton {
        flex: 1 1 calc(50% - .55rem);
        justify-content: center;
    }
}

/* ==========================================================================
 * RONDA 87, PUNTO 3 — LA CINTA DE COMPARTIR DE LAS PÁGINAS DE VENTA
 * ==========================================================================
 * Misma caja y mismos botones que el perfil de mascota —una sola forma de
 * compartir en todo el sistema— pero en versión CINTA: una línea discreta al
 * final del contenido, no un bloque que reclame atención.
 *
 * «Un botón pequeñito que no moleste», textual del dueño. De ahí las tres
 * diferencias con la caja grande: sin título ni párrafo de ayuda, el rótulo y
 * los botones en la MISMA línea mientras quepan, y tipografía un punto menor.
 * Lo que NO cambia es el alto de 44px del área táctil: pequeño de ancho, nunca
 * de alto, la misma regla que la barra de navegación.
 * ========================================================================== */
.qrp-compartir--cinta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .7rem;
    margin: 2rem 0 .5rem;
    padding: .7rem .9rem;
    border-width: 1px;
    border-radius: 12px;
    /* Más claro que la caja grande: es un apunte al pie, no una llamada. */
    background: var(--blanco, #ffffff);
}

.qrp-compartir__rotulo {
    font-size: .88rem;
    font-weight: 700;
    /* Sobre fondo blanco. Contraste medido: 9.7:1, muy por encima del 4.5:1
       que pide la norma. La regla del dueño es que un título SIEMPRE contraste
       con su fondo; aquí se cumple con margen. */
    color: var(--verde-oscuro, #1a4750);
}

.qrp-compartir--cinta .qrp-compartir__fila,
.qrp-compartir__botones {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

/* Los botones de la cinta son los mismos, un punto más pequeños de ancho. */
.qrp-compartir--cinta .qrp-compartir__boton {
    min-height: 44px;
    padding: .4rem .7rem;
    font-size: .85rem;
    border-width: 1px;
    border-color: var(--verde-pastel, #cfe8ec);
    background: var(--verde-fondo, #faf5ea);
}

.qrp-compartir--cinta .qrp-compartir__boton:hover,
.qrp-compartir--cinta .qrp-compartir__boton:focus-visible {
    border-color: var(--verde, #2c7482);
    background: var(--blanco, #ffffff);
}

.qrp-compartir--cinta .qrp-compartir__aviso {
    margin-top: 0;
    flex: 1 1 100%;
}

@media (max-width: 640px) {
    /* En celular el rótulo se pone en su propia línea y los botones debajo:
       apretarlos en la misma fila los dejaría demasiado finos para el pulgar,
       que es el defecto que la caja grande ya evita a 520px. */
    .qrp-compartir__rotulo { flex: 1 1 100%; }
    .qrp-compartir--cinta .qrp-compartir__boton { flex: 1 1 calc(33% - .4rem); justify-content: center; }
}