/* ===== Variables de color (paleta original) ===== */
:root {
    --green:      #7aa630;
    --blue:       #007aaa;
    --blue-mid:   #9dbbd1;
    --blue-pale:  #d7e0e5;
    --gray-dark:  #4e4e4e;
    --gray:       #666666;
    --gray-light: #999999;
    --bg:         #ededed;
    --white:      #ffffff;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }

/* ===== Base ===== */
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: var(--gray);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: var(--bg);
    background-image: url(../imatges/fons.gif);
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; color: var(--blue); }
img { max-width: 100%; height: auto; }

/* ===== Wrapper ===== */
.site-wrapper {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}

/* ===== Header ===== */
.site-header {
    width: 100%;
    min-height: 257px;
    background-image: url(../imatges/capcelera.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 0.5rem 1rem;
}

.header-top {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
}

.header-date {
    font-size: 11px;
    color: var(--gray);
    white-space: nowrap;
}

.header-auth {
    font-size: 11px;
    text-align: right;
}

.login-form-inline {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ===== Breadcrumb ===== */
.breadcrumb-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 6px;
    font-size: 11px;
    background-image: url(../imatges/borde_ver.gif);
    background-repeat: repeat-x;
    background-position: center;
    min-height: 10px;
    margin-bottom: 4px;
}

/* ===== Layout ===== */
.section-bar {
    width: 100%;
    height: 10px;
    background-image: url(../imatges/borde_ver.gif);
    background-repeat: repeat-x;
}

.content-layout {
    display: flex;
    align-items: flex-start;
    gap: 0;
}

/* ===== Left sidebar ===== */
.sidebar-left {
    width: 150px;
    flex-shrink: 0;
    padding: 0 6px;
}

.nav-section { margin-bottom: 1rem; }

.nav-section-title {
    display: block;
    font-weight: bold;
    font-size: 11px;
    padding: 3px 0;
    border-top: 1px solid var(--green);
    border-bottom: 1px solid var(--green);
    margin-bottom: 3px;
}

.nav-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-section ul li a {
    font-size: 11px;
    display: block;
    padding: 2px 0;
    color: var(--gray);
}

.nav-section ul li a:hover { color: var(--blue); text-decoration: none; }

.momento-img { text-align: center; margin-top: 4px; }

/* ===== Main content ===== */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 0 12px;
}

/* ===== Right sidebar ===== */
.sidebar-right {
    width: 200px;
    flex-shrink: 0;
    padding: 0 6px;
}

/* ===== Section headers ===== */
.section-header {
    border-top: 1px solid var(--green);
    border-bottom: 1px solid var(--green);
    padding: 3px 0;
    margin: 6px 0;
}

.section-header h2, .section-header h3 {
    color: var(--green);
    font-size: 12px;
    font-weight: bold;
    margin: 0;
}

/* ===== Forms ===== */
.quadre_txt,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="file"],
textarea,
select {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    color: var(--blue);
    background-color: var(--blue-pale);
    border: 1px solid var(--blue-mid);
    padding: 3px 6px;
    border-radius: 2px;
}

textarea { resize: vertical; }

.boton,
button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
    font-family: Verdana, sans-serif;
    font-size: 11px;
    color: #333;
    background-color: #cccccc;
    border: 1px solid #c2c2c2;
    padding: 3px 8px;
    cursor: pointer;
    border-radius: 2px;
}

.boton:hover, button:hover, input[type="submit"]:hover { background-color: #b8b8b8; }

.botondis {
    font-size: 11px;
    color: var(--gray-light);
    background-color: #f5f5f5;
    border: 1px solid #cccccc;
    padding: 3px 8px;
    border-radius: 2px;
    cursor: default;
}

/* ===== Color utility classes ===== */
.verd        { color: var(--green);      }
.blau        { color: var(--blue);       }
.grisclar    { color: var(--gray-light); }
.normal      { font-size: 11px; color: var(--gray); }
.peque       { font-size: 10px; color: var(--gray-dark); }
.gran        { font-size: 38px; color: var(--white); }
.titolgran   { font-size: 19px; color: var(--gray); font-family: Helvetica, sans-serif; }
.grangris    { font-size: 14px; color: var(--gray-dark); }
.blaugran    { font-size: 12px; color: var(--blue); }
.blaumoltgran{ font-size: 14px; color: var(--blue); }
.linkmenutop,
.linkmenu    { font-size: 12px; color: var(--gray-dark); text-decoration: none; }
.link_caption{ font-size: 12px; color: var(--white); text-decoration: none; }

/* ===== News ===== */
.news-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.news-item img { width: 100px; flex-shrink: 0; }

.news-text { flex: 1; min-width: 0; }

/* ===== Poll ===== */
.poll-box {
    border: 1px solid var(--green);
    padding: 8px;
    margin-bottom: 12px;
}

.poll-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
    padding: 4px 0;
}

.poll-option {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
}

.poll-actions {
    text-align: center;
    padding: 6px 0 2px;
}

/* ===== Coletillas ===== */
.coletilla-item { margin-bottom: 10px; font-size: 11px; }
.coletilla-stars { display: flex; gap: 2px; justify-content: center; }
.coletilla-divider {
    border: none;
    border-top: 1px solid var(--green);
    margin: 6px 0;
}
.coletilla-form { text-align: center; margin-top: 6px; }

/* ===== Pagination ===== */
.pagination {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 11px;
}

.pagination span { cursor: pointer; }

/* ===== Registration form ===== */
.form-wrap { max-width: 820px; margin: 0 auto; }

.form-row {
    display: flex;
    gap: 12px;
    margin-bottom: 5px;
    align-items: flex-start;
}

.form-label { width: 220px; flex-shrink: 0; padding-top: 4px; font-size: 11px; }
.form-field  { flex: 1; }
.form-field input, .form-field textarea { width: 100%; }

.error-msg   { color: #cc0000; font-size: 11px; }
.success-msg { color: var(--green); font-size: 11px; }

/* ===== Forum / general tables ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.data-table th {
    background-color: var(--blue-pale);
    color: var(--gray-dark);
    padding: 4px 6px;
    text-align: left;
    border-bottom: 1px solid var(--blue-mid);
}
.data-table td { padding: 4px 6px; border-bottom: 1px solid #e0e0e0; vertical-align: top; }

/* ===== Responsive ===== */
@media (max-width: 980px) {
    .site-wrapper { max-width: 100%; }
}

@media (max-width: 768px) {
    .content-layout  { flex-direction: column; }
    .sidebar-left    { width: 100%; }
    .sidebar-right   { width: 100%; order: 3; }
    .main-content    { order: 2; }
    .sidebar-left    { order: 1; }

    /* Show nav as horizontal groups on mobile */
    .nav-section { display: inline-block; width: 48%; vertical-align: top; margin-right: 1%; }

    .site-header { min-height: 140px; background-size: 100% auto; }
    .header-top  { flex-wrap: wrap; }
    .poll-grid   { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    body { font-size: 12px; }
    .nav-section { display: block; width: 100%; }
    .form-row { flex-direction: column; }
    .form-label { width: 100%; }
    .login-form-inline { flex-direction: column; align-items: flex-start; }
}