/*
 * Siglo Veinte Share — Estilos v2.0.0
 * Diseño: [ÍCONO | NOMBRE] [CONTADOR] — flat, sin border-radius, sin box-shadow
 */

/* ----------------------------------------------------------------
   Contenedor general
   ---------------------------------------------------------------- */
.sv-share-wrap {
    margin-top:  36px;
    padding-top: 20px;
    border-top:  1px solid #E0E0E0;
    clear:       both;
}

/* ----------------------------------------------------------------
   Título "Compartir"
   ---------------------------------------------------------------- */
.sv-share-title {
    font-family:   'Playfair Display', Georgia, serif !important;
    font-size:     16px !important;
    font-weight:   700 !important;
    color:         #000 !important;
    margin:        0 0 14px 0 !important;
    padding-left:  14px !important;
    border-left:   4px solid #01325E !important;
    line-height:   1.2 !important;
    border-radius: 0 !important;
    box-shadow:    none !important;
    text-shadow:   none !important;
}

/* ----------------------------------------------------------------
   Fila de botones — flex wrap
   ---------------------------------------------------------------- */
.sv-share-buttons {
    display:     flex;
    flex-wrap:   wrap;
    gap:         8px;
    align-items: flex-start;
}

/* ----------------------------------------------------------------
   Cada ítem: botón + contador en una sola fila
   --net se define inline en el PHP para cada red
   ---------------------------------------------------------------- */
.sv-share-item {
    display:     inline-flex;
    align-items: stretch;
    height:      36px;
}

/* ----------------------------------------------------------------
   Botón principal: [ícono | nombre]
   ---------------------------------------------------------------- */
.sv-share-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              7px;
    padding:          0 11px;
    height:           36px;
    background-color: var(--net);
    color:            #fff !important;
    text-decoration:  none !important;
    font-family:      'Roboto', Arial, sans-serif;
    font-size:        13px;
    font-weight:      500;
    line-height:      1;
    white-space:      nowrap;
    border-radius:    0 !important;
    box-shadow:       none !important;
    border:           none;
    cursor:           pointer;
    transition:       opacity 0.15s ease;
    /* Asegurar que el ícono no herede estilos raros */
    -webkit-tap-highlight-color: transparent;
}

.sv-share-btn:hover,
.sv-share-btn:focus {
    opacity:         0.82 !important;
    color:           #fff !important;
    text-decoration: none !important;
    box-shadow:      none !important;
}

.sv-btn-icon {
    display:      flex;
    align-items:  center;
    flex-shrink:  0;
    line-height:  0;
}

.sv-btn-icon svg {
    display:     block;
    flex-shrink: 0;
}

.sv-btn-label {
    /* visible en desktop, oculto en móvil (ver media query) */
}

/* ----------------------------------------------------------------
   Contador: caja separada a la derecha del botón
   ---------------------------------------------------------------- */
.sv-share-count {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    min-width:        34px;
    padding:          0 8px;
    height:           36px;
    border:           1px solid var(--net);
    border-left:      none;
    background-color: #fff;
    color:            var(--net);
    font-family:      'Roboto', Arial, sans-serif;
    font-size:        12px;
    font-weight:      600;
    line-height:      1;
    white-space:      nowrap;
    /* Mínimo visible aunque esté vacío */
    min-height:       36px;
}

/* Cuando el contador está vacío (0 compartidos) mostramos un guion */
.sv-share-count:empty::before {
    content: '—';
    color:   #ccc;
    font-weight: 400;
}

/* ----------------------------------------------------------------
   Estado "copiado" del botón Copiar enlace
   ---------------------------------------------------------------- */
.sv-share-copy.is-copied {
    opacity: 0.55 !important;
}

/* ----------------------------------------------------------------
   Toast flotante "Enlace copiado"
   ---------------------------------------------------------------- */
.sv-copy-feedback {
    position:         fixed;
    bottom:           28px;
    left:             50%;
    transform:        translateX(-50%) translateY(8px);
    background-color: #01325E;
    color:            #fff;
    font-family:      'Roboto', Arial, sans-serif;
    font-size:        13px;
    font-weight:      500;
    padding:          10px 22px;
    border-radius:    0;
    box-shadow:       none;
    opacity:          0;
    transition:       opacity 0.22s ease, transform 0.22s ease;
    pointer-events:   none;
    z-index:          9999;
    white-space:      nowrap;
}

.sv-copy-feedback.is-visible {
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}

/* ----------------------------------------------------------------
   MÓVIL — solo ícono, contador debajo
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
    /* Reorientar cada ítem a columna */
    .sv-share-item {
        flex-direction: column;
        height:         auto;
        align-items:    center;
    }

    /* Botón cuadrado: solo ícono */
    .sv-share-btn {
        width:       40px;
        height:      40px;
        padding:     0;
        justify-content: center;
        gap:         0;
    }

    /* Ocultar la etiqueta de texto */
    .sv-btn-label {
        display: none;
    }

    /* Contador debajo del ícono, borde completo */
    .sv-share-count {
        border-left:  1px solid var(--net);
        border-top:   none;
        min-width:    40px;
        padding:      4px 6px;
        height:       auto;
        min-height:   auto;
        font-size:    11px;
    }

    /* Gap entre items más compacto */
    .sv-share-buttons {
        gap: 6px;
    }
}