/*
============================================================================
FITXER: css/imprimir-diposits-aigua.css
ROL: Els dipòsits de «Dipòsits d'aigua» en paper: les vores gruixudes dels
     dipòsits, les marques ben negres (s'hi dibuixa el nivell de l'aigua amb el
     retolador) i els totals amb fletxa en negreta.
ARQUITECTURA: Fa servir el mateix DOM que el joc (TaulerDiposits), però amb
     mides en mm: --k (el posa js/diposits-aigua/imprimir.js) són els mm d'una
     unitat del tauler; un cub fa 100 unitats. Només blanc, negre i gris fosc
     (impressora en B/N): l'aigua de les instruccions, ratllada en diagonal.
DEPENDÈNCIES: css/imprimir.css (s'ha de carregar abans).
============================================================================
*/
figure {
    margin: 0;
}

/* ---- El tauler ---- */
.tauler-diposits {
    position: relative;
    flex-shrink: 0;
}
.dibuix {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}
.fines {
    fill: none;
    stroke: var(--gris);
    stroke-width: calc(0.25 / var(--k));
}
.marques {
    fill: none;
    stroke: var(--tinta);
    stroke-width: calc(0.35 / var(--k));
}
.vora {
    fill: none;
    stroke: var(--tinta);
    stroke-width: calc(1 / var(--k));
    stroke-linejoin: round;
}
/* L'aigua (instruccions): ratllada en diagonal, amb la superfície marcada */
.aigua rect {
    fill: url(#aigua-ratllada);
    stroke: var(--tinta);
    stroke-width: calc(0.3 / var(--k));
}
.ratlla {
    stroke: var(--gris);
    stroke-width: 1.6;
}
.quantitats text {
    font-family: Inter, 'Segoe UI', Arial, sans-serif;
    font-size: 22px;
    font-weight: 800;
    fill: var(--tinta);
    stroke: white;
    stroke-width: 6;
    stroke-linejoin: round;
    paint-order: stroke;
}
.total text {
    font-family: Inter, 'Segoe UI', Arial, sans-serif;
    font-size: 32px;
    font-weight: 800;
    fill: var(--tinta);
}
.total .fletxa {
    stroke: var(--tinta);
    stroke-width: 6;
}
.total .punta {
    fill: var(--tinta);
}
.capa-diposit {
    position: absolute;
}

/* ---- Fulls de problemes: el tauler centrat a la targeta ---- */
.problemes {
    align-items: stretch;
}
.problema {
    justify-content: flex-start;
}
.problema .tauler-diposits {
    margin: auto 0;
}
.quatre-per-full .problemes {
    grid-template-rows: repeat(2, 1fr);
}

/* ---- Full d'instruccions ---- */
.intro {
    margin: 0 0 1.5mm 0;
    font-size: 12.5pt;
}
.mida-instr .fila {
    gap: 7mm;
    align-items: flex-end;
}
.mida-instr .fila figcaption {
    max-width: 52mm;
}
.text {
    max-width: 80mm;
    margin: 0;
    font-size: 11pt;
    line-height: 1.45;
    align-self: center;
}