/*
============================================================================
FITXER: css/imprimir.css
ROL: Estils comuns de les versions per imprimir (imprimir/<puzzle>.html):
     fulls A4 per plastificar i escriure-hi amb retolador de pissarra.
ARQUITECTURA: Cada .pagina és un full A4 (210 × 297 mm). El PDF el fa
     tools/genera-pdf.js amb Chromium. Tot es mesura en mm i pt.
     Només blanc, negre i gris fosc: la impressora és en blanc i negre.
DEPENDÈNCIES: Cap. Cada puzzle hi afegeix el seu CSS d'impressió.
============================================================================
*/
@page {
    size: A4;
    margin: 0;
}
:root {
    --tinta: #000;
    --gris: #333; /* gris fosc: textos secundaris i vores fines */
}
* {
    box-sizing: border-box;
}
html,
body {
    margin: 0;
    padding: 0;
    background: #d4d4d4; /* només a la pantalla */
    color: var(--tinta);
    font-family: Inter, 'Segoe UI', Arial, sans-serif;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

/* ---- Un full ---- */
.pagina {
    width: 210mm;
    height: 297mm;
    margin: 0 auto 8mm auto;
    padding: 10mm 6mm 8mm 6mm;
    background: white;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
}
.pagina:last-child {
    page-break-after: auto;
    break-after: auto;
}
@media print {
    html,
    body {
        background: white;
    }
    .pagina {
        margin: 0;
    }
}

/* ---- Barra de dalt: només a la pantalla ---- */
.barra {
    width: 210mm;
    margin: 0 auto;
    padding: 14px 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    font-size: 15px;
}
.barra a,
.barra button {
    padding: 8px 14px;
    border: 2px solid var(--tinta);
    border-radius: 8px;
    background: white;
    color: var(--tinta);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.barra button {
    background: var(--tinta);
    color: white;
}
.barra span {
    color: var(--gris);
}
@media print {
    .barra {
        display: none;
    }
}

/* ---- Capçalera i peu de cada full ---- */
.cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6mm;
    padding-bottom: 3mm;
    border-bottom: 0.6mm solid var(--tinta);
    margin-bottom: 6mm;
}
.cap h1 {
    margin: 0;
    font-size: 19pt;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta);
}
.cap .jp {
    font-family: 'IPAGothic', sans-serif;
    font-size: 11pt;
    font-weight: normal;
    letter-spacing: 0;
    color: var(--gris);
    margin-left: 3mm;
}
.cap .quins {
    font-size: 12pt;
    font-weight: 700;
    color: var(--gris);
}
.peu {
    margin-top: auto;
    padding-top: 2.5mm;
    border-top: 0.2mm solid var(--gris);
    font-size: 7.5pt;
    color: var(--gris);
    text-align: center;
}

/* ---- Instruccions (full 1) ---- */
.regles {
    margin: 0 0 4mm 0;
    padding-left: 6mm;
    font-size: 12.5pt;
    line-height: 1.45;
}
.fila {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7mm;
}
.fila figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2mm;
}
.fila figcaption {
    font-size: 10pt;
    font-weight: 700;
    color: var(--gris);
    text-align: center;
}
.fletxa-gran {
    font-size: 22pt;
    color: var(--gris);
}
.caixa {
    margin-top: 4mm;
    padding: 3.5mm 5mm;
    border: 0.3mm solid var(--gris);
    border-radius: 3mm;
    background: white;
}
.caixa h2 {
    margin: 0 0 3mm 0;
    font-size: 12pt;
    text-align: center;
    color: var(--tinta);
}
.caixa p,
.caixa li {
    font-size: 11pt;
    line-height: 1.45;
}
.caixa p {
    margin: 2mm 0 0 0;
}
.caixa ol,
.caixa ul {
    margin: 0;
    padding-left: 6mm;
}
.veredicte {
    font-size: 10pt;
    font-weight: 600;
    text-align: center;
    color: var(--tinta);
}
.veredicte b {
    display: block;
    font-size: 14pt;
}
.retolador {
    border: 0.7mm solid var(--tinta);
}

/* ---- Fulls de problemes ---- */
.problemes {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 4mm 3mm;
    align-items: center;
}
.problema {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5mm;
}
.num-problema {
    align-self: flex-start;
    min-width: 8mm;
    height: 8mm;
    padding: 0 2mm;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4mm;
    background: var(--tinta);
    color: white;
    font-size: 11pt;
    font-weight: 800;
}
.regla-full {
    margin: 0 0 4mm 0;
    font-size: 12pt;
    text-align: center;
}