/*
 * Legacy receipt table styling — ported from `recibo.css`
 * (Migracion-Intranet's recibo3.php, design ADR-3), scoped under
 * `.recibo-legacy` so nothing bleeds into the rest of the app.
 *
 * Loaded for screen AND print — preview and print share the same HTML and
 * CSS (design ADR-3/ADR-5's whole point), so nothing here lives inside an
 * `@media print` block.
 *
 * Legacy id -> class mapping. The legacy markup was DOM-filled by jQuery, so
 * every field had an id as a JS hook; a server-rendered template with no
 * client-side DOM manipulation needs ids only where the legacy CSS actually
 * targeted one:
 *   #tdDescripcion       -> .td-descripcion
 *   #tdCargoDenominacion -> .td-cargo-denominacion
 *   #tesorero            -> .tesorero
 *   #firma                -> .firma (nested under .tesorero)
 * All other legacy ids (#tdRecibo, #tdNombre, #tdAgrupamiento, etc.) had no
 * CSS rule of their own and are dropped.
 *
 * The legacy stylesheet's important-priority overrides are dropped
 * throughout (design ADR-3): they existed only to beat Bootstrap's global
 * `td` rules, which do not exist here. Scoping under `.recibo-legacy`
 * already gives these rules enough specificity to win on their own.
 *
 * `print-color-adjust: exact` on `.fila-encabezado` and `.gris` is a
 * deliberate DEVIATION from the legacy stylesheet (design ADR-3, R-D2):
 * Chrome does not print background colors by default, and the grey banding
 * IS visible in the reference PDFs, so this is added here to reproduce the
 * observed output, not to modernize it.
 */

/*
 * White receipt surface (legacy `#principal` parity — bugfix, post-visual-
 * verification). The container's own background must be explicit, not
 * transparent: on screen it currently sits over the portal shell's gradient
 * `body` background (`layout.ejs`); `print.css` neutralizes that gradient at
 * the body level for print, but a transparent container still shows
 * whatever is painted behind it either way. Legacy (`recibo.css`) sets white
 * explicitly in three places for exactly this reason — `#principal`,
 * `#tdDescripcion`, `#tesorero`. `.td-descripcion` and `.tesorero` already
 * carry `background: white` below (ported 1:1 in Slice 3); this rule covers
 * the third and outermost one, `#principal`'s role — the overall surface,
 * which Slice 3 missed.
 *
 * Applied unscoped (screen AND print), not inside `@media print`, per D2:
 * preview and print share the same HTML and CSS, so the receipt is white on
 * both — matching how legacy's `#principal { background: white }` was never
 * print-scoped either. The grey rows (`.fila-encabezado`, `.gris` below) are
 * more specific (two classes vs. one) and still win over this.
 */
.recibo-legacy {
  background: white;
}

/*
 * Collapsed borders (legacy parity). The legacy markup got this from
 * `cellspacing="0"` plus Bootstrap's reboot; the markup here keeps
 * `cellspacing="0"`, but this app has no reboot of its own. Without this rule
 * the table renders collapsed ONLY because the Tailwind CDN's preflight
 * happens to supply `border-collapse: collapse` at runtime — so a blocked or
 * slow CDN on the municipal intranet would print this fidelity-critical
 * document with doubled borders. Per ADR-3 the receipt's styling is
 * self-contained: it owns this rule rather than inheriting it from a
 * third-party network dependency.
 */
.recibo-legacy table {
  border-collapse: collapse;
}

.recibo-legacy td {
  border: 1px solid #444;
  text-align: center;
}

.recibo-legacy .encabezadoMuni {
  color: #999;
  opacity: 0.9;
  font-family: Arial, sans-serif;
  font-size: 14px;
  text-align: center;
  font-weight: bold;
  padding: 7px;
}

.recibo-legacy .fila-encabezado {
  background-color: #CDCDCD;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.recibo-legacy .fila-detalle {
  font-weight: bold;
}

.recibo-legacy .td-descripcion {
  font-weight: bold;
  background: white;
  width: 110px;
}

.recibo-legacy .td-cargo-denominacion {
  width: 90px;
}

/*
 * The treasurer block is a fixed-width (120px) BLOCK box, so the cell's
 * `text-align: center` does not centre it — that centres inline content only.
 * Without the auto side margins it parks against the cell's left border
 * (browser-measured under print emulation: 120px block in a 166.2px cell,
 * gapLeft 0.5 / gapRight 45.7; with them, 23.1 / 23.1). The signature name and
 * role underneath were never misaligned in themselves — they are correctly
 * centred INSIDE this block and simply drifted with it.
 */
/*
 * `padding-top` clears the cell's top border. The block's own height defines
 * the cell's, so there is no slack for the cell's `vertical-align: middle` to
 * distribute: the signature landed 0.5px below a 1px border, i.e. drawn over
 * the rule, and its tall ascender printed cut. The padding grows the cell by
 * exactly its value (browser-measured under print emulation: 145.7px -> 155.7px,
 * top gap 0.5px -> 10.5px). The legacy stylesheet has no equivalent rule — its
 * signature was injected into an inline context that supplied leading of its
 * own. Fidelity here is to the printed artifact, not to the legacy CSS.
 */
.recibo-legacy .tesorero {
  width: 120px;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  background: white;
  font-size: 10px;
  font-weight: bold;
}

.recibo-legacy .tesorero .firma {
  width: 100px;
}

.recibo-legacy .gris {
  background: #CDCDCD;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.recibo-legacy .strong {
  font-weight: bold;
}

.recibo-legacy .text-right {
  text-align: right;
}

.recibo-legacy .text-left {
  text-align: left;
}

/*
 * `display: inline` is LOAD-BEARING — do not delete it as redundant.
 *
 * It deliberately undoes Tailwind's preflight `img { display: block }`. The
 * legacy ran on Bootstrap, which leaves images inline, so the cells' own
 * `text-align: center` centred the escudo and the signature for free. Under
 * a block-display image that centring silently stops applying (text-align
 * centres inline content, not block boxes) and the image parks against the
 * cell's left border — browser-measured under print emulation: the 50px
 * escudo in a 118.4px cell sat at gapLeft 0.5 / gapRight 67.9; restoring
 * inline gives 34.2 / 34.2.
 *
 * `max-width: 100%` is the legacy rule (recibo.css:1), kept as-is.
 */
.recibo-legacy img {
  display: inline;
  max-width: 100%;
}