/* ═══════════════════════════════════════════════════════════════
   Viedma – Contactos de Gremios · gremios.css  v1.0.0
   Mobile-first. Breakpoint desktop: 641px
   ═══════════════════════════════════════════════════════════════ */

:root {
    --vg-red:        #A32020;
    --vg-red-dark:   #7e1818;
    --vg-black:      #222222;
    --vg-gray-dark:  #444;
    --vg-gray-mid:   #777;
    --vg-gray-light: #f5f5f5;
    --vg-border:     #c8c8c8;
    --vg-white:      #fff;
    --vg-radius:     10px;
    --vg-radius-sm:  6px;
    --vg-font:       'Roboto', Arial, sans-serif;
    --vg-shadow:     0 2px 6px rgba(0,0,0,.08);
    --vg-shadow-h:   0 6px 20px rgba(163,32,32,.15);
}

.vg-wrap *, .vg-wrap *::before, .vg-wrap *::after { box-sizing: border-box; }
.vg-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px 48px;
    font-family: var(--vg-font);
    color: var(--vg-black);
}

/* ─── Status ─── */
.vg-status { text-align: center; padding: 40px 20px; color: var(--vg-gray-mid); font-size: 1rem; }
.vg-status--error { color: var(--vg-red); }

/* ─── Botones ─── */
.vg-btn {
    display: inline-flex;
    align-items: center;
    font-family: var(--vg-font);
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    border: none;
    cursor: pointer;
    transition: background .18s, color .18s;
}
/* Mobile: pill rojo */
.vg-btn {
    background: var(--vg-red);
    color: var(--vg-white) !important;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: .82rem;
}
.vg-btn:hover { background: var(--vg-red-dark); }

/* Desktop: outline */
.vg-btn--outline {
    background: transparent;
    color: var(--vg-red) !important;
    border: 1.5px solid var(--vg-red);
    border-radius: var(--vg-radius-sm);
    padding: 8px 14px;
    font-size: .78rem;
    letter-spacing: .04em;
    align-self: flex-end;
}
.vg-btn--outline:hover {
    background: var(--vg-red);
    color: var(--vg-white) !important;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — lista de filas
   ═══════════════════════════════════════════════════════════════ */
.vg-desk { display: none; }
.vg-mob  { display: block; }

.vg-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 10px;
}

.vg-list__row {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--vg-white);
    border: 1.5px solid var(--vg-border);
    border-radius: var(--vg-radius);
    padding: 14px 16px;
    box-shadow: var(--vg-shadow);
    transition: border-color .18s, box-shadow .18s;
}
.vg-list__row:hover {
    border-color: var(--vg-red);
    box-shadow: var(--vg-shadow-h);
}

.vg-list__logo {
    flex-shrink: 0;
    width: 48px; height: 48px;
    object-fit: contain;
    border-radius: 6px;
    background: var(--vg-gray-light);
    padding: 4px;
}

.vg-list__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    color: var(--vg-red);
}
.vg-list__icon svg { width: 44px; height: 44px; }

.vg-list__body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
}

.vg-list__title {
    font-weight: 800;
    font-size: 1rem;
    color: var(--vg-black);
    line-height: 1.25;
    margin: 0;
}

.vg-list__sind {
    font-size: .83rem;
    font-weight: 600;
    color: var(--vg-gray-dark);
}

.vg-list__meta {
    font-size: .78rem;
    color: var(--vg-gray-mid);
    line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════
   DESKTOP — grilla de cards  (≥ 641px)
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
    .vg-mob  { display: none; }
    .vg-desk { display: block; }

    .vg-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    .vg-card {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        background: var(--vg-white);
        border: 1.5px solid var(--vg-border);
        border-radius: var(--vg-radius);
        padding: 20px 18px 16px;
        box-shadow: var(--vg-shadow);
        height: 100%;
        transition: border-color .18s, box-shadow .18s, transform .18s;
    }
    .vg-card:hover {
        border-color: var(--vg-red);
        box-shadow: var(--vg-shadow-h);
        transform: translateY(-3px);
    }

    .vg-card__logo {
        width: 72px; height: 72px;
        object-fit: contain;
        border-radius: 8px;
        background: var(--vg-gray-light);
        padding: 6px;
        flex-shrink: 0;
    }

    .vg-card__icon {
        width: 56px; height: 56px;
        display: flex; align-items: center; justify-content: center;
        color: var(--vg-red);
        flex-shrink: 0;
    }
    .vg-card__icon svg { width: 56px; height: 56px; }

    .vg-card__body {
        flex: 1;
        display: flex; flex-direction: column; gap: 4px;
        width: 100%;
    }

    .vg-card__title {
        font-weight: 800;
        font-size: 1rem;
        color: var(--vg-black);
        margin: 0;
        line-height: 1.3;
    }

    .vg-card__sind {
        font-size: .82rem;
        font-weight: 600;
        color: var(--vg-gray-dark);
        margin: 0;
    }

    .vg-card__meta {
        font-size: .78rem;
        color: var(--vg-gray-mid);
        margin: 0;
        line-height: 1.35;
    }
}

/* 3 cols en tablet */
@media (min-width: 641px) and (max-width: 900px) {
    .vg-grid { grid-template-columns: repeat(3, 1fr); }
}

/* 2 cols en tablet chica */
@media (min-width: 641px) and (max-width: 780px) {
    .vg-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   PAGINADOR
   ═══════════════════════════════════════════════════════════════ */
.vg-pager { margin-top: 28px; }
.vg-pager__inner {
    display: flex; align-items: center; justify-content: center;
    gap: 4px; flex-wrap: wrap;
}
.vg-pager__btn {
    min-width: 38px; height: 38px;
    padding: 0 10px;
    border: 1.5px solid var(--vg-border);
    border-radius: var(--vg-radius-sm);
    background: var(--vg-white);
    color: var(--vg-black);
    font-family: var(--vg-font);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, border-color .15s, color .15s;
}
.vg-pager__btn:hover:not([disabled]) { border-color: var(--vg-red); color: var(--vg-red); }
.vg-pager__btn.is-active { background: var(--vg-red); border-color: var(--vg-red); color: var(--vg-white); cursor: default; }
.vg-pager__btn[disabled] { opacity: .35; cursor: not-allowed; }
.vg-pager__dots { padding: 0 4px; color: var(--vg-gray-mid); }
.vg-pager__info { margin-left: 10px; font-size: .82rem; color: var(--vg-gray-mid); }

/* ─── Título ─── */
.vg-titulo {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--vg-black);
    margin: 0 0 24px;
    padding-bottom: 12px;
    border-bottom: 2.5px solid var(--vg-red);
    letter-spacing: .02em;
}


/* ═══════════════════════════════════════════════════════════════
   BARRA DE CONTACTO WHATSAPP  [viedma_contacto]
   ═══════════════════════════════════════════════════════════════ */

.viedma-cbar {
    display: flex;
    align-items: center;
    border: 1.5px solid #c8c8c8;
    border-radius: 10px;
    background: #fff;
    padding: 18px 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,.07);
    max-width: 1200px;
    margin: 24px auto;
    gap: 0;
}

.viedma-cbar__section {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
}

/* Sección número WA: no crece */
.viedma-cbar__section--wa      { flex: 0; gap: 12px; }
.viedma-cbar__section--wa-last { padding-right: 0; }
.viedma-cbar__section--links { flex: 0; flex-direction: column; gap: 8px; padding: 0 4px; }
/* Sección botón: no crece */

.viedma-cbar__divider {
    width: 1px;
    background: #e0e0e0;
    align-self: stretch;
    margin: 0 24px;
    flex-shrink: 0;
}

/* Ícono teléfono */
.viedma-cbar__ico {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: #fdf0f0;
    border: 1.5px solid #f5c8c8;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #A32020;
}
.viedma-cbar__ico svg { width: 26px; height: 26px; }

/* Texto principal */
.viedma-cbar__txt strong {
    display: block;
    font-size: .97rem;
    font-weight: 800;
    color: #222;
    line-height: 1.2;
    margin-bottom: 3px;
    font-family: var(--v-font);
}
.viedma-cbar__txt span {
    font-size: .8rem;
    color: #777;
    line-height: 1.4;
    font-family: var(--v-font);
}

/* Ícono WhatsApp */
.viedma-cbar__wa-ico {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: #25D366;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: #fff;
}
.viedma-cbar__wa-ico svg { width: 24px; height: 24px; }

/* Número */
.viedma-cbar__wa-num {
    display: flex; flex-direction: column; gap: 1px;
}
.viedma-cbar__wa-num small {
    font-size: .75rem;
    color: #888;
    font-weight: 500;
    letter-spacing: .04em;
    font-family: var(--v-font);
}
.viedma-cbar__wa-num strong {
    font-size: 1.1rem;
    font-weight: 800;
    color: #222;
    letter-spacing: .02em;
    font-family: var(--v-font);
}

/* Botón CTA final eliminado por duplicar la acción del bloque WhatsApp.
   El punto de contacto único es .viedma-cbar__wa-link / __wa-num-link */

/* Link del ícono WhatsApp */
.viedma-cbar__wa-link {
    display: flex;
    flex-shrink: 0;
    border-radius: 50%;
    transition: opacity .18s;
    text-decoration: none !important;
}
.viedma-cbar__wa-link:hover { opacity: .85; }

/* Número clickeable */
.viedma-cbar__wa-num-link {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--v-black) !important;
    text-decoration: none !important;
    letter-spacing: .02em;
    transition: color .18s;
    display: block;
}
.viedma-cbar__wa-num-link:hover { color: var(--v-red) !important; }

/* Links internos */
.viedma-cbar__link {
    display: block;
    font-size: .88rem;
    font-weight: 700;
    color: var(--v-red) !important;
    text-decoration: none !important;
    white-space: nowrap;
    padding: 3px 0;
    transition: color .18s, padding-left .18s;
    border-left: 2px solid transparent;
    padding-left: 8px;
}
.viedma-cbar__link:hover {
    border-left-color: var(--v-red);
    padding-left: 12px;
    color: var(--v-red-dark) !important;
}

/* ── Mobile ── */
@media (max-width: 640px) {
    .viedma-cbar {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }
    .viedma-cbar__section     { padding: 12px 0; }
    .viedma-cbar__section--wa { flex: 1; padding-right: 0; }
    .viedma-cbar__divider {
        width: 100%; height: 1px;
        margin: 0;
        align-self: auto;
    }
}