/**
 * Osmecon — Prestadores (vista de lista SSR)
 * Estilos de marca que complementan UIkit/YOOtheme.
 *
 * @author  Alejo Sotelo <soporte@alejosotelo.com.ar>
 */

/* ── Tokens de color Osmecon ─────────────────────────────────────────── */
:root {
    --osm-primary:        #185FA5;
    --osm-primary-dark:   #0c447c;
    --osm-primary-light:  #E6F1FB;
    --osm-primary-mid:    #378ADD;
    --osm-celeste:        #B5D4F4;
    --osm-green:          #1D9E75;
    --osm-green-light:    #E1F5EE;
    --osm-amber:          #BA7517;
    --osm-amber-light:    #FAEEDA;
}

/* ── Avatar de iniciales ─────────────────────────────────────────────── */
.osm-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--osm-primary-light);
    color: var(--osm-primary);
    font-size: .75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    user-select: none;
}

.osm-avatar--lg {
    width: 52px;
    height: 52px;
    font-size: .9rem;
}

/* ── Badge WhatsApp (extiende uk-badge de UIkit) ─────────────────────── */
.uk-badge-whatsapp {
    background: #25D366;
    color: #fff;
}

/* ── Badge Teléfono ──────────────────────────────────────────────────── */
/* .uk-badge-phone {
    background: var(--osm-primary-light);
    color: var(--osm-primary);
} */

/* ── Especialidad en tarjeta ─────────────────────────────────────────── */
.osm-card-esp {
    font-size: .72rem;
    color: var(--osm-primary);
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Nombre en tarjeta ───────────────────────────────────────────────── */
.osm-card-nom {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Tarjeta clickeable ──────────────────────────────────────────────── */
.osm-card-clickable { cursor: pointer; }

/* ── Tags de especialidad en modal ───────────────────────────────────── */
.osm-modal-esp-tag {
    background: var(--osm-primary-light);
    color: var(--osm-primary);
    font-size: .68rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 20px;
    display: inline-block;
    margin: 2px 2px 0 0;
}

/* ── Bloque horarios ─────────────────────────────────────────────────── */
.osm-hor-bl {
    background: var(--osm-amber-light);
    border: 1px solid #FAC775;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: .82rem;
    color: #633806;
    line-height: 1.7;
}

/* ── Bloque web / mail ───────────────────────────────────────────────── */
.osm-web-bl {
    background: var(--osm-primary-light);
    border: 1px solid var(--osm-celeste);
    border-radius: 8px;
    padding: 11px 14px;
    font-size: .82rem;
    color: var(--osm-primary-dark);
    word-break: break-all;
}

.osm-web-bl a {
    color: var(--osm-primary);
    font-weight: 600;
    text-decoration: underline;
}

/* ── Título de sección dentro del modal ──────────────────────────────── */
.osm-modal-sec-title {
    font-size: .67rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #999;
    margin: 16px 0 8px;
}

.osm-modal-sec-title:first-child { margin-top: 0; }

/* ── Botón WhatsApp (uk-button-wa extiende uk-button de UIkit) ───────── */
.uk-button-wa {
    background: #25D366 !important;
    color: #fff !important;
    border-color: transparent !important;
}

.uk-button-wa:hover { background: #1da851 !important; }

/* ── Grid de botones del modal (2 columnas, full-width cuando sea único) */
.osm-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.osm-modal-actions .osm-btn-full {
    grid-column: 1 / -1;
}

/* ── Tarjeta oculta por filtro JS ────────────────────────────────────── */
[data-osm-card][hidden] { display: none; }