/* ========================================
   PORTAL DE TRANSPARENCIA
======================================== */

.club {

    flex: 1;

    background:
            linear-gradient(
                    to bottom,
                    #f7f7f7,
                    #ffffff
            );

    padding: 7rem 0;
}


/* ========================================
   CONTAINER
======================================== */

.club-container {

    width: 90%;

    max-width: 1200px;

    margin: auto;
}


/* ========================================
   INTRO
======================================== */

.club-intro-block {

    margin-bottom: 8rem;
}

.club-subtitle {

    display: inline-block;

    color: var(--green-primary);

    font-size: 0.95rem;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 1.5rem;
}

.club-title {

    font-size: 5rem;

    font-weight: 900;

    color: var(--green-dark);

    line-height: 1;

    margin-bottom: 1.5rem;
}

.club-line {

    width: 95px;
    height: 5px;

    background-color: var(--green-light);

    border-radius: 30px;

    margin-bottom: 2.5rem;
}

.club-intro-text {

    font-size: 1.5rem;

    line-height: 2;

    color: #2e2e2e;

    max-width: 900px;

    font-weight: 500;
}


/* ========================================
   SECCIONES
======================================== */

.club-section {

    margin-bottom: 7rem;
}

.club-section h2 {

    font-size: 3rem;

    font-weight: 800;

    color: var(--green-dark);

    margin-bottom: 2rem;
}

.club-section h2::after {

    content: "";

    display: block;

    width: 60px;
    height: 4px;

    background-color: var(--green-light);

    border-radius: 30px;

    margin-top: 1rem;
}

.club-section h3 {

    font-size: 1.4rem;

    color: var(--green-primary);

    font-weight: 700;

    margin-top: 2rem;

    margin-bottom: 1rem;
}

.club-section p {

    font-size: 1.1rem;

    line-height: 2.2;

    color: #4a4a4a;
}


/* ========================================
   LISTAS
======================================== */

.transparencia-list {

    padding-left: 1.5rem;
}

.transparencia-list li {

    margin-bottom: 1rem;

    line-height: 1.8;

    color: #4a4a4a;
}


/* ========================================
   ORGANIGRAMA
======================================== */

.directiva-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 1.5rem;

    margin-top: 2rem;
}

.directiva-item {

    background: white;

    padding: 1.8rem;

    border-radius: 20px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.06);

    display: flex;

    flex-direction: column;

    gap: 0.6rem;
}

.directiva-item strong {

    color: var(--green-dark);

    font-size: 1.1rem;
}

.directiva-item span {

    font-weight: 700;
}

.directiva-item small {

    color: #777;
}

.nota-transparencia {

    margin-top: 2rem;
}


/* ========================================
   COORDINADOR
======================================== */

.coordinador-card {

    display: inline-block;

    padding: 1.2rem 2rem;

    background-color: white;

    border-radius: 15px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.08);

    font-weight: 700;

    color: var(--green-dark);
}


/* ========================================
   TABLAS
======================================== */

.transparencia-table {

    width: 100%;

    border-collapse: collapse;

    background: white;

    border-radius: 20px;

    overflow: hidden;

    box-shadow: 0 12px 35px rgba(0,0,0,0.06);

    margin-top: 2rem;
}

.transparencia-table thead {

    background: var(--green-primary);

    color: white;
}

.transparencia-table th {

    padding: 1.3rem;

    text-align: left;

    font-size: 1rem;

    font-weight: 700;
}

.transparencia-table td {

    padding: 1.2rem;

    border-bottom: 1px solid #ececec;

    vertical-align: top;
}

.transparencia-table tbody tr:hover {

    background-color: #fafafa;
}

.transparencia-table td:last-child {

    width: 180px;

    font-weight: 700;

    color: var(--green-dark);
}

.total-row {

    background-color: #f5fff0;

    font-weight: 800;
}

.total-row td {

    color: var(--green-dark);
}


/* ========================================
   ENLACES DOCUMENTOS
======================================== */

.documentos-anuales {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    margin-top: 2rem;
}

.documentos-anuales a {

    background-color: white;

    padding: 0.9rem 1.3rem;

    border-radius: 12px;

    border: 1px solid #e6e6e6;

    color: var(--green-primary);

    font-weight: 700;

    transition: 0.25s;
}

.documentos-anuales a:hover {

    background-color: var(--green-primary);

    color: white;

    transform: translateY(-2px);
}


/* ========================================
   ENLACES TABLAS
======================================== */

.transparencia-table a {

    color: var(--green-primary);

    font-weight: 700;

    transition: 0.2s;
}

.transparencia-table a:hover {

    color: var(--green-dark);

    text-decoration: underline;
}


/* ========================================
   DESTINO INGRESOS
======================================== */

.destino-ingresos {

    margin-top: 2rem;

    padding: 1.5rem;

    background: white;

    border-left: 5px solid var(--green-primary);

    border-radius: 10px;

    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 768px) {

    .club {

        padding: 4rem 0;
    }

    .club-title {

        font-size: 3rem;
    }

    .club-intro-text {

        font-size: 1.2rem;
    }

    .club-section h2 {

        font-size: 2rem;
    }

    .transparencia-table {

        display: block;

        overflow-x: auto;
    }

    .documentos-anuales {

        flex-direction: column;
    }

    .documentos-anuales a {

        width: 100%;
    }

    .extends-title {

        font-size: 2.3rem;

        line-height: 1.15;

        word-break: break-word;
    }
}