/* Tipografías propias de Talonario, servidas desde el propio panel.
   Bricolage Grotesque para titulares y cifras, Instrument Sans para la
   interfaz y DM Mono para números de factura y códigos. Licencia SIL
   Open Font. Solo el subconjunto latino: 121 KB en total. */

@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-400-800.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: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-400.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: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/dm-mono-500.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: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/instrument-sans-400-600.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 {
  /* Talonario · papel, tinta y sello de caucho */
  --papel: #ffffff;
  --papel-2: #f4f2ef;
  --carpeta: #e6e4e0;
  --tinta: #1b1820;
  --tinta-2: #565064;
  --tinta-3: #6a6375;
  --sello: #6a2e9b;
  --sello-oscuro: #57268a;
  --sello-piel: #f0e7f8;
  --sello-borde: #d9c4ee;
  --sobre-sello: #ffffff;
  --rosa: #e7b7c6;
  --amarillo: #e8dca4;

  /* Nombres heredados del diseño anterior, ahora apuntando a la paleta nueva.
     Se conservan para que las 5.600 líneas siguientes sigan funcionando. */
  --ink: var(--tinta);
  --muted: var(--tinta-2);
  --line: #d9d5d0;
  --line-soft: #ece8e4;
  --canvas: var(--carpeta);
  --surface: var(--papel);
  --blue: var(--sello);
  --blue-dark: var(--sello-oscuro);
  --blue-soft: var(--sello-piel);
  --navy: var(--papel-2);
  --safe: #1d7251;
  --safe-soft: #e1f1ea;
  --safe-borde: #a9d5c2;
  --warning: #9b531a;
  --warning-soft: #f8ebdd;
  --warning-borde: #e8c79b;
  --danger: #a8322f;
  --danger-soft: #f9e7e6;
  --danger-borde: #e6bcbb;
  --shadow: 0 1px 2px rgba(27, 24, 32, 0.06), 0 8px 24px -12px rgba(27, 24, 32, 0.18);
  --shadow-alta: 0 2px 4px rgba(27, 24, 32, 0.07), 0 24px 48px -20px rgba(27, 24, 32, 0.28);
  --salida: cubic-bezier(0.22, 1, 0.36, 1);
  --muelle: cubic-bezier(0.34, 1.56, 0.64, 1);
  --radio-s: 9px;
  --radio-m: 12px;
  --radio-l: 18px;
  --display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --ui: "Instrument Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SF Mono", Menlo, monospace;
  font-family: var(--ui);
  color: var(--ink);
  background: var(--canvas);
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

/* El tema puede forzarse a mano desde el panel; sin marca, manda el
   sistema. color-scheme alinea los controles nativos con la eleccion. */
:root[data-theme="dark"] {
  color-scheme: dark;
}

:root[data-theme="light"] {
  color-scheme: light;
}

html {
  min-width: 320px;
  background: var(--canvas);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 3px solid var(--sello);
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: var(--papel);
  background: var(--tinta);
  border-radius: var(--radio-s);
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  display: grid;
  grid-template-columns: 238px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  /* Capa propia y contexto de apilamiento estables. Sin esto, Safari deja
     restos del menú dibujados al repintar mientras el ratón lo recorre. */
  transform: translateZ(0);
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20px 14px 16px;
  color: var(--tinta-2);
  background: var(--papel-2);
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 6px 0;
  color: var(--tinta);
  text-decoration: none;
}

.brand-mark {
  display: block;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: var(--sello);
  transition: transform 0.42s var(--muelle);
}

.brand:hover .brand-mark {
  transform: rotate(-5deg);
}

.brand-nombre {
  font-family: var(--display);
  font-size: 1.17rem;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.sidebar-heading {
  display: block;
}

.mobile-nav-disclosure {
  display: none;
}

.unified-invoice-save {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  margin-top: 22px;
  border-color: var(--line);
}

.unified-invoice-save h2 {
  margin: 4px 0 6px;
}

.unified-invoice-save p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
}

.unified-save-action {
  min-width: 230px;
  text-align: right;
}

.unified-save-status {
  min-height: 20px;
  margin: 0 0 7px !important;
  color: var(--danger) !important;
  font-size: 0.78rem;
}

.invoice-unified-enabled .invoice-section-submit {
  display: none;
}

.invoice-unified-enabled .invoice-section-submit[data-add-line-and-save] {
  display: inline-flex;
}

.navigation {
  display: flex;
  flex-direction: column;
  margin-top: 26px;
}

.nav-group {
  display: grid;
  gap: 2px;
}

.nav-group.is-secundario {
  margin-top: 18px;
  padding-top: 15px;
  border-top: 1px dashed var(--line);
}

.nav-label {
  margin: 0 0 7px 12px;
  color: var(--tinta-3);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.nav-link {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 11px;
  color: var(--tinta-2);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radio-s);
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.nav-icon {
  width: 17px;
  height: 17px;
  flex: none;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.34s var(--salida);
}

.nav-link:hover {
  color: var(--tinta);
  background: var(--carpeta);
}

.nav-link:hover .nav-icon {
  opacity: 1;
  transform: translateX(1px);
}

.nav-link[aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
  background: var(--papel);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(27, 24, 32, 0.06);
}

.nav-link[aria-current="page"] .nav-icon {
  color: var(--sello);
  opacity: 1;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 11px 4px;
  color: var(--tinta-3);
  font-size: 0.78rem;
  border-top: 1px dashed var(--line);
}

.sidebar-footer p {
  margin: 0 0 8px;
}

.sidebar-footer strong {
  color: var(--tinta);
  font-weight: 600;
}

.text-button {
  min-height: 36px;
  padding: 0;
  color: var(--tinta-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.workspace {
  position: relative;
  z-index: 0;
  min-width: 0;
}

.safety-banner {
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(22px, 4vw, 54px);
  color: var(--warning);
  background: var(--warning-soft);
  border-bottom: 1px solid var(--warning-borde);
}

.safety-banner strong,
.safety-banner span {
  display: block;
}

.safety-banner strong {
  font-size: 0.9rem;
}

.safety-banner span {
  margin-top: 2px;
  font-size: 0.78rem;
}

.safety-dot {
  width: 10px;
  height: 10px;
  flex: 0 0 10px;
  background: var(--warning);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(216, 120, 0, 0.13);
}

.content {
  max-width: 1440px;
  margin: 0 auto;
  padding: 46px clamp(22px, 4vw, 54px) 72px;
}

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
}

.page-header.compact {
  max-width: 900px;
}

.page-header h1 {
  margin: 4px 0 9px;
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.page-header p:not(.eyebrow) {
  max-width: 760px;
  margin: 0;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.65;
}

.eyebrow {
  margin: 0;
  color: var(--blue);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.environment-badge,
.mode-pill {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 7px 11px;
  color: var(--safe);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  background: var(--safe-soft);
  border: 1px solid var(--safe-borde);
  border-radius: 999px;
  white-space: nowrap;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.metric-card,
.panel,
.next-action,
.empty-state,
.callout {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
}

.metric-card {
  min-height: 150px;
  padding: 22px;
}

.metric-card p,
.metric-card span {
  margin: 0;
  color: var(--muted);
}

.metric-card p {
  font-size: 0.83rem;
  font-weight: 650;
}

.metric-card strong {
  display: block;
  margin: 13px 0 6px;
  font-size: 2.15rem;
  letter-spacing: -0.04em;
}

.metric-card span {
  font-size: 0.76rem;
}

.dashboard-grid,
.security-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr);
  gap: 22px;
}

.dashboard-evolution > p:last-child {
  margin: 16px 0 0;
  color: var(--muted);
  line-height: 1.55;
}

.dashboard-empty-chart {
  height: 180px;
  display: flex;
  align-items: end;
  gap: 10px;
  padding: 18px 16px 0;
  background: linear-gradient(to top, var(--papel-2) 1px, transparent 1px);
  background-size: 100% 25%;
  border-bottom: 1px solid var(--line);
}

.dashboard-empty-chart span {
  flex: 1;
  min-height: 8px;
  background: var(--papel-2);
  border-radius: 8px 8px 0 0;
}

.dashboard-empty-chart span:nth-child(2),
.dashboard-empty-chart span:nth-child(5) {
  min-height: 12px;
}

.dashboard-draft-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dashboard-draft-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.dashboard-draft-list li:first-child {
  border-top: 0;
}

.dashboard-draft-list strong,
.dashboard-draft-list span {
  display: block;
}

.dashboard-draft-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.78rem;
}

.dashboard-new-invoice {
  margin-top: 18px;
}

.panel {
  padding: clamp(22px, 3vw, 30px);
}

.panel h2 {
  margin: 0 0 22px;
  font-size: 1.22rem;
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.panel-heading h2 {
  margin: 4px 0 0;
}

.secondary-link {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  color: var(--blue-dark);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.secondary-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.checklist,
.gate-list,
.phase-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-item {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
}

.check-item:first-child {
  border-top: 0;
}

.check-icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--tinta-3);
  font-weight: 800;
  background: var(--papel-2);
  border-radius: 50%;
}

.check-item.is-complete .check-icon {
  color: var(--safe);
  background: var(--safe-soft);
}

.check-item strong,
.check-item p {
  display: block;
  margin: 0;
}

.check-item strong {
  font-size: 0.88rem;
}

.check-item p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.4;
}

.status-label {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.check-item.is-complete .status-label {
  color: var(--safe);
}

.gate-list li {
  min-height: 45px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-top: 1px solid var(--line);
}

.gate-list li:first-child {
  border-top: 0;
}

.gate-list span {
  color: var(--muted);
  font-size: 0.83rem;
}

.gate-list.large li {
  min-height: 58px;
}

.gate-state {
  font-size: 0.72rem;
}

.gate-state.is-safe {
  color: var(--safe);
}

.gate-state.is-warning {
  color: var(--warning);
}

.gate-state.is-danger {
  color: var(--danger);
}

.fuse-box {
  margin-top: 22px;
  padding: 17px;
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.fuse-box span,
.fuse-box strong {
  display: block;
}

.fuse-box span {
  color: var(--muted);
  font-size: 0.72rem;
}

.fuse-box strong {
  margin-top: 4px;
  color: var(--blue-dark);
  font-size: 0.86rem;
}

.fuse-box p {
  margin: 9px 0 0;
  color: var(--tinta-2);
  font-size: 0.76rem;
  line-height: 1.5;
}

.next-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin-top: 22px;
  padding: 28px 30px;
}

.next-action h2 {
  margin: 4px 0 6px;
  font-size: 1.3rem;
}

.next-action p:not(.eyebrow) {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.disabled-action {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  color: var(--tinta-2);
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--papel-2);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
  cursor: not-allowed;
  text-align: center;
}

.phase-list li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}

.phase-list li:first-child {
  border-top: 0;
}

.phase-list > li > span {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 800;
  background: var(--papel-2);
  border-radius: var(--radio-m);
}

.phase-list li.is-complete > span {
  color: var(--safe);
  background: var(--safe-soft);
}

.phase-list li.is-current > span {
  color: var(--sobre-sello);
  background: var(--blue);
}

.phase-list strong {
  font-size: 0.95rem;
}

.phase-list p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

.callout {
  margin-top: 22px;
  padding: 22px 24px;
  border-left: 4px solid var(--blue);
  box-shadow: none;
}

.callout strong {
  display: block;
  margin-bottom: 6px;
}

.callout p {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.55;
}

.definition-list {
  margin: 0;
}

.definition-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.definition-list > div:first-child {
  border-top: 0;
}

.definition-list dt {
  color: var(--muted);
  font-size: 0.82rem;
}

.definition-list dd {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 750;
  text-align: right;
}

.empty-state {
  display: grid;
  justify-items: center;
  max-width: 760px;
  padding: clamp(42px, 8vw, 82px) 30px;
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  color: var(--blue);
  font-size: 2rem;
  background: var(--blue-soft);
  border-radius: var(--radio-l);
}

.empty-state h2 {
  margin: 20px 0 8px;
  font-size: 1.35rem;
}

.empty-state p {
  max-width: 540px;
  margin: 0 0 24px;
  color: var(--muted);
  line-height: 1.6;
}

.error-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at top left, rgba(21, 101, 216, 0.12), transparent 35%),
    var(--canvas);
}

.error-card {
  width: min(100%, 460px);
  padding: clamp(28px, 6vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.error-card h1 {
  margin: 20px 0 8px;
  font-size: clamp(1.8rem, 7vw, 2.5rem);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.error-card > p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.field {
  display: grid;
  min-width: 0;
  gap: 7px;
}

details.field > summary {
  width: fit-content;
  color: var(--ink);
  font-size: 0.8rem;
  font-weight: 720;
  cursor: pointer;
}

details.field[open] > summary {
  margin-bottom: 2px;
}

.field label,
.field > .field-label {
  color: var(--tinta-2);
  font-size: 0.79rem;
  font-weight: 600;
  transition: color 0.18s;
}

/* El rótulo se tiñe cuando escribes en su campo: cuesta nada y hace que el
   formulario responda en lugar de quedarse quieto. */
.field:focus-within > label,
.field:focus-within > .field-label {
  color: var(--sello);
}

.field input {
  width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-s);
  transition:
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}

.field input:hover {
  border-color: var(--line);
}

.field input:focus {
  outline: none;
  background: var(--papel);
  border-color: var(--sello);
  box-shadow: 0 0 0 3.5px var(--sello-piel);
}

.field input.currency-readonly {
  color: var(--ink);
  font-weight: 760;
  background: var(--papel);
  cursor: default;
}

.primary-button {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  color: var(--sobre-sello);
  font-weight: 750;
  text-decoration: none;
  background: var(--blue);
  border: 0;
  border-radius: var(--radio-s);
  cursor: pointer;
}

.primary-button:hover {
  background: var(--blue-dark);
}

.form-error {
  margin-top: 20px;
  padding: 13px 14px;
  color: var(--danger);
  font-size: 0.8rem;
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
  border-radius: var(--radio-s);
}

.form-panel {
  display: grid;
  gap: 26px;
  max-width: 1050px;
}

.form-panel fieldset,
.panel fieldset,
.t-panel fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Los rótulos de sección de un formulario se ven igual en toda la
   aplicación: misma tipografía de titulares que los encabezados de panel. */
.form-panel legend,
.t-seccion-titulo {
  width: 100%;
  margin: 0 0 14px;
  padding-bottom: 10px;
  font-family: var(--display);
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinta);
  border-bottom: 1px solid var(--line-soft);
}

.t-formulario-cuerpo > .t-seccion-titulo + * {
  margin-top: -2px;
}

.t-formulario-cuerpo > .t-seccion-titulo:not(:first-child) {
  margin-top: 12px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 18px;
}

.field select,
.field textarea,
.t-cuadrar select,
.t-cuadrar input[data-target-payable],
.form-panel .field input {
  width: 100%;
  max-width: 100%;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-s);
  transition:
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}

.field textarea {
  min-height: 96px;
  resize: vertical;
  line-height: 1.5;
}

.field select:hover,
.field textarea:hover,
.t-cuadrar select:hover,
.t-cuadrar input[data-target-payable]:hover,
.form-panel .field input:hover {
  border-color: var(--line);
}

.field select:focus,
.field textarea:focus,
.t-cuadrar select:focus,
.t-cuadrar input[data-target-payable]:focus,
.form-panel .field input:focus {
  outline: none;
  background: var(--papel);
  border-color: var(--sello);
  box-shadow: 0 0 0 3.5px var(--sello-piel);
}

/* Un campo con error se ve antes de leer el aviso. */
.field [aria-invalid="true"] {
  border-color: var(--danger-borde);
  background: var(--danger-soft);
}

.field [aria-invalid="true"]:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3.5px var(--danger-soft);
}

.field:has([aria-invalid="true"]) > label {
  color: var(--danger);
}


.field-hint,
.field-error {
  display: block;
  font-size: 0.72rem;
  line-height: 1.45;
}

.field-hint {
  color: var(--muted);
}

.field-error {
  color: var(--danger);
  font-weight: 680;
}

.full-width {
  grid-column: 1 / -1;
}

.read-only-field {
  display: grid;
  align-content: center;
  min-height: 75px;
  padding: 12px 14px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
}

.read-only-field span,
.read-only-field strong {
  display: block;
}

.read-only-field span {
  color: var(--muted);
  font-size: 0.74rem;
}

.read-only-field strong {
  margin-top: 5px;
  font-size: 0.86rem;
}

.issuer-country-value {
  min-height: 48px;
  padding: 11px 13px;
}

.issuer-country-value strong {
  margin-top: 0;
}

/* Informa de cómo se guarda; no advierte de nada. Texto discreto en lugar de
   un recuadro de color, como el resto de notas de la aplicación. */
.privacy-note {
  padding: 12px 0 0;
  color: var(--tinta-3);
  font-size: 0.79rem;
  line-height: 1.5;
  border-top: 1px dashed var(--line-soft);
}

.privacy-note strong,
.privacy-note p {
  display: inline;
  margin: 0;
}

.privacy-note strong {
  color: var(--tinta-2);
  font-weight: 600;
}

.privacy-note strong::after {
  content: ".";
}

.privacy-note p {
  margin-top: 5px;
  font-size: 0.76rem;
  line-height: 1.5;
}

.form-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 4px;
}

.form-actions > span {
  color: var(--muted);
  font-size: 0.76rem;
}

.notice {
  max-width: 1050px;
  margin-bottom: 20px;
  padding: 15px 17px;
  font-size: 0.82rem;
  border: 1px solid;
  border-radius: var(--radio-m);
}

.notice strong {
  display: block;
}

.notice p {
  margin: 4px 0 0;
}

.notice.is-success {
  color: var(--safe);
  background: var(--safe-soft);
  border-color: var(--safe-borde);
}

.notice.is-error {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-borde);
}

/* El acuse de guardado se retira solo pasados unos segundos. Los avisos de
   error no: esos se quedan hasta que se corrige lo que falla. */
.notice.is-success.se-va {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  .notice.is-success.se-va {
    transition: none;
  }
}

.record-list {
  display: grid;
  gap: 12px;
  max-width: 1050px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.record-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.record-card h2,
.record-card p {
  margin: 0;
}

.client-list-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(135px, 1fr));
  gap: 12px;
  max-width: 1320px;
  margin-bottom: 20px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
}

.client-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.client-list-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 2px 10px;
}

.client-list-heading h2,
.client-list-heading span,
.client-list-footnote {
  margin: 0;
}

.client-list-heading h2 {
  font-size: 1.05rem;
}

.client-list-heading span,
.client-list-footnote {
  color: var(--muted);
  font-size: 0.74rem;
}

.client-filter-empty {
  max-width: 1320px;
}

.client-list-footnote {
  margin: 10px 2px 0;
}

.clients-table td {
  vertical-align: middle;
}

.data-table.clients-table th,
.data-table.clients-table td {
  padding-inline: 8px;
}

.clients-table td:first-child {
  min-width: 180px;
}

.clients-table .status-pill {
  width: fit-content;
  white-space: nowrap;
}

.concepts-table-wrap {
  max-width: 1320px;
}

.concepts-table td {
  vertical-align: middle;
}

.concepts-table td:first-child {
  min-width: 280px;
}

.concepts-table th:nth-child(2),
.concepts-table td:nth-child(2),
.concepts-table th:nth-child(3),
.concepts-table td:nth-child(3) {
  text-align: right;
  white-space: nowrap;
}

.concepts-table tr.is-muted td {
  background: var(--papel);
}

.concept-row-actions {
  min-width: 245px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  white-space: nowrap;
}

.concept-delete-menu {
  position: relative;
  min-height: 32px;
  display: flex;
  align-items: center;
}

.concept-delete-menu > summary {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  list-style: none;
  line-height: 1;
  cursor: pointer;
}

.concept-delete-menu > summary::-webkit-details-marker {
  display: none;
}

.concept-delete-menu[open] {
  display: block;
  flex-basis: 100%;
  padding: 10px 12px;
  white-space: normal;
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
  border-radius: var(--radio-s);
}

.concept-delete-menu[open] > summary {
  min-height: 28px;
}

.concept-delete-menu form {
  display: grid;
  gap: 9px;
}

.concept-delete-menu p {
  margin: 0;
  color: var(--danger);
  font-size: 0.72rem;
  line-height: 1.45;
}

.concept-delete-menu .danger-button {
  min-height: 38px;
  padding: 7px 10px;
  font-size: 0.72rem;
}

.status-pill.is-complete {
  color: var(--safe);
  background: var(--safe-soft);
}

.status-pill.is-incomplete {
  color: var(--warning);
  background: var(--warning-soft);
}

.client-tax-id,
.client-activity {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.client-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 150px;
  white-space: nowrap;
}

.compact-record-section,
.issued-invoice-section {
  max-width: 1320px;
}

.compact-record-section {
  margin-bottom: 14px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
}

.compact-record-section > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 18px;
  font-size: 0.86rem;
  font-weight: 780;
  cursor: pointer;
}

.compact-record-section > summary strong {
  display: inline-grid;
  min-width: 28px;
  min-height: 28px;
  place-items: center;
  color: var(--blue-dark);
  font-size: 0.7rem;
  background: var(--blue-soft);
  border-radius: 999px;
}

.discarded-record-section {
  box-shadow: none;
}

.compact-draft-list,
.compact-record-empty {
  border-top: 1px solid var(--line);
}

.compact-record-empty {
  padding: 18px;
  color: var(--muted);
  font-size: 0.78rem;
}

.compact-record-empty p,
.compact-draft-main h3,
.compact-draft-main span,
.compact-draft-amount strong,
.compact-draft-amount span,
.compact-draft-updated span,
.compact-draft-updated strong {
  display: block;
  margin: 0;
}

.compact-draft-row {
  display: grid;
  grid-template-columns: minmax(210px, 1.6fr) auto minmax(120px, 0.7fr) minmax(180px, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
}

.compact-draft-row + .compact-draft-row {
  border-top: 1px solid var(--line);
}

.compact-draft-main h3 {
  font-size: 0.84rem;
  line-height: 1.4;
}

.compact-draft-main span,
.compact-draft-amount span,
.compact-draft-updated span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
}

.compact-draft-amount strong,
.compact-draft-updated strong {
  font-size: 0.76rem;
}

.compact-draft-updated strong {
  margin-top: 3px;
  font-weight: 690;
}

.issued-invoice-section {
  margin-top: 28px;
}

.compact-heading {
  align-items: baseline;
  margin-bottom: 12px;
}

.result-count {
  color: var(--muted);
  font-size: 0.74rem;
  white-space: nowrap;
}

.invoice-list-filters {
  display: grid;
  grid-template-columns: minmax(200px, 1.5fr) repeat(5, minmax(115px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.invoice-filter-actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.invoice-history-table th:nth-child(5),
.invoice-history-table td:nth-child(5) {
  text-align: right;
}

.invoice-demo-row td {
  background: var(--papel);
}

.invoice-demo-preview {
  margin-top: 28px;
}

.invoice-history-table .invoice-demo-label {
  max-width: 220px;
  margin-top: 5px;
  color: var(--warning);
  font-size: 0.62rem;
  font-weight: 820;
  letter-spacing: 0.035em;
  line-height: 1.35;
}

.invoice-history-table .invoice-demo-status {
  width: fit-content;
  margin-top: 0;
  color: var(--warning);
  background: var(--warning-soft);
  white-space: nowrap;
}

.invoice-history-empty {
  padding: 28px 20px;
  color: var(--muted);
  text-align: center;
  border-top: 1px solid var(--line);
}

.invoice-history-empty strong,
.invoice-history-empty p {
  display: block;
  margin: 0;
}

.invoice-history-empty strong {
  color: var(--ink);
  font-size: 0.88rem;
}

.invoice-history-empty p {
  max-width: 620px;
  margin: 5px auto 0;
  font-size: 0.76rem;
  line-height: 1.5;
}

.record-card h2 {
  margin-top: 8px;
  font-size: 1.05rem;
}

.record-card p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
}

.status-pill {
  display: inline-flex;
  padding: 5px 8px;
  color: var(--blue-dark);
  font-size: 0.67rem;
  font-weight: 780;
  background: var(--blue-soft);
  border-radius: 999px;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 2px;
  border: 1px solid transparent;
  border-radius: var(--radio-m);
}

.choice-card,
.confirmation-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 64px;
  padding: 15px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
  cursor: pointer;
}

.choice-card input,
.confirmation-box input {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  margin: 2px 0 0;
}

.choice-card strong,
.choice-card small {
  display: block;
}

.choice-card strong {
  font-size: 0.84rem;
}

.choice-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.45;
}

.confirmation-box {
  align-items: center;
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-borde);
  font-size: 0.82rem;
  font-weight: 680;
  line-height: 1.45;
}

.choice-grid.has-error,
.confirmation-box.has-error {
  border-color: var(--danger);
}

.invoice-kind-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.invoice-kind-options .choice-card:has(input:checked) {
  background: var(--blue-soft);
  border-color: var(--sello-borde);
  box-shadow: 0 0 0 2px rgb(23 91 196 / 8%);
}

.invoice-date-grid {
  max-width: 510px;
}

.subscription-fields {
  display: none;
  margin-top: 20px;
  padding: 18px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.subscription-fields h3 {
  margin: 0 0 14px;
  font-size: 0.86rem;
}

.invoice-kind-section:has(input[name="invoiceKind"][value="subscription"]:checked)
  .subscription-fields {
  display: block;
}

.panel-inset,
.advanced-options {
  margin-top: 16px;
  padding: 16px 18px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.panel-inset > summary,
.advanced-options > summary {
  color: var(--blue-dark);
  font-size: 0.8rem;
  font-weight: 760;
  cursor: pointer;
}

.panel-inset[open] > summary,
.advanced-options[open] > summary {
  margin-bottom: 14px;
}

.panel-inset > .field-hint {
  margin: -4px 0 14px;
}

.header-actions,
.header-status,
.record-badges,
.record-actions,
.action-stack {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.header-status {
  justify-content: flex-end;
}

.record-actions {
  justify-content: flex-end;
  flex: 0 0 auto;
}

.record-actions form,
.table-actions form,
.action-stack form {
  margin: 0;
}

.record-card.is-muted {
  background: var(--papel);
  box-shadow: none;
}

.status-pill.is-neutral {
  color: var(--tinta-2);
  background: var(--papel-2);
}

.text-action {
  min-height: 40px;
  padding: 0;
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.text-action.is-danger {
  color: var(--danger);
}

.money {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.money.is-strong {
  font-weight: 800;
}

.planning-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 22px;
}

.planning-grid.records {
  align-items: start;
}

.planning-warning {
  margin-bottom: 0;
}

.compact-form {
  display: grid;
  gap: 18px;
}

.form-actions.compact {
  gap: 14px;
  padding-top: 0;
}

.planning-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.planning-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
}

.planning-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.planning-list strong,
.planning-list span {
  display: block;
}

.planning-list strong {
  font-size: 0.86rem;
}

.planning-list span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.45;
}

.compact-empty {
  margin: 0;
  padding: 18px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
  background: var(--papel);
  border: 1px dashed var(--line);
  border-radius: var(--radio-m);
}

.compact-empty strong,
.compact-empty p {
  margin: 0;
}

.compact-empty p {
  margin-top: 4px;
}

.new-line-composer {
  margin: 0 0 20px;
}

.new-line-composer > summary {
  width: fit-content;
  list-style: none;
  cursor: pointer;
}

.new-line-composer > summary::-webkit-details-marker,
.line-edit-disclosure > summary::-webkit-details-marker,
.line-delete-disclosure > summary::-webkit-details-marker,
.line-discount-options > summary::-webkit-details-marker {
  display: none;
}

.new-line-composer > summary::before {
  content: "+";
  margin-right: 8px;
  font-size: 1rem;
  line-height: 1;
}

.new-line-composer[open] > summary {
  margin-bottom: 12px;
}

.new-line-composer-body {
  padding: 18px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.new-line-intro strong,
.new-line-intro p {
  margin: 0;
}

.new-line-intro strong {
  font-size: 0.9rem;
}

.new-line-intro p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.line-template-picker {
  margin-top: 16px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
}

.line-template-picker-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.line-template-picker-controls .secondary-button {
  min-height: 48px;
}

.line-template-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px;
  padding: 10px 12px;
  color: var(--tinta-2);
  font-size: 0.72rem;
  line-height: 1.45;
  background: var(--blue-soft);
  border-radius: var(--radio-s);
}

.new-line-composer-body > .inline-line-form {
  margin-top: 16px;
  padding: 18px 0 0;
}

.inline-line-form {
  padding: 18px;
  border-top: 1px solid var(--line);
}

.inline-line-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.inline-line-form .field input {
  width: 100%;
  max-width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
}

.inline-line-form .field input:focus {
  border-color: var(--blue);
}

.line-template-source {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  color: var(--tinta-2);
  background: var(--blue-soft);
  border-radius: var(--radio-s);
}

.line-template-source span,
.line-template-source small {
  font-size: 0.68rem;
}

.line-template-source small {
  color: var(--muted);
}

.line-template-source strong {
  font-size: 0.78rem;
}

.line-discount-options {
  padding: 12px 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
}

.line-discount-options > summary {
  color: var(--blue-dark);
  font-size: 0.74rem;
  font-weight: 750;
  list-style: none;
  cursor: pointer;
}

.line-discount-options > summary::before {
  content: "+";
  display: inline-block;
  width: 18px;
}

.line-discount-options[open] > summary::before {
  content: "−";
}

.line-discount-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.inline-line-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.inline-line-form-footer span {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.invoice-line-cards {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.invoice-line-card {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
  overflow: hidden;
}

.invoice-line-card-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
}

.line-order-controls {
  display: grid;
  grid-template-columns: repeat(2, 34px);
  gap: 5px;
}

.line-order-controls form {
  margin: 0;
}

.line-order-controls button {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--blue-dark);
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
  cursor: pointer;
}

.line-order-controls button:disabled {
  color: var(--tinta-3);
  background: var(--papel-2);
  border-color: var(--line);
  cursor: not-allowed;
}

.invoice-line-card-title {
  min-width: 0;
}

.invoice-line-card-title span,
.invoice-line-card-title h3 {
  margin: 0;
}

.invoice-line-card-title span {
  color: var(--muted);
  font-size: 0.64rem;
  font-weight: 780;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.invoice-line-card-title h3 {
  margin-top: 4px;
  font-size: 0.88rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.invoice-line-total {
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-line-facts {
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 11px 18px;
  background: var(--papel);
  border-top: 1px solid var(--line);
}

.invoice-line-facts div {
  display: flex;
  gap: 6px;
}

.invoice-line-facts dt,
.invoice-line-facts dd {
  margin: 0;
  font-size: 0.7rem;
}

.invoice-line-facts dt {
  color: var(--muted);
}

.invoice-line-facts dd {
  font-weight: 730;
}

.invoice-line-card-actions {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}

.line-edit-disclosure {
  flex: 1 1 auto;
}

.line-edit-disclosure > summary,
.line-delete-disclosure > summary {
  width: fit-content;
  color: var(--blue-dark);
  font-size: 0.74rem;
  font-weight: 750;
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
  cursor: pointer;
}

.line-delete-disclosure > summary {
  color: var(--danger);
}

.line-edit-disclosure[open] {
  flex-basis: 100%;
}

.line-edit-disclosure .inline-line-form {
  margin-top: 12px;
  padding: 18px 0 4px;
}

.line-delete-disclosure > div {
  min-width: 240px;
  margin-top: 10px;
  padding: 12px;
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
  border-radius: var(--radio-s);
}

.line-delete-disclosure p {
  margin: 0 0 10px;
  color: var(--danger);
  font-size: 0.7rem;
  line-height: 1.4;
}

.line-delete-disclosure .danger-button {
  min-height: 40px;
  width: 100%;
  background: var(--surface);
}

.document-warning,
.collection-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 6px 10px;
  font-size: 0.68rem;
  font-weight: 820;
  border-radius: 999px;
  white-space: nowrap;
}

.document-warning {
  color: var(--warning);
  letter-spacing: 0.04em;
  background: var(--warning-soft);
  border: 1px solid var(--warning-borde);
}

.collection-pill.is-paid {
  color: var(--safe);
  background: var(--safe-soft);
}

.collection-pill.is-partial,
.collection-pill.is-pending {
  color: var(--warning);
  background: var(--warning-soft);
}

.collection-pill.is-empty {
  color: var(--tinta-2);
  background: var(--papel-2);
}

.read-only-panel,
.draft-section,
.draft-actions,
.document-warning-block {
  max-width: 1050px;
  margin-top: 22px;
}

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

.section-heading h2 {
  margin-top: 4px;
}

.section-heading p:not(.eyebrow) {
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.summary-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.summary-list > div {
  min-width: 0;
  padding: 14px;
  background: var(--surface);
}

.summary-list dt,
.summary-list dd {
  margin: 0;
}

.summary-list dt {
  color: var(--muted);
  font-size: 0.7rem;
}

.summary-list dd {
  margin-top: 5px;
  font-size: 0.83rem;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.read-only-notes {
  margin-top: 18px;
  padding: 16px;
  background: var(--papel);
  border-radius: var(--radio-m);
}

.read-only-notes strong,
.read-only-notes p {
  margin: 0;
}

.read-only-notes p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
}

.data-table th,
.data-table td {
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--line);
}

.data-table th {
  color: var(--tinta-2);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--papel);
}

.data-table td {
  font-size: 0.79rem;
  line-height: 1.45;
}

.data-table tbody tr:last-child td {
  border-bottom: 0;
}

.data-table td > strong,
.data-table td > span {
  display: block;
}

.data-table td > span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.7rem;
}

.draft-lines-table th:not(:first-child),
.draft-lines-table td:not(:first-child),
.collection-table th:nth-child(n + 3),
.collection-table td:nth-child(n + 3),
.preview-lines th:not(:first-child),
.preview-lines td:not(:first-child) {
  text-align: right;
}

.draft-lines-table th:last-child,
.draft-lines-table td:last-child,
.collection-table th:last-child,
.collection-table td:last-child {
  text-align: left;
}

.line-position {
  display: inline-grid !important;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px 8px 0 0 !important;
  float: left;
  color: var(--blue-dark) !important;
  font-size: 0.68rem !important;
  font-weight: 800;
  background: var(--blue-soft);
  border-radius: 50%;
}

.table-actions {
  min-width: 118px;
}

.table-actions .secondary-link,
.table-actions .text-action {
  min-height: 32px;
}

.provisional-totals {
  width: min(100%, 470px);
  display: grid;
  gap: 0;
  margin: 22px 0 0 auto;
}

.provisional-totals > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.provisional-totals dt,
.provisional-totals dd {
  margin: 0;
}

.provisional-totals dt {
  color: var(--muted);
  font-size: 0.78rem;
}

.provisional-totals dd {
  font-size: 0.82rem;
  font-weight: 720;
}

.provisional-totals .is-pending-tax {
  color: var(--warning);
}

.provisional-totals .is-pending-tax dt {
  color: inherit;
}

.provisional-totals .is-total {
  padding-top: 15px;
  border-top: 2px solid var(--ink);
}

.provisional-totals .is-total dt,
.provisional-totals .is-total dd {
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 840;
}

.invoice-payment-panel {
  max-width: 1050px;
  margin-top: 22px;
}

.payment-profiles-panel,
.payment-profile-form,
.payment-profile-archived,
.manual-payment-profile-selector {
  max-width: 1050px;
}

.my-data-tabs {
  width: min(100%, 1050px);
  display: flex;
  gap: 6px;
  margin: -6px auto 22px;
  padding: 5px;
  background: var(--papel-2);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.my-data-tabs a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 16px;
  color: var(--tinta-2);
  font-size: 0.78rem;
  font-weight: 760;
  text-decoration: none;
  border-radius: var(--radio-s);
}

.my-data-tabs a:hover {
  color: var(--primary-dark);
  background: rgb(255 255 255 / 60%);
}

.my-data-tabs a[aria-current="page"] {
  color: var(--primary-dark);
  background: var(--surface);
  box-shadow: 0 1px 3px rgb(20 38 70 / 12%);
}

.payment-profiles-table {
  min-width: 760px;
}

.payment-profiles-table tr.is-muted {
  color: var(--muted);
  background: var(--papel);
}

.payment-profile-destination {
  color: var(--ink) !important;
  font-family: var(--mono);
  font-size: 0.74rem !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.payment-profile-actions {
  display: flex;
  min-width: 140px;
  align-items: center;
  gap: 14px;
}

.payment-profile-status-form {
  display: inline-flex;
}

.payment-profile-status-form .text-action.is-safe {
  color: var(--safe);
}

.payment-profiles-empty h3,
.payment-profiles-empty p {
  margin: 0;
}

.payment-profiles-empty h3 {
  color: var(--ink);
  font-size: 0.86rem;
}

.payment-profiles-empty p {
  margin-top: 5px;
}

.payment-profile-form {
  display: grid;
  gap: 22px;
}

.payment-profile-fixed-method {
  min-height: 76px;
}

.payment-profile-fixed-method small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.7rem;
}

.payment-profile-method-fields {
  margin: 0;
}

.payment-profile-paypal-fields {
  display: none;
}

.payment-profile-form.is-method-paypal .payment-profile-bank-fields {
  display: none;
}

.payment-profile-form.is-method-paypal .payment-profile-paypal-fields {
  display: grid;
}

.payment-profile-form:has(input[name="method"][value="bank_transfer"]:checked)
  .payment-profile-bank-fields {
  display: grid;
}

.payment-profile-form:has(input[name="method"][value="bank_transfer"]:checked)
  .payment-profile-paypal-fields {
  display: none;
}

.payment-profile-form:has(input[name="method"][value="paypal"]:checked)
  .payment-profile-bank-fields {
  display: none;
}

.payment-profile-form:has(input[name="method"][value="paypal"]:checked)
  .payment-profile-paypal-fields {
  display: grid;
}

.payment-profile-paypal-email-field,
.payment-profile-paypal-url-field {
  margin-top: 16px;
}

.payment-profile-paypal-url-field,
.payment-profile-paypal-fields.is-paypal-email .payment-profile-paypal-url-field,
.payment-profile-form.is-paypal-email .payment-profile-paypal-url-field {
  display: none;
}

.payment-profile-paypal-fields.is-paypal-url .payment-profile-paypal-email-field,
.payment-profile-form.is-paypal-url .payment-profile-paypal-email-field {
  display: none;
}

.payment-profile-paypal-fields.is-paypal-url .payment-profile-paypal-url-field,
.payment-profile-form.is-paypal-url .payment-profile-paypal-url-field {
  display: flex;
}

.payment-profile-paypal-fields:has(input[name="paypalDestinationKind"][value="email"]:checked)
  .payment-profile-paypal-email-field {
  display: flex;
}

.payment-profile-paypal-fields:has(input[name="paypalDestinationKind"][value="email"]:checked)
  .payment-profile-paypal-url-field {
  display: none;
}

.payment-profile-paypal-fields:has(input[name="paypalDestinationKind"][value="url"]:checked)
  .payment-profile-paypal-email-field {
  display: none;
}

.payment-profile-paypal-fields:has(input[name="paypalDestinationKind"][value="url"]:checked)
  .payment-profile-paypal-url-field {
  display: flex;
}

.payment-profile-archived {
  display: grid;
  gap: 18px;
}

.payment-profile-archived > .status-pill {
  justify-self: start;
}

.payment-profile-archived h2 {
  margin: 0;
}

.manual-payment-profile-selector {
  margin-top: 22px;
}

.payment-instruction-current {
  margin: 0 0 14px;
  padding: 0;
  color: var(--tinta-3);
  font-size: 0.79rem;
  line-height: 1.5;
}

.payment-instruction-current strong {
  color: var(--tinta-2);
  font-weight: 600;
}

.payment-profile-selection-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.payment-profile-selection-card {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 11px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
  cursor: pointer;
}

.payment-profile-selection-card:has(input:checked) {
  background: var(--blue-soft);
  border-color: var(--sello-borde);
  box-shadow: 0 0 0 2px rgb(23 91 196 / 8%);
}

.payment-profile-selection-card.is-snapshot-only {
  margin-bottom: 10px;
  color: var(--safe);
  background: var(--success-soft);
  border-color: var(--safe-borde);
}

.payment-profile-selection-card strong,
.payment-profile-selection-card small {
  display: block;
  overflow-wrap: anywhere;
}

.payment-profile-selection-card strong {
  font-size: 0.86rem;
}

.payment-profile-selection-card small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.4;
}

/* Informa, no advierte: texto discreto bajo las opciones en lugar de un
   recuadro de color que pedía más atención de la que merece. */
.payment-instruction-safety {
  margin-top: 14px;
  padding-top: 12px;
  color: var(--tinta-3);
  font-size: 0.78rem;
  line-height: 1.5;
  border-top: 1px dashed var(--line-soft);
}

.payment-instruction-safety strong {
  color: var(--tinta-2);
  font-weight: 600;
}

.payment-instruction-safety strong::after {
  content: ".";
}

.payment-instruction-safety strong,
.payment-instruction-safety p {
  display: inline;
  margin: 0;
}

.preview-payment-instructions {
  margin-top: 24px;
  padding: 20px 22px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.preview-payment-instructions h2 {
  margin: 0 0 12px;
  font-size: 1rem;
}

.invoice-payment-instruction-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 22px;
  margin: 0;
}

.invoice-payment-instruction-details div {
  min-width: 0;
}

.invoice-payment-instruction-details dt {
  color: var(--muted);
  font-size: 0.7rem;
}

.invoice-payment-instruction-details dd {
  margin: 3px 0 0;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.payment-instruction-safety strong {
  font-size: 0.8rem;
}

.payment-instruction-safety p {
  margin-top: 4px;
  font-size: 0.74rem;
  line-height: 1.5;
}

@media (max-width: 760px) {
  .my-data-tabs {
    margin-top: -2px;
  }

  .my-data-tabs a {
    min-width: 0;
    flex: 1;
    padding-inline: 10px;
    text-align: center;
  }

  .payment-profiles-table-wrap {
    overflow: visible;
    border: 0;
  }

  .payment-profiles-table,
  .payment-profiles-table tbody,
  .payment-profiles-table tr,
  .payment-profiles-table td {
    display: block;
    width: 100%;
  }

  .payment-profiles-table {
    min-width: 0;
  }

  .payment-profiles-table thead {
    display: none;
  }

  .payment-profiles-table tbody {
    display: grid;
    gap: 10px;
    background: transparent;
  }

  .payment-profiles-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio-m);
    box-shadow: var(--shadow);
  }

  .payment-profiles-table tr.is-muted {
    background: var(--papel);
    box-shadow: none;
  }

  .payment-profiles-table td,
  .payment-profiles-table tbody tr:last-child td {
    min-width: 0;
    padding: 0;
    border-bottom: 0;
  }

  .payment-profiles-table td[data-label="Nombre"],
  .payment-profiles-table td[data-label="Destino"],
  .payment-profiles-table td[data-label="Acciones"] {
    grid-column: 1 / -1;
  }

  .payment-profiles-table td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .payment-profiles-table .payment-profile-actions {
    padding-top: 8px !important;
    border-top: 1px solid var(--line) !important;
  }

  .payment-profile-selection-list {
    grid-template-columns: 1fr;
  }

  .payment-profile-method-choice,
  .payment-profile-paypal-choice {
    grid-template-columns: 1fr;
  }

  .payment-profile-actions {
    min-width: 0;
    flex-wrap: wrap;
  }

  .invoice-payment-instruction-details {
    grid-template-columns: 1fr;
  }
}

.payment-test-only {
  margin: 0 0 18px;
}

.payment-summary {
  margin-bottom: 18px;
}

.payment-movements {
  min-width: 560px;
}

.payment-movements caption {
  padding: 0 0 10px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 760;
  text-align: left;
}

.payment-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.payment-full-form,
.payment-partial-disclosure {
  margin: 0;
  padding: 18px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.payment-full-form,
.payment-partial-disclosure,
.payment-partial-form {
  display: flex;
  flex-direction: column;
}

.payment-partial-form {
  flex: 1;
}

.payment-full-form h3,
.payment-partial-disclosure h3,
.payment-full-form p,
.payment-partial-form p {
  margin: 0;
}

.payment-partial-disclosure h3 {
  margin-bottom: 12px;
}

.payment-full-form > p,
.payment-partial-form > p {
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.55;
}

.payment-full-form .form-grid,
.payment-partial-form .form-grid {
  grid-template-columns: 1fr;
  margin: 14px 0;
}

.payment-full-form > button,
.payment-partial-form > button {
  width: 100%;
  margin-top: auto;
}

.payment-settled,
.payment-empty,
.payment-locked {
  margin-top: 18px;
}

.advance-payment-guide {
  margin-top: 18px;
}

.advance-payment-guide p,
.advance-payment-guide ol {
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
}

.draft-actions {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(320px, 1.2fr);
  gap: 28px;
}

.draft-actions h2,
.draft-actions p {
  margin: 0;
}

.draft-actions h2 {
  margin-top: 4px;
}

.draft-actions p:not(.eyebrow) {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.55;
}

.action-stack {
  align-items: stretch;
  flex-direction: column;
}

.action-stack form {
  display: grid;
  gap: 10px;
}

.action-stack > *,
.action-stack button {
  width: 100%;
}

.secondary-button,
.danger-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  font-weight: 750;
  background: var(--surface);
  border: 1px solid;
  border-radius: var(--radio-s);
  cursor: pointer;
}

.secondary-button {
  color: var(--blue-dark);
  border-color: var(--line);
}

.secondary-button:disabled {
  color: var(--muted);
  background: var(--papel-2);
  border-color: var(--line);
  cursor: not-allowed;
  opacity: 0.72;
}

.danger-button {
  color: var(--danger);
  border-color: var(--danger-borde);
}

.abandon-form {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.confirmation-box.compact {
  min-height: 0;
  padding: 12px;
  font-size: 0.74rem;
}

.invoice-identification-choice {
  color: var(--ink);
  background: var(--papel);
  border-color: var(--line);
}

.invoice-identification-choice span,
.invoice-identification-choice strong,
.invoice-identification-choice small {
  display: block;
}

.document-form-guidance {
  display: grid;
  gap: 16px;
  max-width: 1050px;
  margin-top: 22px;
  border-left: 4px solid var(--blue);
}

.document-form-guidance.is-review {
  border-left-color: var(--warning);
}

.document-form-guidance-compact {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 22px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blue);
  border-radius: var(--radio-m);
  box-shadow: 0 8px 24px rgb(32 46 74 / 6%);
}

.document-form-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
}

.document-form-summary > span {
  width: 28px;
  height: 28px;
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  color: var(--blue-dark);
  font-weight: 850;
  background: var(--blue-soft);
  border-radius: 50%;
}

.document-form-summary strong,
.document-form-summary small {
  display: block;
}

.document-form-summary strong {
  font-size: 0.82rem;
}

.document-form-summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.71rem;
  line-height: 1.4;
}

.document-form-technical {
  min-width: 0;
  margin: 0;
}

.document-form-technical > summary {
  color: var(--blue-dark);
  font-size: 0.72rem;
  font-weight: 760;
  cursor: pointer;
  white-space: nowrap;
}

.document-form-guidance.is-review .document-form-technical,
.document-form-technical[open] {
  grid-column: 1 / -1;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.document-form-technical .document-form-facts {
  margin-top: 12px;
}

.document-form-technical > .field-hint {
  display: block;
  margin-top: 10px;
}

.document-form-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.document-form-facts > div {
  display: grid;
  gap: 4px;
  padding: 13px 15px;
  background: var(--papel);
}

.document-form-facts dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.document-form-facts dd {
  margin: 0;
  font-weight: 760;
}

.document-form-blockers {
  padding: 14px 16px;
  background: var(--warning-soft);
  border-radius: var(--radio-m);
}

.document-form-blockers ul {
  margin: 8px 0 0;
  padding-left: 20px;
}

.rectification-rehearsal,
.rectification-rehearsal-result {
  margin-top: 24px;
}

.rectification-rehearsal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.rectification-comparison {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.rectification-comparison > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: var(--papel);
}

.rectification-comparison dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.rectification-comparison dd {
  margin: 0;
  font-weight: 780;
}

.invoice-issued-rehearsal-entry,
.issued-rehearsal-document-actions,
.issued-rehearsal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.invoice-issued-rehearsal-entry {
  margin-top: 24px;
}

.invoice-issued-rehearsal-entry h2,
.invoice-issued-rehearsal-entry p,
.issued-rehearsal-actions h2,
.issued-rehearsal-actions p {
  margin: 0;
}

.invoice-issued-rehearsal-entry p:not(.eyebrow),
.issued-rehearsal-actions p:not(.eyebrow) {
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.issued-rehearsal-summary,
.issued-rehearsal-actions {
  margin-top: 22px;
}

.issued-rehearsal-facts {
  margin: 18px 0;
}

.issued-rehearsal-statuses {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.issued-rehearsal-statuses > div {
  display: grid;
  gap: 4px;
  padding: 14px;
  background: var(--papel);
}

.issued-rehearsal-statuses span {
  color: var(--muted);
  font-size: 0.72rem;
}

.issued-rehearsal-statuses strong {
  font-size: 0.83rem;
}

.issued-rehearsal-document-actions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.issued-rehearsal-actions {
  align-items: flex-start;
  flex-wrap: wrap;
}

.issued-rehearsal-actions > div:first-child {
  flex: 1 1 300px;
}

@media (max-width: 760px) {
  .document-form-guidance-compact {
    grid-template-columns: 1fr;
  }

  .document-form-facts,
  .rectification-comparison {
    grid-template-columns: 1fr;
  }

  .rectification-rehearsal-actions {
    display: grid;
  }

  .invoice-issued-rehearsal-entry,
  .issued-rehearsal-actions,
  .issued-rehearsal-document-actions {
    display: grid;
    align-items: stretch;
  }

  .issued-rehearsal-statuses {
    grid-template-columns: 1fr;
  }
}

.invoice-identification-choice small {
  margin-top: 3px;
  color: var(--muted);
  font-weight: 500;
  line-height: 1.45;
}

.document-warning-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 18px;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid var(--warning-borde);
  border-radius: var(--radio-m);
}

.document-warning-block strong,
.document-warning-block span {
  display: block;
}

.document-warning-block strong {
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.document-warning-block span {
  color: var(--warning);
  font-size: 0.72rem;
}

.collection-table-wrap {
  max-width: 1200px;
  margin-top: 22px;
  box-shadow: var(--shadow);
}

.draft-watermark {
  display: none;
}

.invoice-preview {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 58px);
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.invoice-preview::before {
  content: "BORRADOR";
  position: absolute;
  z-index: 0;
  top: 45%;
  left: 50%;
  color: rgba(173, 35, 49, 0.055);
  font-size: clamp(4rem, 13vw, 9rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%) rotate(-27deg);
  pointer-events: none;
  white-space: nowrap;
}

.invoice-preview > * {
  position: relative;
  z-index: 1;
}

.preview-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 28px;
  border-bottom: 2px solid var(--ink);
}

.preview-header h1 {
  margin: 7px 0 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  letter-spacing: -0.04em;
}

.preview-brand {
  color: var(--blue-dark);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.1em;
}

.preview-warning {
  min-width: 230px;
  padding: 13px 15px;
  color: var(--danger);
  text-align: right;
  background: var(--danger-soft);
  border: 2px solid var(--danger-borde);
  border-radius: var(--radio-s);
}

.preview-warning strong,
.preview-warning span {
  display: block;
}

.preview-warning strong {
  font-size: 0.78rem;
}

.preview-warning span {
  margin-top: 4px;
  font-size: 0.68rem;
  font-weight: 750;
}

.preview-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 0;
  background: var(--line);
  border: 1px solid var(--line);
}

.editable-preview-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.preview-meta > div {
  padding: 12px;
  background: var(--surface);
}

.preview-meta dt,
.preview-meta dd {
  margin: 0;
}

.preview-meta dt {
  color: var(--muted);
  font-size: 0.65rem;
  text-transform: uppercase;
}

.preview-meta dd {
  margin-top: 5px;
  font-size: 0.8rem;
  font-weight: 760;
}

.preview-parties {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  margin: 32px 0;
}

.preview-party {
  min-width: 0;
  padding: 18px;
  background: var(--papel);
  border-radius: var(--radio-m);
}

.preview-party h2,
.preview-party p,
.preview-party strong {
  display: block;
  margin: 0;
}

.preview-party h2 {
  margin-bottom: 10px;
  color: var(--muted);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.preview-party strong {
  margin-bottom: 7px;
  font-size: 0.9rem;
}

.preview-party p {
  color: var(--tinta-2);
  font-size: 0.75rem;
  line-height: 1.45;
}

.preview-party p.muted {
  margin-top: 5px;
  color: var(--muted);
}

.preview-lines {
  border-radius: 0;
}

.preview-lines .empty-cell {
  padding: 32px;
  color: var(--muted);
  text-align: center !important;
}

.preview-totals {
  margin-top: 28px;
}

.editable-preview-summary {
  align-items: end;
  margin-top: 30px;
}

.editable-preview-summary .preview-totals {
  width: 100%;
  margin-top: 0;
}

.provisional-qr {
  padding: 12px;
  color: var(--danger);
  background: var(--danger-soft);
  border: 2px solid var(--danger-borde);
  border-radius: var(--radio-s);
}

.provisional-qr .qr-svg {
  margin: 6px auto;
  background: var(--papel);
}

.qr-placeholder {
  display: grid;
  place-items: center;
  width: 38mm;
  height: 38mm;
  margin: 6px auto;
  color: var(--danger);
  font-size: 1.1rem;
  font-weight: 850;
  background:
    repeating-linear-gradient(
      45deg,
      var(--papel),
      var(--papel) 7px,
      var(--danger-soft) 7px,
      var(--danger-soft) 14px
    );
  border: 1px dashed var(--danger-borde);
}

.fiscal-preview-status {
  margin-top: 28px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.fiscal-preview-status strong,
.fiscal-preview-status p {
  display: block;
  margin: 0;
}

.fiscal-preview-status p,
.fiscal-preview-status li {
  font-size: 0.73rem;
  line-height: 1.5;
}

.fiscal-preview-status p {
  margin-top: 6px;
}

.fiscal-preview-status ul {
  margin: 10px 0 0;
  padding-left: 20px;
}

.fiscal-preview-status.is-review {
  color: var(--warning);
  background: var(--warning-soft);
  border-color: var(--warning-borde);
}

.fiscal-preview-status.is-determined {
  color: var(--safe);
  background: var(--papel-2);
  border-color: var(--safe-borde);
}

.preview-notes {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.preview-notes h2,
.preview-notes p {
  margin: 0;
}

.preview-notes h2 {
  font-size: 0.85rem;
}

.preview-notes p {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.55;
  white-space: pre-wrap;
}

.preview-footer {
  margin-top: 42px;
  padding: 17px;
  color: var(--danger);
  text-align: center;
  background: var(--danger-soft);
  border: 2px solid var(--danger-borde);
}

.preview-footer strong,
.preview-footer p {
  display: block;
  margin: 0;
}

.preview-issuance-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
  gap: 28px;
  max-width: 980px;
  margin: 24px auto 0;
}

.preview-issuance-actions h2,
.preview-issuance-actions p {
  margin: 0;
}

.preview-issuance-actions h2 {
  margin-top: 5px;
}

.preview-issuance-actions p:not(.eyebrow) {
  margin-top: 8px;
  color: var(--muted);
}

.preview-issuance-actions .primary-button:disabled {
  color: var(--tinta-3);
  cursor: not-allowed;
  background: var(--papel-2);
  box-shadow: none;
}

.disabled-action-reason {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
  text-align: center;
}

.preview-footer strong {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}

.preview-footer p {
  margin-top: 5px;
  font-size: 0.69rem;
}

.request-id {
  margin: 24px 0 0;
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.5;
}

.error-card .primary-button {
  margin-top: 26px;
}

.fiscal-boundary-notice {
  max-width: 1050px;
  margin-bottom: 22px;
  padding: 18px 20px;
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid var(--warning-borde);
  border-left: 5px solid var(--warning);
  border-radius: var(--radio-m);
}

.fiscal-boundary-notice strong,
.fiscal-boundary-notice p {
  display: block;
  margin: 0;
}

.fiscal-boundary-notice strong {
  font-size: 0.9rem;
}

.fiscal-boundary-notice p {
  margin-top: 6px;
  font-size: 0.78rem;
  line-height: 1.55;
}

.fiscal-preparation-form {
  margin-bottom: 26px;
}

.fiscal-facts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.fiscal-fact-card {
  min-width: 0;
  padding: 18px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.fiscal-fact-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.fiscal-fact-heading h3,
.fiscal-fact-card > p {
  margin: 0;
}

.fiscal-fact-heading h3 {
  font-size: 0.89rem;
  line-height: 1.35;
}

.fiscal-fact-card > p {
  min-height: 54px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.5;
}

.fiscal-fact-card .field {
  margin-top: 14px;
}

.fiscal-fact-card textarea {
  min-height: 104px;
}

.fiscal-state,
.fiscal-review-state {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 28px;
  padding: 5px 9px;
  font-size: 0.65rem;
  font-weight: 820;
  line-height: 1.2;
  border-radius: 999px;
}

.fiscal-state.is-pending {
  color: var(--warning);
  background: var(--warning-soft);
  border: 1px solid var(--warning-borde);
}

.fiscal-state.is-reported {
  color: var(--sello);
  background: var(--papel-2);
  border: 1px solid var(--line);
}

.fiscal-confirmation {
  background: var(--papel);
}

.fiscal-preview-selector,
.fiscal-simulation,
.fiscal-preview-error {
  max-width: 1050px;
}

.fiscal-preview-selector {
  margin-top: 0;
}

.fiscal-preview-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
}

.fiscal-preview-form .field {
  min-width: 0;
}

.fiscal-preview-form select {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
}

.fiscal-preview-form .secondary-button {
  min-height: 48px;
}

.fiscal-preview-error {
  margin-top: 22px;
}

.fiscal-simulation {
  position: relative;
  margin-top: 24px;
  padding: 28px;
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--danger-borde);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.fiscal-simulation > *:not(.fiscal-simulation-watermark) {
  position: relative;
  z-index: 1;
}

.fiscal-simulation-watermark {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  color: rgba(173, 35, 49, 0.045);
  font-size: clamp(4rem, 12vw, 8.5rem);
  font-weight: 920;
  letter-spacing: 0.08em;
  transform: translate(-50%, -50%) rotate(-24deg);
  pointer-events: none;
  white-space: nowrap;
}

.fiscal-simulation-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding-bottom: 22px;
  border-bottom: 2px solid var(--line);
}

.fiscal-simulation-header h2,
.fiscal-simulation-header p {
  margin: 0;
}

.fiscal-simulation-header h2 {
  max-width: 760px;
  margin-top: 5px;
  color: var(--danger);
  font-size: 1.08rem;
  line-height: 1.45;
  letter-spacing: 0.025em;
}

.fiscal-simulation-header p:not(.eyebrow) {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.76rem;
  line-height: 1.5;
}

.fiscal-review-state {
  color: var(--danger);
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
}

.fiscal-orientation,
.fiscal-blockers {
  margin-top: 24px;
  padding: 22px;
  background: rgba(248, 249, 251, 0.96);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.fiscal-orientation .section-heading,
.fiscal-blockers .section-heading {
  margin-bottom: 17px;
}

.fiscal-orientation .section-heading h3,
.fiscal-blockers .section-heading h3 {
  margin: 4px 0 0;
  font-size: 0.96rem;
}

.fiscal-orientation dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
}

.fiscal-orientation dl > div {
  min-width: 0;
  padding: 14px;
  background: var(--surface);
}

.fiscal-orientation dt,
.fiscal-orientation dd {
  margin: 0;
}

.fiscal-orientation dt {
  color: var(--muted);
  font-size: 0.69rem;
}

.fiscal-orientation dd {
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 760;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.fiscal-orientation .is-total dd {
  color: var(--blue-dark);
}

.fiscal-blockers ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fiscal-blockers li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 11px;
  align-items: start;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
}

.fiscal-blockers li > span {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  color: var(--danger);
  font-size: 0.75rem;
  font-weight: 900;
  background: var(--danger-soft);
  border-radius: 50%;
}

.fiscal-blockers strong,
.fiscal-blockers small {
  display: block;
}

.fiscal-blockers strong {
  font-size: 0.78rem;
  line-height: 1.45;
}

.fiscal-blockers small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.62rem;
  overflow-wrap: anywhere;
}

.fiscal-simulation-footer {
  display: grid;
  gap: 5px;
  margin-top: 24px;
  padding: 16px;
  color: var(--danger);
  text-align: center;
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
}

.fiscal-simulation-footer strong {
  font-size: 0.72rem;
  letter-spacing: 0.035em;
}

.fiscal-simulation-footer span {
  font-size: 0.68rem;
  line-height: 1.45;
}

.simulation-seal-panel {
  max-width: 980px;
  margin: 24px auto 0;
}

.simulation-seal-form {
  display: grid;
  gap: 22px;
  margin-top: 22px;
}

.simulation-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.simulation-list h2,
.simulation-list p {
  margin: 0;
}

.simulation-list h2 {
  margin-top: 9px;
  font-size: 1.05rem;
}

.simulation-list p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.8rem;
}

.simulation-safety-callout {
  max-width: 1050px;
  margin-bottom: 18px;
}

.simulation-watermark {
  display: none;
}

.simulation-artifact::before {
  content: "NO ES FACTURA";
  font-size: clamp(3.5rem, 10vw, 7rem);
}

.simulation-meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.simulation-meta code {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.68rem;
  font-weight: 650;
}

.simulation-rectification,
.simulation-trace {
  margin-top: 24px;
  padding: 18px 20px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.simulation-rectification h2,
.simulation-rectification p,
.simulation-trace h2,
.simulation-trace p {
  margin: 0;
}

.simulation-rectification h2,
.simulation-trace h2 {
  margin-top: 4px;
  font-size: 1rem;
}

.simulation-rectification p,
.simulation-trace p,
.simulation-trace li {
  margin-top: 7px;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.5;
}

.page-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.disabled-link {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  cursor: not-allowed;
}

.lab-scenario-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 18px 0 24px;
}

.lab-scenario-card {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  min-height: 235px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
}

.lab-scenario-card.is-selected {
  background: var(--papel);
  border-color: var(--sello-borde);
  box-shadow: 0 0 0 2px rgba(35, 92, 160, 0.08);
}

.lab-scenario-card h2 {
  margin: 14px 0 0;
  font-size: 1rem;
}

.lab-scenario-card p {
  flex: 1;
  margin: 8px 0 18px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.lab-scenario-card button {
  width: 100%;
}

.lab-results {
  display: grid;
  gap: 18px;
}

.lab-results > p,
.lab-results > h3 {
  margin: 0;
}

.lab-results > p {
  color: var(--muted);
}

.lab-results > h3 {
  padding-top: 4px;
  font-size: 0.9rem;
}

.compact-metrics {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}

.compact-metrics .metric-card {
  min-height: 126px;
  padding: 16px;
}

.lab-empty {
  margin-top: 20px;
}

.lab-reset {
  margin-top: 14px;
  text-align: center;
}

.safe-inline {
  padding: 12px 14px;
  color: var(--safe);
  background: var(--success-soft);
  border: 1px solid var(--safe-borde);
  border-radius: var(--radio-s);
}

.lab-alert-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lab-alert-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
  border-radius: var(--radio-s);
}

.boundary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 20px 0;
}

.boundary-grid article {
  display: grid;
  gap: 5px;
  min-height: 92px;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.boundary-grid span {
  color: var(--muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.boundary-grid strong {
  font-size: 1rem;
}

.rrsif-chain {
  display: grid;
  gap: 16px;
}

.rrsif-record {
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
}

.rrsif-record > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.rrsif-record h2 {
  margin: 8px 0 0;
  font-size: 1.05rem;
}

.detail-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.detail-list > div {
  min-width: 0;
  padding: 11px 12px;
  background: var(--papel);
  border-radius: var(--radio-s);
}

.detail-list dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 750;
  text-transform: uppercase;
}

.detail-list dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.78rem;
}

.hash-value {
  font-size: 0.68rem;
}

.code-disclosure {
  margin-top: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
}

.code-disclosure summary {
  padding: 10px 12px;
  color: var(--blue-dark);
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
}

.code-disclosure pre {
  max-height: 300px;
  margin: 0;
  padding: 14px;
  overflow: auto;
  color: var(--papel-2);
  background: var(--tinta);
  border-radius: 0 0 8px 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 0.68rem;
}

.simulation-trace ol {
  margin: 12px 0 0;
  padding-left: 22px;
}

.invoice-examples {
  max-width: 1050px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.invoice-example-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.invoice-example-card {
  display: flex;
  min-height: 235px;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.invoice-example-card h3 {
  margin: 16px 0 0;
  font-size: 1rem;
  line-height: 1.35;
}

.invoice-example-card p {
  margin: 8px 0 20px;
  color: var(--muted);
  font-size: 0.78rem;
  line-height: 1.55;
}

.invoice-example-card .secondary-button {
  width: 100%;
  margin-top: auto;
  text-decoration: none;
}

.final-invoice-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: start;
  gap: 24px;
}

.final-invoice-sheet {
  padding: clamp(24px, 4vw, 48px);
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-l);
  box-shadow: 0 18px 50px rgb(32 46 74 / 10%);
}

.final-invoice-header,
.invoice-parties,
.invoice-period,
.invoice-totals-and-qr {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.final-invoice-header {
  align-items: start;
  padding-bottom: 30px;
  border-bottom: 2px solid var(--ink);
}

.invoice-brand {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--sobre-sello);
  font-size: 0.78rem;
  font-weight: 850;
  background: var(--blue);
  border-radius: var(--radio-m);
}

.final-invoice-header h2,
.final-invoice-header p {
  margin: 0;
}

.final-invoice-header h2 {
  margin-top: 18px;
  font-size: 2.25rem;
  letter-spacing: -0.04em;
}

.final-invoice-header p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.75rem;
}

.final-invoice-header dl,
.invoice-final-totals {
  margin: 0;
}

.final-invoice-header dl > div {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.final-invoice-header dt,
.final-invoice-header dd,
.invoice-final-totals dt,
.invoice-final-totals dd {
  margin: 0;
}

.final-invoice-header dt {
  color: var(--muted);
  font-size: 0.72rem;
}

.final-invoice-header dd {
  font-size: 0.78rem;
  font-weight: 760;
  text-align: right;
}

.invoice-parties {
  padding: 30px 0;
}

.invoice-parties.is-single {
  grid-template-columns: 1fr;
}

.invoice-parties > div {
  padding: 18px;
  background: var(--papel);
  border-radius: var(--radio-m);
}

.invoice-parties span,
.invoice-period span {
  display: block;
  margin-bottom: 7px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 760;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.invoice-parties strong,
.invoice-period strong {
  font-size: 0.84rem;
}

.invoice-parties p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 0.73rem;
  line-height: 1.55;
}

.invoice-period {
  margin-bottom: 28px;
  padding: 16px 18px;
  background: var(--blue-soft);
  border-radius: var(--radio-m);
}

.invoice-lines-wrap {
  overflow-x: auto;
}

.invoice-lines {
  width: 100%;
  border-collapse: collapse;
}

.invoice-lines th,
.invoice-lines td {
  padding: 13px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 0.75rem;
  text-align: left;
}

.invoice-lines th:not(:first-child),
.invoice-lines td:not(:first-child) {
  text-align: right;
}

.invoice-lines th {
  color: var(--muted);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.invoice-totals-and-qr {
  align-items: end;
  margin-top: 30px;
}

.invoice-qr-preview {
  width: fit-content;
  text-align: center;
}

.invoice-qr-preview > strong,
.invoice-qr-preview > b,
.invoice-qr-preview > small {
  display: block;
}

.invoice-qr-preview > strong {
  margin-bottom: 4px;
  font-size: 0.72rem;
}

.invoice-qr-preview > b {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}

.invoice-qr-preview > small {
  max-width: 42mm;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.58rem;
  line-height: 1.35;
}

.qr-svg,
.qr-svg svg {
  width: 38mm;
  height: 38mm;
}

.invoice-final-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.invoice-final-totals dt,
.invoice-final-totals dd {
  font-size: 0.75rem;
}

.invoice-final-totals dt span {
  color: var(--muted);
}

.invoice-grand-total {
  margin-top: 6px;
  padding-top: 14px !important;
  border-top: 2px solid var(--ink);
  border-bottom: 0 !important;
}

.invoice-grand-total dt,
.invoice-grand-total dd {
  font-size: 1rem;
  font-weight: 850;
}

.invoice-footer-comment {
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.invoice-footer-comment strong {
  font-size: 0.72rem;
}

.invoice-footer-comment p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.5;
}

.invoice-explanation {
  display: grid;
  gap: 16px;
}

.invoice-explanation h2 {
  margin: 6px 0 0;
  font-size: 1.05rem;
}

.simple-check-list,
.assumption-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.simple-check-list li,
.assumption-list li {
  font-size: 0.75rem;
  line-height: 1.45;
}

.simple-check-list span {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: 6px;
  color: var(--safe);
  background: var(--safe-soft);
  border-radius: 50%;
}

.simple-check-list .is-paused span {
  color: var(--warning);
  background: var(--warning-soft);
}

.network-zero {
  margin: 18px 0 0;
  padding-top: 14px;
  color: var(--muted);
  font-size: 0.72rem;
  border-top: 1px solid var(--line);
}

.invoice-explanation .is-review {
  border-color: var(--warning-borde);
}

.assumption-list {
  padding-left: 18px;
  list-style: disc;
}

.technical-proof summary {
  font-size: 0.78rem;
  font-weight: 760;
  cursor: pointer;
}

.technical-proof p {
  color: var(--muted);
  font-size: 0.7rem;
  line-height: 1.45;
}

.technical-proof code {
  display: block;
  overflow-wrap: anywhere;
  font-size: 0.62rem;
}

@media (max-width: 1080px) {
  .client-list-filters,
  .invoice-list-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .client-search-field,
  .invoice-search-field {
    grid-column: 1 / -1;
  }

  .compact-draft-row {
    grid-template-columns: minmax(190px, 1.5fr) auto minmax(120px, 0.7fr) auto;
  }

  .compact-draft-updated {
    grid-column: 1 / -1;
  }

  .invoice-example-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .final-invoice-layout {
    grid-template-columns: 1fr;
  }

  .lab-scenario-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .app-shell {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-grid,
  .security-grid,
  .planning-grid,
  .draft-actions,
  .preview-issuance-actions {
    grid-template-columns: 1fr;
  }

  .summary-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fiscal-orientation dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .fiscal-facts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .client-list-filters,
  .invoice-list-filters {
    grid-template-columns: 1fr;
    padding: 15px;
  }

  .client-search-field,
  .client-filter-actions,
  .invoice-search-field,
  .invoice-filter-actions {
    grid-column: auto;
  }

  .client-filter-actions,
  .invoice-filter-actions,
  .line-template-applied {
    align-items: stretch;
    flex-direction: column;
  }

  .compact-draft-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .compact-draft-row > .status-pill,
  .compact-draft-amount,
  .compact-draft-updated {
    grid-column: 1;
  }

  .compact-draft-row > .secondary-link {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: center;
  }

  .invoice-history-wrap {
    overflow: visible;
    border: 0;
  }

  .invoice-history-table,
  .invoice-history-table tbody,
  .invoice-history-table tr,
  .invoice-history-table td {
    display: block;
    width: 100%;
  }

  .invoice-history-table thead {
    display: none;
  }

  .invoice-history-table tbody {
    display: grid;
    gap: 9px;
  }

  .invoice-history-table tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 12px;
    padding: 12px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio-s);
  }

  .invoice-history-table td {
    padding: 0;
    border: 0;
  }

  .invoice-history-table td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.62rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .invoice-history-table td:nth-child(3) {
    grid-column: 1 / -1;
  }

  .invoice-history-table th:nth-child(5),
  .invoice-history-table td:nth-child(5) {
    text-align: left;
  }

  .invoice-history-empty {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio-s);
  }

  .line-template-picker-controls {
    grid-template-columns: 1fr;
  }

  .client-table-wrap {
    overflow: visible;
    border: 0;
  }

  .clients-table,
  .clients-table tbody,
  .clients-table tr,
  .clients-table td {
    display: block;
    width: 100%;
  }

  .clients-table thead {
    display: none;
  }

  .clients-table tbody {
    display: grid;
    gap: 10px;
    background: transparent;
  }

  .clients-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio-m);
    box-shadow: var(--shadow);
  }

  .clients-table td,
  .clients-table tbody tr:last-child td {
    min-width: 0;
    padding: 0;
    border-bottom: 0;
  }

  .clients-table td[data-label="Cliente"],
  .clients-table td[data-label="Actividad"],
  .clients-table td[data-label="Acciones"] {
    grid-column: 1 / -1;
  }

  .clients-table td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .concepts-table-wrap {
    overflow: visible;
    border: 0;
  }

  .concepts-table,
  .concepts-table tbody,
  .concepts-table tr,
  .concepts-table td {
    display: block;
    width: 100%;
  }

  .concepts-table thead {
    display: none;
  }

  .concepts-table tbody {
    display: grid;
    gap: 10px;
    background: transparent;
  }

  .concepts-table tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 11px 16px;
    padding: 16px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radio-m);
    box-shadow: var(--shadow);
  }

  .concepts-table tr.is-muted {
    background: var(--papel);
    box-shadow: none;
  }

  .concepts-table tr.is-muted td {
    background: transparent;
  }

  .concepts-table td,
  .concepts-table tbody tr:last-child td {
    min-width: 0;
    padding: 0;
    text-align: left !important;
    border-bottom: 0;
  }

  .concepts-table td[data-label="Nombre"],
  .concepts-table td[data-label="Acciones"] {
    grid-column: 1 / -1;
  }

  .concepts-table td::before {
    display: block;
    margin-bottom: 3px;
    color: var(--muted);
    content: attr(data-label);
    font-size: 0.62rem;
    font-weight: 760;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  .concept-row-actions {
    align-items: center;
    justify-content: flex-start;
    padding-top: 8px !important;
    border-top: 1px solid var(--line) !important;
    white-space: normal;
  }

  .clients-table .client-row-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 8px !important;
    border-top: 1px solid var(--line) !important;
  }

  .invoice-example-grid,
  .final-invoice-header,
  .invoice-parties,
  .invoice-period,
  .invoice-totals-and-qr {
    grid-template-columns: 1fr;
  }

  .invoice-example-card {
    min-height: 0;
  }

  .final-invoice-sheet {
    padding: 22px 18px;
  }

  .invoice-totals-and-qr {
    align-items: start;
  }

  .page-actions {
    justify-content: flex-start;
  }

  .lab-scenario-grid,
  .boundary-grid,
  .detail-list {
    grid-template-columns: 1fr;
  }

  .lab-scenario-card {
    min-height: 0;
  }

  .compact-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-shell {
    display: block;
  }

  .sidebar {
    position: static;
    height: auto;
    padding: 16px;
  }

  .sidebar-heading {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 14px;
  }

  .sidebar > .navigation,
  .sidebar > .sidebar-footer {
    display: none;
  }

  .mobile-nav-disclosure {
    display: block;
  }

  .mobile-nav-disclosure > summary {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 9px 15px;
    color: var(--tinta);
    font-weight: 700;
    background: var(--papel);
    border: 1px solid var(--line);
    border-radius: var(--radio-s);
    box-shadow: 0 1px 2px rgba(27, 24, 32, 0.06);
    cursor: pointer;
    list-style: none;
  }

  .mobile-nav-disclosure > summary::-webkit-details-marker {
    display: none;
  }

  .mobile-nav-panel {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }

  .mobile-nav-panel .navigation {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    overflow: visible;
  }

  .mobile-nav-panel .nav-group {
    display: grid;
    grid-auto-flow: row;
    grid-template-rows: auto;
    gap: 4px;
    padding: 0;
  }

  .mobile-nav-panel .nav-label,
  .mobile-nav-panel .nav-link {
    grid-row: auto;
    grid-column: auto;
  }

  .mobile-nav-panel .nav-link {
    white-space: normal;
  }

  .mobile-nav-panel .nav-link[aria-current="page"] {
    box-shadow: inset 3px 0 0 var(--blue);
  }

  .mobile-nav-panel form {
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }

  .navigation {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 7px;
    margin-top: 16px;
    padding: 2px 0 9px;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .nav-group {
    flex: 0 0 auto;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto 44px;
    gap: 4px;
    padding-right: 8px;
  }

  .nav-label {
    grid-row: 1;
    grid-column: 1 / -1;
    display: block;
    margin: 0 0 3px 4px;
    color: var(--tinta-3);
    font-size: 0.66rem;
  }

  .nav-link {
    grid-row: 2;
    flex: 0 0 auto;
    min-height: 44px;
    padding: 9px 13px;
    white-space: nowrap;
    background: var(--papel);
    border: 1px solid var(--line-soft);
  }

  .nav-link[aria-current="page"] {
    border-color: var(--sello-borde);
    box-shadow: inset 0 -3px 0 var(--sello);
  }

  .sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    padding: 12px 4px 0;
  }

  .sidebar-footer p {
    margin: 0;
  }

  .safety-banner {
    align-items: flex-start;
    padding: 14px 18px;
  }

  .content {
    padding: 32px 18px 56px;
  }

  .page-header {
    display: grid;
  }

  .page-header h1 {
    font-size: 2.15rem;
  }

  .environment-badge {
    justify-self: start;
  }

  .metrics {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .unified-invoice-save {
    grid-template-columns: 1fr;
  }

  .unified-save-action {
    min-width: 0;
    text-align: left;
  }

  .unified-save-action .primary-button {
    width: 100%;
  }

  .metric-card {
    min-height: 128px;
    padding: 17px;
  }

  .metric-card strong {
    font-size: 1.7rem;
  }

  .panel {
    padding: 20px;
  }

  .check-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .status-label {
    grid-column: 2;
  }

  .next-action {
    align-items: stretch;
    flex-direction: column;
    padding: 22px;
  }

  .definition-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .definition-list dd {
    text-align: left;
  }

  .form-grid,
  .choice-grid,
  .invoice-kind-options,
  .fiscal-facts-grid,
  .inline-line-grid,
  .line-discount-grid,
  .payment-action-grid {
    grid-template-columns: 1fr;
  }

  .invoice-line-card-header {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .invoice-line-total {
    grid-column: 2;
  }

  .invoice-line-facts {
    flex-wrap: wrap;
    gap: 8px 18px;
  }

  .invoice-line-card-actions,
  .inline-line-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .line-delete-disclosure > div {
    min-width: 0;
  }

  .fiscal-fact-card > p {
    min-height: 0;
  }

  .fiscal-preview-form {
    grid-template-columns: 1fr;
  }

  .fiscal-preview-form .secondary-button {
    justify-self: start;
  }

  .fiscal-simulation {
    padding: 22px 18px;
  }

  .fiscal-simulation-header {
    flex-direction: column;
  }

  .fiscal-orientation,
  .fiscal-blockers {
    padding: 18px;
  }

  .full-width {
    grid-column: auto;
  }

  .form-actions,
  .record-card,
  .simulation-list > li {
    align-items: stretch;
    flex-direction: column;
  }

  .header-actions,
  .header-status,
  .record-actions,
  .section-heading,
  .document-warning-block,
  .preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  .header-status,
  .record-actions {
    justify-content: flex-start;
  }

  .planning-list li {
    align-items: flex-start;
    flex-direction: column;
  }

  .summary-list,
  .preview-meta,
  .preview-parties {
    grid-template-columns: 1fr;
  }

  .simulation-meta {
    grid-template-columns: 1fr;
  }

  .preview-parties {
    gap: 12px;
  }

  .preview-warning {
    min-width: 0;
    text-align: left;
  }

  .invoice-preview {
    padding: 24px 18px;
    border-radius: var(--radio-m);
  }

  .provisional-totals {
    width: 100%;
  }
}

@media (max-width: 440px) {
  .metrics {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: auto;
  }

  .panel-heading {
    display: grid;
  }

  .content {
    padding-right: 12px;
    padding-left: 12px;
  }

  .panel,
  .record-card,
  .fiscal-fact-card {
    padding: 17px;
  }

  .new-line-composer-body,
  .inline-line-form {
    padding: 14px;
  }

  .invoice-line-card-header {
    gap: 10px;
    padding: 14px;
  }

  .line-order-controls {
    grid-template-columns: 32px;
  }

  .line-order-controls button {
    width: 32px;
    height: 32px;
  }

  .invoice-line-facts,
  .invoice-line-card-actions {
    padding-right: 14px;
    padding-left: 14px;
  }

  .fiscal-fact-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .fiscal-state {
    align-self: flex-start;
  }

  .fiscal-orientation dl {
    grid-template-columns: 1fr;
  }

  .fiscal-simulation-header h2 {
    font-size: 0.94rem;
  }

  .data-table th,
  .data-table td {
    padding: 11px 10px;
  }

  .provisional-totals > div {
    align-items: flex-start;
    gap: 12px;
  }
}

@media print {
  @page {
    margin: 14mm;
  }

  :root,
  html,
  body {
    color: var(--tinta);
    background: var(--papel);
  }

  body {
    min-height: auto;
  }

  .sidebar,
  .safety-banner,
  .no-print,
  .skip-link,
  .page-header,
  .fiscal-boundary-notice,
  .fiscal-preparation-form,
  .fiscal-preview-selector,
  .fiscal-preview-error,
  .notice {
    display: none !important;
  }

  .app-shell,
  .workspace {
    display: block;
    min-height: 0;
  }

  .content {
    max-width: none;
    padding: 0;
  }

  .invoice-preview {
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .fiscal-simulation {
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .fiscal-simulation-watermark {
    position: fixed;
    z-index: 5;
    color: rgba(173, 35, 49, 0.09);
    font-size: 70pt;
  }

  .fiscal-simulation > *:not(.fiscal-simulation-watermark) {
    z-index: 1;
  }

  .invoice-preview::before {
    color: rgba(173, 35, 49, 0.08);
    font-size: 80pt;
  }

  .draft-watermark {
    position: fixed;
    z-index: 5;
    top: 48%;
    left: 50%;
    display: block;
    color: rgba(173, 35, 49, 0.1);
    font-size: 42pt;
    font-weight: 900;
    letter-spacing: 0.04em;
    transform: translate(-50%, -50%) rotate(-27deg);
    pointer-events: none;
    white-space: nowrap;
  }

  .simulation-watermark {
    position: fixed;
    z-index: 5;
    top: 48%;
    left: 50%;
    display: block;
    color: rgba(173, 35, 49, 0.1);
    font-size: 36pt;
    font-weight: 900;
    letter-spacing: 0.04em;
    transform: translate(-50%, -50%) rotate(-27deg);
    pointer-events: none;
    white-space: nowrap;
  }

  .invoice-preview > * {
    z-index: 1;
  }

  .preview-header,
  .preview-parties,
  .preview-meta,
  .preview-lines,
  .preview-totals,
  .preview-notes,
  .preview-footer,
  .simulation-rectification,
  .simulation-trace,
  .fiscal-simulation-header,
  .fiscal-orientation,
  .fiscal-blockers li,
  .fiscal-simulation-footer,
  .data-table tr {
    break-inside: avoid;
  }

  .table-wrap {
    overflow: visible;
  }

  .preview-warning,
  .preview-footer,
  .preview-party,
  .preview-meta > div,
  .data-table th {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .fiscal-review-state,
  .fiscal-orientation,
  .fiscal-blockers li,
  .fiscal-simulation-footer {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ── Talonario · tipografía ──────────────────────────────────────
   Los titulares y las cifras grandes usan la display; el resto,
   la de interfaz declarada en :root. */
h1,
h2,
h3,
.page-header h1,
.page-header h2,
.summary-value,
.metric-value,
.total-value {
  font-family: var(--display);
  letter-spacing: -0.025em;
}

h1 {
  font-weight: 800;
}

h2,
h3 {
  font-weight: 700;
}

/* ── Talonario · correcciones de cascada ─────────────────────────
   `.data-table td > span` convierte en bloque todo lo que cuelga de
   una celda, y eso estiraba los marbetes a lo ancho de la columna. */
.data-table td > .status-pill,
.data-table td > .badge,
.data-table td > .pill {
  display: inline-flex;
  width: auto;
}

/* Los botones de acción no parten su texto en dos líneas */
.primary-button,
.secondary-button,
.ghost-button,
.page-header .primary-button {
  white-space: nowrap;
}

/* ── Talonario · los filtros se reparten en vez de desbordar ─────
   Las rejillas de filtros pedían un ancho mínimo mayor que el hueco
   disponible en ventanas medianas y se salían del panel. */
.client-list-filters,
.invoice-list-filters {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}


/* ══════════════════════════════════════════════════════════════
   Talonario · acabado
   Los controles responden al tacto y las filas se mueven como
   hojas de papel. Todo se desactiva si el sistema pide menos
   movimiento.
   ══════════════════════════════════════════════════════════════ */

/* Controles: se hunden al pulsar, como una tecla de verdad */
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.text-button {
  transition:
    transform 0.16s var(--salida),
    box-shadow 0.16s var(--salida),
    background 0.18s,
    color 0.18s,
    border-color 0.18s,
    filter 0.18s;
}

.primary-button {
  box-shadow:
    0 1px 2px rgba(27, 24, 32, 0.14),
    0 6px 14px -8px var(--sello);
}

.primary-button:hover {
  filter: brightness(1.06);
  box-shadow:
    0 2px 4px rgba(27, 24, 32, 0.16),
    0 10px 20px -8px var(--sello);
}

.primary-button:active,
.secondary-button:active,
.danger-button:active,
.ghost-button:active {
  transform: translateY(1.5px) scale(0.985);
}

.primary-button:disabled,
.secondary-button:disabled {
  transform: none;
  box-shadow: none;
}

/* Campos: anillo de tinta al enfocar, en vez de un contorno duro */
/* Estado final de los campos: el hueco se ilumina al escribir dentro. Este
   bloque cierra el estilo, así que aquí van fondo, borde y anillo juntos. */
.field input,
.field select,
.field textarea {
  transition:
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}

.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: var(--line);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  background: var(--papel);
  border-color: var(--sello);
  box-shadow: 0 0 0 3.5px var(--sello-piel);
}

.field [aria-invalid="true"] {
  border-color: var(--danger-borde);
  background: var(--danger-soft);
}

.field [aria-invalid="true"]:focus {
  border-color: var(--danger);
  background: var(--danger-soft);
  box-shadow: 0 0 0 3.5px var(--danger-soft);
}

/* Filas: al pasar por encima se desplazan como una hoja suelta
   y asoma el filo de tinta por la izquierda */
.data-table tbody tr,
.clients-table tbody tr,
.concepts-table tbody tr,
.collection-table tbody tr,
.compact-draft-row,
.dashboard-draft-list li {
  transition:
    background 0.22s,
    transform 0.3s var(--salida),
    box-shadow 0.3s var(--salida);
}

.data-table tbody tr:hover,
.clients-table tbody tr:hover,
.concepts-table tbody tr:hover,
.collection-table tbody tr:hover,
.compact-draft-row:hover,
.dashboard-draft-list li:hover {
  background: var(--papel-2);
  transform: translateX(3px);
  box-shadow: -3px 0 0 var(--sello);
}

/* Tarjetas que representan algo con lo que se puede actuar */
.metric-card,
.choice-card,
.invoice-example-card,
.fiscal-fact-card,
.record-card,
.payment-profile-selection-card {
  transition:
    transform 0.3s var(--salida),
    box-shadow 0.3s var(--salida),
    border-color 0.3s;
}

.metric-card:hover,
.invoice-example-card:hover,
.fiscal-fact-card:hover,
.record-card:hover {
  transform: translateY(-3px) rotate(-0.2deg);
  box-shadow: var(--shadow);
  border-color: var(--line);
}

/* El perforado del talonario, como separador del pie */
.sidebar-footer {
  border-top: 0;
  padding-top: 22px;
  background-image: radial-gradient(
    circle at 6px 6px,
    var(--line) 2px,
    transparent 2.4px
  );
  background-size: 14px 12px;
  background-repeat: repeat-x;
}

/* El contenido entra en lugar de aparecer de golpe */
.content > * {
  animation: talonario-entra 0.42s var(--salida) backwards;
}

@keyframes talonario-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ══════════════════════════════════════════════════════════════
   Talonario · composición nueva
   Piezas del prototipo, con prefijo t- para no mezclarse con los
   componentes heredados mientras se migran las pantallas.
   ══════════════════════════════════════════════════════════════ */

.t-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.page-header h1,
.t-cabecera h1 {
  font-size: 2.1rem;
  line-height: 1.05;
  margin: 4px 0 8px;
}

.page-header > div > p,
.t-cabecera p {
  max-width: 62ch;
  margin: 0;
  color: var(--tinta-2);
}

.t-cabecera .primary-button {
  flex: none;
}

/* Panel: la superficie que agrupa una lista o un formulario */
.t-panel {
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
  overflow: hidden;
  margin-bottom: 20px;
}

.t-panel-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 17px 18px 13px;
}

.t-panel-cabecera h2 {
  font-size: 1.05rem;
  margin: 0;
}

.t-panel-cabecera p {
  margin: 3px 0 0;
  font-size: 0.86rem;
  color: var(--tinta-3);
}

.t-contador {
  flex: none;
  font-size: 0.78rem;
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

.t-plegable > summary {
  display: flex;
  justify-content: space-between;
  padding: 15px 18px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Lista de hojas: cada fila se desplaza como un papel suelto */
.t-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.t-fila + .t-fila {
  border-top: 1px solid var(--line-soft);
}

.t-fila-enlace {
  display: grid;
  /* Columnas fijas: cada fila es su propia rejilla, así que sin anchos
     explícitos el marbete se movía según lo largo que fuera el importe. */
  grid-template-columns: minmax(0, 1fr) 116px 132px 84px;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  transition:
    background 0.22s,
    transform 0.3s var(--salida),
    box-shadow 0.3s var(--salida);
}

/* Filas de dos columnas (el panel de pendientes del inicio): sin marbete
   ni importe, el nombre se queda con todo el ancho disponible. */
.t-fila-enlace.es-compacta {
  grid-template-columns: minmax(0, 1fr) auto;
}

.t-fila-enlace:hover {
  background: var(--papel-2);
  transform: translateX(4px);
  box-shadow: -3px 0 0 var(--sello);
}

.t-fila-enlace:focus-visible {
  outline: none;
  background: var(--papel-2);
  box-shadow: inset 0 0 0 2px var(--sello);
}

.t-fila-quien {
  min-width: 0;
}

.t-fila-quien strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
}

.t-fila-quien small {
  display: block;
  margin-top: 2px;
  font-size: 0.79rem;
  color: var(--tinta-3);
}

.t-fila-importe {
  font-size: 0.98rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

.t-fila-accion {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--sello);
  white-space: nowrap;
  text-align: right;
}

.t-marbete {
  flex: none;
  justify-self: start;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--sello-piel);
  color: var(--sello);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.t-marbete.es-neutro {
  background: var(--papel-2);
  color: var(--tinta-2);
}

/* Buscador y filtros: una barra, no un formulario con recuadro */
.t-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  padding: 0 18px 16px;
}

.t-buscador {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 40px;
  padding: 0 13px;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-s);
  transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.t-buscador:focus-within {
  background: var(--papel);
  border-color: var(--sello);
  box-shadow: 0 0 0 3.5px var(--sello-piel);
}

.t-buscador svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--tinta-3);
}

.t-buscador input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--tinta);
  font-size: 0.9rem;
}

/* Todos los controles de la barra miden lo mismo; el buscador es el que
   se estira. Sin esto, cada desplegable se ajustaba a su opción más larga
   y la fila quedaba descompensada. */
.t-filtro {
  flex: 0 1 158px;
  min-width: 0;
}

.t-filtro.is-busqueda {
  flex: 1 1 230px;
}

.t-filtro label {
  display: block;
  margin-bottom: 4px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.t-filtro select {
  width: 100%;
  height: 40px;
  padding: 0 30px 0 11px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
  font-size: 0.88rem;
  transition: border-color 0.18s, box-shadow 0.18s;
}

.t-filtro select:hover {
  border-color: var(--tinta-3);
}

.t-filtro select:focus {
  outline: none;
  border-color: var(--sello);
  box-shadow: 0 0 0 3.5px var(--sello-piel);
}

.t-filtros-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
}

.t-filtros-acciones .primary-button {
  height: 40px;
}

.t-enlace-suave {
  color: var(--tinta-2);
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.t-filtros-nota {
  flex: 1 1 100%;
  margin: 0;
  font-size: 0.78rem;
  color: var(--tinta-3);
}

/* Estado vacío: el talonario entero */
.t-vacio {
  padding: 44px 24px 48px;
  text-align: center;
  border-top: 1px solid var(--line-soft);
}

.t-vacio-marca {
  width: 40px;
  height: 40px;
  color: var(--sello);
  margin-bottom: 12px;
}

.t-vacio strong {
  display: block;
  font-family: var(--display);
  font-size: 1.1rem;
  letter-spacing: -0.02em;
}

.t-vacio p {
  max-width: 46ch;
  margin: 6px auto 0;
  font-size: 0.9rem;
  color: var(--tinta-3);
}

.t-vacio-linea {
  margin: 0;
  padding: 22px 18px 26px;
  color: var(--tinta-3);
  font-size: 0.9rem;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 720px) {
  .t-cabecera {
    flex-direction: column;
    align-items: stretch;
  }

  .t-cabecera .primary-button {
    width: 100%;
    justify-content: center;
  }

  .t-fila-enlace {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "quien quien"
      "marbete importe";
    gap: 6px 12px;
  }

  .t-fila-enlace:hover {
    transform: none;
  }

  .t-fila-enlace > .t-fila-quien {
    grid-area: quien;
  }

  .t-fila-enlace > .t-marbete {
    grid-area: marbete;
    justify-self: start;
  }

  .t-fila-enlace > .t-fila-importe {
    grid-area: importe;
    justify-self: end;
  }

  .t-fila-enlace > .t-fila-accion {
    display: none;
  }

  .t-filtros {
    flex-direction: column;
    align-items: stretch;
  }

  /* En columna, la base flexible sería altura: hay que devolverla a auto
     o cada filtro reservaría 158 píxeles de alto. */
  .t-filtro,
  .t-filtro.is-busqueda {
    flex: 0 0 auto;
  }

  .t-filtro select {
    max-width: none;
    width: 100%;
  }

  .t-filtros-acciones .primary-button {
    flex: 1;
    justify-content: center;
  }
}


/* Indicadores del resumen: la cifra manda */
.t-indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.t-indicador {
  padding: 16px 17px 18px;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
  transition:
    transform 0.3s var(--salida),
    box-shadow 0.3s var(--salida),
    border-color 0.3s;
}

.t-indicador:hover {
  transform: translateY(-3px) rotate(-0.2deg);
  border-color: var(--line);
}

.t-indicador-rotulo {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.t-indicador-cifra {
  display: block;
  margin: 8px 0 3px;
  font-family: var(--display);
  font-size: 1.72rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.t-indicador-pie {
  display: block;
  font-size: 0.78rem;
  color: var(--tinta-3);
}

.t-dos-columnas {
  display: block;
}

.t-grafico {
  position: relative;
  padding: 36px 18px 4px;
}

.t-demo-etiqueta {
  margin: 0 18px 16px;
  color: var(--sello);
  font-size: 0.8rem;
  font-weight: 600;
}

.t-demo-barras {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}

.t-demo-mes {
  min-width: 0;
  text-align: center;
  color: var(--tinta-3);
  font-size: 0.66rem;
}

.t-demo-mes svg {
  display: block;
  width: 100%;
  height: 160px;
  margin-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
  background: repeating-linear-gradient(to top, transparent 0, transparent 39px, var(--line-soft) 39px, var(--line-soft) 40px);
  fill: var(--sello);
}

.t-demo-importes {
  padding: 0 18px 18px;
  font-size: 0.84rem;
}

.t-demo-importes summary {
  cursor: pointer;
  color: var(--tinta-2);
}

.t-demo-importes dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 14px;
  margin-bottom: 0;
}

.t-demo-importes dd {
  margin: 4px 0 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

@media (max-width: 460px) {
  .t-demo-barras { gap: 2px; }
  .t-demo-mes { font-size: 0.58rem; }
}

.t-nota-panel {
  margin: 0;
  padding: 12px 18px 18px;
  font-size: 0.84rem;
  color: var(--tinta-3);
}

@media (max-width: 720px) {
  .t-indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .t-indicador-cifra {
    font-size: 1.35rem;
  }
}


/* Fichas: para lo que se mira de un vistazo, no se compara en columnas */
.t-fichas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.t-ficha {
  display: flex;
  flex-direction: column;
  padding: 18px;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
  transition:
    transform 0.3s var(--salida),
    box-shadow 0.3s var(--salida),
    border-color 0.3s;
}

.t-ficha:hover {
  transform: translateY(-3px) rotate(-0.2deg);
  border-color: var(--line);
}

.t-ficha-cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.t-ficha-cabeza h3 {
  font-family: var(--ui);
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0;
}

.t-ficha-nif {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--tinta-3);
}

.t-ficha-alias {
  margin: 3px 0 0;
  font-size: 0.78rem;
  color: var(--tinta-3);
}

.t-ficha-cuentas {
  display: flex;
  gap: 22px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px dashed var(--line-soft);
}

.t-ficha-cuentas span {
  display: block;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.t-ficha-cuentas b.es-vacio {
  font-weight: 500;
  color: var(--tinta-3);
}

.t-ficha-cuentas b {
  font-size: 0.92rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.t-ficha-acciones {
  display: flex;
  gap: 16px;
  /* Pegadas al fondo para que las fichas de distinta altura
     alineen sus acciones en la misma línea. */
  margin-top: auto;
  padding-top: 14px;
}

.t-enlace-accion {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sello);
  text-decoration: none;
  transition: text-decoration-color 0.18s;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.t-enlace-accion:hover {
  text-decoration-color: currentColor;
}

.t-marbete.es-completo {
  background: var(--safe-soft);
  color: var(--safe);
}

.t-marbete.es-pendiente {
  background: var(--warning-soft);
  color: var(--warning);
}

.t-subcabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 24px 0 12px;
}

.t-subcabecera h2 {
  font-size: 1.05rem;
  margin: 0;
}

@media (max-width: 900px) {
  .t-fichas {
    grid-template-columns: 1fr;
  }
}


/* Filas anchas con controles al final (conceptos) */
.t-fila-ancha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 116px 132px 194px;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  transition: background 0.22s;
}

/* En pantallas medias las columnas fijas se aprietan para que el nombre
   del concepto o del cliente no se parta en dos líneas antes de tiempo. */
@media (max-width: 1180px) {
  @media (min-width: 721px) {
    .t-fila-enlace {
      grid-template-columns: minmax(0, 1fr) 102px 118px 78px;
      gap: 12px;
    }
  }

  .t-fila-enlace.es-compacta {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .t-fila-ancha {
    grid-template-columns: minmax(0, 1fr) 102px 118px 194px;
    gap: 12px;
  }

  .t-fila-cliente {
    grid-template-columns: minmax(0, 1fr) 164px 128px 178px;
  }
}

.t-fila-ancha:hover {
  background: var(--papel-2);
}

.t-fila-ancha.es-apagada {
  color: var(--tinta-3);
}

/* Clientes: el marbete de estado necesita más sitio que un importe, así que
   la fila reparte sus columnas fijas de otra manera. */
.t-fila-cliente {
  grid-template-columns: minmax(0, 1fr) 176px 138px 186px;
}

.t-enlace-fila {
  color: inherit;
  text-decoration: none;
}

.t-enlace-fila:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.t-fila-actividad {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-align: right;
}

.t-fila-actividad b {
  font-size: 0.86rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.t-fila-actividad b.es-vacio {
  font-weight: 500;
  color: var(--tinta-3);
}

.t-fila-actividad small {
  margin-top: 2px;
  color: var(--tinta-3);
  font-size: 0.72rem;
  white-space: nowrap;
}

.t-fila-controles {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  white-space: nowrap;
}

/* Enlaces y botones de la misma fila se ven igual: el subrayado permanente
   de unos y no de otros los descolocaba y no significaba nada. */
.t-fila-controles > * {
  display: inline-flex;
  align-items: center;
  min-height: 0;
}

.t-fila-controles .concept-delete-menu {
  min-height: 0;
}

.t-fila-controles .secondary-link,
.t-fila-controles .text-action {
  min-height: 0;
  display: inline-flex;
  align-items: center;
  color: var(--sello);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.18s;
}

.t-fila-controles .secondary-link:hover,
.t-fila-controles .text-action:hover {
  text-decoration-color: currentColor;
}

/* El formulario que envuelve un botón de la fila no debe alterar su
   alineación: en línea, el botón se colocaba un píxel por debajo del resto. */
.t-fila-controles form {
  display: inline-flex;
  align-items: center;
}

/* Series: el próximo número, en grande */
.t-serie-numero {
  margin: 4px 0 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.t-serie-nota {
  margin: 14px 0 0;
  font-size: 0.82rem;
  color: var(--tinta-3);
}

@media (max-width: 720px) {
  .t-fila-ancha {
    grid-template-columns: 1fr auto;
    gap: 8px 12px;
  }

  .t-fila-ancha .t-fila-quien {
    grid-column: 1 / -1;
  }

  .t-fila-controles {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .t-fila-cliente {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
  }

  .t-fila-cliente > .t-fila-quien {
    grid-column: 1 / -1;
  }

  .t-fila-cliente > .t-marbete {
    justify-self: start;
  }

  .t-fila-actividad {
    justify-self: end;
    text-align: right;
  }
}


/* ── El talón: matriz arriba, perforado y la hoja colgando ────── */
.t-bloc {
  margin-bottom: 22px;
}

.t-matriz {
  position: relative;
  padding: 18px 20px 20px;
  background: var(--papel-2);
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: var(--radio-m) var(--radio-m) 0 0;
}

.t-matriz-rotulo {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tinta-3);
}

.t-matriz-grabado {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.t-matriz-numero {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinta-3);
}

.t-matriz-pie {
  font-size: 0.84rem;
  color: var(--tinta-3);
}

/* La línea troquelada que separa la matriz de la hoja */
.t-perforado {
  height: 13px;
  background-color: var(--papel-2);
  background-image: radial-gradient(
    circle at 7px 6.5px,
    var(--carpeta) 3.2px,
    transparent 3.6px
  );
  background-size: 15px 13px;
  background-repeat: repeat-x;
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
}

/* La hoja pierde su esquina superior para colgar de la matriz */
.t-bloc .invoice-preview {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

@media (max-width: 720px) {
  .t-matriz {
    padding: 15px 16px 17px;
  }

  .t-matriz-numero {
    font-size: 1.4rem;
  }
}

@media print {
  .t-matriz,
  .t-perforado {
    display: none;
  }
}

/* ── Talonario en oscuro ─────────────────────────────────────────
   Mismos nombres, otros valores: el papel se vuelve tinta y el sello
   se aclara para seguir destacando sobre fondo oscuro. Se activa con
   la preferencia del sistema; no hay interruptor en la aplicación. */
@media (prefers-color-scheme: dark) {
  
  :root:not([data-theme="light"]) {
    --papel: #1e1b26;
    --papel-2: #262231;
    --carpeta: #131118;
    --tinta: #efebf5;
    --tinta-2: #b3abc2;
    --tinta-3: #9a92ab;
    --sello: #c9a5f2;
    --sello-oscuro: #d9bff7;
    --sello-piel: #2e2340;
    --sello-borde: #4a3663;
    --sobre-sello: #17121f;
    --rosa: #7a4557;
    --amarillo: #6e6338;

    --ink: var(--tinta);
    --muted: var(--tinta-2);
    --line: #3a3348;
    --line-soft: #2c2637;
    --canvas: var(--carpeta);
    --surface: var(--papel);
    --blue: var(--sello);
    --blue-dark: var(--sello-oscuro);
    --blue-soft: var(--sello-piel);
    --navy: var(--papel-2);
    --safe: #6fd6a8;
    --safe-soft: #16342a;
    --safe-borde: #2c6b52;
    --warning: #eeb072;
    --warning-soft: #3a2a18;
    --warning-borde: #6b4a24;
    --danger: #f09b95;
    --danger-soft: #3a1f1e;
    --danger-borde: #6d3a37;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
    --shadow-alta: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.85);
  }

  

  /* Las sombras claras no se ven sobre fondo oscuro: se sustituyen por
     el borde que ya llevan los paneles. */
  :root:not([data-theme="light"]) .card,
  :root:not([data-theme="light"]) .panel,
  :root:not([data-theme="light"]) .metric-card {
    box-shadow: none;
  }
}

/* Espejo del bloque anterior para el tema forzado a mano.
   Si tocas uno, toca el otro. */
:root[data-theme="dark"] {
    --papel: #1e1b26;
    --papel-2: #262231;
    --carpeta: #131118;
    --tinta: #efebf5;
    --tinta-2: #b3abc2;
    --tinta-3: #9a92ab;
    --sello: #c9a5f2;
    --sello-oscuro: #d9bff7;
    --sello-piel: #2e2340;
    --sello-borde: #4a3663;
    --sobre-sello: #17121f;
    --rosa: #7a4557;
    --amarillo: #6e6338;

    --ink: var(--tinta);
    --muted: var(--tinta-2);
    --line: #3a3348;
    --line-soft: #2c2637;
    --canvas: var(--carpeta);
    --surface: var(--papel);
    --blue: var(--sello);
    --blue-dark: var(--sello-oscuro);
    --blue-soft: var(--sello-piel);
    --navy: var(--papel-2);
    --safe: #6fd6a8;
    --safe-soft: #16342a;
    --safe-borde: #2c6b52;
    --warning: #eeb072;
    --warning-soft: #3a2a18;
    --warning-borde: #6b4a24;
    --danger: #f09b95;
    --danger-soft: #3a1f1e;
    --danger-borde: #6d3a37;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -12px rgba(0, 0, 0, 0.7);
    --shadow-alta: 0 2px 4px rgba(0, 0, 0, 0.5), 0 24px 48px -20px rgba(0, 0, 0, 0.85);
  }

  /* Las sombras claras no se ven sobre fondo oscuro: se sustituyen por
     el borde que ya llevan los paneles. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .metric-card {
    box-shadow: none;
  }


/* ══ Editores reconstruidos ══════════════════════════════════════
   Mesa de trabajo de la factura, fichas de cliente y concepto.
   Todo el color sale de los tokens, así que el modo oscuro ya
   definido más arriba se aplica sin reglas propias. */

/* El atributo hidden tiene que ganar a cualquier display de clase, o un
   panel oculto seguiría dibujándose por ser flex o grid. */
[hidden] {
  display: none !important;
}

/* ── Rejillas de formulario ─────────────────────────────────── */

.t-columna-estrecha {
  max-width: 640px;
}

.t-cabecera.es-estrecha {
  max-width: 640px;
}

.t-formulario {
  display: flex;
  flex-direction: column;
}

.t-formulario-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px 20px;
}

.t-campo-par {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Cada campo con su altura natural: si uno lleva una pista debajo, el de
     al lado estiraba su caja de texto para igualar la fila. */
  align-items: start;
  gap: 14px;
}

.t-campo-ancho > .field,
.t-campo > .field {
  margin: 0;
}

.t-campo label,
.t-formulario .field label {
  display: block;
  margin-bottom: 5px;
  color: var(--tinta-2);
  font-size: 0.79rem;
  font-weight: 600;
}

.t-campo textarea,
.t-formulario .field input,
.t-formulario .field select,
.t-formulario .field textarea {
  width: 100%;
}

.t-campo textarea {
  padding: 9px 11px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
  font-family: var(--ui);
  font-size: 0.9rem;
  resize: vertical;
}

.t-campo textarea:focus {
  outline: none;
  border-color: var(--sello);
  box-shadow: 0 0 0 3.5px var(--sello-piel);
}

/* El tipo de factura, junto al titular: es lo primero que hay que saber
   antes de tocar nada, porque decide qué campos son obligatorios. */
.t-tipo-factura {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
  color: var(--tinta-2);
  font-size: 0.9rem;
}

/* Sin esto el texto largo empujaba el marbete a su propia línea y las dos
   cabeceras no se parecían entre sí. */
.t-tipo-factura > span:last-child {
  min-width: 0;
}

.t-subbloque {
  margin: 4px 0 0;
  padding: 14px 15px 15px;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-s);
}

.t-subbloque-titulo {
  margin: 0 0 6px;
  color: var(--tinta-2);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.t-subbloque > .field-hint {
  display: block;
  margin: 0 0 12px;
}

.t-subbloque .t-campo-par + .t-campo-ancho {
  margin-top: 12px;
}

.t-campo-rotulo {
  margin: 6px 0 0;
  color: var(--tinta-3);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.t-subrayado {
  padding-top: 10px;
  border-top: 1px dashed var(--line-soft);
}

.t-formulario-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line-soft);
}

.t-nota-privacidad {
  margin: 12px 4px 0;
  color: var(--tinta-3);
  font-size: 0.8rem;
}

/* ── Vista previa de un concepto ────────────────────────────── */

.t-vista-linea {
  padding: 14px 20px 16px;
  background: var(--papel-2);
  border-top: 1px dashed var(--line);
}

.t-vista-linea-rotulo {
  display: block;
  margin-bottom: 8px;
  color: var(--tinta-3);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.t-vista-linea-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 13px;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-s);
  font-size: 0.9rem;
}

.t-vista-linea-fila b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Ficha de cliente a dos columnas ────────────────────────── */

.t-mesa-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 16px;
}

.t-mesa-form .t-panel-ancho {
  grid-column: 1 / -1;
}

.t-mesa-form .t-panel-cabecera p {
  margin: 4px 0 0;
  color: var(--tinta-3);
  font-size: 0.82rem;
}

.t-barra-form {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-m);
}

.t-estado-ficha {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.85rem;
}

.t-barra-form-acciones {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* ── Mesa de trabajo de la factura ──────────────────────────── */

.t-mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 282px;
  align-items: start;
  gap: 18px;
}

.t-mesa-principal {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.t-mesa-lateral {
  position: sticky;
  top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.t-mesa-principal > .panel,
.t-mesa-principal > .t-panel {
  margin: 0;
}

/* ── Tabla editable de conceptos ────────────────────────────── */

.t-lineas {
  padding: 8px 10px 12px;
}

.t-lineas-cabeza,
.t-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 70px 96px 100px 84px;
  align-items: center;
  gap: 4px;
}

.t-lineas-cabeza {
  padding: 0 10px 8px;
  border-bottom: 1px solid var(--line);
}

.t-lineas-cabeza span {
  color: var(--tinta-3);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.t-lineas-cabeza .es-der {
  text-align: right;
}

.t-linea {
  padding: 5px 4px;
  border-bottom: 1px dashed var(--line-soft);
  transition: background 0.2s;
}

.t-linea:hover {
  background: var(--papel-2);
}

.t-linea.es-nueva {
  border-bottom: 0;
}

.t-lineas-vacio {
  margin: 0;
  padding: 20px 10px 16px;
  color: var(--tinta-3);
  font-size: 0.88rem;
}

.t-celda-caja {
  min-width: 0;
}

.t-celda {
  width: 100%;
  min-width: 0;
  padding: 8px 9px;
  color: var(--tinta);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 7px;
  font-family: var(--ui);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
}

.t-celda::placeholder {
  color: var(--tinta-3);
}

.t-celda:hover {
  border-color: var(--line);
}

.t-celda:focus {
  outline: none;
  background: var(--papel);
  border-color: var(--sello);
  box-shadow: 0 0 0 3.5px var(--sello-piel);
}

.t-celda.es-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.t-celda.es-mono {
  font-family: var(--mono);
}

.t-linea-importe {
  padding-right: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.t-linea-texto,
.t-linea-numero {
  padding: 8px 9px;
  font-size: 0.88rem;
}

.t-linea-numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.t-linea-controles {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}

.t-linea-boton {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--tinta-2);
  background: var(--papel);
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.2s var(--salida);
}

.t-linea-boton svg {
  width: 14px;
  height: 14px;
}

.t-linea:hover .t-linea-boton,
.t-linea:focus-within .t-linea-boton {
  border-color: var(--line-soft);
}

.t-linea-boton:hover:not(:disabled) {
  color: var(--tinta);
  border-color: var(--line);
  transform: scale(1.08);
}

.t-linea-boton.es-quitar:hover:not(:disabled) {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger-borde);
}

.t-linea-boton.es-anadir {
  color: var(--sobre-sello);
  background: var(--sello);
  border-color: var(--sello);
}

.t-linea-boton.es-anadir:hover {
  color: var(--sobre-sello);
  background: var(--sello-oscuro);
  border-color: var(--sello-oscuro);
}

.t-linea-boton:active:not(:disabled) {
  transform: scale(0.94);
}

.t-linea-boton:disabled {
  opacity: 0.35;
  cursor: default;
}

.t-linea-boton:focus-visible {
  outline: none;
  border-color: var(--sello);
  box-shadow: 0 0 0 3px var(--sello-piel);
}

.t-linea-guardar {
  grid-column: 1 / -1;
  justify-self: end;
  margin: 4px 6px 6px;
}

.t-lineas-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 12px 10px 2px;
  border-top: 1px solid var(--line-soft);
}

.t-traer-concepto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  /* Sin flex-wrap el botón se salía del panel en ventanas estrechas. */
  flex: 1 1 260px;
}

.t-traer-concepto select {
  flex: 1 1 190px;
  min-width: 0;
  max-width: 320px;
  height: 36px;
  padding: 0 28px 0 10px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
  font-size: 0.85rem;
}

.t-traer-concepto select:focus {
  outline: none;
  border-color: var(--sello);
  box-shadow: 0 0 0 3.5px var(--sello-piel);
}

/* ── Crear un cliente sin salir de la factura ───────────────── */

.t-cliente-nuevo {
  margin-top: 4px;
  border: 1px dashed var(--line);
  border-radius: var(--radio-s);
}

.t-cliente-nuevo > summary {
  padding: 11px 14px;
  color: var(--sello);
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.t-cliente-nuevo > summary::-webkit-details-marker {
  display: none;
}

.t-cliente-nuevo > summary::before {
  content: "+ ";
}

.t-cliente-nuevo[open] > summary {
  border-bottom: 1px dashed var(--line);
}

.t-cliente-nuevo[open] > summary::before {
  content: "− ";
}

.t-cliente-nuevo-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
}

/* ── Cajones del lateral ────────────────────────────────────── */

.t-cajon {
  padding: 16px 17px 17px;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-m);
}

.t-cajon h3 {
  margin: 0 0 10px;
  font-size: 0.9rem;
  font-weight: 600;
}

.t-fila-dato {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 0.85rem;
}

.t-fila-dato:last-of-type {
  border-bottom: 0;
}

.t-fila-dato > span:first-child {
  color: var(--tinta-3);
}

.t-fila-dato > span:last-child {
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.t-dato-pendiente {
  color: var(--tinta-3);
  font-size: 0.79rem;
}

.t-gran-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 11px;
  border-top: 2px solid var(--tinta);
}

.t-gran-total > span {
  color: var(--tinta-3);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.t-gran-total b {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.t-cajon-acciones {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.t-cajon-acciones .primary-button,
.t-cajon-acciones .secondary-button {
  width: 100%;
  justify-content: center;
}

.t-cajon-nota {
  margin: 12px 0 0;
  color: var(--tinta-3);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* Nota del caso fiscal orientativo y control para cuadrar la base a un
   cobro pactado con impuestos incluidos. Mismos tonos del cajon. */
.t-cajon-nota.es-orientacion {
  margin-top: 9px;
  padding-top: 8px;
  border-top: 1px dashed var(--line);
}

.t-cuadrar {
  margin: 16px 0 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-soft);
}

.t-cuadrar label {
  display: block;
  margin-bottom: 6px;
  color: var(--tinta-2);
  font-family: var(--ui);
  font-size: 0.79rem;
  font-weight: 600;
  line-height: 1.4;
}

.t-cuadrar [data-target-controls]:not([hidden]) {
  display: grid;
  margin-top: 14px;
}

.t-cuadrar select,
.t-cuadrar input[data-target-payable] {
  min-width: 0;
  font-family: var(--ui);
  font-size: 0.88rem;
  line-height: 1.4;
}

.t-cuadrar input[data-target-payable] {
  font-variant-numeric: tabular-nums;
}

.t-cuadrar [data-calculation-status] {
  margin: 12px 0 0;
  color: var(--tinta-2);
  font-size: 0.78rem;
  line-height: 1.5;
}

.t-cuadrar [data-calculation-status]:empty {
  display: none;
}

.t-cuadrar [data-calculation-status] .secondary-button {
  margin-top: 8px;
}

.t-cuadrar-fila {
  display: flex;
  gap: 8px;
}

.t-cuadrar-fila input {
  flex: 1 1 90px;
  min-width: 0;
  text-align: right;
}

.t-cuadrar-fila .secondary-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.t-cuadrar .field-hint {
  margin: 8px 0 0;
}

.t-cuadrar-estado {
  margin: 8px 0 0;
  color: var(--tinta-2);
  font-size: 0.78rem;
  line-height: 1.45;
  font-weight: 600;
}

.t-cajon-titular {
  margin-bottom: 10px;
}

.t-cajon-faltas {
  margin-top: 12px;
  padding: 11px 13px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-borde);
  border-radius: var(--radio-s);
}

.t-cajon-faltas strong {
  display: block;
  margin-bottom: 5px;
  color: var(--warning);
  font-size: 0.79rem;
}

.t-cajon-faltas ul {
  margin: 0;
  padding-left: 17px;
  color: var(--tinta-2);
  font-size: 0.8rem;
}

.t-cajon-faltas li + li {
  margin-top: 3px;
}

.t-cajon-tecnico {
  margin-top: 12px;
}

.t-cajon-tecnico > summary {
  color: var(--tinta-3);
  font-size: 0.78rem;
  cursor: pointer;
}

.t-cajon.es-acciones > summary {
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.t-cajon.es-acciones > summary::-webkit-details-marker {
  display: none;
}

.t-cajon.es-acciones > summary::after {
  content: " ›";
  color: var(--tinta-3);
}

.t-cajon-cuerpo {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-soft);
}

.t-cajon-cuerpo .secondary-button,
.t-cajon-cuerpo .danger-button {
  width: 100%;
  justify-content: center;
}

.unified-save-status:empty {
  display: none;
}

.t-mesa-lateral .unified-save-status {
  margin: 12px 0 0;
  color: var(--danger);
  font-size: 0.79rem;
}

/* ── Adaptación a pantallas medias y móvil ──────────────────── */

@media (max-width: 1180px) {
  .t-mesa {
    grid-template-columns: minmax(0, 1fr);
  }

  .t-mesa-lateral {
    position: static;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .t-mesa-lateral .es-cuentas {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .t-mesa-form,
  .t-mesa-lateral {
    grid-template-columns: minmax(0, 1fr);
  }

  .t-mesa-form {
    display: grid;
  }
}

@media (max-width: 720px) {
  .t-campo-par {
    grid-template-columns: minmax(0, 1fr);
  }

  .t-lineas-cabeza {
    display: none;
  }

  .t-linea {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 12px 6px;
  }

  .t-linea > .es-texto {
    grid-column: 1 / -1;
  }

  .t-linea > .es-texto .t-celda {
    border-color: var(--line-soft);
  }

  /* En columna estrecha cada dato se presenta con su rótulo: sin la
     cabecera de la tabla no se sabría qué es cada número. */
  .t-celda-caja[data-rotulo]::before,
  .t-linea-numero[data-rotulo]::before,
  .t-linea-importe[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: 2px;
    color: var(--tinta-3);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  .t-celda.es-numero,
  .t-linea-numero {
    text-align: left;
  }

  .t-linea-importe {
    text-align: left;
    padding-right: 0;
  }

  .t-linea-controles {
    grid-column: 1 / -1;
    justify-self: end;
  }

  .t-barra-form-acciones {
    width: 100%;
    justify-content: space-between;
    margin-left: 0;
  }
}

/* ── Paginación de listados ─────────────────────────────────── */

.t-paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 4px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line-soft);
}

.t-paginacion-cuenta {
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.79rem;
  font-variant-numeric: tabular-nums;
}

.t-paginacion-controles {
  display: flex;
  align-items: center;
  gap: 14px;
}

.t-paginacion-posicion {
  color: var(--tinta-3);
  font-size: 0.79rem;
  font-variant-numeric: tabular-nums;
}

.t-pagina-boton {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  color: var(--sello);
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-s);
  font-family: var(--ui);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s, transform 0.2s var(--salida);
}

.t-pagina-boton:hover {
  border-color: var(--sello-borde);
  background: var(--sello-piel);
}

.t-pagina-boton:active {
  transform: scale(0.97);
}

.t-pagina-boton:focus-visible {
  outline: none;
  border-color: var(--sello);
  box-shadow: 0 0 0 3px var(--sello-piel);
}

.t-pagina-boton.is-inerte {
  color: var(--tinta-3);
  background: var(--papel-2);
  border-color: var(--line-soft);
  cursor: default;
}

@media (max-width: 560px) {
  .t-paginacion {
    flex-direction: column;
    align-items: stretch;
  }

  .t-paginacion-controles {
    justify-content: space-between;
  }
}

/* ── Pestañas de estado de un listado ───────────────────────── */

.t-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.t-pestana {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 13px;
  color: var(--tinta-2);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}

.t-pestana span {
  padding: 1px 7px;
  color: var(--tinta-3);
  background: var(--carpeta);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.t-pestana:hover {
  color: var(--tinta);
  background: var(--carpeta);
}

.t-pestana.es-activa {
  color: var(--tinta);
  font-weight: 600;
  background: var(--papel);
  border-color: var(--line);
}

.t-pestana.es-activa span {
  color: var(--sello);
  background: var(--sello-piel);
}

/* ── Acciones en bloque ─────────────────────────────────────── */

/* Barra flotante de acciones sobre lo seleccionado. Sin JavaScript queda
   anclada bajo la lista; con él, aparece solo cuando hay algo marcado. */
.t-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 12px;
  padding: 11px 16px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: var(--radio-m);
}

.t-lote.es-controlada {
  position: fixed;
  left: 50%;
  bottom: 22px;
  z-index: 30;
  width: max-content;
  max-width: min(720px, calc(100vw - 32px));
  margin: 0;
  padding: 11px 18px;
  box-shadow: var(--shadow-alta);
  opacity: 0;
  transform: translate(-50%, 14px);
  visibility: hidden;
  transition: opacity 0.24s var(--salida), transform 0.24s var(--salida),
    visibility 0.24s;
}

.t-lote.es-controlada.es-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
  .t-lote.es-controlada {
    transition: none;
  }
}

/* Mientras la barra flota, el contenido reserva sitio para no quedar tapado
   al llegar al final de la lista. */
body:has(.t-lote.es-visible) .content {
  padding-bottom: 104px;
}

.t-lista-cabeza {
  padding: 11px 18px 10px;
  border-bottom: 1px solid var(--line-soft);
}

.t-lote-todos,
.t-lote-confirmar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta-2);
  font-size: 0.85rem;
  cursor: pointer;
}

.t-casilla {
  width: 17px;
  height: 17px;
  flex: none;
  accent-color: var(--sello);
  cursor: pointer;
}

.t-lote-cuenta {
  color: var(--tinta-3);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}

.t-lote-acciones {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.t-lote.es-controlada .t-lote-acciones {
  margin-left: 6px;
}

.t-lote-acciones .secondary-button,
.t-lote-acciones .danger-button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 0.83rem;
}

.t-lote-acciones button:disabled {
  opacity: 0.45;
  cursor: default;
}

.t-fila-lote {
  grid-template-columns: auto minmax(0, 1fr) 116px 132px 194px;
}

.t-fila-marca {
  display: flex;
  align-items: center;
  padding-left: 4px;
}

@media (max-width: 1180px) {
  .t-fila-lote {
    grid-template-columns: auto minmax(0, 1fr) 102px 118px 194px;
  }
}

@media (max-width: 720px) {
  .t-fila-lote {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .t-fila-lote > .t-fila-quien {
    grid-column: auto;
  }

  .t-fila-lote > .t-marbete,
  .t-fila-lote > .t-fila-importe,
  .t-fila-lote > .t-fila-controles {
    grid-column: 2;
  }

  .t-lote-acciones {
    width: 100%;
    margin-left: 0;
    justify-content: space-between;
  }
}

/* ── Formas de cobro, con la fila de la casa ────────────────── */

.t-fila-cobro {
  grid-template-columns: minmax(0, 1fr) 128px 176px;
}

.t-destino {
  font-family: var(--mono);
  font-size: 0.95em;
}

@media (max-width: 1180px) {
  .t-fila-cobro {
    grid-template-columns: minmax(0, 1fr) 116px 160px;
  }
}

@media (max-width: 720px) {
  .t-fila-cobro {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.t-nota-pie {
  max-width: 68ch;
  margin: 18px 4px 0;
  color: var(--tinta-3);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* ── Mis datos y Series ─────────────────────────────────────── */

.t-columna-ancha {
  max-width: 900px;
}

.t-campo-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 14px;
}

.t-formulario-cuerpo > .t-subbloque-titulo {
  margin-top: 2px;
}

.t-formulario-cuerpo > .t-subbloque-titulo.t-subrayado {
  margin-top: 8px;
  padding-top: 16px;
}

.t-fila-serie {
  grid-template-columns: minmax(0, 1fr) 180px 132px 118px;
}

.t-serie-ejemplo {
  font-family: var(--mono);
  font-size: 0.94rem;
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 1180px) {
  .t-fila-serie {
    grid-template-columns: minmax(0, 1fr) 160px 118px 110px;
  }
}

@media (max-width: 900px) {
  .t-campo-trio {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .t-campo-trio {
    grid-template-columns: minmax(0, 1fr);
  }

  .t-fila-serie {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .t-serie-ejemplo {
    text-align: left;
  }
}

/* ── El formulario responde al tacto ────────────────────────── */

.t-campo textarea {
  background: var(--papel-2);
  border-color: var(--line-soft);
  transition:
    border-color 0.18s,
    background 0.18s,
    box-shadow 0.18s;
}

.t-campo textarea:hover {
  border-color: var(--line);
}

.t-campo textarea:focus {
  background: var(--papel);
}

.t-campo:focus-within > label {
  color: var(--sello);
}

/* Un panel de formulario se marca cuando estás escribiendo dentro. */
.t-formulario:focus-within {
  border-color: var(--line);
}

.primary-button,
.secondary-button,
.danger-button {
  transition:
    background 0.18s,
    border-color 0.18s,
    color 0.18s,
    transform 0.16s var(--salida),
    box-shadow 0.18s;
}

.primary-button:active:not(:disabled),
.secondary-button:active:not(:disabled),
.danger-button:active:not(:disabled) {
  transform: scale(0.975);
}

/* Los campos del formulario aparecen escalonados al abrir la pantalla. */
.t-formulario-cuerpo > * {
  animation: talonario-campo 0.4s var(--salida) backwards;
}

.t-formulario-cuerpo > *:nth-child(1) { animation-delay: 0.02s; }
.t-formulario-cuerpo > *:nth-child(2) { animation-delay: 0.05s; }
.t-formulario-cuerpo > *:nth-child(3) { animation-delay: 0.08s; }
.t-formulario-cuerpo > *:nth-child(4) { animation-delay: 0.11s; }
.t-formulario-cuerpo > *:nth-child(5) { animation-delay: 0.14s; }
.t-formulario-cuerpo > *:nth-child(n + 6) { animation-delay: 0.17s; }

@keyframes talonario-campo {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-formulario-cuerpo > * {
    animation: none;
  }

  .primary-button:active:not(:disabled),
  .secondary-button:active:not(:disabled),
  .danger-button:active:not(:disabled) {
    transform: none;
  }
}


.t-cabecera > a {
  white-space: nowrap;
}

/* ── La luz trasera de los formularios ───────────────────────────
   Mientras escribes dentro de una caja, una luz difuminada asoma por
   sus bordes, como si el panel flotase sobre la mesa; la zona más
   brillante recorre despacio el perímetro. Viaja como sombra del
   propio panel: su overflow oculto recortaría cualquier capa que
   sobresaliera por detrás. */

@property --aura-x {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --aura-y {
  syntax: "<length>";
  inherits: false;
  initial-value: -18px;
}

:root {
  --aura-luz: color-mix(in srgb, var(--sello) 38%, transparent);
  --aura-velo: color-mix(in srgb, var(--sello) 14%, transparent);
}

/* Sobre fondo oscuro la luz necesita más cuerpo para asomar. */
@media (prefers-color-scheme: dark) {
  
  :root:not([data-theme="light"]) {
    --aura-luz: color-mix(in srgb, var(--sello) 52%, transparent);
    --aura-velo: color-mix(in srgb, var(--sello) 22%, transparent);
  }
}

/* Espejo del bloque anterior para el tema forzado a mano.
   Si tocas uno, toca el otro. */
:root[data-theme="dark"] {
    --aura-luz: color-mix(in srgb, var(--sello) 52%, transparent);
    --aura-velo: color-mix(in srgb, var(--sello) 22%, transparent);
  }

.t-formulario,
.panel.form-panel {
  transition:
    border-color 0.3s,
    box-shadow 0.5s;
}

.t-formulario:focus-within,
.panel.form-panel:focus-within {
  border-color: var(--sello-borde);
  box-shadow:
    var(--shadow),
    var(--aura-x) var(--aura-y) 34px -10px var(--aura-luz),
    0 0 30px -4px var(--aura-velo),
    0 26px 52px -30px color-mix(in srgb, var(--sello) 34%, transparent);
  animation: aura-recorrido 7s linear infinite;
}

/* Ocho paradas alrededor de la caja; el navegador desliza entre ellas. */
@keyframes aura-recorrido {
  0%    { --aura-x: 0px;   --aura-y: -18px; }
  12.5% { --aura-x: 13px;  --aura-y: -13px; }
  25%   { --aura-x: 18px;  --aura-y: 0px; }
  37.5% { --aura-x: 13px;  --aura-y: 13px; }
  50%   { --aura-x: 0px;   --aura-y: 18px; }
  62.5% { --aura-x: -13px; --aura-y: 13px; }
  75%   { --aura-x: -18px; --aura-y: 0px; }
  87.5% { --aura-x: -13px; --aura-y: -13px; }
  100%  { --aura-x: 0px;   --aura-y: -18px; }
}

@media (prefers-reduced-motion: reduce) {
  .t-formulario:focus-within,
  .panel.form-panel:focus-within {
    animation: none;
  }
}

/* ── La lamparita que gobierna la luz ──────────────────────────
   El conmutador de tema es un flexo: con la luz dada, la aplicacion
   esta en claro; al apagarla, oscuro. */

.lampara-tema {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--tinta-2);
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  transition: color 0.18s;
}

.lampara-tema:hover {
  color: var(--sello);
}

.lampara-dibujo {
  width: 24px;
  height: 24px;
  overflow: visible;
}

.lampara-cuerpo {
  transition: transform 0.3s var(--salida);
  transform-origin: 30px 34px;
}

/* El cono de luz: dado en claro, recogido en oscuro. */
.lampara-cono {
  opacity: 0.5;
  color: #e8b64c;
  transform-origin: 13px 15px;
  transition:
    opacity 0.35s,
    transform 0.35s var(--salida);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lampara-cono {
    opacity: 0;
    transform: scale(0.35);
  }
}

:root[data-theme="dark"] .lampara-cono {
  opacity: 0;
  transform: scale(0.35);
}

/* El tiron de la cadenita: la lampara se mece. */
.lampara-tema.se-mece .lampara-dibujo {
  animation: lampara-mece 0.55s var(--muelle);
}

@keyframes lampara-mece {
  25% { transform: rotate(-7deg); }
  60% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .lampara-tema.se-mece .lampara-dibujo {
    animation: none;
  }

  .lampara-cono {
    transition: opacity 0.2s;
  }
}

/* ══════════════════════════════════════════════════════════════
   Talonario · la portada
   Dos hojas lado a lado: a la izquierda, la de papel con el
   formulario; a la derecha, la tapa violeta con el panel asomando
   y un talón suelto encima. Al validar, la hoja se retira y el
   panel se acerca hasta ocupar la pantalla.
   ══════════════════════════════════════════════════════════════ */

.portada {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  background: var(--papel);
  transition: opacity 0.3s;
}

.portada.se-apaga {
  opacity: 0;
}

/* ── La hoja del formulario ─────────────────────────────────── */

.portada-hoja {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100dvh;
  padding: clamp(22px, 3.2vw, 36px) clamp(22px, 5vw, 64px);
}

.portada-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.portada-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta);
}

.portada-marca .brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
}

.portada-cuerpo {
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 36px 0;
}

.portada-tarjeta {
  width: min(400px, 100%);
  display: grid;
  transition:
    opacity 0.4s,
    transform 0.5s var(--salida);
}

/* Los bloques entran escalonados, como el resto del panel. */
.portada-tarjeta > * {
  animation: portada-entra 0.45s var(--salida) backwards;
}

.portada-tarjeta > :nth-child(1) { animation-delay: 0.03s; }
.portada-tarjeta > :nth-child(2) { animation-delay: 0.07s; }
.portada-tarjeta > :nth-child(3) { animation-delay: 0.11s; }
.portada-tarjeta > :nth-child(4) { animation-delay: 0.15s; }
.portada-tarjeta > :nth-child(5) { animation-delay: 0.19s; }
.portada-tarjeta > :nth-child(6) { animation-delay: 0.23s; }

@keyframes portada-entra {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.portada-tarjeta h1 {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.portada-intro {
  margin: 10px 0 24px;
  color: var(--tinta-2);
  font-size: 0.96rem;
  line-height: 1.5;
}

.portada-form {
  display: grid;
  gap: 16px;
}

.portada-form .primary-button {
  margin-top: 6px;
  width: 100%;
}

.portada-error {
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
  border-radius: var(--radio-s);
  color: var(--danger);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* La tarjeta niega con una sacudida cuando la contraseña no es. */
.portada-tarjeta.portada-niega {
  animation: portada-niega 0.45s var(--salida);
}

@keyframes portada-niega {
  20% { transform: translateX(-8px); }
  45% { transform: translateX(6px); }
  70% { transform: translateX(-3px); }
}

/* La contraseña lleva un ojo para verla; solo aparece con JavaScript. */
.portada-clave {
  position: relative;
}

.portada-clave input {
  padding-right: 50px;
}

.portada-ojo {
  position: absolute;
  top: 50%;
  right: 6px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  translate: 0 -50%;
  color: var(--tinta-3);
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition:
    color 0.18s,
    background 0.18s;
}

.portada-ojo:hover {
  color: var(--sello);
  background: var(--sello-piel);
}

.portada-ojo svg {
  width: 20px;
  height: 20px;
}

.portada-ojo[aria-pressed="true"] .ojo-abierto,
.portada-ojo:not([aria-pressed="true"]) .ojo-cerrado {
  display: none;
}

.portada-nota {
  margin: 20px 0 0;
  color: var(--tinta-3);
  font-size: 0.8rem;
  line-height: 1.5;
}

.portada-pie {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--tinta-3);
  font-size: 0.78rem;
}

/* ── La tapa violeta con el escaparate ──────────────────────── */

.portada-escaparate {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 26px;
  margin: 16px 16px 16px 0;
  padding: clamp(28px, 4vw, 56px) clamp(22px, 3.4vw, 44px) 0;
  overflow: hidden;
  color: rgb(255 255 255 / 92%);
  background:
    radial-gradient(circle at 18% 10%, rgb(255 255 255 / 12%), transparent 46%),
    radial-gradient(circle at 88% 92%, rgb(231 183 198 / 18%), transparent 42%),
    linear-gradient(155deg, #6a2e9b, #46206f 72%);
  border-radius: 26px;
  box-shadow: var(--shadow-alta);
  transition: transform 0.55s cubic-bezier(0.55, 0, 0.85, 0.25);
}

/* La celda de la tapa: la tapa dentro, y las anillas a caballo de su
   borde izquierdo, fuera del recorte de la tapa. */
.portada-tapa {
  position: relative;
  display: grid;
  min-height: 0;
}

/* Y un rayado de hoja, muy tenue, al fondo. */
.portada-escaparate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    transparent 0 31px,
    rgb(255 255 255 / 4%) 31px 32px
  );
  pointer-events: none;
}

.escaparate-texto {
  position: relative;
  z-index: 1;
  max-width: 30ch;
  padding-left: 18px;
}

.escaparate-texto h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-shadow: 0 -1px 1px rgb(0 0 0 / 25%);
}

.escaparate-texto p {
  margin: 12px 0 0;
  color: rgb(255 255 255 / 76%);
  font-size: 1.04rem;
  line-height: 1.5;
}

/* La escena ocupa todo lo que queda bajo el titular: el panel entra
   justo debajo, más grande que el marco, y se corta por el borde
   derecho y por el inferior de la tapa; el talón queda suelto sobre
   su esquina. */
.escaparate-escena {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: grid;
  justify-items: start;
  min-height: 0;
  padding-left: 72px;
}

.escaparate-ventana {
  display: grid;
  position: relative;
  z-index: 1;
  grid-template-columns: 138px minmax(0, 1fr);
  width: calc(100% + 52px);
  /* Siempre un poco más alto que el hueco, para que al levantarse no
     asome la tapa por debajo. */
  height: calc(100% + 32px);
  min-height: 0;
  overflow: hidden;
  color: var(--tinta);
  font-family: var(--ui);
  font-size: 12px;
  line-height: 1.3;
  background: var(--papel);
  border: 1px solid rgb(0 0 0 / 14%);
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow:
    0 -1px 0 rgb(255 255 255 / 25%),
    0 30px 60px -28px rgb(0 0 0 / 60%),
    -8px 0 18px -10px rgb(0 0 0 / 40%),
    0 2px 6px rgb(0 0 0 / 18%);
  pointer-events: none;
  user-select: none;
  transition:
    transform 0.55s var(--salida),
    box-shadow 0.55s var(--salida);
}

/* Al pasar el ratón por la tapa, el panel y el talón se levantan como
   hojas sueltas, igual que las filas y las fichas del panel. */
.portada-escaparate:hover .escaparate-ventana {
  transform: translateY(-5px) rotate(-0.25deg);
}

.portada-escaparate:hover .escaparate-talon {
  transform: translate(5px, -4px) rotate(-1deg);
}

.mini-lateral {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 16px 11px 18px;
  background: var(--papel-2);
  border-right: 1px solid var(--line-soft);
}

.mini-marca {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.mini-marca .brand-mark {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
}

.mini-nav {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-nav li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  color: var(--tinta-2);
  font-size: 11.5px;
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: 6px;
}

.mini-nav li::before {
  content: "";
  width: 9px;
  height: 9px;
  border: 1.4px solid currentColor;
  border-radius: 2.5px;
  opacity: 0.55;
}

.mini-nav li.es-actual {
  color: var(--tinta);
  font-weight: 600;
  background: var(--papel);
  border-color: var(--line);
}

.mini-nav li.es-actual::before {
  border-color: var(--sello);
  opacity: 1;
}

/* El grupo de configuración va separado del primero por una línea de
   puntos, centrada: el mismo aire de «Conceptos» a la línea que de la
   línea al rótulo, y el rótulo pegado a sus dos entradas (los márgenes
   negativos descuentan el hueco general de la barra). */
.mini-nav-rotulo {
  margin: -7px 0 -11px;
  padding: 17px 9px 0;
  border-top: 1px dashed var(--line);
  color: var(--tinta-3);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.mini-contenido {
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px 20px 20px;
  background: var(--carpeta);
}

.mini-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 3px 12px;
}

.mini-eyebrow {
  grid-column: 1;
  color: var(--sello);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.mini-cabecera strong {
  grid-column: 1;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.mini-boton {
  grid-column: 2;
  grid-row: 1 / 3;
  padding: 7px 12px;
  color: var(--sobre-sello);
  background: var(--sello);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.mini-indicadores {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.mini-indicadores > div {
  display: grid;
  gap: 4px;
  padding: 11px 12px 12px;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.mini-indicadores i {
  font-style: normal;
  color: var(--tinta-3);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mini-indicadores b {
  font-family: var(--display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mini-paneles {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 10px;
}

.mini-panel {
  display: grid;
  align-content: start;
  gap: 9px;
  padding: 12px 13px 13px;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
}

.mini-titulo {
  font-size: 11.5px;
  font-weight: 700;
}

.mini-barras {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: end;
  gap: 5px;
  height: 78px;
}

.mini-barras span {
  display: block;
  background: color-mix(in srgb, var(--sello) 55%, var(--papel));
  border-radius: 3px 3px 1px 1px;
}

/* Un ejercicio inventado, mes a mes; el mes en curso, en tinta plena,
   y los que faltan, solo dibujados. */
.mini-barras span:nth-child(1) { height: 34%; }
.mini-barras span:nth-child(2) { height: 48%; }
.mini-barras span:nth-child(3) { height: 40%; }
.mini-barras span:nth-child(4) { height: 62%; }
.mini-barras span:nth-child(5) { height: 55%; }
.mini-barras span:nth-child(6) { height: 72%; }
.mini-barras span:nth-child(7) { height: 46%; }
.mini-barras span:nth-child(8) { height: 38%; }
.mini-barras span:nth-child(9) { height: 84%; background: var(--sello); }
.mini-barras span:nth-child(n + 10) {
  height: 100%;
  background: none;
  border: 1px dashed var(--line);
  border-radius: 3px;
}

.mini-meses {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  color: var(--tinta-3);
  font-size: 7.5px;
  text-align: center;
}

.mini-panel ul {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mini-panel li {
  display: grid;
  align-items: center;
  gap: 2px 10px;
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
}

.mini-panel li:first-child {
  padding-top: 0;
  border-top: 0;
}

.mini-borradores li {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mini-tabla li {
  grid-template-columns: 66px minmax(0, 1fr) 44px auto 64px;
}

.mini-quien {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mini-accion {
  color: var(--sello);
  font-size: 10.5px;
  font-weight: 700;
}

.mini-importe {
  font-family: var(--mono);
  font-size: 10.5px;
  white-space: nowrap;
  text-align: right;
}

.mini-numero {
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--tinta-3);
}

.mini-fecha {
  color: var(--tinta-3);
  font-size: 10px;
  white-space: nowrap;
}

.mini-estado {
  justify-self: end;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mini-estado.es-cobrada {
  color: var(--safe);
  background: var(--safe-soft);
}

.mini-estado.es-pendiente {
  color: var(--warning);
  background: var(--warning-soft);
}

/* ── El talón ────────────────────────────────────────────────
   Un objeto de papel metido bajo el borde del panel, a la altura
   del gráfico: la mitad asoma sobre la tapa, con el número, el
   importe y el sello en la parte que se ve. Conserva sus colores
   también de noche. */

.escaparate-talon {
  position: absolute;
  z-index: 0;
  left: -4px;
  top: 132px;
  width: 176px;
  display: grid;
  gap: 4px;
  padding: 10px 12px 10px 18px;
  color: #6b5d43;
  background:
    linear-gradient(105deg, rgb(106 46 155 / 9%), transparent 30%),
    #fbf6ec;
  border: 1px solid #e3d9c8;
  border-radius: 6px;
  rotate: -6deg;
  box-shadow:
    0 14px 28px -16px rgb(0 0 0 / 50%),
    0 1px 3px rgb(0 0 0 / 18%);
  transition:
    transform 0.55s var(--salida),
    opacity 0.4s;
}

/* Su matriz perforada. */
.escaparate-talon::before {
  content: "";
  position: absolute;
  inset: 6px auto 6px 9px;
  border-left: 2px dashed #cfc2ab;
}

.talon-marca {
  font-family: var(--display);
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #57268a;
}

.talon-numero {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: #8a7c62;
}

.talon-linea {
  display: block;
  margin-top: 2px;
  border-bottom: 1.5px solid #d9cdb6;
  padding-bottom: 3px;
}

.talon-linea i {
  font-style: normal;
  font-size: 0.55rem;
  letter-spacing: 0.04em;
  color: #a4977d;
}

.talon-importe {
  margin-top: 2px;
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #1b1820;
  font-variant-numeric: tabular-nums;
}

/* El sello de cobrada, estampado torcido bajo el importe. */
.talon-sello {
  justify-self: start;
  margin: 2px 0 0;
  padding: 2px 7px;
  border: 2px solid #1d7251;
  border-radius: 5px;
  rotate: -6deg;
  color: #1d7251;
  font-size: 0.52rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
}

.talon-firma {
  justify-self: end;
  font-size: 0.66rem;
  font-style: italic;
  color: #6b5d43;
}

/* ── Las anillas ─────────────────────────────────────────────
   Las dos hojas van encuadernadas: una columna de anillas a caballo
   entre la hoja de papel y la tapa, con los agujeros troquelados en
   las dos. Empiezan bajo la esquina redondeada de la tapa. */

/* El bloque de degradados no ocupa sitio ni cuenta como anilla. */
.anilla-defs {
  position: absolute;
  width: 0;
  height: 0;
}

.portada-anillas {
  position: absolute;
  z-index: 3;
  top: 40px;
  left: -14px;
  width: 30px;
  height: calc(100% - 80px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  pointer-events: none;
}

/* Cada anilla: su agujero y su espira en el mismo dibujo, así casan. */
.anilla {
  display: block;
  width: 30px;
  height: 15px;
  transform-origin: 62% 50%;
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 1, 1),
    opacity 0.24s;
}

.anilla svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* El agujero troquelado en la tapa. */
.anilla-ojal {
  fill: rgb(20 8 34 / 78%);
}

/* Sombra que proyecta la espira sobre la tapa: la asienta al metal. */
.anilla-sombra {
  fill: none;
  stroke: rgb(0 0 0 / 34%);
  stroke-width: 4.4;
  stroke-linecap: round;
}

.anilla-hilo {
  fill: none;
  stroke: url(#anilla-metal);
  stroke-width: 3.1;
  stroke-linecap: round;
}

.anilla-brillo {
  fill: none;
  stroke: rgb(255 255 255 / 60%);
  stroke-width: 0.9;
  stroke-linecap: round;
}
/* ── La apertura ─────────────────────────────────────────────
   Al validar, la hoja se retira, las anillas se sueltan de abajo
   arriba y, libre de ellas, la tapa sube. El panel de inicio entra
   después desde abajo (véase «Encadenar la portada con el panel»). */

.portada.esta-abriendo .portada-tarjeta {
  opacity: 0;
  transform: translateY(-10px);
}

.portada.esta-abriendo .anilla {
  opacity: 0;
  transform: translate(-10px, -15px) rotate(-52deg);
}

/* De abajo arriba: panel.js numera las espiras visibles desde la más
   baja (data-orden 0), que es la primera en soltarse. */
.portada.esta-abriendo .anilla[data-orden="0"] { transition-delay: 0ms; }
.portada.esta-abriendo .anilla[data-orden="1"] { transition-delay: 14ms; }
.portada.esta-abriendo .anilla[data-orden="2"] { transition-delay: 28ms; }
.portada.esta-abriendo .anilla[data-orden="3"] { transition-delay: 42ms; }
.portada.esta-abriendo .anilla[data-orden="4"] { transition-delay: 56ms; }
.portada.esta-abriendo .anilla[data-orden="5"] { transition-delay: 70ms; }
.portada.esta-abriendo .anilla[data-orden="6"] { transition-delay: 84ms; }
.portada.esta-abriendo .anilla[data-orden="7"] { transition-delay: 98ms; }
.portada.esta-abriendo .anilla[data-orden="8"] { transition-delay: 112ms; }
.portada.esta-abriendo .anilla[data-orden="9"] { transition-delay: 126ms; }
.portada.esta-abriendo .anilla[data-orden="10"] { transition-delay: 140ms; }
.portada.esta-abriendo .anilla[data-orden="11"] { transition-delay: 154ms; }
.portada.esta-abriendo .anilla[data-orden="12"] { transition-delay: 168ms; }
.portada.esta-abriendo .anilla[data-orden="13"] { transition-delay: 182ms; }
.portada.esta-abriendo .anilla[data-orden="14"] { transition-delay: 196ms; }
.portada.esta-abriendo .anilla[data-orden="15"] { transition-delay: 210ms; }
.portada.esta-abriendo .anilla[data-orden="16"] { transition-delay: 224ms; }
.portada.esta-abriendo .anilla[data-orden="17"] { transition-delay: 238ms; }
.portada.esta-abriendo .anilla[data-orden="18"] { transition-delay: 252ms; }
.portada.esta-abriendo .anilla[data-orden="19"] { transition-delay: 266ms; }
.portada.esta-abriendo .anilla[data-orden="20"] { transition-delay: 280ms; }
.portada.esta-abriendo .anilla[data-orden="21"] { transition-delay: 294ms; }
.portada.esta-abriendo .anilla[data-orden="22"] { transition-delay: 308ms; }
.portada.esta-abriendo .anilla[data-orden="23"] { transition-delay: 322ms; }
.portada.esta-abriendo .anilla[data-orden="24"] { transition-delay: 336ms; }
.portada.esta-abriendo .anilla[data-orden="25"] { transition-delay: 350ms; }
.portada.esta-abriendo .anilla[data-orden="26"] { transition-delay: 364ms; }
.portada.esta-abriendo .anilla[data-orden="27"] { transition-delay: 378ms; }
.portada.esta-abriendo .anilla[data-orden="28"] { transition-delay: 392ms; }
.portada.esta-abriendo .anilla[data-orden="29"] { transition-delay: 406ms; }
.portada.esta-abriendo .anilla[data-orden="30"] { transition-delay: 420ms; }
.portada.esta-abriendo .anilla[data-orden="31"] { transition-delay: 434ms; }
.portada.esta-abriendo .anilla[data-orden="32"] { transition-delay: 448ms; }
.portada.esta-abriendo .anilla[data-orden="33"] { transition-delay: 462ms; }
.portada.esta-abriendo .anilla[data-orden="34"] { transition-delay: 476ms; }
.portada.esta-abriendo .anilla[data-orden="35"] { transition-delay: 490ms; }
.portada.esta-abriendo .anilla[data-orden="36"] { transition-delay: 504ms; }
.portada.esta-abriendo .anilla[data-orden="37"] { transition-delay: 518ms; }
.portada.esta-abriendo .anilla[data-orden="38"] { transition-delay: 532ms; }
.portada.esta-abriendo .anilla[data-orden="39"] { transition-delay: 546ms; }

.portada.esta-abriendo .portada-escaparate {
  transform: translateY(-112%);
  transition:
    transform 0.6s cubic-bezier(0.55, 0, 0.85, 0.25);
  transition-delay: 0.34s;
}

/* ── Encadenar la portada con el panel ───────────────────────
   Con esto el navegador enlaza cada navegación dentro del panel;
   tema.js se salta todas menos la entrada desde la portada, en la que
   el panel sube desde abajo mientras la portada termina de irse. */

@view-transition {
  navigation: auto;
}

html.entra-desde-portada::view-transition-old(root) {
  animation: portada-se-va 0.5s var(--salida) both;
}

html.entra-desde-portada::view-transition-new(root) {
  animation: panel-sube 0.5s var(--salida) both;
}

@keyframes portada-se-va {
  to {
    opacity: 0;
    transform: translateY(-10%);
  }
}

@keyframes panel-sube {
  from {
    transform: translateY(100%);
  }
}

/* ── Anchuras ────────────────────────────────────────────── */

@media (max-width: 1280px) {
  .escaparate-ventana {
    grid-template-columns: 116px minmax(0, 1fr);
  }

  .mini-paneles {
    grid-template-columns: 1fr;
  }

  .mini-borradores {
    display: none;
  }

  .mini-tabla li {
    grid-template-columns: 66px minmax(0, 1fr) auto 64px;
  }

  .mini-fecha {
    display: none;
  }

  /* Con menos sitio, el talón asoma un poco menos. */
  .escaparate-talon {
    left: -2px;
    width: 170px;
  }
}

@media (max-width: 980px) {
  .portada {
    grid-template-columns: minmax(0, 1fr);
  }

  .portada-tapa {
    display: none;
  }
}

@media (max-width: 460px) {
  .portada-hoja {
    padding: 18px 20px 20px;
  }

  .portada-pie {
    flex-direction: column;
    gap: 4px;
  }
}

/* ── De noche ─────────────────────────────────────────────
   La tapa se oscurece un punto; el panel dentro sigue al tema. */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .portada-escaparate {
    background:
      radial-gradient(circle at 18% 10%, rgb(255 255 255 / 7%), transparent 46%),
      radial-gradient(circle at 88% 92%, rgb(231 183 198 / 10%), transparent 42%),
      linear-gradient(155deg, #4c2274, #2a1344 72%);
  }

  /* De noche el metal cambia de temple y el agujero se hunde. */
  :root:not([data-theme="light"]) .anilla-hilo {
    stroke: url(#anilla-metal-noche);
  }

  :root:not([data-theme="light"]) .anilla-ojal {
    fill: rgb(0 0 0 / 62%);
  }

  :root:not([data-theme="light"]) .anilla-brillo {
    stroke: rgb(255 255 255 / 42%);
  }
}

/* Espejo del bloque anterior para el tema forzado a mano.
   Si tocas uno, toca el otro. */
:root[data-theme="dark"] .portada-escaparate {
  background:
    radial-gradient(circle at 18% 10%, rgb(255 255 255 / 7%), transparent 46%),
    radial-gradient(circle at 88% 92%, rgb(231 183 198 / 10%), transparent 42%),
    linear-gradient(155deg, #4c2274, #2a1344 72%);
}

:root[data-theme="dark"] .anilla-hilo {
  stroke: url(#anilla-metal-noche);
}

:root[data-theme="dark"] .anilla-ojal {
  fill: rgb(0 0 0 / 62%);
}

:root[data-theme="dark"] .anilla-brillo {
  stroke: rgb(255 255 255 / 42%);
}

@media (prefers-reduced-motion: reduce) {
  .portada,
  .portada-tarjeta,
  .portada-escaparate,
  .anilla,
  .escaparate-ventana,
  .escaparate-talon {
    transition: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none;
  }

  .portada-tarjeta > * {
    animation: none;
  }

  .portada-tarjeta.portada-niega {
    animation: none;
  }

  .portada-escaparate:hover .escaparate-ventana,
  .portada-escaparate:hover .escaparate-talon {
    transform: none;
  }
}

/* Tooltips de la muestra local de ingresos. */
.t-demo-barra {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  touch-action: manipulation;
}
.t-demo-barra:hover,
.t-demo-barra:active {
  background: transparent;
  box-shadow: none;
  transform: none;
}
.t-demo-barra:focus-visible {
  outline: 2px solid var(--sello);
  outline-offset: 2px;
}
.t-demo-tooltip {
  position: absolute;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 16px);
  padding: 7px 10px;
  border: 1px solid var(--sello-borde);
  border-radius: 7px;
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--shadow);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.4;
  pointer-events: auto;
}
.t-demo-tooltip[hidden] { display: none; }

/* Los borradores conservan la distinción entre base y total fiscal. */
.t-fila-importe small {
  display: block;
  margin-top: 2px;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--tinta-3);
}

.t-gran-total b.t-total-pendiente {
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: normal;
  text-align: right;
}
/* Revisión persistente y documentos de prueba: el mismo recorrido de Facturas. */
.trial-review-status, .trial-issued-actions { padding: clamp(1rem, 3vw, 2rem); }
.trial-review-status h2 { margin-top: 0; }
.trial-review-actions { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: flex-end; margin-top: 1.5rem; }
.trial-review-actions form { display: grid; gap: 1rem; max-width: 36rem; }
.trial-confirmation { display: flex; align-items: flex-start; gap: .6rem; line-height: 1.5; }
.trial-confirmation input { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: .2rem; }
.trial-invoice-document { margin: 1.5rem auto; max-width: 64rem; overflow-wrap: anywhere; }
.trial-invoice-brand { color: var(--sello); font-size: .9rem; font-weight: 700; letter-spacing: -.02em; }
.trial-document-boundary { padding: .7rem 1rem; margin: 0 0 1.5rem; color: var(--warning); background: var(--warning-soft); border: 1px solid var(--warning-borde); border-radius: .4rem; font-size: .8rem; font-weight: 700; text-align: center; letter-spacing: .04em; }
.trial-lines-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.trial-lines-table th, .trial-lines-table td { padding: .8rem .5rem; border-bottom: 1px solid var(--line); text-align: right; vertical-align: top; }
.trial-lines-table th:first-child, .trial-lines-table td:first-child { text-align: left; width: 48%; }
.trial-lines-table small { display: block; margin-top: .3rem; opacity: .7; }
.trial-lines-table td:not(:first-child) { white-space: nowrap; }
.trial-document-totals { max-width: 26rem; margin: 1.5rem 0 1.5rem auto; }
.trial-document-totals > div { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; }
.trial-document-totals dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.trial-total-payable { margin-top: .5rem; border-top: 2px solid currentColor; font-weight: 700; font-size: 1.2rem; }
.trial-document-notes { margin: 1.5rem 0; }
.trial-document-notes h3 { font-size: .95rem; }
.trial-document-notes p { font-size: .9rem; white-space: pre-wrap; }
.trial-document-footnote { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .8rem; }
@media (max-width: 640px) {
  .trial-review-actions { display: grid; }
  .trial-review-actions form, .trial-review-actions button { width: 100%; max-width: none; }
  .trial-invoice-document .invoice-document-header { display: grid; gap: 1rem; }
  .trial-lines-table { font-size: .78rem; }
  .trial-lines-table th, .trial-lines-table td { padding: .65rem .35rem; }
  .trial-invoice-document .invoice-lines-wrap { overflow-x: auto; }
  .trial-document-totals { max-width: none; }
}

/* Cobros, correcciones y recuperación comparten el lenguaje de Talonario. */
.ledger-panel { padding: clamp(18px, 2.4vw, 28px); min-width: 0; }
.ledger-panel h2 { margin: 0 0 8px; font-family: var(--display); font-size: 1.15rem; letter-spacing: -.025em; }
.ledger-panel h3 { margin: 24px 0 12px; font-family: var(--display); font-size: .98rem; }
.ledger-panel p { color: var(--tinta-2); line-height: 1.6; margin: 6px 0 14px; font-size: .9rem; }
.ledger-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.ledger-heading > div { min-width: 0; }
.ledger-heading > a, .ledger-heading > form { flex: 0 0 auto; }
.ledger-balances { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 20px; margin: 20px 0 24px; padding: 19px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.ledger-balances dt { font-size: .78rem; color: var(--tinta-3); margin-bottom: 7px; }
.ledger-balances dd { margin: 0; font: 650 clamp(1.2rem,2vw,1.7rem)/1.2 var(--display); letter-spacing: -.025em; overflow-wrap: anywhere; }
.ledger-controls { display: grid; gap: 12px; }
.ledger-disclosure { border: 1px solid var(--line-soft); border-radius: var(--radio-s); background: var(--papel); margin: 14px 0; }
.ledger-disclosure > summary { padding: 14px 16px; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--sello); }
.ledger-disclosure[open] > summary { border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.ledger-disclosure > :not(summary) { margin-left: 16px; margin-right: 16px; }
.ledger-disclosure > :last-child { margin-bottom: 18px; }
.ledger-panel form { min-width: 0; }
.ledger-panel .form-grid { margin: 16px 0 22px; }
.ledger-panel .form-field { display: grid; gap: 7px; min-width: 0; }
.ledger-panel label { font-size: .86rem; font-weight: 500; color: var(--tinta-2); }
.ledger-panel input:not([type=checkbox]):not([type=hidden]), .ledger-panel select { width: 100%; max-width: 100%; min-width: 0; min-height: 46px; padding: 11px 13px; color: var(--tinta); background: var(--papel-2); border: 1px solid var(--line-soft); border-radius: var(--radio-s); font: inherit; font-size: .9rem; }
.ledger-panel input:not([type=checkbox]):focus, .ledger-panel select:focus { outline: 2px solid var(--sello); outline-offset: 2px; background: var(--papel); }
.ledger-panel input[type=checkbox] { accent-color: var(--sello); }
.ledger-panel .trial-confirmation { margin: 12px 0 20px; }
.ledger-panel .form-hint { font-size: .8rem; color: var(--tinta-3); }
.ledger-panel .form-error { color: var(--danger); }
.ledger-panel .form-success { padding: 12px 15px; border-radius: var(--radio-s); background: var(--safe-soft); color: var(--safe); }
.ledger-history { display: grid; }
.ledger-history-row { display: flex; align-items: flex-start; gap: 18px; padding: 16px 0; border-top: 1px solid var(--line-soft); text-decoration: none; color: var(--tinta); overflow-wrap: anywhere; }
.ledger-history-row > div { flex: 1; min-width: 0; }
.ledger-history-row > details { flex-basis: 200px; font-size: .82rem; }
.ledger-history-row > details summary { color: var(--sello); cursor: pointer; }
.ledger-history-row > details form { display: grid; gap: 12px; margin-top: 12px; }
.ledger-history-row p { margin: 4px 0 0; font-size: .82rem; }
.ledger-history-row h2 { font-size: 1rem; }
.ledger-history-row .secondary-button { flex: 0 0 auto; }
.ledger-amount { flex: 0 0 auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.ledger-empty { padding: 12px 0; }
.correction-choices { display: flex; flex-wrap: wrap; gap: 9px; margin: 18px 0 24px; }
.correction-choices a { font-size: .82rem; padding: 10px 13px; }
.ledger-correction-form { border-top: 1px solid var(--line-soft); padding-top: 22px; }
.backup-status { display: grid; gap: 12px; margin: 18px 0; }
.backup-status > div { display: grid; grid-template-columns: minmax(160px, .7fr) 2fr; gap: 16px; font-size: .86rem; }
.backup-status dt { color: var(--tinta-3); }
.backup-status dd { margin: 0; overflow-wrap: anywhere; min-width: 0; }
.backup-status code { font-size: .78rem; }
.recovery-command { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; padding: 14px; background: var(--papel-2); border-radius: var(--radio-s); font-size: .78rem; line-height: 1.6; }
.ledger-disclosure li { padding: 4px 0; color: var(--tinta-2); font-size: .9rem; }
@media (max-width: 720px) {
  .ledger-heading { flex-direction: column; gap: 12px; }
  .ledger-heading > a, .ledger-heading > form, .ledger-heading > form > button { width: 100%; }
  .ledger-panel .form-grid { grid-template-columns: minmax(0, 1fr); }
  .ledger-balances { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .ledger-history-row { flex-wrap: wrap; gap: 10px; }
  .ledger-history-row > div { flex-basis: 65%; }
  .ledger-history-row > details, .ledger-history-row > .secondary-button { flex-basis: 100%; }
  .correction-choices { display: grid; grid-template-columns: minmax(0, 1fr); }
  .correction-choices a { justify-content: flex-start; }
  .backup-status > div { grid-template-columns: minmax(0, 1fr); gap: 5px; }
}

.ledger-panel a.secondary-button, .correction-choices a, .page-header a.secondary-button { text-decoration: none; }

/* La descarga pertenece a la cabecera del documento, sin una tarjeta vacía. */
.document-page-header { flex-wrap: wrap; }
.document-page-header > div:first-child { flex: 1 1 32rem; min-width: 0; }
.document-page-header h1 { overflow-wrap: anywhere; }
.document-page-actions { flex: 0 0 auto; gap: 1rem 1.5rem; }
.document-page-actions .secondary-link { white-space: nowrap; }
@media (max-width: 640px) {
  .document-page-header > div:first-child { flex-basis: auto; }
  .document-page-actions { width: 100%; align-items: flex-start; }
  .document-page-actions .primary-button { align-self: stretch; text-align: center; }
}

/* Informes: cifras y documentos con la misma jerarquía del resto del talonario. */
.report-period { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; margin-bottom: 1rem; }
.report-period label { display: grid; gap: .45rem; color: var(--tinta-2); font-size: .85rem; }
.report-period input { min-height: 46px; min-width: 12rem; padding: .65rem .85rem; border: 1px solid var(--line); border-radius: var(--radio-s); background: var(--papel); color: var(--tinta); font: inherit; }
.report-scope { margin-bottom: 1.25rem; }
.report-indicators { margin-bottom: 1.5rem; }
.report-indicators .t-indicador-cifra { overflow-wrap: anywhere; }
.report-table { width: 100%; border-collapse: collapse; margin-top: 1.2rem; font-size: .85rem; }
.report-table th, .report-table td { padding: .8rem .5rem; text-align: right; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.report-table th { color: var(--tinta-2); font-size: .75rem; font-weight: 600; }
.report-table th:first-child, .report-table td:first-child { padding-left: 0; text-align: left; }
.report-table .report-reference { max-width: 25rem; overflow-wrap: anywhere; }
.report-table .secondary-link { min-height: 0; overflow-wrap: anywhere; }
.report-table small { display: block; color: var(--tinta-2); margin-top: .3rem; }
.report-table td.report-explanation > span { text-align: left; overflow-wrap: anywhere; }
.report-table td.report-explanation ul { margin: 0; padding-left: 1.1rem; }
.report-table td > span { min-width: 0; overflow-wrap: anywhere; }
.report-totals { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 1rem 2rem; margin: 1.4rem 0 0; }
.report-totals div { display: grid; gap: .35rem; text-align: right; }
.report-totals dt { color: var(--tinta-2); font-size: .8rem; }
.report-totals dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .report-indicators { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-table, .report-table tbody, .report-table tr, .report-table td { display: block; }
  .report-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .report-table tr { padding: .8rem 0; border-bottom: 1px solid var(--line); }
  .report-table td, .report-table td:first-child { display: flex; justify-content: space-between; gap: 1rem; border: 0; padding: .35rem 0; text-align: right; }
  .report-table td::before { content: attr(data-label); color: var(--tinta-2); text-align: left; flex: 0 0 auto; }
  .report-table td.report-reference { display: block; max-width: none; text-align: left; padding-bottom: .7rem; }
  .report-table .report-reference::before { display: none; }
  .report-totals { justify-content: flex-start; }
  .report-totals div { text-align: left; }
}
@media (max-width: 480px) {
  .report-period label, .report-period button { width: 100%; }
  .report-indicators { grid-template-columns: 1fr; }
}

/* Envíos locales: estado junto al documento e historial legible sin tablas técnicas. */
.delivery-inline { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 0 0 1.5rem; padding: 1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.delivery-inline > div { min-width: 0; }
.delivery-inline strong { font-size: .9rem; }
.delivery-inline p { margin: .4rem 0 0; font-size: .82rem; color: var(--tinta-2); }
.delivery-inline > a { flex: 0 0 auto; }
.delivery-preparation { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.delivery-preparation .primary-button, .delivery-preparation .secondary-button { justify-self: start; }
.delivery-confirm { display: flex; align-items: flex-start; gap: .7rem; font-size: .85rem; line-height: 1.5; color: var(--tinta-2); }
.delivery-confirm input { flex: 0 0 auto; margin-top: .15rem; accent-color: var(--sello); width: 1rem; height: 1rem; }
.delivery-actions { margin-top: 1.25rem; }
.delivery-actions > form { display: inline-block; }
.delivery-attempts { color: var(--tinta-2); font-size: .82rem; white-space: nowrap; }
.delivery-error { padding: 1rem; border-radius: var(--radio-s); border: 1px solid var(--danger); overflow-wrap: anywhere; }
.delivery-history-entry { padding: 1.4rem 0; border-top: 1px solid var(--line-soft); }
.delivery-history-entry:first-of-type { margin-top: 1.4rem; }
.delivery-history-entry:last-child { padding-bottom: 0; }
.delivery-history-entry h3 { font-size: 1rem; margin: 0; }
.delivery-history-entry .ledger-heading p { font-size: .8rem; }
.delivery-events { display: grid; gap: .9rem; margin: 1rem 0 0; padding: 0 0 0 1.1rem; }
.delivery-events li { padding-left: .3rem; color: var(--tinta-2); font-size: .82rem; }
.delivery-events time { display: block; font-size: .75rem; color: var(--tinta-3); margin-bottom: .2rem; }
.delivery-events a { margin-left: .7rem; }
.delivery-repair > summary { cursor: pointer; color: var(--sello); font-size: .85rem; font-weight: 600; }
.delivery-repair > p { color: var(--tinta-2); font-size: .85rem; }
@media (max-width: 720px) {
  .delivery-inline { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .delivery-preparation .primary-button, .delivery-preparation .secondary-button { width: 100%; }
  .delivery-events a { display: block; margin: .3rem 0 0; }
}

/* Stripe settings and reconciliation share the existing paper, ink and seal palette. */
.stripe-state { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--tinta-2); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.stripe-state.is-connected { color: var(--safe); background: var(--safe-soft); border-color: var(--safe-borde); }
.stripe-state.is-attention { color: var(--warning); background: var(--warning-soft); border-color: var(--warning-borde); }
.stripe-state.is-disconnected { background: var(--papel-2); }
.stripe-status-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin: 1.6rem 0 1rem; }
.stripe-status-grid div { min-width: 0; }
.stripe-status-grid dt { color: var(--tinta-3); font-size: .78rem; margin-bottom: .45rem; }
.stripe-status-grid dd { margin: 0; font-size: .9rem; font-weight: 500; overflow-wrap: anywhere; }
.stripe-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1.3rem 0 1rem; }
.stripe-actions form { margin: 0; }
.stripe-check { display: flex; align-items: flex-start; gap: .65rem; color: var(--tinta-2); font-size: .88rem; }
.stripe-check input[type=checkbox] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: .1rem 0 0; accent-color: var(--sello); }
.stripe-notice { padding: 1rem 1.2rem; border: 1px solid var(--safe-borde); border-radius: 10px; background: var(--safe-soft); color: var(--safe); font-size: .9rem; }
.stripe-message { margin-bottom: 1.3rem; }
.stripe-progress { padding: .8rem 1rem; border-left: 3px solid var(--sello); background: var(--papel-2); font-size: .88rem; }
.stripe-settings-disclosure > summary { cursor: pointer; color: var(--tinta); font-weight: 600; }
.stripe-settings-disclosure > p { margin-top: 1rem; }
.stripe-connection h2 { overflow-wrap: anywhere; }
.stripe-table { table-layout: fixed; width: 100%; }
.stripe-table td, .stripe-table th { overflow-wrap: anywhere; vertical-align: top; }
.stripe-table small { display: block; margin-top: .3rem; color: var(--tinta-3); font-size: .74rem; }
.stripe-amount { font-variant-numeric: tabular-nums; }
.stripe-scope { margin-top: 1.4rem; }
.stripe-report-tabs { display: flex; gap: .4rem; border-bottom: 1px solid var(--line); margin: .5rem 0 1.5rem; }
.stripe-report-tabs a { padding: .8rem 1rem; color: var(--tinta-2); text-decoration: none; border-bottom: 2px solid transparent; font-size: .9rem; }
.stripe-report-tabs a[aria-current=page] { color: var(--sello); border-color: var(--sello); font-weight: 600; }
.stripe-coverage { margin: 1rem 0 1.5rem; padding: 1rem 1.2rem; border: 1px solid var(--warning-borde); background: var(--warning-soft); color: var(--warning); border-radius: 10px; font-size: .88rem; }
.stripe-coverage summary { cursor: pointer; font-weight: 600; }
.stripe-coverage ul { margin: .8rem 0 0; padding-left: 1.2rem; }
.stripe-coverage li + li { margin-top: .35rem; }
.stripe-report-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; margin: 1.4rem 0; }
.stripe-report-cards div { display: flex; flex-direction: column; gap: .6rem; min-width: 0; }
.stripe-report-cards span { color: var(--tinta-3); font-size: .78rem; line-height: 1.5; }
.stripe-report-cards strong { font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(1.15rem, 1.8vw, 1.65rem); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 960px) { .stripe-report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .stripe-status-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .stripe-actions { align-items: stretch; flex-direction: column; }
  .stripe-actions form, .stripe-actions button { width: 100%; }
  .stripe-connection .ledger-heading { align-items: flex-start; }
  .stripe-table td { overflow-wrap: anywhere; }
}
@media (max-width: 380px) { .stripe-report-cards { grid-template-columns: minmax(0, 1fr); } }

/* Informe mensual: resumen primero; comprobaciones al abrir cada apartado. */
.report-disclosure > summary { cursor: pointer; font-weight: 600; font-size: 1rem; }
.report-disclosure > summary span { display: block; margin: .45rem 0 0 1rem; font-size: .82rem; font-weight: 400; color: var(--tinta-2); }
.report-disclosure-body { margin-top: 1.5rem; }
.report-review-count { font-size: .8rem; color: var(--sello); font-weight: 600; }
.report-quiet-note { margin-top: 1.1rem; color: var(--tinta-2); font-size: .82rem; line-height: 1.65; overflow-wrap: anywhere; }
.report-quiet-note > summary { cursor: pointer; }
.report-web-totals { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1.2rem; padding: 1.5rem 0; }
.report-web-totals > div { display: grid; gap: .6rem; }
.report-web-totals span { color: var(--tinta-2); font-size: .8rem; }
.report-web-totals strong { font-size: 1.5rem; font-weight: 600; overflow-wrap: anywhere; }
.report-sale { border-top: 1px solid var(--line-soft); }
.report-sale > summary { display: grid; grid-template-columns: minmax(0,1fr) minmax(8rem,.6fr) auto 1rem; align-items: center; gap: 1rem; cursor: pointer; padding: 1.15rem 0; list-style: none; }
.report-sale > summary::-webkit-details-marker { display: none; }
.report-sale > summary::after { content: '+'; color: var(--sello); text-align: right; }
.report-sale[open] > summary::after { content: '−'; }
.report-sale-name, .report-sale-amount { display: grid; gap: .35rem; min-width: 0; overflow-wrap: anywhere; }
.report-sale-name strong, .report-sale-amount { font-size: .9rem; }
.report-sale small { font-size: .75rem; color: var(--tinta-2); font-weight: 400; }
.report-sale-state { color: var(--sello); font-size: .8rem; }
.report-sale-body { padding: 0 0 1.4rem; font-size: .85rem; line-height: 1.6; }
.report-comparison { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.report-comparison dt { color: var(--tinta-2); font-size: .8rem; }
.report-comparison dd { margin: .4rem 0 0; font-weight: 600; }
.report-issues { padding-left: 1.2rem; color: var(--tinta-2); }
.report-issues li + li { margin-top: .5rem; }
.report-sale > summary:focus-visible, .report-disclosure > summary:focus-visible, .report-quiet-note > summary:focus-visible { outline: 2px solid var(--sello); outline-offset: 5px; border-radius: 3px; }
@media (max-width: 600px) {
  .report-web-totals { gap: .7rem; }
  .report-web-totals strong { font-size: 1.15rem; }
  .report-sale > summary { grid-template-columns: minmax(0,1fr) auto 1rem; gap: .7rem; }
  .report-sale-state { grid-column: 1 / 3; grid-row: 2; }
  .report-sale > summary::after { grid-column: 3; grid-row: 1; }
}