/* Pestañas: subrayado de marca y barra de la ficha de Obra. */

/* Con una sola pestaña (p. ej. un alta nueva: las demás solo aparecen al
   editar) la barra sobra; el contenido de esa pestaña se sigue viendo */
.nav-tabs:not(:has(> .nav-item + .nav-item)) {
    display: none;
}

/* Pestañas Bootstrap: subrayado en el azul de marca para la activa */
.nav-tabs .nav-link.active {
    border-bottom: 2px solid var(--brand-600);
    color: var(--brand-700);
    font-weight: 600;
}

/* Barra de pestañas de la ficha de Obra: solo la línea inferior de la
   pestaña seleccionada (ver .nav-tabs .nav-link.active arriba), sin
   tarjeta/borde alrededor ni resalte en el resto. flex-nowrap +
   overflow-x-auto: en pantallas estrechas las pestañas se desplazan en
   horizontal en vez de partirse en dos filas. */
#mainPage #myTabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Fijar overflow-y explícitamente: si solo se fija overflow-x, el
       eje "visible" pasa a computarse como "auto" (regla del propio
       CSS), y eso disparaba un scroll vertical -y su barra, con
       flechas arriba/abajo- por una diferencia mínima de alto entre
       icono y texto que no hacía falta scrollear. */
    overflow-y: hidden;
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}

#mainPage #myTabs .nav-link {
    white-space: nowrap;
    border: none;
    border-radius: 0;
    color: var(--bs-secondary-color);
}

#mainPage #myTabs .nav-link:hover {
    border: none;
    color: var(--brand-700);
}

#mainPage #myTabs .nav-link.active {
    border: none;
    border-bottom: 2px solid var(--brand-600);
    background-color: transparent;
    color: var(--brand-700);
    font-weight: 800;
}

/* Cada pestaña de la ficha de Obra tiene contenido de tamaño muy
   distinto (un formulario corto vs. tablas/gráficos largos): sin un
   mínimo común, la página cambia de ancho/alto visiblemente al
   cambiar de pestaña. Se fuerza el ancho completo y una altura mínima
   generosa para que todas ocupen, como poco, el mismo espacio. */
#mainPage #myTabContent {
    width: 100%;
    min-height: 70vh;
}

#mainPage .tab-pane {
    width: 100%;
}