/* Portal de facturación — hoja de estilos única (#877, recomposición #879, V1.1 #881). Sin recursos externos; un único script
   local de mejora progresiva (D-281) que no cambia ninguna regla de esta hoja.
   Dirección gráfica del proyecto (B · Mesa, #660 Lot 1) : papel/arena, tinta, caqui, Funnel Display/Sans, Fragment Mono ;
   cuerpo a 14 px, jerarquía por grosor, posición y filetes — nunca por el color solo. Un estado se lee por una PALABRA y
   una FORMA. Las secciones plegables son `<details>` nativos. */
@font-face { font-family: "Fragment Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/FragmentMono-Regular-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fragment Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/FragmentMono-Regular-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/FunnelDisplay-Variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Display"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("fonts/FunnelDisplay-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/FunnelSans-Variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/FunnelSans-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Funnel Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/FunnelSans-Italic-Variable-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Funnel Sans"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/FunnelSans-Italic-Variable-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light;
  --arena: oklch(0.958 0.014 72); --arena-2: oklch(0.933 0.018 70); --papel: oklch(0.994 0.004 85); --papel-2: oklch(0.985 0.005 80); --margin: oklch(0.975 0.008 75);
  --tinta: oklch(0.29 0.075 258); --tinta-2: oklch(0.23 0.06 258); --tinta-80: oklch(0.42 0.05 258); --tinta-60: oklch(0.49 0.04 258); --tinta-40: oklch(0.70 0.02 258);
  --rule: oklch(0.29 0.075 258 / 0.12); --rule-2: oklch(0.29 0.075 258 / 0.22);
  --caqui: oklch(0.665 0.17 40); --caqui-ink: oklch(0.50 0.15 38);
  --st-info: oklch(0.48 0.09 245); --st-info-t: oklch(0.95 0.02 245);
  --st-ok: oklch(0.49 0.11 155); --st-ok-t: oklch(0.95 0.035 155);
  --st-warn: oklch(0.52 0.11 62); --st-warn-t: oklch(0.955 0.04 75);
  --st-block: oklch(0.48 0.17 20); --st-block-t: oklch(0.95 0.03 20);
  --hatch: repeating-linear-gradient(-45deg, oklch(0.29 0.075 258 / 0.16) 0 1.5px, transparent 1.5px 6px);
  --f-d: "Funnel Display", ui-sans-serif, system-ui, sans-serif; --f-t: "Funnel Sans", ui-sans-serif, system-ui, sans-serif; --f-m: "Fragment Mono", ui-monospace, monospace;
  --r-1: 3px; --r-2: 5px; --r-3: 8px;
  --w: 1160px;
}

/* ── Base ─────────────────────────────────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--arena); color: var(--tinta); font: 400 14px/1.5 var(--f-t); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--f-d); letter-spacing: -0.01em; margin: 0; color: var(--tinta); overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-size: 20px; line-height: 1.2; letter-spacing: -0.018em; }
h2 { font-size: 15px; line-height: 1.3; }
h3 { font-size: 13.5px; line-height: 1.3; }
p { margin: 0 0 8px; text-wrap: pretty; }
ul, ol { margin: 0 0 8px; padding-left: 18px; }
a { color: var(--tinta); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--caqui-ink); }
code, .mono { font-family: var(--f-m); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.mono { font-size: 0.93em; }
code { font-size: 0.86em; color: var(--tinta-80); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; min-inline-size: 0; }
legend { padding: 0; }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
:focus-visible { outline: 2px solid var(--caqui); outline-offset: 2px; border-radius: var(--r-1); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--tinta); color: var(--papel); border-radius: var(--r-2); font-weight: 600; text-decoration: none; }
.skip:focus { top: 8px; color: var(--papel); }
.muted { color: var(--tinta-60); }
.optional { color: var(--tinta-60); font-weight: 400; }
.note { font-size: 12.5px; color: var(--tinta-80); }
.help { margin: 4px 0 0; font-size: 12.5px; color: var(--tinta-60); }
.ey { margin: 0 0 4px; font: 500 11px var(--f-m); letter-spacing: 0.04em; color: var(--tinta-60); }
.lead { margin: 4px 0 0; max-width: 72ch; font-size: 12.5px; color: var(--tinta-80); }
.plain-list { margin: 0; padding-left: 18px; }
.plain-list li { margin: 0 0 3px; }

/* ── Marcado sintético y banda de entorno ─────────────────────────────────────────────────────────────── */
.band { background: oklch(0.975 0.008 75); border-bottom: 1px solid var(--tinta); }
/* Passe 1 : le texte est posé sur un fond PLEIN ; les hachures ne sont plus qu'un liseré au-dessus. */
.band::before { content: ""; display: block; height: 5px; background: var(--hatch); border-bottom: 1px solid var(--rule-2); }
.band__inner { max-width: var(--w); margin: 0 auto; padding: 5px 16px; display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: 11.5px; color: var(--tinta-80); }
.band p { margin: 0; }
.band__text { display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--f-d); color: var(--tinta); }
.band__mark { font-size: 11.5px; }
.band__text::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--tinta); transform: rotate(45deg); }
.band__gloss { color: var(--tinta-80); }
.marking { display: inline-block; max-width: 100%; min-width: 0; min-height: 22px; overflow-wrap: anywhere; margin: 0; padding: 2px 8px; border: 1px solid var(--tinta); border-radius: 2px; background: var(--hatch), var(--papel); font: 500 10.5px/1.3 var(--f-m); letter-spacing: 0.03em; color: var(--tinta); }
.marking::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 7px 1px 0; vertical-align: middle; background: var(--tinta); transform: rotate(45deg); }
.marking__gloss { font-family: var(--f-t); letter-spacing: 0; font-weight: 400; color: var(--tinta-80); }

/* ── Cabecera (#983, X-26) : dos líneas — marca, navegación y cuenta ; emisor activo y « Nueva factura » ─────────────────────── */
.top { position: relative; z-index: 20; background: var(--papel); border-bottom: 1px solid var(--rule-2); }
.top__inner { position: relative; max-width: var(--w); margin: 0 auto; padding: 0 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; min-height: 48px; }
.top--plain .top__inner { justify-content: space-between; min-height: 52px; }
.brand { display: flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; font: 600 14px/1.2 var(--f-d); color: var(--tinta); text-decoration: none; white-space: nowrap; }
a.brand:hover { color: var(--tinta); }
.brand__mark { flex: none; }
.brand__mark rect { fill: var(--tinta); }
.brand__mark path { fill: var(--caqui); }
.brand__org { font: 400 11.5px var(--f-t); color: var(--tinta-60); white-space: normal; }
.menu { position: relative; }
.menu__btn { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--r-2); color: var(--tinta); font: 600 13px/1.25 var(--f-t); }
.menu__btn:hover, .menu[open] > .menu__btn { background: var(--arena); border-color: var(--rule-2); }
.menu > .menu__btn::after { content: ""; flex: none; width: 6px; height: 6px; margin-left: 2px; border-right: 1.5px solid var(--tinta-60); border-bottom: 1.5px solid var(--tinta-60); transform: translateY(-2px) rotate(45deg); }
.menu[open] > .menu__btn::after { transform: translateY(1px) rotate(-135deg); }
.menu__icon { flex: none; fill: var(--tinta); }
.menu__label { overflow-wrap: anywhere; }
.menu--nav { flex: 1 1 0; min-width: 0; }
.menu--nav > .menu__btn { display: none; }
.menu--user { margin-left: auto; }
.menu__panel { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; width: min(340px, calc(100vw - 32px)); padding: 12px 14px; background: var(--papel); border: 1px solid var(--tinta-40); border-radius: var(--r-2); box-shadow: 0 8px 22px oklch(0.29 0.075 258 / 0.16); }
.menu__panel--end { left: auto; right: 0; width: min(280px, calc(100vw - 32px)); }
.menu__title { margin: 0 0 2px; font: 500 11px var(--f-m); letter-spacing: 0.03em; color: var(--tinta-60); }
.menu__name { margin: 0 0 2px; font: 600 14px/1.3 var(--f-d); overflow-wrap: anywhere; }
.menu__meta { margin: 0 0 8px; font-size: 12px; color: var(--tinta-80); overflow-wrap: anywhere; }
.menu__list { list-style: none; margin: 0; padding: 8px 0 0; border-top: 1px solid var(--rule); }
.menu__list a { display: flex; align-items: center; min-height: 40px; padding: 0 6px; margin: 0 -6px; border-radius: var(--r-1); font-size: 13px; font-weight: 500; text-decoration: none; }
.menu__list a:hover { background: var(--arena); color: var(--tinta); }
.menu__panel form { margin: 8px 0 0; }
.menu__out { margin-top: 8px !important; padding-top: 10px; border-top: 1px solid var(--rule); }
.menu--user .menu__list { margin-top: 6px; }
.menu__list a[aria-current="page"] { font-weight: 600; box-shadow: inset 2px 0 0 var(--caqui); }
.nav { margin: 0; }
.nav__list { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0 2px; }
.nav__list a { display: flex; align-items: center; height: 46px; padding: 0 10px; border-bottom: 2px solid transparent; font-size: 13px; font-weight: 500; color: var(--tinta-80); text-decoration: none; white-space: nowrap; }
.nav__list a:hover { color: var(--tinta); border-bottom-color: var(--rule-2); }
.nav__list a[aria-current="page"] { color: var(--tinta); font-weight: 600; border-bottom-color: var(--caqui); }
.ctx { border-top: 1px solid var(--rule); background: var(--margin); }
.ctx__inner { position: relative; max-width: var(--w); margin: 0 auto; padding: 4px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; min-height: 52px; }
.ctx__issuer { flex: 1 1 260px; min-width: 0; }
.ctx__issuer .menu { position: static; }
.ctx__issuer .menu__panel { left: 16px; width: min(380px, calc(100vw - 32px)); }
.ctx__new { margin: 0; flex: none; }
.ctx__new .btn { min-height: 40px; }
.menu__btn--issuer { display: inline-flex; max-width: 100%; margin-left: -10px; }
.issuer__logo { width: 24px; height: 24px; flex: none; object-fit: contain; border-radius: 2px; background: var(--papel); }
.issuer__text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; min-width: 0; }
.issuer__name { font-weight: 600; font-size: 13.5px; line-height: 1.25; overflow-wrap: anywhere; }
.issuer__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 10px; font-size: 12px; font-weight: 400; color: var(--tinta-60); }
.issuer__nif { font: 400 11.5px var(--f-m); }
.issuer__none-line { display: flex; flex-wrap: wrap; align-items: center; gap: 0 12px; min-height: 44px; margin: 0; }
.issuer__none { font-weight: 600; font-size: 13px; }
.issuer__change { display: inline-flex; align-items: center; min-height: 40px; font-size: 12.5px; color: var(--tinta-80); }
.swatch { flex: none; border-radius: 2px; box-shadow: 0 0 0 1px var(--rule-2); vertical-align: -2px; }
@media (min-width: 900px) {
  .menu--nav { margin-left: 8px; }
}

/* ── Página y cabecera de página ───────────────────────────────────────────────────────────────────────── */
.page { width: 100%; max-width: var(--w); margin: 0 auto; padding: 18px 16px 40px; flex: 1; }
.narrow { max-width: 460px; margin: 0 auto; }
.foot { width: 100%; max-width: var(--w); margin: 0 auto; padding: 0 16px 26px; font: 400 12.5px/1.5 var(--f-t); color: var(--tinta-80); }
/* Passe 1 : le filet est celui du CONTENU (même largeur que la page), pas celui de la boîte et de son remplissage. */
/* #983 (X-36) : pie de producto — marca + columnas de enlaces reales ; línea base (©, domicilio declarado, contacto de F&P, entorno). */
.foot__inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; padding-top: 20px; border-top: 1px solid var(--rule-2); }
.foot p { margin: 0; }
.foot__brand { grid-column: 1 / -1; }
.foot__product { display: flex; align-items: center; gap: 8px; font: 600 14px var(--f-d); color: var(--tinta); }
.foot__product .brand__mark { width: 18px; height: 18px; }
.foot__org { margin-top: 4px !important; font: 600 12.5px var(--f-t); color: var(--tinta-80); }
.foot__pitch { margin-top: 4px !important; max-width: 34ch; color: var(--tinta-60); }
.foot__h { margin: 0 0 4px; font: 600 12px var(--f-d); letter-spacing: 0; color: var(--tinta); }
.foot__col ul { list-style: none; margin: 0; padding: 0; }
.foot__col a { display: inline-flex; align-items: center; min-height: 28px; color: var(--tinta-80); text-decoration: none; }
.foot__col a:hover { color: var(--tinta); text-decoration: underline; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 20px; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 12px; }
.foot__legal { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--tinta-60); }
.foot__legal a { color: var(--tinta-80); }
.foot__qual { color: var(--tinta-60); }
.foot__env { display: inline-flex; align-items: center; gap: 7px; padding: 3px 10px; border: 1px solid var(--rule-2); border-radius: 12px; background: var(--papel); color: var(--tinta); font-weight: 600; }
.foot__env::before { content: ""; width: 6px; height: 6px; flex: none; background: var(--tinta); transform: rotate(45deg); }
.foot__multi { max-width: 84ch; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.ph { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 16px; margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid var(--rule-2); }
.ph__text { flex: 1 1 320px; min-width: 0; }
.ph__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.ph__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ph__actions form { margin: 0; }
.ph .lead { margin-top: 3px; }
.mono-title { font-family: var(--f-m); font-weight: 400; letter-spacing: -0.01em; }

/* ── Paneles, secciones, listas de datos ──────────────────────────────────────────────────────────────── */
.panel { background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-2); padding: 12px 14px; margin: 0 0 12px; }
.panel > :last-child { margin-bottom: 0; }
.panel--plain { background: transparent; border-style: dashed; }
.panel--focus { border-color: var(--tinta); box-shadow: inset 3px 0 0 var(--caqui); }
.panel--sheet { padding: 18px 20px; }
.sh { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px; }
.sh h2, .sh h3 { margin: 0; white-space: nowrap; }
.sh::after { content: ""; flex: 1; height: 1px; background: var(--rule); transform: translateY(-3px); }
.sh__aside { font: 400 11px var(--f-m); color: var(--tinta-60); white-space: nowrap; }
.stack > * + * { margin-top: 10px; }
.facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; }
.facts > div { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 0 12px; padding: 6px 0; border-top: 1px solid var(--rule); }
.facts > div:first-child { border-top: 0; }
.facts dt { font-size: 12px; color: var(--tinta-60); }
.facts dd { margin: 0; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.facts--tight > div { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); padding: 4px 0; }
.party { min-width: 0; }
.party h2, .party h3 { font: 500 10.5px var(--f-m); letter-spacing: 0.04em; color: var(--tinta-60); margin: 0 0 4px; }
.party p { margin: 0 0 1px; font-size: 13px; overflow-wrap: anywhere; }
.party__name { font-weight: 600; }
.parties { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 24px; margin: 0 0 12px; }
.two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.empty { padding: 18px 14px; text-align: left; color: var(--tinta-80); font-size: 12.5px; }
.empty h2 { font-size: 14px; margin: 0 0 4px; }
.empty p { margin: 0; max-width: 52ch; }

/* ── Mensajes ─────────────────────────────────────────────────────────────────────────────────────────── */
.flash { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-1); background: var(--st-info-t); box-shadow: inset 3px 0 0 var(--st-info); font-size: 12.5px; }
.flash p { margin: 0; }
.flash--success { background: var(--st-ok-t); box-shadow: inset 3px 0 0 var(--st-ok); }
.flash--info { background: var(--st-info-t); box-shadow: inset 3px 0 0 var(--st-info); }
.flash--warning { background: var(--st-warn-t); box-shadow: inset 3px 0 0 var(--st-warn); }
.flash--error { background: var(--st-block-t); box-shadow: inset 3px 0 0 var(--st-block); }
.flash h2 { font-size: 13px; margin: 0 0 4px; }
.flash ul, .reasons { margin: 4px 0 0; padding-left: 16px; }
.reasons li { margin: 0 0 4px; }
.reasons__ref { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--tinta-60); }
.reasons__ref code { font-size: 11.5px; color: inherit; }
.error-summary { margin: 0 0 12px; padding: 8px 12px; background: var(--st-block-t); box-shadow: inset 3px 0 0 var(--st-block); font-size: 12.5px; }
.error-summary h2 { margin: 0 0 4px; font-size: 13px; color: var(--st-block); }
.error-summary ul { margin: 0; padding-left: 16px; }
.field-error { position: relative; margin: 3px 0 10px; padding-left: 18px; font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--st-block); }
/* Un repère qui n'est pas la couleur : un triangle plein et le mot « Error: » ; le message n'est plus en petit monospace. */
.field-error::before { content: ""; position: absolute; left: 0; top: 0.28em; width: 12px; height: 12px; background: currentColor; clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.field-error .mono { font: inherit; font-weight: 700; letter-spacing: 0; }

/* ── Estados : una palabra, una forma ─────────────────────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1.25 var(--f-t); color: var(--tinta-80); white-space: nowrap; vertical-align: baseline; }
.badge::before { content: ""; width: 8px; height: 8px; flex: none; border: 1.5px solid var(--tinta-40); border-radius: 50%; }
.badge--ok { color: var(--st-ok); } .badge--ok::before { border: 0; background: currentColor; }
.badge--warn { color: var(--st-warn); } .badge--warn::before { border: 0; border-radius: 0; width: 9px; height: 9px; background: currentColor; clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.badge--block { color: var(--st-block); } .badge--block::before { border: 0; border-radius: 1px; background: currentColor; }
.badge--pending { color: var(--tinta-80); } .badge--pending::before { border: 1.5px dashed var(--tinta-60); }
.badge--next { color: var(--caqui-ink); } .badge--next::before { border: 0; border-radius: 0; width: 0; height: 0; border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; border-left: 7px solid currentColor; }
.badge--active { color: var(--tinta); } .badge--active::before { border: 0; background: var(--caqui); }
.badge--archived { color: var(--tinta-60); } .badge--archived::before { border: 0; border-radius: 1px; background: var(--tinta-40); }
.badge--directory { color: var(--st-info); } .badge--directory::before { border: 1.75px solid currentColor; }
.badge--historical { color: var(--st-info); } .badge--historical::before { border: 1.75px solid currentColor; border-radius: 1px; }
.badge--status-draft { color: var(--tinta-80); } .badge--status-draft::before { border: 1.5px dashed var(--tinta-60); }
.badge--status-submitting { color: var(--st-info); } .badge--status-submitting::before { border: 1.75px solid currentColor; }
.badge--status-issued { color: var(--st-ok); } .badge--status-issued::before { border: 0; background: currentColor; }
.badge--status-discarded { color: var(--tinta-60); text-decoration: line-through; } .badge--status-discarded::before { border: 0; border-radius: 1px; background: var(--tinta-40); }
.perms { color: var(--tinta-80); }
.type-code { display: inline-grid; place-items: center; min-width: 24px; height: 18px; padding: 0 4px; border: 1px solid var(--rule-2); border-radius: 2px; font: 500 10.5px var(--f-m); color: var(--tinta-80); vertical-align: 1px; }

/* ── Filas (listas de registros) ──────────────────────────────────────────────────────────────────────── */
.rows { list-style: none; margin: 0 0 12px; padding: 0; background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-2); }
.row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; padding: 10px 14px; border-top: 1px solid var(--rule); }
.row:first-child { border-top: 0; }
.row--active { box-shadow: inset 3px 0 0 var(--caqui); }
.row__main { min-width: 0; }
.row__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 13.5px; font-weight: 600; }
.row__title a { text-decoration: none; }
.row__title a:hover { text-decoration: underline; }
.row__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin-top: 2px; font-size: 12px; color: var(--tinta-80); }
.row__aside { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.row__aside form { margin: 0; }

/* ── Presentación que se fijará (#983, X-05, X-06) : resumen del borrador y panel de la vista previa ───────────────── */
.presum { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); }
.presum__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 20px; margin: 0 0 4px; padding: 0; font-size: 13px; }
.presum__list li { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.presum__color { display: inline-flex; align-items: center; gap: 6px; }
.presum__action { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0; font-size: 12.5px; }
.presum__action .help { margin: 0; }
.presfig { margin: 0; display: flex; flex-direction: column; gap: 4px; width: 120px; }
.presfig .help { font-size: 11.5px; }
#presentacion-seccion .aspect__body { grid-template-columns: 140px minmax(0, 1fr); }
#presentacion-seccion .presfig { width: 140px; }
#presentacion-seccion .aspect__thumb { width: 140px; }
#presentacion-seccion .actions { margin-top: 8px; }
.check--unavailable { color: var(--tinta-80); }
.check--unavailable .check__text { margin: 0; font-size: 13px; font-weight: 600; color: var(--tinta-80); }
.more--action { margin: 0 0 10px; }
.more--action > summary { min-height: 40px; font-weight: 600; color: var(--tinta); }
.actions--sticky .btn { min-width: 0; }
.sheet__number--note { font: 500 13px/1.45 var(--f-t); max-width: 62ch; }

/* ── Pasos de configuración : síntesis + paso en foco ─────────────────────────────────────────────────── */
.stepper { list-style: none; margin: 0 0 12px; padding: 0; counter-reset: paso; background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-2); }
.step { border-top: 1px solid var(--rule); }
.step:first-child { border-top: 0; }
.step summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 0 10px; align-items: center; min-height: 40px; padding: 6px 14px 6px 10px; }
.step summary:hover { background: oklch(0.29 0.075 258 / 0.03); }
.step__n { display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid var(--tinta-40); border-radius: 50%; font: 500 11px var(--f-m); color: var(--tinta-80); }
.step--done .step__n { border-color: var(--st-ok); background: var(--st-ok); color: var(--papel); }
.step--current .step__n { border-color: var(--caqui); color: var(--caqui-ink); box-shadow: 0 0 0 3px oklch(0.665 0.17 40 / 0.18); }
.step__title { font-size: 13px; font-weight: 600; }
.step__hint { display: block; font-size: 11.5px; font-weight: 400; color: var(--tinta-60); }
.step__state { justify-self: end; }
.step__body { padding: 4px 14px 12px 48px; }
.step__body > .table-wrap { margin-top: 6px; }
.step--current { box-shadow: inset 3px 0 0 var(--caqui); }
.step__review { margin: 6px 0 0; font-size: 12px; color: var(--tinta-80); }
.step__review form { display: inline; margin: 0 0 0 8px; }

/* ── Tablas ───────────────────────────────────────────────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; margin: 0 0 12px; background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-2); }
.panel .table-wrap, .step__body .table-wrap { border: 0; border-radius: 0; background: transparent; margin-bottom: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th, .table td { padding: 7px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.table thead th { padding: 6px 10px; font: 500 11px var(--f-t); color: var(--tinta-60); border-bottom: 1px solid var(--rule-2); vertical-align: bottom; white-space: nowrap; }
.table tbody th { font-weight: 500; }
.table tbody tr:last-child > * { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table .total > * { border-top: 2px solid var(--tinta); border-bottom: 0; font-weight: 700; }
.table--amounts { max-width: 360px; margin-left: auto; }
.table--amounts th { font-weight: 400; color: var(--tinta-80); }
.table--lines th:first-child, .table--lines td:first-child { min-width: 14ch; }
.cell-title { display: block; font-weight: 600; }
.cell-sub { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--tinta-60); }
.refusal { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--st-block); }
.pager { margin: 0 0 12px; }
.pager ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 12px; margin: 0; padding: 0; }
.pager__now { font-size: 12px; color: var(--tinta-80); }

/* ── Formularios ──────────────────────────────────────────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* Contre-vérification finale (#983) : une aide en fin de champ laisse respirer le libellé du champ suivant. */
.field > .help:last-child { margin-bottom: 6px; }
.field label, .check label, legend.lg { font: 600 12.5px var(--f-t); color: var(--tinta); }
legend.lg { display: block; width: 100%; margin: 0 0 6px; font-family: var(--f-d); font-size: 14px; }
input[type="text"], input[type="email"], input[type="search"], input[type="date"], input[type="color"], input:not([type]), select, textarea {
  width: 100%; min-height: 34px; padding: 0 10px; font: 400 13px var(--f-t); color: var(--tinta); background: var(--papel);
  border: 1px solid var(--rule-2); border-radius: var(--r-2);
}
textarea { padding: 7px 10px; resize: vertical; line-height: 1.45; }
input:hover, select:hover, textarea:hover { border-color: var(--tinta-60); }
input[type="search"]::-webkit-search-cancel-button { appearance: none; }
select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, var(--tinta-80) 50%), linear-gradient(135deg, var(--tinta-80) 50%, transparent 50%); background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
input[type="color"] { width: 48px; padding: 2px; }
input[type="file"] { max-width: 100%; min-height: 34px; padding: 2px 0; font: 400 12.5px var(--f-t); color: var(--tinta-80); }
input[type="file"]::file-selector-button { margin-right: 10px; min-height: 30px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); color: var(--tinta); font: 600 12px var(--f-t); cursor: pointer; }
input[type="radio"], input[type="checkbox"] { width: 16px; height: 16px; margin: 2px 0 0; flex: none; accent-color: var(--tinta); }
.field--invalid input, .field--invalid select, .field--invalid textarea { border-color: var(--st-block); border-left-width: 3px; }
.field--short { max-width: 220px; }
fieldset.field--invalid { box-shadow: inset 3px 0 0 var(--st-block); }
.check { position: relative; display: flex; align-items: flex-start; gap: 8px; min-height: 30px; padding: 4px 0; }
.check label { font-weight: 400; font-size: 13px; }
/* CV-4 (C-30, C-36) : le libellé recouvre toute la ligne — la case, le texte ET l'espace entre eux sont cliquables ; le foyer se voit sur la ligne. */
div.check > label::after { content: ""; position: absolute; inset: 0; }
.check:has(input:focus-visible) { outline: 2px solid var(--caqui); outline-offset: 2px; border-radius: var(--r-1); }
.check input { position: relative; z-index: 1; }
.check input:focus-visible { outline: none; }
.check--confirm { align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel-2); }
.check--confirm input[type="checkbox"] { width: 24px; height: 24px; margin: 0; }
.check--confirm label { font-size: 14px; line-height: 1.45; }
.check--block { display: grid; grid-template-columns: 20px 1fr; column-gap: 8px; padding: 4px 6px; border-radius: var(--r-1); }
.check--block:has(input:checked) { background: oklch(0.29 0.075 258 / 0.06); }
.check--block:has(input:checked) label { font-weight: 600; }
.check--block .help { grid-column: 2; margin: 0; }
/* #922 : une option choisie garde son texte collé au libellé (le surlignage ne l'étire plus en bas d'une case haute). */
.check--block { align-content: start; }
.check--block .more { grid-column: 2; position: relative; z-index: 1; }
.more { margin: 2px 0 0; }
.more > summary { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; font-size: 12px; color: var(--tinta-80); text-decoration: underline; text-underline-offset: 3px; }
.more > summary::before { content: "+"; font: 500 12px var(--f-m); }
.more[open] > summary::before { content: "−"; }
.more > .help { margin-top: 2px; }
.disclosure { border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel-2); }
.disclosure > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-height: 36px; padding: 8px 10px; }
.disclosure > summary::before { content: "+"; font: 500 13px var(--f-m); color: var(--tinta-60); }
.disclosure[open] > summary::before { content: "−"; }
.disclosure > summary .lg { font: 600 14px var(--f-d); color: var(--tinta); }
.disclosure__state { margin-left: auto; font-size: 12px; color: var(--tinta-60); }
.disclosure > .choice { border: 0; border-top: 1px solid var(--rule); border-radius: 0 0 var(--r-2) var(--r-2); }
.disclosure--quiet { margin: 0 0 12px; background: transparent; border-style: dashed; }
.disclosure--quiet > summary .lg { font: 600 13px var(--f-t); }
.disclosure__body { margin: 0; padding: 0 12px 10px 30px; }
.row-sub { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 400; color: var(--tinta-60); overflow-wrap: anywhere; }
/* #922 : le parcours d'une facture — trois étapes, l'étape courante dite par un mot ET une forme (jamais la couleur seule). */
.flow { list-style: none; margin: -4px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.flow__step { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px 2px 4px; border: 1px solid var(--rule-2); border-radius: 13px; font-size: 12px; color: var(--tinta-60); background: var(--papel); }
.flow__n { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px dashed var(--tinta-40); font: 500 10.5px var(--f-m); }
.flow__step--done { color: var(--tinta-80); }
.flow__step--done .flow__n { border: 0; background: var(--st-ok-t); color: var(--st-ok); }
.flow__step--now { border-color: var(--tinta); color: var(--tinta); font-weight: 600; box-shadow: inset 0 -2px 0 var(--caqui); }
.flow__step--now .flow__n { border: 0; background: var(--tinta); color: var(--papel); }
/* Passe 2 : le libellé court n'existe que sous 720 px. */
.flow__short { display: none; }
@media (max-width: 719px) {
  /* Passe 2 : trois étapes sur une ligne, chacune avec son libellé court ; le libellé complet reste le nom accessible. */
  .flow { flex-wrap: nowrap; gap: 4px; }
  .flow__step { flex: none; gap: 4px; padding: 2px 8px 2px 3px; font-size: 11.5px; white-space: nowrap; }
  .flow__n { width: 16px; height: 16px; font-size: 10px; }
  .flow__label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
  .flow__short { display: inline; }
}
.toolbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: flex-end; margin: 0 0 12px; }
.toolbar .field { flex: 1 1 150px; }
.toolbar .field--grow { flex: 2 1 220px; }
.toolbar .check { flex: 0 0 auto; min-height: 34px; align-items: center; }
.toolbar .btn { flex: none; }
.live-status { flex: 1 0 100%; margin: 0; min-height: 0; font-size: 11.5px; color: var(--tinta-60); }
.live-status:empty { display: none; }
[aria-busy="true"] { opacity: 0.6; transition: opacity 0.15s; }
.choice { padding: 8px 10px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel-2); }
.choice__options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 12px; align-items: start; }
.choice__detail { margin-top: 6px; }
.choice__detail[data-irpf-collapsed] { margin-top: 6px; }
.choice .badge { margin-left: 6px; }
.grid-2, .grid-3 { display: grid; gap: 8px 12px; grid-template-columns: minmax(0, 1fr); }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions form { margin: 0; }
.actions--bar { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }
.inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.inline-form .field { flex: 1 1 220px; }
.inline-form .btn { flex: none; }
.chooser { padding: 10px 12px; margin: 0 0 10px; border: 1px dashed var(--rule-2); border-radius: var(--r-2); background: var(--papel-2); }
.chooser__title { margin: 0 0 6px; font: 600 12.5px var(--f-t); }
/* #983 (CV-4, M-2) : le choix du destinataire — deux boutons de même poids, l'option choisie par un fond plein ET une coche (jamais la couleur seule). */
.seg { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0 0 10px; padding: 3px; border: 1px solid var(--rule-2); border-radius: var(--r-3); background: var(--arena-2); }
/* Passe 1 : un contrôle segmenté CLAIR, pas un second « bouton d'action » — l'option choisie est « posée » (papier, cadre marine, coche), l'autre s'efface. */
.seg__btn { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 6px 14px; border: 1px solid transparent; border-radius: var(--r-2); background: transparent; color: var(--tinta-80); font: 500 13px/1.3 var(--f-t); text-align: center; cursor: pointer; }
.seg__btn:hover { color: var(--tinta); border-color: var(--rule-2); }
.seg__btn--on { background: var(--papel); border-color: var(--tinta); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px oklch(0.29 0.075 258 / 0.12); }
.seg__btn--on::before { content: "\2713"; font-weight: 700; }
.recipient { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 16px; align-items: start; }
.recipient__data { min-width: 0; }
.recipient__data p { margin: 0 0 1px; font-size: 13px; overflow-wrap: anywhere; }
.recipient__name { font-weight: 600; }
.recipient__actions { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.recipient__actions form { margin: 0; }

/* ── Líneas del borrador ──────────────────────────────────────────────────────────────────────────────── */
.lines { list-style: none; margin: 0; padding: 0; }
.line { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 10px; padding: 10px 12px 10px 38px; border-top: 1px solid var(--rule); }
.line:first-child { border-top: 0; }
.line__n { position: absolute; left: 12px; top: 12px; font: 500 11px var(--f-m); color: var(--tinta-60); }
.line__amount { font-size: 12.5px; color: var(--tinta-80); }
.line__amount strong { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tinta); }
.line__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; }
.line .check { min-height: 24px; padding: 0; }
.line .field label { font-size: 11.5px; color: var(--tinta-80); }
.line__cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; }
.line__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 10px; }
.field--unit { max-width: 180px; }
.lines__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rule); }
.lines__total { margin: 0; font-size: 13px; }
.lines__total strong { white-space: nowrap; font-variant-numeric: tabular-nums; font-size: 14px; }
.lines__total .help { display: block; margin-top: 1px; }
/* #983 (X-10, X-11) : sélecteur d'unités, IVA remplacée par son texte en opération UE, « Duplicar » et « Quitar » de même taille. */
.unit { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; min-width: 0; }
.field--unit-other { max-width: 260px; }
.line__main .unit { max-width: 260px; }
.line__main textarea { min-height: 56px; }
.line__vat { min-width: 0; }
.line__vat-ue { margin: 0; padding: 8px 0 0; font-size: 12.5px; color: var(--tinta-80); }
.line__buttons { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.line__remove { margin-left: auto; }
.line__foot .check { flex: 1 1 auto; }

/* ── Botones : un enlace navega, un botón actúa ───────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 34px; padding: 0 14px; border: 1px solid var(--tinta); border-radius: var(--r-2); background: var(--tinta); color: var(--papel); font: 600 13px var(--f-t); text-decoration: none; white-space: nowrap; cursor: pointer; }
.btn:hover { background: var(--tinta-2); color: var(--papel); }
.btn--secondary { background: var(--papel); border-color: var(--rule-2); color: var(--tinta); }
.btn--secondary:hover { background: var(--papel); border-color: var(--tinta); color: var(--tinta); }
.btn:disabled { background: transparent; border-style: dashed; border-color: var(--tinta-40); color: var(--tinta-80); cursor: not-allowed; transition: none; }
.btn--quiet { min-height: 28px; padding: 0 2px; border: 0; background: none; color: var(--tinta); white-space: normal; text-decoration: underline; text-decoration-color: var(--caqui); text-decoration-thickness: 1.5px; text-underline-offset: 3px; font-weight: 600; }
.btn--quiet:hover { background: none; color: var(--caqui-ink); }
.btn--danger { background: var(--papel); border-color: var(--st-block); color: var(--st-block); }
.btn--danger:hover { background: var(--st-block-t); border-color: var(--st-block); color: var(--st-block); }
.btn--sm { min-height: 30px; padding: 0 10px; font-size: 12px; }

/* ── Marca del emisor ─────────────────────────────────────────────────────────────────────────────────── */
.brand-preview { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; margin: 0 0 10px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); }
.brand-preview__logo { width: 72px; height: 40px; flex: none; object-fit: contain; object-position: left center; }
.brand-preview__name { font-size: 13px; }
.brand-preview__rule { width: 100%; height: 3px; border-radius: 2px; }
.brand-preview__empty { font-size: 12.5px; color: var(--tinta-60); }
.logo__preview { margin-top: 6px; padding: 8px 10px; border: 1px dashed var(--rule-2); border-radius: var(--r-2); background: var(--papel); }
.logo__canvas { display: block; max-width: 100%; height: auto; }
.logo__preview .help { margin-top: 4px; }

/* ── Modelo y color (#943, D-305 ; #945 ; #983) : ocho tarjetas con la miniatura que dibuja el motor — el mismo dibujo que el PDF —, en dos
   grupos (los recomendados primero) y la composición de referencia. Estrecho : miniatura a la izquierda ; ancho : tarjeta vertical. El libellé
   recubre la tarjeta entera (`.mcard__name::after`) : toda la tarjeta elige el modelo ; los ejemplos quedan por encima. ──────────────── */
.layouts__group { margin: 4px 0 6px; font: 600 11.5px var(--f-m); letter-spacing: 0.04em; color: var(--tinta-80); }
.layouts__group--secondary { margin-top: 14px; color: var(--tinta-60); }
.models { margin: 0 0 4px; }
.mcards { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.mcard { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 12px; row-gap: 2px; align-content: start; padding: 10px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); }
/* Passe 1 : UN langage de sélection pour « en uso » et « elegido » — cadre marine de 2 px, coche, étiquette (jamais la couleur seule). */
.mcard--current, .mcard:has(.mcard__radio:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); background: oklch(0.29 0.075 258 / 0.04); }
.mcard:has(.mcard__radio:focus-visible) { outline: 2px solid var(--caqui); outline-offset: 2px; }
.mcard__thumb { grid-column: 1; grid-row: 1 / span 5; width: 112px; height: auto; aspect-ratio: 210 / 297; border: 1px solid var(--rule-2); border-radius: 2px; background: #ffffff; }
.mcard > :not(.mcard__thumb) { grid-column: 2; }
.mcard__head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mcard__radio { flex: none; width: 20px; height: 20px; margin: 0; }
.mcard__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; flex: 1 1 auto; min-width: 0; margin: 0; font: 600 14px/1.3 var(--f-d); color: var(--tinta); }
.mcard__name::after { content: ""; position: absolute; inset: 0; }
label.mcard__name { cursor: pointer; }
.mcard__pick { display: none; }
.mcard:has(.mcard__radio:checked):not(.mcard--current) .mcard__pick { display: inline-flex; }
.mcard__check { display: none; flex: none; margin-left: auto; }
.mcard__check circle { fill: var(--tinta); }
.mcard__check path { fill: none; stroke: var(--papel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mcard--current .mcard__check, .mcard:has(.mcard__radio:checked) .mcard__check { display: block; }
.mcard__summary { margin: 0; font-size: 12.5px; color: var(--tinta-80); }
.mcard__fit { margin: 0; font-size: 12px; color: var(--tinta-60); }
.mcard__palette { display: flex; align-items: center; gap: 8px; margin: 2px 0 0; font-size: 12px; color: var(--tinta-60); }
.mcard__more { grid-column: 1 / -1 !important; position: relative; z-index: 2; margin-top: 4px; }
.mcard__more > summary { display: flex; align-items: center; min-height: 36px; font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; color: var(--tinta-80); }
.mcard__more > summary::before { content: "+"; margin-right: 6px; font: 500 12px var(--f-m); }
.mcard__more[open] > summary::before { content: "−"; }
.msamples { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.msamples li { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.msamples__thumb { width: 100%; height: auto; aspect-ratio: 210 / 297; border: 1px solid var(--rule-2); border-radius: 2px; background: #ffffff; }
.msamples__label { color: var(--tinta-80); }
.swatches { flex: none; }
.swatches rect { stroke: var(--rule-2); stroke-width: 1; }
/* #983 (X-29) : « Modelo y colores » — las cartas a la izquierda, el panel de colores del modelo elegido a la derecha (fijo al desplazar) ;
   en pantalla estrecha, una columna : las cartas, después el panel. Cada rol : pastilla (tono impreso), código, selector, qué colorea. */
.appearance__jump { margin: 0 0 8px; }
.appearance__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.appearance__panel { padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); scroll-margin-top: 12px; }
.appearance__panel > h2 { margin: 0 0 8px; }
.appearance__img { width: 100%; height: auto; aspect-ratio: 210 / 297; border: 1px solid var(--rule-2); border-radius: 2px; background: #ffffff; }
.appearance__preview figcaption { margin: 0; }
.appearance__base { display: block; margin: 0 0 8px; }
.appearance__base .swatch { vertical-align: -2px; }
.roles { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--rule); }
.role { padding: 9px 0; border-bottom: 1px solid var(--rule); }
.role__label { display: block; margin: 0 0 4px; font: 600 12.5px var(--f-t); color: var(--tinta); }
.role__row { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; }
.role__row > .role__code, .role__row > input.role__code { flex: 0 0 120px; width: 120px; min-width: 0; }
.role__row > .role__picker { flex: 0 0 44px; width: 44px; }
.role__row > .btn { flex: 0 1 auto; }
.role__mark { display: inline-flex; align-items: center; flex: none; }
.role__swatch rect { stroke: var(--rule-2); stroke-width: 0.5; }
.role__none { display: inline-block; width: 22px; height: 22px; flex: none; border: 1.5px dashed var(--tinta-40); border-radius: 2px; }
.role__code { width: 112px; font-family: var(--f-m); text-transform: lowercase; }
.role__picker { width: 44px; min-height: 40px; padding: 2px; border: 1px solid var(--rule-2); border-radius: var(--r-1); background: var(--papel); cursor: pointer; }
.role__what { margin: 4px 0 0; }
.role__pdf { margin: 3px 0 0; color: var(--tinta-80); }
.role__feedback:empty { display: none; }
.appearance__tools { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 10px 0 6px; }
.brandstart { margin: 4px 0 0; border-top: 1px solid var(--rule); }
.brandstart > summary { display: flex; align-items: center; min-height: 40px; font-size: 12.5px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.brandstart > summary::before { content: "+"; margin-right: 6px; font: 500 12px var(--f-m); text-decoration: none; }
.brandstart[open] > summary::before { content: "−"; }
.brandstart__body { padding: 2px 0 6px; }
.brandstart__body label { display: block; margin: 0 0 4px; font: 600 12.5px var(--f-t); }
/* Passe de correction n°1 : la mise en page large (panneau collant, bouton en pied) vit dans la section « fix1-C2 » en fin de feuille. */
/* Barra de acción pegajosa : el botón de publicar nunca queda a mil píxeles de las opciones. */
.chooser__bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px 0 0; padding: 10px 12px; background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-2); box-shadow: 0 -6px 10px -8px oklch(0.29 0.075 258 / 0.25); }
.chooser__bar .help { margin: 0; flex: 1 1 220px; }
.chooser__bar .live-status { flex: 1 0 100%; }

/* ── Mi cuenta (#983, X-37) : perfil y sesión a la izquierda, los emisores a la derecha ; una columna en pantalla estrecha. ── */
.acct { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.acct .panel { margin: 0 0 12px; }
.acct__side .panel:last-child { margin-bottom: 0; }
.acct__spaces { list-style: none; margin: 0 0 8px; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.acct__space { padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel-2); }
.acct__space--active { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
.acct__space-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.acct__space-name { font-size: 14px; }
.acct__space-nif { margin: 2px 0 6px; font-size: 12px; color: var(--tinta-60); }
.acct__perms { margin: 0 0 6px; padding-left: 16px; font-size: 12.5px; color: var(--tinta-80); }
.acct__perms li { margin: 0 0 2px; }
.acct__perms strong { color: var(--tinta); }
.acct__links { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; padding: 0; font-size: 12.5px; }
.acct__links a { display: inline-flex; align-items: center; min-height: 32px; }
@media (min-width: 900px) {
  .acct { grid-template-columns: 320px minmax(0, 1fr); gap: 16px; }
  .acct__spaces { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 719px) { .acct__links a { min-height: 40px; } }

/* ── Ficha del emisor (#983) : identidad, lo que puede facturar, aspecto de las facturas, secciones plegables ───────────────────────── */
.ident { margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--rule); }
.ident__line { margin: 0 0 4px; font-size: 13px; color: var(--tinta-80); }
.ident__line strong { color: var(--tinta); }
.ident__note { margin: 6px 0 0; padding: 7px 12px; border-radius: var(--r-1); background: var(--st-info-t); box-shadow: inset 3px 0 0 var(--st-info); font-size: 12.5px; }
.toc { margin: 0 0 12px; }
.toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.toc a { display: inline-flex; align-items: center; min-height: 32px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: 16px; font-size: 12px; text-decoration: none; background: var(--papel); }
.toc a:hover { border-color: var(--tinta); }
.caps { list-style: none; margin: 0 0 8px; padding: 0; }
.cap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 12px; padding: 7px 0; border-top: 1px solid var(--rule); }
.cap:first-child { border-top: 0; }
.cap__label { font-size: 13px; font-weight: 600; }
.cap__note { font-size: 12.5px; color: var(--tinta-80); }
.aspect { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.aspect h3 { margin: 0 0 8px; }
.aspect__body { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 0 14px; align-items: start; }
.aspect__thumb { width: 120px; height: auto; aspect-ratio: 210 / 297; border: 1px solid var(--rule-2); border-radius: 2px; background: #ffffff; }
.aspect__name { margin: 0 0 4px; font-size: 13.5px; }
.aspect__color { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.aspect__brand { padding-top: 12px; border-top: 1px solid var(--rule); }
.panel--danger { border-color: var(--st-block); margin-top: 18px; }
details.disclosure { margin: 0 0 12px; background: var(--papel); }
.disclosure__body--wide { padding: 0 12px 10px; }
.disclosure > summary .disclosure__state { margin-left: auto; text-align: right; }

/* ── Hoja de documento (vista previa, documento emitido) ──────────────────────────────────────────────── */
.sheet { background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-2); padding: 16px; margin: 0 0 12px; }
.sheet__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px; padding: 0 0 12px; margin: 0 0 12px; border-bottom: 2px solid var(--tinta); }
.sheet__kind { font: 500 10.5px var(--f-m); letter-spacing: 0.04em; color: var(--tinta-60); margin: 0 0 2px; }
.sheet__number { font: 600 17px/1.2 var(--f-d); margin: 0; overflow-wrap: anywhere; }
.sheet__number--pending { color: var(--tinta-60); font-weight: 500; }
.sheet__dates { margin: 0; font-size: 12.5px; color: var(--tinta-80); }
.sheet__marks { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.sheet__logo { max-width: 120px; max-height: 44px; object-fit: contain; }
.sheet .parties { margin-bottom: 14px; }
.sheet__op { margin: 0 0 12px; padding: 8px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); font-size: 13px; }
.sheet__op dt { display: inline; color: var(--tinta-60); font-size: 12px; }
.sheet__op dd { display: inline; margin: 0 14px 0 4px; }
.sheet .table-wrap { border: 0; border-radius: 0; margin-bottom: 8px; }
.sheet__totals { display: flex; justify-content: flex-end; }
/* #896 : retenue, mention, échéance et virement — une colonne sous les totaux, alignée sur eux. */
.sheet__totals--pro { flex-direction: column; align-items: stretch; gap: 10px; }
/* CV-4 (M-13) : les totaux et la retenue — même largeur, même colonne (et les mêmes colonnes internes). */
.sheet__totals--pro > .table-wrap { width: 100%; }
.sheet__totals--pro > :not(.table-wrap) { align-self: flex-end; }
.table--amounts { table-layout: fixed; }
.table--amounts .num { width: 9.5em; }
.sheet__mention { max-width: 520px; margin: 0; font-size: 12px; text-align: right; }
.sheet__totals--pro .facts { margin: 0; }

/* ── Comparación original ↔ rectificación ─────────────────────────────────────────────────────────────── */
.compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 12px; }
.compare__side { background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-2); padding: 12px 14px; }
.compare__side--original { background: var(--papel-2); order: 2; }
.compare__side--correction { border-color: var(--tinta); box-shadow: inset 0 3px 0 var(--caqui); }
.compare__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 10px; margin: 0 0 8px; padding: 0 0 8px; border-bottom: 1px solid var(--rule); }
.compare__head h2 { font-size: 13.5px; }
.compare__ref { font: 400 12px var(--f-m); color: var(--tinta-60); overflow-wrap: anywhere; }
.compare__side .table-wrap { border: 0; border-radius: 0; background: transparent; margin: 0; }
.compare__side .table { font-size: 12.5px; }
.compare__side .table th, .compare__side .table td { padding: 5px 8px 5px 0; }
.compare__side .table th:last-child, .compare__side .table td:last-child { padding-right: 0; }
.compare__side .facts--tight { margin: 0 0 6px; }
/* #927 : montants de la rectificative annoncés avant la confirmation — un bloc séparé, titré comme les autres. */
.compare__side .forecast { margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--rule); }
.compare__side .forecast h3 { margin: 0; }

/* ── Ayuda : índice de temas ─────────────────────────────────────────────────────────────────────────────── */
.help-index { margin: 0 0 12px; }
.help-index ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.help-index a { display: inline-flex; align-items: center; min-height: 28px; padding: 0 9px; border: 1px solid var(--rule-2); border-radius: 14px; font-size: 12px; text-decoration: none; background: var(--papel); }
.help-index a:hover { border-color: var(--tinta); }

/* ── Página de acceso ─────────────────────────────────────────────────────────────────────────────────── */
.auth { width: 100%; max-width: 420px; margin: 24px auto 0; padding: 24px 26px; background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-3); }
.auth h1 { font-size: 22px; margin: 0 0 6px; }
.auth p { font-size: 13px; color: var(--tinta-80); }
.auth .field { margin: 12px 0; }
.auth__alt { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
.auth__alt h2 { font-size: 13px; margin: 0 0 4px; }
.auth__alt ul { margin: 0; padding-left: 16px; font-size: 12px; color: var(--tinta-80); }
.auth .flash { margin-bottom: 10px; }

/* ── Ancho medio y arriba ─────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
  .page { padding: 22px 24px 48px; }
  .top__inner, .ctx__inner, .band__inner, .foot { padding-left: 24px; padding-right: 24px; }
  .foot__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; }
  /* Cinq liens en deux colonnes, remplies par colonne (3 + 2) : jamais un dernier lien orphelin sur sa ligne. */
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .parties { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two { grid-template-columns: minmax(0, 1fr) 300px; }
  .two__aside { position: sticky; top: 12px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .recipient { grid-template-columns: minmax(0, 1fr) auto; }
  .seg { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
  .line { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .line__cells { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .line__main { grid-template-columns: minmax(0, 1fr) 160px; }
  .choice__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mcards--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mcards--ref { grid-template-columns: minmax(0, 1fr); }
  .mcard { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .mcard > :not(.mcard__thumb) { grid-column: 1; }
  .mcard__thumb { grid-row: auto; width: 100%; }
  /* La composition de référence : une carte horizontale, large, jamais une carte seule perdue dans une rangée de trois. */
  .mcards--ref .mcard { grid-template-columns: minmax(150px, 220px) minmax(0, 1fr); column-gap: 18px; }
  .mcards--ref .mcard > :not(.mcard__thumb) { grid-column: 2; }
  .mcards--ref .mcard__thumb { grid-column: 1; grid-row: 1 / span 6; }
  .cap { grid-template-columns: minmax(0, 300px) 130px minmax(0, 1fr); align-items: baseline; }
  .grid-2--date { grid-template-columns: 200px minmax(0, 1fr); }
  .line__cells--2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .line__foot { grid-column: 1 / -1; }
  .compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .compare__side--original { order: 0; position: sticky; top: 12px; }
  .row__aside { justify-content: flex-end; }
  .sheet { padding: 22px 26px; }
}
@media (min-width: 1000px) {
  .mcards:not(.mcards--ref) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
  .foot__inner { grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr)); }
  .foot__brand { grid-column: auto; }
}
/* Passe 2 : « Otros modelos » (cinco cartas) — rejilla regular, última fila centrada (nunca un hueco a la derecha). */
@media (min-width: 720px) {
  .mcards:not(.mcards--ref):not(.mcards--featured) { display: flex; flex-wrap: wrap; justify-content: center; }
  .mcards:not(.mcards--ref):not(.mcards--featured) > li { flex: 0 0 calc((100% - 10px) / 2); min-width: 0; display: grid; }
}
@media (min-width: 1000px) {
  .mcards:not(.mcards--ref):not(.mcards--featured) > li { flex-basis: calc((100% - 20px) / 3); }
}
@media (min-width: 960px) {
  .aspect { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0 24px; }
  .aspect__brand { padding-top: 0; border-top: 0; padding-left: 24px; border-left: 1px solid var(--rule); }
}

/* ── #983 (CV-4 élargi) : datos del emisor, tipos de operación con bandera, catálogo en un clic, resumen del borrador, PDF ──────── */
.datos { list-style: none; margin: 0 0 8px; padding: 0; }
.datos__item { border-top: 1px solid var(--rule); }
.datos__item:first-child { border-top: 0; }
.datos__row { display: grid; grid-template-columns: minmax(0, 1fr); align-items: baseline; gap: 0 12px; padding: 7px 0; }
.datos__k { font-size: 12px; color: var(--tinta-60); }
.datos__v { min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.datos__why { display: block; margin: 2px 0 0; }
/* « Cambiar » est le résumé de son repli : un contrôle à contour, jamais un second bouton plein ; le chevron dit s'il est ouvert. */
.datos__change { display: inline-flex; align-items: center; gap: 8px; justify-self: start; min-height: 32px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); font-size: 12.5px; font-weight: 600; color: var(--tinta); }
.datos__change::after { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--tinta-60); border-bottom: 1.5px solid var(--tinta-60); transform: translateY(-2px) rotate(45deg); }
.datos__d[open] .datos__change::after { transform: translateY(1px) rotate(-135deg); }
.datos__d > summary:hover .datos__change { border-color: var(--tinta); }
.datos__d > summary:focus-visible { outline-offset: 0; }
.datos__d[open] > summary { padding-bottom: 4px; }
.datos__effect { max-width: 70ch; margin: 6px 0 0; }

.flag { flex: none; border-radius: 1px; vertical-align: -2px; }
.kindline { display: inline-flex; align-items: center; gap: 8px; }
.kinds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 12px; align-items: stretch; }
.kind { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 2px; padding: 10px 40px 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); }
.kind:has(.kind__radio:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); background: oklch(0.29 0.075 258 / 0.05); }
.kind:has(.kind__radio:focus-visible) { outline: 2px solid var(--caqui); outline-offset: 2px; }
.kind__radio { position: absolute; top: 12px; right: 12px; z-index: 1; width: 20px; height: 20px; margin: 0; }
.kind__label { display: flex; align-items: center; gap: 10px; margin: 0; font: 600 13.5px/1.35 var(--f-t); color: var(--tinta); }
.kind__label::after { content: ""; position: absolute; inset: 0; }
.kind__label--text::after { content: none; }
.kind:has(.kind__radio:checked) .kind__label { font-weight: 700; }
.kind .help { margin: 0 0 0 30px; }
.kind .more { position: relative; z-index: 2; margin-left: 30px; }
.kind--unavailable { border-style: dashed; background: transparent; color: var(--tinta-80); }
.kind--unavailable .kind__label { font-weight: 600; color: var(--tinta-80); }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; padding: 0; }
.chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-height: 40px; padding: 5px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); color: var(--tinta); font: 600 13px/1.25 var(--f-t); text-align: left; cursor: pointer; }
.chip:hover { border-color: var(--tinta); }
.chip__sub { font: 400 11.5px var(--f-m); color: var(--tinta-60); }
.btn__sub { font-weight: 400; font-size: 11.5px; opacity: 0.9; }
.quickdue { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 8px; }
.rowform { margin: 0; }

.editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
.editor__main > .panel:last-child { margin-bottom: 12px; }
.editor__aside { margin: 0 0 12px; }
.sum { padding: 12px 14px; margin: 0 0 12px; background: var(--papel); border: 1px solid var(--tinta); border-radius: var(--r-2); box-shadow: inset 3px 0 0 var(--caqui); }
.sum__title { margin: 0 0 6px; font-size: 14px; }
.sum__rows { margin: 0 0 6px; }
.sum__rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 4px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.sum__rows > div[hidden] { display: none; }
.sum__rows > div:first-child { border-top: 0; }
.sum__rows dt { color: var(--tinta-80); }
.sum__rows dd { margin: 0; flex: none; white-space: nowrap; font: 500 13px var(--f-m); font-variant-numeric: tabular-nums; text-align: right; }
.sum__rows dt { min-width: 0; overflow-wrap: anywhere; }
.sum__rows .sum__total { padding-top: 7px; border-top: 2px solid var(--tinta); font-weight: 700; }
.sum__rows .sum__total dt { color: var(--tinta); font-weight: 700; }
.sum__rows .sum__total dd { font: 700 17px var(--f-m); }
.sum__state { display: flex; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 12.5px; color: var(--tinta-80); }
.sum__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--st-ok); }
.sum__state[data-dirty="1"] { color: var(--st-warn); font-weight: 600; }
.sum__state[data-dirty="1"] .sum__dot { border-radius: 1px; background: var(--st-warn); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.sum__actions { display: none; }
.editor__bar { display: flex; }
.editor__bar-total { display: flex; flex: 1 0 100%; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0; font-size: 12.5px; color: var(--tinta-80); }
.editor__bar-total strong { white-space: nowrap; font: 700 15px var(--f-m); color: var(--tinta); font-variant-numeric: tabular-nums; }

.iconlink { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); color: var(--tinta); }
.iconlink:hover { border-color: var(--tinta); color: var(--tinta); }
.pdfact { display: inline-flex; gap: 6px; }
.icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.btn .icon { margin-right: -2px; }
.pdfview { margin: 0 0 10px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); }
.pdfview__frame { display: block; width: 100%; height: min(78vh, 820px); min-height: 420px; border: 0; background: #ffffff; }
.pdfdlg { width: min(1000px, calc(100vw - 24px)); height: min(92vh, 940px); max-width: none; max-height: none; padding: 0; border: 1px solid var(--tinta); border-radius: var(--r-3); background: var(--papel); color: var(--tinta); }
.pdfdlg[open] { display: flex; flex-direction: column; }
.pdfdlg::backdrop { background: oklch(0.2 0.05 258 / 0.6); }
.pdfdlg__head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 10px 12px; border-bottom: 1px solid var(--rule-2); background: var(--margin); }
.pdfdlg__head h2 { flex: 1 1 140px; margin: 0; font: 600 15px/1.3 var(--f-d); }
.pdfdlg__frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: var(--arena-2); }
.pdfdlg__note { margin: 0; padding: 6px 12px; border-top: 1px solid var(--rule); }

@media (min-width: 720px) {
  .datos__row { grid-template-columns: 170px minmax(0, 1fr); }
  .datos__row > .datos__change { grid-column: 3; justify-self: end; }
  summary.datos__row { grid-template-columns: 170px minmax(0, 1fr) auto; }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
  .editor { grid-template-columns: minmax(0, 1fr) 320px; gap: 0 20px; }
  .editor__main { grid-column: 1; }
  .editor__aside { grid-column: 2; grid-row: 1; position: sticky; top: 12px; margin: 0; }
  .sum__actions { display: grid; gap: 8px; }
  .sum__actions .btn { width: 100%; }
  .editor__bar { display: none; }
}

/* ── #983 (X-28) : descarga por lote ───────────────────────────────────────────────────────────────────────────── */
.batch { margin: 0 0 10px; }
.batch__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.batch__bar .btn { margin: 0; }
.batch__all { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin: 0; font-weight: 600; cursor: pointer; }
.batch__all input { width: 20px; height: 20px; margin: 0; }
.batch__count { margin: 0; flex: 1 1 200px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.batch .help { margin: 6px 0 0; max-width: 78ch; }
.pick { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; margin: -6px 0 -6px -10px; cursor: pointer; }
.pick input { width: 20px; height: 20px; margin: 0; }
.pick:has(input:focus-visible) { outline: 2px solid var(--caqui); outline-offset: -4px; border-radius: var(--r-1); }
.rowhead { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.rowhead > span { min-width: 0; }

/* ── #983 (X-20) : la vista previa composée — la facture dans su modelo, y a su lado el resumen y la emisión ───────────────────── */
.pvmodel { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 16px; padding: 10px 14px; }
.pvmodel__text { flex: 1 1 280px; min-width: 0; }
.pvmodel__text .sh { margin-bottom: 4px; }
.pvmodel__facts { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0 0 4px; }
.pvmodel__facts > div { display: flex; flex-wrap: wrap; gap: 0 6px; align-items: baseline; padding: 0; border: 0; }
.pvmodel__facts > div:nth-child(2) { flex: 1 1 100%; flex-wrap: wrap; }
.pvmodel__facts > div:nth-child(2) dd { margin: 0; flex: 1 1 0; min-width: 0; }
/* Couleur : la valeur choisie sur une ligne, le ton imprimé sur la suivante — jamais « en / el / PDF » coupé en trois. */
.pvmodel__facts .aspect__color { display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; }
.pvmodel__facts .aspect__sep { display: none; }
.pvmodel__facts .aspect__printed { display: block; flex: 1 1 100%; margin-top: 2px; font-size: 12.5px; color: var(--tinta-80); }
.aspect__printed { overflow-wrap: normal; }
.aspect__pdf { white-space: nowrap; }
.pvmodel__facts .mono { white-space: nowrap; }
.pvmodel .note { margin: 0; font-size: 12.5px; }
.pvmodel__act { margin: 0; }
.pv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; }
.pv__side { display: grid; gap: 12px; min-width: 0; }
.pv__side > * { margin: 0; }
.pv__paper { min-width: 0; }
.pv__paper > .pvmodel { margin: 0 0 12px; }
.pvsum { padding: 10px 14px; }
.pvsum h2 { margin: 0 0 4px; font-size: 14px; }
.pvsum__number { margin: 0 0 6px; font-size: 12px; line-height: 1.45; color: var(--tinta-80); }
.pvsum__number strong { color: var(--tinta); }
.pvsum .sum__rows { margin: 0; }
.pvsum .sum__rows > div { padding: 3px 0; }
.pvsum__who { padding-bottom: 4px; border-bottom: 1px solid var(--rule-2); margin-bottom: 4px; }
.pvsum__who dd { flex: 0 1 auto; min-width: 0; white-space: normal; overflow-wrap: anywhere; font: 500 13px var(--f-t); }
.pvsum__who dt { flex: none; overflow-wrap: normal; }
.pvsum__kind .kindline { align-items: flex-start; text-align: left; }
.pvnotes { margin: 0 0 12px; }
.pvnotes h2 { font-size: 13px; margin: 0 0 4px; }
.pvnotes ul { margin: 0; padding-left: 18px; }
.pvnotes li { margin: 0 0 3px; font-size: 12.5px; }
.pv__side .panel--focus { padding: 10px 14px; gap: 8px; }
.pv__side .panel--focus h2 { font-size: 14px; }
.pv__side .panel--focus .note { margin: 0; font-size: 12px; line-height: 1.45; }
.pv__side .check--confirm { gap: 10px; min-height: 0; padding: 8px 10px; }
.pv__side .check--confirm label { font-size: 12.5px; line-height: 1.4; }
.paper { display: grid; gap: 14px; justify-items: center; margin: 0 0 12px; padding: 14px; background: var(--arena-2); border: 1px solid var(--rule); border-radius: var(--r-2); }
.paper__page { width: 100%; max-width: 780px; margin: 0; }
.paper__page svg { display: block; width: 100%; height: auto; background: #ffffff; border: 1px solid var(--rule-2); box-shadow: 0 1px 2px oklch(0.29 0.075 258 / 0.12), 0 8px 22px oklch(0.29 0.075 258 / 0.1); }
.paper__page figcaption { margin: 6px 0 0; text-align: center; }
.pvtext { margin-top: 0; }
.pvbar { display: none; }
#emitir { scroll-margin-top: 12px; }

@media (min-width: 1024px) {
  .pv { grid-template-columns: minmax(0, 1fr) 380px; gap: 0 20px; }
  .pv__side { grid-column: 2; grid-row: 1; position: sticky; top: 12px; align-content: start; }
  .pv__paper { grid-column: 1; grid-row: 1; }
  /* La décision d'abord : à cette largeur, « Emitir » est dans le premier écran ; le résumé chiffré suit, dans la même colonne collante. */
  .pv__side .pvsum { order: 2; }
}
/* Passe 1 : « Volver al borrador » est un lien discret, jamais le plus grand bouton de la page ; « Ver a tamaño completo » (sous 1024 px) change la
   largeur de la composition — le frère `.paper` — sans second dessin ni script. */
.backlink { display: inline-flex; align-items: center; min-height: 40px; font-size: 13px; font-weight: 500; }
.zoom { margin: 0 0 8px; }
.zoom > summary { width: fit-content; }
.zoom__off { display: none; }
.zoom[open] .zoom__on { display: none; }
.zoom[open] .zoom__off { display: inline; }
.zoom[open] + .paper { grid-template-columns: max-content; justify-items: start; overflow-x: auto; }
.zoom[open] + .paper .paper__page { width: 794px; max-width: none; }
@media (min-width: 1024px) { .zoom { display: none; } }
@media (max-width: 1023px) {
  /* Passe 1 : sous 1024 px, l'ordre est celui de la décision — le récapitulatif chiffré, LE DOCUMENT, puis la carte « Emitir » et sa case. */
  .pv__side { display: contents; }
  .pv__side > .pvsum { order: 1; }
  .pv__paper { order: 2; display: flex; flex-direction: column; }
  .pv__side > :not(.pvsum) { order: 3; }
  .pv__paper > .zoom { order: 0; }
  .pv__paper > .paper { order: 1; }
  .pv__paper > .pvmodel { order: 2; margin: 0 0 12px; }
  .pv__paper > .pvtext { order: 3; }
  /* Sous 1024 px la colonne passe sous le titre et la confirmation est loin : une barre basse garde « Revisar y emitir » à portée du pouce. */
  /* La barre est DANS le flux, après le contenu, et colle au bas de l'écran tant que sa place naturelle est plus bas : au repos (fin de page,
     capture pleine page) elle est à sa place et ne recouvre jamais le résumé ; en défilement elle reste à portée du pouce. */
  .pvbar { position: sticky; z-index: 6; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 64px; margin: 12px -16px 0; padding: 8px 16px; background: var(--papel); border-top: 1px solid var(--rule-2); }
  .pvbar__total { margin: 0; font-size: 12.5px; line-height: 1.25; color: var(--tinta-80); }
  .pvbar__total strong { display: block; font: 700 16px var(--f-m); color: var(--tinta); }
  .pvbar .btn { min-height: 44px; flex: 0 1 auto; }
  html:has(.pvbar) { scroll-padding-bottom: 80px; }
}
@media (max-width: 719px) {
  .paper { padding: 8px; }
  .pvmodel__act .btn { width: 100%; }
}

/* ── Ancho estrecho : tablas apiladas, botones anchos ─────────────────────────────────────────────────── */
@media (max-width: 719px) {
  .table--stack thead { display: none; }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; width: 100%; }
  .table--stack tr { padding: 6px 0; border-bottom: 1px solid var(--rule-2); }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack th, .table--stack td { border: 0; padding: 2px 10px; }
  .table--stack td[data-label] { display: flex; gap: 10px; justify-content: space-between; }
  .table--stack td[data-label]::before { content: attr(data-label); font-size: 11px; color: var(--tinta-60); flex: none; max-width: 45%; }
  .table--stack td.num { text-align: right; }
  .table--amounts { max-width: none; }
  .ph__actions, .ph__actions form, .ph__actions .btn, .actions--bar .btn, .actions--bar form { width: 100%; }
  .actions--bar form .btn { width: 100%; }
  /* #983 (X-26) : en-tête court — la marque et le menu de la personne sur une ligne, la navigation repliée (le script la referme ; sans
     lui elle reste ouverte et passe à la ligne), l'émetteur et « Nueva factura » dessous ; cibles de 40 px. */
  .band__inner { padding: 4px 16px; gap: 0 12px; }
  .band__gloss, .brand__org { display: none; }
  .foot__col a { min-height: 40px; }
  .top__inner { gap: 0 8px; min-height: 0; }
  /* Passe 1 : la ligne de marque porte aussi « Menú » (fermé) ; ouvert, il passe sur sa propre ligne, au-dessus de la navigation. */
  .brand { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.15; }
  .menu--user { order: 3; margin-left: 0; }
  .menu--user .menu__label { position: absolute; width: 1px; height: 1px; overflow: clip; clip-path: inset(50%); white-space: nowrap; }
  .menu--user > .menu__btn { padding: 4px 6px; }
  .menu--nav { order: 2; flex: 0 0 auto; }
  .menu--nav[open] { order: 4; flex: 0 0 100%; }
  .menu--nav > .menu__btn { display: flex; min-height: 40px; margin: 0; padding: 4px 8px; }
  .menu--nav[open] > .menu__btn { border-color: var(--rule-2); margin: 0 0 6px; }
  .menu--nav[open] > .menu__btn::after { margin-left: auto; }
  .nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 8px; margin-bottom: 6px; }
  .nav__list a { height: 40px; padding: 0 6px; white-space: normal; }
  .nav__aside { margin-left: 0; }
  .ctx__inner { gap: 6px 12px; padding-top: 4px; padding-bottom: 8px; }
  .ctx__issuer { flex: 1 1 0; }
  .ctx__new { width: auto; }
  .ctx__new .btn { width: auto; padding: 0 12px; }
  .issuer__change { min-height: 40px; }
  .issuer__form { display: none; }
  /* Un titre de section long (aide : « Marca, logo, modelo y color de las facturas ») passe à la ligne au lieu de déborder. */
  .sh h2, .sh h3 { white-space: normal; min-width: 0; overflow-wrap: anywhere; }
  .btn, .btn--sm { min-height: 40px; }
  /* CV-4 (C-36) : champs, cases et boutons à 40 px ou plus ; une ligne de choix se touche sur toute sa largeur. */
  input[type="text"], input[type="email"], input[type="search"], input[type="date"], input[type="color"], input:not([type]), select, textarea, input[type="file"] { min-height: 40px; }
  input[type="radio"], input[type="checkbox"] { width: 22px; height: 22px; margin: 0; }
  .check { min-height: 40px; align-items: center; }
  .toolbar .check, .line .check { min-height: 40px; }
  .check label { display: flex; align-items: center; flex: 1; min-height: 40px; }
  .check--block { grid-template-columns: 22px 1fr; min-height: 44px; }
  summary { min-height: 40px; }
  .toc a, .help-index a { min-height: 40px; }
  .more > summary, .mcard__more > summary { min-height: 40px; }
  .more > summary { display: inline-flex; align-items: center; padding: 0 2px; }
  .chooser__bar .btn { width: 100%; }
  .batch__bar .btn { width: 100%; white-space: normal; text-align: center; }
  /* #983 : la barre d'actions de l'éditeur reste à portée du pouce ; le défilement d'ancrage laisse sa hauteur libre. */
  /* CV-4 (M-7) : deux boutons côte à côte (le principal à gauche), 64 px en tout ; `scroll-padding-bottom` est égal à cette hauteur :
     rien n'est masqué sous la barre quand un champ prend le foyer. */
  html { scroll-padding-bottom: 64px; }
  html:has(.chooser__bar:not([hidden])) { scroll-padding-bottom: 72px; }
  .actions--sticky { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; height: 64px; margin: 12px -16px 0; padding: 8px 16px; background: var(--papel); border-top: 1px solid var(--rule-2); }
  .actions--sticky .btn { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; padding: 0 8px; white-space: normal; text-align: center; font-size: 12.5px; line-height: 1.2; }
  .editor__bar { flex-wrap: wrap; height: auto; row-gap: 2px; padding-top: 6px; }
  html:has(.editor__bar) { scroll-padding-bottom: 96px; }
  .line__buttons, .line__buttons .btn { width: 100%; }
  .line__buttons .btn { flex: 1 1 0; }
  #presentacion-seccion .aspect__body { grid-template-columns: minmax(0, 1fr); }
  .presum__action .btn { width: 100%; }
}
@media (max-width: 479px) {
  .aspect__body { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

@media (max-width: 719px) {
  .iconlink { width: 40px; height: 40px; }
  .chip { min-height: 44px; }
  .quickdue .btn { flex: 1 1 0; }
  .kind { padding-top: 12px; padding-bottom: 12px; }
  .datos__change { min-height: 40px; }
  .pdfview__frame { min-height: 360px; height: 70vh; }
  /* Page ajustée à la largeur : la hauteur du dialogue suit celle de la page (A4) plus l'en-tête et la note — jamais un grand vide gris dessous. */
  .pdfdlg { width: 100vw; height: min(100dvh, calc(100vw * 1.4143 + 126px)); max-width: none; border-radius: 0; border: 0; }
  .table--stack td[data-label="PDF"], .table--stack td[data-label="Acciones"] { align-items: center; }
  .table--stack td .rowform .btn { width: auto; }
}
@media (prefers-reduced-motion: reduce) { .menu > .menu__btn::after { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  .btn, input, select, a { transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .badge::before, .btn, .marking, .flash, .panel, .rows, .sheet, .compare__side { border: 1px solid CanvasText; }
  select { appearance: auto; background-image: none; padding-right: 10px; }
}
@media print {
  .band, .nav, .skip, .top .menu--user, .top .menu--nav, .ctx__new, .foot__col, .ph__actions, .actions, .live-status, .help-index { display: none; }
  body { background: #fff; }
}
/* #938 : une date d'un historique ne se coupe jamais (« 20/10/2026 », jamais « 20/1 0/20 26 »). */
.nowrap { white-space: nowrap; }

/* ── Passe 1 (C2) : listes, aide, émetteurs ────────────────────────────────────────────────────────────────────────────────── */
/* Les noms de la première colonne sont des liens discrets : un soulignement fin et léger (jamais la couleur seule), sans graisse de titre. */
/* Passe 2 : poids normal (même dans `.rowhead`, où le lien n'est pas un enfant direct du `th`), soulignement fin et atténué en permanence. */
.table tbody th a:not(.btn) { font-weight: 400; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--tinta-40); }
.table tbody th a:not(.btn):hover { text-decoration-color: currentColor; }
/* Le bouton des cases passe d'« éteint » (pointillé) à « actif » (plein) sans fondu : une transition ne servirait qu'à montrer un état intermédiaire illisible. */
.btn--sm[data-batch-submit] { transition: none; }
.batch__how { margin: 4px 0 0; }
.batch__how .help { max-width: 78ch; }
.more--list { margin: 0 0 12px; }
.more--list > summary { min-height: 40px; font-size: 13px; font-weight: 600; color: var(--tinta); }
.more--list .table-wrap { margin-top: 6px; }
.issuers__common { margin: 0 0 10px; max-width: 78ch; }
.help-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.help-doc { min-width: 0; }
.help-doc .panel { max-width: 700px; margin-bottom: 10px; padding-top: 14px; padding-bottom: 12px; }
.help-doc .panel p, .help-doc .panel li { font-size: 15px; line-height: 1.6; }
.help-doc .panel p { margin: 0 0 8px; }
.help-doc .panel .note { font-size: 13px; }
.help-doc .panel li { margin: 0 0 5px; }
.help-top { margin: 6px 0 0; font-size: 12.5px; }
.help-top a { display: inline-flex; align-items: center; min-height: 32px; }
/* Passe 2 : l'index est un <details> « Temas de la ayuda » (fermé par défaut sous 1100 px) ; les rubriques, elles, ne se replient jamais
   (les liens d'ancre des autres pages y mènent). */
.help-index__d > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px; list-style: none; cursor: pointer; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); font: 600 13px var(--f-t); color: var(--tinta); }
.help-index__d > summary::-webkit-details-marker { display: none; }
.help-index__d > summary::after { content: "+"; font: 500 16px var(--f-m); color: var(--tinta-60); }
.help-index__d[open] > summary::after { content: "−"; }
.help-index__d[open] > ul { margin-top: 8px; }
@media (min-width: 1100px) {
  .help-layout { grid-template-columns: 260px minmax(0, 700px); gap: 0 32px; align-items: start; }
  .help-index { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; margin: 0; padding: 10px 12px; background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-2); }
  .help-index__d > summary { min-height: 0; padding: 0 6px 6px; border: 0; border-radius: 0; background: transparent; cursor: default; pointer-events: none; font: 500 11px var(--f-m); letter-spacing: 0.06em; text-transform: uppercase; color: var(--tinta-60); }
  .help-index__d > summary::after { content: none; }
  .help-index__d[open] > ul { margin-top: 0; }
  .help-index ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .help-index a { display: flex; min-height: 28px; padding: 0 6px; border: 0; border-radius: var(--r-1); background: transparent; font-size: 12.5px; }
  .help-index a:hover { background: var(--arena); }
  /* Sans script, l'index latéral reste lisible même fermé (le script l'ouvre ; ceci couvre le repli sans JS). */
  @supports selector(::details-content) {
    .help-index__d::details-content { content-visibility: visible; display: block; }
  }
  /* L'index est toujours à l'écran : « Volver al índice » n'a plus d'objet. */
  .help-top { display: none; }
}

/* ── Ventas (#983, X-22 ; tableau de bord PV1-X-33, D-325) ─────────────────────────────────────────────────────────────────────
   Clases prefijadas `sales-`. Gráficos en SVG inline: los colores pasan por clases (nunca un atributo `style`, CSP `style-src 'self'`),
   la textura « declarado » por un <pattern>. Marcas: tinta (serie actual), barra FANTASMA cálida (año anterior), caqui (segunda medida),
   contorno punteado (mes o trimestre en curso). Reparto fiscal: cuatro tonos FIJOS por tratamiento, validados (ΔE daltonismo ≥ 8,9,
   visión normal ≥ 18,2, todos los pares) y « Otros » en gris. Ni el color solo (leyenda, valores, tabla « Ver los datos ») ni texto con
   el color de la serie. Animación: solo con script, una vez por carga, ≤ 250 ms por marca y ≤ 400 ms en total ; nada bajo
   `prefers-reduced-motion` ; sin script, el estado final. */

.sales-page {
  --sales-c1: oklch(0.46 0.11 258); --sales-c2: oklch(0.665 0.17 40); --sales-c3: oklch(0.60 0.11 180); --sales-c4: oklch(0.76 0.13 100); --sales-c0: oklch(0.72 0.012 80);
  --sales-ghost: oklch(0.905 0.016 75); --sales-ghost-cap: oklch(0.56 0.025 75);
}

/* Barra de filtros : un formulario GET en una tarjeta ; pegajosa en pantalla ancha. */
.sales-filter { margin: 0 0 12px; padding: 10px 12px; background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-3); }
.sales-filter__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.sales-filter__field { min-width: 0; margin: 0; }
.sales-filter__label { display: block; margin: 0 0 3px; font: 600 12.5px var(--f-t); color: var(--tinta); }
.sales-filter__field--period { flex: 0 0 auto; }
.sales-filter__field--dim { flex: 1 1 170px; max-width: 250px; }
.sales-filter__field select { min-height: 40px; }
.sales-filter__go { min-height: 40px; }

/* Periodo : control segmentado — la opción elegida está « posada » (papel, marco tinta, marca) : nunca el color solo. */
.sales-seg { position: relative; display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; background: var(--arena-2); border: 1px solid var(--rule-2); border-radius: var(--r-3); }
.sales-seg__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.sales-seg__opt { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; padding: 0 14px; border: 1px solid transparent; border-radius: var(--r-2); font: 500 13px/1.2 var(--f-t); color: var(--tinta-80); white-space: nowrap; cursor: pointer; transition: background-color 0.15s, border-color 0.15s, color 0.15s; }
.sales-seg__opt:hover { color: var(--tinta); border-color: var(--rule-2); }
.sales-seg__input:checked + .sales-seg__opt { background: var(--papel); border-color: var(--tinta); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px oklch(0.29 0.075 258 / 0.14); }
.sales-seg__input:checked + .sales-seg__opt::before { content: ""; flex: none; width: 8px; height: 4px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.sales-seg__input:focus-visible + .sales-seg__opt { outline: 2px solid var(--caqui); outline-offset: 2px; }

/* Interruptor : una casilla NATIVA dibujada como interruptor — apagado hueco, encendido lleno, el botón cambia de lado. */
.sales-switch { position: relative; display: flex; align-items: center; gap: 10px; min-height: 42px; }
.sales-switch .sales-switch__input { appearance: none; -webkit-appearance: none; position: relative; z-index: 1; flex: none; width: 36px; height: 20px; margin: 0; border: 0; border-radius: 10px; background: var(--papel); box-shadow: inset 0 0 0 1.5px var(--tinta-60); cursor: pointer; transition: background-color 0.15s, box-shadow 0.15s; }
.sales-switch .sales-switch__input::before { content: ""; position: absolute; top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--tinta-60); transition: transform 0.15s, background-color 0.15s; }
.sales-switch .sales-switch__input:checked { background: var(--tinta); box-shadow: none; }
.sales-switch .sales-switch__input:checked::before { background: var(--papel); transform: translateX(16px); }
.sales-switch .sales-switch__input:focus-visible { outline: 2px solid var(--caqui); outline-offset: 2px; }
.sales-switch__label { display: flex; flex-direction: column; font: 600 13px/1.3 var(--f-t); color: var(--tinta); cursor: pointer; }
.sales-switch__label::after { content: ""; position: absolute; inset: 0; }
.sales-switch__hint { font: 400 12px/1.35 var(--f-t); color: var(--tinta-60); }

/* Filtros activos : una pastilla por filtro, que lo quita (enlace) ; la cruz es un dibujo, el nombre accesible lo dice. */
.sales-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rule); }
.sales-active__k { font-size: 12px; color: var(--tinta-60); }
.sales-chip { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 32px; padding: 0 12px; border: 1px solid var(--tinta); border-radius: 16px; background: oklch(0.29 0.075 258 / 0.06); color: var(--tinta); font-size: 12.5px; text-decoration: none; }
.sales-chip:hover { background: oklch(0.29 0.075 258 / 0.12); color: var(--tinta); }
.sales-chip__k { color: var(--tinta-80); }
.sales-chip__v { min-width: 0; overflow-wrap: anywhere; font-weight: 600; }
.sales-chip__x { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sales-active__link { display: inline-flex; align-items: center; min-height: 32px; font-size: 12.5px; }
.sales-scope { margin: 0 0 12px; padding: 2px 0 2px 10px; max-width: 110ch; border-left: 2px solid var(--rule-2); font-size: 12.5px; color: var(--tinta-80); }

/* Cifras clave : una cifra principal (con su variación) y cinco cifras de apoyo, en UNA fila en pantalla ancha. */
.sales-kpis { margin: 0 0 12px; }
.sales-kpis__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.sales-kpi { min-width: 0; padding: 10px 12px; background: var(--papel); border: 1px solid var(--rule-2); border-radius: var(--r-2); }
.sales-kpi dt { margin: 0 0 3px; font: 500 12px/1.3 var(--f-t); color: var(--tinta-60); }
.sales-kpi dd { margin: 0; }
.sales-kpi__unit { font-weight: 400; }
.sales-kpi__v { display: block; font: 600 18px/1.2 var(--f-d); letter-spacing: -0.012em; color: var(--tinta); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.sales-kpi__s { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--tinta-60); }
.sales-kpi__line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; }
.sales-kpi--hero { grid-column: 1 / -1; border-color: var(--tinta); box-shadow: inset 3px 0 0 var(--caqui); padding-left: 16px; }
.sales-kpi--hero .sales-kpi__v { font-size: 28px; letter-spacing: -0.02em; }
.sales-kpi:last-child { grid-column: 1 / -1; }
.sales-kpi__cmp { display: inline-flex; }
.sales-delta { display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 8px; border-radius: 11px; font: 600 12.5px var(--f-t); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sales-delta__icon { flex: none; fill: currentColor; }
.sales-delta--up { background: var(--st-ok-t); color: var(--st-ok); }
.sales-delta--down { background: var(--st-block-t); color: var(--st-block); }
.sales-delta--flat { background: var(--arena-2); color: var(--tinta-80); }

/* Rejilla del tablero : el mes en ancho con los clientes al lado, luego pares ; los paneles de una fila tienen la misma altura. */
.sales-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0 0 12px; }
.sales-row > .panel, .sales-stack > .panel { margin: 0; }
/* Dos columnas que se apilan cada una a su altura : lo fiscal (tratamiento, IVA e IRPF) | lo comercial (países, conceptos). */
.sales-stack { display: grid; align-content: start; gap: 12px; min-width: 0; }
.sales-panel { display: flex; flex-direction: column; min-width: 0; }
.sales-panel > .sales-data { margin-top: auto; padding-top: 4px; }
.sales-head { flex-wrap: wrap; row-gap: 2px; }
.sales-head h2 { white-space: normal; }
.sales-head .sh__aside { white-space: normal; }
.sales-head::after { order: 2; }
.sales-panel .help { margin: 0 0 8px; max-width: 70ch; }
.sales-toggle { order: 3; display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid var(--rule-2); border-radius: 15px; background: var(--papel); color: var(--tinta); font: 500 12.5px var(--f-t); text-decoration: none; white-space: nowrap; }
.sales-toggle:hover { border-color: var(--tinta); color: var(--tinta); }

/* Gráficos : tres geometrías para el mes, dos para el trimestre ; la hoja elige según el ANCHO DEL CONTENEDOR. */
.sales-chart { container-type: inline-size; margin: 2px 0 4px; }
.sales-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sales-svg--narrow { max-width: 360px; }
.sales-svg--mid, .sales-svg--wide { display: none; }
@container (min-width: 480px) {
  .sales-chart .sales-svg--narrow { display: none; }
  .sales-chart--m .sales-svg--mid { display: block; max-width: 640px; }
  .sales-chart--s .sales-svg--wide { display: block; max-width: 600px; }
}
@container (min-width: 700px) {
  .sales-chart--m .sales-svg--mid { display: none; }
  .sales-chart--m .sales-svg--wide { display: block; max-width: 820px; }
}
.sales-t { font: 400 12.5px var(--f-t); fill: var(--tinta); }
.sales-t--axis { font-size: 12px; fill: var(--tinta-60); font-variant-numeric: tabular-nums; }
.sales-t--muted { font-style: italic; }
.sales-t--value { white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.sales-fill-cur { fill: var(--tinta); }
.sales-fill-prev { fill: oklch(0.62 0.02 80); }
.sales-fill-acc { fill: var(--caqui); }
.sales-bar--partial { fill: oklch(0.90 0.03 258); stroke: var(--tinta); stroke-width: 1.5; stroke-dasharray: 3 2.5; }
.sales-fill-acc.sales-bar--partial { fill: oklch(0.92 0.045 45); stroke: var(--caqui-ink); }
.sales-ghost { fill: var(--sales-ghost); }
.sales-ghost-cap { stroke: var(--sales-ghost-cap); stroke-width: 2; stroke-linecap: round; }
.sales-hatch-bg { fill: var(--papel); }
.sales-hatch-line { fill: var(--tinta); }
.sales-grid { stroke: var(--rule); stroke-width: 1; }
.sales-axis { stroke: var(--rule-2); stroke-width: 1; }
.sales-hit { fill: transparent; }
.sales-col { outline: none; }
.sales-col:hover .sales-hit, .sales-col--on .sales-hit { fill: oklch(0.29 0.075 258 / 0.05); }
.sales-col:focus-visible .sales-hit { stroke: var(--caqui); stroke-width: 2; }
.sales-col:hover .sales-bar.sales-fill-cur:not(.sales-bar--partial), .sales-col--on .sales-bar.sales-fill-cur:not(.sales-bar--partial) { fill: var(--tinta-2); }
/* Info-bulle (script) : dibujada en el SVG, posicionada por `transform` — nunca un atributo `style`. */
.sales-tip { pointer-events: none; }
.sales-tip__bg { fill: var(--tinta-2); }
.sales-tip__h { font: 500 12px var(--f-t); fill: oklch(0.86 0.02 258); }
.sales-tip__v { font: 600 14px var(--f-d); fill: var(--papel); font-variant-numeric: tabular-nums; }
.sales-tip__s { font: 400 12px var(--f-t); fill: oklch(0.90 0.015 258); font-variant-numeric: tabular-nums; }

/* Reparto (tratamiento fiscal) : una barra al 100 %, segmentos separados por 2 px de papel, y una leyenda con cifras. */
.sales-cat-1 { fill: var(--sales-c1); }
.sales-cat-2 { fill: var(--sales-c2); }
.sales-cat-3 { fill: var(--sales-c3); }
.sales-cat-4 { fill: var(--sales-c4); }
.sales-cat-0 { fill: var(--sales-c0); }
.sales-share-wrap { margin: 6px 0 8px; }
.sales-share { display: block; width: 100%; height: 14px; }
.sales-share__seg { stroke: var(--papel); stroke-width: 2px; }
.sales-share__legend { display: grid; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; }
.sales-share__item { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 4.2em; align-items: center; column-gap: 10px; min-height: 26px; font-size: 13px; }
.sales-share__item + .sales-share__item { border-top: 1px solid var(--rule); }
.sales-share__name { min-width: 0; overflow-wrap: anywhere; }
.sales-share__value { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sales-share__pct { color: var(--tinta-60); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }

/* Clasificaciones : lista HTML (etiqueta · barra · valor), un solo tono. La etiqueta se pliega en tantas líneas como haga falta, nunca se
   abrevia (fix5-F4, N-1) ; en contenedor estrecho la etiqueta pasa encima de la barra. Un cliente es un enlace que filtra la página. */
.sales-chart--rank { margin: 0; }
.sales-rank { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sales-rank__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar"; column-gap: 12px; row-gap: 4px; align-items: baseline; min-width: 0; }
.sales-rank__label { grid-area: label; min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.35; color: var(--tinta); }
.sales-rank__label[href] { text-decoration-color: var(--rule-2); }
.sales-rank__label[href]:hover { color: var(--caqui-ink); text-decoration-color: currentColor; }
.sales-rank__value { grid-area: value; white-space: nowrap; text-align: right; font: 600 12.5px var(--f-t); font-variant-numeric: tabular-nums; color: var(--tinta); }
.sales-rank__bar { grid-area: bar; display: block; width: 100%; height: 10px; overflow: hidden; }
.sales-single { margin: 4px 0 8px; max-width: 70ch; font-size: 14px; line-height: 1.5; color: var(--tinta); }

/* Leyenda y tabla equivalente */
.sales-legend { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 4px 0 2px; padding: 0; list-style: none; font-size: 12.5px; color: var(--tinta-80); }
.sales-legend li { display: inline-flex; align-items: center; gap: 7px; min-height: 24px; }
.sales-key { flex: none; overflow: visible; }
.sales-data { margin-top: 4px; }
.sales-data > summary { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; font-weight: 600; text-decoration: underline; text-decoration-color: var(--caqui); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.sales-data[open] > summary { margin-bottom: 4px; }
.sales-empty form { margin-top: 10px; }
.sales-empty .btn { min-height: 40px; }
.sales-empty p + p { margin-top: 10px; }

@media (max-width: 719.98px) {
  .sales-filter__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sales-filter__field--period, .sales-switch, .sales-filter__go { grid-column: 1 / -1; }
  .sales-filter__row:not(:has(#ventas-pais)) .sales-filter__field--dim { grid-column: 1 / -1; }
  .sales-filter__field--dim { max-width: none; }
  .sales-seg { display: flex; }
  .sales-seg__opt { flex: 1 1 auto; min-height: 40px; padding: 0 8px; }
  .sales-chip, .sales-active__link, .sales-toggle { min-height: 40px; }
  .sales-head .sh__aside { flex: 1 0 auto; }
  .sales-head::after { display: none; }
  .sales-kpi--hero .sales-kpi__v { font-size: 26px; }
  /* Téléphone : la cifra principal en tarjeta, las cinco de apoyo en UNA lista compacta (etiqueta a la izquierda, cifra a la derecha). */
  .sales-kpis__grid { gap: 0; }
  .sales-kpi--hero { margin-bottom: 8px; }
  .sales-kpi:not(.sales-kpi--hero) { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 12px; padding: 8px 12px; border-top-width: 0; border-radius: 0; }
  .sales-kpi:nth-child(2) { border-top-width: 1px; border-radius: var(--r-2) var(--r-2) 0 0; }
  .sales-kpi:last-child { border-radius: 0 0 var(--r-2) var(--r-2); }
  .sales-kpi:not(.sales-kpi--hero) dt { margin: 0; }
  .sales-kpi:not(.sales-kpi--hero) dd { margin-left: auto; text-align: right; }
  .sales-kpi:not(.sales-kpi--hero) .sales-kpi__v { font-size: 16px; }
}
@media (max-width: 399.98px) {
  .sales-seg__long { display: none; }
  .sales-seg__input:checked + .sales-seg__opt::before { display: none; }
  .sales-kpi__v { font-size: 17px; }
}
@media (min-width: 720px) {
  .sales-filter { position: sticky; top: 8px; z-index: 4; box-shadow: 0 8px 16px -14px oklch(0.29 0.075 258 / 0.45); }
  .sales-kpis__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .sales-kpi:last-child { grid-column: auto; }
  .sales-kpi--hero .sales-kpi__v { font-size: 34px; }
}
@media (min-width: 960px) {
  .sales-kpis__grid { grid-template-columns: minmax(0, 2.3fr) repeat(5, minmax(0, 1fr)); }
  .sales-kpi--hero { grid-column: auto; grid-row: span 1; }
  .sales-kpi:not(.sales-kpi--hero) .sales-kpi__v { margin-top: 6px; font-size: 22px; }
  .sales-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sales-row--main { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  /* Un cliente filtrado : su clasificación no enseña nada (la pastilla lo nombra) ; el mes ocupa la fila. */
  .sales-row--solo { grid-template-columns: minmax(0, 1fr); }
}
@container (min-width: 420px) {
  .sales-rank { grid-template-columns: minmax(7rem, 14rem) minmax(4rem, 1fr) max-content; column-gap: 14px; row-gap: 10px; }
  .sales-rank__row { grid-column: 1 / -1; grid-template-columns: subgrid; grid-template-areas: "label bar value"; align-items: center; }
}

/* Coreografía de llegada : solo con script (`scripting: enabled`) y sin preferencia de movimiento reducido ; una vez por carga. Las barras
   crecen desde la base en cascada (≤ 240 ms cada una, retraso máximo 165 ms) ; las cifras aparecen sin mover la maquetación. Tras un
   cambio de filtro, el contenido nuevo solo aparece por fundido. */
@media (prefers-reduced-motion: reduce) {
  .sales-seg__opt, .sales-switch .sales-switch__input, .sales-switch .sales-switch__input::before { transition: none; }
}
@keyframes sales-grow { from { transform: scaleY(0); } }
@keyframes sales-grow-x { from { transform: scaleX(0); } }
@keyframes sales-fade { from { opacity: 0; } }
@keyframes sales-rise { from { opacity: 0; transform: translateY(4px); } }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .sales-kpi { animation: sales-rise 220ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .sales-kpi:nth-child(2) { animation-delay: 30ms; }
  .sales-kpi:nth-child(3) { animation-delay: 60ms; }
  .sales-kpi:nth-child(4) { animation-delay: 90ms; }
  .sales-kpi:nth-child(5) { animation-delay: 120ms; }
  .sales-kpi:nth-child(6) { animation-delay: 150ms; }
  .sales-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: sales-grow 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .sales-bar--neg { transform-origin: 50% 0; }
  .sales-ghost, .sales-ghost-cap { animation: sales-fade 240ms ease-out both; }
  .sales-values { animation: sales-fade 160ms ease-out 240ms both; }
  .sales-rank__fill, .sales-share__seg { transform-box: fill-box; transform-origin: 0 50%; animation: sales-grow-x 240ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .sales-i1 .sales-bar, .sales-i1 .sales-rank__fill, .sales-share__seg.sales-i1 { animation-delay: 15ms; }
  .sales-i2 .sales-bar, .sales-i2 .sales-rank__fill, .sales-share__seg.sales-i2 { animation-delay: 30ms; }
  .sales-i3 .sales-bar, .sales-i3 .sales-rank__fill, .sales-share__seg.sales-i3 { animation-delay: 45ms; }
  .sales-i4 .sales-bar, .sales-i4 .sales-rank__fill, .sales-share__seg.sales-i4 { animation-delay: 60ms; }
  .sales-i5 .sales-bar, .sales-i5 .sales-rank__fill { animation-delay: 75ms; }
  .sales-i6 .sales-bar, .sales-i6 .sales-rank__fill { animation-delay: 90ms; }
  .sales-i7 .sales-bar { animation-delay: 105ms; }
  .sales-i8 .sales-bar { animation-delay: 120ms; }
  .sales-i9 .sales-bar { animation-delay: 135ms; }
  .sales-i10 .sales-bar { animation-delay: 150ms; }
  .sales-i11 .sales-bar { animation-delay: 165ms; }
  .sales-page--swapped .sales-kpi, .sales-page--swapped .sales-bar, .sales-page--swapped .sales-ghost, .sales-page--swapped .sales-ghost-cap, .sales-page--swapped .sales-values, .sales-page--swapped .sales-rank__fill, .sales-page--swapped .sales-share__seg { animation: sales-fade 180ms ease-out both; }
}

/* ── #983 (X-25, partie 2 ; passe 1) : changer la razón social o el domicilio fiscal — un repli par ligne ─────────────────────── */
.datos__why-list { margin: 8px 0 0; padding-left: 18px; }
.datos__why-list li { margin: 0 0 4px; }
.datos__form { min-width: 0; max-width: 640px; margin: 4px 0 10px; padding: 12px 14px; background: var(--papel-2); border: 1px solid var(--rule-2); border-radius: var(--r-2); }
.datos__form .actions { margin: 0; }

/* Passe 2 : à 320 px « Portal de facturación » tient sur UNE ligne (taille et espacements réduits ; le nom accessible reste complet). */
@media (max-width: 359px) {
  .brand { gap: 6px; }
  .brand__name { font-size: 12.5px; letter-spacing: -0.012em; white-space: nowrap; }
  .menu--nav > .menu__btn { padding: 4px 4px; gap: 4px; }
  .menu--user > .menu__btn { padding: 4px 2px; gap: 4px; }
  .top__inner { gap: 0 4px; }
  .ph__actions .btn { flex-wrap: wrap; row-gap: 0; padding-top: 4px; padding-bottom: 4px; text-align: center; }
}

/* ── #983 vague 3 (PV1-X-30, X-31, X-32, X-35 ; D-325) : contrôles premium, zones cliquables, destinataire en cartes, autosave ─────────── */
/* Cases et radios dessinées : cadre tinta, coche ou point papier sur fond tinta ; survol, foyer caqui, désactivé lisible, erreur rouge. */
input[type="checkbox"]:not([class*="sales-"]), input[type="radio"]:not([class*="sales-"]) {
  appearance: none; -webkit-appearance: none; display: inline-grid; place-content: center; width: 18px; height: 18px; margin: 1px 0 0; flex: none;
  border: 1.5px solid var(--tinta-60); background: var(--papel); color: var(--papel); cursor: pointer;
}
input[type="checkbox"]:not([class*="sales-"]) { border-radius: 4px; }
input[type="radio"]:not([class*="sales-"]) { border-radius: 50%; }
input[type="checkbox"]:not([class*="sales-"])::before { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg) scale(0); }
input[type="radio"]:not([class*="sales-"])::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; transform: scale(0); }
input[type="checkbox"]:not([class*="sales-"]):checked, input[type="radio"]:not([class*="sales-"]):checked { background: var(--tinta); border-color: var(--tinta); }
input[type="checkbox"]:not([class*="sales-"]):checked::before { transform: rotate(-45deg) scale(1); }
input[type="radio"]:not([class*="sales-"]):checked::before { transform: scale(1); }
input[type="checkbox"]:not([class*="sales-"]):hover, input[type="radio"]:not([class*="sales-"]):hover { border-color: var(--tinta); }
input[type="checkbox"]:not([class*="sales-"]):focus-visible, input[type="radio"]:not([class*="sales-"]):focus-visible { outline: 2px solid var(--caqui); outline-offset: 2px; }
input[type="checkbox"]:not([class*="sales-"])[aria-invalid="true"], input[type="radio"]:not([class*="sales-"])[aria-invalid="true"] { border-color: var(--st-block); }
input:disabled, select:disabled, textarea:disabled { opacity: 0.55; cursor: not-allowed; background-color: var(--arena-2); }
/* Champs : foyer visible (cadre tinta + anneau caqui), erreur marquée par la bordure ET le message ; `select` à flèche dessinée. */
input[type="text"]:focus-visible, input[type="email"]:focus-visible, input[type="search"]:focus-visible, input[type="date"]:focus-visible, input:not([type]):focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--caqui); outline-offset: 1px; border-color: var(--tinta);
}
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--st-block); border-left-width: 3px; }
input[type="date"] { font-family: var(--f-m); font-size: 12.5px; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
input[type="file"]::file-selector-button:hover { border-color: var(--tinta); }

/* Pastilles radio (choix courts, ≤ 5) : un contrôle segmenté — l'option choisie est « posée » (papier, cadre tinta, coche). */
.segf { min-width: 0; margin: 0; padding: 0; border: 0; }
.segf__legend { padding: 0; margin: 0 0 3px; font: 600 12.5px var(--f-t); color: var(--tinta); }
.line .segf__legend { font-size: 11.5px; color: var(--tinta-80); }
.segf__opts { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 2px; border: 1px solid var(--rule-2); border-radius: var(--r-3); background: var(--arena-2); }
.segf__opt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 0 12px; border: 1px solid transparent; border-radius: var(--r-2); font: 500 13px/1.25 var(--f-t); color: var(--tinta-80); cursor: pointer; }
.segf__opt:hover { color: var(--tinta); border-color: var(--rule-2); background: oklch(0.994 0.004 85 / 0.6); }
.segf .segf__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.segf__opt:has(.segf__input:checked) { background: var(--papel); border-color: var(--tinta); color: var(--tinta); font-weight: 600; box-shadow: 0 1px 2px oklch(0.29 0.075 258 / 0.14); }
.segf__opt:has(.segf__input:checked)::before { content: ""; flex: none; width: 8px; height: 4px; margin-top: -3px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.segf__opt:has(.segf__input:focus-visible) { outline: 2px solid var(--caqui); outline-offset: 1px; }
.segf.field--invalid .segf__opts { border-color: var(--st-block); box-shadow: inset 3px 0 0 var(--st-block); }
.segf--wide .segf__opts { display: flex; }
.segf--wide .segf__opt { flex: 1 1 auto; justify-content: flex-start; text-align: left; }
.segf--vat .segf__opts { display: flex; }
.segf--vat .segf__opt { flex: 1 1 0; padding: 0 6px; font-family: var(--f-m); font-size: 12.5px; white-space: nowrap; }
.segf--vat .segf__opt:has(.segf__input:checked)::before { width: 6px; height: 3px; }
.toolbar .segf { flex: 0 0 auto; }
.toolbar .segf__opt { min-height: 30px; }

/* Une option en carte (retención, motivo…) : le libellé recouvre la carte entière ; choisie = cadre tinta + fond teinté + case pleine. */
.opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.opt { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; align-content: start; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); cursor: pointer; }
.opt:hover { border-color: var(--tinta-60); }
.opt__input { position: relative; z-index: 1; grid-column: 1; grid-row: 1; margin-top: 1px !important; }
.opt__label { grid-column: 2; font: 600 13.5px/1.35 var(--f-t); color: var(--tinta); cursor: pointer; }
.opt__label::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.opt > .help { grid-column: 2; margin: 2px 0 0; }
.opt > .more { grid-column: 2; position: relative; z-index: 2; }
.opt:has(.opt__input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); background: oklch(0.29 0.075 258 / 0.05); }
.opt:has(.opt__input:checked) .opt__label { font-weight: 700; }
.opt:has(.opt__input:focus-visible) { outline: 2px solid var(--caqui); outline-offset: 2px; }
.opt .opt__input:focus-visible { outline: none; }
.choice > .opts { margin-top: 2px; }
.kind { cursor: pointer; }
.kind:hover { border-color: var(--tinta-60); }
/* Une case seule en carte (« Guardar este destinatario en Clientes ») : toute la carte se touche. */
.check--card { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 10px; padding: 10px 12px; margin-top: 8px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel-2); cursor: pointer; }
.check--card > .help { grid-column: 2; margin: 2px 0 0; }
.check--card:has(input:checked) { border-color: var(--tinta); background: oklch(0.29 0.075 258 / 0.05); }
.check--card:has(input:checked) label { font-weight: 600; }
div.check { cursor: pointer; }
/* La case d'un document de la liste : toute la hauteur de la cellule, jusqu'à son bord gauche. */
.rowhead { align-self: stretch; }
.table th .pick { align-self: stretch; height: auto; min-height: 40px; margin: -9px 0 -9px -12px; width: 44px; }
.pick:hover input { border-color: var(--tinta); }

/* Destinataire (PV1-X-30) : des cartes de clients ; la carte choisie a une coche et un cadre tinta. */
.dest { display: grid; gap: 8px; }
.cpick { min-width: 0; margin: 0; padding: 0; border: 0; }
.cpick > .lg { margin-bottom: 6px; }
.cpick__search { margin: 0 0 8px; }
.ccards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; }
.cpick--long .ccards { max-height: 432px; overflow-y: auto; overscroll-behavior: contain; padding: 2px 4px 2px 2px; }
.ccard__label { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 20px; grid-template-areas: "name mark" "meta mark"; gap: 1px 10px; align-items: center; min-height: 52px; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); cursor: pointer; }
.ccard__label:hover { border-color: var(--tinta-60); background: var(--papel-2); }
.ccard .ccard__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.ccard__name { grid-area: name; min-width: 0; font: 600 13.5px/1.3 var(--f-t); color: var(--tinta); overflow-wrap: anywhere; }
.ccard__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; min-width: 0; font-size: 12px; color: var(--tinta-80); }
.ccard__id .mono { font-size: 11.5px; color: var(--tinta); }
.ccard__place { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ccard__place .flag { flex: none; width: 18px; height: auto; border-radius: 2px; }
.ccard__cc { display: inline-grid; place-items: center; min-width: 22px; height: 14px; padding: 0 3px; border: 1px solid var(--rule-2); border-radius: 2px; font-size: 9.5px; }
.ccard__mark { grid-area: mark; width: 18px; height: 18px; border: 1.5px solid var(--tinta-40); border-radius: 50%; }
.ccard__label:has(.ccard__radio:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); background: oklch(0.29 0.075 258 / 0.05); }
.ccard__label:has(.ccard__radio:checked) .ccard__mark { border: 0; background: var(--tinta); }
.ccard__label:has(.ccard__radio:checked) .ccard__mark::before { content: ""; display: block; width: 8px; height: 4px; margin: 6px 0 0 5px; border-left: 2px solid var(--papel); border-bottom: 2px solid var(--papel); transform: rotate(-45deg); }
.ccard__label:has(.ccard__radio:focus-visible) { outline: 2px solid var(--caqui); outline-offset: 2px; }
.ccard[data-applying] .ccard__label { opacity: 0.7; }
.cpick__none { margin: 6px 0 0; font-size: 12.5px; color: var(--tinta-80); }
.cpick__apply { margin-top: 8px; }
.chosen { padding: 12px 14px; border: 1px solid var(--tinta); border-radius: var(--r-2); background: var(--papel); box-shadow: inset 3px 0 0 var(--tinta); }
.chosen p { margin: 0; font-size: 13px; overflow-wrap: anywhere; }
.chosen__tag { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font: 600 11.5px var(--f-t) !important; color: var(--tinta-80); }
.chosen__check { flex: none; }
.chosen__check circle { fill: var(--tinta); }
.chosen__check path { fill: none; stroke: var(--papel); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chosen__name { margin-top: 4px !important; font: 600 17px/1.25 var(--f-d) !important; color: var(--tinta); }
.chosen__id { margin-top: 2px !important; }
.chosen__addr { margin: 4px 0 6px !important; color: var(--tinta-80); line-height: 1.45; }
.dest__change { border: 1px dashed var(--rule-2); border-radius: var(--r-2); background: var(--papel-2); }
.dest__change > summary { display: flex; align-items: center; gap: 6px; min-height: 40px; padding: 6px 12px; font: 600 13px var(--f-t); color: var(--tinta); }
.dest__change > summary::before { content: "+"; font: 500 13px var(--f-m); color: var(--tinta-60); }
.dest__change[open] > summary::before { content: "−"; }
.dest__change > .cpick, .dest__change > .help { margin: 0 12px 10px; }

/* Autosave : un état en mot ET en forme — point vert (guardado), anneau qui tourne (guardando), triangle (sin guardar / error). */
.savestate { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--tinta-80); }
.savestate__dot, .sum__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--st-ok); }
[data-save-state][data-state="saving"] .savestate__dot, [data-save-state][data-state="saving"] .sum__dot { background: transparent; border: 2px solid var(--tinta-40); border-top-color: var(--tinta); }
[data-save-state][data-dirty="1"] { color: var(--st-warn); font-weight: 600; }
[data-save-state][data-dirty="1"] .savestate__dot { border-radius: 1px; background: var(--st-warn); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
[data-save-state][data-state="conflict"], [data-save-state][data-state="offline"], [data-save-state][data-state="refused"], [data-save-state][data-state="error"] { color: var(--st-block); }
[data-save-state][data-state="conflict"] .sum__dot, [data-save-state][data-state="offline"] .sum__dot, [data-save-state][data-state="refused"] .sum__dot, [data-save-state][data-state="error"] .sum__dot,
[data-save-state][data-state="conflict"] .savestate__dot, [data-save-state][data-state="offline"] .savestate__dot, [data-save-state][data-state="refused"] .savestate__dot, [data-save-state][data-state="error"] .savestate__dot { border-radius: 1px; background: var(--st-block); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.actions .savestate { flex: 1 1 200px; }
.editor__bar-state { flex: 1 0 100%; margin: 0; font-size: 11.5px; color: var(--tinta-80); }
.editor__bar-state:empty { display: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-save-state][data-state="saving"] .savestate__dot, [data-save-state][data-state="saving"] .sum__dot { animation: u1-spin 0.8s linear infinite; }
  input[type="checkbox"]:not([class*="sales-"])::before, input[type="radio"]:not([class*="sales-"])::before { transition: transform 0.12s ease-out; }
}
@keyframes u1-spin { to { transform: rotate(360deg); } }

/* Sans empilement (PV1-X-34 dans l'éditeur) : à partir de 1180 px, Destinatario et Operación côte à côte au-dessus des lignes. */
.editor__duo { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) {
  /* Une ligne : cantidad, precio, descuento, puis les trois pastilles d'IVA — jamais « 10 % » coupé. */
  .line__cells:not(.line__cells--2) { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(176px, 1.25fr); }
  .ccards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .opts--list { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1180px) {
  .editor__duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
  .editor__duo > .panel { margin-bottom: 12px; }
  .editor__duo .ccards { grid-template-columns: minmax(0, 1fr); }
  .editor__duo .kinds, .editor__duo .opts { grid-template-columns: minmax(0, 1fr); }
  .editor__duo .seg { max-width: none; }
}
@media (max-width: 719px) {
  input[type="checkbox"]:not([class*="sales-"]), input[type="radio"]:not([class*="sales-"]) { width: 22px; height: 22px; margin: 0; }
  .segf__opts { display: flex; }
  .segf__opt { flex: 1 1 auto; min-height: 40px; }
  .toolbar .segf { flex: 1 1 100%; }
  .toolbar .segf__opt { min-height: 40px; }
  .segf--wide .segf__opts { flex-direction: column; }
  /* En étroit, les trois pastilles d'IVA d'une ligne prennent toute la largeur de la ligne : jamais sur deux rangées. */
  .line__cells > .line__vat, .line__cells > .segf--vat { grid-column: 1 / -1; }
  .segf--vat .segf__opts { flex-wrap: nowrap; }
  .opt { grid-template-columns: 22px minmax(0, 1fr); min-height: 44px; }
  .check--card { grid-template-columns: 22px minmax(0, 1fr); }
  .ccard__label { min-height: 56px; }
  .cpick--long .ccards { max-height: 360px; }
}
@media (forced-colors: active) {
  input[type="checkbox"]:not([class*="sales-"]), input[type="radio"]:not([class*="sales-"]) { appearance: auto; -webkit-appearance: auto; }
  .segf__opt:has(.segf__input:checked), .ccard__label:has(.ccard__radio:checked), .opt:has(.opt__input:checked) { outline: 2px solid Highlight; }
}

/* ── #983 (CV-4 élargi, X-34) : sans empilement en écran large — fiche de l'émetteur (tâches à gauche, repères à droite), document émis
   (la feuille, puis la correction et les détails à côté), Facturas (documents émis et brouillons côte à côte), fiche client (données et
   vérification, notes à côté), Emisores (cartes). En écran étroit : une colonne compacte, dans l'ordre de lecture. ─────────────────── */
.fgrid, .docgrid, .invgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; align-items: start; }
.fgrid__main, .fgrid__side, .docgrid__aside, .two__main { min-width: 0; }
.docgrid__aside > .disclosure { margin: 0 0 10px; }
.docgrid__aside > .panel--plain { margin-top: 0; }
.invgrid > section { min-width: 0; }
.rows--cards { background: transparent; border: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.rows--cards > .row { border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); }
.rows--cards > .row--active { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); }
@media (min-width: 1100px) {
  .fgrid { grid-template-columns: minmax(0, 1fr) 360px; }
  .fgrid__side { position: sticky; top: 12px; }
  .fgrid__side .cap { grid-template-columns: minmax(0, 1fr) auto; }
  .fgrid__side .cap__note { grid-column: 1 / -1; }
  .docgrid { grid-template-columns: minmax(0, 1fr) 300px; }
  .docgrid__aside { position: sticky; top: 12px; }
  /* fix1-C1 (N1, N2) : émises et brouillons côte à côte seulement avec « Todo » ; la colonne des brouillons à 300 px (liste compacte, voir fix1-C1). */
  .invgrid--split { grid-template-columns: minmax(0, 1fr) 300px; gap: 0 20px; }
  .invgrid--split .invgrid__docs { grid-column: 1; grid-row: 1 / span 2; }
  .invgrid--split .invgrid__drafts { grid-column: 2; grid-row: 1; }
  .rows--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rows--cards > .row { grid-template-columns: minmax(0, 1fr); align-content: space-between; }
  .rows--cards .row__aside { justify-content: flex-start; }
}

/* fix1-C2 ── Passe de correction n°1 (#983, critique NO-GO) : Modelo y colores (N4, M11, M12, idée 3). UNE grille de cartes (deux
   colonnes), la référence en option compacte en tête ; à droite (≥ 1024 px) un panneau collant (`top: 24px`) : grand aperçu numéroté, rôles,
   et le bouton de publication EN PIED du panneau — plus de barre pleine largeur. En écran étroit : une barre de 64 px au plus, montrée par
   le script seulement quand le choix diffère de ce qui est publié. ──────────────────────────────────────────────────────────────── */
.badge--rec { color: var(--tinta-80); font-weight: 500; }
.badge--rec::before { border: 0; border-radius: 1px; width: 7px; height: 7px; background: var(--tinta-60); transform: rotate(45deg); }
.mcards--all, .mcards--ref { margin: 0 0 10px; }
.mcards.mcards--ref .mcard--ref { grid-template-columns: 56px minmax(0, 1fr); column-gap: 12px; padding: 8px 10px; }
.mcards.mcards--ref .mcard--ref > :not(.mcard__thumb) { grid-column: 2; }
.mcards.mcards--ref .mcard--ref .mcard__thumb { grid-column: 1; grid-row: 1 / span 4; width: 56px; }
.mcard--ref .mcard__summary { font-size: 12px; }
.mcard--ref .mcard__more { grid-column: 2 !important; margin-top: 0; }
.appearance__back { margin: 0 0 10px; }
.appearance__side { min-width: 0; display: flex; flex-direction: column; }
.appearance__side > .appearance__panel { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.appearance__publish { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 14px 12px; border: 1px solid var(--rule-2); border-top: 0; border-radius: 0 0 var(--r-2) var(--r-2); background: var(--papel-2); }
.appearance__publish .btn { width: 100%; min-height: 40px; }
.appearance__publish .help { margin: 0; }
.appearance__publish .live-status { flex: 1 0 100%; margin: 0; font-size: 12.5px; color: var(--tinta-80); }
.appearance__publish .live-status:empty { display: none; }
.appearance__preview { display: block; margin: 0 0 10px; }
.appearance__preview .appearance__img { display: block; width: 100%; max-width: 380px; margin: 0 auto 8px; box-shadow: 0 1px 2px oklch(0.29 0.075 258 / 0.12), 0 6px 18px -10px oklch(0.29 0.075 258 / 0.35); }
.appearance__preview figcaption { margin: 6px 0 0; }
.appearance__legend { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; padding: 0; font-size: 12px; color: var(--tinta-80); }
.appearance__legend li { display: inline-flex; align-items: center; gap: 6px; }
.role__num { display: inline-grid; place-content: center; flex: none; width: 18px; height: 18px; margin-right: 6px; border: 1.5px solid var(--tinta); border-radius: 50%; font: 600 11px/1 var(--f-t); font-variant-numeric: tabular-nums; color: var(--tinta); }
.appearance__legend .role__num { margin-right: 0; width: 16px; height: 16px; font-size: 10px; }
.role__label { display: flex; align-items: center; }
.role__row { gap: 10px; }
.role__mark .role__swatch, .role__mark .role__none { width: 36px; height: 36px; }
.role__chip { vertical-align: -1px; }
.role__chip rect { stroke: var(--rule-2); stroke-width: 0.8; }
/* La pastille-sélecteur : le sélecteur natif `type=color`, habillé en carré de 36 px (40 px de cible en écran étroit). */
.role__row > .role__picker { flex: 0 0 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: none; cursor: pointer; -webkit-appearance: none; appearance: none; }
.role__picker::-webkit-color-swatch-wrapper { padding: 0; }
.role__picker::-webkit-color-swatch { border: 0; border-radius: calc(var(--r-2) - 1px); }
.role__picker::-moz-color-swatch { border: 0; border-radius: calc(var(--r-2) - 1px); }
.role__on { margin: 3px 0 0; color: var(--tinta-80); }
.role__feedback .help + .help { margin-top: 2px; }
.chooser__bar { display: flex; align-items: center; height: 64px; margin: 12px -16px 0; padding: 10px 16px; border: 0; border-top: 1px solid var(--rule-2); border-radius: 0; box-shadow: 0 -6px 10px -8px oklch(0.29 0.075 258 / 0.25); }
.chooser__bar .btn { width: 100%; min-height: 44px; }
html:has(.chooser__bar:not([hidden])) { scroll-padding-bottom: 72px; }
@media (min-width: 720px) {
  .appearance .mcards.mcards--all { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; justify-content: stretch; }
  .appearance .mcards.mcards--all > li { flex: none; }
  div.models > .mcards.mcards--all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .mcards.mcards--ref .mcard--ref { grid-template-columns: 56px minmax(0, 1fr); }
  .mcards.mcards--ref .mcard--ref .mcard__thumb { width: 56px; grid-row: 1 / span 4; }
  .mcards.mcards--ref .mcard--ref > :not(.mcard__thumb) { grid-column: 2; }
  .chooser__bar { margin: 12px 0 0; border: 1px solid var(--rule-2); border-radius: var(--r-2); }
}
@media (min-width: 1024px) {
  .appearance__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; }
  .appearance__main > .ph { margin-top: 0; }
  .appearance__jump { display: none; }
  .appearance__side { position: sticky; top: 24px; max-height: calc(100vh - 48px); }
  .appearance__side > .appearance__panel { position: static; top: auto; max-height: none; flex: 1 1 auto; min-height: 0; overflow: auto; margin: 0; }
  .appearance__publish { flex: none; }
  .chooser__bar { display: none; }
}
/* En écran large (≥ 1200 px) : dans le panneau, l'aperçu (340 px) et les champs CÔTE À CÔTE — tout tient dans le premier écran, sans
   défilement interne ; les cartes en deux colonnes à gauche. */
@media (min-width: 1200px) {
  .appearance__grid { grid-template-columns: minmax(0, 1fr) 640px; }
  .appearance__body { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .appearance__body .appearance__preview { margin: 0; }
  .appearance__body .appearance__img { max-width: none; margin: 0 0 8px; }
  .appearance__fields > .appearance__base { margin-top: 0; }
  .appearance__fields .role__row > .role__code { flex: 1 1 auto; width: auto; max-width: 120px; }
}
@media (max-width: 719px) {
  .role__row > .role__picker { flex-basis: 40px; width: 40px; height: 40px; min-height: 40px; }
  .role__mark .role__swatch, .role__mark .role__none { width: 40px; height: 40px; }
  .chooser__bar .btn { width: 100%; }
}

/* fix1-C2 ── Mi cuenta (M13) : un tableau Emisor | NIF | permisos en pastilles | accesos ; le sens des permissions une fois, en légende. */
.acct__table { font-size: 13px; }
.acct__table th[scope="row"] { font-weight: 600; }
.acct__name { margin-right: 6px; }
.acct__row--active th[scope="row"] { box-shadow: inset 3px 0 0 var(--tinta); }
.permchips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.permchip { display: inline-flex; align-items: center; min-height: 22px; padding: 1px 8px; border: 1px solid var(--rule-2); border-radius: 11px; background: var(--papel-2); font: 600 11.5px/1.2 var(--f-t); color: var(--tinta); white-space: nowrap; }
.acct__table .acct__links { gap: 0 12px; }
.acct__legend-h { margin: 14px 0 6px; font-size: 12.5px; }
.acct__legend { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; margin: 0 0 8px; font-size: 12.5px; color: var(--tinta-80); }
.acct__legend > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 8px; align-items: baseline; }
.acct__legend dd { margin: 0; }
@media (min-width: 960px) { .acct__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .acct__table td[data-label="Permisos"], .acct__table td[data-label="Accesos"] { flex-wrap: wrap; }
  .acct__table .permchips, .acct__table .acct__links { justify-content: flex-end; }
}

/* fix1-C2 ── Connexion (M17) : le formulaire, et à côté (≥ 1024 px) un panneau tinta sobre — trois capacités réelles, une facture en SVG. */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; max-width: 920px; margin: 24px auto 0; }
.auth-wrap > .auth { margin: 0 auto; }
.auth-pitch { position: relative; overflow: hidden; width: 100%; max-width: 420px; margin: 0 auto; padding: 22px 24px; border-radius: var(--r-3); background: var(--tinta); color: var(--papel); }
.auth-pitch h2 { margin: 0 0 12px; font-size: 17px; color: var(--papel); }
.auth-pitch__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 13px; color: oklch(0.92 0.01 258); }
.auth-pitch__list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; align-items: start; }
.auth-pitch__list strong { display: block; color: var(--papel); font-weight: 600; }
.auth-pitch__tick { margin-top: 2px; }
.auth-pitch__tick circle { fill: var(--caqui); }
.auth-pitch__tick path { fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.auth-pitch__ill { display: none; }
.ill__sheet { fill: var(--papel); }
.ill__band { fill: oklch(0.42 0.05 258); }
.ill__ink-on { fill: var(--papel); }
.ill__soft { opacity: 0.7; }
.ill__ink { fill: var(--tinta); }
.ill__line { fill: oklch(0.85 0.012 258); }
.ill__head { fill: oklch(0.93 0.012 258); }
.ill__rule { fill: oklch(0.80 0.012 258); }
.ill__total { fill: var(--tinta); }
.ill__accent { fill: var(--caqui); }
.ill__qr { fill: var(--tinta); }
@media (min-width: 1024px) {
  .auth-wrap { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 24px; align-items: stretch; }
  .auth-wrap > .auth, .auth-pitch { max-width: none; margin: 0; }
  .auth-pitch { display: grid; grid-template-columns: minmax(0, 1fr) 180px; grid-template-rows: auto 1fr; column-gap: 20px; padding: 26px 28px; }
  .auth-pitch h2 { grid-column: 1 / -1; }
  .auth-pitch__ill { display: block; grid-column: 2; grid-row: 2; align-self: end; width: 180px; height: auto; transform: rotate(-3deg); transform-origin: 50% 100%; filter: drop-shadow(0 8px 14px oklch(0.15 0.05 258 / 0.45)); }
}

/* fix1-C2 ── Pied (M16) : cible du lien courriel ≥ 40 px en écran étroit ; colonne « Acceso » de la page de connexion. */
@media (max-width: 719px) {
  .foot__legal a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* fix1-C2 ── Fragment Mono réservée aux DONNÉES (codes, numéros, montants) : les sous-titres décoratifs passent en Funnel Sans petites
   capitales (kickers `.ey`, apartés `.sh__aside`, en-tête du menu « Sesión iniciada », groupes de modèles). */
.ey, .sh__aside, .menu__title, .layouts__group { font-family: var(--f-t); font-variant-caps: all-small-caps; letter-spacing: 0.05em; font-weight: 600; }
.ey { font-size: 12.5px; }
.sh__aside { font-size: 12.5px; font-weight: 500; }
.menu__title { font-size: 12.5px; }

/* fix1-C2 ── Ventas (M14) : à côté du mois, une colonne à hauteur naturelle (Clientes, puis Últimas facturas) ; le graphique à 100 % de sa
   carte dans tous les états ; dessous, une grille 2 × 2 aux rangées alignées. Liens « Ver los datos » discrets ; la bordure caqui n'est
   plus un effet de vedette (elle ne marque que l'élément courant : ligne active, étape en cours). */
.sales-row--main { align-items: start; }
.sales-side { display: grid; align-content: start; gap: 12px; min-width: 0; }
.sales-side > .panel { margin: 0; }
.sales-row--grid { align-items: stretch; }
.sales-row--grid > .panel { margin: 0; }
.sales-chart .sales-svg--narrow, .sales-chart .sales-svg--mid, .sales-chart .sales-svg--wide { max-width: none; }
.sales-first { margin: 0 0 4px !important; }
.sales-data > summary { font-weight: 500; color: var(--tinta-80); text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; }
.sales-data > summary:hover { color: var(--tinta); text-decoration-color: currentColor; }
.sales-kpi--hero { box-shadow: none; padding-left: 12px; }
.sales-recent { list-style: none; margin: 0; padding: 0; }
.sales-recent__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 10px; padding: 7px 0; border-top: 1px solid var(--rule); }
.sales-recent__row:first-child { border-top: 0; padding-top: 2px; }
.sales-recent__n { font-weight: 600; white-space: nowrap; }
.sales-recent__amt { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sales-recent__meta { grid-column: 1 / -1; font-size: 12px; color: var(--tinta-60); overflow-wrap: anywhere; }
.sales-recent__all { margin: 8px 0 0; font-size: 12.5px; }
@media (max-width: 719px) {
  .sales-recent__n { display: inline-flex; align-items: center; min-height: 40px; }
  .sales-recent__all a { display: inline-flex; align-items: center; min-height: 40px; }
}

/* fix1-C2 ── Fiche client (M15) : « Con este cliente » en tête de la colonne de droite. Liste Clientes : colonnes de l'année. */
.chist__figures { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 4px 18px; margin: 0 0 10px; }
.chist__figures > div:first-child { grid-column: 1 / -1; }
.chist__figures dt { font-size: 12px; color: var(--tinta-60); }
.chist__figures dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.chist__big { font: 600 22px/1.2 var(--f-d); letter-spacing: -0.015em; }
.chist__h { margin: 4px 0 4px; font-size: 12.5px; }
.chist__links { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 8px 0 0; font-size: 12.5px; }
@media (max-width: 719px) { .chist__links a { display: inline-flex; align-items: center; min-height: 40px; } }

/* fix1-C2 ── Facturas, bandeau « Este mes » (idée 2) : trois chiffres sur une ligne, sobres ; en écran étroit, une grille de trois. */
.month { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); }
.month__h { flex: 0 0 auto; margin: 0; font-size: 14px; }
.month__when { display: block; font: 500 12px var(--f-t); color: var(--tinta-60); }
.month__figs { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 2px 24px; margin: 0; flex: 1 1 auto; }
.month__figs dt { font-size: 12px; color: var(--tinta-60); }
.month__figs dd { margin: 0; font: 600 17px/1.25 var(--f-d); font-variant-numeric: tabular-nums; color: var(--tinta); }
.month__figs dd a { color: inherit; }
.month__link { margin-left: auto; font-size: 12.5px; font-weight: 600; }
.month__figs > div { display: flex; flex-direction: column; justify-content: space-between; }
@media (max-width: 719px) {
  .month { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .month__h { grid-column: 1; grid-row: 1; }
  .month__link { grid-column: 2; grid-row: 1; align-self: center; display: inline-flex; align-items: center; min-height: 40px; margin: 0; }
  .month__figs { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; }
  .month { padding: 8px 12px; }
  .month__figs > div { justify-content: flex-start; }
  .month__figs dd { font-size: 15px; }
  /* Cible de 40 px sans gonfler la rangée : la marge négative rend au bandeau la hauteur du chiffre. */
  .month__figs dd a { display: inline-flex; align-items: center; min-width: 40px; min-height: 40px; margin: -10px 0; }
}

/* fix1-C2 ── Fiche émetteur (mineur) : la barre de sections sur une ligne ; « Acciones sensibles » à droite, marquée ; défilement en étroit. */
.toc--bar ul { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding-bottom: 2px; }
.toc--bar li { flex: none; }
.toc--bar .toc__danger { margin-left: auto; }
.toc--bar .toc__danger a { border-style: dashed; border-color: var(--st-block); color: var(--st-block); }

/* fix1-C2 ── « Aspecto de sus facturas » : les couleurs en pastilles + nom + code mono, jamais un hexadécimal en pleine phrase. */
.aspect__colors { margin: 0 0 8px; }
.cchips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 0; padding: 0; }
.cchip { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-height: 26px; padding: 2px 8px 2px 4px; border: 1px solid var(--rule-2); border-radius: 13px; background: var(--papel-2); font-size: 12.5px; }
.cchip__label { font-weight: 600; }
.cchip__hex { color: var(--tinta-80); }
.cchip__note { flex-basis: 100%; padding-left: 20px; font-size: 12px; color: var(--tinta-60); }

/* fix1-C2 ── Ayuda (mineur) : plus de bande vide à droite — l'index (300 px) et les rubriques occupent toute la largeur utile ; le titre
   de l'index en Funnel Sans petites capitales (Fragment Mono reste aux données). */
@media (min-width: 1100px) {
  .help-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 0 28px; }
  .help-doc .panel { max-width: none; }
  .help-index__d > summary { font: 600 12.5px var(--f-t); font-variant-caps: all-small-caps; letter-spacing: 0.05em; text-transform: none; }
}

/* fix1-C1 ── Passe de correction n°1 (#983, D-325) : Facturas, document émis, éditeur, rectificativa, destinataire, champs fichier, listes ── */
/* Facturas : les filtres repliés en pantalla estrecha (« Filtrar · N activos »), toujours visibles en pantalla ancha. */
.filters { margin: 0 0 12px; }
.filters > summary { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); font: 600 13.5px var(--f-t); color: var(--tinta); cursor: pointer; list-style: none; }
.filters > summary::-webkit-details-marker { display: none; }
.filters > summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: -3px 2px 0 0; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg); }
.filters[open] > summary::before { margin-top: 3px; transform: rotate(-135deg); }
.filters__count { font-weight: 500; color: var(--tinta-60); }
.filters__count::before { content: "·"; margin-right: 8px; }
.filters[open] > summary { margin-bottom: 10px; }
.filters > .toolbar { margin-bottom: 0; }
@media (min-width: 720px) {
  .filters[open] > summary { display: none; }
}
@supports selector(::details-content) {
  @media (min-width: 720px) {
    .filters > summary { display: none; }
    .filters::details-content { content-visibility: visible; }
  }
}

/* Facturas : la liste des émises (N1) — numéro et date jamais coupés, « Ver / Descargar / Duplicar » en trois boutons-icônes. */
.invgrid__docs, .invgrid__drafts { container-type: inline-size; }
.docs th[scope="row"] { min-width: 132px; white-space: nowrap; }
.docs th[scope="row"] a.mono { white-space: nowrap; }
.docs td[data-label="Fecha"] { white-space: nowrap; }
.docs td[data-label="Total"] { white-space: nowrap; font-variant-numeric: tabular-nums; }
.docs td[data-label="Total"] .row-sub { max-width: 15em; margin-left: auto; white-space: normal; }
.docs td[data-label="PDF"] { width: 1%; padding-right: 4px; white-space: nowrap; }
.docs td[data-label="Acciones"] { width: 1%; padding-left: 0; white-space: nowrap; }
.docs .docs__acts { white-space: nowrap; }
.docs td[data-label="Acciones"] .rowform .btn, .line__buttons .btn[data-duplicate-line] { position: relative; }
.docs td[data-label="Acciones"] .rowform .btn { width: 36px; height: 36px; min-height: 36px; padding: 0; border-color: var(--rule-2); background: var(--papel); color: var(--tinta); font-size: 0; gap: 0; }
.docs td[data-label="Acciones"] .rowform .btn:hover { border-color: var(--tinta); background: var(--papel); }
.docs td[data-label="Acciones"] .muted { display: inline-grid; place-items: center; width: 36px; height: 36px; }
/* L'icône « copier » : deux carrés décalés, dessinés (jamais une image ni un emoji) ; le texte du bouton reste son nom accessible. */
.docs td[data-label="Acciones"] .rowform .btn::before, .line__buttons .btn[data-duplicate-line]::before {
  content: ""; flex: none; width: 10px; height: 10px; margin: 4px 0 0 -4px; border: 1.5px solid currentColor; border-radius: 2px; background: var(--papel);
  box-shadow: 4px -4px 0 -1.5px var(--papel), 4px -4px 0 0 currentColor;
}
.docs td[data-label="Acciones"] .rowform .btn:hover::after, .docs td[data-label="Acciones"] .rowform .btn:focus-visible::after,
.line__buttons .btn[data-duplicate-line]:hover::after, .line__buttons .btn[data-duplicate-line]:focus-visible::after {
  content: "Duplicar" / ""; position: absolute; z-index: 3; right: 0; bottom: calc(100% + 4px); padding: 3px 7px; border-radius: var(--r-1); background: var(--tinta); color: var(--papel); font: 500 11.5px/1.3 var(--f-t); white-space: nowrap; pointer-events: none;
}
/* Une colonne étroite (mobile, ou à côté d'une autre) : chaque facture émise en carte compacte — numéro et total, destinataire et date, icônes. */
@container (max-width: 559px) {
  .docs thead { display: none; }
  .docs, .docs tbody { display: block; width: 100%; }
  .docs tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "num num num" "dest total total" "date total total" "type type type" "pick pdf dup"; gap: 2px 8px; align-items: center; padding: 9px 12px 10px; border-bottom: 1px solid var(--rule); }
  .docs tr:last-child { border-bottom: 0; }
  .docs th, .docs td, .docs td[data-label] { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
  .docs td[data-label]::before { content: none; }
  .docs th[scope="row"] { grid-area: num; min-width: 0; }
  .docs th[scope="row"] a.mono { font-size: 13.5px; font-weight: 600; }
  .docs td[data-label="Total"] { grid-area: total; align-self: start; text-align: right; font-weight: 600; }
  .docs td[data-label="Total"] .row-sub { max-width: 10em; font-weight: 400; }
  .docs td[data-label="Destinatario"] { grid-area: dest; font-size: 12.5px; color: var(--tinta-80); }
  .docs td[data-label="Fecha"] { grid-area: date; align-self: start; font-size: 12px; color: var(--tinta-60); }
  .docs td[data-label="Tipo"] { grid-area: type; font-size: 12px; color: var(--tinta-60); }
  .docs td[data-label="PDF"] { grid-area: pdf; margin-top: 4px; }
  .docs td[data-label="Acciones"] { grid-area: dup; margin-top: 4px; }
  .docs .iconlink, .docs td[data-label="Acciones"] .rowform .btn, .docs td[data-label="Acciones"] .muted { width: 40px; height: 40px; }
  /* Toute la carte ouvre la facture (cible ≥ 40 px) ; la case et les icônes restent au-dessus. */
  .docs tr { position: relative; }
  .docs th[scope="row"] a.mono::after { content: ""; position: absolute; inset: 0; }
  .docs .pick, .docs .iconlink, .docs td[data-label="Acciones"] .rowform .btn { position: relative; z-index: 1; }
}

/* Facturas : les brouillons (M3). Dans une colonne étroite, une liste compacte à deux lignes — destinataire | total, description | heure. */
.drafts .drafts__when { white-space: nowrap; }
.drafts .drafts__total { white-space: nowrap; font-variant-numeric: tabular-nums; }
.drafts .drafts__total .muted { font-size: 12px; }
@container (max-width: 559px) {
  .drafts thead { display: none; }
  .drafts, .drafts tbody { display: block; width: 100%; }
  .drafts tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 12px; align-items: baseline; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
  .drafts tr:last-child { border-bottom: 0; }
  .drafts th, .drafts td, .drafts td[data-label] { display: block; width: auto; min-width: 0; padding: 0; border: 0; }
  .drafts td[data-label]::before { content: none; }
  .drafts th[scope="row"] { grid-column: 1; grid-row: 1 / span 2; }
  .drafts th[scope="row"] > a { font-weight: 600; }
  .drafts td[data-label="Tipo"] { display: none; }
  .drafts .drafts__total { grid-column: 2; grid-row: 1; text-align: right; font: 600 13px var(--f-t); font-variant-numeric: tabular-nums; }
  .drafts .drafts__when { grid-column: 2; grid-row: 2; text-align: right; font-size: 11.5px; color: var(--tinta-60); }
  .drafts .drafts__status { grid-column: 1 / -1; }
  .drafts tr { position: relative; }
  .drafts th[scope="row"] > a::after { content: ""; position: absolute; inset: 0; }
}
/* Mobile : la barre du lot ne garde que l'utile tant qu'aucune case n'est cochée (« Seleccionar todas », « Descargar todas… »). */
@media (max-width: 719px) {
  .batch[data-batch-checked="0"] [data-batch-submit] { display: none; }
  /* Le compteur est une région `aria-live` : masqué à l'œil seulement, pour que la première annonce (« 1 seleccionada ») soit lue. */
  .batch[data-batch-checked="0"] .batch__count { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .batch__bar .btn { width: auto; flex: 1 1 auto; }
}
.invgrid--single > section { grid-column: 1; grid-row: auto; }

/* Document émis : la retenue suit les totaux sans vide (même tableau visuel). */
.sheet__totals--pro { gap: 0; }
.sheet__totals--pro > .table-wrap { margin-bottom: 0; }
.sheet__totals--pro > .table-wrap + .table-wrap .table tr:first-child th, .sheet__totals--pro > .table-wrap + .table-wrap .table tr:first-child td { border-top: 0; }
.sheet__totals--pro > :not(.table-wrap) { margin-top: 10px; }

/* Éditeur : « Escribir un destinatario nuevo » sur toute la largeur du duo (N5), grille interne par l'usage. */
@media (min-width: 1180px) {
  /* Le destinataire écrit prend toute la largeur ; « Operación » aussi (ses cartes sur deux colonnes) : jamais une demi-rangée vide à côté. */
  .editor__duo > .editor__dest--free, .editor__duo:has(> .editor__dest--free) > .panel { grid-column: 1 / -1; }
  .editor__duo:has(> .editor__dest--free) .kinds, .editor__duo:has(> .editor__dest--free) .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
  .editor__dest--free #destinatario > .grid-2:first-of-type { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .editor__dest--free #destinatario > .grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: auto auto auto auto; row-gap: 3px; }
  .editor__dest--free #destinatario > .grid-3 > .field { grid-row: 1 / span 3; display: grid; grid-template-rows: subgrid; align-content: end; }
  .editor__dest--free #destinatario > .grid-3 > .field:has(#pais) { display: contents; }
  .editor__dest--free #destinatario > .grid-3 label[for="pais"] { grid-column: 3; grid-row: 1; align-self: end; }
  .editor__dest--free #destinatario > .grid-3 #pais { grid-column: 3; grid-row: 2; }
  .editor__dest--free #destinatario > .grid-3 #pais-error { grid-column: 3; grid-row: 3; }
  .editor__dest--free #destinatario > .grid-3 #pais-ayuda { grid-column: 1 / -1; grid-row: 4; margin: 4px 0 0; }
  .editor__dest--free #destinatario > .grid-3 > .field > label { align-self: end; }
  .editor__dest--free #destinatario .segf--wide .segf__opts { display: inline-flex; }
}

/* Éditeur : les radios à gauche partout, 20 px, alignés sur le titre (M5). */
.kind { padding: 10px 12px 10px 42px; }
.kind__radio { left: 12px; right: auto; top: 11px; }
.kind--unavailable { padding-left: 12px; }
.ccard__label { grid-template-columns: 20px minmax(0, 1fr); grid-template-areas: "mark name" "mark meta"; }
.ccard__mark { align-self: start; width: 20px; height: 20px; margin-top: 0; }
.ccard__label:has(.ccard__radio:checked) .ccard__mark::before { margin: 7px 0 0 6px; }
@media (min-width: 720px) {
  .opt__input, .kind__radio { width: 20px; height: 20px; }
}

/* Éditeur : fieldsets sans cadre — la légende est un sous-titre ; jamais une carte dans une carte dans une carte (M6). */
.editor .panel > fieldset.choice { padding: 0; border: 0; border-radius: 0; background: transparent; }
.editor .panel > fieldset.choice + fieldset.choice, .editor .panel > fieldset.choice + .help + fieldset.choice { margin-top: 16px; }
.editor .panel > fieldset.choice.field--invalid { padding-left: 10px; }
.editor .panel > fieldset.choice > legend.lg, .compare__side fieldset > legend.lg { font: 600 14px var(--f-t); margin-bottom: 8px; }

/* Éditeur : « Descartar borrador » parmi les actions secondaires (texte rouge discret, jamais un gros bouton isolé en bas). */
.btn--discard { color: var(--st-block); text-decoration-color: currentColor; }
.btn--discard:hover { color: var(--st-block); }
.sum__actions .btn--discard { justify-self: center; width: auto !important; }
.editor__more { margin: 0 0 12px; }
@media (min-width: 960px) { .editor__more { display: none; } }
.discard { display: contents; }
.compare__side .actions .btn--discard { margin-left: auto; }

/* Éditeur : les lignes en rangées (M7). Assez de place (≥ 640 px pour la liste) : la description sur une rangée, puis cantidad, unidad,
   precio, descuento, IVA et importe alignés ; les libellés seulement sur la première ligne (en-têtes de colonne), cachés à l'œil ensuite
   (toujours lus par les lecteurs d'écran). Duplicar et Quitar deviennent deux boutons-icônes. Plus étroit : les cartes. */
.lines[data-line-list] { container-type: inline-size; }
@container (min-width: 640px) {
  [data-line-list] .line { grid-template-columns: 60px minmax(80px, 1fr) 92px 80px 150px 92px 32px; grid-template-areas: "err err err err err err err" "desc desc desc desc desc desc acts" "qty unit price disc vat amount acts" ". other other other . . ." "chk chk chk chk chk chk chk"; column-gap: 8px; row-gap: 4px; align-items: end; padding: 10px 8px 10px 30px; }
  [data-line-list] .line__n { left: 8px; top: 14px; }
  [data-line-list] .line__main, [data-line-list] .line__cells, [data-line-list] .line__foot { display: contents; }
  [data-line-list] .line > .field-error { grid-area: err; margin: 0; }
  [data-line-list] .line__main > .field--grow { grid-area: desc; }
  [data-line-list] .line__main > .unit { display: contents; }
  [data-line-list] .line__main > .unit > .field--unit { grid-area: unit; min-width: 0; }
  [data-line-list] .line__main > .unit > .field--unit-other { grid-area: other; min-width: 0; }
  [data-line-list] .line__main textarea { min-height: 38px; }
  [data-line-list] .line__qty { grid-area: qty; }
  [data-line-list] .line__price { grid-area: price; }
  [data-line-list] .line__disc { grid-area: disc; }
  [data-line-list] .line__vat { grid-area: vat; }
  [data-line-list] .line__qty input, [data-line-list] .line__price input, [data-line-list] .line__disc input { text-align: right; font-variant-numeric: tabular-nums; }
  [data-line-list] .line__amount { grid-area: amount; align-self: end; margin: 0; padding-bottom: 8px; text-align: right; }
  [data-line-list] .line__amount-label { display: block; margin-bottom: 9px; font: 600 11.5px var(--f-t); color: var(--tinta-80); }
  [data-line-list] .line__amount strong { font-size: 13px; }
  [data-line-list] .line__amount .muted { display: block; font-size: 11px; }
  [data-line-list] .line__foot > [data-remove-check] { grid-area: chk; }
  [data-line-list] .line__buttons { grid-area: acts; flex-direction: column; flex-wrap: nowrap; align-self: start; gap: 4px; padding-top: 18px; }
  [data-line-list] .line__buttons .btn { width: 32px; height: 32px; min-height: 32px; padding: 0; gap: 0; font-size: 0; }
  [data-line-list] .line__buttons .btn[data-duplicate-line] { border-color: var(--rule-2); }
  [data-line-list] .line__remove { margin-left: 0; }
  [data-line-list] .line__remove::before, [data-line-list] .line__remove::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.6px; background: currentColor; }
  [data-line-list] .line__remove::before { transform: translate(-50%, -50%) rotate(45deg); }
  [data-line-list] .line__remove::after { transform: translate(-50%, -50%) rotate(-45deg); }
  [data-line-list] .line__remove { position: relative; }
  [data-line-list] .line + .line .field > label, [data-line-list] .line + .line .segf__legend, [data-line-list] .line + .line .line__amount-label {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  [data-line-list] .line + .line .field--unit-other > label { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  [data-line-list] .line + .line .line__buttons { padding-top: 0; }
  [data-line-list] .line + .line .line__amount { padding-bottom: 8px; }
  [data-line-list] .line .segf--vat .segf__opts { width: 100%; }
}

/* Champs fichier en zone de dépôt (N3) : le contrôle natif, transparent, couvre la zone ; foyer visible ; état « elegido ». */
.drop { position: relative; }
.drop__input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.drop__zone { display: flex; align-items: center; gap: 12px; min-height: 96px; padding: 14px 16px; border: 1.5px dashed var(--tinta-40); border-radius: var(--r-2); background: var(--papel); color: var(--tinta); }
.drop__icon { flex: none; }
.drop__icon path { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.drop__text { min-width: 0; font-size: 12.5px; color: var(--tinta-80); }
.drop__cta { font: 600 13.5px var(--f-t); color: var(--tinta); text-decoration: underline; text-decoration-color: var(--caqui); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.drop__hint { display: block; margin-top: 2px; font-size: 12px; color: var(--tinta-60); }
.drop__chosen, .drop__name { display: none; margin-top: 4px; font: 600 12.5px var(--f-t); color: var(--st-ok); overflow-wrap: anywhere; }
.drop__input:required:valid + .drop__zone .drop__chosen { display: block; }
.drop[data-file-js] .drop__chosen { display: none !important; }
.drop[data-file-chosen] .drop__name { display: block; }
.drop__input:hover + .drop__zone, .drop[data-file-over] .drop__zone { border-color: var(--tinta); background: var(--papel-2); }
.drop[data-file-chosen] .drop__zone, .drop__input:required:valid + .drop__zone { border-style: solid; border-color: var(--st-ok); }
.drop__input:focus-visible + .drop__zone { outline: 2px solid var(--caqui); outline-offset: 2px; }
.drop__input[aria-invalid="true"] + .drop__zone { border-color: var(--st-block); border-left-width: 3px; }

/* Listes presque vides (idée 5) : « Siguiente paso » — un encadré sobre, une phrase et l'action. */
.nextstep { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 14px 0 12px; padding: 12px 14px; border: 1px solid var(--rule-2); border-left: 3px solid var(--tinta); border-radius: var(--r-2); background: var(--papel); }
.nextstep__text { flex: 1 1 280px; min-width: 0; }
.nextstep__title { margin: 0 0 2px; font: 600 13.5px var(--f-d); color: var(--tinta); }
.nextstep p { margin: 0; max-width: 64ch; font-size: 13px; color: var(--tinta-80); }
.nextstep__act { flex: none; }
.nextstep__act form { margin: 0; }
@media (max-width: 719px) {
  .nextstep__act, .nextstep__act .btn { width: 100%; }
}

/* Éditeur et vista previa : les couleurs propres du modèle, en pastilles et codes. */
.swatchline { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.swatchline .swatches { flex: none; }
.presum__color--own { display: flex; flex-wrap: wrap; gap: 4px 6px; }
/* fix1-C2 : en écran étroit, quand la barre de 64 px est montrée, elle porte LE bouton de publication (un seul bouton de ce nom à l'écran). */
@media (max-width: 1023px) {
  .appearance:has(> .chooser__bar:not([hidden])) .appearance__publish [data-publish] { display: none; }
}

/* fix2-D1 ── passe de correction n°2 (#983, D-325) : éditeur, destinataire, autosave, Facturas, Facturas anteriores ─────────────────── */
/* m-12 : « Del directorio » | « Nuevo » toujours sur une ligne (deux moitiés égales). Le texte du bouton (son nom accessible : « Cliente del
   directorio », « Escribir un destinatario nuevo ») reste la phrase entière ; l'œil lit le libellé court, dont le texte de remplacement
   est vide (jamais lu deux fois). Sans feuille, la phrase entière s'affiche. */
.seg[data-dest-mode] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.seg[data-dest-mode] .seg__btn { font-size: 0; white-space: nowrap; }
.seg[data-dest-mode] .seg__btn::after { font-size: 13px; }
.seg[data-dest-mode] .seg__btn:first-child::after { content: "Del directorio"; content: "Del directorio" / ""; }
.seg[data-dest-mode] .seg__btn:last-child::after { content: "Nuevo"; content: "Nuevo" / ""; }
.seg[data-dest-mode] .seg__btn--on::before { font-size: 13px; }
/* N6 : le recompte de « Buscar cliente », dans sa propre ligne (jamais une cible des totaux). */
.cpick__count { margin-top: 4px; }
/* J-M2 : le conflit d'un enregistrement automatique — ce qui est écrit reste, dit « no guardado », deux sorties. */
.saveconflict { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--st-block); border-left-width: 3px; border-radius: var(--r-2); background: var(--st-block-t); font-size: 12.5px; color: var(--tinta); }
.saveconflict[hidden] { display: none; }
.saveconflict__lead { margin: 0; }
.saveconflict .help { margin: 4px 0 8px; color: var(--tinta-80); }
.saveconflict__acts { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.saveconflict__acts .btn { white-space: normal; text-align: center; }
@media (max-width: 959px) {
  /* Écran étroit : le résumé est en bas de page ; le conflit monte au-dessus de la barre d'actions, à la vue. */
  .editor__aside .saveconflict:not([hidden]) { position: fixed; z-index: 6; left: 8px; right: 8px; bottom: 104px; margin: 0; max-height: 50vh; overflow-y: auto; box-shadow: 0 6px 18px oklch(0.29 0.075 258 / 0.18); }
}
/* M-c, m-8 : les couleurs en pastilles libellées (valeur choisie, code en mono) ; l'ajustement du PDF en sous-texte discret. */
.cchips--inline { display: inline-flex; vertical-align: middle; margin: 0; }
.cchip--sm { min-height: 24px; padding: 1px 8px 1px 5px; font-size: 12px; }
.cchip__adj { font-size: 11.5px; color: var(--tinta-60); }
.cchip__adj::before { content: "· "; }
.presum__color--own { align-items: flex-start; }
/* m-7 : les montants des Resumen en Funnel Sans, chiffres tabulaires (Fragment Mono reste aux codes et numéros). */
.sum__rows dd { font: 500 13px var(--f-t); font-variant-numeric: tabular-nums; }
.sum__rows .sum__total dd { font: 700 18px var(--f-t); font-variant-numeric: tabular-nums; }
.editor__bar-total strong { font-family: var(--f-t); }
/* m-3 : « Seleccionar todas » à l'état mixte (une partie cochée) — un trait sur fond tinta, jamais une case vide. */
input[type="checkbox"]:not([class*="sales-"]):indeterminate { background: var(--tinta); border-color: var(--tinta); }
input[type="checkbox"]:not([class*="sales-"]):indeterminate::before { width: 9px; height: 0; margin-top: 0; border-left: 0; border-bottom: 2px solid currentColor; transform: none; }
/* m-4 : « Descargar seleccionadas » éteint — bordure PLEINE à 40 %, jamais le pointillé d'une zone de dépôt ; la barre sur une ligne. */
.batch [data-batch-submit]:disabled { border-style: solid; border-color: var(--tinta-40); background: transparent; color: var(--tinta-60); }
@media (min-width: 1024px) {
  .batch__bar { flex-wrap: nowrap; }
  .batch__all { flex: none; white-space: nowrap; }
  .batch__count { flex: 1 1 auto; min-width: 0; }
  .batch__bar .btn { flex: none; }
}
/* M-b : la colonne Total de Facturas — montants jamais coupés, ≥ 150 px pris sur le destinataire ; « A pagar… » sur une ligne, en retrait. */
@container (min-width: 560px) {
  .docs td[data-label="Total"] { width: 1%; min-width: 150px; }
  .docs td[data-label="Total"] .row-sub { max-width: none; margin-left: 0; white-space: nowrap; color: var(--tinta-60); }
  .docs tbody th, .docs tbody td { padding-top: 8px; padding-bottom: 8px; }
}
/* J-m4 : dates à l'envers — le message, au-dessus de la liste. */
.dates-inverted { margin: 0 0 12px; }
/* M-e : « Tipo de documento » sans choix — le repère « Ninguno elegido », masqué dès qu'une option est cochée. */
.segf__none { display: inline-flex; align-items: center; min-height: 30px; padding: 0 10px; font-size: 12.5px; font-style: italic; color: var(--tinta-60); }
.segf__opts:has(.segf__input:checked) > .segf__none { display: none; }
.segf--kind .segf__opts { display: flex; flex-wrap: wrap; }
/* m-5 : « Archivo histórico » en étiquette (fond teinté), jamais une case. */
.badge--historical { padding: 1px 8px; border-radius: 10px; background: var(--st-info-t); color: var(--st-info); }
.badge--historical::before { display: none; }
/* M7 : une ligne en écran étroit — grille compacte : Cantidad | Unidad, Precio | Descuento, IVA sur toute la largeur, importe à droite. */
@container (max-width: 639px) {
  [data-line-list] .line { grid-template-columns: minmax(84px, 0.8fr) minmax(0, 1.2fr); grid-template-areas: "err err" "desc desc" "qty unit" "other other" "price disc" "vat vat" "foot foot"; column-gap: 8px; row-gap: 6px; }
  [data-line-list] .line__main, [data-line-list] .line__cells, [data-line-list] .line__main > .unit { display: contents; }
  [data-line-list] .line > .field-error { grid-area: err; margin: 0; }
  [data-line-list] .line__main > .field--grow { grid-area: desc; }
  [data-line-list] .line__main > .unit > .field--unit { grid-area: unit; max-width: none; min-width: 0; }
  [data-line-list] .line__main > .unit > .field--unit-other { grid-area: other; max-width: none; min-width: 0; }
  [data-line-list] .line__qty { grid-area: qty; }
  [data-line-list] .line__price { grid-area: price; }
  [data-line-list] .line__disc { grid-area: disc; }
  [data-line-list] .line__vat { grid-area: vat; }
  [data-line-list] .line__foot { grid-area: foot; }
  [data-line-list] .line__amount { order: 2; margin: 0 0 0 auto; text-align: right; }
  [data-line-list] .line__qty input, [data-line-list] .line__price input, [data-line-list] .line__disc input { text-align: right; font-variant-numeric: tabular-nums; }
}
/* m-11 : un destinataire court (client choisi) — « Fecha y descripción » remonte sous lui, dans la même colonne ; Operación occupe la
   hauteur des deux. L'ordre du document (et du clavier) ne change pas ; seule la place à l'écran large. */
@media (min-width: 1180px) {
  .editor__main--paired { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr auto auto; column-gap: 14px; align-items: start; }
  .editor__main--paired > .editor__duo { display: contents; }
  .editor__main--paired > .editor__duo > .panel:first-child { grid-column: 1; grid-row: 1; }
  .editor__main--paired > .editor__duo > .panel:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
  .editor__main--paired > .editor__dates { grid-column: 1; grid-row: 2; }
  .editor__main--paired > .editor__dates .grid-2--date { grid-template-columns: minmax(0, 1fr); }
  .editor__main--paired > [data-lines] { grid-column: 1 / -1; grid-row: 3; }
  .editor__main--paired > .editor__more { grid-column: 1 / -1; grid-row: 4; }
}

/* fix2-D2 ── Passe de correction n°2 (#983), tranche D2. Rôle de l'orange (caqui), décidé ici : la MARQUE (logo du portail) et la POSITION
   dans la navigation (onglet courant, étape en cours) avec l'anneau de focus — jamais un état (« Emisor activo », « Activo », « En uso »
   passent au vert du statut), jamais un décor (bordures gauches des résumés et de l'émission, soulignés des liens discrets). */
.badge--active::before { background: var(--st-ok); }
.row--active { box-shadow: inset 3px 0 0 var(--tinta); }
.sum, .panel--focus, .sales-kpi--hero { box-shadow: none; }
.compare__side--correction { box-shadow: inset 0 3px 0 var(--tinta); }
.btn--quiet, .drop__cta { text-decoration-color: var(--tinta-40); text-decoration-thickness: 1px; }
.btn--quiet:hover, .drop__cta:hover { color: var(--tinta); text-decoration-color: currentColor; }
/* Document émis et vista previa : « Emisor » / « Destinatario » en Funnel Sans (Fragment Mono réservée aux codes et numéros). */
.party h2, .party h3 { font: 600 12px/1.3 var(--f-t); letter-spacing: 0; color: var(--tinta-60); }

/* Modelo y colores — cartes compactes (M11, idée 3) : vignette A4 de 76 px, nom, « Para… », pastilles ; la description et les exemples dans
   « Más sobre este modelo ». Un seul état « choisi » (M-a) : la carte cochée — bordure tinta 2 px, fond, coche. « En uso » : badge texte. */
.models .mcards > .mcard { grid-template-columns: 76px minmax(0, 1fr); column-gap: 12px; row-gap: 3px; padding: 10px; align-content: start; }
.models .mcards > .mcard > :not(.mcard__media) { grid-column: 2; }
.models .mcards > .mcard > .mcard__media { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
.models .mcards > .mcard > .mcard__more { grid-column: 1 / -1 !important; }
/* Les lignes de la carte ne s'étirent jamais à la hauteur de la vignette (sinon la coupe à deux lignes laisse voir la troisième). */
.models .mcards > .mcard > * { align-self: start; }
.mcard__media { position: relative; display: block; width: 76px; aspect-ratio: 210 / 297; overflow: hidden; border: 1px solid var(--rule-2); border-radius: 2px; background: var(--papel-2); }
.models .mcards .mcard__media > img.mcard__thumb { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; background: transparent; }
.mcard__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 4px; font: 600 9.5px/1.2 var(--f-d); text-align: center; overflow-wrap: anywhere; color: var(--tinta-60); }
.models .mcards > .mcard--ref { grid-template-columns: 56px minmax(0, 1fr); padding: 8px 10px; }
.models .mcards > .mcard--ref > .mcard__media { width: 56px; }
.mcard__fit { font-size: 12.5px; color: var(--tinta-80); }
.mcard__palette { margin: 0; }
.mcard__more { margin-top: 2px; }
.mcard__more > summary { min-height: 32px; text-decoration-color: var(--tinta-40); text-decoration-thickness: 1px; }
.mcard__more .mcard__summary { margin: 2px 0 6px; max-width: 60ch; }
.mcard.mcard--current:not(:has(.mcard__radio:checked)) { border: 1px solid var(--rule-2); box-shadow: none; background: var(--papel); }
.mcard.mcard--current:not(:has(.mcard__radio:checked)) .mcard__check { display: none; }
.mcard:has(.mcard__radio:checked) { border: 2px solid var(--tinta); padding: 9px; box-shadow: none; background: oklch(0.29 0.075 258 / 0.05); }
.models .mcards > .mcard--ref:has(.mcard__radio:checked) { padding: 7px 9px; }
.mcard__state { display: inline-flex; align-items: center; white-space: nowrap; }
.mcard__also { display: none; font: 600 12px/1.25 var(--f-t); color: var(--tinta); }
.mcard:has(.mcard__radio:checked) .mcard__also { display: inline; }
.badge--pick { color: var(--tinta); }
.badge--pick::before { border: 0; background: var(--tinta); }
@media (max-width: 719px) {
  .mcard__more > summary { min-height: 40px; }
}
/* À côté du panneau collant (≥ 1024 px), la colonne des cartes est étroite (≈ 500 px) : UNE colonne de cartes horizontales, lisibles
   (nom et badges sur une ligne, « Para… » entier : aucun texte tronqué), plutôt que deux colonnes de 110 px de texte. */
@media (min-width: 1024px) {
  .appearance .mcards.mcards--all { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .appearance .mcards > .mcard { grid-template-columns: 64px minmax(0, 1fr); row-gap: 2px; }
  .appearance .mcards > .mcard > .mcard__media { width: 64px; }
  .appearance .mcards > .mcard > .mcard__media { grid-row: 1 / span 4; }
  .appearance .mcards > .mcard > .mcard__more { grid-column: 2 !important; margin-top: 0; }
  .appearance .mcards > .mcard > .mcard__more > summary { min-height: 28px; }
}
/* M-f : pendant le redessin, l'aperçu s'atténue (60 %) et l'état dit « Actualizando ejemplo… » ; rien ne bouge sous reduced-motion. */
.appearance__preview .appearance__img { transition: opacity 0.15s ease-out; }
.appearance__preview[data-updating] .appearance__img { opacity: 0.6; }
@media (prefers-reduced-motion: reduce) { .appearance__preview .appearance__img { transition: none; } }
.appearance__publish .appearance__pending { flex: 1 0 100%; font-size: 12px; }

/* Pied (m-14) : plus de filet tronqué au-dessus du message « varios obligados ». */
.foot__multi { border-top: 0; padding-top: 0; }

/* Emisores (J-m8) : la forme d'émission dite une fois ; l'avancement de la revue, discret. */
.issuers__modes { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 0 0 12px; padding: 0; font-size: 12.5px; color: var(--tinta-80); }
.row__sub--quiet { font-size: 11.5px; color: var(--tinta-60); }

/* Mi cuenta (m-10) : libellé au-dessus de la valeur ; l'adresse ne se coupe qu'après « @ ». */
.acct__facts > div { grid-template-columns: minmax(0, 1fr); gap: 1px; }
.acct__email { overflow-wrap: normal; word-break: keep-all; }

/* Fiche de l'émetteur (M-c) : la valeur choisie en pastille, l'ajustement du PDF en sous-texte discret. */
.cchip__note .swatch { vertical-align: -1px; }

/* Bandeau « Este mes » (J-m7, idée 4) : chiffres-liens sobres, rectificatives à part. */
.month__figs dd a.month__num { text-decoration: underline; text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.month__figs dd a.month__num:hover { text-decoration-color: currentColor; }
.month__sub { font: 500 12.5px var(--f-t); color: var(--tinta-80); }

/* Ventas (M-d, idée 5) : partiel = couleur pleine + fine hachure claire ; un premier mois en grand chiffre et par jour ; pas de trous. */
.sales-bar--partial, .sales-fill-acc.sales-bar--partial { stroke: none; stroke-dasharray: none; }
.sales-fill-cur.sales-bar--partial { fill: var(--tinta); }
.sales-fill-acc.sales-bar--partial { fill: var(--caqui); }
.sales-partial { pointer-events: none; }
.sales-partial-line { fill: var(--papel); opacity: 0.55; }
.sales-row--grid { align-items: start; }
@media (min-width: 960px) {
  .sales-row--odd > :last-child { grid-column: 1 / -1; }
}
.sales-month1 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 2px 0 4px; }
.sales-month1__v { font: 600 30px/1.1 var(--f-d); font-variant-numeric: tabular-nums; color: var(--tinta); }
.sales-month1__s { font-size: 13px; color: var(--tinta-80); }
.sales-info { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px; font-size: 12.5px; color: var(--tinta-80); }
.sales-info__icon { flex: none; }
.sales-info__icon circle { fill: none; stroke: var(--tinta-60); stroke-width: 1.3; }
.sales-info__icon path { fill: none; stroke: var(--tinta-60); stroke-width: 1.5; stroke-linecap: round; }

/* En-tête à 390 px (m-16) : la bande sur une ligne, le nom de l'émetteur entier (jamais tronqué : invariant mesuré du banc),
   l'état et le NIF dans son menu : environ 130 px de chrome avant le contenu. */
.menu__ready { margin: 0 0 4px; }
@media (max-width: 719px) {
  .band__inner { padding-top: 3px; padding-bottom: 3px; }
  .band__long { display: none; }
  .ctx__inner { flex-wrap: nowrap; min-height: 52px; padding-top: 4px; padding-bottom: 4px; }
  .ctx__issuer { flex: 1 1 0; min-width: 0; }
  .menu__btn--issuer { max-width: 100%; min-width: 0; }
  .menu__btn--issuer .issuer__text { flex-wrap: nowrap; min-width: 0; }
  .menu__btn--issuer .issuer__name { display: block; min-width: 0; }
  .menu__btn--issuer .issuer__meta { display: none; }
}

/* fix3-E2 ── Passe de correction n°3 (#983, D-325), tranche E2 : Modelo y colores (M-h, M-c), Ventas (m-17, m-19), pointillés réservés
   aux zones de dépôt (m-4), Prestaciones (m-26), pied (m-27), en-tête à 320 px (m-16), Emisores (AI slop). ─────────────────────────── */

/* M-h : un rôle = UNE ligne (numéro et libellé | pastille-sélecteur et code), puis ce qu'il colore et, seulement quand c'est vrai, le ton
   du PDF. Quatre rôles tiennent ainsi dans le panneau à côté d'un aperçu de 300 px, sans défilement interne, bouton de publication visible. */
.roles > .role { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 8px; }
.roles > .role > .role__label { margin: 0; }
.roles > .role > .role__what, .roles > .role > .role__feedback { grid-column: 1 / -1; }
.appearance .role .role__row > .role__code { flex: 0 0 96px; width: 96px; max-width: none; }
.appearance__legend:has(> li:nth-child(4)) { display: grid; grid-template-columns: repeat(2, max-content); gap: 4px 18px; }
@media (min-width: 1200px) {
  .appearance__body { grid-template-columns: 300px minmax(0, 1fr); }
  .roles > .role { padding: 7px 0; }
  .appearance__fields > .appearance__tools { margin: 6px 0 2px; }
}
/* À défaut (écran plus bas, 1024–1199 px) : la zone défilante le DIT — un fondu papier de 20 px collé au bas de la zone visible, qui est
   aussi la marge basse du panneau : tant qu'il reste du contenu dessous, le texte s'y efface ; en fin de défilement (ou sans défilement), il
   ne recouvre que sa propre marge. Aucun script ; le fond du texte, lui, reste le papier uni. */
@media (min-width: 1024px) {
  .appearance__side > .appearance__panel { padding-bottom: 0; }
  .appearance__side > .appearance__panel::after { content: ""; position: sticky; bottom: 0; display: block; height: 20px; background: linear-gradient(oklch(0.994 0.004 85 / 0), var(--papel)); pointer-events: none; }
}

/* m-4 : les pointillés sont réservés aux zones de dépôt de fichier. Bouton désactivé : bordure pleine atténuée, texte secondaire ; encarts
   (notes de fiche, « ¿Hay un error…? », états vides) : bordure pleine légère ; « Acciones sensibles » : un lien rouge sobre, sans cadre. */
.btn:disabled { border-style: solid; }
.panel--plain { border-style: solid; }
.panel--plain:not(.empty) { color: var(--tinta-80); }
.disclosure--quiet, .logo__preview { border-style: solid; }
.toc--bar .toc__danger a { padding: 0 4px; border: 0; background: none; color: var(--st-block); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.toc--bar .toc__danger a:hover { color: var(--st-block); text-decoration-thickness: 2px; }

/* m-19 : factures antérieures en CONTOUR seul (papier, trait tinta) — la hachure reste au seul partiel. fix5-F4 (m-11, remplace m-17) :
   « Últimas facturas » garde SA hauteur (aucune carte étirée avec un vide) ; son lien suit la dernière ligne. */
.sales-declared { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.5; }
.sales-panel--recent > .sales-recent__all { padding-top: 8px; }
.sales-data__note { margin: 6px 0 4px; }

/* m-26 : dans le formulaire d'une prestation, l'unité occupe toute sa colonne (plus d'aide sur quatre lignes sous un champ de 180 px). */
.grid-3 > .unit > .field--unit, .grid-3 > .unit > .field--unit-other { max-width: none; }

/* AI slop (Emisores) : l'avancement d'une carte — une barre fine (`<progress>` natif) et une ligne courte. */
.iprog { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 11.5px; color: var(--tinta-60); }
.iprog__bar { -webkit-appearance: none; appearance: none; flex: none; width: 72px; height: 4px; border: 0; border-radius: 2px; background: var(--rule); color: var(--tinta-60); overflow: hidden; }
.iprog__bar::-webkit-progress-bar { border-radius: 2px; background: var(--rule); }
.iprog__bar::-webkit-progress-value { border-radius: 2px; background: var(--tinta-60); }
.iprog__bar::-moz-progress-bar { border-radius: 2px; background: var(--tinta-60); }

@media (max-width: 719px) {
  /* m-27 : pied en grille 2 × 2 équilibrée — la marque prend une case quand les colonnes de liens sont en nombre impair (3 : Producto,
     Cuenta, Ayuda ; 1 : Acceso) ; avec quatre colonnes, elle garde sa ligne. */
  .foot__inner:not(:has(> .foot__col:nth-of-type(4))) > .foot__brand { grid-column: auto; }
  .foot__product { align-items: flex-start; }
  .foot__product .brand__mark { margin-top: 1px; }
}

/* m-16 : à 320 px, le chrome tient en ≈ 120 px (au lieu de 165) sans rien tronquer : la bande d'environnement sur UNE ligne (marque
   SIMULATED gardée, en plus petit), la ligne de l'émetteur à 44 px de cible, son nom sur deux lignes au plus à côté de « Nueva factura ». */
@media (max-width: 359px) {
  .band::before { height: 3px; }
  .band__inner { flex-wrap: nowrap; align-items: center; gap: 0 8px; padding-top: 2px; padding-bottom: 2px; }
  .band__text { gap: 5px; font-size: 11px; white-space: nowrap; }
  .band__text::before { width: 6px; height: 6px; }
  .band__mark { font-size: 10px; letter-spacing: -0.02em; white-space: nowrap; }
  .ctx__inner { min-height: 44px; gap: 4px 8px; padding-top: 3px; padding-bottom: 3px; }
  .menu__btn--issuer { gap: 6px; padding-right: 6px; }
  .issuer__name { font-size: 12.5px; line-height: 1.2; }
  .ctx__new .btn { padding: 0 10px; }
}

/* fix3-E1 ── Passe de correction n°3 (#983), tranche E1 : conflit d'un envoi explicite, Facturas « Todo » sans colonne latérale (N7),
   erreurs de ligne lisibles et refus du brouillon (M-i), « Este mes » en écran étroit, mineurs m-7, m-22. */
/* Le conflit d'un envoi explicite : en tête du formulaire, visible sans script ; le foyer y est porté quand un autre bouton est pressé. */
.saveconflict--submitted { margin: 0 0 14px; padding: 12px 14px; font-size: 13px; }
.saveconflict--submitted:focus { outline: 2px solid var(--caqui); outline-offset: 2px; }
.saveconflict--submitted .saveconflict__acts .btn { min-height: 40px; }

/* « Este mes » : en écran étroit le lien du chiffre est un `inline-flex` — l'espace en tête de « y 1 rectificativa » y était avalé
   (« 15y 1 rectificativa ») ; l'écart vient du conteneur, et la phrase passe à la ligne entière si elle ne tient pas. */
.month__figs dd a.month__num { flex-wrap: wrap; column-gap: 0.3em; }

/* N7 : avec « Todo », une seule colonne — les brouillons en bandeau au-dessus (trois rangées compactes), les émises sur toute la largeur. */
.invgrid--band { grid-template-columns: minmax(0, 1fr); }
.invgrid__drafts--band { margin: 0 0 18px; }
.drafts--band th, .drafts--band td { padding-top: 6px; padding-bottom: 6px; vertical-align: middle; }
.drafts--band .drafts__sub { display: none; }
.drafts__all { margin: 6px 0 0; font-size: 13px; font-weight: 600; }
/* « Tipo » (et ses renvois) : jamais un mot coupé en son milieu — le retour à la ligne se fait aux espaces seulement. */
.docs td[data-label="Tipo"], .docs td[data-label="Tipo"] .row-sub, .docs td[data-label="Tipo"] .mono, .docs td[data-label="Destinatario"] { overflow-wrap: break-word; hyphens: none; }
@container (min-width: 900px) {
  .docs { table-layout: auto; width: 100%; }
  .docs th, .docs td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
  .docs th[scope="row"] { width: 176px; }
  .docs td[data-label="Tipo"] { width: 160px; white-space: nowrap; }
  .docs td[data-label="Tipo"] .row-sub { white-space: nowrap; }
  .docs td[data-label="Fecha"] { width: 96px; }
  .docs td[data-label="Destinatario"] { min-width: 280px; }
  .docs td[data-label="Total"] { width: 190px; }
  .docs .row-sub { margin-top: 1px; line-height: 1.3; }
  .docs td[data-label="Total"] .row-sub { max-width: none; white-space: nowrap; }
  /* La barre du lot sur une ligne : la sélection à gauche, les boutons à droite. */
  .batch__bar { flex-wrap: nowrap; }
  .batch__all { flex: none; white-space: nowrap; }
  .batch__count { flex: 1 1 auto; min-width: 0; }
  .batch__bar .btn { flex: none; }
}

/* M-i : la marque rouge d'un groupe invalide est un BORD avec son retrait, jamais dessinée sur la première lettre ; un groupe à choix
   (IVA) la porte déjà sur ses options. Dans une ligne ou un groupe invalides, seul le champ en cause (`aria-invalid`) est rouge. */
fieldset.field--invalid:not(.segf) { box-shadow: none; border-left: 3px solid var(--st-block); padding-left: 10px; }
fieldset.segf.field--invalid { box-shadow: none; }
.line.field--invalid input:not([aria-invalid="true"]):not([type="checkbox"]):not([type="radio"]),
.line.field--invalid select:not([aria-invalid="true"]),
.line.field--invalid textarea:not([aria-invalid="true"]),
fieldset.field--invalid input[type="search"]:not([aria-invalid="true"]) { border-color: var(--rule-2); border-left-width: 1px; }
/* M-i : même ordre des cartes dans tous les états — « Fecha y descripción » toujours après « Líneas » (l'ordre du document et du clavier). */
@media (min-width: 1180px) {
  .editor__main--paired { display: block; }
  .editor__main--paired > .editor__duo { display: grid; }
  .editor__main--paired > .editor__duo > .panel:first-child, .editor__main--paired > .editor__duo > .panel:nth-child(2) { grid-column: auto; grid-row: auto; }
  .editor__main--paired > .editor__dates .grid-2--date { grid-template-columns: 200px minmax(0, 1fr); }
}
/* m-13, M-i : les erreurs des cellules d'une ligne, sur la largeur de la ligne, sous ses cellules — une par champ, nommée. */
.line__errs { display: grid; gap: 2px; min-width: 0; }
.line__errs .field-error { margin: 0; }
.line__err-of { font-weight: 600; }
@container (min-width: 640px) {
  [data-line-list] .line { grid-template-areas: "err err err err err err err" "desc desc desc desc desc desc acts" "qty unit price disc vat amount acts" ". other other other . . ." "cerr cerr cerr cerr cerr cerr ." "chk chk chk chk chk chk chk"; }
  [data-line-list] .line__errs { grid-area: cerr; }
}
@container (max-width: 639px) {
  [data-line-list] .line { grid-template-areas: "err err" "desc desc" "qty unit" "other other" "price disc" "vat vat" "cerr cerr" "foot foot"; }
  [data-line-list] .line__errs { grid-area: cerr; }
}

/* m-7 : la barre collante de la vista previa — le total en Funnel Sans, chiffres tabulaires (jamais Fragment Mono). */
.pvbar__total strong { font-family: var(--f-t); font-variant-numeric: tabular-nums; }
/* m-22 : « Precio (€) » et « Descuento (€) » avec leur précision en sous-texte — à l'écran étroit, deux libellés de même hauteur (les deux
   champs restent alignés) ; la barre collante dit « Vista previa », le nom accessible reste « Guardar y ver vista previa ». */
.lsub { font-weight: 400; color: var(--tinta-60); }
@container (max-width: 639px) {
  [data-line-list] .lsub { display: block; font-size: 11.5px; }
}
.btn__short { display: none; }
.editor__bar .btn__long { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
.editor__bar .btn__short { display: inline; }
/* m-24 : à l'écran large, les en-têtes des colonnes une seule fois (au-dessus de la liste, hors d'elle) et le MÊME gabarit pour chaque ligne —
   la description garde son libellé dans chaque ligne ; les libellés des cellules sont masqués à l'œil partout (lus par les lecteurs d'écran).
   Les en-têtes suivent la largeur du bloc des lignes (conteneur nommé, sans effet sur les requêtes des autres éléments). */
[data-lines] { container: lines-panel / inline-size; }
.lines__head { display: none; }
@container lines-panel (min-width: 640px) {
  .lines__head { display: grid; grid-template-columns: 60px minmax(80px, 1fr) 92px 80px 150px 92px 32px; grid-template-areas: "qty unit price disc vat amount acts"; column-gap: 8px; align-items: end; padding: 0 8px 6px 30px; border-bottom: 1px solid var(--rule); font: 600 11.5px/1.3 var(--f-t); color: var(--tinta-80); }
  .lines__h--qty { grid-area: qty; text-align: right; }
  .lines__h--unit { grid-area: unit; }
  .lines__h--price { grid-area: price; text-align: right; }
  .lines__h--disc { grid-area: disc; text-align: right; }
  .lines__h--vat { grid-area: vat; }
  .lines__h--amount { grid-area: amount; text-align: right; }
}
@container (min-width: 640px) {
  [data-line-list] .line .line__cells .field > label, [data-line-list] .line .line__main > .unit > .field--unit > label, [data-line-list] .line .segf__legend, [data-line-list] .line .line__amount-label {
    position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  [data-line-list] .line + .line .field--grow > label { position: static !important; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  [data-line-list] .line + .line .line__buttons { padding-top: 18px; }
}
/* m-21 : la liste défilante des clients s'arrête sur le bord d'une carte (jamais au milieu d'une carte), avec ou sans script. */
.cpick--long .ccards { scroll-snap-type: y proximity; scroll-padding-block: 2px; }
.cpick--long .ccards > * { scroll-snap-align: start; }
/* Le compteur du lot masqué à l'œil (écran étroit, aucune case) : découpé (`clip`), jamais une zone défilante cachée. */
@media (max-width: 719px) {
  .batch[data-batch-checked="0"] .batch__count { overflow: clip; }
}
/* Le conflit d'un envoi : en tête du formulaire sur toute sa largeur (au-dessus du contenu ET du résumé), jamais dans la seule colonne principale. */
.editor > .saveconflict--submitted { grid-column: 1 / -1; grid-row: 1; }
@media (min-width: 960px) {
  .editor:has(> .saveconflict--submitted) > .editor__main, .editor:has(> .saveconflict--submitted) > .editor__aside { grid-row: 2; }
}

/* fix4-F2 ── Passe de finitions n°4 (#983, D-325) : Ayuda, Modelo y colores, Ventas, Facturas anteriores, fiche client, Mi cuenta, pied ── */
/* M-l : l'accueil d'Ayuda en grille de cartes (3 colonnes en large, 2 vers 900 px, 1 en étroit), puis UN thème par vue (`:target`). Sans
   `:has`, rien n'est masqué : toute l'aide reste lisible. Le thème ciblé : son titre arrive sous le haut de l'écran, jamais rogné. */
.help-home { margin: 0 0 12px; }
.help-cards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; }
.help-cards > li { display: flex; min-width: 0; }
.help-card { display: flex; flex: 1; flex-direction: column; gap: 3px; min-height: 64px; padding: 12px 14px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); color: var(--tinta); text-decoration: none; transition: border-color 0.15s ease; }
.help-card:hover { border-color: var(--tinta); }
.help-card:focus-visible { outline: 2px solid var(--caqui); outline-offset: 2px; }
.help-card__t { font: 600 14.5px/1.3 var(--f-d); }
.help-card__s { font-size: 13px; line-height: 1.45; color: var(--tinta-80); }
.help-all { margin: 10px 0 0; font-size: 13px; }
.help-all a { display: inline-flex; align-items: center; min-height: 40px; }
.help-doc h2[id] { scroll-margin-top: 76px; }
.help-doc .panel h3 { margin: 14px 0 6px; font: 600 14px/1.3 var(--f-d); color: var(--tinta); }
.help-doc .panel ul, .help-doc .panel ol { margin: 0 0 8px; padding-left: 20px; }
.help-doc .panel li > ul { margin: 4px 0 0; }
.help-doc .panel p, .help-doc .panel li { max-width: 92ch; }
.help-top { display: block; }
.help-index a[aria-current] { font-weight: 600; color: var(--tinta); box-shadow: inset 2px 0 0 var(--tinta); }
@media (min-width: 720px) {
  .help-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .help-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .help-doc h2[id] { scroll-margin-top: 24px; }
  .help-top { display: block; }
}
@supports selector(:has(*)) {
  .help-topic { display: none; }
  .help-topic:has(:target), .help-layout:has(#toda:target) .help-topic { display: block; }
  .help-layout:has(.help-topic :target) .help-home { display: none; }
  .help-layout:not(:has(.help-topic :target)) > .help-index { display: none; }
  @media (min-width: 1100px) {
    .help-layout:not(:has(.help-topic :target)) { grid-template-columns: minmax(0, 1fr); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .help-card { transition: none; }
}
@media print {
  .help-topic { display: block !important; }
  .help-home { display: none; }
}
/* m-35 : avec « Sin cambios », le bouton de publication se lit désactivé (atténué, fond arena, curseur interdit) ; la carte choisie se
   signale par sa case et son contour, sans fond teinté ni coche en plus. */
.appearance [data-publish]:disabled { opacity: 0.55; background: var(--arena-2); border: 1px solid var(--rule-2); color: var(--tinta-60); box-shadow: none; cursor: not-allowed; }
.mcard:has(.mcard__radio:checked) { background: var(--papel); }
/* fix5-F4 (m-11, remplace m-17 / m-33) : Ventas sans carte étirée — chaque panneau garde la hauteur de son contenu (« Ver los datos » suit
   le graphique, jamais repoussé en bas d'un vide) ; les panneaux d'une rangée s'alignent en haut. */
.sales-row--main, .sales-row--grid { align-items: start; }
.sales-panel > .sales-data { margin-top: 0; }
/* Le mois naissant : une frise de ses jours de ventes (jour · factures · barre · base), une ligne chacun. */
.sales-days { list-style: none; display: grid; gap: 0; margin: 4px 0 8px; padding: 0; }
.sales-days__row { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) auto; grid-template-areas: "d bar v" "n bar v"; align-items: center; gap: 0 14px; padding: 8px 0; border-top: 1px solid var(--rule); }
.sales-days__row:first-child { border-top: 0; }
.sales-days__d { grid-area: d; font-weight: 600; white-space: nowrap; }
.sales-days__n { grid-area: n; font-size: 12px; color: var(--tinta-60); white-space: nowrap; }
.sales-days__bar { grid-area: bar; display: block; width: 100%; height: 10px; overflow: visible; }
.sales-days__v { grid-area: v; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sales-days__fill--neg { fill: var(--tinta-40); }
/* Mois naissant en écran large : frise | Clientes | Tratamiento fiscal, trois panneaux courts à la même hauteur. */
@media (min-width: 1100px) {
  .sales-row--main.sales-row--nascent { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); }
  .sales-row--nascent > .sales-side { display: contents; }
  .sales-row--nascent .sales-panel--side .sales-rank__label { display: block; overflow: visible; }
}
/* m-e : « Tipo de documento » — quatre puces blanches bordées de largeur égale, chacune avec son cercle radio ; la choisie : contour tinta et
   cercle plein coché. Empilées en écran étroit. */
.segf--kind .segf__opts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0; border: 0; background: transparent; }
.segf--kind .segf__opt { justify-content: flex-start; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel); color: var(--tinta); text-align: left; }
.segf--kind .segf__opt:hover { border-color: var(--tinta-60); background: var(--papel); }
.segf--kind .segf__opt::before, .segf--kind .segf__opt:has(.segf__input:checked)::before { content: ""; flex: none; box-sizing: border-box; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--tinta-60); border-radius: 50%; background: var(--papel); transform: none; }
.segf--kind .segf__opt:has(.segf__input:checked) { border: 2px solid var(--tinta); padding: 0 13px; box-shadow: none; }
.segf--kind .segf__opt:has(.segf__input:checked)::before { border-color: var(--tinta); background: var(--tinta); }
.segf--kind .segf__opt:has(.segf__input:checked)::after { content: ""; position: absolute; left: 18px; top: 50%; width: 6px; height: 3px; margin-top: -3px; border-left: 2px solid var(--papel); border-bottom: 2px solid var(--papel); transform: rotate(-45deg); }
.segf.segf--kind.field--invalid .segf__opts { border: 0; box-shadow: none; }
.segf.segf--kind.field--invalid .segf__opt { border-color: var(--st-block); }
@media (min-width: 720px) {
  .segf--kind .segf__opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* m-42 : le « Siguiente paso » des Facturas anteriores porte un lien texte (le bouton est en tête de page). */
.nextstep__link { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }
@media (max-width: 719px) {
  .nextstep__act:has(> .nextstep__link) { width: auto; }
}
/* m-39 : les notes de la fiche client, sous les données, sans cadre lourd. */
.client-notes { margin-top: 12px; }
/* m-38 : le message « varios obligados » (D-310, intégral) sur une rangée pleine largeur, séparée par un filet — plus de paragraphe qui
   flotte au milieu d'une bande vide. */
.foot__multi { max-width: none; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule); }
/* Slop Mi cuenta : les permissions en texte séparé par des points — jamais des pastilles qui ressemblent à des boutons. */
.permchips { gap: 0; }
.permchip { min-height: 0; padding: 0; border: 0; border-radius: 0; background: transparent; font: 400 13px/1.4 var(--f-t); color: var(--tinta); white-space: nowrap; }
.permchips > li:not(:last-child)::after { content: "·"; margin: 0 6px; color: var(--tinta-60); }
.acct__legend .permchip { font-weight: 600; }
/* fix4-F2 ── fin */

/* fix4-F1 ── Passe de finitions n°4 (#983, D-325), tranche F1 : refus guidé, présentation changée, conflit, avis de page, éditeur, Facturas ── */
/* M-j : le résumé d'erreurs reçoit le foyer au chargement — numéroté, dans l'ordre de la page ; jamais collé au bord haut de l'écran. */
.error-summary { scroll-margin-top: 16px; }
.error-summary:focus { outline: 2px solid var(--caqui); outline-offset: 2px; }
.error-summary ol { margin: 0; padding-left: 20px; }
.error-summary li { margin: 1px 0; }
.error-summary li::marker { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--st-block); }
/* M-j : dans le résumé collant, au-dessus des actions, la ligne d'alerte « N datos por completar » (mot, forme, lien vers le résumé). */
.sum__pending { position: relative; margin: 0 0 10px; padding-left: 18px; font-size: 12.5px; font-weight: 600; color: var(--st-block); }
.sum__pending::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 11px; height: 11px; background: currentColor; clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.sum__pending a { color: inherit; text-decoration-color: currentColor; }
.sum__pending a:hover { color: var(--tinta); }

/* m-31 : l'erreur se lit par l'icône et la couleur ; le nom du champ, une fois, en gras. */
.line__err-of { font-weight: 700; }

/* m-40, M-i : UN ordre — Destinatario puis Fecha y descripción dans la première colonne, Operación à côté, Líneas dessous. */
.editor__col { min-width: 0; }
.editor__col > .panel { margin-bottom: 12px; }
@media (min-width: 1180px) {
  .editor__duo > .editor__col > .panel:last-child { margin-bottom: 12px; }
  .editor__duo .editor__col .grid-2--date { grid-template-columns: minmax(0, 1fr); }
  /* Destinataire écrit : toute la largeur pour lui, puis la date, puis l'opération (cartes sur deux colonnes) — jamais une demi-rangée vide. */
  .editor__duo:has(> .editor__col > .editor__dest--free) > * { grid-column: 1 / -1; }
  .editor__duo:has(> .editor__col > .editor__dest--free) .editor__col .grid-2--date { grid-template-columns: 200px minmax(0, 1fr); }
  .editor__duo:has(> .editor__col > .editor__dest--free) .kinds, .editor__duo:has(> .editor__col > .editor__dest--free) .opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* m-24, m-41 : « del catálogo » est une étiquette à côté de « Línea N — descripción » ; l'importe, centré sur la rangée des champs. */
.line__tag { display: inline-block; margin-left: 6px; padding: 0 6px; border: 1px solid var(--rule-2); border-radius: var(--r-1); background: var(--papel); font: 500 11px/1.6 var(--f-t); color: var(--tinta-80); white-space: nowrap; vertical-align: 1px; }
@container (min-width: 640px) {
  [data-line-list] .line__amount, [data-line-list] .line + .line .line__amount { align-self: center; padding-bottom: 0; }
}

/* m-30 : les tipos d'IVA en Funnel Sans tabulaire 14 px, puces blanches bordées (jamais une piste grise qui paraît éteinte) ; le choisi :
   contour tinta épaissi ET coche. */
.segf--vat .segf__opts { gap: 6px; padding: 0; border: 0; background: transparent; box-shadow: none; }
/* `label.segf__opt` : passe devant `.line .field label` (11,5 px), la règle des libellés de cellule. */
.segf--vat label.segf__opt { min-height: 34px; padding: 0 8px; border: 1px solid var(--rule-2); background: var(--papel); font: 500 14px/1.2 var(--f-t); font-variant-numeric: tabular-nums; color: var(--tinta); }
.segf--vat .segf__opt:hover { border-color: var(--tinta-60); background: var(--papel); }
.segf--vat .segf__opt:has(.segf__input:checked) { border-color: var(--tinta); box-shadow: inset 0 0 0 1px var(--tinta); font-weight: 600; }
.segf--vat .segf__opt:has(.segf__input:checked)::before { width: 7px; height: 3.5px; }
.segf--vat.field--invalid .segf__opts { border: 0; box-shadow: none; }
.segf--vat.field--invalid .segf__opt { border-color: var(--st-block); }
@media (max-width: 719px) {
  .segf--vat label.segf__opt { min-height: 40px; }
}
/* À 14 px, les trois puces (et la coche) tiennent sur UNE rangée : la colonne IVA des lignes passe de 150 à 172 px (la description de
   l'unité cède la place) — mêmes colonnes pour les en-têtes et les lignes. */
.segf--vat label.segf__opt { padding: 0 6px; }
.segf--vat .segf__opts { gap: 4px; }
@container (min-width: 640px) {
  [data-line-list] .line { grid-template-columns: 60px minmax(80px, 1fr) 92px 80px 172px 92px 32px; }
}
@container lines-panel (min-width: 640px) {
  .lines__head { grid-template-columns: 60px minmax(80px, 1fr) 92px 80px 172px 92px 32px; }
}

/* m-28 : le conflit, UNE carte — son icône sur la première ligne, ses deux boutons pleine largeur dans la colonne du résumé. */
.saveconflict__lead { position: relative; padding-left: 18px; }
.saveconflict__lead::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 11px; height: 11px; background: var(--st-block); clip-path: polygon(50% 4%, 100% 96%, 0 96%); }
.saveconflict:focus { outline: 2px solid var(--caqui); outline-offset: 2px; }
.editor__aside .saveconflict__acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.editor__aside .saveconflict__acts .btn { width: 100%; min-height: 40px; }

/* M-k : présentation changée — une INFORMATION (filet tinta, fond papier, icône « i »), distincte de « Antes de emitir, compruebe ». */
.infonote { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--rule-2); border-left: 3px solid var(--tinta); border-radius: var(--r-2); background: var(--papel); scroll-margin-top: 16px; }
.infonote:focus { outline: 2px solid var(--caqui); outline-offset: 2px; }
.infonote__icon { flex: none; margin-top: 1px; }
.infonote__icon circle { fill: none; stroke: var(--tinta); stroke-width: 1.6; }
.infonote__icon path { fill: none; stroke: var(--tinta); stroke-width: 1.8; stroke-linecap: round; }
.infonote__body { min-width: 0; }
.infonote__title { margin: 0 0 2px; font: 600 14px/1.35 var(--f-t); letter-spacing: 0; }
.infonote__list { margin: 0; padding: 0; list-style: none; font-size: 13px; }
.infonote__act { margin: 2px 0 0; font-size: 13px; font-weight: 600; }
.badge--changed { padding: 1px 8px; border: 1px solid var(--tinta); border-radius: 999px; background: var(--papel); color: var(--tinta); }
.badge--changed::before { border: 0; border-radius: 0; width: 7px; height: 7px; background: var(--tinta); transform: rotate(45deg); }
.pvmodel--changed { border-color: var(--tinta); box-shadow: inset 3px 0 0 var(--tinta); }
/* À 390 (sous 1024 px) : la bande « Modelo y colores » juste sous l'avis, avant le résumé chiffré et la composition. */
@media (max-width: 1023px) {
  .pv--changed .pv__paper { display: contents; }
  .pv--changed .pv__paper > .pvmodel { order: 0; margin: 0; }
  .pv--changed .pv__paper > .zoom, .pv--changed .pv__paper > .paper, .pv--changed .pv__paper > .pvtext { order: 2; }
  .pv--changed .pv__paper > .zoom { margin: 0; }
}

/* m-24 : Borradores — la même grille dans le bandeau de « Todo » et dans le filtre : mêmes colonnes, même rangée (description comprise). */
.drafts--band .drafts__sub { display: block; }
.drafts th, .drafts td { vertical-align: middle; }
.drafts--band th, .drafts--band td { padding-top: 8px; padding-bottom: 8px; }
@container (min-width: 560px) {
  .drafts { table-layout: fixed; width: 100%; }
  .drafts th, .drafts td { padding-top: 8px; padding-bottom: 8px; }
  .drafts thead th:last-child { width: 150px; }
  .drafts thead th:nth-last-child(2) { width: 150px; }
}

/* m-32 : Facturas à l'écran large — « Tipo » 150 px (il ne s'élargit que pour un renvoi « Rectifica a … » plus long, jamais coupé :
   la rangée reste sur une ligne) ; la place va au destinataire, sur une ligne. */
@container (min-width: 900px) {
  .docs td[data-label="Tipo"] { width: 150px; }
}
/* fix4-F1 ── fin */

/* fix5-F3 */
/* Passe 5 (#983) : défauts relevés par le testeur de parcours (F3). */
/* Passe 5 (F3) : une carte quittée qui montre les couleurs gardées dans la page le dit, sous la source (deuxième ligne, jamais coupée). */
.mcard__kept { display: block; margin-top: 2px; color: var(--tinta-80); }
/* Passe 5 (F3) : « Descartar borrador » en deux temps sans script — le lien discret ouvre un encadré qui dit ce qui sera perdu et porte le
   vrai bouton. Le résumé n'a pas de triangle (c'est un lien d'action) ; ouvert, l'encadré prend toute la largeur de sa rangée. */
.discardask > summary { list-style: none; cursor: pointer; }
.discardask > summary::-webkit-details-marker { display: none; }
.discardask__body { display: grid; justify-items: start; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--st-block); border-radius: var(--r-2); background: var(--papel); font-size: 13px; text-align: left; white-space: normal; }
.discardask__body p { margin: 0; color: var(--tinta); }
.sum__actions .discardask { justify-self: stretch; text-align: center; }
.compare__side .actions .discardask { margin-left: auto; }
.actions .discardask[open] { flex-basis: 100%; margin-left: 0; }
/* Passe 5 (F3, défaut 4) : un lien du résumé (ou toute ancre vers un champ) pose le champ SOUS le bord haut de la fenêtre, son étiquette
   visible au-dessus ; un groupe désigné (choix d'IVA, retenue, destinataire, lignes), qui porte sa légende en tête, un peu sous le bord. */
main :is(input, select, textarea) { scroll-margin-top: 56px; }
main :is(fieldset, section, details, div)[id][tabindex="-1"] { scroll-margin-top: 16px; }
main :is(fieldset, section, details, div)[id][tabindex="-1"]:focus { outline: 2px solid var(--caqui); outline-offset: 2px; }
/* Passe 5 (F3, défaut 7) : la carte reçoit le foyer après le choix d'un client (ancre) — un contour visible, comme tout foyer. */
.chosen:focus { outline: 2px solid var(--caqui); outline-offset: 2px; }
/* fix5-F3 ── fin */

/* fix5-F4 */
/* N-1 : Ventas en écran étroit (< 480 px) — le nom sur toute la largeur, replié autant qu'il faut ; puis le montant et le pourcentage
   alignés à droite ; puis la barre. Aucun nom n'est abrégé ni coupé à un nombre de lignes (règles retirées de la feuille). */
@media (max-width: 479.98px) {
  .sales-rank__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "value" "bar"; }
  .sales-rank__value { justify-self: end; white-space: normal; }
}

/* M-1 : vista previa de la rectificativa — comme celle de la facture : à 1024 px et plus, la colonne d'émission collante à droite ;
   la correction puis la facture corrigée à gauche. Sous 1024 px : correction, original, carte « Emitir », barre basse (`.pvbar`). */
.rpv { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; margin: 0 0 12px; }
.rpv__main { display: grid; gap: 12px; min-width: 0; }
.rpv__side { display: grid; gap: 12px; min-width: 0; }
.rpv__side > * { margin: 0; }
@media (min-width: 1024px) {
  .rpv { grid-template-columns: minmax(0, 1fr) 360px; gap: 0 20px; }
  .rpv__side { position: sticky; top: 12px; }
  .rpv__side .panel--focus { padding: 12px 14px; gap: 8px; }
  .rpv__side .panel--focus h2 { font-size: 14px; }
  .rpv__side .panel--focus .note { margin: 0; font-size: 12.5px; line-height: 1.45; }
}

/* M-2 : Facturas sans rien — « Su primera factura » : trois étapes, un bouton plein, un lien. */
.firstinv { max-width: 760px; margin: 4px 0 12px; padding: 16px 18px; border-left: 3px solid var(--tinta); }
.firstinv__title { margin: 0 0 8px; font: 600 16px var(--f-d); color: var(--tinta); }
.firstinv p { margin: 0; max-width: 64ch; font-size: 13.5px; color: var(--tinta-80); }
.firstinv__steps { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; font-size: 13.5px; line-height: 1.45; color: var(--tinta-80); }
.firstinv__steps strong { color: var(--tinta); }
.firstinv__act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 0 0 10px; }
.firstinv__act form { margin: 0; }
.firstinv__link { display: inline-flex; align-items: center; min-height: 40px; font-weight: 600; }
@media (max-width: 719px) {
  .firstinv__act form, .firstinv__act .btn { width: 100%; }
}

/* m-1 : en écran étroit, « Descargar seleccionadas (ZIP) » reste visible à zéro — éteint (le script le désactive), il dit où agir. */
@media (max-width: 719px) {
  .batch[data-batch-checked="0"] [data-batch-submit] { display: inline-flex; }
}

/* m-3 : un seul bouton plein par vue — quand le contenu de la page porte sa propre action pleine (« Nuevo cliente », « Añadir factura
   anterior », « Nueva factura para este cliente »…), le « Nueva factura » permanent de l'en-tête passe en secondaire. */
@supports selector(:has(*)) {
  body:has(main .btn:not(.btn--secondary):not(.btn--danger):not(.btn--quiet):not([hidden])) .ctx__new .btn { background: var(--papel); border-color: var(--rule-2); color: var(--tinta); }
  body:has(main .btn:not(.btn--secondary):not(.btn--danger):not(.btn--quiet):not([hidden])) .ctx__new .btn:hover { background: var(--papel); border-color: var(--tinta); color: var(--tinta); }
}

/* m-7 : l'éditeur de rectificative — en étroit, la facture corrigée dite avant le formulaire (le détail suit) ; en large, la correction
   plus large que l'original (motifs sur deux colonnes) : moins de hauteur, moins de vide sous l'original. */
.rectbrief { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: var(--r-2); background: var(--papel-2); font-size: 13px; color: var(--tinta-80); }
.rectbrief__k { font-weight: 600; color: var(--tinta); }
.rectbrief__v { flex-basis: 100%; overflow-wrap: anywhere; }
@media (min-width: 720px) {
  .rectbrief { display: none; }
}
@media (min-width: 1100px) {
  .compare[data-rect-edit] { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .compare[data-rect-edit] .opts--list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* fix5-F4 ── fin */

/* fix5-F5 ── Passe de correction n°5 (#983) : éditeur sans escalier, clients dans la page, un seul style de radio, aide lisible, finitions ── */
/* M-5 : l'éditeur — « Destinatario » et « Fecha y descripción » côte à côte en tête (≥ 1180 px), « Líneas » sur toute la largeur dès le
   premier écran (le catalogue sous les lignes), « Operación » compacte dessous (nature | retenue). Une grille, la même dans tous les états
   (répertoire, client choisi, destinataire écrit, refus, conflit) ; l'ordre du document est celui de l'œil et du clavier. En étroit, une
   colonne dans le même ordre. */
.editor__top { display: grid; grid-template-columns: minmax(0, 1fr); }
.editor__top > .panel { min-width: 0; }
[data-lines] > .chooser { margin: 10px 0 0; }
[data-lines] > .chooser + .lines__foot { margin-top: 10px; }
@media (min-width: 1180px) {
  .editor__top { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 0 14px; align-items: start; }
  .editor__top .ccards { grid-template-columns: minmax(0, 1fr); }
  .editor__top .editor__dates .grid-2--date { grid-template-columns: minmax(0, 1fr); }
  /* Le destinataire écrit tient dans sa colonne : le type d'identifiant en liste, code postal | ciudad, puis le pays sur sa rangée (son nom
     entier, jamais coupé dans le `select`). */
  .editor__top .editor__dest--free #destinatario .segf--wide .segf__opts { display: flex; flex-direction: column; }
  .editor__top .editor__dest--free #destinatario > .grid-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: none; row-gap: 8px; }
  .editor__top .editor__dest--free #destinatario > .grid-3 > .field { grid-row: auto; display: block; }
  .editor__top .editor__dest--free #destinatario > .grid-3 > .field:has(#pais) { display: block; grid-column: 1 / -1; }
  .editor__oper { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; align-items: start; }
  .editor__oper > * { grid-column: 1 / -1; }
  .editor__oper > #operacion-grupo { grid-column: 1; grid-row: 2 / span 2; }
  .editor__oper > #retencion-grupo, .editor__oper > #retencion-ue { grid-column: 2; }
  .editor .editor__oper > fieldset.choice + fieldset.choice { margin-top: 0; }
  .editor__oper .kinds, .editor__oper .opts { grid-template-columns: minmax(0, 1fr); }
}
/* M-6 : la liste des clients dans la page — jamais de défilement imbriqué ni de carte coupée. Au-delà de huit, le script montre six cartes,
   la recherche et « Ver los N clientes » ; sans script, la liste entière. */
.cpick--long .ccards { max-height: none; overflow: visible; overscroll-behavior: auto; padding: 0; scroll-snap-type: none; }
.cpick__more { margin: 8px 0 0; }
/* m-8 : UN style de radio dans tout le portail — l'anneau tinta plein avec son point papier (celui des radios natifs dessinés) ; une case
   à cocher garde sa coche. « Tipo de documento » (Facturas anteriores) et les cartes de clients s'alignent sur lui. */
.segf--kind .segf__opt::before, .segf--kind .segf__opt:has(.segf__input:checked)::before { width: 18px; height: 18px; }
.segf--kind .segf__opt:has(.segf__input:checked)::after { left: 18px; width: 8px; height: 8px; margin-top: -4px; border: 0; border-radius: 50%; background: var(--papel); transform: none; }
.ccard__label:has(.ccard__radio:checked) .ccard__mark::before { width: 8px; height: 8px; margin: 6px; border: 0; border-radius: 50%; background: var(--papel); transform: none; }
/* m-5, m-6 : l'aide — le détail technique replié ; « Ver toda la ayuda » garde l'index des thèmes (collant en large, replié en étroit) ;
   une largeur de lecture d'environ 70 caractères. */
.help-tech { margin: 2px 0 10px; }
.help-tech__body { margin-top: 6px; padding: 8px 12px; border-left: 2px solid var(--rule-2); background: var(--papel-2); }
.help-doc .help-tech__body p { margin: 0; font-size: 13.5px; }
.help-doc .panel p, .help-doc .panel li { max-width: 70ch; }
@supports selector(:has(*)) {
  .help-layout:has(#toda:target) > .help-index { display: block; }
  .help-layout:has(#toda:target) .help-home { display: none; }
  @media (min-width: 1100px) {
    .help-layout:has(#toda:target) { grid-template-columns: 300px minmax(0, 1fr); }
    /* Un thème ou toute l'aide : la carte à la largeur de son texte (≈ 70 caractères), jamais deux fois plus large. */
    .help-layout:has(#toda:target) .help-doc .panel, .help-layout:has(.help-topic :target) .help-doc .panel { max-width: 680px; }
  }
}
@media print {
  .help-tech::details-content { content-visibility: visible; display: block; }
}
/* m-13 : Mi cuenta — les accès d'un émetteur en colonne, un par ligne (jamais « Transferencia » seul sous les autres). */
@media (min-width: 720px) {
  .acct__table .acct__links { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 0; }
  .acct__table .acct__links a { min-height: 26px; white-space: nowrap; }
}
@media (min-width: 1200px) {
  .acct__table .permchips { flex-wrap: nowrap; }
}
/* m-13 : la monnaie d'une factura anterior — EUR, USD, GBP ou « Otra » (avec le script) ; le champ texte reste le champ envoyé. */
.curr__pick { margin: 0 0 6px; }
/* fix5-F5 ── fin */
/* fix6-F7 */
/* M-1 : l'éditeur de rectificative porte la barre de l'éditeur de facture (`editor__bar`) — état d'enregistrement, « Diferencia total sin
   IVA », « Vista previa » | « Guardar borrador » — collante en bas de la colonne de la correction à TOUTES les largeurs (l'éditeur de
   facture la masque à partir de 960 px parce que sa colonne de résumé porte les actions ; la rectificative n'a pas de telle colonne). */
.rectbar__more { margin: 12px 0 0; }
.rectbar .savestate { flex: 1 0 100%; margin: 0; font-size: 11.5px; }
.rectbar__btns { display: contents; }
@media (max-width: 719px) {
  /* La barre passe sous les bords du panneau (bordure 1 px + marge 14 px) et touche les bords de l'écran (gouttière 16 px), comme celle
     de l'éditeur de facture ; en bas, elle recouvre la marge du panneau. */
  .rectbar { margin: 12px -31px -13px; padding: 6px 31px 8px; }
}
@media (min-width: 720px) {
  .rectbar.editor__bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 12px -14px -12px; padding: 10px 14px 12px; background: var(--papel); border-top: 1px solid var(--rule-2); }
  .rectbar .savestate { flex: 0 1 auto; }
  .rectbar .editor__bar-total { flex: 1 1 auto; justify-content: flex-end; }
  .rectbar__btns { display: flex; flex: 1 0 100%; flex-wrap: wrap; gap: 8px; }
  .rectbar__btns .btn { white-space: normal; text-align: center; }
  .rectbar .btn__long { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: normal; }
  .rectbar .btn__short { display: none; }
  html:has(.rectbar) { scroll-padding-bottom: 112px; }
}
/* m-2 : « Ver toda la ayuda » — le sommaire est collant à partir de 1100 px (règle de la passe 2 : `position: sticky`, hauteur bornée à la
   fenêtre, défilement propre seulement s'il ne tient pas ; il tient à 900 px). Son titre (un `summary` inerte en large) garde une cible de
   24 px : sans script, il reste atteignable au clavier. */
@media (min-width: 1100px) {
  .help-index__d > summary { min-height: 24px; align-items: center; }
}
/* m-13 : l'aide — la phrase d'action en tête de chaque thème, lue d'abord. */
.help-doc .panel p.help-action { font-weight: 600; color: var(--tinta); }
/* fix6-F7 ── fin */
/* fix6-F6 */
/* N-1 : la barre des sections de la fiche émetteur ne défile jamais à l'horizontale — quand elle ne tient pas sur une ligne, les pastilles
   passent à la ligne ; « Acciones sensibles » reste la dernière (poussée à droite en large, à la suite des autres en étroit). Aucune ancre
   hors de l'écran ni coupée au bord. */
.toc--bar ul { flex-wrap: wrap; overflow-x: visible; overscroll-behavior-x: auto; padding-bottom: 0; }
@media (max-width: 599px) {
  .toc--bar .toc__danger { margin-left: 0; }
}
/* M-2 : l'éditeur sans client choisi (répertoire, ou destinataire écrit), à l'écran large — « Destinatario » dans la colonne de gauche, « Fecha y
   descripción » puis « Líneas » dans celle de droite : les lignes dans le premier écran, aucune demi-colonne vide sous la date ;
   « Operación » dessous sur toute la largeur. `display: contents` ne retire que l'enveloppe de mise en page (un `div` sans rôle) : l'ordre du
   document, de l'œil et du clavier reste Destinatario, Fecha y descripción, Líneas, Operación. La piste 1fr reçoit la hauteur du répertoire :
   la date garde sa hauteur, les lignes la suivent directement. */
@media (min-width: 1180px) {
  .editor__main--split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr auto auto; column-gap: 14px; align-items: start; }
  .editor__main--split > .editor__top { display: contents; }
  .editor__main--split > .editor__top > .panel:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .editor__main--split > .editor__top > .editor__dates { grid-column: 2; grid-row: 1; }
  .editor__main--split > [data-lines] { grid-column: 2; grid-row: 2; }
  .editor__main--split > .editor__oper { grid-column: 1 / -1; grid-row: 3; }
  .editor__main--split > .editor__more { grid-column: 1 / -1; grid-row: 4; }
  .editor__main--split .editor__dates .grid-2--date { grid-template-columns: 170px minmax(0, 1fr); }
  /* Le destinataire écrit dans sa colonne : un champ par rangée (Razón social, NIF), code postal | ciudad, puis le pays. */
  .editor__main--split .editor__dest--free #destinatario > .grid-2 { grid-template-columns: minmax(0, 1fr); }
}
/* m-4 : après le choix d'un client, l'ancre `#cliente-seleccionado` laisse voir le titre « Destinatario » et le choix du mode au-dessus. */
#cliente-seleccionado { scroll-margin-top: 104px; }
/* m-5 : un même espacement de 16 px entre les groupes de champs et avant les boutons — destinataire écrit de l'éditeur, formulaires de
   la fiche émetteur (« Cambiar el domicilio fiscal » n'est plus collé sous « País »). */
.editor__dest--free #destinatario > * + * { margin-top: 16px; }
.datos__form > :not([type="hidden"]) ~ * { margin-top: 16px; }
/* m-6 : en écran étroit, l'état de l'enregistrement se lit UNE fois, dans la barre basse (dès que le script l'y écrit) ; la ligne du résumé
   reste la seule région `role="status"` (la barre est `aria-hidden`), masquée à l'œil seulement. Le signal « non enregistré » garde sa
   couleur dans la barre. */
@media (max-width: 959px) {
  .editor:has([data-save-text-bar]:not(:empty)) .sum__state { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: clip; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .editor:has(.sum__state[data-dirty="1"]) .editor__bar-state { color: var(--st-warn); font-weight: 600; }
}
/* m-8 : Modelo y colores — les pastilles sur la ligne du libellé (« Colores elegidos », « Colores propios del modelo »), même sur deux
   lignes ; la note « Se conservan… » dessous, jamais les pastilles centrées entre deux lignes de texte. */
.mcard__palette { align-items: flex-start; }
.mcard__palette > .swatches { margin-top: 2px; }
/* m-9 : « Este mes » en étroit — « 7 y 1 » reste un groupe (espaces insécables dans la page) ; le lien redevient un texte en ligne pour
   que seul « rectificativa » puisse passer à la ligne ; la cible garde ~40 px de haut sans gonfler la rangée. */
@media (max-width: 719px) {
  .month__figs dd a.month__num:has(.month__sub) { display: inline-block; min-height: 0; margin: -9px 0; padding: 9px 0; }
}
/* m-10 : Facturas › Borradores en tableau (`table-layout: fixed`, m-24) — « Tipo » (toujours la 2e colonne quand elle existe) à
   130 px (« Rectificativa » tient), « Actualizado » et le total à 150 px ; la colonne du destinataire et de sa description prend tout
   le reste (retour à la ligne normal, jamais coupée au trait d'union d'une référence quand la place existe). Sans `:has`, l'ancien
   partage égal, rien de coupé. */
@container (min-width: 560px) {
  .drafts:has(td[data-label="Tipo"]) thead th:nth-child(2) { width: 130px; }
}
/* fix6-F6 ── fin */
/* fix7-F8 */
/* D1 : une zone de texte d'une phrase (`data-oneline` : descriptions de l'éditeur de facture et de rectificative) grandit seule avec son
   contenu (script) : aucune poignée de redimensionnement qui la fasse passer pour une zone de plusieurs paragraphes. */
textarea[data-oneline] { resize: none; }
/* D2 : après une bascule « Del directorio » / « Nuevo », l'ancre `#destinatario` (qui reçoit le foyer) laisse voir le titre et la bascule. */
#destinatario { scroll-margin-top: 104px; }
/* D3 : « Elija el IVA de cada línea » / « Falta el IVA » à la place d'un montant — du texte courant, jamais en gros chiffres. */
.sum__rows dd[data-pending], .sum__rows .sum__total dd[data-pending], .editor__bar-total strong[data-pending] { font: 600 13px var(--f-t); color: var(--tinta-80); white-space: normal; text-align: right; }
/* D9 : « Revisar y emitir » porte le foyer sur la carte « Emitir » (`tabindex="-1"`) : un contour visible. */
#emitir:focus { outline: 2px solid var(--caqui); outline-offset: 2px; }
/* D5 : « Sí, descartar el borrador » | « No, seguir editando » (le second, avec le script seulement). */
.discardask__acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* D6 : la marche à suivre sous les faits de « Antes de emitir ». */
.pvnotes__act { margin: 6px 0 0; font-size: 12.5px; }
/* D4 : sur une carte de Modelo y colores, le ton imprimé ajusté n'est dit qu'en sous-texte. */
.mcard__adj { display: block; font-size: 11.5px; color: var(--tinta-60); }
/* D8 : sans script, « Ver el modelo marcado y sus colores » sous la grille des modèles. */
.appearance__see { display: grid; justify-items: start; gap: 4px; margin: 12px 0 0; }
.appearance__see .help { margin: 0; }
/* m-1 (critique 7) : éditeur de rectificative en étroit — la description de ligne est une zone qui grandit (sans coupe), et « Diferencia sin
   IVA (€), con signo » prend toute la largeur de la ligne, comme l'IVA. */
@media (max-width: 719px) {
  [data-rect-edit] .line__cells--2 > * { grid-column: 1 / -1; }
}
/* m-2 (critique 7) : éditeur de rectificative en large — les lignes de la facture corrigée en liste : la description sur toute la ligne,
   les chiffres dessous, alignés sur cinq colonnes communes à l'en-tête et à chaque ligne (jamais une description sur trois lignes dans une
   colonne de 120 px). Le tableau garde son en-tête et ses cellules ; la vista previa n'est pas touchée. */
@media (min-width: 720px) {
  [data-rect-edit] .compare__side--original .table--lines,
  [data-rect-edit] .compare__side--original .table--lines thead,
  [data-rect-edit] .compare__side--original .table--lines tbody { display: block; width: 100%; }
  [data-rect-edit] .compare__side--original .table--lines tr { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.15fr); column-gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
  [data-rect-edit] .compare__side--original .table--lines thead tr { padding: 0 0 4px; border-bottom-color: var(--rule-2); }
  [data-rect-edit] .compare__side--original .table--lines tr > * { display: block; padding: 0; border: 0; }
  [data-rect-edit] .compare__side--original .table--lines tr > :first-child { grid-column: 1 / -1; padding: 0 0 2px; }
  [data-rect-edit] .compare__side--original .table--lines tbody th { font-weight: 600; overflow-wrap: anywhere; }
}
/* fix7-F8 ── fin */
/* fix7-F9 */
/* m-3 : « Este mes » — « 7 y 1 rectificativa » est un seul groupe insécable (la vue) ; sous 560 px, trois colonnes ne lui laissent pas la
   place : chaque chiffre prend sa rangée pleine largeur, libellé à gauche, valeur à droite (jamais « rectificativa » seul à la ligne). */
@media (max-width: 559px) {
  .month__figs { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .month__figs > div { flex-direction: row; align-items: center; justify-content: space-between; gap: 2px 12px; }
  .month__figs dt { flex: 0 1 auto; min-width: 0; }
  .month__figs dd { flex: none; text-align: right; }
}
/* m-6 : Ayuda à 1440 — la carte d'un thème (ou de toute l'aide) s'aligne sur la grille de la page ; la lecture reste à ~70 caractères par
   la largeur des paragraphes et des listes (règle de la passe 5), le reste de la carte est une marge intérieure. Le repli « Detalles
   técnicos » prend la largeur de son texte. */
@supports selector(:has(*)) {
  @media (min-width: 1100px) {
    .help-layout:has(#toda:target) .help-doc .panel, .help-layout:has(.help-topic :target) .help-doc .panel { max-width: none; }
  }
}
.help-doc .panel .help-tech__body { width: fit-content; max-width: 100%; box-sizing: border-box; }
/* m-8 : le repli porte maintenant tout le détail d'un thème (paragraphes, listes, intertitres) — des espaces réguliers, le même corps. */
.help-doc .panel .help-tech__body > * { margin: 0; }
.help-doc .panel .help-tech__body > * + * { margin-top: 8px; }
.help-doc .panel .help-tech__body > h3 { margin-top: 14px; font-size: 13.5px; }
.help-doc .panel .help-tech__body > h3:first-child { margin-top: 0; }
.help-doc .panel .help-tech__body > h3 + * { margin-top: 4px; }
.help-doc .panel .help-tech__body p, .help-doc .panel .help-tech__body li { font-size: 13.5px; line-height: 1.55; }
.help-doc .panel .help-tech__body li:last-child { margin-bottom: 0; }
/* m-8 : dans la vue « toda », le lien de fin de thème se lit « Volver al índice » (« Todos los temas » quand un seul thème est montré). Sans
   `:has`, seul « Todos los temas » (les deux mènent à `#indice`). */
.help-top .help-top__toda { display: none; }
@supports selector(:has(*)) {
  .help-layout:has(#toda:target) .help-top .help-top__toda { display: inline-flex; }
  .help-layout:has(#toda:target) .help-top a:not(.help-top__toda) { display: none; }
}
/* m-7 : Mi cuenta — les accès sur une ligne, séparés par « · » ; le point suit le libellé qui le précède (jamais en début de ligne) ; chaque
   accès est insécable : en étroit, le retour à la ligne se fait entre deux accès seulement. */
.acct__links > li { white-space: nowrap; }
.acct__links > li:not(:last-child)::after { content: "·"; content: "·" / ""; margin: 0 6px; color: var(--tinta-60); }
.acct__table .acct__links { gap: 0; }
@media (min-width: 720px) {
  .acct__table .acct__links { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0; }
}
/* En large, la ligne des accès ne se coupe pas : la colonne prend sa largeur ; les permissions passent sur deux rangées régulières (deux
   par rangée, le point en fin de rangée) pour laisser au nom de l'émetteur la place de ne pas s'empiler. */
@media (min-width: 1100px) {
  .acct__table .acct__links { flex-wrap: nowrap; }
  .acct__table .permchips { display: grid; grid-template-columns: repeat(2, max-content); }
}
/* m-9 : « Siguiente paso » ne répète pas un bouton de la page — un lien texte ; « Nueva factura » reste un envoi (POST), dessiné en lien. */
.nextstep__link--submit { min-height: 40px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--tinta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.nextstep__link--submit:hover { color: var(--caqui-ink); }
@media (max-width: 719px) {
  .nextstep__act:has(.nextstep__link) { width: auto; }
}
/* fix7-F9 ── fin */
/* fix8-F10 */
/* m-1 : un code de série ou un numéro fiscal ne se coupe jamais — ni au trait d'union (« TEST- » / « PS1F1 »), ni à l'espace avant le
   numéro : le retour à la ligne se fait avant ou après le code. La phrase d'en-tête de l'éditeur prend la largeur que la page lui offre. */
.fnum { white-space: nowrap; }
.docs .row-sub .mono { white-space: nowrap; }
/* Le titre de la page d'un document émis est son numéro (seule page à `.docgrid`) ; le titre d'une factura anterior (texte libre, jusqu'à
   60 caractères) garde ses coupures. */
main:has(.docgrid) .ph h1.mono-title { white-space: nowrap; }
.lead--wide { max-width: 120ch; }
/* m-3 : « Ver los N clientes » — le repère posé par le script devant la première carte révélée (« 3 clientes más »), sur toute la largeur de
   la grille des cartes ; il paraît en fondu bref, sans mouvement sous `prefers-reduced-motion`. */
.ccards__more { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font: 600 12px/1.3 var(--f-t); color: var(--tinta-80); animation: ccards-more-in 0.24s ease-out; }
.ccards__more::after { content: ""; flex: 1 1 auto; border-top: 1px solid var(--rule-2); }
@keyframes ccards-more-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ccards__more { animation: none; } }
/* m-4 : les permissions de Mi cuenta — le point PRÉCÈDE chaque permission, dans le même bloc insécable (`.permchip`) : jamais un point seul
   en fin de ligne ; en large (deux par rangée), le point ne sépare que les deux permissions d'une même rangée. */
.permchips > li:not(:last-child)::after { content: none; }
.permchips > li + li::before { content: "·"; content: "·" / ""; margin: 0 6px; color: var(--tinta-60); }
@media (min-width: 1100px) {
  .acct__table .permchips > li + li::before { content: none; }
  .acct__table .permchips > li:nth-child(even)::before { content: "·"; content: "·" / ""; margin: 0 6px; color: var(--tinta-60); }
  .acct__table .permchips { column-gap: 0; }
}
/* m-4 : « Personas con acceso » (fiche de l'émetteur) — en colonne latérale (720 px et plus), « Persona » plus large (55 %) : un nom sur
   deux lignes au plus à 1440. En étroit, la répartition automatique (la colonne des permissions garde sa place). */
@media (min-width: 720px) {
  .table--access { table-layout: fixed; width: 100%; }
  .table--access thead th:first-child { width: 55%; }
}
/* m-5 : Moneda — « Sin conversión » sous le sélecteur (avec le script) ; l'aide d'une condition dite avant les options (« Causa del error
   de IVA », m-9). */
.curr__pick > .help { margin: 4px 0 0; }
.segf__intro { margin: 0 0 6px; }
/* fix8-F10 ── fin */
/* fix8-F11 */
/* m-6 : sur une carte de Modelo y colores, la phrase des tons ajustés (« El color de acento se oscurece un poco en el PDF para que se lea. »)
   sous les pastilles et leur libellé, sur toute la largeur de la ligne ; lue par tous (plus de sous-texte caché aux lecteurs d'écran). */
.mcard__palette { flex-wrap: wrap; row-gap: 2px; }
.mcard__palette > .swatches + span { flex: 1 1 0; min-width: 0; }
.mcard__palette > .mcard__adj { flex: 1 0 100%; color: var(--tinta-80); }
/* m-8 : « Para… » existe deux fois dans la carte : sur la carte (écran étroit et moyen) ou en tête de « Más sobre este modelo » (cartes
   compactes en large) — jamais les deux à la fois. */
.mcard__fitmore { display: none; margin: 2px 0 4px; font-size: 12.5px; color: var(--tinta-80); max-width: 60ch; }
/* m-8 : en large (≥ 1200 px), à côté du panneau collant, les huit modèles en DEUX colonnes de cartes compactes — vignette, case et nom avec
   « Recomendado » / « En uso », puis les pastilles sur toute la largeur de la carte ; « Para… », la description et les exemples dans « Más sobre
   este modelo ». La liste ne dépasse plus guère le panneau (≈ 1 250 → ≈ 700 px à 1440 × 900) ; l'ordre du document (lecture, tabulation)
   reste celui des rangées ; la carte entière reste le radio ; la composition de référence garde sa ligne en tête. */
@media (min-width: 1200px) {
  .appearance .mcards.mcards--all { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .appearance .mcards--all > .mcard { grid-template-columns: 48px minmax(0, 1fr); column-gap: 10px; row-gap: 4px; padding: 8px 10px; }
  .appearance .mcards--all > .mcard:has(.mcard__radio:checked) { padding: 7px 9px; }
  .appearance .mcards--all > .mcard > .mcard__media { width: 48px; grid-row: 1 / span 2; }
  .appearance .mcards--all > .mcard > .mcard__fit { display: none; }
  .appearance .mcards--all > .mcard > .mcard__palette { grid-column: 1 / -1; }
  .appearance .mcards--all > .mcard > .mcard__more { grid-column: 1 / -1 !important; margin-top: 0; }
  .appearance .mcards--all .mcard__fitmore { display: block; }
  /* Les trois exemples d'une carte compacte : une liste (vignette | situation et lien), jamais trois colonnes de 50 px. */
  .appearance .mcards--all .msamples { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .appearance .mcards--all .msamples li { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 8px; row-gap: 2px; align-items: start; }
  .appearance .mcards--all .msamples__thumb { grid-row: 1 / span 2; width: 40px; }
}
/* m-7 : sans script, l'état « rien à publier » dit comment activer le bouton (le script masque cette consigne). */
.appearance__publish .appearance__idle { flex: 1 0 100%; font-size: 12px; }
/* fix8-F11 ── fin */
/* fix8-F12 */
/* Les permissions sont une liste castillane naturelle, en texte (« Consultar, preparar, emitir y configurar ») — fiche, Emisores et Mi cuenta :
   plus aucun point séparateur, qui tombait toujours au bord d'une ligne repliée. Mi cuenta ne rend plus de liste `.permchips` (la légende
   garde ses étiquettes `.permchip`) : les règles « · » des sections fix4-F2, fix7-F9 et fix8-F10 et la grille 2 × 2 de Mi cuenta (fix7-F9)
   sont neutralisées ici. */
.permchips > li:nth-child(n)::before, .permchips > li:nth-child(n)::after,
.acct__table .permchips > li:nth-child(n)::before, .acct__table .permchips > li:nth-child(n)::after { content: none; }
.acct__table .permchips { display: flex; }
/* Mi cuenta : la liste en texte, à la couleur du nom de l'émetteur ; le retour à la ligne se fait entre les mots. En écran étroit (carte),
   elle s'aligne à droite comme les autres valeurs de la carte. */
.acct__table .perms { color: var(--tinta); }
@media (max-width: 719px) {
  .acct__table td[data-label="Permisos"] > .perms { text-align: right; }
}
/* fix8-F12 ── fin */
/* fix9-F13 */
/* m-1 : Facturas en cartes (colonne étroite) — une facture sans « Duplicar » (une rectificative) ne montre RIEN à la place du bouton : le
   « — » seul au bout de la rangée d'icônes se lisait comme un bouton cassé. Dans le tableau à large écran, le « — » de la colonne Acciones
   garde son sens (« sans objet »). */
@container (max-width: 559px) {
  .docs td[data-label="Acciones"] > .muted { display: none; }
}
/* m-3 : après « Ver los N clientes », la première carte révélée reçoit le foyer (`bindClientMore`) — et le MONTRE, même après un clic de
   souris (où `:focus-visible` ne s'applique pas à un foyer posé par le script) : le script marque ce radio jusqu'à ce qu'il perde le foyer. */
.ccard__label:has(.ccard__radio[data-reveal-focus]:focus) { outline: 2px solid var(--caqui); outline-offset: 2px; }
/* m-6 : les notes d'une carte de Modelo y colores (« Se conservan en esta página… », posée par le script, et la phrase des tons ajustés)
   sur toute la largeur de la ligne des pastilles, dessous — jamais une colonne étroite à côté des pastilles. */
.mcard__palette > .mcard__kept { flex: 1 0 100%; margin-top: 0; }
/* m-4, m-6 : en large (≥ 1200 px), cartes compactes en deux colonnes — « Para… » visible sous le nom (à côté de la vignette), puis les
   pastilles, puis leur libellé sur sa propre ligne (« Colores propios del modelo » : une ligne dans chaque carte, quel que soit le nombre de
   pastilles), puis les notes ; les cartes d'une même rangée ont la même hauteur, le contenu en haut. Aucun texte tronqué. */
@media (min-width: 1200px) {
  .appearance .mcards.mcards--all { align-items: stretch; }
  .appearance .mcards--all > .mcard { align-content: start; }
  .appearance .mcards--all > .mcard > .mcard__head { grid-column: 2; grid-row: 1; }
  .appearance .mcards--all > .mcard > .mcard__fit { display: block; grid-column: 2; grid-row: 2; margin: 0; }
  .appearance .mcards--all > .mcard > .mcard__palette { grid-row: 3; }
  .appearance .mcards--all > .mcard > .mcard__more { grid-row: 4; }
  .appearance .mcards--all .mcard__palette > .swatches + span { flex: 1 0 100%; }
}
/* fix9-F13 ── fin */
/* fix10-F14 */
/* La facture émise reprend la composition de la vista previa (`.pv`) : à gauche le PDF conservé, dessiné, dans le même cadre papier ; à
   droite la carte d'actions puis le « Resumen » ; sous 1024 px, le résumé, le dessin, les actions, et la barre basse « Ver PDF ». */
main:has(.pv--doc) .ph h1.mono-title { white-space: nowrap; }
.pvdoc__model { margin: 0 0 12px; }
.pvdoc__buttons { gap: 8px; }
.pvdoc__fix { padding-top: 10px; border-top: 1px solid var(--rule-2); }
.pvdoc__fix h3 { margin: 0 0 4px; font-size: 13.5px; }
.pvdoc__fix .note { margin: 0 0 8px; }
.pvdoc__fix form { margin: 0; }
/* Sans preuve de fidélité du dessin : le contenu du document, en HTML, dans le même cadre, sous la phrase qui renvoie au PDF. */
.paper--text { justify-items: stretch; }
.paper--text > .sheet { width: 100%; margin: 0; }
.paper__note { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tinta-80); }
.pv--doc .pvtext .disclosure__body > .sheet { margin: 0; border: 0; padding: 0; }
@media (min-width: 1024px) {
  /* La carte d'actions d'abord, le « Resumen » ensuite, puis les explications — comme « Emitir » puis « Resumen » dans la vista previa. */
  .pv--doc .pv__side > :not(.pvdoc__acts):not(.pvsum) { order: 3; }
}
/* Un seul espacement (celui de la grille) entre les cartes et les dépliants de la colonne : pas de marge propre en plus. */
.pv__side > .disclosure--quiet { margin: 0; }
@media (max-width: 1023px) {
  .pv--doc .pv__paper > .pvdoc__model { order: 2; }
  /* La barre basse : le total, puis « Ver PDF » et « Descargar PDF » (icône, nom accessible) — tient à 320 px sans rien couper. */
  .pvbar--doc .pvbar__total { margin-right: auto; }
  .pvbar--doc .pvbar__dl { flex: none; width: 44px; height: 44px; }
}
/* fix10-F14 ── fin */