/* One stylesheet, served with a content hash in its name so it can be cached
   forever and still never be stale.

   No JavaScript anywhere in this application, so no styling depends on it. The
   Content-Security-Policy says script-src 'none', which means a script added
   later breaks the page loudly instead of quietly becoming a dependency — and a
   dependency is exactly what would put a credential where a browser could read
   it. */

:root {
	--ink: #14202e;
	--ink-soft: #4a5a6d;
	--rule: #d8e0e8;
	--paper: #ffffff;
	--wash: #f5f8fa;
	--accent: #0b4f8a;
	--warn-bg: #fff8e6;
	--warn-rule: #e3c56a;

	/* 🔴 An ALERT surface is not the page's surface, so it must carry its own
	   ink. These three move together and are defined in BOTH colour schemes —
	   .notice-warn once hardcoded this background and set no colour at all, so
	   in dark mode it rendered near-white text on a near-white pink and the
	   confirmation before issuing an invoice was unreadable. A token cannot
	   half-exist the way a hardcoded pair can. */
	--alert-bg: #fdecec;
	--alert-rule: #e0a0a0;
	--alert-ink: #7d1f1f;
	--info-bg: #eaf3fb;
	--info-rule: #a8c8e6;

	/* 🔴 A SETTLED surface, for a notice that needs no action from the reader.
	   Defined in BOTH colour schemes for the reason --alert-* carries: a
	   hardcoded pair can half-exist, a token cannot. */
	--ok-bg: #e8f6ed;
	--ok-rule: #9fd3b4;
	--ok-ink: #14512f;
	--info-ink: #10456f;
}

*, *::before, *::after { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--wash);
	color: var(--ink);
	font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

.wrap {
	max-width: 44rem;
	margin: 0 auto;
	padding: 2rem 1.25rem 4rem;
}

header.masthead {
	border-bottom: 1px solid var(--rule);
	background: var(--paper);
}
header.masthead .wrap {
	padding: 1rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	align-items: baseline;
	justify-content: space-between;
}
.brand { font-weight: 650; letter-spacing: -0.01em; }
.brand span { font-weight: 400; color: var(--ink-soft); }

main { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; }
main .wrap { padding: 2rem 1.5rem; }

h1 { font-size: 1.5rem; line-height: 1.25; margin: 0 0 0.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1rem; margin: 2rem 0 0.4rem; }
p { margin: 0 0 1rem; }
p.lead { font-size: 1.075rem; color: var(--ink-soft); }

a { color: var(--accent); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.notice {
	background: var(--warn-bg);
	border: 1px solid var(--warn-rule);
	border-radius: 8px;
	padding: 0.9rem 1rem;
	margin: 1.5rem 0 0;
}
.notice h2 { margin-top: 0; }
.notice p:last-child { margin-bottom: 0; }

footer { color: var(--ink-soft); font-size: 0.9rem; }
footer .wrap { padding-top: 1.5rem; }

@media (prefers-color-scheme: dark) {
	:root {
		--ink: #e6edf3;
		--ink-soft: #9fb0c0;
		--rule: #2a3844;
		--ok-bg: #17301f;
		--ok-rule: #2f6b45;
		--ok-ink: #a8e6c1;
		--paper: #131b23;
		--wash: #0d141a;
		--accent: #7cb8f0;
		--warn-bg: #2b2410;
		--warn-rule: #6b5a20;
		--alert-bg: #3a1c1c;
		--alert-rule: #7d3535;
		--alert-ink: #f3c9c9;
		--info-bg: #16283a;
		--info-rule: #2f5b85;
		--info-ink: #cde3f7;
	}
}

/* Forms. No JavaScript, so validation is the browser's and the server's. */
label { display: block; margin: 1rem 0 0.25rem; font-weight: 600; font-size: 0.9rem; }
/* 🔴 A TEXTAREA IS STYLED WITH THE TEXT INPUTS, NOT AFTER THEM. Item 5.
   The sheet had no textarea rule at all, so the one field that used one rendered
   in the browser's monospace default at its own size for a day — a regression
   nothing could catch, because an unstyled field still posts its value. Sharing
   the selector is the fix: the next textarea anybody adds is styled on the day
   it is added, and `font: inherit` below is the declaration that matters. */
input[type="text"], input[type="email"], input[type="password"], textarea {
	width: 100%;
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--rule);
	border-radius: 6px;
	background: var(--paper);
	color: var(--ink);
	font: inherit;
}
input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea { min-height: 6rem; resize: vertical; }
button {
	margin-top: 1.5rem;
	padding: 0.6rem 1.1rem;
	border: 1px solid transparent;
	border-radius: 6px;
	background: var(--accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
form.inline button { background: transparent; color: var(--accent); border-color: var(--rule); }
p.hint { color: var(--ink-soft); font-size: 0.85rem; margin: 0.3rem 0 0; }
p.ok { color: #1c6b3a; font-weight: 600; }

.flash { padding: 0.7rem 0.9rem; border-radius: 6px; margin: 0 0 1rem; }
.flash-error { background: var(--alert-bg); border: 1px solid var(--alert-rule); color: var(--alert-ink); }
.flash-notice { background: var(--info-bg); border: 1px solid var(--info-rule); color: var(--info-ink); }
.notice-warn { background: var(--alert-bg); border-color: var(--alert-rule); color: var(--alert-ink); }

/* 🔴 GREEN MEANS "NOTHING FOR YOU TO DO", NOT "FINISHED".
   Two notices wear it: the Colaborador Social wait, where the blocker is ours
   and the customer has no move to make, and a completed otorgamiento. ⚠️ It is
   deliberately NOT worn by the cannot-file notice's other two cases — one asks
   for a certificate and one asks somebody to press a retry button, and a green
   box is what stops a person pressing it. See cannotFileKey. */
.notice-ok { background: var(--ok-bg); border-color: var(--ok-rule); color: var(--ok-ink); }

/* The status line at the foot of such a notice. Small, and last, so it reads as
   a footnote to the explanation rather than as a competing headline. */
p.status { margin: 0.7rem 0 0; font-size: 0.85rem; font-weight: 600; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; }

/* The declaración responsable, shown VERBATIM.
 *
 * 🔴 Monospace and pre-wrap because the bytes on screen are the bytes retained
 * under RD 1007/2023 art. 13.3 — nothing here reflows or reinterprets the
 * document, it only makes it readable. `pre-wrap` rather than plain `pre` so a
 * long line wraps instead of scrolling the page sideways on a phone; overflow-x
 * catches the pipe tables, which must NOT wrap or they stop being tables.
 *
 * It reads the same --paper/--ink tokens as everything else, so it cannot come
 * apart in dark mode the way a hardcoded colour would. */
pre.doc {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.82rem;
	line-height: 1.5;
	white-space: pre-wrap;
	overflow-x: auto;
	background: var(--paper-soft, var(--paper));
	color: var(--ink);
	border: 1px solid var(--rule);
	border-radius: 6px;
	padding: 1rem;
	margin: 0 0 1.5rem;
}

@media (prefers-color-scheme: dark) {
	/* .flash-error, .flash-notice and .notice-warn need no override: they read
	   --alert-* and --info-*, which the :root block above redefines. That is the
	   point of the tokens — a surface and its ink cannot come apart. */
	p.ok { color: #7fd6a0; }
}

/* A value shown but not editable. It is NOT a disabled input: a disabled field
   looks like something that might become editable, while this never will —
   the name is VerifactuCloud's and the NIF keys the huella chain. */
p.readonly {
	margin: 0;
	padding: 0.55rem 0.65rem;
	border: 1px solid var(--rule);
	border-radius: 6px;
	background: var(--wash);
	font-weight: 600;
}

/* The main menu. Sections of links, with the items that do not exist yet shown
   rather than hidden — see account.html.tmpl for why. */
ul.menu { list-style: none; padding: 0; margin: 0.5rem 0 1.5rem; }
ul.menu li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
ul.menu li:last-child { border-bottom: 0; }
ul.menu a { font-weight: 600; }

/* 🔴 An unavailable item must READ as unavailable without relying on colour
   alone — colour is not information for everybody. It is not a link, so it has
   no pointer and no underline, and it carries its reason in words beside it. */
ul.menu .unavailable { color: var(--ink-soft); font-weight: 600; cursor: default; }
ul.menu .hint { display: inline; margin-left: 0.5rem; }

/* Lists and detail tables. */
table.list, table.detail { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
table.list th, table.list td, table.detail th, table.detail td {
	text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule);
}
table.list thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); }
table.detail th { width: 12rem; color: var(--ink-soft); font-weight: 600; }
td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* 🔴 ROW ACTIONS ARE NOT PAGE ACTIONS, AND THE DEFAULT BUTTON IS A PAGE ACTION.
   `button` carries margin-top: 1.5rem and 0.6rem/1.1rem padding because it is
   shaped for the one big submit at the end of a form. Two of those inside a table
   cell inherit the margin, stack vertically because a <form> is block-level, and
   push the row apart — which is exactly what they did.

   ⚠️ NOT `.actions`, which is already the flex row at the foot of the issue page.
   One class, one meaning. */
td.rowactions { white-space: nowrap; }
td.rowactions form.inline { display: inline-block; margin: 0; }
td.rowactions form.inline + form.inline { margin-left: 0.4rem; }
td.rowactions button { margin-top: 0; padding: 0.25rem 0.6rem; font-size: 0.85rem; font-weight: 500; }

.state { display: inline-block; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; }
.state-settled { background: #dff3e6; color: #17603a; }
.state-pending { background: #e6eefb; color: #14457c; }
.state-attention { background: #fdecec; color: #7d1f1f; }
.tag { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; background: var(--warn-bg); border: 1px solid var(--warn-rule); border-radius: 4px; padding: 0 0.3rem; }

a.button-link {
	display: inline-block; margin-top: 0.5rem; padding: 0.5rem 0.9rem;
	border: 1px solid var(--rule); border-radius: 6px; text-decoration: none; font-weight: 600;
}
select { padding: 0.5rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; }
details { margin-top: 1rem; border: 1px solid var(--rule); border-radius: 6px; padding: 0.6rem 0.9rem; }
summary { cursor: pointer; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; margin-top: 2rem;
	border-top: 1px solid var(--rule); padding-top: 1rem; }
.actions form.issue button { background: #8a2b2b; }
button:disabled { background: var(--rule); color: var(--ink-soft); cursor: not-allowed; }

@media (prefers-color-scheme: dark) {
	.state-settled { background: #16351f; color: #8fdcaa; }
	.state-pending { background: #16283a; color: #a8cdf2; }
	.state-attention { background: #3a1c1c; color: #f0b4b4; }
}

/* A draft's reference. 🔴 Deliberately muted and monospaced so it reads as an
   internal handle, never as an invoice number — a draft HAS no invoice number,
   because one is allocated at issue and a number allocated to something never
   issued is a gap in the series with nothing behind it. */
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--ink-soft); font-weight: 400; }
h1 .ref { font-size: 0.7em; }
p.actions-inline { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }

/* The country-code reference, opened by the "?" beside the field.
   🔴 :target, because there is no JavaScript. `<dialog>` needs showModal(), a
   script call, and `script-src 'none'` is a header here — a <dialog> would sit
   permanently hidden and nothing would report it. */
.helplink {
	display: inline-block;
	min-width: 1.4em;
	padding: 0 0.35em;
	margin-left: 0.4em;
	border: 1px solid var(--rule);
	border-radius: 999px;
	font-size: 0.85em;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
}
.sheet { display: none; }
.sheet:target {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 10;
	overflow-y: auto;
	/* ⚠️ An opaque backdrop, not a translucent one: the page underneath is a
	   half-filled form and showing it through the list makes both unreadable. */
	background: var(--paper);
	color: var(--ink);
	padding: 1rem;
}
.sheet-inner { max-width: 40rem; margin: 0 auto; }
.sheet-close {
	float: right;
	font-size: 1.6rem;
	line-height: 1;
	text-decoration: none;
}
/* Two columns where there is room; one on a phone. */
.codes {
	columns: 2;
	column-gap: 2rem;
	list-style: none;
	padding: 0;
}
.codes li { break-inside: avoid; margin: 0 0 0.2rem; }
.codes code { margin-right: 0.4em; }
@media (max-width: 30rem) { .codes { columns: 1; } }

/* The team list: one person per row, with what they are and what may be done.
   ⚠️ The `rowactions` rules above are scoped to `td` — this list is a <ul>, so
   it needs its own, or the buttons render full-width and stacked. */
li.rowitem { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: space-between; }
li.rowitem .rowactions form.inline { display: inline-block; margin: 0; }
li.rowitem .rowactions form.inline + form.inline { margin-left: 0.4rem; }
li.rowitem .rowactions button { margin-top: 0; padding: 0.25rem 0.6rem; font-size: 0.85rem; font-weight: 500; }

/* What somebody is on this account. 🔴 Both variants carry their own ink, for
   the reason --alert-* does: a surface and its text cannot come apart. */
.badge {
	display: inline-block;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
	background: var(--info-bg);
	color: var(--info-ink);
	border: 1px solid var(--info-rule);
}
.badge-quiet { background: var(--wash); color: var(--ink-soft); border-color: var(--rule); }