/* ============================================
   InmoPanama — F8C.3: Perfil individual de Agente/Agencia
   Archivo nuevo e independiente (identidad propia). Solo afecta a
   ib_agent_detail.php. No modifica main.css ni ib-overrides.css.
   El hero/breadcrumb/estado-404 reutilizan clases GLOBALES ya definidas
   en esas hojas (sin reglas propias aquí para ellos).
   ============================================ */

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

.agp-page__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ===== Layout de 2 columnas (responsive a 1 en mobile/tablet) ===== */
.agp-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}

@media (max-width: 900px) {
    .agp-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ===== Columna principal ===== */
.agp-main {
    background: #FFFFFF;
    border: 1px solid #E3E6EA;
    border-radius: 12px;
    padding: 28px;
}

.agp-identity {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 22px;
}

.agp-avatar {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #EEF1F4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

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

.agp-identity__text {
    min-width: 0;
}

.agp-name {
    font-size: 22px;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 4px;
}

.agp-company {
    font-size: 14px;
    color: #5A6472;
    margin: 0 0 2px;
}

.agp-license {
    font-size: 13px;
    color: #8A939E;
    margin: 0;
}

/* ===== Secciones (Especialidad / Biografía / Redes) ===== */
.agp-section {
    margin-top: 22px;
    padding-top: 22px;
    border-top: 1px solid #EEF0F3;
}

.agp-section__title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #8A939E;
    margin: 0 0 10px;
}

.agp-section__body {
    font-size: 15px;
    line-height: 1.6;
    color: #2E2E38;
    margin: 0;
}

/* Biografía completa: sin clamp de 2 líneas (a diferencia del directorio) */
.agp-bio {
    white-space: pre-line;
}

/* ===== Redes sociales ===== */
.agp-social {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

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

.agp-social__link:hover {
    background: #DDE3E9;
}

.agp-social__link i {
    font-size: 16px;
    line-height: 1;
}

/* Mapeo de glifos Font Awesome 6 Brands — mismos codepoints ya
   verificados en F8B.3 contra el cmap real de
   assets-new/fonts/fa-brands-400.woff2 (ver agent-list.css). Se
   redefinen aquí porque están scoped a las clases propias de este
   archivo (.agp-social__link--*), no a las del directorio. fa-instagram
   no necesita regla propia: ya existe globalmente en fontawesome-min.css. */
.agp-social__link--facebook .fa-facebook::before    { content: "\f09a"; }
.agp-social__link--linkedin .fa-linkedin-in::before { content: "\f0e1"; }
.agp-social__link--youtube  .fa-youtube::before     { content: "\f167"; }
.agp-social__link--twitter  .fa-twitter::before     { content: "\f099"; }
.agp-social__link--tiktok   .fa-tiktok::before      { content: "\e07b"; }

/* ===== Columna lateral: placeholder de contacto (sin botones reales) ===== */
.agp-sidebar__card {
    background: #FFFFFF;
    border: 1px solid #E3E6EA;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.agp-sidebar__title {
    font-size: 15px;
    font-weight: 700;
    color: #1A1A2E;
    margin: 0 0 8px;
}

.agp-sidebar__body {
    font-size: 13px;
    line-height: 1.5;
    color: #5A6472;
    margin: 0;
}

/* ============================================
   F8C.4 — Propiedades del usuario (hasta 6 + conteo)
   ============================================ */
.agp-props__header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.agp-props__title {
    margin: 0;
}

/* F8D.4: placeholder NO interactivo — se usa exclusivamente cuando el
   agente no tiene propiedades públicas (nunca se promete un listado
   vacío con un enlace real). */
.agp-props__view-all--disabled {
    font-size: 12px;
    font-weight: 600;
    color: #9AA2AB;
    white-space: nowrap;
    cursor: default;
}

/* F8D.4A: estado ACTIVO (enlace real a Property List filtrado por
   ?agent_id=, F8D.2/F8D.4). Causa del azul original: F8D.4 reutilizó por
   error la clase --disabled de arriba en el <a> — esa clase NUNCA fija
   text-decoration ni los estados :link/:visited/:hover/:focus-visible,
   así que las reglas globales de Bootstrap (bootstrap.min.css, cargado
   DESPUÉS de este archivo en includes/parts/ib_head.php) terminaban
   decidiendo el resultado visual: "a{color:var(--bs-link-color);
   text-decoration:underline}" pone el azul/subrayado por defecto, y
   "a:hover{color:var(--bs-link-hover-color)}" (especificidad
   elemento+pseudo-clase) supera a una clase sola en hover — por eso el
   enlace se veía azul pese a que --disabled sí fijaba un color gris para
   el resto de propiedades. La solución es una clase dedicada con
   selectores compuestos clase+pseudo-clase (especificidad superior a
   "a:hover" sin importar el orden de carga entre hojas de estilo) que
   fija explícitamente el negro corporativo en los 4 estados pedidos. */
.agp-props__view-all--active {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
}
.agp-props__view-all--active:link,
.agp-props__view-all--active:visited {
    color: var(--ib-negro-principal, #0B0B0B);
    text-decoration: none;
}
.agp-props__view-all--active:hover {
    color: var(--ib-negro-principal, #0B0B0B);
    text-decoration: underline;
    opacity: .75;
}
.agp-props__view-all--active:focus-visible {
    color: var(--ib-negro-principal, #0B0B0B);
    text-decoration: underline;
    outline: 2px solid var(--ib-negro-principal, #0B0B0B);
    outline-offset: 2px;
}

.agp-props__empty {
    color: #5A6472;
}

/* Grid de tarjetas: columnas de ancho idéntico (minmax(0,1fr), nunca
   flexbox ni justify-content:space-between) — mismo remedio ya aplicado
   en F8B.5 para evitar desbordamiento con contenido de ancho variable. */
.agp-props__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

@media (max-width: 900px) {
    .agp-props__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .agp-props__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.agp-prop-card {
    display: block;
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid #E3E6EA;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.agp-prop-card:hover {
    border-color: #C3C9D1;
}

.agp-prop-card--gold   { border-color: #B8902A; }
.agp-prop-card--silver { border-color: #7B8794; }
.agp-prop-card--bronze { border-color: #7A4518; }

.agp-prop-card__img-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #EEF1F4;
    overflow: hidden;
}

.agp-prop-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.agp-prop-card__badge {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    pointer-events: none;
}

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

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

.agp-prop-card__badge--bronze {
    background: linear-gradient(135deg, #C98A4B 0%, #96551F 50%, #6B3A10 100%);
    color: #FFFFFF;
}

.agp-prop-card__body {
    padding: 10px 12px;
}

.agp-prop-card__title {
    font-size: 13px;
    font-weight: 600;
    color: #1A1A2E;
    margin: 0 0 4px;
    overflow-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* F8C.8E.1: color anterior #1A3C6E (azul marino) → negro corporativo
   existente en el sitio (--ib-negro-principal, ib-overrides.css:11).
   Clase exclusiva de las tarjetas de propiedades del perfil de agente
   (único uso en todo el proyecto: este archivo + ib_agent_detail.php:378),
   no afecta Property List/Detail ni ningún otro listado. */
.agp-prop-card__price {
    font-size: 14px;
    font-weight: 700;
    color: var(--ib-negro-principal, #0B0B0B);
    margin: 0;
}

/* ============================================
   F8C.7/F8C.8B — Módulo de contacto protegido (columna lateral)
   Filas de "canal" (etiqueta + valor): .agp-contact__channel reemplaza
   al antiguo .agp-contact__btn de F8C.7/F8C.7.2A (ya no queda ningún
   elemento con esa clase en el HTML).
   ============================================ */
.agp-contact__locked,
.agp-contact__unlocked {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* F8C.8D: causa confirmada del texto apilado — .agp-contact__channel era
   una única fila flex con 4 elementos (ícono, etiqueta min-width:70px,
   valor flex:1, acción con su propio padding) compitiendo por el ancho
   del sidebar. Al restarle espacio fijo a la acción "Desbloquear", el
   valor (flex:1) quedaba con muy poco ancho real y el texto se envolvía
   letra por palabra en varias líneas. Se reestructura a CSS Grid de 2
   filas, sin tocar el HTML (el orden de los hijos — ícono generado,
   etiqueta, valor, acción — es compatible con una reubicación explícita
   por grid-row/grid-column): fila superior = ícono + etiqueta + valor
   (minmax(0,1fr), nunca 1fr simple — mismo remedio anti-desborde ya
   usado en F8B.5 para evitar que el contenido fuerce la columna más
   ancha de lo debido); fila inferior = acción a todo el ancho. */
.agp-contact__channel {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    row-gap: 8px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #E3E6EA;
    background: #F7F8FA;
    text-align: left;
    cursor: pointer;
}

/* F8C.7.2A/F8C.8C (reaplicado aquí sobre la estructura de grid):
   .ib-card-btn-contact es una clase global circular de 38×38px
   (ib-overrides.css:4329-4344, pensada para un ícono sin texto); se
   reutiliza en la fila bloqueada SOLO como gancho de JS. Selector
   compuesto de 2 clases para ganar la cascada (forma + fondo/color/
   borde) sin depender del orden de carga entre agent-detail.css e
   ib-overrides.css. Las filas del estado YA desbloqueado no llevan
   .ib-card-btn-contact, así que nunca tienen este problema. */
.agp-contact__channel.ib-card-btn-contact {
    width: 100%;
    height: auto;
    min-height: 44px;
    border-radius: 8px;
    padding: 10px 14px;
    display: grid;
    white-space: normal;
    background: #F7F8FA;
    color: #1A1A2E;
    border: 1px solid #E3E6EA;
}
.agp-contact__channel.ib-card-btn-contact:hover {
    background: #EEF1F4;
}
.agp-contact__channel.ib-card-btn-contact:focus-visible {
    outline: 2px solid var(--ib-negro-principal, #0B0B0B);
    outline-offset: 2px;
}

/* Fila superior: columna 2 (etiqueta) */
.agp-contact__channel-label {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5A6472;
    white-space: nowrap;
}

/* Fila superior: columna 3 (valor) — minmax(0,1fr) en el contenedor ya
   evita que el contenido fuerce el ancho; aquí solo se refuerza con
   min-width:0 para que el propio span tampoco imponga un mínimo mayor
   al disponible. El texto se envuelve (break-word) únicamente si de
   verdad no hay espacio — nunca se apila letra por letra como antes. */
.agp-contact__channel-value {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1A1A2E;
    overflow-wrap: break-word;
    min-height: 1em; /* reserva espacio antes de poblarse por JS */
}

/* Valor de relleno en estado bloqueado — nunca el dato real ni una
   versión ofuscada de él, solo este texto fijo + ícono de candado. */
.agp-contact__channel-value--locked {
    color: #9AA2AB;
    font-weight: 500;
}
.agp-contact__channel-value--locked::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239AA2AB'%3E%3Cpath d='M12 1a5 5 0 0 0-5 5v3H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V11a2 2 0 0 0-2-2h-2V6a5 5 0 0 0-5-5zm-3 8V6a3 3 0 1 1 6 0v3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Fila inferior: acción a todo el ancho de la tarjeta (incluida la
   columna del ícono) — ya no comparte espacio horizontal con el texto. */
.agp-contact__channel-action {
    grid-column: 1 / -1;
    grid-row: 2;
    box-sizing: border-box;
    width: 100%;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 6px;
    white-space: nowrap;
}
.agp-contact__channel--wa .agp-contact__channel-action {
    background: #25D366;
    color: #FFFFFF;
}
.agp-contact__channel--wa .agp-contact__channel-action:hover {
    background: #1EBE5A;
}
.agp-contact__channel--wa .agp-contact__channel-action:focus-visible {
    outline: 2px solid #128C7E;
    outline-offset: 2px;
}
.agp-contact__channel--email .agp-contact__channel-action {
    background: var(--ib-negro-principal, #0B0B0B);
    color: var(--ib-amarillo, #F5C400);
}
.agp-contact__channel--email .agp-contact__channel-action:hover {
    opacity: .85;
}
.agp-contact__channel--email .agp-contact__channel-action:focus-visible {
    outline: 2px solid var(--ib-amarillo, #F5C400);
    outline-offset: 2px;
}

/* Ícono del canal (WhatsApp/Email) — mismo truco ::before de F8C.7.2A,
   reutilizando el ícono estático ya existente en el sitio para WhatsApp
   (sin crear ningún archivo nuevo) y un sobre en SVG inline para correo,
   en gris oscuro (no amarillo) para que se lea bien sobre el fondo claro
   de la fila. F8C.8E.1: antes el ícono usaba grid-row:1/3 (ambas filas)
   para centrarse respecto a la tarjeta completa, pero esa celda (fila 2,
   columna 1) también la reclama .agp-contact__channel-action con
   grid-column:1/-1 — al pintarse después, el fondo del botón quedaba
   encima del ícono ("iconos detrás de los botones"). Se confina el
   ícono a la fila 1 (la fila de información), que es además el
   requisito explícito de esta fase. */
.agp-contact__channel--wa::before {
    content: '';
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url('/assets-new/img/icons/whatsapp_icon.png') no-repeat center / contain;
}
.agp-contact__channel--email::before {
    content: '';
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23404750'%3E%3Cpath d='M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================
   F8C.8E.2 — Resultado de agent_profile_contact dentro del popup
   #ibclContactModal (includes/parts/ib_lead_modals.php). Exclusivo de
   este bloque: #ibcl-agent-result y sus hijos. Reutiliza .ib-modal-success/
   .ib-modal-submit/.ib-modal-submit-wa (ib-overrides.css) para el estilo
   base del panel y los botones — aquí solo se añade el espaciado propio
   de cada canal, sin tocar ningún estilo global ni el panel genérico
   #ibcl-contact-success (contact_agent, sin cambios).
   ============================================ */
.agp-popup-result__channel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 0 14px;
    padding: 12px;
    border-radius: 8px;
    background: #F7F8FA;
    border: 1px solid #E3E6EA;
    text-align: center;
}
.agp-popup-result__channel:last-of-type {
    margin-bottom: 4px;
}
.agp-popup-result__label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #5A6472;
}
/* F8C.8E.2 Fase 3: un correo largo debe ajustarse dentro de la tarjeta,
   nunca desbordar ni provocar scroll horizontal. */
.agp-popup-result__value {
    display: block;
    max-width: 100%;
    font-size: 15px;
    font-weight: 700;
    color: #1A1A2E;
    overflow-wrap: break-word;
    word-break: break-word;
}
.agp-popup-result__email-link {
    text-decoration: none;
    color: var(--ib-negro-principal, #0B0B0B);
}
.agp-popup-result__email-link:hover {
    text-decoration: underline;
}
.agp-popup-result__channel .ib-modal-submit,
#ibcl-agent-result-pending .ib-modal-submit {
    margin-top: 4px;
}