/* ============================================================================
   Invoice document — brandguidelinesupdated.md §1 (palette), §2 (logo),
   §3 (typography), §4 (document mapping).

   Mirrors the letterhead pattern proven in ahimismito-docx-kit.js: logo,
   Verde Neón hairline, then real white space before the content begins.

   Governing rule on white: NEGRO SOBRE BLANCO.
   Verde Neón is a FILL or a HAIRLINE. It never carries text on white.
   ========================================================================= */

/* §3 — Helvetica must be SERVED, not assumed. Windows ships no Helvetica and
   Cloudflare's headless-Chrome container has neither Helvetica nor Arial, so
   without these files the PDF silently renders in a generic sans.
   Drop the TTFs from Drive FUENTES/ into public/fonts/ — see fonts/README.txt. */
@font-face {
  font-family: "Ahimismito Helvetica";
  src: url("/fonts/helvetica-light.ttf") format("truetype");
  font-weight: 300; font-display: swap;
}
@font-face {
  font-family: "Ahimismito Helvetica";
  src: url("/fonts/helvetica-regular.ttf") format("truetype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Ahimismito Helvetica";
  src: url("/fonts/helvetica-bold.ttf") format("truetype");
  font-weight: 700; font-display: swap;
}

:root {
  /* §1 — five colours, nothing else. Manual values, not sampled artwork. */
  --ink:     #111111;  /* Negro Carbón */
  --lime:    #CCFF00;  /* Verde Neón   — fills and hairlines only */
  --niebla:  #F5F7FA;  /* Gris Niebla  — alternating rows, light surfaces */
  --soporte: #DDE3EA;  /* Gris Soporte — hairline borders */
  --paper:   #FFFFFF;  /* Blanco */

  --meta: #4F4F4F;     /* derived tint — secondary labels and footnotes ONLY */

  --font: "Ahimismito Helvetica", Helvetica, Arial, sans-serif;
}

.sheet {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  padding: 56px 60px 40px;
  box-shadow: 0 2px 24px rgba(0, 0, 0, .1);
  min-height: 1000px;
  display: flex;
  flex-direction: column;
}

/* ── Letterhead (§2, §4) ──────────────────────────────────────────────────
   Horizontal imagotipo. Sized by HEIGHT so any correctly-trimmed artwork
   keeps its aspect ratio. At 52px tall the AR-2.776 mark is ~144px wide,
   comfortably over the 120px digital minimum and matching the 135x49
   letterhead figure used in the docx kit.
   Padding below the mark is the §2 clear-space rule: 1x, where the full
   logo height is 6x.                                                        */
.letterhead {
  padding-bottom: 14px;
  border-bottom: 1.5px solid var(--lime);
  margin-bottom: 42px;
}
.logo-box { display: block; height: 52px; }
.logo-box img { height: 100%; width: auto; display: block; }

/* ── Type scale (§3) ──────────────────────────────────────────────────────
   Título 40–64px / 90–110% · Subtítulo 24–32px / 110–125%
   Cuerpo 12–14px / 130–150% · Notas 12–14px
   Three weights maximum in one composition: 300 / 400 / 700.               */
.doc-title {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -.02em;   /* §3 tracking −2% to +2% */
  margin: 0 0 10px;
}
.doc-sub {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.2;
  color: var(--meta);
  margin: 0 0 34px;
}

.rule { border-top: 1.5px solid var(--lime); margin: 22px 0; }

/* ── Meta block ───────────────────────────────────────────────────────────*/
.meta { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; padding: 2px 2px 6px; }
.meta dl { margin: 0; display: grid; grid-template-columns: 84px 1fr; row-gap: 8px; }
.meta dt { font-weight: 700; font-size: 13px; line-height: 1.4; }
.meta dd { margin: 0; font-size: 13px; line-height: 1.4; }
.bill h3 { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.bill p { margin: 0 0 5px; font-size: 13px; line-height: 1.4; }

/* ── Tables (§4) ──────────────────────────────────────────────────────────*/
.sheet table { width: 100%; border-collapse: collapse; }

/* Header row — BLANCO SOBRE NEGRO. */
.sheet thead th {
  background: var(--ink);
  color: var(--paper);
  font-size: 12px;
  font-weight: 700;
  text-align: left;
  letter-spacing: .01em;
  padding: 12px 14px;
}
.sheet thead th:last-child { text-align: right; }

.sheet tbody td {
  padding: 13px 14px;
  font-size: 13px;
  line-height: 1.4;              /* §3 cuerpo 130–150% */
  vertical-align: top;
  border-top: 1px solid var(--soporte);
}
.sheet tbody tr:first-child td { border-top: 0; }
.sheet tbody td:last-child { text-align: right; white-space: nowrap; }

/* Alternating rows — Gris Niebla. */
.sheet tbody tr.item:nth-of-type(even) td { background: var(--niebla); }

/* Secondary / deposit band — Gris Niebla, explicitly. */
.sheet tbody tr.highlight td { background: var(--niebla); }

/* Totals row — NEGRO SOBRE VERDE NEÓN. §4: fill Verde Neón, text Negro bold. */
.sheet tbody tr.due td {
  background: var(--lime);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  border-top: 0;
}
.sheet tbody tr.due td:last-child { color: var(--ink); }

.table-cap { border-bottom: 1.5px solid var(--lime); }

/* ── Blocks ───────────────────────────────────────────────────────────────*/
.block { margin-top: 28px; }
.block h4 { font-size: 13px; font-weight: 700; margin: 0 0 8px; }
.block p { margin: 0 0 5px; font-size: 13px; line-height: 1.5; }
.note p { color: var(--meta); font-weight: 300; font-style: italic; }
.pay strong { display: block; margin-top: 4px; font-weight: 700; }

.thanks {
  text-align: center; color: var(--meta); font-weight: 300;
  font-style: italic; font-size: 13px; margin: 48px 0 0;
}
.foot {
  text-align: center; color: var(--meta); font-weight: 300;
  font-size: 11px; margin-top: auto; padding-top: 60px;
}

@media (max-width: 900px) {
  .sheet { padding: 32px 24px; min-height: 0; }
  .doc-title { font-size: 32px; }
  .letterhead { margin-bottom: 28px; }
}