/* Directorio (v0.54): ficha de la lista (.dir-card), logo, portada o su sustituto, insignias,
   avatares de Mis contactos, mosaicos con foto y visor de varias fotos. Lo usan contactos,
   especialistas, dirficha, tarjetaform y evento (assets/js/directorio_ui.js arma el HTML). */

/* ---- Ficha de la lista ---- */
.dir-card {
    position: relative;
    background: var(--mc-surface);
    border: 1px solid var(--mc-border);
    border-radius: 1.1rem;
    overflow: hidden;
    box-shadow: var(--mc-sombra);
    color: var(--mc-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dir-card:active { transform: scale(.992); }
.dir-lista { display: grid; gap: .9rem; }

/* Portada 3:1 con foto o con la foto del grupo tenida del color de la categoria. */
.dir-portada {
    position: relative;
    aspect-ratio: 3 / 1;
    background: var(--dir-color, #6b6259);
    overflow: hidden;
}
.dir-portada-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-sust { position: absolute; inset: 0; background-size: cover; background-position: center; filter: grayscale(.35); }
.dir-sust::after { content: ""; position: absolute; inset: 0; background: var(--dir-color, #6b6259); opacity: .85; }
.dir-marca {
    position: absolute; right: 22%; top: 50%; transform: translateY(-50%) rotate(-8deg);
    color: rgba(255, 255, 255, .26); font-size: 3.6rem; line-height: 1; pointer-events: none;
}
.dir-marca svg { width: 3.6rem; height: 3.6rem; fill: currentColor; }
.dir-marca i { display: block; }

.dir-insignias { position: absolute; left: .55rem; top: .55rem; right: 3.6rem; display: flex; flex-wrap: wrap; gap: .3rem; }
.dir-insignia {
    display: inline-flex; align-items: center; gap: .25rem; padding: .18rem .55rem; border-radius: 999px;
    font-size: .74rem; font-weight: 800; line-height: 1.2; white-space: nowrap;
    background: rgba(255, 255, 255, .94); color: #1a1411; box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
}
.dir-insignia.verif i { color: #1d5fb8; }
.dir-insignia.h24 { background: #f2c14e; color: #1a0d05; }
.dir-insignia.ev { background: rgba(20, 12, 6, .72); color: #fff; }

.dir-estrella {
    position: absolute; top: .4rem; right: .4rem; width: 44px; height: 44px; border-radius: 50%; border: 0;
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem;
    background: rgba(20, 12, 6, .5); color: #fff; backdrop-filter: blur(2px);
}
.dir-estrella.activa { color: #f2c14e; }
.dir-tu.ct-est {
    position: absolute; top: .55rem; right: .55rem; padding: .2rem .7rem; border-radius: 999px;
    background: rgba(255, 255, 255, .94); color: #0f6b0f; font-size: .78rem; font-weight: 800;
}
.dir-nfotos {
    position: absolute; right: .55rem; bottom: .5rem; display: inline-flex; align-items: center; gap: .3rem;
    padding: .15rem .55rem; border-radius: 999px; background: rgba(20, 12, 6, .7); color: #fff; font-size: .8rem; font-weight: 800;
}

/* Cuerpo: logo montado sobre el borde de la portada, nombre en serif. */
.dir-cuerpo { padding: 0 .9rem .9rem; }
.dir-cabeza { display: flex; align-items: flex-start; gap: .7rem; }
.dir-logo {
    position: relative; flex: 0 0 68px; width: 68px; height: 68px; margin-top: -38px; border-radius: 1rem; overflow: hidden;
    background: var(--dir-color, #6b6259); border: 3px solid var(--mc-surface); box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    display: inline-flex; align-items: center; justify-content: center;
}
.dir-logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; display: block; }
.dir-ini { color: #fff; font-family: var(--mc-serif); font-weight: 700; font-size: 1.55rem; letter-spacing: .02em; line-height: 1; }
.dir-titulo { flex: 1; min-width: 0; padding-top: .45rem; }
.dir-nombre {
    margin: 0; font-family: var(--mc-serif); font-size: 1.2rem; font-weight: 700; line-height: 1.15;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere;
}
.dir-abrir { all: unset; cursor: pointer; }
.dir-abrir:focus-visible { outline: 3px solid var(--mc-accent); outline-offset: 2px; border-radius: .3rem; }
.dir-empresa { font-size: .84rem; color: var(--mc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-cats { margin-top: .5rem; font-weight: 800; font-size: .9rem; color: var(--mc-primary); line-height: 1.25; }
.dir-disc, .dir-zona { margin-top: .2rem; font-size: .86rem; color: var(--mc-muted); display: flex; gap: .35rem; align-items: baseline; line-height: 1.25; }
.dir-disc { color: var(--mc-text); }
.dir-desc { margin: .35rem 0 0; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dir-card .ct-tags { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.dir-card .ct-tags span {
    font-size: .74rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px;
    background: var(--mc-bg); border: 1px solid var(--mc-border); color: var(--mc-muted);
}

/* Botones grandes: WhatsApp relleno verde, Llamar con contorno. */
.dir-acciones { display: flex; gap: .5rem; margin-top: .75rem; }
.dir-acciones:empty { display: none; }
.dir-btn {
    flex: 1 1 0; min-width: 0; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    border-radius: .9rem; font-weight: 800; font-size: .98rem; white-space: nowrap;
}
.dir-wa { background: #17803f; border: 2px solid #17803f; color: #fff; }
.dir-wa:hover, .dir-wa:active, .dir-wa:focus-visible { background: #136b35; border-color: #136b35; color: #fff; }
.dir-llamar { background: transparent; border: 2px solid var(--mc-primary); color: var(--mc-primary); }
.dir-llamar:hover, .dir-llamar:active { background: var(--mc-primary); color: var(--mc-primary-text); }

/* ---- Avatar de Mis contactos (foto, logo o iniciales) con insignia de categoria ---- */
.ct-avatar {
    position: relative; flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%;
    background: var(--dir-color, #6b6259); display: inline-flex; align-items: center; justify-content: center;
}
.ct-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: #fff; display: block; }
.ct-avatar .dir-ini { font-size: 1.2rem; }
.ct-avatar-cat {
    position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .7rem;
    border: 2px solid var(--mc-surface);
}
.ct-avatar-cat svg { width: 12px; height: 12px; fill: currentColor; }

/* ---- Filtros con forma de pildora (select nativo visible) y buscador grande ---- */
.dir-buscar { position: relative; }
.dir-buscar .bi-search { position: absolute; left: 1.05rem; top: 50%; transform: translateY(-50%); color: var(--mc-muted); pointer-events: none; }
.dir-buscar input { min-height: 52px; border-radius: 999px; padding-left: 2.6rem; padding-right: .8rem; font-size: .96rem; }
.dir-filtros { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: .5rem; }
.dir-pildora.form-select {
    min-height: 48px; border-radius: 999px; padding-left: .85rem; padding-right: 1.9rem; background-position: right .6rem center;
    font-weight: 700; font-size: .88rem; background-color: var(--mc-surface); text-overflow: ellipsis;
}

/* ---- Mosaicos con foto (estilo Inicio) ---- */
.dir-h2 { font-family: var(--mc-serif); font-size: 1.25rem; font-weight: 700; margin: 1.1rem 0 .6rem; }
.dir-mosaicos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.dir-mosaico {
    position: relative; display: flex; flex-direction: column; padding: 0; text-align: left; border: 0; border-radius: 1.1rem; overflow: hidden;
    background: var(--mc-surface); color: var(--mc-text); box-shadow: var(--mc-sombra);
}
.dir-mosaico:active { transform: scale(.985); }
.dir-mosaico-foto { position: relative; display: block; aspect-ratio: 16 / 9; background: #3a2a1f; }
.dir-mosaico-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dir-mosaico-icono {
    position: absolute; left: .6rem; bottom: -18px; width: 40px; height: 40px; border-radius: .75rem; color: #fff; font-size: 1.15rem;
    display: flex; align-items: center; justify-content: center; border: 3px solid var(--mc-surface); box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.dir-mosaico-icono svg { width: 20px; height: 20px; fill: currentColor; }
.dir-mosaico-txt { display: block; padding: 1.3rem .7rem .7rem; }
.dir-mosaico-txt strong { display: block; font-family: var(--mc-serif); font-size: 1.02rem; line-height: 1.15; }
.dir-mosaico-txt small {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: .15rem; font-size: .8rem; font-weight: 700; color: var(--mc-muted); line-height: 1.25;
}
.dir-mosaico-txt small.primero { color: var(--mc-primary); }

/* Tarjeta ancha con foto y degradado («Especialistas verificados ›»). */
.dir-banner {
    display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 104px; padding: 1rem 1.1rem; border: 0; border-radius: 1.1rem;
    text-align: left; color: #fff; box-shadow: var(--mc-sombra);
    background: linear-gradient(90deg, rgba(12, 8, 5, .88) 0%, rgba(12, 8, 5, .6) 55%, rgba(12, 8, 5, .2) 100%),
        url("../img/inicio/vitales.webp") 60% 40% / cover no-repeat #2a1d14;
}
.dir-banner > span { flex: 1; min-width: 0; }
.dir-banner strong { display: block; font-family: var(--mc-serif); font-size: 1.2rem; line-height: 1.15; }
.dir-banner small { display: block; margin-top: .2rem; color: rgba(255, 255, 255, .9); font-size: .84rem; line-height: 1.25; }
.dir-banner > .bi { font-size: 1.4rem; }

/* ---- Visor de varias fotos (appVisor.abrirLista) ---- */
.visor-lista .visor-cuerpo { position: relative; }
.visor-lista .visor-img { background: transparent; }
.visor-ant, .visor-sig {
    position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 50%; border: 0;
    background: rgba(0, 0, 0, .55); color: #fff; font-size: 1.6rem; display: inline-flex; align-items: center; justify-content: center;
}
.visor-ant { left: .5rem; }
.visor-sig { right: .5rem; }
.visor-cuenta {
    position: absolute; left: 50%; bottom: calc(env(safe-area-inset-bottom) + .75rem); transform: translateX(-50%);
    padding: .2rem .85rem; border-radius: 999px; background: rgba(0, 0, 0, .65); color: #fff; font-weight: 800; font-size: .95rem;
}

[data-bs-theme="dark"] .dir-wa { background: #1b8a45; border-color: #1b8a45; }
[data-bs-theme="dark"] .dir-insignia { background: rgba(34, 27, 23, .92); color: #f7f1ea; }
[data-bs-theme="dark"] .dir-insignia.verif i { color: #7fb2ff; }
[data-bs-theme="dark"] .dir-insignia.h24 { background: #f2c14e; color: #1a0d05; }
[data-bs-theme="dark"] .dir-tu.ct-est { background: rgba(34, 27, 23, .92); color: #7ddc7d; }