/* ============================================
   InmoPanama — F8B.1: Directorio de Agentes/Agencias
   Archivo nuevo e independiente (identidad propia, sin copiar el
   diseño de PanamaRealtor.com). Solo afecta a ib_agent_list.php.
   F8B.2: se agregó hero + breadcrumb reutilizando clases GLOBALES
   (.hero-inner-section-area-sidebar, .listing-breadcrumb) ya definidas
   en main.css/ib-overrides.css — por eso no aparecen reglas para ellas
   aquí. El <h1> ahora vive en el hero, así que se retiró .al-page__title
   (quedaría duplicado/huérfano).
   ============================================ */

.al-page {
    background: #F7F8FA;
    padding: 32px 0 64px;
}

.al-page__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* F8B.6: introducción editorial, debajo del breadcrumb y antes del
   buscador. Ancho de lectura acotado (no usa el ancho completo de
   .al-page__inner) y separación vertical propia; no reemplaza el H1
   del hero (sigue siendo el único <h1> de la página). */
.al-intro {
    max-width: 720px;
    margin: 0 0 28px;
}

.al-intro__title {
    font-size: 22px;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 10px;
}

.al-intro__body {
    font-size: 14px;
    line-height: 1.6;
    color: #4A4A5A;
    margin: 0;
}

/* ===== Buscador ===== */
.al-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    background: #FFFFFF;
    border: 1px solid #E3E6EA;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 28px;
}

.al-search__label {
    font-size: 13px;
    font-weight: 600;
    color: #4A4A5A;
}

.al-search__input {
    flex: 1 1 220px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid #D4D8DD;
    border-radius: 8px;
    font-size: 14px;
    color: #1A1A2E;
}

/* F8B.5/F8B.6: negro corporativo real de InmoPanama (var. global
   --ib-negro-principal, definida en assets-new/css/ib-overrides.css:11,
   ya cargada antes de este archivo). F8B.6: texto en amarillo corporativo
   (var. global --ib-amarillo, misma hoja) — amarillo sobre negro da
   contraste muy alto, igual de legible que el blanco anterior. Hover:
   mismo patrón ya usado en botones negros existentes del sitio
   (.ib-prop-mortg-btn), opacity en vez de un color de hover nuevo.
   focus-visible nuevo: no existía antes en este botón. */
.al-search__btn {
    padding: 10px 20px;
    background: var(--ib-negro-principal, #0B0B0B);
    color: var(--ib-amarillo, #F5C400);
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.al-search__btn:hover {
    opacity: .80;
}

.al-search__btn:focus-visible {
    outline: 2px solid var(--ib-amarillo, #F5C400);
    outline-offset: 2px;
}

/* F8B.6: antes era un enlace rojo subrayado; ahora un control secundario
   con la misma forma/tamaño que el botón Buscar (mismo padding y
   border-radius), fondo blanco y borde gris discreto. Sigue siendo un
   <a href="?">, no se convierte en submit; su lógica de visibilidad
   (solo aparece cuando hay un filtro activo) no se tocó. */
.al-search__clear {
    display: inline-block;
    padding: 10px 20px;
    background: #FFFFFF;
    border: 1px solid #D4D8DD;
    border-radius: 8px;
    color: #333333;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.al-search__clear:hover {
    background: #F0F1F3;
    border-color: #C3C9D1;
}

.al-search__clear:focus-visible {
    outline: 2px solid var(--ib-negro-principal, #0B0B0B);
    outline-offset: 2px;
}

/* ===== Grupos comerciales ===== */
.al-group {
    margin-bottom: 40px;
}

.al-group__title {
    font-size: 20px;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 16px;
    padding-left: 2px;
}

.al-group--ultra .al-group__title {
    color: #1F4E79;
}

.al-group--gold .al-group__title {
    color: #8A6A1D;
}

.al-group--silver .al-group__title {
    color: #4D5A66;
}

/* ===== Grid responsiva 3 / 2 / 1 columnas ===== */
.al-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

@media (max-width: 992px) {
    .al-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .al-grid {
        grid-template-columns: 1fr;
    }
}

/* F8B.4/F8B.5: grid exclusiva del grupo "Más miembros" — 4 columnas
   iguales en escritorio (en vez de las 3 del resto de grupos). Misma
   técnica de CSS Grid con columnas fr iguales que .al-grid (nunca
   flexbox ni justify-content:space-between) — "Más miembros" es el
   único grupo que cambia; los demás conservan .al-grid (3/2/1) sin
   tocar. Debe ir DESPUÉS de .al-grid en el archivo para ganar por orden
   de aparición (misma especificidad de selector).

   F8B.5 — causa real del ancho irregular: "repeat(4, 1fr)" (sin
   minmax) NO anula el min-width:auto implícito de cada tarjeta como
   elemento de grid. Si una tarjeta tiene contenido no partible (una
   palabra larga en nombre/empresa/especialidad), esa columna crece por
   encima de 1/4 y las demás se comprimen de forma desigual, pudiendo
   desbordar. "minmax(0, 1fr)" fuerza columnas de ancho idéntico sin
   importar el contenido interno. min-width:0 en la tarjeta + un
   word-break de respaldo en los textos es el remedio estándar para que
   el contenido envuelva en vez de estirar la columna. Alcance acotado
   a este grupo nada más: no se toca .al-card ni .al-grid base. */
.al-grid--standard {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 992px) {
    .al-grid--standard {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .al-grid--standard {
        grid-template-columns: minmax(0, 1fr);
    }
}

.al-grid--standard .al-card {
    min-width: 0;
}

.al-grid--standard .al-card__name,
.al-grid--standard .al-card__company,
.al-grid--standard .al-card__niche {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ===== Tarjeta ===== */
.al-card {
    position: relative;
    background: #FFFFFF;
    border: 1px solid #E3E6EA;
    border-radius: 12px;
    padding: 22px 18px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}

/* F8B.7: Ultradestacados — antes "arcoíris metálico" (dorado-violeta-azul-
   verde), ahora azul metálico premium: azul marino profundo -> azul acero
   -> reflejo plateado-azulado -> azul acero (simula un brillo metálico
   direccional, no un arcoíris). Misma técnica de 2 capas (interior blanca
   + exterior con degradado, recortadas con background-clip) y misma
   sombra de elevación neutra que dorado/plateado, solo con acentos de
   color azul en vez de multicolor. Sin animación. El fondo del contenido
   sigue blanco opaco (capa interior), así que el contraste del texto no
   cambia. */
.al-card--ultra {
    border: 2px solid transparent;
    background-image:
        linear-gradient(#FFFFFF, #FFFFFF),
        linear-gradient(135deg, #0B2545 0%, #3A6EA5 45%, #B8C6D9 70%, #3A6EA5 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow:
        0 2px 10px rgba(58, 110, 165, 0.22),
        0 2px 10px rgba(11, 37, 69, 0.14),
        0 8px 18px rgba(0, 0, 0, 0.10);
}

.al-card--gold {
    border-width: 2px;
    border-color: #B8902A;
    box-shadow:
        0 2px 8px rgba(212, 175, 55, 0.30),
        0 8px 18px rgba(0, 0, 0, 0.10);
}

.al-card--silver {
    border-width: 2px;
    border-color: #7B8794;
    box-shadow:
        0 2px 8px rgba(170, 178, 189, 0.32),
        0 8px 18px rgba(0, 0, 0, 0.10);
}

.al-card__badge {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    pointer-events: none;
}

.al-card__badge--ultra {
    /* Degradado acotado a tonos oscuros/medios (sin llegar al reflejo
       plateado claro) para que el texto blanco mantenga contraste legible
       en toda la superficie del badge, no solo en un extremo. */
    background: linear-gradient(135deg, #0B2545 0%, #1F4E79 40%, #3A6EA5 70%, #6E95BE 100%);
    color: #FFFFFF;
}

.al-card__badge--gold {
    background: linear-gradient(135deg, #E9C765 0%, #D4AF37 50%, #B8902A 100%);
    color: #241900;
}

.al-card__badge--silver {
    background: linear-gradient(135deg, #E8ECEF 0%, #AAB2BD 50%, #7B8794 100%);
    color: #1A1A1A;
}

/* ===== Avatar: foto -> logo -> iniciales ===== */
.al-card__avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 14px;
    background: #EEF1F4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.al-card__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.al-card__avatar-initials {
    font-size: 26px;
    font-weight: 700;
    color: #6B7684;
}

.al-card__name {
    font-size: 17px;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 4px;
}

.al-card__company {
    font-size: 13px;
    color: #5A6472;
    margin: 0 0 2px;
}

.al-card__license {
    font-size: 12px;
    color: #8A939E;
    margin: 0 0 10px;
}

/* Descripción recortada a 2 líneas (clamp multiplataforma) */
.al-card__bio {
    font-size: 13px;
    color: #3C3C46;
    line-height: 1.4;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.4em * 2);
}

.al-card__niche {
    font-size: 12px;
    color: #1A3C6E;
    font-weight: 600;
    margin: 0 0 10px;
}

.al-card__props {
    font-size: 13px;
    color: #2E7D4F;
    font-weight: 600;
    margin: 0 0 14px;
}

/* ===== Redes sociales ===== */
.al-card__social {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.al-card__social-link {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #EEF1F4;
    color: #4A4A5A;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.al-card__social-link:hover {
    background: #DDE3E9;
}

/* F8B.3: icono real por red (antes se mostraba solo la inicial en texto).
   Tamaño uniforme para los 6 iconos, sin distorsión (font, no <img>). */
.al-card__social-link i {
    font-size: 14px;
    line-height: 1;
}

/* Mapeo de glifos de Font Awesome 6 Brands — la familia y el peso ya
   los pone la clase global .fa-brands (fontawesome-min.css); aquí solo
   se completa el content: que faltaba en ese subset para estos 5 iconos.
   Codepoints verificados contra el cmap real de
   assets-new/fonts/fa-brands-400.woff2 (ya cargado por el sitio),
   no adivinados. fa-instagram no necesita regla propia: ya existe
   globalmente en fontawesome-min.css. */
.al-card__social-link--facebook .fa-facebook::before    { content: "\f09a"; }
.al-card__social-link--linkedin .fa-linkedin-in::before { content: "\f0e1"; }
.al-card__social-link--youtube  .fa-youtube::before     { content: "\f167"; }
.al-card__social-link--twitter  .fa-twitter::before     { content: "\f099"; }
.al-card__social-link--tiktok   .fa-tiktok::before      { content: "\e07b"; }

/* F8C.4.1: "Ver perfil" habilitado — mismo tamaño/forma que el estado
   --disabled anterior (padding, border-radius, margin-top:auto para
   quedar al fondo de la tarjeta flex). La regla --disabled se conserva
   sin tocar por si algún otro contexto aún la usa.
   F8C.4.2: color base = gris corporativo oficial del sitio
   (--ib-gris-fondo/--ib-gris-borde/--ib-texto-oscuro, definidos en
   ib-overrides.css) — sirve tal cual para "Más miembros" (sin clase
   --ultra/--gold/--silver). Las 3 categorías comerciales lo sobrescriben
   abajo vía selector de la clase ya presente en .al-card, sin tocar PHP. */
.al-card__cta--active {
    display: inline-block;
    margin-top: auto;
    padding: 9px 22px;
    border-radius: 8px;
    border: 1px solid var(--ib-gris-borde, #D9D9D9);
    color: var(--ib-texto-oscuro, #222222);
    font-size: 13px;
    font-weight: 600;
    background: var(--ib-gris-fondo, #F5F5F5);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
}

.al-card__cta--active:hover {
    background: var(--ib-gris-borde, #D9D9D9);
}

.al-card__cta--active:focus-visible {
    outline: 2px solid var(--ib-negro-principal, #0B0B0B);
    outline-offset: 2px;
}

/* F8C.4.4: color de texto explícito en TODOS los estados del enlace —
   neutraliza la herencia del azul por defecto de Bootstrap
   (assets-new/css/plugins/bootstrap.min.css: "a{color:var(--bs-link-color)}",
   --bs-link-color:#0d6efd, cargado globalmente en ib_head.php). No se usa
   !important: el selector de 2 clases + pseudo-clase ya tiene más
   especificidad que el "a" simple de Bootstrap. */
.al-card__cta--active:link,
.al-card__cta--active:visited,
.al-card__cta--active:hover,
.al-card__cta--active:focus,
.al-card__cta--active:focus-visible {
    color: var(--ib-texto-oscuro, #222222);
}

/* F8C.4.3: "Ver perfil" con acabado metálico por categoría comercial —
   mismos gradientes de marca ya usados en el borde/badge de cada
   tarjeta (F8B.4/F8B.7), reutilizados aquí tal cual para coherencia
   visual, en vez de inventar un tono nuevo. Solo cambian background/
   color/outline — tamaño/posición/forma los pone la regla base arriba.
   Hover = filter: brightness() estático (un solo cambio de estado, sin
   animación continua ni brillo en movimiento); focus-visible conserva
   su outline de color distintivo por categoría, sin cambios. */
.al-card--ultra .al-card__cta--active {
    /* Azul marino profundo -> azul acero -> reflejo plateado-azulado,
       acotado a tonos oscuros/medios (igual que el badge --ultra) para
       que el texto blanco quede legible en todo el degradado. */
    background: linear-gradient(135deg, #0B2545 0%, #1F4E79 40%, #3A6EA5 70%, #6E95BE 100%);
    border-color: #1F4E79;
    color: #FFFFFF;
}
.al-card--ultra .al-card__cta--active:hover {
    filter: brightness(0.90);
}
.al-card--ultra .al-card__cta--active:focus-visible {
    outline-color: #1F4E79;
}
/* F8C.4.4: color ya correcto (blanco) — se fija explícito en todos los
   estados por la misma razón de arriba, sin cambiar el valor. */
.al-card--ultra .al-card__cta--active:link,
.al-card--ultra .al-card__cta--active:visited,
.al-card--ultra .al-card__cta--active:hover,
.al-card--ultra .al-card__cta--active:focus,
.al-card--ultra .al-card__cta--active:focus-visible {
    color: #FFFFFF;
}

.al-card--gold .al-card__cta--active {
    /* Dorado oscuro -> oro medio -> reflejo dorado claro — mismo
       degradado del badge --gold; texto oscuro legible en todo el rango
       (incluida la franja más clara). */
    background: linear-gradient(135deg, #B8902A 0%, #D4AF37 50%, #E9C765 100%);
    border-color: #B8902A;
    color: #241900;
}
.al-card--gold .al-card__cta--active:hover {
    filter: brightness(0.92);
}
.al-card--gold .al-card__cta--active:focus-visible {
    outline-color: #8A6A1D;
}
/* F8C.4.4: texto negro en todos los estados — neutraliza el azul de
   Bootstrap (ver nota en .al-card__cta--active:link de arriba). */
.al-card--gold .al-card__cta--active:link,
.al-card--gold .al-card__cta--active:visited,
.al-card--gold .al-card__cta--active:hover,
.al-card--gold .al-card__cta--active:focus,
.al-card--gold .al-card__cta--active:focus-visible {
    color: #241900;
}

.al-card--silver .al-card__cta--active {
    /* Gris acero -> plata media -> reflejo plateado claro — mismo
       degradado del badge --silver; texto gris muy oscuro legible en
       todo el rango (verificado contra la franja más clara #E8ECEF). */
    background: linear-gradient(135deg, #7B8794 0%, #AAB2BD 50%, #E8ECEF 100%);
    border-color: #7B8794;
    color: #1A1A1A;
}
.al-card--silver .al-card__cta--active:hover {
    filter: brightness(0.94);
}
.al-card--silver .al-card__cta--active:focus-visible {
    outline-color: #4D5A66;
}
/* F8C.4.4: texto negro en todos los estados — neutraliza el azul de
   Bootstrap (ver nota en .al-card__cta--active:link más arriba). */
.al-card--silver .al-card__cta--active:link,
.al-card--silver .al-card__cta--active:visited,
.al-card--silver .al-card__cta--active:hover,
.al-card--silver .al-card__cta--active:focus,
.al-card--silver .al-card__cta--active:focus-visible {
    color: #1A1A1A;
}

/* ===== "Ver perfil" — placeholder no interactivo (ya no se usa en la
   tarjeta; se conserva por si algún otro contexto la referencia) ===== */
.al-card__cta--disabled {
    margin-top: auto;
    padding: 9px 22px;
    border-radius: 8px;
    border: 1px solid #D4D8DD;
    color: #9AA2AB;
    font-size: 13px;
    font-weight: 600;
    background: #F7F8FA;
    cursor: default;
}

/* ===== Estado vacío ===== */
.al-empty {
    text-align: center;
    padding: 48px 20px;
    background: #FFFFFF;
    border: 1px solid #E3E6EA;
    border-radius: 10px;
}

.al-empty__title {
    font-size: 18px;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 8px;
}

.al-empty__body {
    font-size: 14px;
    color: #5A6472;
    margin: 0;
}