/*
 * styles_individual.css
 * Estilos globales del perfil individual (individual--foaf-person).
 * Todo vive bajo el espacio de nombres ".iprof-*" para no colisionar
 * con otras hojas de estilo del sitio (Wilma / Bootstrap del tema).
 */

.iprof-page {
    --iprof-navy: #131a45;
    --iprof-navy-soft: #1d2464;
    --iprof-red: #d90921;
    --iprof-red-dark: #b4071b;
    --iprof-text: #26262f;
    --iprof-text-soft: #4a4a55;
    --iprof-bg: #eef0f3;
    --iprof-white: #ffffff;
    --iprof-border: #dcdfe6;
    --iprof-radius: 10px;
    --iprof-font: "Segoe UI", Roboto, Arial, Helvetica, sans-serif;

    font-family: var(--iprof-font);
    color: var(--iprof-text);
    background: var(--iprof-bg);
    box-sizing: border-box;
}

.iprof-page *,
.iprof-page *::before,
.iprof-page *::after {
    box-sizing: inherit;
}

.iprof-page ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iprof-page a {
    color: inherit;
    text-decoration: none;
}

.iprof-page img {
    display: block;
    max-width: 100%;
}

.iprof-page button {
    font-family: inherit;
    cursor: pointer;
}

/* ===================== HERO ===================== */

.iprof-hero {
    background: var(--iprof-bg);
    padding: 40px 0;
}

.iprof-hero__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    gap: 56px;
    align-items: flex-start;
    margin:0 auto !important;
}

/* --- Columna foto --- */

.iprof-photo-col {
    flex: 0 0 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.iprof-photo-frame {
    position: relative;
    width: 260px;
    height: 260px;
}

.iprof-photo-frame__ring {
    position: absolute;
    inset: -14px;
    border: 3px solid var(--iprof-navy);
    border-radius: 50%;
    clip-path: inset(0 0 0 0 round 50%);
}

.iprof-photo {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--iprof-white);
    border: 4px solid var(--iprof-white);
    box-shadow: 0 2px 10px rgba(19, 26, 69, 0.12);
}

.iprof-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.iprof-photo--placeholder {
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.iprof-photo--placeholder svg {
    width: 78%;
    height: 78%;
    fill: #c6cad6;
}

/* La foto real la inyecta <@p.image> (lib-properties-person.ftl) directamente
   dentro de #photo-custom-person-wrapper.iprof-photo-frame, como
   <a><img class="individual-photo"></a> o, sin foto, como
   <img class="individual-photo"> suelto (placeholder de VIVO). No pasa por
   el wrapper .iprof-photo de la maqueta estática, así que se estiliza aquí
   directamente para lograr el mismo círculo con marco blanco y sombra. */
.iprof-photo-frame>a,
.iprof-photo-frame>img.individual-photo {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: var(--iprof-white);
    border: 4px solid var(--iprof-white);
    box-shadow: 0 2px 10px rgba(19, 26, 69, 0.12);
}

.iprof-photo-frame img.individual-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* --- Widget de descarga de HV --- */

.iprof-cv {
    position: relative;
    width: 100%;
}

.iprof-cv__trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: var(--iprof-red);
    color: var(--iprof-white);
    border: none;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    transition: background-color .15s ease;
}

.iprof-cv__trigger:hover,
.iprof-cv__trigger:focus-visible {
    background: var(--iprof-red-dark);
}

.iprof-cv__trigger span:nth-child(2) {
    flex: 1;
    text-align: left;
}

.iprof-cv__icon,
.iprof-cv__chevron {
    width: 18px;
    height: 18px;
    flex: none;
}

.iprof-cv__chevron {
    transition: transform .15s ease;
}

.iprof-cv.is-open .iprof-cv__chevron {
    transform: rotate(180deg);
}

.iprof-cv__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    min-width: 240px;
    background: var(--iprof-white);
    border: 1px solid var(--iprof-border);
    border-radius: var(--iprof-radius);
    box-shadow: 0 8px 24px rgba(19, 26, 69, 0.16);
    padding: 6px;
    display: none;
    z-index: 20;
}

.iprof-cv.is-open .iprof-cv__dropdown {
    display: block;
}

.iprof-cv__option {
    display: block;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    color: var(--iprof-text);
}

.iprof-cv__option:hover,
.iprof-cv__option:focus-visible {
    background: var(--iprof-bg);
}

/* --- Redes y correo --- */

.iprof-social {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.iprof-social img {
    border-radius: 50%;
    transition: transform .15s ease;
}

.iprof-social a:hover img,
.iprof-social a:focus-visible img {
    transform: translateY(-2px);
}

.iprof-email {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--iprof-text-soft);
}

.iprof-email__icon {
    flex: none;
}

.iprof-email a:hover {
    color: var(--iprof-red);
}

/* --- Columna principal (nombre, cargos, áreas) --- */

.iprof-main-col {
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 6px;
}

.iprof-titlebar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.iprof-name {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    color: var(--iprof-text);
    line-height: 1.2;
}

.iprof-qr {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--iprof-red) !important;
    /* Menos redondeado (rectángulo con esquinas suaves) en vez del
       pill completo de 999px. */
    border-radius: 8px !important;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--iprof-text-soft);
}

.iprof-qr svg {
    width: 18px;
    height: 18px;
    flex: none;
}

.iprof-qr:hover {
    border-color: var(--iprof-navy);
    color: var(--iprof-navy);
}

.iprof-positions {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 30px;
}

.iprof-positions li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 17px;
    line-height: 1.45;
    color: var(--iprof-text);
}

.iprof-bullet {
    flex: none;
    width: 16px;
    height: 16px;
    margin-top: 6px;
    border-radius: 50%;
    border: 2px solid var(--iprof-red);
    background: radial-gradient(circle, var(--iprof-red) 0 3px, transparent 4px);
}

.iprof-areas__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 800;
    color: var(--iprof-red);
}

.iprof-areas__icon {
    flex: none;
}

.iprof-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.iprof-tag {
    padding: 12px 22px;
    border: 1px solid var(--iprof-border);
    border-radius: 999px;
    background: var(--iprof-white);
    font-size: 15px;
    font-weight: 600;
    color: var(--iprof-text);
}

/* ===================== CUERPO: menú + panel ===================== */

.iprof-body {
    background: var(--iprof-white);
    padding: 40px 0 64px;
}

.iprof-body__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.iprof-menu-toggle {
    display: none;
}

/*
 * El menú también puede llegar envuelto en el grid dinámico de
 * individual--foaf-person-property-group-tabs.ftl (.row.individual-objects
 * > .col-md-2.iprof-menu / .col-md-10.iprof-panels). Se normaliza ese grid
 * aquí para que respete el layout de dos columnas del rediseño sin tocar
 * las clases de Bootstrap (nav, nav-pills, tab-pane...) de las que depende
 * el cambio de pestañas (data-bs-toggle="tab").
 */
.iprof-body__container .row.individual-objects {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    width: 100%;
    margin: 0;
}

.iprof-body__container .iprof-menu,
.iprof-body__container .iprof-panels {
    padding: 0;
}

.iprof-menu {
    flex: 0 0 280px;
    max-width: 280px;
}

.iprof-menu__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0;
    margin: 0;
}

.iprof-menu .iprof-menu__item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 22px;
    background: var(--iprof-navy);
    color: var(--iprof-white);
    border: none;
    border-radius: var(--iprof-radius);
    font-size: 16px;
    font-weight: 700;
    text-align: left;
    transition: background-color .15s ease;
}

.iprof-menu .iprof-menu__item:hover,
.iprof-menu .iprof-menu__item:focus-visible {
    background: var(--iprof-navy-soft);
    color: var(--iprof-white);
}

.iprof-menu .iprof-menu__item.is-active,
.iprof-menu .iprof-menu__item.active {
    background: var(--iprof-navy-soft);
    color: var(--iprof-white);
    box-shadow: inset 0 0 0 2px var(--iprof-red);
}

.iprof-menu__chevron {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--iprof-red);
}

.iprof-panels {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
    background: var(--iprof-white);
    border: 1px solid var(--iprof-border);
    border-radius: var(--iprof-radius);
    padding: 40px 44px;
}

/* Red de seguridad: oculta/muestra los tab-pane dinámicos aunque el
   CSS global de Bootstrap no esté disponible en el contexto de prueba. */
.iprof-panels .tab-pane {
    display: none;
}

.iprof-panels .tab-pane.active {
    display: block;
}

.iprof-panel__title {
    margin: 0 0 20px;
    font-size: 26px;
    font-weight: 800;
    color: var(--iprof-navy);
}

.iprof-panel__title-accent {
    color: var(--iprof-red);
}

.iprof-panel p {
    margin: 0 0 18px;
    font-size: 16px;
    line-height: 1.7;
    color: var(--iprof-text);
    text-align: justify;
}

.iprof-panel p:last-child {
    margin-bottom: 0;
}

.iprof-empty {
    color: var(--iprof-text-soft);
    font-style: italic;
}

/* ===================================================================
   FASE 2 — selectores reales de los includes provistos:
   individual-custom-positions.ftl, -researchAreas.ftl, -identities.ftl,
   -contactInfo.ftl, -webpage.ftl, -person-properties.ftl.
   El <li> interno de cada lista lo genera la macro <@p.objectProperty>
   (fuera de este proyecto), así que se estiliza por descendencia sin
   asumir sus clases internas.
   =================================================================== */

/* --- Cargos (individual-custom-positions.ftl) --- */
.position-list.iprof-positions {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    /* gap: 14px; */
    gap: 8px;
    margin-bottom: 16px;
}

.position-list.iprof-positions li {
    position: relative;
    padding-left: 28px;
    font-size: 17px;
    line-height: 1.45;
    color: var(--iprof-text);
}

.position-list.iprof-positions li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid var(--iprof-red);
    background: radial-gradient(circle, var(--iprof-navy-soft) 0 3px, transparent 4px);
}

/* --- Áreas de investigación (individual-custom-researchAreas.ftl) --- */
.iprof-areas {
    margin-bottom: 8px;
}

.iprof-areas__title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 24px;
    font-weight: 800;
    color: var(--iprof-red);
}

.iprof-areas__icon {
    flex: none;
    width: 28px;
    height: 28px;
}

ul.iprof-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

ul.iprof-tags li {
    padding: 12px 22px;
    border: 1px solid var(--iprof-border);
    border-radius: 999px;
    background: var(--iprof-white);
    font-size: 15px;
    font-weight: 600;
    color: var(--iprof-text);
}

/* --- Redes/identidades (individual-custom-identities.ftl) --- */
.iprof-identities {
    display: flex;
    justify-content: center;
    padding-top: 40px;
}

ul.identifiPerson.iprof-social {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.iprof-social__icon {
    width: 36px;
    height: 36px;
    transition: transform .15s ease;
}

/* Los PNG/JPG heredados (ResearchGate, ResearcherID, Pure, Repec, Behance)
   no traen su propio círculo como los SVG nuevos, así que se recortan. */
.iprof-social__icon:not(.iprof-social__icon--svg) {
    border-radius: 50%;
    object-fit: cover;
}

ul.identifiPerson.iprof-social a:hover .iprof-social__icon,
ul.identifiPerson.iprof-social a:focus-visible .iprof-social__icon {
    transform: translateY(-2px);
}

/* --- Correo / teléfono (individual-custom-contactInfo.ftl) --- */
.iprof-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--iprof-text-soft);
}

.iprof-contact ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.iprof-contact .fa-envelope {
    color: var(--iprof-red);
    margin-right: 6px;
}

.iprof-contact a.email:hover {
    color: var(--iprof-red);
}

/* --- Sitio web (individual-custom-webpage.ftl) --- */
.iprof-website {
    text-align: center;
    font-size: 14px;
    color: var(--iprof-text-soft);
}

.iprof-website .glyphicon-globe {
    color: var(--iprof-red);
    margin-right: 6px;
}

.iprof-website ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* --- Contenido de cada pestaña (individual-custom-person-properties.ftl) --- */
.iprof-property-panel {
    border: none;
    box-shadow: none;
}

.iprof-property-panel:last-child {
    margin-bottom: 0;
}

.iprof-property-panel__heading {
    background: none;
    border: none;
    padding: 0 0 12px;
    margin-bottom: 16px;
}

.iprof-property-panel__title {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--iprof-navy);
}

.iprof-property-panel__title .manageLinks {
    font-size: 13px;
    font-weight: 600;
    color: var(--iprof-red);
    margin-left: 10px;
}

.iprof-property-panel__body {
    padding: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--iprof-text);
}

/* --- Sparklines/coautoría (individual-custom-visualizationFoafPerson.ftl) ---
   Widget con sus propias clases (visualizationContainer, visualization-item)
   y su propio visualization.css; solo se ajusta el espaciado para que no
   quede pegado al listado de propiedades que sigue debajo. */
.iprof-panels .visualizationContainer {
    margin-bottom: 24px;
}

/* ===================================================================
   PARCHES sobre individual-foaf-person.css / wilma.css (CSS heredado
   que ya carga en el sitio para esta misma plantilla). Ese archivo usa
   selectores por ID y varios !important, así que aquí se iguala o se
   supera esa especificidad — casi siempre con selectores compuestos
   (su mismo id/clase + la nuestra) más !important — para que el nuevo
   diseño gane sin tener que reescribir ese CSS heredado.
   =================================================================== */

/* --- Foto: individual-foaf-person.css pone overflow:hidden y
   border-radius:50% en #photo-custom-person-wrapper, lo que recorta
   (oculta) el anillo/punto decorativo que sobresale del marco. --- */
#photo-custom-person-wrapper.iprof-photo-frame {
    width: 260px !important;
    height: 260px !important;
    overflow: visible !important;
    border-radius: 0 !important;
    border: none !important;
    background: none !important;
    margin: 0 auto !important;
}

.iprof-photo-frame>a,
.iprof-photo-frame>img.individual-photo {
    width: 100% !important;
    height: 100% !important;
}

.iprof-photo-frame img.individual-photo {
    height: 100% !important;
    object-fit: cover !important;
}

/* --- Íconos sociales: individual-foaf-person.css fuerza 50px!important
   y flex-wrap:wrap, por eso se ven grandes y en dos filas. Se reduce el
   tamaño y el espacio para que las 6 quepan en una sola fila dentro de
   la columna de 260px. --- */
.iprof-social a img.iprof-social__icon {
    width: 30px !important;
    height: 30px !important;
    max-width: 30px !important;
}

ul.identifiPerson.iprof-social {
    gap: 8px !important;
}

/* --- Teléfono: se oculta, solo debe mostrarse el correo. --- */
.iprof-contact .phoneContainer {
    display: none !important;
}

/* --- Correo: individual-foaf-person.css ya pone la fila en flex; solo
   se quita el ícono de viñeta heredado (list-style con imagen propia)
   para que no compita con el ícono mail.svg agregado en el FTL. --- */
.iprof-contact ul.individual-emails {
    list-style: none !important;
}

.iprof-contact .iprof-email__icon {
    width: 16px;
    height: 16px;
    flex: none;
}

/* --- Cargos: individual-foaf-person.css/wilma.css traen, por ID,
   list-style con una flechita verde (ul#individual-personInPosition) y
   font-size:14px!important; y la plantilla real del statement (la que
   incluye <@p.objectProperty>, fuera de este proyecto) arma cada cargo
   en varias piezas (título/organización/escuela) con su propio
   flex/tabla, lo que produce el efecto de "3 columnas" con huecos
   enormes y saltos de línea escalonados. Se aplana todo a texto en
   línea para que fluya como un párrafo normal con sangría colgante. --- */
ul#individual-personInPosition.iprof-positions {
    list-style: none !important;
}

.position-list.iprof-positions li {
    text-align: left !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.position-list.iprof-positions li,
.position-list.iprof-positions li * {
    display: inline !important;
    float: none !important;
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    margin: 0 !important;
}

.position-list.iprof-positions li {
    display: list-item !important;
}

/* --- Áreas de investigación: el encabezado y las pills deben quedar
   en la misma fila (no una debajo de la otra), con el texto con
   mayúscula inicial y las pills con borde rojo — individual-foaf-
   person.css fuerza minúsculas, color gris y borde gris con reglas
   por ID muy específicas. --- */
.iprof-areas {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 14px;
}

#individual-info h3#hasResearchArea.iprof-areas__title {
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    text-transform: lowercase !important;
    color: var(--iprof-navy-soft) !important;
}

/* Mayúscula inicial propia, sin depender de que el <span> sea lo primero
   dentro del <h3> (el ícono puede seguir precediéndolo en el HTML). Al
   ser una declaración directa sobre el propio elemento, gana sobre el
   text-transform:lowercase heredado del <h3> de arriba sin necesitar
   !important ni orden especial. */
.iprof-areas__title-text {
    text-transform: lowercase;
}

.iprof-areas__title-text::first-letter {
    text-transform: uppercase;
}

.iprof-areas ul.iprof-tags,
#individual-hasResearchArea.iprof-tags {
    flex: 1 1 auto;
    margin: 0 !important;
    /* individual-foaf-person.css pone gap:0 en #individual-hasResearchArea
       (selector por ID), por eso las pills se veían pegadas. */
    gap: 10px 16px !important;
}

ul#individual-hasResearchArea.iprof-tags li,
.iprof-areas ul.iprof-tags li {
    border: 1px solid var(--iprof-red) !important;
    /* Menos redondeado (rectángulo con esquinas suaves) en vez del
       pill completo de 999px. */
    border-radius: 8px !important;
}

/* --- Nombre: individual-foaf-person.css lo pone en gris (#5E6363);
   el diseño lo pide en azul/navy institucional. --- */
#individual-info h1.foaf-person span.fn {
    color: var(--iprof-navy) !important;
}

/* .panel-body.iprof-property-panel__body li {
    display: flex;
} */