/**
 * DIBA 2025 - CONTENIDO Y ELEMENTOS ADICIONALES
 * 
 * Basado en: maqueta.html de Seu Electrònica Diputació de Barcelona
 * Componente: Contenido principal, pestañas, tramites y elementos UI
 * 
 * Fuente: maqueta.html líneas 1141+
 * HTML: Varios contenedores y componentes
 */

/* ========================================
   CONTENEDOR PRINCIPAL
   ======================================== */

#contingutcentral {
    background-color: #f3f3f4;
}

/* ========================================
   LAYOUT CONSULTA SEU: SIDEBAR + CONTINGUT
   ======================================== */

.info-seu-layout {
    position: relative;
}

/* SIDEBAR (columna esquerra) */
.info-seu-layout > .row > .col-md-3 {
    margin-bottom: 1.5rem;
}

.info-seu-layout > .row > .col-md-3 .bloc_lat_gris {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0 15px;
    background-color: #ffffff;
}

.info-seu-layout > .row > .col-md-3 .bloc_lat_gris_top {
    border-bottom: 1px solid #ddd;
    margin: 0 -15px 10px;
    padding: 10px 15px;
    background-color: #f5f5f5;
    background-image: linear-gradient(to bottom, #f5f5f5 0, #e8e8e8 100%);
    background-repeat: repeat-x;
}

.info-seu-layout > .row > .col-md-3 .bloc_lat_gris_top h2 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}

.info-seu-layout > .row > .col-md-3 .bloc_lat_gris2 {
    border-bottom: 1px solid #e6e6e6;
    padding: 10px 0;
}

.info-seu-layout > .row > .col-md-3 .bloc_lat_gris2 p {
    margin: 0;
    font-size: 12px;
    font-style: normal;
    line-height: 1.2em;
}

.info-seu-layout > .row > .col-md-3 address {
    margin-bottom: 10px;
    font-size: 12px;
    font-style: normal;
    line-height: 1.2em;
}

.info-seu-layout > .row > .col-md-3 .bloc_lat_gris p,
.info-seu-layout > .row > .col-md-3 .bloc_lat_gris address,
.info-seu-layout > .row > .col-md-3 .bloc_lat_gris address a,
.info-seu-layout > .row > .col-md-3 .bloc_lat_gris2 p,
.info-seu-layout > .row > .col-md-3 .bloc_lat_gris2 p a {
    font-size: 12px;
    line-height: 1.2em;
}

.info-seu-layout > .row > .col-md-3 address a {
    color: #337ab7;
}

.info-seu-layout > .row > .col-md-3 address a:hover,
.info-seu-layout > .row > .col-md-3 address a:focus {
    color: #286090;
}

/* CONTINGUT CENTRAL (columna dreta) */
.info-seu-layout #contingut {
    font-size: 12px;
}

.info-seu-layout #contingut h1 {
    margin-top: 0;
    margin-bottom: 20px;
}

.info-seu-layout #contingut .well {
    padding: 19px 19px 3px;
}

.info-seu-layout #contingut .panel-heading {
    border-radius: 4px 4px 0 0;
}

.info-seu-layout #contingut .form-control,
.info-seu-layout #contingut .btn,
.info-seu-layout #contingut label,
.info-seu-layout #contingut table {
    font-size: 12px;
}

.info-seu-layout #contingut .fitxa-head-cell {
    padding-bottom: 10px;
    color: #891536;
}

.info-seu-layout #contingut .fitxa-cell {
    padding-bottom: 5px;
}

.info-seu-layout #contingut .fitxa-action-cell {
    margin-top: 5px;
    margin-bottom: 5px;
}

.info-seu-layout #contingut .fitxa-link {
    font-size: 12px;
    display: inline-block;
    text-align: center;
    width: 45px;
}

.enslocal-navbar-bg {
    background: #fadebc;
}

.enslocal-col-empty-inline {
    padding: 0;
    display: inline-block;
}

.services-header-text-xs {
    font-size: 10px;
}

.fitxa-service-title,
.fitxa-panel-heading {
    color: #000;
}

.fitxa-panel-heading {
    font-weight: bold;
}

.fitxa-panel-body {
    padding-top: 0;
}

.tot-menu-list {
    float: left;
    list-style-type: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
}

.tot-menu-border-left {
    border-left: #676869 solid 1px;
}

.tot-menu-border-right {
    border-right: #676869 solid 1px;
}

.tot-header-cols {
    padding: 0;
    font-size: 10px;
}

.tot-row-inline,
.tot-col-name,
.tot-col-check {
    display: inline-block;
}

.tot-row-inline,
.tot-col-name {
    padding: 0;
}

.check-icon-no-padding {
    padding: 0;
}

.list-services-row,
.list-services-main-col {
    padding: 0;
}

.list-services-item-name {
    margin: 5px;
}

.list-services-actions {
    padding-bottom: 8px;
}

.list-services-check-col {
    padding: 5px;
    border-bottom: 0 !important;
}

.list-filters-table {
    display: table;
}

.list-filters-col-left {
    padding: 0;
    display: table-row;
}

.list-filters-col-right,
.list-filters-check-cell {
    display: table-cell;
    padding: 0;
}

.list-filters-col-right {
    padding: 0;
}

.list-filters-lateral-pad {
    padding-left: 15px;
}

.list-filters-row-min-height,
.list-filters-check-cell {
    min-height: 47px;
}

.list-filters-check-cell {
    border: 0;
}

.list-filters-name-cell {
    padding: 0;
}

.list-filters-col-pt {
    padding-top: 5px;
}

.list-filters-action-col {
    cursor: pointer;
    padding-top: 5px;
}

#contingutcentral.container-fluid.info {
    padding-right: 0;
    padding-left: 0;
}

/* Contenedores de contenido principal - Espaciado vertical */
.info,
.infoServeis,
.containerFitxaservei {
    padding: 3rem 15px;}

.containerFitxaserveiButton {
    padding: 0 30px;
}

.contenido {
    padding: 0;
}

#content {
    padding-top: 1rem;
}

.columns-1 {
    width: 100%;
}

/* ========================================
   PORTLET LAYOUT
   ======================================== */

.portlet-layout {
    margin: 0;
}

.portlet-column {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.portlet-dropzone,
.portlet-column-content {
    min-height: 50px;
}

/* ========================================
   HEADINGS EN CONTENIDO
   ======================================== */

h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 1rem;
}

h2.border-top {
    border-top: 4px solid #9D2235 !important;
    padding-top: 2rem;
    margin-top: 1.5rem;
}

h2.pt-5 {
    padding-top: 3rem !important;
}

h2.mt-4 {
    margin-top: 1.5rem !important;
}

h2 img {
    max-height: 30px;
    width: auto;
    margin-right: 0.5rem;
}

h2 .float-left {
    float: left !important;
}

h2 .mt-2 {
    margin-top: 0.5rem !important;
}

h2 .mr-2 {
    margin-right: 0.5rem !important;
}

/* ========================================
   PESTAÑAS (TABS)
   ======================================== */

.pestanyesEnllacos {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}

.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav.flex-column-lg {
    flex-direction: column;
}

@media (min-width: 992px) {
    .nav.flex-column-lg {
        flex-direction: column !important;
    }
}

.nav-item {
    margin-bottom: 0.5rem;
}

.nav-link {
    display: block;
    padding: 0.75rem 1rem;
    color: #333;
    text-decoration: none;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    transition: all 0.3s ease;
}

.nav-link:hover,
.nav-link:focus {
    color: #9D2235;
    background-color: #e9ecef;
}

.nav-link.active {
    color: #fff;
    background-color: #9D2235;
    border-color: #9D2235;
}

.nav-link.text-uppercase {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
}

/* ========================================
   TAB CONTENT
   ======================================== */

.tab-content {
    padding: 1.5rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-top: none;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.tab-pane.fade {
    opacity: 0;
    transition: opacity 0.15s linear;
}

.tab-pane.fade.show {
    opacity: 1;
}

/* ========================================
   TRAMITS (Trámites)
   ======================================== */

.tramits {
    padding: 1rem 0;
}

.tramits-items {
    display: flex;
    flex-wrap: wrap;
    margin: -0.5rem;
}

.tramits-items a {
    display: inline-block;
    margin: 0.5rem;
    padding: 0.75rem 1.5rem;
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    color: #333;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.3s ease;
    border-radius: 0.25rem;
}

.tramits-items a:hover,
.tramits-items a:focus {
    background-color: #9D2235;
    color: #fff;
    border-color: #9D2235;
    text-decoration: none;
}

/* Animaciones */
.tramits-items a.animated {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.tramits-items a.fadeInUp {
    animation-name: fadeInUp;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Small text en tabs */
small.text-uppercase {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #707173;
    margin-bottom: 0.75rem;
}

small.pt-4 {
    padding-top: 1.5rem !important;
}

small.pl-3 {
    padding-left: 1rem !important;
}

small.d-block {
    display: block !important;
}

small strong {
    font-weight: 700;
}

/* ========================================
   LINKS
   ======================================== */

.links {
    margin-top: 1rem;
}

.links a {
    color: #0076ad;
    text-decoration: none;
    font-weight: 700;
}

.links a:hover {
    color: #9D2235;
    text-decoration: underline;
}

/* Enlaces de documentación en panel de convocatorias (SS) */
#DisableDivCabecera .content-info-phase .list-group-item a {
    color: #337ab7;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.d-block {
    display: block !important;
}

.d-inline-block {
    display: inline-block !important;
}

.m-0 {
    margin: 0 !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.mt-4 {
    margin-top: 1.5rem !important;
}

.mb-4 {
    margin-bottom: 1.5rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.pt-3 {
    padding-top: 1rem !important;
}

.pt-4 {
    padding-top: 1.5rem !important;
}

.pt-5 {
    padding-top: 3rem !important;
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.text-dark {
    color: #333 !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

/* ========================================
   GRID CLASSES
   ======================================== */

.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

.col-lg-3,
.col-lg-9 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 992px) {
    .col-lg-3 {
        flex: 0 0 25%;
        max-width: 25%;
    }
    
    .col-lg-9 {
        flex: 0 0 75%;
        max-width: 75%;
    }
}

.col-md-4,
.col-md-12 {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
    
    .col-md-12 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 991px) {
    .pestanyesEnllacos {
        margin-top: 1rem;
        margin-bottom: 1.5rem;
    }
    
    .nav.flex-column-lg {
        flex-direction: row;
        overflow-x: auto;
    }
    
    .nav-link {
        font-size: 12px;
        padding: 0.625rem 0.875rem;
    }
    
    .tab-content {
        padding: 1rem;
    }
    
    .tramits-items a {
        font-size: 12px;
        padding: 0.625rem 1.25rem;
    }
}

@media (max-width: 767px) {
    h2 {
        font-size: 1.375rem;
    }
    
    h2.pt-5 {
        padding-top: 2rem !important;
    }
    
    .nav-link {
        font-size: 11px;
        padding: 0.5rem 0.75rem;
    }
    
    .tab-content {
        padding: 0.75rem;
    }
    
    .tramits-items {
        margin: -0.25rem;
    }
    
    .tramits-items a {
        margin: 0.25rem;
        padding: 0.5rem 1rem;
        font-size: 11px;
    }
    
    small.text-uppercase {
        font-size: 11px;
    }
}

@media (max-width: 575px) {
    h2 {
        font-size: 1.25rem;
    }
    
    .nav-link.text-uppercase {
        font-size: 10px;
    }
    
    .tramits-items a {
        font-size: 10px;
        padding: 0.375rem 0.75rem;
    }
}

@media (max-width: 991px) {
    .info-seu-layout > .row > .col-md-3 {
        margin-bottom: 1rem;
    }

    .info-seu-layout #contingut h1 {
        margin-bottom: 15px;
    }
}

/* ========================================
   BOTONS SCROLL (centralitzats des de consultaseugral/novetats)
   ======================================== */

a.scroll-top,
a.scroll-bottom {
    color: #fff;
    display: none;
    width: 30px;
    height: 30px;
    position: fixed;
    z-index: 1000;
    right: 30px;
    font-size: 20px;
    background: #222;
    border-radius: 3px !important;
    text-align: center;
    border: 1px solid hsla(0, 0%, 78%, 0.3);
}

a.scroll-top {
    bottom: 70px;
}

a.scroll-bottom {
    bottom: 30px;
}

a.scroll-top i {
    position: relative;
    top: 2px;
}

a.scroll-bottom i {
    position: relative;
    top: 3px;
}

/* ========================================
   BLOQUES LATERALES GRISES
   ======================================== */

.bloc_lat_gris {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 0 15px;
}

/* ========================================
   COMPONENTE SHARE MIGRADO
   Los estilos del componente share ahora están en:
   diba2025-14-share-component.css
   ======================================== */
