/*
============================================================================
FITXER: css/imprimir-busca-la-figura.css
ROL: Les quadrícules del «Busca la figura» en paper: línies de punts en
     gris fosc, punts negres grans (s'hi encerclen els vèrtexs amb el
     retolador) i la figura que es demana en negreta.
ARQUITECTURA: Fa servir el mateix DOM que el joc (TaulerTriangle, el del «Busca
     el triangle»), però amb mides en mm: --k (el posa js/busca-la-figura/imprimir.js) són els mm
     d'una unitat del tauler; un quadret fa 64 unitats. Només blanc, negre i
     gris fosc: sense els colors ni els farcits del joc (impressora en B/N).
DEPENDÈNCIES: css/imprimir.css (s'ha de carregar abans).
============================================================================
*/
figure {
    margin: 0;
}

/* ---- La quadrícula: línies i triangle (SVG) + punts (HTML), en unitats de tauler.js ---- */
.tauler-triangle {
    position: relative;
    flex-shrink: 0;
}
.dibuix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.quadricula {
    fill: none;
    stroke: var(--gris);
    stroke-width: calc(0.3 / var(--k));
    stroke-dasharray: calc(1.4 / var(--k)) calc(1.1 / var(--k));
}
.triangle {
    fill: none;
}
.costats {
    fill: none;
    stroke: var(--tinta);
    stroke-width: calc(0.8 / var(--k));
    stroke-linecap: round;
    stroke-linejoin: round;
}
.guia {
    display: none;
}

/* ---- Les marques de les propietats (instruccions): escaire, ratlletes, fletxetes ---- */
.calcul .marca {
    fill: none;
    stroke: var(--tinta);
    stroke-width: calc(0.35 / var(--k));
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Un punt: negre; el triat (instruccions) amb una anella, com al PDF de solucions ---- */
.punt {
    position: absolute;
    border-radius: 50%;
    background: var(--tinta);
}
.punt.triat::after {
    content: '';
    position: absolute;
    inset: -70%;
    border-radius: 50%;
    border: 0.35mm solid var(--tinta);
}

/* ---- Fulls de problemes: la figura al costat del número, i la quadrícula centrada ---- */
.problemes {
    align-items: stretch;
}
.problema {
    position: relative;
    justify-content: flex-start;
}
.figura-full {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nom-figura {
    position: absolute;
    top: 0;
    left: 11mm; /* just a la dreta del número del problema */
    height: 8mm;
    padding: 0 2.5mm;
    display: flex;
    align-items: center;
    border: 0.45mm solid var(--tinta);
    border-radius: 1.5mm;
    font-size: 12.5pt;
    font-weight: 800;
}

/* ---- Full d'instruccions ---- */
.mida-instr .fila {
    gap: 9mm;
}
.compte {
    margin: 0 0 2mm 0;
    text-align: center;
}
.figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3mm 2mm;
    justify-items: center;
}
.figures figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2mm;
}
.figures figcaption {
    font-size: 8.5pt;
    line-height: 1.3;
    text-align: center;
}
.figures .nota {
    align-self: center;
    margin: 0;
    font-size: 8.5pt;
    line-height: 1.4;
}