/* ============================================================
   Detall d'oferta (tauler públic) — redisseny
   Escopat només a aquesta pàgina. Mateix llenguatge visual que
   tauler_ofertes.html i llista_ofertes_empresa.html: paper +
   indigo de marca, Fraunces per als títols, IBM Plex per al cos
   i les dades. Cap classe genèrica compartida (hero-card,
   modern-card, info-item...) es fa servir aquí; totes les que
   segueixen són noves i pròpies d'aquesta pàgina.
   ============================================================ */

.detall-tauler-panel {
    --ink: #1E1B2E;
    --paper: #FAFAF8;
    --indigo: #4B49AC;
    --sky: #7DA0FA;
    --sky-light: #98BDFF;
    --sage: #4B7F63;
    --ochre: #B8863B;
    --brick: #A23E3E;
    --slate: #7A7686;

    font-family: 'IBM Plex Sans', sans-serif;
    color: var(--ink);
}

.detall-tauler-panel h2.detall-titol-pagina {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.7rem;
    color: var(--ink);
    margin: 1.5rem 0;
}

/* ---- Bloc principal (hero) ---- */
.detall-hero {
    background: var(--paper);
    border: 1px solid rgba(75, 73, 172, 0.14);
    border-radius: 6px;
    padding: 2rem;
    margin-bottom: 1.25rem;
}

.detall-hero .oferta-titol {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.6rem;
    color: var(--ink);
    margin-bottom: 0.5rem;
}

.detall-hero .oferta-lloc {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--slate);
    margin-bottom: 1rem;
}

.detall-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.info-chip {
    display: inline-block;
    background: rgba(75, 73, 172, 0.08);
    color: var(--indigo);
    border-radius: 3px;
    padding: 0.3rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
}

.info-chip.is-salari {
    background: rgba(75, 127, 99, 0.12);
    color: var(--sage);
}

/* Estadístiques del hero */
.detall-stats {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid rgba(30, 27, 46, 0.08);
    padding-top: 1.25rem;
}

.detall-stats .stat {
    flex: 1 1 0;
    min-width: 100px;
}

.detall-stats .stat .num {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1;
}

.detall-stats .stat.is-dies .num.is-vermell { color: var(--brick); }
.detall-stats .stat.is-dies .num.is-ambre { color: var(--ochre); }
.detall-stats .stat.is-dies .num.is-verd { color: var(--sage); }

.detall-stats .stat .lbl {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--slate);
}

/* ---- Targetes de secció (descripció, funcions, requisits, perfil) ---- */
.detall-card {
    background: var(--paper);
    border: 1px solid rgba(30, 27, 46, 0.08);
    border-radius: 6px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}

.detall-card .titol-seccio {
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.detall-card .cos {
    color: var(--slate);
    line-height: 1.6;
    font-size: 0.92rem;
}

.detall-card .subtitol {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--slate);
    font-weight: 600;
    margin-bottom: 0.6rem;
}

/* Funcions: llista numerada (l'ordre és real, per això es manté la numeració) */
.funcio-linia {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}

.funcio-num {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--indigo);
    color: #fff;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.funcio-text {
    color: var(--ink);
    font-size: 0.9rem;
    padding-top: 0.15rem;
}

/* Idiomes / estudis: llista compacta */
.perfil-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.6rem;
}

.perfil-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: rgba(30, 27, 46, 0.03);
    border-radius: 4px;
    padding: 0.6rem 0.8rem;
}

.perfil-item i {
    color: var(--indigo);
    margin-top: 0.15rem;
}

.perfil-item strong {
    display: block;
    font-size: 0.88rem;
    color: var(--ink);
}

.perfil-item small {
    color: var(--slate);
}

/* ---- Sidebar ---- */
.detall-sidebar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(30, 27, 46, 0.06);
    font-size: 0.88rem;
}

.detall-sidebar-item:last-child {
    border-bottom: none;
}

.detall-sidebar-item .etiqueta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--slate);
}

.detall-sidebar-item .valor {
    font-family: 'IBM Plex Mono', monospace;
    font-weight: 600;
    color: var(--ink);
    text-align: right;
}

.detall-sidebar-item .valor.is-vermell { color: var(--brick); }
.detall-sidebar-item .valor.is-ambre { color: var(--ochre); }
.detall-sidebar-item .valor.is-verd { color: var(--sage); }

/* Candidatura */
.detall-cta {
    text-align: center;
}

.detall-cta .titol-seccio {
    justify-content: center;
}

.detall-cta p {
    color: var(--slate);
    font-size: 0.9rem;
}