/**********************************************
 *   ESTIL GENERAL DE TOTA LA WEB
 **********************************************/

body {
    font-family: Arial, sans-serif;
    margin: 10px;
    background-color: #f7f7f7;
    color: #222;
}

/**********************************************
 *   BOTONS I ENLLAÇOS
 **********************************************/

a {
    color: #0044cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/**********************************************
 *   SELECTORS (Jornada, Rival, etc)
 **********************************************/

.selector {
    color: black;
    background-color: white;
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid #bbb;
    font-size: 14px;
    min-width: 160px;
}

/**********************************************
 *   CONTENIDOR RESPONSIVE PER TAULES
 **********************************************/

.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 20px;
}

/**********************************************
 *   TAULES MODERNES (per defecte)
 **********************************************/

.fullwidth {
    width: 100%;
}

.moduletable {
    border-collapse: collapse;
    width: 100%;
    background-color: white;
    margin-bottom: 15px;
}

.moduletable th,
.moduletable td {
    border: 1px solid #ddd;
    padding: 8px 10px;
}

.moduletable th {
    background-color: #84BCF0;
    font-weight: bold;
}

/**********************************************
 *   TAULES AMB ESTIL MILLORAT
 **********************************************/

.styled-table {
    background-color: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ccc;
}

.styled-table th {
    background: #84BCF0;
    font-size: 14px;
}

.styled-table td {
    font-size: 14px;
}

/**********************************************
 *   TÍTOLS CENTRATS
 **********************************************/

.title-center {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
}

/**********************************************
 *   AJUDES DE POSICIÓ
 **********************************************/

.center {
    text-align: center;
}

.right {
    text-align: right;
}

/**********************************************
 *   TEXT WRAP (per noms llargs)
 **********************************************/

.wrap-text {
    white-space: normal;
    word-break: break-word;
}

/**********************************************
 *   TAULES AMB CAPÇALERA GRAN (General, Jornada)
 **********************************************/

.moduletable thead th {
    text-align: center;
    padding: 10px;
    font-size: 15px;
}

/**********************************************
 *   BANNER O TÍTOL SUPERIOR
 **********************************************/

.page-title {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 15px 0;
}

/**********************************************
 *   BOTÓ DE TORNAR (si existix)
 **********************************************/

.back_button {
    margin-bottom: 20px;
}

.back_button a {
    background: #ddd;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid #bbb;
    font-weight: bold;
    color: black;
}

.back_button a:hover {
    background: #ccc;
}

/**********************************************
 *   RESPONSIVE GENERAL
 **********************************************/

@media (max-width: 600px) {

    body {
        margin: 5px;
    }

    .selector {
        width: 100%;
        padding: 8px;
        font-size: 15px;
    }

    .moduletable th,
    .moduletable td {
        padding: 6px;
        font-size: 13px;
    }

    .page-title {
        font-size: 17px;
    }
}