/* 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.
     Propuesta visual de noviembre (tanda 1): la mesa se aclara, las tarjetas
     dejan el blanco puro y el blanco queda solo para la hoja de la factura.
     Los mismos nombres se redefinen en oscuro más abajo, en dos bloques
     espejo (preferencia del sistema y tema fijado a mano).
     color-scheme sigue siempre al tema, para que los controles del navegador
     (casillas, opciones, campos de fecha) no salgan blancos en oscuro: claro
     aquí, oscuro en esos dos bloques y claro otra vez dentro de la hoja. */
  color-scheme: light;
  --mesa: #eeebe5;
  --papel: #fbfaf7;
  --papel-2: #f2efe9;
  /* La hoja de la factura en pantalla (editor, vista previa y ficha): papel
     blanco con tinta oscura en los dos temas; en oscuro, atenuada. El PDF
     tiene su propia plantilla y no usa estos valores. */
  --hoja: #ffffff;
  --hoja-2: #f4f2ef;
  --hoja-tinta: #1b1820;
  --hoja-tinta-2: #565064;
  --hoja-tinta-3: #6a6375;
  --hoja-linea: #e4e0dc;
  --hoja-linea-2: #ece8e4;
  --hoja-sello: #6a2e9b;
  --hoja-bien: #1d7251;
  /* Marcas de datos (columnas, barras): 3:1 sobre el papel. */
  --trazo: #8c8696;
  /* El carril de una barra de progreso. */
  --pista: #dcd7ce;
  /* La pestaña o sección activa: siempre más clara que su caja. */
  --elevado: #fbfaf7;
  /* El fondo de un campo de la portada. */
  --campo: #ffffff;
  /* La matriz de la portada de acceso y lo que se escribe sobre ella. */
  --matriz: #6a2e9b;
  --sobre-matriz: #ffffff;
  --sobre-matriz-2: #e6daf1;
  --tinta: #1b1820;
  --tinta-2: #565064;
  --tinta-3: #6a6375;
  --sello: #6a2e9b;
  --sello-oscuro: #57268a;
  --sello-piel: #f0e7f8;
  --sello-borde: #d9c4ee;
  /* Anillo de foco: el sello, que da ≥3:1 sobre papel y carpeta en los dos
     temas. Sobre papel claro fijo (la hoja) se redefine abajo. */
  --foco: var(--sello);
  --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. */
  --carpeta: var(--mesa);
  --ink: var(--tinta);
  --muted: var(--tinta-2);
  --line: #d8d3ca;
  --line-soft: #e8e4dc;
  /* Borde de controles (desplegables, buscador): 3:1 sobre el papel. */
  --borde-control: #7c7587;
  --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 0 rgba(27, 24, 32, 0.05), 0 14px 30px -20px rgba(27, 24, 32, 0.28);
  --shadow-alta: 0 1px 2px rgba(27, 24, 32, 0.08), 0 30px 60px -28px rgba(27, 24, 32, 0.38);
  /* La sombra del botón principal; en oscuro, sin halo violeta. */
  --sombra-sello: 0 12px 22px -14px #6a2e9b;
  --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;
}

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(--foco);
  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: 88px minmax(0, 1fr);
  min-height: 100vh;
}

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

.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,
.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;
}

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

.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;
}

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

.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);
}

.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 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 {
  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 {
  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 {
  background: var(--papel);
  border-color: var(--foco);
}

.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 {
  background: var(--papel);
  border-color: var(--foco);
}

/* 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);
}

.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;
}

/* 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;
}

.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);
}

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

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

.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);
}

.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,
.record-actions,
.action-stack {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

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

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

.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;
}

.line-discount-options > summary::-webkit-details-marker {
  display: none;
}

.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-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;
}

.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,
.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;
}

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

.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-profile-form,
.payment-profile-archived,
.manual-payment-profile-selector {
  max-width: 1050px;
}

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

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

.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) {

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

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

  .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;
}

.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);
  /* Borde de control a 3:1 sobre el papel (fase 2). */
  border-color: var(--borde-control);
}

.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-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;
}

.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;
}

.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);
}

.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) {

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

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

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

  .security-grid,
  .planning-grid,
  .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) {

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

  .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));
  }

  .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;
  }

  .metric-card {
    min-height: 128px;
    padding: 17px;
  }

  .metric-card strong {
    font-size: 1.7rem;
  }

  .panel {
    padding: 20px;
  }

  .definition-list > div {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .definition-list dd {
    text-align: left;
  }

  .form-grid,
  .choice-grid,
  .fiscal-facts-grid,
  .inline-line-grid,
  .line-discount-grid,
  .payment-action-grid {
    grid-template-columns: 1fr;
  }

  .inline-line-form-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .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,
  .simulation-list > li {
    align-items: stretch;
    flex-direction: column;
  }

  .header-actions,
  .record-actions,
  .section-heading,
  .document-warning-block,
  .preview-header {
    align-items: stretch;
    flex-direction: column;
  }

  .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,
  .fiscal-fact-card {
    padding: 17px;
  }

  .inline-line-form {
    padding: 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;
  }

  .t-rail,
  .t-tope,
  .t-barra,
  .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 {
  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 {
  display: inline-flex;
  width: auto;
}

/* Los botones de acción no parten su texto en dos líneas */
.primary-button,
.secondary-button,
.page-header .primary-button {
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   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,
.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;
}

/* El botón principal lleva la sombra del sello (--sombra-sello): violeta en
   claro y sin halo en oscuro. Igual en .t-boton.es-principal. */
.primary-button {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    var(--sombra-sello);
}

.primary-button:hover {
  filter: brightness(1.06);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 2px 4px rgba(27, 24, 32, 0.16),
    var(--sombra-sello);
}

.primary-button:active,
.secondary-button:active,
.danger-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 {
  background: var(--papel);
  border-color: var(--foco);
}

.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);
}

/* Filas: al pasar por encima se desplazan como una hoja suelta
   y asoma el filo de tinta por la izquierda */
.data-table tbody tr {
  transition:
    background 0.22s,
    transform 0.3s var(--salida),
    box-shadow 0.3s var(--salida);
}

.data-table tbody tr: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,
.fiscal-fact-card,
.payment-profile-selection-card {
  transition:
    transform 0.3s var(--salida),
    box-shadow 0.3s var(--salida),
    border-color 0.3s;
}

.metric-card:hover,
.fiscal-fact-card:hover {
  transform: translateY(-3px) rotate(-0.2deg);
  box-shadow: var(--shadow);
  border-color: var(--line);
}

/* 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-l);
  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);
}

/* Fila con menú «•••» (borrador sin cliente): el menú queda a la derecha,
   fuera del enlace. Todas las filas de esa lista reservan su hueco para que
   las columnas cuadren. */

.t-fila-menu {
  justify-self: start;
}

/* El menú abierto no se recorta con el panel (que oculta lo que sobresale
   para redondear sus esquinas); la última fila redondea su propio fondo. */

.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-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(--borde-control);
  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(--foco);
}

.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(--borde-control);
  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 {
  border-color: var(--foco);
}

.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);
}

/* Si es lo primero de su tarjeta, sin filete: no separa nada (Fer, 2-oct). */
.t-vacio:first-child {
  border-top: 0;
}

.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-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-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-grafico {
  position: relative;
  padding: 36px 18px 4px;
}

.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; }
}

@media (max-width: 720px) {
  .t-indicadores {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .t-indicador-cifra {
    font-size: 1.35rem;
  }
}

.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);
}

/* 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) {

  .t-fila-ancha {
    grid-template-columns: minmax(0, 1fr) 102px 118px 194px;
    gap: 12px;
  }
}

.t-fila-ancha:hover {
  background: var(--papel-2);
}

.t-fila-ancha.es-apagada {
  color: var(--tinta-3);
}

.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;
}

@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;
  }
}

/* ── El talón: matriz arriba, perforado y la hoja colgando ──────
   La matriz de las filas (.t-talon > .t-matriz) es otra pieza y vive en
   «Fila de factura: el talón»; esta es la de la vista previa antigua. */
.t-bloc {
  margin-bottom: 22px;
}

.t-bloc > .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-bloc > .t-matriz {
    padding: 15px 16px 17px;
  }

  .t-matriz-numero {
    font-size: 1.4rem;
  }
}

@media print {
  .t-bloc > .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 o desde Ajustes (bloque espejo de abajo). */
@media (prefers-color-scheme: dark) {
  
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --mesa: #131118;
    --papel: #1e1b26;
    --papel-2: #262231;
    /* La hoja de la factura, atenuada: un gris lila en vez del blanco puro,
       con la tinta igual de oscura, para que no deslumbre entre tarjetas. */
    --hoja: #dfdce6;
    --hoja-2: #d2cedb;
    --hoja-tinta-2: #4d4759;
    --hoja-tinta-3: #575064;
    --hoja-linea: #bdb7c7;
    --hoja-linea-2: #cbc6d4;
    --hoja-sello: #5c2789;
    --hoja-bien: #145a3f;
    --trazo: #6f6782;
    --pista: #3a3348;
    --elevado: #383247;
    --campo: #15121b;
    --matriz: #55267f;
    --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;

    --carpeta: var(--mesa);
    --ink: var(--tinta);
    --muted: var(--tinta-2);
    --line: #3a3348;
    --line-soft: #2c2637;
    --borde-control: #7a7190;
    --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 14px 30px -20px rgba(0, 0, 0, 0.8);
    --shadow-alta: 0 2px 4px rgba(0, 0, 0, 0.5), 0 30px 60px -28px rgba(0, 0, 0, 0.9);
    --sombra-sello: 0 10px 18px -12px rgba(0, 0, 0, 0.9);
  }

  /* 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"] {
    color-scheme: dark;
    --mesa: #131118;
    --papel: #1e1b26;
    --papel-2: #262231;
    /* La hoja de la factura, atenuada: un gris lila en vez del blanco puro,
       con la tinta igual de oscura, para que no deslumbre entre tarjetas. */
    --hoja: #dfdce6;
    --hoja-2: #d2cedb;
    --hoja-tinta-2: #4d4759;
    --hoja-tinta-3: #575064;
    --hoja-linea: #bdb7c7;
    --hoja-linea-2: #cbc6d4;
    --hoja-sello: #5c2789;
    --hoja-bien: #145a3f;
    --trazo: #6f6782;
    --pista: #3a3348;
    --elevado: #383247;
    --campo: #15121b;
    --matriz: #55267f;
    --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;

    --carpeta: var(--mesa);
    --ink: var(--tinta);
    --muted: var(--tinta-2);
    --line: #3a3348;
    --line-soft: #2c2637;
    --borde-control: #7a7190;
    --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 14px 30px -20px rgba(0, 0, 0, 0.8);
    --shadow-alta: 0 2px 4px rgba(0, 0, 0, 0.5), 0 30px 60px -28px rgba(0, 0, 0, 0.9);
    --sombra-sello: 0 10px 18px -12px rgba(0, 0, 0, 0.9);
  }

  /* 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-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 {
  border-color: var(--foco);
}

/* 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-formulario-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px 18px;
  border-top: 1px solid var(--line-soft);
}

/* Aviso de sesión caducada al crear una factura (resto de AUD-03). */
.t-aviso-sesion {
  flex: 1 1 16rem;
  margin: 0;
  color: var(--danger);
  font-size: 0.8rem;
}

.t-formulario-pie:has(.t-aviso-sesion:not(:empty)) {
  flex-wrap: wrap;
}

.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;
}

/* ── 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 {
  background: var(--papel);
  border-color: var(--foco);
}

.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 {
  border-color: var(--foco);
}

.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 {
  border-color: var(--foco);
}

/* ── 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 .field-hint {
  margin: 8px 0 0;
}

.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-lateral {
    grid-template-columns: minmax(0, 1fr);
  }

}

@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;
  }

}

/* ── 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 {
  border-color: var(--foco);
}

.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;
  }
}

/* ── 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;
}

@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);
  }

}

/* ── 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;
  }
}

/* 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(--foco);
  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-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-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; }
}

/* Un formulario enviado espera su respuesta: el segundo clic no sale
   (panel.js, AUD-20) y el botón lo indica. */
form[aria-busy="true"] button[type="submit"] { cursor: progress; }

/* Stripe para gestoría. El resumen es el mismo HTML que el PDF (que lleva
   su propio estilo); en el panel adopta el lenguaje de los informes
   (AUD-21) y su tabla por tratamiento se desplaza en horizontal en un
   móvil, sin esconder la columna «Cuota» (AUD-14). */
.gestoria-resumen section { margin-top: 1.75rem; }
.gestoria-resumen h2 { padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.gestoria-resumen .totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .25rem 1.75rem; margin: 1rem 0 1.25rem; }
.gestoria-resumen .totals div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; min-width: 0; padding: .6rem 0; border-bottom: 1px solid var(--line-soft); }
.gestoria-resumen .totals dt { color: var(--tinta-2); font-size: .85rem; }
.gestoria-resumen .totals dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gestoria-resumen .totals .highlight { grid-column: 1 / -1; padding: .8rem 1rem; border: 1px solid var(--sello-borde); border-radius: var(--radio-s); background: var(--sello-piel); font-size: 1.05rem; }
.gestoria-resumen .totals .highlight dt { color: var(--tinta); font-weight: 600; }
.gestoria-resumen .table-wrap { margin: 1rem 0; background: var(--papel); }
.gestoria-resumen .table-wrap:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.gestoria-resumen table { width: 100%; min-width: 34rem; border-collapse: collapse; font-size: .85rem; font-variant-numeric: tabular-nums; }
.gestoria-resumen th, .gestoria-resumen td { padding: .7rem .8rem; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--line-soft); }
.gestoria-resumen th { color: var(--tinta-2); background: var(--papel-2); font-size: .75rem; font-weight: 600; }
.gestoria-resumen th:first-child, .gestoria-resumen td:first-child { text-align: left; white-space: normal; min-width: 11rem; }
.gestoria-resumen tbody tr:last-child td { border-bottom: 0; }
.gestoria-resumen aside { margin: 1.25rem 0; padding: .9rem 1.1rem; border: 1px solid var(--warning-borde); border-radius: var(--radio-s); background: var(--warning-soft); color: var(--tinta); }
.gestoria-resumen aside ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.gestoria-resumen .note { font-size: .8rem; }
.gestoria-resumen .version { font-family: var(--mono); font-size: .72rem; overflow-wrap: anywhere; }
.gestoria-versiones ul { list-style: none; margin: .75rem 0 0; padding: 0; }
.gestoria-versiones li { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--line-soft); font-size: .88rem; }
.gestoria-versiones li:last-child { border-bottom: 0; }
.gestoria-versiones .gestoria-version-id { font-family: var(--mono); font-size: .78rem; color: var(--tinta-2); }
@media (max-width: 600px) {
  .gestoria-resumen .totals { grid-template-columns: 1fr; }
}

/* 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-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(--foco); 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; }

.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; }
.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; }
@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; }
}

/* 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(--foco); 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; }
}

/* Contraseña: cambio en el panel y recuperación por correo. */
.form-success {
  margin: 16px 0 0;
  padding: 13px 14px;
  color: var(--safe);
  font-size: 0.85rem;
  line-height: 1.5;
  background: var(--success-soft);
  border: 1px solid var(--safe-borde);
  border-radius: var(--radio-s);
}

.password-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.password-form .field {
  margin: 0;
}

.error-card .form-error {
  margin: 16px 0 0;
  color: var(--danger);
}

.error-card .form-success {
  color: var(--safe);
}

.error-card .primary-button + p,
.error-card form + p {
  margin-top: 16px;
}

.error-card .form-success + p,
.error-card .form-error + form {
  margin-top: 12px;
}

/* ══ Rediseño · fase 0: franja de prueba y componentes ═══════════
   (El menú vive en «Propuesta visual de noviembre · tanda 2: navegación».)
   Referencia: artifact «Talonario a dieta» (Inicio y Ajustes). Todo el
   color sale de los tokens, así que vale para los dos temas; solo las
   superficies que en claro se separan por sombra llevan borde en oscuro. */

/* ── Franja de «modo prueba», en una línea ─────────────────────── */

.safety-banner {
  min-height: 0;
  gap: 9px;
  padding: 7px clamp(22px, 4vw, 54px);
  font-size: 0.8rem;
  font-weight: 500;
}

.safety-banner p {
  margin: 0;
}

.safety-dot {
  width: 7px;
  height: 7px;
  flex-basis: 7px;
  box-shadow: none;
}

@media (max-width: 760px) {
  .safety-banner {
    align-items: center;
    padding: 7px 18px;
  }
}

/* ── Componentes compartidos (src/ui-components.ts) ───────────── */

.t-icono {
  width: 16px;
  height: 16px;
  flex: none;
}

/* Botón principal y secundario */
.t-boton {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 16px;
  font: 600 0.9rem/1.2 var(--ui);
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s var(--muelle);
}

.t-boton:active {
  transform: translateY(1px) scale(0.99);
}

.t-boton.es-principal {
  color: var(--sobre-sello);
  background: var(--sello);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--sombra-sello);
}

.t-boton.es-principal:hover {
  background: var(--sello-oscuro);
}

.t-boton.es-secundario {
  color: var(--tinta);
  background: var(--papel);
  border-color: var(--borde-control);
}

.t-boton.es-secundario:hover {
  background: var(--papel-2);
  border-color: var(--tinta-3);
}

/* Tarjeta y su rótulo de grupo */
.t-tarjeta-grupo {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.t-tarjeta-rotulo {
  margin: 0 0 0 4px;
  color: var(--tinta-3);
  font: 500 0.72rem/1.2 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.t-tarjeta {
  min-width: 0;
  padding: 16px 18px;
  background: var(--papel);
  border: 1px solid transparent;
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.t-tarjeta.es-lista {
  padding: 0;
  overflow: hidden;
}

/* Fila de lista clicable entera */
.t-fila-lista {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  color: var(--tinta);
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
  transition: background 0.2s;
}

.t-fila-lista:first-child {
  border-top: 0;
}

.t-fila-lista:hover {
  background: var(--papel-2);
}

.t-fila-lista:focus-visible {
  outline-offset: -3px;
}

.t-fila-lista-texto {
  min-width: 0;
}

.t-fila-lista strong {
  display: block;
  font-weight: 600;
}

.t-fila-lista small {
  display: block;
  color: var(--tinta-3);
  font-size: 0.8rem;
}

.t-fila-lista-valor {
  color: var(--tinta-3);
  font-size: 0.82rem;
  text-align: right;
  white-space: nowrap;
}

.t-fila-lista > .t-icono {
  color: var(--tinta-3);
  transition: transform 0.3s var(--salida), color 0.2s;
}

.t-fila-lista:hover > .t-icono {
  color: var(--tinta);
  transform: translateX(2px);
}

/* Estado: pastilla con punto, en los cuatro tonos de siempre (neutro, bien,
   aviso y peligro). El fondo suave y el texto del tono; el punto, del color
   del texto. En línea y no en flex: con flex, el texto y el <time> de
   «vence 7 oct» eran dos piezas separadas por el hueco y el espacio se veía
   doble (revisión de la fase 3). */
.t-estado {
  display: inline-block;
  max-width: 100%;
  padding: 4px 10px 4px 9px;
  overflow: hidden;
  color: var(--tinta-2);
  font: 600 12.5px/1.25 var(--ui);
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--papel-2);
  border-radius: 999px;
}

.t-estado::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  vertical-align: 0.06em;
  background: currentColor;
  border-radius: 50%;
}

.t-estado.es-bien {
  color: var(--safe);
  background: var(--safe-soft);
}

.t-estado.es-aviso {
  color: var(--warning);
  background: var(--warning-soft);
}

.t-estado.es-peligro {
  color: var(--danger);
  background: var(--danger-soft);
}

/* Línea de resumen con valores que se pueden pulsar */
.t-resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.9rem;
}

/* Cada parte lleva su separador pegado al final, así que al partirse la
   línea el «·» nunca queda al principio (revisión final de la fase 1). */
.t-resumen-parte {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.t-resumen-parte[hidden] {
  display: none;
}

.t-resumen-parte:has(~ .t-resumen-parte:not([hidden]))::after {
  content: "·";
  content: "·" / "";
  margin-left: 6px;
  color: var(--tinta-3);
}

.t-resumen-valor {
  padding: 1px 3px;
  color: var(--tinta);
  font: inherit;
  text-decoration: none;
  background: none;
  border: 0;
  border-bottom: 1.5px dotted var(--sello-borde);
  border-radius: 0;
  cursor: pointer;
  transition: background 0.2s, border-radius 0.2s;
}

.t-resumen-valor:hover {
  background: var(--sello-piel);
  border-bottom-color: transparent;
  border-radius: 6px;
}

.t-resumen-fijo {
  color: var(--tinta-2);
}

/* Aviso de una sola frase con enlace */
.t-aviso {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0;
  padding: 9px 12px;
  font-size: 0.88rem;
  border-radius: 10px;
}

.t-aviso.es-aviso { color: var(--warning); background: var(--warning-soft); }
.t-aviso.es-peligro { color: var(--danger); background: var(--danger-soft); }
.t-aviso.es-neutro { color: var(--tinta-2); background: var(--papel-2); }

.t-aviso-punto {
  width: 7px;
  height: 7px;
  flex: none;
  background: currentColor;
  border-radius: 50%;
  transform: translateY(-1px);
}

.t-aviso a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Menú «•••» */
.t-menu-mas {
  position: relative;
  display: inline-block;
}

.t-menu-mas > summary {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--tinta-2);
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: 9px;
  cursor: pointer;
  list-style: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.t-menu-mas > summary::-webkit-details-marker {
  display: none;
}

.t-menu-mas > summary:hover,
.t-menu-mas[open] > summary {
  color: var(--tinta);
  background: var(--papel-2);
  border-color: var(--tinta-3);
}

.t-menu-mas-lista {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  max-width: min(320px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  padding: 6px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-alta);
}

.t-menu-mas-lista form {
  margin: 0;
}

.t-menu-mas-opcion {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 7px 10px;
  color: var(--tinta);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.t-menu-mas-opcion:hover {
  background: var(--papel-2);
}

.t-menu-mas-opcion.es-peligro {
  color: var(--danger);
}

/* Aviso temporal con «Deshacer» */
.t-aviso-temporal {
  position: fixed;
  z-index: 60;
  bottom: 24px;
  left: 50%;
  max-width: min(560px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 8px 8px 16px;
  color: var(--papel);
  background: var(--tinta);
  border-radius: 10px;
  box-shadow: var(--shadow-alta);
  font-size: 0.88rem;
  transform: translateX(-50%);
  animation: aviso-temporal-entra 0.32s var(--salida) backwards;
  transition: opacity 0.26s, transform 0.26s var(--salida);
}

.t-aviso-temporal form {
  margin: 0;
}

.t-aviso-temporal.se-va {
  opacity: 0;
  transform: translate(-50%, 8px);
}

.t-aviso-temporal-deshacer {
  min-height: 32px;
  padding: 0 8px;
  color: var(--sello-borde);
  font: inherit;
  font-weight: 700;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.t-aviso-temporal-deshacer:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.t-aviso-temporal-cerrar {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: inherit;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  opacity: 0.75;
}

.t-aviso-temporal-cerrar:hover {
  opacity: 1;
}

.t-aviso-temporal :focus-visible {
  outline-color: var(--sello-borde);
}

@keyframes aviso-temporal-entra {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-aviso-temporal,
  .t-boton,
  .t-fila-lista > .t-icono {
    animation: none;
    transition: none;
  }
}

/* Selector segmentado (tema) */
.t-segmento {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 3px;
  background: var(--papel-2);
  border: 0;
  border-radius: 9px;
}

.t-segmento-opcion {
  position: relative;
  display: block;
}

.t-segmento-opcion input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.t-segmento-opcion span {
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 4px 11px;
  color: var(--tinta-2);
  font-size: 0.85rem;
  border-radius: 7px;
  transition: background 0.2s, color 0.2s;
}

.t-segmento-opcion:hover span {
  color: var(--tinta);
}

.t-segmento-opcion input:checked + span {
  color: var(--tinta);
  font-weight: 600;
  background: var(--papel);
  box-shadow: var(--shadow);
}

.t-segmento-opcion input:focus-visible + span {
  outline: 3px solid var(--foco);
  outline-offset: 1px;
}

/* En oscuro las sombras no separan: borde fino. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .t-tarjeta {
    border-color: var(--line-soft);
    box-shadow: none;
  }

  :root:not([data-theme="light"]) .t-segmento-opcion input:checked + span {
    box-shadow: inset 0 0 0 1px var(--line);
  }
}

/* Espejo del bloque anterior para el tema forzado a mano.
   Si tocas uno, toca el otro. */
:root[data-theme="dark"] .t-tarjeta {
  border-color: var(--line-soft);
  box-shadow: none;
}

:root[data-theme="dark"] .t-segmento-opcion input:checked + span {
  box-shadow: inset 0 0 0 1px var(--line);
}

/* ── Ajustes provisional ───────────────────────────────────────── */

.ajustes-grupos {
  max-width: 560px;
  display: grid;
  gap: 18px;
}

/* Documentos (Archivo): el selector de archivo no empuja la tarjeta en
   pantallas estrechas. */
.panel input[type="file"] {
  max-width: 100%;
}

/* ══ Rediseño · fase 1: editor de factura en una sola pantalla ═════
   Referencia: artifact «Talonario a dieta», «Editor · segunda versión».
   A la izquierda lo que escribes; a la derecha la hoja, siempre en papel
   blanco con tinta oscura, también en modo oscuro: por eso la hoja usa sus
   propios colores y no los tokens, que se invierten de noche. */

.ed-cabecera {
  align-items: flex-end;
}

.ed-estado {
  color: var(--tinta-3);
  font-size: 0.86rem;
}

.ed-cabecera-acciones {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

.ed-mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (min-width: 1100px) {
  .ed-mesa {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  }

  .ed-hoja-columna {
    position: sticky;
    top: 18px;
  }
}

.ed-formulario {
  /* Borde de los campos con al menos 3:1 sobre el papel y la carpeta
     (WCAG 1.4.11): el mismo token que el resto de controles. */
  --campo-borde: var(--borde-control);
  display: grid;
  gap: 18px;
  min-width: 0;
}

.ed-bloque {
  display: grid;
  gap: 9px;
  min-width: 0;
}

.ed-rotulo {
  margin: 0;
  color: var(--tinta-3);
  font: 500 0.74rem/1.3 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ed-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.84rem;
}

.ed-enlace,
.ed-aviso-accion {
  padding: 2px 0;
  color: var(--sello);
  font: inherit;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}

.ed-enlace:hover,
.ed-aviso-accion:hover {
  text-decoration-color: currentColor;
}

.ed-aviso-accion {
  color: inherit;
  text-decoration-color: currentColor;
}

.ed-avisos {
  display: grid;
  gap: 6px;
}

.ed-avisos:empty {
  display: none;
}

/* Controles del editor: papel, línea fina y el sello al enfocar. */
.ed-formulario input:not([type="radio"]):not([type="checkbox"]),
.ed-formulario select,
.ed-formulario textarea,
.ed-recibir input {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 11px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--campo-borde, var(--line));
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.ed-formulario textarea {
  resize: vertical;
}

.ed-formulario input:not([type="radio"]):not([type="checkbox"]):hover,
.ed-formulario select:hover,
.ed-formulario textarea:hover {
  border-color: var(--tinta-3);
}

.ed-formulario input:not([type="radio"]):not([type="checkbox"]):focus,
.ed-formulario select:focus,
.ed-formulario textarea:focus,
.ed-recibir input:focus {
  border-color: var(--foco);
}

.ed-formulario [aria-invalid="true"] {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 3px var(--danger-soft) !important;
}

.ed-formulario input::placeholder,
.ed-formulario textarea::placeholder {
  color: var(--tinta-3);
}

/* ── Cliente ─────────────────────────────────────────────────── */
.ed-cliente {
  position: relative;
  display: grid;
  gap: 10px;
}

.ed-cliente-elegido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 10px;
}

.ed-cliente-elegido > div {
  min-width: 0;
}

.ed-cliente-elegido strong,
.ed-opcion strong {
  display: block;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-cliente-elegido small,
.ed-opcion small {
  display: block;
  color: var(--tinta-3);
  font-size: 0.8rem;
}

.ed-buscador {
  position: relative;
}

.ed-opciones {
  position: absolute;
  z-index: 25;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 290px;
  margin: 0;
  padding: 5px;
  overflow: auto;
  list-style: none;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-alta);
}

.ed-opcion {
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
}

.ed-opcion[aria-selected="true"],
.ed-opcion:hover {
  background: var(--sello-piel);
}

.ed-opcion.es-crear strong {
  color: var(--sello);
}

.ed-cliente-nuevo {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 14px 14px;
  background: var(--papel);
  border: 1px solid var(--sello-borde);
  border-radius: 12px;
}

.ed-cliente-nuevo legend {
  padding: 0 4px;
  color: var(--tinta);
  font-weight: 600;
}

.ed-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ed-campo {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.ed-campo.es-ancho {
  grid-column: 1 / -1;
}

.ed-campo label,
.ed-campo-rotulo,
.ed-pop > label,
.ed-motivo label,
.ed-recibir label {
  color: var(--tinta-2);
  font-size: 0.82rem;
}

/* Segmentos: opciones cortas de un toque. */
.ed-segmento {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.ed-segmento label {
  position: relative;
  display: inline-flex;
}

.ed-segmento input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ed-segmento span {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  color: var(--tinta-2);
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 99px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.ed-segmento label:hover span {
  border-color: var(--tinta-3);
}

.ed-segmento input:checked + span {
  color: var(--tinta);
  font-weight: 600;
  background: var(--sello-piel);
  border-color: var(--sello);
}

.ed-segmento input:focus-visible + span {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* ── Línea de resumen y sus selectores ───────────────────────── */
.ed-resumen-linea {
  font-size: 0.92rem;
}

.ed-token:disabled {
  color: var(--tinta-2);
  border-bottom-color: transparent;
  cursor: default;
}

.ed-token:disabled:hover {
  background: none;
}

.ed-token[aria-expanded="true"] {
  font-weight: 600;
  background: var(--sello-piel);
  border-bottom-color: transparent;
  border-radius: 6px;
}

.ed-pop {
  display: grid;
  gap: 9px;
  padding: 12px 14px;
  background: var(--papel);
  border: 1px solid var(--sello-borde);
  border-radius: 12px;
  box-shadow: var(--shadow-alta);
}

.ed-pop input[type="date"] {
  max-width: 220px;
}

.ed-vence-otro {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--tinta-2);
  font-size: 0.84rem;
}

.ed-vence-otro input {
  max-width: 96px;
}

.ed-opciones-radio {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
}

.ed-opcion-radio {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  padding: 8px 9px;
  border-radius: 9px;
  cursor: pointer;
}

.ed-opcion-radio:has(input:checked) {
  background: var(--sello-piel);
}

.ed-opcion-radio input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--sello);
}

.ed-opcion-radio b {
  display: block;
  color: var(--tinta);
  font-weight: 600;
}

.ed-opcion-radio small {
  display: block;
  color: var(--tinta-2);
  font-size: 0.8rem;
}

.ed-opcion-radio.es-no-disponible {
  cursor: default;
}

.ed-opcion-radio.es-no-disponible b {
  color: var(--tinta-2);
}

.ed-motivo {
  display: grid;
  gap: 4px;
}

/* ── Conceptos ───────────────────────────────────────────────── */
.ed-lineas-cabecera,
.ed-linea {
  display: grid;
  /* Cantidad a 84 px: cabe «1,25» o «12,5» sin cortar (revisión, I-5). */
  grid-template-columns: minmax(0, 1fr) 84px 96px 34px;
  gap: 6px;
  align-items: center;
}

.ed-lineas-cabecera {
  padding: 0 2px;
  color: var(--tinta-3);
  font: 500 0.7rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ed-lineas {
  display: grid;
  gap: 6px;
}

.ed-bloque.es-conceptos {
  container-type: inline-size;
}

/* Columna estrecha (1120 px o móvil): el concepto va en su propia fila y
   cantidad, precio y «•••» debajo, a la derecha. */
@container (max-width: 460px) {
  .ed-lineas-cabecera {
    display: none;
  }

  .ed-linea {
    grid-template-columns: minmax(0, 1fr) 78px 92px 34px;
    padding-bottom: 6px;
    border-bottom: 1px dashed var(--line);
  }

  .ed-linea .ed-linea-texto {
    grid-column: 1 / -1;
  }

  .ed-linea .ed-linea-cantidad {
    grid-column: 2;
  }
}

.ed-linea .ed-linea-cantidad,
.ed-linea .ed-linea-precio {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ed-linea .t-menu-mas > summary {
  width: 34px;
  height: 42px;
}

.ed-linea-descuento {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--tinta-2);
  font-size: 0.84rem;
}

.ed-linea-descuento[hidden] {
  display: none;
}

.ed-linea-descuento input {
  max-width: 120px;
  text-align: right;
}

.ed-anadir {
  justify-self: start;
  min-height: 38px;
  padding: 7px 12px;
  color: var(--sello);
  font: inherit;
  font-weight: 600;
  background: none;
  border: 1px dashed var(--sello-borde);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.ed-anadir:hover {
  background: var(--sello-piel);
  border-color: var(--sello);
}

.ed-anadidos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Duplicar o descartar sin poder guardar antes: el motivo, junto al botón. */
.ed-accion-aviso {
  margin: 6px 10px 4px;
  max-width: 30ch;
  color: var(--danger);
  font-size: 0.82rem;
  line-height: 1.35;
}

/* Aviso de una acción sobre borradores dentro del panel de Facturas. */
.t-panel-aviso {
  margin: 0 18px 12px;
}

/* M-4: la nota de la última factura se ofrece; se usa con un clic. */
.ed-sugerencia {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
}

.ed-sugerencia q {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  color: var(--tinta);
}

.ed-opcional {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.ed-opcional-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ed-cobro-actualizar {
  margin: 0;
}

/* ── La hoja: papel claro con tinta oscura en los dos temas ─────
   Sus valores (--hoja…) viven en :root: blanco en claro y atenuado en
   oscuro. */
.ed-hoja {
  --hoja-papel: var(--hoja);
  position: relative;
  display: grid;
  gap: 16px;
  padding: 26px 26px 20px;
  color: var(--hoja-tinta);
  font-size: 0.86rem;
  line-height: 1.45;
  background: var(--hoja-papel);
  border-radius: 6px;
  box-shadow: var(--shadow-alta);
  color-scheme: light;
}

.ed-hoja-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.ed-hoja-cabecera b {
  font: 800 1.5rem/1 var(--display);
  letter-spacing: -0.02em;
}

.ed-hoja-numero {
  display: grid;
  justify-items: end;
  color: var(--hoja-tinta-3);
  font: 500 0.78rem/1.5 var(--mono);
}

.ed-hoja-partes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  color: var(--hoja-tinta-2);
}

.ed-hoja-partes strong {
  display: block;
  color: var(--hoja-tinta);
  overflow-wrap: anywhere;
}

.ed-hoja-partes p {
  margin: 0;
  overflow-wrap: anywhere;
}

.ed-hoja-rotulo {
  display: block;
  margin-bottom: 3px;
  color: var(--hoja-tinta-3);
  font: 500 0.66rem/1.2 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.ed-hoja-lineas {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.ed-hoja-lineas th {
  padding: 6px 0;
  color: var(--hoja-tinta-3);
  font: 500 0.66rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
  border-bottom: 1px solid var(--hoja-linea);
}

.ed-hoja-lineas td {
  padding: 8px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--hoja-linea);
  overflow-wrap: anywhere;
}

.ed-hoja-lineas td small {
  display: block;
  color: var(--hoja-tinta-3);
  font-size: 0.78rem;
}

.ed-hoja-lineas .ed-hoja-num {
  padding-left: 12px;
  text-align: right;
  white-space: nowrap;
}

.ed-hoja-lineas tr.es-vacia td {
  color: var(--hoja-tinta-3);
  font-style: italic;
}

.ed-hoja-totales {
  justify-self: end;
  width: min(100%, 260px);
  margin: 0;
  display: grid;
  gap: 3px;
  font-variant-numeric: tabular-nums;
}

.ed-hoja-totales > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--hoja-tinta-2);
}

.ed-hoja-totales > div[hidden] {
  display: none;
}

.ed-hoja-totales dt,
.ed-hoja-totales dd {
  margin: 0;
}

.ed-hoja-totales dd {
  color: var(--hoja-tinta);
  font-weight: 600;
  white-space: nowrap;
}

.ed-hoja-totales .ed-hoja-pagar {
  margin-top: 6px;
  padding-top: 8px;
  color: var(--hoja-tinta);
  font: 800 1.35rem/1.1 var(--display);
  border-top: 2px solid var(--hoja-tinta);
}

.ed-hoja-totales .ed-hoja-pagar dd {
  font-weight: 800;
}

.ed-recibir {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--hoja-linea);
}

.ed-recibir-boton {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 0;
  color: var(--hoja-sello);
  font: inherit;
  font-weight: 600;
  background: none;
  border: 0;
  cursor: pointer;
}

.ed-recibir-boton:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ed-recibir label,
.ed-recibir .ed-nota {
  color: var(--hoja-tinta-2);
}

.ed-recibir-fila {
  display: flex;
  gap: 8px;
}

/* Dentro de la hoja los controles también son de papel. */
.ed-recibir input {
  color: var(--hoja-tinta);
  background: #ffffff;
  border-color: #8a8394;
}

.ed-recibir .t-boton.es-secundario {
  color: var(--hoja-tinta);
  background: #ffffff;
  border-color: #8a8394;
}

.ed-hoja-pie {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  color: var(--hoja-tinta-2);
  border-top: 1px dashed var(--hoja-linea);
}

.ed-hoja-pie p {
  margin: 0;
  overflow-wrap: anywhere;
}

.ed-hoja-pie p[hidden] {
  display: none;
}

.ed-hoja-nota {
  font-style: italic;
  white-space: pre-line;
}

/* ── Barra de abajo: guardado, vista previa y Emitir ─────────── */
.ed-barra {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 22px calc(-1 * clamp(22px, 4vw, 54px)) -72px;
  padding: 12px clamp(22px, 4vw, 54px);
  background: var(--papel);
  border-top: 1px solid var(--line);
}

.ed-guardado {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 2px;
  color: var(--tinta-2);
  font: inherit;
  font-size: 0.86rem;
  background: none;
  border: 0;
  cursor: pointer;
}

.ed-guardado-punto {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--safe);
  border-radius: 50%;
}

.ed-guardado[data-estado="nuevo"] .ed-guardado-punto,
.ed-guardado[data-estado="pendiente"] .ed-guardado-punto,
.ed-guardado[data-estado="guardando"] .ed-guardado-punto {
  background: var(--tinta-3);
}

.ed-guardado[data-estado="error"] {
  color: var(--danger);
  font-weight: 600;
}

.ed-guardado[data-estado="error"] .ed-guardado-punto {
  background: var(--danger);
}

.ed-barra-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ed-barra-acciones .t-boton:disabled,
.ed-barra-acciones .t-boton[aria-disabled="true"],
.cj-emitir .t-boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.ed-ver-hoja {
  display: none;
}

.ed-emitir-motivo,
.ed-barra-aviso {
  flex-basis: 100%;
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.84rem;
  text-align: right;
}

.ed-barra-aviso {
  color: var(--danger);
  text-align: left;
}

.ed-emitir-motivo[hidden],
.ed-barra-aviso[hidden] {
  display: none;
}

.ed-emitir-motivo a,
.ed-barra-aviso a {
  color: var(--sello);
  font-weight: 600;
}

/* Diálogo de emisión */
.ed-dialogo {
  width: min(460px, calc(100vw - 32px));
  padding: 22px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-alta);
}

.ed-dialogo::backdrop {
  background: rgba(19, 17, 24, 0.45);
}

.ed-dialogo h2 {
  margin: 0 0 8px;
  font: 700 1.35rem/1.15 var(--display);
}

.ed-dialogo p {
  margin: 0 0 14px;
  color: var(--tinta-2);
}

.ed-confirmar {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  font-size: 0.9rem;
}

.ed-confirmar input {
  width: 16px;
  height: 16px;
  margin: 3px 0 0;
  accent-color: var(--sello);
}

.ed-confirmar.es-pequeno {
  padding: 6px 10px 2px;
  color: var(--tinta-2);
  font-size: 0.84rem;
}

.ed-dialogo-acciones {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.ed-descartar {
  border-top: 1px solid var(--line-soft);
  margin-top: 4px !important;
  padding-top: 4px;
}

/* ── Pantallas estrechas ─────────────────────────────────────── */
/* La barra ocupa el ancho del contenido: sus márgenes siguen al relleno
   de .content en cada tamaño (22–54 px, 18 px y 12 px). */
@media (max-width: 760px) {
  .ed-barra {
    margin: 22px -18px -56px;
    padding: 12px 18px;
  }
}

@media (max-width: 440px) {
  .ed-barra {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }
}

@media (max-width: 1099px) {
  .ed-ver-hoja {
    display: inline-flex;
  }
}

@media (max-width: 560px) {
  .ed-cabecera {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .ed-campos {
    grid-template-columns: minmax(0, 1fr);
  }

  .ed-lineas-cabecera {
    display: none;
  }

  .ed-hoja {
    padding: 20px 16px 16px;
  }

  .ed-hoja-partes {
    grid-template-columns: minmax(0, 1fr);
  }

  .ed-barra {
    justify-content: stretch;
  }

  .ed-barra-acciones {
    width: 100%;
  }

  .ed-barra-acciones .t-boton {
    flex: 1 1 auto;
  }

  .ed-emitir-motivo {
    text-align: left;
  }
}

/* En oscuro las sombras no separan: borde fino. La hoja no cambia. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ed-formulario {
    --campo-borde: #766e87;
  }

  :root:not([data-theme="light"]) .ed-hoja {
    box-shadow: 0 0 0 1px #3a3348, 0 24px 48px -20px rgba(0, 0, 0, 0.85);
  }

  :root:not([data-theme="light"]) .ed-pop {
    box-shadow: none;
  }
}

/* Espejo del bloque anterior para el tema forzado a mano.
   Si tocas uno, toca el otro. */
:root[data-theme="dark"] .ed-formulario {
  --campo-borde: #766e87;
}

:root[data-theme="dark"] .ed-hoja {
  box-shadow: 0 0 0 1px #3a3348, 0 24px 48px -20px rgba(0, 0, 0, 0.85);
}

:root[data-theme="dark"] .ed-pop {
  box-shadow: none;
}

/* ══ Rediseño · fase 1: vista previa antes de emitir ═══════════════
   La misma hoja que el editor: papel claro y tinta oscura en los dos
   temas. Dentro de .rv-papel los tokens toman los valores de la hoja
   (--hoja… en :root), así el documento compartido (trialInvoiceDocument)
   se lee igual de día y de noche sin tocar sus reglas. */

.rv-mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

@media (min-width: 1100px) {
  .rv-mesa {
    grid-template-columns: minmax(0, 1fr) 320px;
  }

  .rv-lateral {
    position: sticky;
    top: 18px;
  }
}

.rv-papel {
  --papel: var(--hoja);
  --papel-2: var(--hoja-2);
  --tinta: var(--hoja-tinta);
  --tinta-2: var(--hoja-tinta-2);
  --tinta-3: var(--hoja-tinta-3);
  --ink: var(--hoja-tinta);
  --muted: var(--hoja-tinta-2);
  --line: var(--hoja-linea);
  --line-soft: var(--hoja-linea-2);
  --sello: var(--hoja-sello);
  --warning: #9b531a;
  --warning-soft: #f8ebdd;
  --warning-borde: #e8c79b;
  color-scheme: light;
  min-width: 0;
  color: #1b1820;
}

.rv-papel .final-invoice-sheet {
  margin: 0;
  border-color: transparent;
  border-radius: 6px;
  box-shadow: var(--shadow-alta);
}

.rv-lateral {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.rv-estado {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: var(--papel);
  border: 1px solid transparent;
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
}

.rv-estado h2 {
  margin: 0;
  font: 700 1.2rem/1.2 var(--display);
}

.rv-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  color: var(--tinta-2);
}

.rv-total b {
  color: var(--tinta);
  font: 800 1.5rem/1.1 var(--display);
  font-variant-numeric: tabular-nums;
}

.rv-nota,
.rv-motivo {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.88rem;
}

.rv-motivo a {
  color: var(--sello);
  font-weight: 600;
}

.rv-avisos {
  display: grid;
  gap: 6px;
}

.rv-estado form {
  display: grid;
  gap: 12px;
  margin: 0;
}

.rv-estado .t-boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.rv-guardada {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 0 4px;
  color: var(--tinta-2);
  font-size: 0.84rem;
}

.rv-guardada p,
.rv-guardada form {
  margin: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rv-estado {
    border-color: var(--line-soft);
    box-shadow: none;
  }

  :root:not([data-theme="light"]) .rv-papel .final-invoice-sheet {
    box-shadow: 0 0 0 1px #3a3348, 0 24px 48px -20px rgba(0, 0, 0, 0.85);
  }
}

/* Espejo del bloque anterior para el tema forzado a mano.
   Si tocas uno, toca el otro. */
:root[data-theme="dark"] .rv-estado {
  border-color: var(--line-soft);
  box-shadow: none;
}

:root[data-theme="dark"] .rv-papel .final-invoice-sheet {
  box-shadow: 0 0 0 1px #3a3348, 0 24px 48px -20px rgba(0, 0, 0, 0.85);
}

/* ══ Rediseño · fase 2: Inicio, cobros, ficha y lista de Facturas ══
   Los bordes de desplegables, buscador, botones secundarios y «•••» usan
   --borde-control (3:1 sobre el papel en los dos temas), en sus reglas. */

/* ── Inicio ──
   Sus estilos están al final, en «Propuesta visual de noviembre · tanda 3». */

/* ── Ficha de una factura emitida ──
   Sus estilos están al final, en «Tanda 5a». Aquí queda lo que su cabecera
   comparte con la ficha del cliente. */
.fe-cabecera h1 {
  margin: 2px 0 0;
  font-size: 40px;
  line-height: 1.02;
}

@media (max-width: 760px) {
  .fe-cabecera h1 {
    font-size: 30px;
  }
}

.fe-volver {
  font-size: 0.85rem;
}

.fe-acciones {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
}

@media (max-width: 640px) {
  .fe-cabecera {
    flex-wrap: wrap;
  }

  /* Las acciones bajan a su propia línea, a la izquierda: el menú «•••»
     se abre desde el principio de la fila, no desde su botón, o se
     saldría de la pantalla por la izquierda. */
  .fe-acciones {
    position: relative;
  }

  .fe-acciones > .t-menu-mas {
    position: static;
  }

  .fe-acciones .t-menu-mas-lista {
    left: 0;
    right: auto;
  }
}

/* ── Lista de Facturas ── */
.fa-barra {
  margin-bottom: 14px;
}

.fa-pestanas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 3px;
  background: var(--papel-2);
  border-radius: 10px;
}

.fa-pestanas a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 5px 12px;
  color: var(--tinta-2);
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 8px;
}

.fa-pestanas a:hover {
  color: var(--tinta);
}

.fa-pestanas a[aria-current="page"] {
  color: var(--tinta);
  font-weight: 600;
  background: var(--papel);
  box-shadow: var(--shadow);
}

.fa-numero {
  color: var(--tinta-3);
  font: 500 0.75rem/1 var(--mono);
}

.fa-filtros {
  padding: 0;
  margin-bottom: 16px;
}

.fa-anio {
  flex: 0 1 170px;
}

.fa-mas-filtros {
  flex: 1 1 100%;
}

.fa-mas-filtros > summary {
  display: inline-block;
  color: var(--sello);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}

.fa-mas-filtros-cuerpo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
}

.fa-panel {
  overflow: visible;
}

.fa-nota {
  margin: 0;
  padding: 12px 18px 0;
  color: var(--tinta-3);
  font-size: 0.84rem;
}

.fa-por-cobrar {
  padding: 14px 18px;
}

.fa-total {
  margin: 0 0 6px;
  color: var(--tinta-2);
}

.fa-total b {
  color: var(--tinta);
  font: 800 1.5rem/1 var(--display);
  font-variant-numeric: tabular-nums;
}

/* Revisión de la fase 2 */
.in-prueba,
.fa-nota.es-dentro {
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.8rem;
}

.fa-nota.es-dentro {
  padding: 0 0 8px;
}

.in-stripe-sin-comprobar {
  margin: 2px 0;
}

.fe-volver {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  text-decoration: none;
}

.fe-volver .t-icono {
  transform: scaleX(-1);
}

.fe-volver span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ══ Rediseño · fase 3: Clientes ═══════════════════════════════════
   Lista con pestañas Empresas / LMM+, ficha con tres cifras y sus
   facturas, y el formulario corto. Referencia: artifact, sección Clientes. */

/* ── Barra: pestañas, buscador y orden ── */
.cl-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 14px;
}

.cl-herramientas {
  flex: 1 1 380px;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0;
}

.cl-buscador {
  flex: 1 1 280px;
}

.cl-orden {
  flex: none;
  height: 40px;
  padding: 0 30px 0 11px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-s);
  font-size: 0.88rem;
}

.cl-orden:hover {
  border-color: var(--tinta-3);
}

.cl-orden:focus {
  border-color: var(--foco);
}

.cl-incompletos {
  margin: 0;
  color: var(--warning);
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
}

a.cl-incompletos,
.cl-incompletos a {
  color: var(--warning);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cl-nota {
  max-width: 72ch;
  margin: 0 0 12px;
  color: var(--tinta-2);
  font-size: 0.86rem;
}

.cl-barra ~ .in-prueba {
  margin-bottom: 8px;
}

/* ── Filas: la fila entera es el enlace ── */
.cl-cabeza,
.cl-fila {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 76px 120px minmax(150px, 200px) 16px;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
}

.cl-cabeza.es-lmm,
.cl-fila.es-lmm {
  grid-template-columns: minmax(0, 1.6fr) 170px 110px 16px;
}

/* Aire entre «Este año», alineado a la derecha, y «Te debe». */
.cl-cabeza:not(.es-lmm) > :nth-child(5),
.cl-fila:not(.es-lmm) > :nth-child(5) {
  padding-left: 14px;
}

.cl-cabeza {
  color: var(--tinta-3);
  font: 500 0.7rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-soft);
}

.cl-filas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cl-filas > li + li {
  border-top: 1px solid var(--line-soft);
}

.cl-fila {
  min-height: 56px;
  color: var(--tinta);
  text-decoration: none;
  transition: background 0.2s;
}

.cl-fila:hover {
  background: var(--papel-2);
}

.cl-fila:focus-visible {
  outline-offset: -3px;
}

.cl-fila > .t-icono {
  color: var(--tinta-3);
  transition: transform 0.3s var(--salida), color 0.2s;
}

.cl-fila:hover > .t-icono {
  color: var(--tinta);
  transform: translateX(2px);
}

.cl-quien {
  min-width: 0;
}

.cl-quien strong {
  display: block;
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cl-quien small {
  display: block;
  color: var(--tinta-3);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.cl-falta {
  color: var(--warning);
  font-weight: 500;
}

.cl-dato {
  min-width: 0;
  color: var(--tinta-2);
  font-size: 0.88rem;
  white-space: nowrap;
}

.cl-cifra {
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.cl-cabeza .cl-cifra {
  color: inherit;
}

.cl-nada {
  color: var(--tinta-3);
}

/* Rótulo de cada dato: solo para lectores de pantalla en la tabla; en el
   móvil, donde no hay cabecera, se ve. */
.cl-etiqueta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.cl-sin-resultados {
  border-top: 1px solid var(--line-soft);
}

/* ── Ficha ── */
.cl-cabecera h1 {
  overflow-wrap: anywhere;
}

.cl-datos {
  max-width: 80ch;
  margin: 4px 0 0;
  color: var(--tinta-2);
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.cl-cabecera + .t-aviso {
  margin-bottom: 14px;
}

.cl-prueba {
  margin: 0 0 8px;
}

.cl-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}

.cl-cifras > div {
  min-width: 0;
  padding: 12px 14px;
  background: var(--papel);
  border: 1px solid transparent;
  border-radius: var(--radio-m);
  box-shadow: var(--shadow);
}

.cl-cifras dt {
  color: var(--tinta-3);
  font-size: 0.78rem;
}

.cl-cifras dd {
  margin: 2px 0 0;
  font: 700 1.3rem/1.2 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.cl-cifras dd.es-texto {
  font: 600 1rem/1.35 var(--ui);
}

.cl-cifras dd.es-aviso {
  color: var(--warning);
}

.cl-cifras dd.es-peligro {
  color: var(--danger);
}

.cl-cifras dd small {
  display: block;
  font: 500 0.75rem/1.3 var(--ui);
}

.cl-todas {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  color: var(--sello);
  font-weight: 600;
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
}

.cl-todas:hover {
  background: var(--papel-2);
}

.cl-vacio {
  margin: 0;
  padding: 16px 20px;
  color: var(--tinta-2);
}

/* Ficha (Fer, 2-oct): sus facturas y, al lado, los datos ordenados. */
.cl-mesa {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr);
  gap: 20px;
  align-items: start;
}

.cl-mesa.es-sola {
  grid-template-columns: minmax(0, 1fr);
}

.cl-ficha-datos {
  display: grid;
  gap: 14px;
  margin: 0;
}

.cl-ficha-datos dt {
  color: var(--tinta-3);
  font-size: 0.78rem;
}

.cl-ficha-datos dd {
  margin: 2px 0 0;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cl-ficha-datos a {
  color: inherit;
}

@media (max-width: 860px) {
  .cl-mesa {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .cl-todas,
  .cl-vacio {
    padding-inline: 16px;
  }
}

/* ── Formulario ── */
.cl-formulario {
  display: grid;
  gap: 18px;
  max-width: 760px;
}

.cl-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
}

.cl-campo {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cl-campo.es-ancho {
  grid-column: 1 / -1;
}

.cl-campo > label,
.cl-campo > legend {
  padding: 0;
  color: var(--tinta-2);
  font-size: 0.85rem;
  font-weight: 500;
}

.cl-campo input:not([type="radio"]),
.cl-campo select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 12px;
  color: var(--tinta);
  font: inherit;
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: 10px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cl-campo input:not([type="radio"]):hover,
.cl-campo select:hover {
  border-color: var(--tinta-3);
}

.cl-campo input:not([type="radio"]):focus,
.cl-campo select:focus {
  border-color: var(--foco);
}

.cl-campo input:not([type="radio"])[aria-invalid="true"],
.cl-campo select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--danger-soft);
}

.cl-ayuda {
  color: var(--tinta-3);
  font-size: 0.78rem;
}

.cl-ayuda.es-aviso {
  color: var(--warning);
  font-weight: 500;
}

/* Tipo: tres opciones de un toque. */
.cl-segmento {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.cl-segmento label {
  position: relative;
  display: inline-flex;
}

.cl-segmento input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.cl-segmento span {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  color: var(--tinta-2);
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: 99px;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.cl-segmento label:hover span {
  border-color: var(--tinta-3);
}

.cl-segmento input:checked + span {
  color: var(--tinta);
  font-weight: 600;
  background: var(--sello-piel);
  border-color: var(--sello);
}

.cl-segmento input:focus-visible + span {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.cl-segmento input[aria-invalid="true"] + span {
  border-color: var(--danger);
}

/* En oscuro las sombras no separan: como las tarjetas, borde fino en los
   recuadros de cifras; y el tipo elegido, con el sello bien marcado. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cl-cifras > div {
    border-color: var(--line-soft);
    box-shadow: none;
  }

  :root:not([data-theme="light"]) .cl-segmento span {
    background: var(--papel-2);
  }

  :root:not([data-theme="light"]) .cl-segmento input:checked + span {
    background: var(--sello-piel);
    box-shadow: inset 0 0 0 1px var(--sello);
  }
}

/* Espejo del bloque anterior para el tema forzado a mano.
   Si tocas uno, toca el otro. */
:root[data-theme="dark"] .cl-cifras > div {
  border-color: var(--line-soft);
  box-shadow: none;
}

:root[data-theme="dark"] .cl-segmento span {
  background: var(--papel-2);
}

:root[data-theme="dark"] .cl-segmento input:checked + span {
  background: var(--sello-piel);
  box-shadow: inset 0 0 0 1px var(--sello);
}

.cl-guardar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.cl-guardar p {
  flex: 1 1 260px;
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.86rem;
}

.cl-guardar-acciones {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Facturas de un cliente (desde su ficha) ── */
.fa-cliente-filtro {
  margin: 0 0 10px;
  color: var(--tinta-2);
  font-size: 0.9rem;
}

.fa-cliente-filtro a {
  margin-left: 8px;
}

/* ── La lista pasa a tarjetas según su propio ancho ──
   Depende del sitio que le deja el menú lateral, no de la ventana: entre
   760 y 860 px el menú sigue ahí y la tabla no cabía (revisión de la
   fase 3). Por debajo de ~700 px de tarjeta, cada cliente se apila con sus
   rótulos a la vista. */
.cl-tabla {
  container: clientes / inline-size;
}

@container clientes (max-width: 700px) {
  .cl-cabeza {
    display: none;
  }

  .cl-fila,
  .cl-fila.es-lmm {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 14px;
    padding: 11px 40px 11px 16px;
  }

  .cl-quien {
    flex: 1 1 100%;
  }

  .cl-cifra {
    text-align: left;
  }

  .cl-fila:not(.es-lmm) > :nth-child(5) {
    padding-left: 0;
  }

  .cl-etiqueta {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    color: var(--tinta-3);
    font-size: 0.74rem;
  }

  .cl-fila > .t-icono {
    position: absolute;
    top: 50%;
    right: 16px;
    margin-top: -8px;
  }
}

/* En un móvil los tres tipos no caben en una línea como píldoras: tres
   columnas iguales, y el texto largo se parte dentro de su botón. */
@media (max-width: 520px) {
  .cl-segmento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .cl-segmento label {
    display: flex;
  }

  .cl-segmento span {
    width: 100%;
    justify-content: center;
    padding: 6px 8px;
    font-size: 0.85rem;
    line-height: 1.2;
    text-align: center;
    border-radius: 12px;
  }
}

/* ── Pantallas estrechas ── */
@media (max-width: 720px) {
  /* El buscador ocupa su fila; el orden y el aviso van debajo. */
  .cl-buscador {
    flex-basis: 100%;
  }

  .cl-campos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ Rediseño · fase 4: Informes y paquete para la gestoría ════════
   Una sola pantalla: Mes o Trimestre, «Resumen» y «Documentos». La tarjeta
   del paquete dice qué lleva, cada cosa con su marca o con «Falta». La
   fila «Falta» de la factura de comisiones admite soltar el archivo encima
   (panel.js) o elegirlo y subirlo sin JavaScript. */

.if-cabecera {
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.if-cabecera h1 {
  margin: 0;
}

.if-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.if-selector {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.if-selector select {
  min-height: 40px;
  max-width: 100%;
  padding: 7px 34px 7px 12px;
  color: var(--tinta);
  font: 500 0.9rem/1.2 var(--ui);
  background-color: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: 10px;
}

.if-prueba {
  margin: -6px 0 14px;
}

.if-intro {
  margin: 0 0 16px;
  color: var(--tinta-2);
}

.if-mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

/* Las dos filas de Informes comparten columnas: el paquete sobre «Tus
   facturas» y la columna lateral sobre «Ventas de la web», con el mismo
   hueco entre ellas, para que los bordes caigan en la misma línea. */
@media (min-width: 1100px) {
  .if-mesa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.if-lateral {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.if-lateral .t-panel {
  margin-bottom: 0;
}

/* ── La tarjeta del paquete ── */
.if-paquete {
  display: grid;
  gap: 12px;
}

.if-paquete-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

.if-paquete-cabecera .t-tarjeta-rotulo {
  margin: 0;
}

.if-paquete-periodo {
  margin: 6px 0 0;
  font: 700 1.35rem/1.1 var(--display);
  letter-spacing: -0.02em;
}

.if-sub,
.if-pie {
  margin: 4px 0 0;
  color: var(--tinta-3);
  font-size: 0.82rem;
}

.if-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.if-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}

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

.if-marca {
  display: flex;
  color: var(--tinta-3);
}

.if-marca-icono {
  width: 18px;
  height: 18px;
}

.if-item.es-ok .if-marca { color: var(--safe); }
.if-item.es-falta .if-marca,
.if-item.es-aviso .if-marca { color: var(--warning); }

.if-item-texto {
  min-width: 0;
}

.if-item-texto strong {
  display: block;
  font-weight: 600;
}

.if-item-texto small {
  display: block;
  color: var(--tinta-3);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.if-item.es-aviso .if-item-texto small {
  color: var(--warning);
}

/* La fila «Falta»: el sitio donde soltar la factura. El formulario va en
   su propia línea para que el texto nunca se quede sin sitio. */
.if-item.es-falta {
  grid-template-columns: 20px minmax(0, 1fr);
  margin: 6px 0;
  padding: 10px 12px;
  background: var(--warning-soft);
  border: 1.5px dashed var(--warning);
  border-radius: 10px;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.if-item.es-falta + .if-item {
  border-top: 0;
}

.if-item.es-falta .if-item-texto small {
  color: var(--tinta-2);
}

.if-item.es-falta.es-encima {
  background: var(--sello-piel);
  border-color: var(--sello);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--sello) 18%, transparent);
}

.if-subir {
  grid-column: 2 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

.if-elegir {
  position: relative;
  overflow: hidden;
}

/* El campo de archivo ocupa todo el botón: se pulsa y se enfoca como él. */
.if-archivo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.if-elegir:has(.if-archivo:focus-visible) {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.if-elegir-con {
  display: none;
}

.if-elegir:has(.if-archivo:valid) .if-elegir-sin {
  display: none;
}

.if-elegir:has(.if-archivo:valid) .if-elegir-con {
  display: inline;
}

.if-soltar {
  display: none;
  color: var(--warning);
  font-size: 0.82rem;
  font-weight: 600;
}

.puede-soltar .if-soltar {
  display: inline;
}

/* Con JavaScript, elegir el archivo ya lo sube: sobra «Subir». */
.puede-soltar .if-subir-boton {
  display: none;
}

.if-leyendo {
  color: var(--sello);
  font-size: 0.82rem;
  font-weight: 600;
}

.if-subir.es-enviando .if-elegir,
.if-subir.es-enviando .if-soltar {
  display: none;
}

.if-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.if-avisos {
  display: grid;
  gap: 6px;
}

.if-avisos .t-aviso {
  margin: 0;
}

/* ── Lo que dice el resumen ── */
/* Dos columnas solo cuando cada una tiene sitio de verdad (unos 34rem);
   «Mes a mes» y lo pendiente de cobro ocupan siempre el ancho completo. */
.if-bloques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
  gap: 16px;
}

/* Mismas columnas que .if-mesa (ver arriba). */
@media (min-width: 1100px) {
  .if-bloques {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.if-bloque.es-ancho {
  grid-column: 1 / -1;
}

/* Nombres de mes e importes enteros: nunca letra a letra ni «€» suelto. */
.if-tabla th,
.if-tabla td {
  white-space: nowrap;
  overflow-wrap: normal;
}

.if-tabla td.report-reference {
  max-width: none;
  white-space: normal;
  overflow-wrap: normal;
}

.if-tabla-envoltura {
  overflow-x: auto;
}

.if-descargados {
  margin: 0;
  padding: 0;
  list-style: none;
}

.if-descargados li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}

.if-descargados li:first-child {
  border-top: 0;
}

.if-descargado-texto strong {
  display: block;
  font-weight: 600;
}

.if-descargado-texto small {
  color: var(--tinta-3);
  font-size: 0.82rem;
}

.if-descargado-enlaces {
  display: flex;
  gap: 12px;
}

.if-descargado-enlaces a {
  color: var(--sello);
  font-size: 0.88rem;
  font-weight: 600;
}

.if-soltar-aviso {
  flex-basis: 100%;
  color: var(--danger);
  font-size: 0.82rem;
  font-weight: 600;
}

.if-acciones {
  margin: 0;
}

.if-bloque {
  min-width: 0;
}

.if-bloque-titulo {
  margin: 0 0 10px;
  font: 700 1.05rem/1.2 var(--display);
  letter-spacing: -0.01em;
}

.if-cifras {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 6px;
}

.if-cifras div {
  min-width: 0;
  padding: 8px 10px;
  background: var(--papel-2);
  border-radius: 8px;
}

.if-cifras dt {
  color: var(--tinta-3);
  font-size: 0.78rem;
  line-height: 1.3;
}

.if-cifras dd {
  margin: 2px 0 0;
  font: 700 1.02rem/1.2 var(--display);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.if-cifras .es-destacada {
  background: var(--sello-piel);
}

.if-cifras .es-destacada dd {
  color: var(--sello);
}

.if-tabla {
  margin-top: 6px;
}

.if-tabla tr.es-total td {
  font-weight: 600;
  border-top: 1.5px solid var(--tinta);
  border-bottom: 0;
}

.if-nota {
  margin: 8px 0 0;
  color: var(--tinta-3);
  font-size: 0.82rem;
}

/* ── Contador del umbral de 10.000 € de la UE (ventas web, fase 4; maqueta del 27-sep). ── */
.if-umbral strong { color: var(--tinta); font-weight: 600; font-variant-numeric: tabular-nums; }
.if-umbral-pista { display: inline-block; width: 52px; height: 6px; margin: 0 3px; vertical-align: 0; }
.if-umbral-fondo { fill: var(--line); }
.if-umbral-lleno { fill: var(--sello); }
.if-umbral.es-cerca strong { color: var(--warning); }
.if-umbral.es-cerca .if-umbral-lleno { fill: var(--warning); }
.if-umbral.es-superado strong { color: var(--danger); }
.if-umbral.es-superado .if-umbral-lleno { fill: var(--danger); }

.if-vacio,
.if-estado {
  margin: 0;
  color: var(--tinta-2);
}

/* ── ¿De qué mes es la factura? ── */
.if-pregunta {
  display: grid;
  gap: 10px;
  max-width: 560px;
}

.if-pregunta p {
  margin: 0;
}

.if-pregunta-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.if-pregunta-form select {
  min-height: 40px;
  padding: 7px 12px;
  color: var(--tinta);
  font: 500 0.9rem/1.2 var(--ui);
  background-color: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: 10px;
}

@media (max-width: 640px) {
  /* El dato corto («10 PDF», «CSV») sigue a la derecha: en una línea propia
     se alineaba a la columna de la marca y se salía de la caja (Fer, 3-oct). */
  .if-item {
    grid-template-columns: 20px minmax(0, 1fr) auto;
  }

  .if-subir {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .if-cifras {
    grid-template-columns: minmax(0, 1fr);
  }

  .if-acciones .t-boton {
    flex: 1 1 100%;
  }
}

/* ══ Rediseño · fase 5: Ajustes ════════════════════════════════════
   Página por grupos (src/settings-ui.ts) y el interior de cada ajuste:
   cabecera con «‹ Ajustes», tarjetas con filas de consulta y una barra
   de guardado. Referencia: artifact «Talonario a dieta», #ajustes-dentro. */

/* El tema, alineado con los valores de las demás filas: el selector ocupa
   la columna del valor y la de la flecha, como en la maqueta. */
.ajustes-tema {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: 8px 12px;
  min-height: 48px;
  padding: 6px 16px;
  font-weight: 600;
}

.ajustes-tema .t-segmento {
  grid-column: 2 / 4;
  justify-self: end;
}

/* Una fila sin valor (Contraseña) deja la flecha en su columna. */
.t-fila-lista > .t-icono {
  grid-column: 3;
}

/* Datos fiscales: los campos que se escriben, en blanco; el país, que no se
   cambia, en gris. Solo en esta pantalla, como en la maqueta. */
.aj-datos-fiscales .field input:not([readonly]) {
  background: var(--papel);
}

.aj-datos-fiscales .field input[readonly] {
  color: var(--tinta-2);
  background: var(--papel-2);
}

.aj-cabecera > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.aj-cabecera .fe-volver {
  justify-self: start;
  margin-bottom: 4px;
  color: var(--sello);
  font-weight: 600;
}

.aj-cabecera p {
  margin: 0;
  color: var(--tinta-2);
}

.aj-pantalla {
  max-width: 720px;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.aj-pantalla > .t-panel,
.aj-pantalla > form > .t-panel {
  margin-bottom: 0;
}

.aj-pantalla > form {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.aj-bloque {
  display: grid;
  gap: 2px;
}

.aj-bloque-rotulo {
  margin: 0 0 6px;
  color: var(--tinta-3);
  font: 500 0.72rem/1.2 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.aj-lista .aj-bloque-rotulo {
  margin: 0;
  padding: 16px 18px 8px;
}

.aj-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.aj-bloque-rotulo + .aj-fila {
  border-top: 0;
}

.aj-fila-texto {
  min-width: 0;
}

.aj-fila-titulo {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.aj-fila-titulo a {
  color: inherit;
}

.aj-fila small {
  display: block;
  margin-top: 1px;
  color: var(--tinta-3);
  font-size: 0.8rem;
}

.aj-fila-valor {
  color: var(--tinta-2);
  font-size: 0.88rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.aj-numero {
  font: 500 0.85rem/1.3 var(--mono);
  color: var(--tinta);
  overflow-wrap: anywhere;
}

.aj-numero small {
  display: inline;
  margin: 0 4px 0 0;
  font-family: var(--ui);
}

.aj-nota {
  margin: 0;
  max-width: 68ch;
  color: var(--tinta-2);
  font-size: 0.85rem;
  line-height: 1.5;
}

.aj-bloque > .aj-nota {
  padding: 8px 0 2px;
}

.aj-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 12px;
}

.aj-acciones form {
  margin: 0;
}

.aj-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.aj-barra p {
  margin: 0;
  flex: 1 1 260px;
  color: var(--tinta-3);
  font-size: 0.82rem;
}

/* Formas de cobro: la última fila añade otra. */
.aj-lista .t-lista {
  border-top: 1px solid var(--line-soft);
}

.aj-lista > .aj-nota {
  padding: 4px 18px 12px;
}

.aj-anadir {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 10px 18px;
  color: var(--sello);
  font-weight: 600;
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
}

.aj-anadir:hover {
  background: var(--papel-2);
}

.aj-anadir:focus-visible {
  outline-offset: -3px;
}

.aj-anadir .t-icono {
  width: 18px;
  height: 18px;
}

/* Los campos de las pantallas de Ajustes se distinguen del papel: borde de
   control a 3:1 como mínimo. El resto del panel se revisa en la fase 6. */
.aj-pantalla .field input:not([readonly]):not(:focus),
.aj-pantalla .field select:not(:focus),
.aj-pantalla .field textarea:not(:focus),
.payment-profile-form .field input:not([readonly]):not(:focus),
form[data-vista-previa-concepto] input:not([type="hidden"]):not(:focus),
form[data-vista-previa-concepto] select:not(:focus),
form[data-vista-previa-concepto] textarea:not(:focus) {
  border-color: var(--borde-control);
}

/* ── Campo de contraseña con su ojo ── */
.t-clave {
  position: relative;
  display: block;
}

.t-clave input {
  width: 100%;
  padding-right: 48px;
}

.t-ver-clave {
  position: absolute;
  top: 50%;
  right: 4px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--tinta-3);
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transform: translateY(-50%);
}

.t-ver-clave:hover {
  color: var(--tinta);
}

.t-ver-clave svg {
  width: 20px;
  height: 20px;
}

.t-ver-clave .t-ojo-cerrado,
.t-ver-clave[aria-pressed="true"] .t-ojo-abierto {
  display: none;
}

.t-ver-clave[aria-pressed="true"] .t-ojo-cerrado {
  display: inline;
}

/* Los tres campos de la contraseña, uno debajo de otro y a la misma anchura. */
.aj-clave {
  display: grid;
  gap: 6px;
  max-width: 420px;
  padding: 6px 0;
}

.aj-clave label {
  font-weight: 600;
}

@media (max-width: 640px) {
  .aj-fila {
    grid-template-columns: minmax(0, 1fr);
  }

  .aj-fila-valor {
    text-align: left;
  }

  .aj-barra .primary-button {
    width: 100%;
  }

  .ajustes-tema {
    grid-template-columns: minmax(0, 1fr);
  }

  .ajustes-tema .t-segmento {
    grid-column: 1;
    justify-self: start;
  }
}

/* ══ Propuesta visual de noviembre · tanda 2: portada de acceso ════
   Lo que queda de la portada de la tanda 2 son las piezas de la tarjeta
   (títulos, campos, error, botón, enlace, comprobaciones y la apertura) y
   la línea de un plazo (.acceso-linea), que usa Inicio. La disposición de
   la pantalla, la fecha, los pasos y la franja del año son de la tanda 13
   («el año»), al final de la hoja: con ella se retiraron el talón y su
   matriz, el taco de hojas, los pasos de la matriz y el bloque del plazo
   que iba debajo del talón.
   Referencia: docs/plans/2026-11-14-propuesta-visual (AccesoB…). */

.acceso {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 28px 32px 48px;
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  background: var(--mesa);
}

.acceso-cabeza-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  font: 800 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.acceso-marca-icono {
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--sello);
}

.acceso-marca-puntos {
  fill: var(--mesa);
}

/* Rótulo pequeño en mayúsculas. */
.t-rotulo {
  margin: 0;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

@keyframes acceso-llega {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* ── La hoja ── */
.acceso-hoja {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 44px 48px 40px;
  background: var(--papel);
  border-radius: 0 20px 20px 0;
  transform-origin: left center;
}

.acceso.es-recuperar .acceso-hoja {
  justify-content: center;
  gap: 24px;
  padding: 48px 48px 44px;
}

.acceso-titulos {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acceso.es-recuperar .acceso-titulos {
  gap: 10px;
}

.acceso-hoja h1 {
  margin: 0;
  font: 800 42px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.acceso.es-recuperar .acceso-hoja h1 {
  font-size: 38px;
}

.acceso-sub,
.acceso-mensaje {
  max-width: 460px;
  margin: 0;
  font-size: 16px;
  line-height: 1.45;
}

.acceso-sub {
  color: var(--tinta-2);
}

.acceso-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.acceso-aviso {
  margin: 0;
  color: var(--safe);
  font-weight: 600;
  line-height: 1.45;
}

/* El círculo con icono de «Revisa tu correo» y «Este enlace ya no sirve». */
.t-ronda {
  width: 52px;
  height: 52px;
  flex: none;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  justify-content: center;
  color: var(--tinta-2);
  background: var(--papel-2);
  border-radius: 50%;
}

.t-ronda .t-ico {
  width: 26px;
  height: 26px;
}

.t-ronda.es-bien {
  color: var(--safe);
  background: var(--safe-soft);
}

.t-ronda.es-aviso {
  color: var(--warning);
  background: var(--warning-soft);
}

/* El error se marca con un sello rojo, «Revisa». */
.acceso-error {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 16px;
  font-weight: 600;
  line-height: 1.35;
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
  border-radius: 12px;
}

.acceso-sello {
  flex: none;
  padding: 4px 8px;
  color: var(--danger);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 6px;
  transform: rotate(-4deg);
}

.acceso-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
}

/* Cada campo, con su etiqueta encima. */
.acceso-campo label {
  display: block;
  margin-bottom: 6px;
  font-size: 13.5px;
  font-weight: 600;
}

/* 16 px: por debajo, el iPhone amplía la página al tocar el campo. */
.acceso-campo input {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 0 14px;
  color: var(--tinta);
  font: 400 16px/1.3 var(--ui);
  background: var(--campo);
  border: 1px solid var(--borde-control);
  border-radius: 11px;
}

.acceso-campo.es-error input {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

/* Autorrelleno del navegador: el campo conserva su fondo y su tinta, sin
   el recuadro de color que pinta Chrome. */
.acceso-campo input:-webkit-autofill,
.acceso-campo input:-webkit-autofill:hover,
.acceso-campo input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  box-shadow: inset 0 0 0 1000px var(--campo);
  caret-color: var(--tinta);
}

.acceso-campo.es-error input:-webkit-autofill {
  box-shadow: inset 0 0 0 1000px var(--campo), 0 0 0 1px var(--danger);
}

.acceso-campo .t-clave input {
  padding-right: 52px;
}

.acceso-campo .t-ver-clave {
  right: 3px;
  width: 44px;
  height: 44px;
  color: var(--tinta-2);
  border-radius: 9px;
}

.acceso-campo .t-ver-clave:hover {
  color: var(--tinta);
}

/* Las dos comprobaciones de la contraseña nueva: panel.js marca cada una
   con .es-cumple mientras se escribe, como en Ajustes. */
.t-reglas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t-regla {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta-2);
  font-size: 13.5px;
}

.t-regla .t-ico {
  width: 17px;
  height: 17px;
}

.t-regla .t-ico:first-child,
.t-regla.es-cumple .t-ico:nth-child(2) {
  display: none;
}

.t-regla.es-cumple {
  color: var(--safe);
  font-weight: 600;
}

.t-regla.es-cumple .t-ico:first-child {
  display: block;
}

.acceso-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 6px;
}

.acceso.es-recuperar .acceso-fila {
  margin-top: 0;
}

.acceso-fila.es-fin,
.acceso.es-recuperar .acceso-fila.es-fin {
  justify-content: flex-end;
  margin-top: 4px;
}

.acceso-fila.es-sola {
  justify-content: flex-start;
}

/* Si el enlace y el botón no caben en una línea, el botón sigue a la derecha. */
.acceso-fila:not(.es-sola) > .acceso-boton {
  margin-left: auto;
}

/* En tinta, como se ve en las mesas (allí el enlace hereda el color). */
.acceso-enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.acceso-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 24px;
  color: var(--sobre-sello);
  font: 600 16px/1 var(--ui);
  text-decoration: none;
  white-space: nowrap;
  background: var(--sello);
  border: 1px solid transparent;
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), var(--sombra-sello);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}

.acceso-boton:hover {
  background: var(--sello-oscuro);
}

.acceso-boton:active {
  transform: translateY(1px);
}

.acceso-boton:disabled {
  cursor: progress;
}

/* «Volver a la entrada», cuando no hay nada más que hacer: sin violeta. */
.acceso-boton.es-secundario {
  padding: 0 22px;
  color: var(--tinta);
  font-size: 14.5px;
  background: var(--papel);
  border-color: var(--borde-control);
  box-shadow: none;
}

.acceso-boton.es-secundario:hover {
  background: var(--papel-2);
}

/* Al entrar, la hoja se desprende por el perforado y deja ver el papel de
   debajo. panel.js envía el formulario a los 0,66 s. */
.acceso.esta-abriendo .acceso-hoja {
  opacity: 0;
  filter: drop-shadow(0 24px 40px rgba(27, 24, 32, 0.18));
  transform: translate(6%, 12%) rotate(7deg);
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.55s 0.15s, filter 0.2s;
}

/* La línea del trimestre: se mide en porcentajes, así que no se deforma. */
.acceso-linea {
  flex: 1 1 260px;
  min-width: 0;
  height: 37px;
  overflow: visible;
}

.acceso-linea-pista {
  fill: var(--line);
}

.acceso-linea-avance {
  fill: var(--tinta);
}

.acceso-linea-hoy {
  fill: var(--mesa);
  stroke: var(--tinta);
  stroke-width: 3;
}

.acceso-linea-marca {
  fill: var(--tinta-3);
  font: 500 11px var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.acceso-linea-marca.es-hoy {
  fill: var(--tinta);
}

/* ── Móvil ── */
@media (max-width: 720px) {
  .acceso {
    padding: 8px 16px 24px;
  }

  .acceso-cabeza-marca {
    gap: 9px;
  }

  .acceso-marca-icono {
    width: 28px;
    height: 28px;
  }

  .acceso-hoja,
  .acceso.es-recuperar .acceso-hoja {
    gap: 20px;
    padding: 24px 20px 22px;
    border-radius: 0 0 20px 20px;
    transform-origin: center top;
  }

  .acceso-titulos {
    gap: 4px;
  }

  .acceso.es-recuperar .acceso-titulos {
    gap: 8px;
  }

  .acceso-hoja h1 {
    font-size: 32px;
  }

  .acceso.es-recuperar .acceso-hoja h1 {
    font-size: 30px;
  }

  .acceso-sub,
  .acceso-mensaje {
    font-size: 15px;
  }

  .acceso-form {
    gap: 14px;
  }

  /* El botón, a todo el ancho; el enlace, centrado debajo. */
  .acceso-fila,
  .acceso-fila.es-fin,
  .acceso-fila.es-sola {
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px;
    margin-top: 4px;
  }

  .acceso-fila > span:empty {
    display: none;
  }

  .acceso-fila:not(.es-sola) > .acceso-boton {
    margin-left: 0;
  }

  .acceso-enlace {
    justify-content: center;
    margin-bottom: -8px;
  }

  .acceso-boton {
    min-height: 52px;
  }

  .acceso-boton.es-secundario {
    font-size: 16px;
  }

  .t-reglas {
    flex-direction: column;
    gap: 6px;
  }

  .t-ronda {
    width: 48px;
    height: 48px;
  }

  .t-ronda .t-ico {
    width: 24px;
    height: 24px;
  }

  .acceso.esta-abriendo .acceso-hoja {
    transform: translate(4%, 18%) rotate(5deg);
  }

}

@media (prefers-reduced-motion: reduce) {

  .acceso-boton,
  .acceso.esta-abriendo .acceso-hoja {
    transition: none;
  }
}

/* ── 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%);
  }
}

/* Si el sistema pide menos movimiento, el salto se hace sin animación
   aunque tema.js no llegue a saltarse la transición. Repite el selector
   de arriba para ganarle en especificidad. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  html.entra-desde-portada::view-transition-old(root),
  html.entra-desde-portada::view-transition-new(root) {
    animation: none;
  }
}

/* ══ Rediseño · fase 6: foco visible ═════════════════════════════════
   Un solo anillo en todo el panel, del color de --foco: 3 px en botones
   y enlaces (regla :focus-visible del principio) y 2 px en campos. Los
   campos sin foco no cambian; al enfocarlos el borde toma el mismo color.
   Sobre papel claro fijo (la hoja del editor y la vista previa) el anillo
   es el violeta de tinta también en modo oscuro. */
.ed-hoja,
.rv-papel {
  --foco: #6a2e9b;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.field [aria-invalid="true"]:focus-visible {
  outline-color: var(--danger);
}

/* El buscador enmarca su campo: el anillo va en la caja, no en el texto. */
.t-buscador:has(input:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.t-buscador input:focus-visible {
  outline: none;
}

/* ══ Recorrido final: Facturas como en la maqueta ═══════════════════
   Una fila: pestañas, buscador, año («2026 ▾», compacto) y «Más filtros»,
   que se despliega como una tarjeta flotante. La lista es una sola
   tarjeta: cabecera en mono pequeña, número en mono sin subrayar y el
   estado en una pastilla de color. */
.fa-barra {
  /* Por encima de la tabla: «Más filtros» se despliega sobre ella. */
  position: relative;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.fa-barra .fa-filtros {
  position: relative;
  display: flex;
  flex: 1 1 380px;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.fa-barra .t-filtro.is-busqueda {
  flex: 1 1 200px;
}

.fa-barra .t-buscador {
  height: 38px;
}

.fa-barra .fa-anio {
  flex: 0 0 auto;
}

.fa-barra .fa-anio select {
  /* Del ancho del año elegido, no de la opción más larga. */
  width: auto;
  field-sizing: content;
  min-width: 88px;
  height: 38px;
  padding: 0 30px 0 12px;
  font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6375' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 15px 15px;
  border-color: var(--line);
  border-radius: 10px;
}

.fa-barra .fa-mas-filtros {
  flex: 0 0 auto;
}

.fa-barra .fa-mas-filtros > summary {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 4px;
  list-style: none;
}

.fa-barra .fa-mas-filtros > summary::-webkit-details-marker {
  display: none;
}

.fa-barra .fa-mas-filtros-cuerpo {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  width: min(420px, calc(100vw - 32px));
  margin: 0;
  padding: 16px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-alta);
}

.fa-barra .fa-mas-filtros-cuerpo .t-filtro {
  flex: none;
}

.fa-barra .fa-mas-filtros-cuerpo .t-filtros-acciones {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
}

.fa-barra .t-filtros-nota {
  flex-basis: 100%;
  margin: 0;
}

.fa-panel {
  padding: 6px 16px;
}

@media (max-width: 700px) {
  /* Las reglas antiguas de móvil ponen los filtros en columna: aquí van en
     fila y el buscador ocupa la suya entera. */
  .fa-barra .fa-filtros {
    flex-basis: 100%;
    flex-direction: row;
    align-items: center;
  }

  .fa-barra .t-filtro.is-busqueda {
    flex: 1 1 100%;
  }

  /* En móvil, «Más filtros» no flota: se abre debajo, en dos columnas y
     con cajas pequeñas, y empuja la lista en vez de taparla. */
  .fa-barra .fa-mas-filtros[open] {
    flex-basis: 100%;
  }

  .fa-barra .fa-mas-filtros-cuerpo {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 10px;
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    box-shadow: var(--shadow);
  }

  .fa-barra .fa-mas-filtros-cuerpo label {
    margin-bottom: 3px;
    font-size: 0.62rem;
  }

  .fa-barra .fa-mas-filtros-cuerpo select {
    height: 32px;
    padding: 0 26px 0 9px;
    font-size: 0.8rem;
    background-position: right 8px center;
    background-size: 13px 13px;
  }

  .fa-barra .fa-mas-filtros-cuerpo .t-filtros-acciones .t-boton {
    min-height: 32px;
    padding: 0 14px;
    font-size: 0.85rem;
  }
}

/* ── Recorrido final, segunda vuelta de Facturas ───────────────────
   Cifra de las pestañas en la misma línea que la palabra; «Más filtros»
   con cajas compactas y la flecha con aire; «Por cobrar» con su margen; y
   en móvil cada factura es una fila limpia dentro de la tarjeta. */
.fa-pestanas a {
  align-items: baseline;
  line-height: 24px;
}

.fa-numero {
  line-height: inherit;
}

.fa-barra .fa-mas-filtros-cuerpo select {
  height: 36px;
  padding: 0 34px 0 11px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6375' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  background-size: 15px 15px;
  border-color: var(--line);
  border-radius: 10px;
}

.fa-panel.fa-por-cobrar {
  padding: 16px 18px 8px;
}

@media (max-width: 760px) {
  .fa-panel {
    padding: 2px 14px;
  }

  .fa-panel.fa-por-cobrar {
    padding: 16px 16px 6px;
  }

}

/* ── Recorrido final: editor y rectificativa ───────────────────────
   La barra de Guardado · Vista previa · Emitir queda pegada al borde
   inferior aunque el formulario sea corto; el país lleva su flecha con
   aire; los conceptos guardados se sugieren en una lista como la de
   clientes; y la rectificativa pregunta sin esconderlo si se pasan los
   datos corregidos a la ficha del cliente. */
.workspace:has(> .content > .ed-barra) {
  display: flex;
  flex-direction: column;
}

.workspace:has(> .content > .ed-barra) > .content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
}

.content > .ed-mesa {
  margin-bottom: 22px;
}

.content > .ed-barra {
  margin-top: auto;
}

.ed-formulario select {
  padding-right: 36px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6375' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
}

.ed-linea {
  position: relative;
}

.ed-conceptos-lista {
  right: auto;
  max-height: 260px;
}

.ed-conceptos-lista .ed-opcion small {
  font-variant-numeric: tabular-nums;
}

.ed-cliente-nuevo-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 14px;
}

.ed-opcion-radio small {
  line-height: 1.35;
}

.fe-ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 22px;
  padding: 16px 20px;
  background: var(--sello-piel);
  border: 1px solid var(--sello-borde);
  border-radius: var(--radio-l);
}

.fe-ficha h2 {
  margin: 0;
  font-size: 1rem;
}

.fe-ficha p {
  margin: 4px 0 0;
  color: var(--tinta-2);
  font-size: 0.9rem;
}

.fe-ficha form {
  margin: 0;
}

/* Los últimos campos no quedan escondidos bajo la barra fija al pasar a
   ellos con el tabulador. */
html:has(.ed-barra) {
  scroll-padding-bottom: 150px;
}

/* «Facturas descartadas»: vaciar la lista al final del plegable (0044). */
.t-descartadas-vaciar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 16px;
  margin: 0;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
}

.t-descartadas-nota {
  flex: 1 1 100%;
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.84rem;
}

.t-descartadas-vaciar .ed-confirmar.es-pequeno {
  padding: 0;
}

/* Casillas de confirmación: la primera línea del texto mide 22 px y la
   casilla (16 px con 3 px arriba) queda centrada en ella. Con la altura de
   línea «normal» el texto quedaba unos 3 px por encima. */
.ed-confirmar > span {
  line-height: 22px;
}

/* ── Recorrido final: Clientes como en la maqueta ──────────────────
   Todos los desplegables del panel llevan su flecha con aire; el orden,
   del ancho de su texto; «N con datos incompletos» en un chip ámbar;
   «Te debe» y los estados de la ficha en pastillas de color, como en
   Facturas; columnas más juntas; y en el móvil cada cliente es una fila
   limpia: nombre a la izquierda y, a la derecha, solo lo que tiene valor. */
/* Con prioridad sobre los formularios antiguos (que usan «background:» y
   borrarían la flecha), salvo los filtros de Facturas, que traen la suya
   ajustada a sus cajas compactas. */
.content select:not([multiple]):not([size]):not(.fa-barra select) {
  padding-right: 36px;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6375' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
}

.cl-herramientas .cl-orden {
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6375' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px 15px;
  appearance: none;
  width: auto;
  min-width: 0;
  field-sizing: content;
  border-color: var(--line);
}

a.cl-incompletos {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  color: var(--warning);
  font: 500 0.8rem/1 var(--ui);
  text-decoration: none;
  background: var(--warning-soft);
  border-radius: 99px;
}

a.cl-incompletos:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cl-cabeza,
.cl-fila {
  grid-template-columns: minmax(0, 1fr) 72px 104px 196px 16px;
}

.cl-cabeza:not(.es-lmm) > :nth-child(5),
.cl-fila:not(.es-lmm) > :nth-child(5) {
  padding-left: 6px;
}

@container clientes (max-width: 700px) {
  .cl-fila,
  .cl-fila.es-lmm {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "quien arriba"
      "quien abajo";
    align-items: center;
    gap: 4px 12px;
    padding: 12px 40px 12px 16px;
  }

  .cl-quien {
    grid-area: quien;
  }

  /* El nombre entero, en dos líneas si hace falta, antes que cortado. */
  .cl-quien strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .cl-etiqueta {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }

  .cl-dato.es-vacio,
  .cl-fila:not(.es-lmm) > .cl-ultima {
    display: none;
  }

  .cl-anio {
    grid-area: arriba;
    justify-self: end;
    font-size: 0.9rem;
    text-align: right;
  }

  .cl-debe {
    grid-area: abajo;
    justify-self: end;
  }

  /* Si solo hay un dato, ocupa las dos filas y queda centrado con la flecha. */
  .cl-anio.es-vacio + .cl-debe,
  .cl-anio:has(+ .cl-debe.es-vacio),
  .cl-fila.es-lmm .cl-tiene:has(+ .cl-ultima.es-vacio) {
    grid-area: arriba / arriba / abajo / abajo;
  }

  .cl-fila.es-lmm .cl-tiene {
    grid-area: arriba;
    justify-self: end;
    color: var(--tinta-2);
    font-size: 0.8rem;
  }

  .cl-fila.es-lmm .cl-ultima {
    grid-area: abajo;
    justify-self: end;
    color: var(--tinta-3);
    font-size: 0.8rem;
  }
}

/* «Recuperarlo» (0045): un cliente quitado de la lista vuelve a ella desde
   el aviso de su ficha o desde el error de NIF del formulario. */
.cl-recuperar {
  display: inline;
  margin: 0 0 0 auto;
}

.field-error .ed-enlace {
  padding: 0;
  font-weight: inherit;
}

/* ── Recorrido final: Informes ───────────────────────────────────
   El estado del paquete («Listo, sin avisos», «Falta 1 documento») va en la
   pastilla común (.t-estado). */
.if-paquete-cabecera > .t-estado {
  flex: none;
}

.if-item-texto small a {
  color: var(--sello);
  font-weight: 600;
}

/* Los meses de «Evolución de ingresos» con aire hasta el borde de la
   tarjeta, igual que a los lados (recorrido final). */
.t-grafico {
  padding-bottom: 18px;
}

/* «Última descarga», encima de la gráfica de Informes. Su rótulo va dentro
   de la tarjeta: alineado con el texto, sin el margen de los de fuera. */
.if-lateral .t-tarjeta-rotulo {
  margin-left: 0;
}

.if-ultima {
  margin: 0;
}

.if-ultima strong {
  display: block;
  font-weight: 600;
}

.if-ultima small {
  color: var(--tinta-3);
  font-size: 0.82rem;
}

.if-ultima-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.if-ultima-cambio {
  margin: 6px 0 0;
  color: var(--warning);
  font-size: 0.82rem;
}

/* Ficha de cliente: por qué no se puede eliminar, dentro del menú «•••». */
.cl-no-eliminar {
  max-width: 260px;
  margin: 0;
  padding: 8px 10px;
  color: var(--tinta-2);
  font-size: 0.84rem;
  line-height: 1.4;
}

/* Paquete: el dato corto de cada fila, a la derecha (como en la maqueta). */
.if-dato {
  justify-self: end;
  color: var(--tinta-3);
  font: 500 0.76rem/1.2 var(--mono);
  letter-spacing: 0.04em;
  text-align: right;
  white-space: nowrap;
}

.if-dato.es-verde,
.if-dato.es-ambar {
  font: 600 0.84rem/1.2 var(--ui);
  letter-spacing: 0;
}

.if-dato.es-verde {
  color: var(--safe);
}

.if-dato.es-ambar {
  color: var(--warning);
}

.if-item.es-falta {
  grid-template-columns: 20px minmax(0, 1fr) auto;
}

/* ── Recorrido final: Ajustes → Contraseña ──────────────────────
   Todo dentro de la tarjeta: tres campos, dos comprobaciones que se marcan
   al escribir y el botón con una sola frase al lado. El campo que rellena
   el navegador no cambia de color. */
.content input:-webkit-autofill,
.content input:-webkit-autofill:hover,
.content input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--tinta);
  -webkit-box-shadow: 0 0 0 40px var(--papel) inset;
  caret-color: var(--tinta);
  transition: background-color 9999s;
}

.aj-comprobaciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
  color: var(--tinta-3);
  font-size: 0.84rem;
}

.aj-comprobaciones li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.aj-comprobaciones li::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  border: 1.5px solid var(--line);
  border-radius: 50%;
}

.aj-comprobaciones li.es-cumple {
  color: var(--safe);
}

.aj-comprobaciones li.es-cumple::before {
  border-color: var(--safe);
  background: var(--safe) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat;
}

.aj-clave-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 16px;
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.aj-clave-pie p {
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.84rem;
}

.aj-clave-pie .t-boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ── Recorrido final: Ajustes → Concepto ────────────────────────
   Un solo tono en toda la tarjeta (la vista previa y el pie solo llevan
   una línea) y «Tipo» como lista de opciones con su explicación, igual
   que en el editor de facturas. */
form[data-vista-previa-concepto] .t-vista-linea,
form[data-vista-previa-concepto] .t-formulario-pie {
  background: transparent;
}

form[data-vista-previa-concepto] .t-vista-linea {
  border-top: 1px solid var(--line-soft);
}

.cn-tipos {
  margin: 0;
  padding: 0;
  border: 0;
}

.cn-tipos legend {
  margin-bottom: 6px;
  padding: 0;
  color: var(--tinta-2);
  font-size: 0.79rem;
  font-weight: 600;
}

/* Las opciones no son etiquetas de campo: botón a la izquierda y texto al lado. */
.cn-tipos .ed-opcion-radio {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  margin: 0;
  color: var(--tinta);
  font-size: 0.9rem;
  font-weight: 400;
}

.cn-tipos .ed-opcion-radio input {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 3px 0 0;
  padding: 0;
}

.cn-tipos legend small {
  display: block;
  margin-top: 2px;
  color: var(--tinta-3);
  font-size: 0.8rem;
  font-weight: 400;
}

form[data-vista-previa-concepto] .t-vista-linea-fila {
  background: transparent;
  border: 1px solid var(--line-soft);
}

/* ══ Propuesta visual de noviembre · tanda 2: navegación ══════════
   Escritorio (desde 761 px): el menú lateral (.t-rail), con el icono y el
   nombre de cada sección siempre a la vista; ya no se despliega. Móvil: la
   franja de arriba (.t-tope, con la marca, «Salir» y Ajustes) y la barra
   de abajo (.t-barra), fija, con las secciones y «Nueva factura» en el
   centro. Los tres salen de layout() (src/ui.ts) y cada ancho enseña los
   suyos: lo que no se ve tampoco recibe el foco ni lo lee el lector de
   pantalla. El editor, en el móvil, no lleva la barra (.sin-barra). */

.app-shell {
  /* Lo que ocupa la barra del móvil y lo que asoma por encima el botón de
     «Nueva factura»: lo usan el hueco del final de la página y lo que se
     pega o flota abajo. Fuera del móvil, cero. */
  --barra-alto: 0px;
  --barra-asoma: 0px;
}

/* Iconos de trazo del menú y de la portada: 24×24, heredan el color. */
.t-ico {
  width: 20px;
  height: 20px;
  flex: none;
}

/* ── Menú lateral ── */
.t-rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100vh;
  height: 100dvh;
  padding: 18px 8px 16px;
  background: var(--papel-2);
  border-right: 1px solid var(--line-soft);
  overflow-y: auto;
}

.t-rail > a,
.t-barra > a {
  position: relative;
  text-decoration: none;
}

.t-rail > a {
  width: 72px;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 2px 9px;
  color: var(--tinta-2);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  border-radius: 12px;
  transition: color 0.2s, background 0.2s;
}

/* Con el ratón encima: tinta y el fondo de la sección actual a media
   fuerza. La sombra y el icono violeta siguen siendo solo de la actual. */
.t-rail > a:hover,
.t-rail .sesion-salir.es-fila:hover {
  color: var(--tinta);
  background: color-mix(in srgb, var(--elevado) 50%, transparent);
}

.t-rail > a[aria-current="page"] {
  color: var(--tinta);
  background: var(--elevado);
  box-shadow: 0 0 0 1px var(--line-soft), 0 8px 16px -12px rgba(27, 24, 32, 0.5);
}

.t-rail > a[aria-current="page"] .t-ico,
.t-barra > a[aria-current="page"] .t-ico,
.t-tope-ajustes[aria-current="page"] .t-ico {
  color: var(--sello);
}

.t-rail .t-ico {
  width: 22px;
  height: 22px;
}

.t-rail > a:focus-visible,
.t-rail .sesion-salir:focus-visible {
  outline-offset: 2px;
}

/* La marca: dos hojas y el perforado. */
.t-rail > .t-rail-marca {
  padding: 4px 0 14px;
  color: var(--sello);
}

.t-rail > .t-rail-marca:hover {
  background: transparent;
}

.t-marca-icono {
  display: block;
  width: 32px;
  height: 32px;
  flex: none;
  transition: transform 0.42s var(--muelle);
}

.t-rail-marca:hover .t-marca-icono,
.t-tope-marca:hover .t-marca-icono {
  transform: rotate(-5deg);
}

.t-marca-puntos {
  fill: var(--papel-2);
}

.t-rail-hueco {
  flex: 1 0 8px;
}

/* «Salir», al pie del menú y en la franja del móvil. */
.sesion-form {
  margin: 0;
}

.sesion-salir {
  min-height: 44px;
  padding: 0 8px;
  color: var(--tinta-2);
  font: 600 11.5px/1 var(--ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  transition: color 0.2s;
}

.sesion-salir:hover {
  color: var(--tinta);
}

/* En el menú lateral, «Salir» es una fila más: icono y nombre. */
.t-rail .sesion-salir.es-fila {
  width: 72px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 10px 2px 9px;
  text-decoration: none;
  transition: color 0.2s, background 0.2s;
}

/* Con poco alto (un móvil apaisado), el menú se aprieta para caber entero
   sin desplazar: filas de 46 px, sin el hueco flexible y con la marca más
   pequeña. Los nombres se quedan. */
@media (max-height: 520px) {
  .t-rail {
    gap: 2px;
    padding: 8px 8px;
  }

  .t-rail > a,
  .t-rail .sesion-salir.es-fila {
    height: 46px;
    gap: 3px;
    padding: 0 2px;
    justify-content: center;
  }

  .t-rail .t-ico {
    width: 20px;
    height: 20px;
  }

  .t-rail > .t-rail-marca {
    height: 30px;
    padding: 0 0 4px;
  }

  .t-rail .t-marca-icono {
    width: 26px;
    height: 26px;
  }

  .t-rail-hueco {
    display: none;
  }
}

/* Avisos de Inicio («Lo que necesita de ti»): la cuenta, en la esquina del
   icono, en el menú lateral y en la barra del móvil. */
.nav-globo {
  position: absolute;
  top: 4px;
  left: calc(50% + 3px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 17px;
  height: 16px;
  padding: 0 5px;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: 99px;
  box-shadow: 0 0 0 2px var(--papel-2);
  font: 500 10.5px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.nav-globo[hidden] {
  display: none;
}

.t-rail > a[aria-current="page"] .nav-globo {
  box-shadow: 0 0 0 2px var(--elevado);
}

/* ── Móvil: la franja de arriba y la barra de abajo ── */
.t-tope,
.t-barra {
  display: none;
}

@media (max-width: 760px) {
  /* Al llegar con el teclado o con un enlace a un punto de la página, lo
     enfocado no queda debajo de la barra. */
  html:has(.t-barra) {
    scroll-padding-bottom: 104px;
  }

  /* En columna y a toda la altura: en una página corta, lo que se pega
     abajo (la barra del editor, la de «Emitir» de ventas web) descansa
     justo encima de la barra y no a media pantalla. */
  .app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .workspace {
    flex: 1 0 auto;
  }

  .app-shell:not(.sin-barra) {
    --barra-alto: calc(57px + max(18px, env(safe-area-inset-bottom)));
    --barra-asoma: 16px;
  }

  .t-rail {
    display: none;
  }

  .t-tope {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 12px 0 16px;
  }

  .t-tope-marca {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    margin-right: auto;
    color: var(--tinta);
    font: 800 19px/1.2 var(--display);
    letter-spacing: -0.02em;
    text-decoration: none;
  }

  .t-tope-marca .t-marca-icono {
    width: 28px;
    height: 28px;
    color: var(--sello);
  }

  .t-tope-marca .t-marca-puntos {
    fill: var(--mesa);
  }

  .t-tope .sesion-salir {
    padding: 0 10px;
    font-size: 14px;
  }

  .t-tope-ajustes {
    width: 44px;
    height: 44px;
    flex: none;
    display: grid;
    place-items: center;
    color: var(--tinta-2);
    border-radius: 11px;
  }

  .t-tope-ajustes .t-ico {
    width: 22px;
    height: 22px;
  }

  .t-tope-ajustes[aria-current="page"] {
    color: var(--tinta);
    background: var(--elevado);
    box-shadow: 0 0 0 1px var(--line-soft);
  }

  /* El hueco de la barra: el final de la página no queda debajo. */
  .workspace {
    padding-bottom: var(--barra-alto);
  }

  .t-tope + .workspace > .content {
    padding-top: 14px;
  }

  .t-barra {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    padding: 6px 8px max(18px, env(safe-area-inset-bottom));
    background: var(--papel);
    border-top: 1px solid var(--line-soft);
  }

  .t-barra.es-corta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .t-barra > a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 50px;
    color: var(--tinta-2);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
  }

  .t-barra > a:focus-visible {
    outline-offset: 0;
  }

  .t-barra > a[aria-current="page"] {
    color: var(--tinta);
  }

  .t-barra .t-ico {
    width: 23px;
    height: 23px;
  }

  .t-barra .nav-globo {
    top: 2px;
    box-shadow: 0 0 0 2px var(--papel);
  }

  /* «Nueva factura»: el sello, en el centro y asomando por encima. */
  .t-barra > .es-nueva {
    justify-self: center;
    width: 56px;
    height: 56px;
    min-height: 56px;
    margin-top: -26px;
    color: var(--sobre-sello);
    background: var(--sello);
    border-radius: 50%;
    box-shadow: 0 0 0 5px var(--papel), var(--sombra-sello);
  }

  .t-barra > .es-nueva:focus-visible {
    outline-offset: 6px;
  }

  .t-barra > .es-nueva .t-ico {
    width: 26px;
    height: 26px;
  }

  /* Un «•••» abierto en la última fila: deja sitio debajo para que la página
     pueda subir y la lista no se quede detrás de la barra. */
  .app-shell:not(.sin-barra) .t-menu-mas-lista::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 1px;
    height: calc(var(--barra-alto) + var(--barra-asoma));
    pointer-events: none;
  }

  /* Lo que flota o se pega abajo sube por encima de la barra. */
  .app-shell .t-aviso-temporal {
    bottom: calc(24px + var(--barra-alto) + var(--barra-asoma));
  }

  /* A todo el ancho, con 16 px a cada lado: centrado y estrecho, una frase
     normal ocupaba cinco líneas. */
  .t-aviso-temporal {
    left: 16px;
    right: 16px;
    max-width: none;
    justify-content: space-between;
    transform: none;
    animation-name: aviso-temporal-entra-movil;
  }

  .t-aviso-temporal.se-va {
    transform: translateY(8px);
  }

  @keyframes aviso-temporal-entra-movil {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
  }

  .app-shell .t-lote.es-controlada {
    bottom: calc(22px + var(--barra-alto) + var(--barra-asoma));
  }

  .app-shell .vw-barra {
    bottom: var(--barra-alto);
    padding-bottom: calc(12px + var(--barra-asoma));
  }
}

@media (prefers-reduced-motion: reduce) {
  .t-rail > a,
  .t-marca-icono,
  .sesion-salir {
    transition: none;
  }
}

/* ── Ventas web, fase 1: «Emitir» en un paso (provisional) ────── */

.vw-lote {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin: 0 0 18px;
}

.vw-lote .form-hint {
  flex: 1 1 280px;
  margin: 0;
}

.vw-resultado ul {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding-left: 1.1em;
}

.vw-respuesta {
  display: inline-flex;
  gap: 6px;
  margin-left: 8px;
  vertical-align: middle;
}

.vw-respuesta form {
  display: inline;
}

.vw-respuesta .t-boton {
  min-height: 32px;
  padding: 4px 12px;
}

/* ── Ventas web, fase 2: la bandeja de Facturas y la ficha ───────
   Maqueta: https://claude.ai/artifact/TjxYHECdPNzjwN9RBBd2wV */

.fa-numero.es-pendiente {
  color: var(--sello);
  font-weight: 600;
}

.vw-panel {
  padding: 6px 0 0;
  overflow: hidden;
}

.vw-modo {
  margin: 10px 20px 2px;
  color: var(--tinta-3);
  font-size: 0.8rem;
}

.vw-resultado {
  margin: 0 0 14px;
}

.vw-grupo + .vw-grupo,
.vw-panel form + .vw-grupo,
.vw-hechas {
  border-top: 1px solid var(--line-soft);
}

.vw-grupo-titulo {
  margin: 0;
  padding: 14px 20px 6px;
  color: var(--tinta-3);
  font: 500 0.72rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vw-grupo-titulo b {
  color: var(--tinta);
  font-weight: 500;
}

.vw-caja {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sello);
  cursor: pointer;
}

.vw-pregunta {
  grid-column: 3 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  color: var(--tinta-2);
  font-size: 0.86rem;
}

.vw-respuesta {
  display: inline-flex;
  gap: 6px;
}

.vw-chip {
  min-height: 32px;
  padding: 5px 13px;
  color: var(--sello);
  background: var(--papel);
  border: 1px solid var(--sello-borde);
  border-radius: 99px;
  font: 600 0.82rem var(--ui);
  cursor: pointer;
}

.vw-chip:hover {
  background: var(--sello-piel);
}

.vw-hechas > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  color: var(--tinta-2);
  font-size: 0.9rem;
  cursor: pointer;
  list-style: none;
}

.vw-hechas > summary::-webkit-details-marker {
  display: none;
}

.vw-hechas .vw-ver {
  color: var(--sello);
  font-weight: 600;
}

.vw-hechas[open] .vw-ver {
  visibility: hidden;
}

.vw-al-dia {
  margin: 8px 0 14px;
}

.vw-sueltos ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 4px 20px 16px 38px;
  color: var(--tinta-2);
  font-size: 0.88rem;
}

/* La barra de «Emitir», pegada abajo como la del editor. */
.vw-barra {
  position: sticky;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin: 22px calc(-1 * clamp(22px, 4vw, 54px)) -72px;
  padding: 12px clamp(22px, 4vw, 54px);
  background: var(--papel);
  border-top: 1px solid var(--line);
}

.vw-barra p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.9rem;
}

.vw-barra strong {
  color: var(--tinta);
  font: 500 0.95rem var(--mono);
}

/* ── La ficha ───────────────────────────────────────────────────── */

.vw-cabecera h1 {
  margin-top: 4px;
}

.vw-ficha-cab {
  margin: -4px 0 18px;
}

.vw-pasos {
  display: flex;
  align-items: center;
  max-width: 420px;
}

.vw-hito {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta-2);
  font-size: 0.82rem;
  white-space: nowrap;
}

.vw-hito i {
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--safe);
  border-radius: 50%;
}

.vw-hito.es-pendiente {
  color: var(--sello);
  font-weight: 600;
}

.vw-hito.es-pendiente i {
  background: transparent;
  border: 2px solid var(--sello);
}

.vw-tramo {
  flex: 1;
  min-width: 18px;
  height: 2px;
  margin: 0 10px;
  background: var(--line);
}

.vw-ficha {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 22px;
  align-items: start;
  margin-bottom: 22px;
}

.vw-recibo {
  display: grid;
  gap: 14px;
  padding: 22px;
  background: var(--papel);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.vw-rotulo {
  margin: 0;
  color: var(--tinta-3);
  font: 500 0.72rem/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.vw-grande {
  margin: 0;
  font: 800 2.2rem/1 var(--display);
  letter-spacing: -0.03em;
}

.vw-grande small {
  display: block;
  margin-top: 8px;
  color: var(--safe);
  font: 500 0.85rem var(--ui);
  letter-spacing: 0;
}

.vw-datos {
  margin: 0;
}

.vw-datos div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px dashed var(--line);
  font-size: 0.9rem;
}

.vw-datos dt {
  color: var(--tinta-2);
}

.vw-datos dd {
  margin: 0;
  font-weight: 500;
  text-align: right;
  overflow-wrap: anywhere;
}

/* La factura, siempre papel claro con tinta oscura: blanco en claro y
   atenuado en oscuro (--hoja… en :root). */
.vw-hoja {
  position: relative;
  display: grid;
  gap: 12px;
  padding: 24px 24px 20px;
  color: var(--hoja-tinta);
  background: var(--hoja);
  color-scheme: light;
  border-radius: 6px;
  box-shadow: var(--shadow-alta);
}

.vw-hoja .vw-rotulo {
  color: var(--hoja-tinta-3);
}

.vw-hoja p {
  margin: -6px 0 0;
  font-size: 0.9rem;
}

.vw-hoja-cab {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}

.vw-hoja-cab strong {
  font: 800 1.2rem var(--display);
  letter-spacing: -0.02em;
}

.vw-hoja-cab span {
  color: var(--hoja-tinta-3);
  font: 400 0.72rem/1.5 var(--mono);
  text-align: right;
}

.vw-linea {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.9rem;
}

.vw-linea span:last-child {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

.vw-linea:first-of-type {
  padding-top: 10px;
  border-top: 1px solid var(--hoja-linea);
}

.vw-linea.es-iva {
  color: var(--hoja-tinta-3);
}

.vw-linea.es-total {
  padding-top: 10px;
  border-top: 2px solid var(--hoja-tinta);
  font-weight: 700;
  font-size: 1.02rem;
}

.vw-hoja:has(.vw-sello) {
  padding-bottom: 54px;
}

.vw-sello {
  position: absolute;
  right: 20px;
  bottom: 16px;
  padding: 4px 8px;
  color: var(--hoja-bien);
  border: 2px solid var(--hoja-bien);
  border-radius: 6px;
  font: 500 0.7rem var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.85;
  transform: rotate(-8deg);
}

.vw-hoja-hecha {
  display: grid;
  gap: 8px;
  padding: 22px;
  background: var(--papel);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.vw-hoja-hecha p {
  margin: 0;
}

.vw-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
}

.vw-acciones form {
  margin: 0;
}

.vw-nota {
  margin: 8px 0 0;
  color: var(--tinta-3);
  font-size: 0.84rem;
}

.vw-motivo {
  color: var(--warning);
}

.vw-cambiar {
  margin-top: 14px;
}

/* Stripe devolvió dinero de una venta ya facturada. */
.vw-devolucion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  margin: 0 0 16px;
  padding: 16px 20px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-borde);
  border-radius: var(--radio-m);
}

.vw-devolucion h2 {
  margin: 0 0 2px;
  font-size: 1rem;
}

.vw-devolucion p {
  margin: 0;
  max-width: 60ch;
  color: var(--tinta-2);
  font-size: 0.88rem;
}

.vw-devolucion form {
  margin: 0;
}

/* «Cambiar datos»: tres cosas, antes de emitir. Los mismos campos que el
   editor de facturas (papel, línea fina, sello al enfocar) y el selector
   segmentado del tema para «Curso / Suscripción». */
.vw-cambiar > .vw-nota {
  max-width: 64ch;
  margin: -6px 18px 16px;
}

.vw-cambiar-form {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) auto minmax(0, 1fr);
  align-items: start;
  gap: 18px 24px;
  padding: 0 18px 18px;
}

.vw-campo {
  display: grid;
  gap: 6px;
  align-content: start;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

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

.vw-campo:focus-within > label,
.vw-campo:focus-within > legend {
  color: var(--sello);
}

.vw-campo > small {
  color: var(--tinta-3);
  font-size: 0.8rem;
}

.vw-cambiar-form .vw-campo select,
.vw-cambiar-form .vw-campo input[type="date"] {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 8px 11px;
  color: var(--tinta);
  background-color: var(--papel);
  border: 1px solid var(--line);
  border-radius: 10px;
  font: 400 0.92rem var(--ui);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.vw-cambiar-form .vw-campo select {
  padding-right: 36px;
}

.vw-cambiar-form .vw-campo select:hover,
.vw-cambiar-form .vw-campo input[type="date"]:hover {
  border-color: var(--tinta-3);
}

.vw-cambiar-form .vw-campo select:focus,
.vw-cambiar-form .vw-campo input[type="date"]:focus {
  border-color: var(--foco);
  outline: none;
  box-shadow: 0 0 0 3px var(--sello-piel);
}

/* La leyenda de un fieldset no toma el hueco de la rejilla: se lo damos. */
.vw-cambiar-form fieldset.vw-campo > .t-segmento {
  margin-top: 6px;
}

.vw-cambiar-form .t-segmento {
  display: flex;
  flex-wrap: nowrap;
  width: fit-content;
  height: 42px;
  padding: 3px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
}

.vw-cambiar-form .t-segmento-opcion span {
  height: 34px;
  min-height: 0;
  padding: 0 16px;
  font-size: 0.9rem;
}

.vw-cambiar-pie {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

@media (max-width: 1000px) {
  .vw-cambiar-form {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .vw-cambiar-form > .vw-campo:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .vw-cambiar-form {
    grid-template-columns: minmax(0, 1fr);
  }

  .vw-cambiar-pie .t-boton {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .vw-ficha {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {

  .vw-caja {
    grid-row: 1 / span 2;
  }

  .vw-pregunta { grid-column: 3 / -1; margin-top: 6px; }

  .vw-grupo-titulo,
  .vw-hechas > summary,
  .vw-modo {
    padding-inline: 16px;
    margin-inline: 0;
  }

  .vw-barra {
    margin: 22px -18px -56px;
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
  }

  .vw-barra .t-boton {
    width: 100%;
  }

  .vw-barra-nota {
    display: none;
  }

  .vw-grande {
    font-size: 1.9rem;
  }
}

@media (max-width: 440px) {
  .vw-barra {
    margin-right: -12px;
    margin-left: -12px;
    padding-right: 12px;
    padding-left: 12px;
  }
}

/* Con la barra, la pestaña ocupa el alto y la barra queda abajo aunque haya pocas ventas. */
.workspace:has(> .content > .vw-barra) {
  display: flex;
  flex-direction: column;
}

.workspace:has(> .content > .vw-barra) > .content {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  width: 100%;
}

.content > .vw-barra {
  margin-top: auto;
}

/* Cuatro pestañas en el móvil: una sola fila, más prietas. */
@media (max-width: 760px) {
  .fa-barra .fa-pestanas:has(a[href="/facturas?vista=ventas-web"]) {
    flex-wrap: nowrap;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .fa-barra .fa-pestanas:has(a[href="/facturas?vista=ventas-web"]) a {
    flex: none;
    padding-inline: 8px;
    font-size: 0.84rem;
  }
}

/* Recorrido de UX (2-oct): a 375 px las cuatro pestañas medían 377 px en
   351 y «Ventas web» quedaba cortada con su contador fuera, sin pista de
   que la tira se desplaza. Ocupan todo el ancho y se reparten el hueco. */
@media (max-width: 760px) {
  .fa-barra .fa-pestanas:has(a[href="/facturas?vista=ventas-web"]) {
    display: flex;
    width: 100%;
    gap: 2px;
  }

  .fa-barra .fa-pestanas:has(a[href="/facturas?vista=ventas-web"]) a {
    flex: 1 1 auto;
    justify-content: center;
    gap: 4px;
    padding-inline: 5px;
  }
}

@media (max-width: 380px) {
  .fa-barra .fa-pestanas:has(a[href="/facturas?vista=ventas-web"]) a {
    padding-inline: 3px;
    font-size: 0.78rem;
  }
}

/* Recorrido (27-sep): al pasar el ratón por una fila se tiñe la fila
   entera, con su menú «•••» dentro. El desplazamiento con la raya morada
   quedaba separado del borde de la tarjeta, y teñir solo el enlace dejaba
   el color cortado justo antes del menú. */
.t-fila {
  border-radius: var(--radio-s);
  transition: background 0.2s;
}

/* ── Ajustes centrados ──────────────────────────────────────────
   En pantallas anchas la columna de Ajustes, y la de cada ajuste, se
   quedaba pegada a la izquierda con medio panel vacío. Se centra en el
   hueco con su título, que arranca en el mismo borde que las tarjetas. El
   índice es algo más estrecho que las pantallas de cada ajuste, pero las
   dos comparten eje, así que al entrar y salir nada salta de lado. */
@media (min-width: 761px) {
  .content:has(> .ajustes-grupos) > *,
  .content:has(> .aj-cabecera) > * {
    width: 100%;
    margin-inline: auto;
  }

  .content:has(> .ajustes-grupos) > * {
    max-width: 600px;
  }

  .content:has(> .aj-cabecera) > * {
    max-width: 720px;
  }
}

/* ── Informes: la columna lateral llega hasta abajo ─────────────
   Con las dos filas a partes iguales, el paquete es más alto que la
   última descarga y la gráfica, y dejaba un hueco debajo de la gráfica.
   En escritorio la columna lateral toma la altura del paquete y la
   gráfica crece para llenarla: las barras se estiran en proporción (el
   SVG no conserva el aspecto) y los meses siguen al pie. */
@media (min-width: 1100px) {
  .if-mesa {
    align-items: stretch;
  }

  .if-lateral {
    display: flex;
    flex-direction: column;
  }

  .if-lateral > .t-panel:last-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .if-lateral > .t-panel:last-child .t-grafico {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
  }

  .if-lateral .t-demo-barras {
    flex: 1 1 auto;
  }

  .if-lateral .t-demo-mes,
  .if-lateral .t-demo-barra {
    display: flex;
    flex-direction: column;
  }

  .if-lateral .t-demo-barra {
    flex: 1 1 auto;
  }

  .if-lateral .t-demo-mes svg {
    flex: 1 1 160px;
    height: auto;
    min-height: 160px;
  }
}

/* ── Ajustes › Canarias, Ceuta y Melilla ─────────────────────────
   Una fila por territorio con su interruptor, como el resto de filas de
   Ajustes. La fecha de alta solo aparece con el interruptor encendido. */
.aj-territorio {
  border-top: 1px solid var(--line-soft);
}

.aj-bloque-rotulo + .aj-territorio {
  border-top: 0;
}

.aj-territorio-cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  cursor: pointer;
}

.aj-territorio-fecha {
  display: none;
  gap: 6px;
  max-width: 260px;
  margin: 0 0 14px;
}

.aj-territorio:has(.aj-interruptor:checked) .aj-territorio-fecha,
.aj-territorio.es-error .aj-territorio-fecha {
  display: grid;
}

.aj-territorio-fecha label {
  font-size: 0.84rem;
  color: var(--tinta-2);
}

.aj-territorio-fecha .field-hint,
.aj-territorio-fecha .field-error {
  margin: 0;
}

/* El interruptor: un checkbox con forma de pastilla. */
.aj-interruptor {
  appearance: none;
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--borde-control);
  border-radius: 999px;
  background: var(--papel-2);
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.aj-interruptor::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  /* Blanco también de noche: sobre la pista oscura se ve apagado. */
  background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.25);
  transition: transform 160ms ease;
}

.aj-interruptor:checked {
  border-color: var(--sello);
  background: var(--sello);
}

.aj-interruptor:checked::after {
  transform: translateX(18px);
}

.aj-interruptor:focus-visible {
  outline: 2px solid var(--sello);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .aj-interruptor,
  .aj-interruptor::after {
    transition: none;
  }
}

/* ── Ajustes › Ventas a la UE ───────────────────────────────────
   Tres opciones con su explicación, como «Tipo» en Conceptos. El importe
   del año anterior solo aparece con «IVA español», que es cuando sirve. */
.aj-opciones {
  display: grid;
  gap: 4px;
  margin: 2px -9px 0;
}

.aj-ue-anterior {
  display: none;
  gap: 10px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.aj-ventas-ue:has(input[name="modo"][value="origin_confirmed"]:checked) .aj-ue-anterior,
.aj-ue-anterior.es-error {
  display: grid;
}

.aj-ue-anterior-titulo {
  margin: 0;
  font-weight: 600;
}

.aj-ue-anterior-titulo small {
  display: block;
  margin-top: 2px;
  color: var(--tinta-3);
  font-size: 0.8rem;
  font-weight: 400;
}

.aj-ue-campos {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 12px;
}

.aj-ue-campos .field {
  display: grid;
  gap: 6px;
}

.aj-ue-campos label {
  font-size: 0.84rem;
  color: var(--tinta-2);
}

.aj-ue-campos .field-hint,
.aj-ue-campos .field-error {
  margin: 0;
}

@media (max-width: 560px) {
  .aj-ue-campos {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── Bandeja de ventas web: separadores y motivos (28-sep) ───────
   Los «·» de la barra llevan aire a los dos lados: el importe va en
   monoespaciada y el «€» se quedaba pegado al separador. El motivo por el
   que una venta espera es una nota aparte, bajo el comprador, y no se
   confunde con las columnas de la fila. */
.vw-sep {
  margin: 0 0.5em;
  color: var(--tinta-3);
}

.vw-pregunta {
  margin-top: 4px;
}

.vw-pregunta > span:first-child {
  padding: 5px 10px;
  background: var(--papel-2);
  border-radius: 8px;
  line-height: 1.4;
}

/* ── Ficha de la factura: tarjeta «Hacienda» (28-sep) ───────────
   Cómo va el envío a Hacienda, como las tarjetas de al lado: rótulo, una
   etiqueta de color, una frase llana y, si toca, el botón que lo arregla. */
.fe-hacienda {
  display: grid;
  gap: 10px;
}

.fe-hacienda-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fe-hacienda h2 {
  margin: 0;
  color: var(--tinta-3);
  font: 500 0.72rem/1.2 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.fe-hacienda p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.9rem;
}

.fe-hacienda .t-boton {
  justify-self: start;
}

.fe-hacienda .t-enlace-suave {
  justify-self: start;
  font-size: 0.85rem;
}

/* ── Envío a Hacienda: piezas que siguen de la versión del 28-sep ──
   El rótulo pequeño de cada bloque y las filas de datos de «Detalles
   técnicos». El resto de la página usa el lenguaje «hz-» del 2-oct. */
.fh-subtitulo {
  margin: 14px 0 0;
  color: var(--tinta-3);
  font: 500 0.72rem/1.2 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.fh-datos > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.9rem;
}

.fh-datos > div:first-child {
  border-top: 0;
}

.fh-datos span {
  color: var(--tinta-2);
}

.fh-datos strong {
  font-weight: 600;
  text-align: right;
  overflow-wrap: anywhere;
}

.hz-detalles .summary-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.hz-detalles .summary-list > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  background: none;
  border-top: 1px solid var(--line-soft);
}

.hz-detalles .summary-list dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

/* ── Envío de prueba a Hacienda, segunda vuelta (2-oct) ─────────
   Fer: «tosca». Arriba, de qué documento se trata. La tarjeta de estado
   lleva un icono con el color del resultado, el recorrido en tres pasos
   (preparado, enviado, respuesta), la respuesta de Hacienda en su propio
   bloque y, en el pie, la acción con su casilla en la misma fila. Debajo,
   la luz del servidor y los detalles técnicos plegados. */
.hz-cabecera .hz-contexto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 6px;
  color: var(--tinta-2);
}

.hz-marca {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  color: var(--sello);
  background: var(--sello-piel);
  border: 1px solid var(--sello-borde);
  border-radius: 999px;
  font: 500 0.7rem/1.3 var(--mono);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hz-pantalla {
  gap: 14px;
}

.hz-estado {
  --hz-color: var(--tinta-2);
  --hz-suave: var(--papel-2);
  --hz-borde: var(--line);
  display: grid;
  gap: 22px;
  padding: 0;
  overflow: hidden;
}

.hz-estado.tono-bien {
  --hz-color: var(--safe);
  --hz-suave: var(--safe-soft);
  --hz-borde: var(--safe-borde);
}

.hz-estado.tono-aviso {
  --hz-color: var(--warning);
  --hz-suave: var(--warning-soft);
  --hz-borde: var(--warning-borde);
}

.hz-estado.tono-peligro {
  --hz-color: var(--danger);
  --hz-suave: var(--danger-soft);
  --hz-borde: var(--danger-borde);
}

.hz-cabeza {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 26px 0;
}

.hz-icono {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  color: var(--hz-color);
  background: var(--hz-suave);
  border: 1px solid var(--hz-borde);
  border-radius: 50%;
}

.hz-icono svg {
  width: 22px;
  height: 22px;
}

.hz-cabeza h2 {
  margin: 2px 0 4px;
  color: var(--tinta);
  font: 650 1.3rem/1.25 var(--display);
}

.hz-cabeza p {
  margin: 0;
  color: var(--tinta-2);
}

/* El recorrido: tres puntos unidos por una línea; el actual, con el
   color del resultado. */
.hz-pasos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 0 26px;
  list-style: none;
}

.hz-paso {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 8px;
  color: var(--tinta-3);
  font-size: 0.85rem;
}

.hz-paso::before {
  position: absolute;
  top: 6px;
  right: 0;
  left: 18px;
  height: 2px;
  background: var(--line);
  content: "";
}

.hz-paso:last-child::before {
  display: none;
}

.hz-paso.es-hecho::before {
  background: var(--tinta-3);
}

.hz-punto {
  position: relative;
  z-index: 1;
  width: 14px;
  height: 14px;
  background: var(--papel);
  border: 2px solid var(--line);
  border-radius: 50%;
  box-sizing: border-box;
}

.hz-paso.es-hecho .hz-punto {
  background: var(--tinta-3);
  border-color: var(--tinta-3);
}

.hz-paso.es-hecho.tono-bien .hz-punto {
  background: var(--safe);
  border-color: var(--safe);
}

.hz-paso.es-actual .hz-punto {
  border-color: var(--tinta-2);
  box-shadow: 0 0 0 4px var(--papel-2);
}

.hz-paso.es-actual.tono-aviso .hz-punto {
  background: var(--warning);
  border-color: var(--warning);
  box-shadow: 0 0 0 4px var(--warning-soft);
}

.hz-paso.es-actual.tono-peligro .hz-punto {
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-soft);
}

.hz-paso-texto {
  display: grid;
  gap: 2px;
  padding-right: 8px;
}

.hz-paso.es-hecho .hz-paso-texto,
.hz-paso.es-actual .hz-paso-texto {
  color: var(--tinta);
  font-weight: 600;
}

.hz-paso-texto small {
  color: var(--tinta-3);
  font-size: 0.75rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

/* Lo que responde Hacienda: una cita con la raya del color del resultado. */
.hz-respuesta {
  display: grid;
  gap: 4px;
  margin: 0 26px;
  padding: 14px 16px;
  background: var(--papel-2);
  border-left: 3px solid var(--tinta-3);
  border-radius: 0 var(--radio-s) var(--radio-s) 0;
}

.hz-respuesta.tono-bien { border-left-color: var(--safe); }
.hz-respuesta.tono-aviso { border-left-color: var(--warning); }
.hz-respuesta.tono-peligro { border-left-color: var(--danger); }

.hz-respuesta > span {
  color: var(--tinta-3);
  font: 500 0.7rem/1.2 var(--mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.hz-respuesta p {
  margin: 0;
  color: var(--tinta);
  font-weight: 500;
}

.hz-respuesta .hz-codigo {
  font-family: var(--mono);
  font-weight: 500;
  overflow-wrap: anywhere;
}

.hz-respuesta small {
  color: var(--tinta-3);
  font-size: 0.78rem;
}

/* Remisión parada (página fiscal): la alerta va dentro de la tarjeta. */
.hz-alerta {
  margin: 0 26px;
}

.hz-alerta > p {
  margin: 0;
}

/* El pie de la tarjeta: la acción que toca, separada del relato. */
.hz-pie {
  display: grid;
  gap: 16px;
  padding: 18px 26px 22px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.hz-estado > :last-child:not(.hz-pie) {
  margin-bottom: 24px;
}

.hz-pie > div {
  display: grid;
  gap: 12px;
}

.hz-form {
  display: grid;
  gap: 16px;
  margin: 0;
}

.hz-form .form-grid {
  margin: 0;
}

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

.hz-form .form-field label {
  color: var(--tinta-2);
  font-size: 0.86rem;
  font-weight: 500;
}

.hz-form input:not([type="checkbox"]):not([type="hidden"]),
.hz-form select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 11px 13px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-s);
  font: inherit;
  font-size: 0.9rem;
}

.hz-form input:not([type="checkbox"]):focus,
.hz-form select:focus {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.hz-form .field-hint {
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.8rem;
}

.hz-confirmar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}

.hz-confirmar .delivery-confirm {
  flex: 1 1 260px;
  margin: 0;
}

.hz-confirmar .t-boton {
  flex: 0 0 auto;
}

.hz-confirmar:not(:has(.delivery-confirm)) {
  justify-content: flex-start;
}

.hz-otra {
  display: grid;
  gap: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.hz-pie > .hz-otra:first-child {
  padding-top: 0;
  border-top: 0;
}

.hz-nota {
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.86rem;
}

/* La luz del servidor: gris si el envío está cerrado, verde si abierto. */
.hz-servidor {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  padding: 0 6px;
  color: var(--tinta-3);
  font-size: 0.85rem;
}

.hz-luz {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--tinta-3);
  border-radius: 50%;
  transform: translateY(-1px);
}

.hz-servidor.es-abierto .hz-luz {
  background: var(--safe);
  box-shadow: 0 0 0 3px var(--safe-soft);
}

/* Detalles técnicos: una fila con título, subtítulo y flecha. */
.hz-detalles {
  padding: 0;
}

.hz-detalles > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  list-style: none;
}

.hz-detalles > summary::-webkit-details-marker {
  display: none;
}

.hz-detalles-titulo {
  display: grid;
  gap: 2px;
  color: var(--tinta);
  font-weight: 600;
}

.hz-detalles-titulo small {
  color: var(--tinta-3);
  font-size: 0.82rem;
  font-weight: 400;
}

.hz-detalles > summary svg {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  color: var(--tinta-3);
  transition: transform 0.2s var(--salida);
}

.hz-detalles[open] > summary svg {
  transform: rotate(180deg);
}

.hz-detalles-cuerpo {
  display: grid;
  gap: 18px;
  padding: 4px 24px 22px;
  border-top: 1px solid var(--line-soft);
}

.hz-detalles-cuerpo > section {
  display: grid;
  gap: 8px;
}

.hz-detalles-cuerpo .fh-subtitulo {
  margin-top: 14px;
}

/* Historia: una línea de tiempo con un punto por paso. */
.hz-historia {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.hz-historia li {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  padding: 0 0 12px 22px;
}

.hz-historia li::before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--tinta-3);
  border-radius: 50%;
  content: "";
}

.hz-historia li::after {
  position: absolute;
  top: 17px;
  bottom: 0;
  left: 4px;
  width: 1px;
  background: var(--line);
  content: "";
}

.hz-historia li:last-child {
  padding-bottom: 0;
}

.hz-historia li:last-child::after {
  display: none;
}

.hz-historia li.tono-bien::before { background: var(--safe); }
.hz-historia li.tono-aviso::before { background: var(--warning); }
.hz-historia li.tono-peligro::before { background: var(--danger); }

.hz-historia time {
  color: var(--tinta-3);
  font-variant-numeric: tabular-nums;
}

/* Archivos: enlaces con su icono de documento. */
.hz-archivos {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.hz-archivos li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.hz-archivos li > span,
.hz-archivos li > small {
  flex-basis: 100%;
  color: var(--tinta-3);
}

.hz-archivos a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  color: var(--sello);
  font-weight: 600;
  text-decoration: none;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-s);
}

.hz-archivos a:hover {
  border-color: var(--sello-borde);
}

.hz-archivos svg {
  width: 16px;
  height: 16px;
}

@media (max-width: 720px) {
  .hz-cabeza { padding: 20px 18px 0; gap: 14px; }
  .hz-pasos, .hz-pie { padding-left: 18px; padding-right: 18px; }
  .hz-respuesta, .hz-alerta { margin: 0 18px; }
  .hz-form .form-grid { grid-template-columns: minmax(0, 1fr); }
  .hz-confirmar { flex-direction: column; align-items: stretch; }
  /* En columna, la base de 260 px de la casilla sería altura: hueco vacío. */
  .hz-confirmar .delivery-confirm { flex: 0 0 auto; }
  .hz-confirmar .t-boton { width: 100%; }
  .hz-historia li { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hz-detalles > summary { padding: 16px 18px; }
  .hz-detalles-cuerpo { padding: 4px 18px 20px; }
}

/* ── Revisar rectificativa (28-sep) ─────────────────────────────
   Como el editor: a la izquierda el resumen y la confirmación, a la
   derecha la hoja. Cómo la recibe Hacienda va en una frase; «Cambiar»
   solo si la gestoría pide otra cosa. */
.rc-resumen {
  display: grid;
  gap: 16px;
}

.rc-resumen form {
  display: grid;
  gap: 16px;
}

.rc-resumen .ledger-balances {
  margin: 0;
}

.rc-hacienda {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  background: var(--papel-2);
  border-radius: 10px;
}

.rc-hacienda > p {
  margin: 0;
  color: var(--tinta-2);
}

.rc-cambiar > summary {
  color: var(--sello);
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.rc-cambiar[open] {
  display: grid;
  gap: 10px;
}

.rc-opciones {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  border: 0;
}

.rc-opciones legend {
  margin-bottom: 4px;
  padding: 0;
  color: var(--tinta-2);
  font-size: 0.79rem;
  font-weight: 600;
}

.rc-resumen .t-boton {
  justify-self: start;
}

/* Las opciones de «Hacienda la recibirá como …» aparecen justo debajo de
   la frase, con el mismo aspecto que las del editor. */
.rc-pop {
  margin: 0;
}

.rc-pop[hidden] {
  display: none;
}

.rc-token[aria-expanded="true"] {
  background: var(--sello-piel);
  border-bottom-color: transparent;
  border-radius: 6px;
}

/* Sin relleno lateral: la coma y el punto van pegados a la palabra. El
   fondo al pasar por encima sale con una sombra, que no ocupa sitio. */
.rc-token {
  padding: 0;
}

.rc-token:hover,
.rc-token[aria-expanded="true"] {
  box-shadow: 0 0 0 3px var(--sello-piel);
}

/* Primero las cifras, sin rayas ni márgenes de más; la serie, debajo y en
   pequeño, que es un dato de consulta. */
.rc-resumen .ledger-balances {
  margin: 0;
  padding: 0;
  border: 0;
}

.rc-serie {
  margin: -6px 0 0;
  color: var(--tinta-3);
  font-size: 0.84rem;
}

/* ── Sin «·» como separador (Fer, 28-sep) ────────────────────────
   La línea de resumen del editor separa sus valores con aire, no con un
   punto; los recuentos de los títulos van en una pastilla pequeña. */
.t-resumen {
  column-gap: 14px;
}

.t-resumen-parte:has(~ .t-resumen-parte:not([hidden]))::after {
  content: none;
}

.t-cuenta {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  margin-left: 6px;
  padding: 0 5px;
  color: var(--tinta-2);
  background: var(--papel-2);
  border-radius: 99px;
  font: 600 0.72rem/1 var(--mono);
  letter-spacing: 0;
  vertical-align: 1px;
}

/* ── Ficha del cliente: empresa extranjera confirmada (29-sep) ───
   La casilla a la izquierda y su texto al lado, como las demás casillas;
   debajo, para qué sirve y, si ya se marcó, desde cuándo. */
.cl-casilla {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  color: var(--tinta);
  font-size: 0.9rem;
  font-weight: 400;
  line-height: 1.45;
  cursor: pointer;
}

.cl-casilla input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--sello);
}

.cl-casilla + .cl-ayuda,
.cl-casilla ~ .cl-ayuda {
  padding-left: 28px;
}

.cl-confirmado {
  color: var(--safe);
  font-weight: 600;
}

/* Fase F5: Facturación real (activación, acta y declaración responsable).
   Cada grupo, en una tarjeta: una frase con su etiqueta arriba y una sola
   acción principal debajo. Lo que está bien se enseña compacto; solo lo
   que falla o avisa lleva su explicación. */
.ac-cab {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.ac-cab .aj-bloque-rotulo {
  margin-bottom: 0;
}

.ac-lead {
  margin: 8px 0 0;
  max-width: 62ch;
  font-size: 0.98rem;
  line-height: 1.5;
}

.ac-causas {
  margin: 8px 0 0;
  padding-left: 1.1rem;
  color: var(--danger);
  font-size: 0.88rem;
  line-height: 1.45;
}

.ac-paso {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.ac-resumen {
  margin: 0;
  font-size: 0.9rem;
}

.ac-resumen span {
  color: var(--tinta-2);
}

.ac-comprobaciones {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.ac-comprobacion {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}

.ac-comprobacion:last-child {
  border-bottom: 0;
}

.ac-comprobacion b {
  font-size: 0.9rem;
  font-weight: 600;
}

.ac-comprobacion p {
  margin: 2px 0 0;
  color: var(--tinta-2);
  font-size: 0.84rem;
  line-height: 1.45;
}

.ac-bien {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  columns: 3 11rem;
  column-gap: 20px;
  color: var(--tinta-2);
  font-size: 0.84rem;
  line-height: 1.9;
}

.ac-bien li {
  break-inside: avoid;
}

.ac-bien li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 8px 1px 0;
  border-radius: 50%;
  background: var(--safe);
}

.ac-bien li.es-aviso::before {
  background: var(--warning);
}

.ac-bien li.es-fallo::before {
  background: var(--danger);
}

#ac-motivo {
  max-width: 560px;
}

.ac-recomprobar {
  padding-top: 4px;
}

.ac-recomprobar .text-action {
  justify-self: start;
  min-height: 32px;
  font-size: 0.84rem;
}

.ac-form {
  display: grid;
  gap: 10px;
  padding-top: 14px;
}

.ac-form p {
  margin: 0;
}

.ac-form .t-boton {
  justify-self: start;
}

.ac-activar {
  margin-top: 6px;
  border-top: 1px solid var(--line-soft);
}

.ac-primera {
  font-size: 0.98rem;
}

.ac-primera b,
.ac-activar .aj-nota b {
  font: 600 0.92em/1.3 var(--mono);
  color: var(--tinta);
}

.ac-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 560px;
}

.ac-campos .field {
  gap: 6px;
  margin: 0;
  padding: 0;
}

.ac-campos input {
  height: 46px;
}

.t-boton.es-peligro {
  color: var(--danger);
  background: transparent;
  border: 1px solid var(--danger-borde);
}

.t-boton.es-peligro:hover {
  background: var(--danger-soft);
}

.ac-borrador {
  padding: 10px 14px;
  border: 1px solid var(--danger-borde);
  border-radius: var(--radio-m);
  background: var(--danger-soft);
}

.ac-datos {
  margin: 4px 0 0;
}

.ac-datos > div {
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
  gap: 2px 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}

.ac-datos > div:first-child {
  border-top: 0;
}

.ac-datos dt {
  font-weight: 600;
  font-size: 0.9rem;
}

.ac-datos dd {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.9rem;
  line-height: 1.5;
}

.ac-declaracion h3 {
  margin: 18px 0 6px;
  font-size: 0.95rem;
}

.ac-declaracion ul {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ac-declaracion > p {
  max-width: 68ch;
  font-size: 0.9rem;
  line-height: 1.55;
}

.ac-acta-comprobaciones {
  margin-top: 12px;
}

@media (max-width: 560px) {
  .ac-comprobacion,
  .ac-campos,
  .ac-datos > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .ac-cab {
    flex-wrap: wrap;
  }

  .ac-bien {
    columns: 2;
    column-gap: 12px;
    font-size: 0.8rem;
  }

  .ac-campos input {
    height: 48px;
  }

  .ac-form .t-boton {
    justify-self: stretch;
  }
}

/* El acta y la declaración, en papel: sin menú, sin botones y sin sombras. */
@media print {
  .ac-documento .t-tarjeta {
    box-shadow: none;
    border: 1px solid var(--line-soft);
    break-inside: avoid;
  }

  .aj-cabecera .t-volver,
  .aj-cabecera a,
  .no-print {
    display: none !important;
  }
}

/* Fase F6: Stripe con la cuenta real, con el aspecto de Ajustes. Un
   formulario a la vista, sin desplegables, y una sola acción por bloque. */
.aj-form {
  display: grid;
  gap: 12px;
  padding-top: 12px;
}

.aj-form .field {
  max-width: 560px;
  margin: 0;
}

.aj-form .field small {
  display: block;
  margin-top: 4px;
  color: var(--tinta-3);
  font-size: 0.8rem;
  line-height: 1.45;
}

.aj-form .t-boton {
  justify-self: start;
}

.aj-acciones .primary-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

@media (max-width: 560px) {
  .aj-form .t-boton {
    justify-self: stretch;
  }
}

/* ── Fase 4: volumen de la web ─────────────────────────────────────
   En Facturas, las ventas de la web van en una fila por mes (filaFactura,
   «Ventas de la web»). La vista del mes lleva su cabecera con el recuento
   y el total, y vuelve a la lista. */

.fa-mes-web {
  padding: 16px 2px 10px;
}

.fa-mes-web h2 {
  margin: 8px 0 2px;
  font: 700 1.2rem/1.25 var(--display);
}

.fa-mes-web p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.9rem;
}

.fa-mes-web p b {
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
}

/* Bandeja: lo ya facturado es una línea al pie que lleva al mes en
   Facturas; el aviso de la emisión automática parada va arriba. */
.vw-pie {
  margin: 0;
  padding: 14px 20px;
  color: var(--tinta-2);
  font-size: 0.88rem;
  border-top: 1px solid var(--line-soft);
}

.vw-pie a {
  color: var(--sello-oscuro);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.vw-pie a:hover {
  text-decoration: underline;
}

.vw-automatica {
  margin: 14px 20px 4px;
}

.aj-emision-fila {
  border-top: 0;
}

@media (max-width: 760px) {
  .vw-pie {
    padding-inline: 16px;
  }

  .vw-automatica {
    margin-inline: 16px;
  }
}

/* Con la emisión automática no hay casillas: la fila no guarda su hueco. */

@media (max-width: 760px) {
  .aj-emision-fila {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .aj-emision-fila .aj-fila-valor {
    align-self: center;
  }

  .vw-panel:not(:has(.vw-caja)) .vw-pregunta { grid-column: 2 / -1; }
}

/* Clientes: los avisos entre la barra y la tabla llevan aire por abajo
   (antes el borde del aviso tocaba el de la tabla). */
.cl-avisos {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.cl-avisos > * {
  margin: 0;
}

/* Una fila de lista suelta entre tarjetas de un ajuste arranca donde el
   texto de esas tarjetas (18 px), no con el margen de las listas (16 px). */
.aj-pantalla .t-tarjeta.es-lista > .t-fila-lista {
  padding-inline: 18px;
}

/* ── Canje F3: hacer la factura completa de una simplificada ────────
   Sus estilos están al final, en «Tanda 5a». */

/* ── «Lo que necesita de ti»: lo que comparte con otras páginas ───
   La tarjeta y sus filas están al final, en «Propuesta visual de noviembre ·
   tanda 3». Aquí quedan las salidas discretas y el formulario para cerrar
   un asunto con una nota, que también usa la página del envío a Hacienda. */

/* Las salidas («Ya está resuelto», «Ver la venta»): texto, no botón. */
.ne-salida {
  padding: 6px 2px;
  color: var(--tinta-2);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

.ne-salida:hover {
  color: var(--tinta);
  text-decoration-color: currentColor;
}

/* Cerrar un asunto con una nota (disputas, devoluciones de antes de enero). */
.ne-cerrar {
  display: grid;
  grid-column: 2 / -1;
  gap: 8px;
  margin-top: 10px;
  padding: 14px 16px;
  background: var(--papel-2);
  border-radius: var(--radio-s);
}

.ne-cerrar label {
  color: var(--tinta-2);
  font-size: 0.86rem;
  font-weight: 500;
}

.ne-cerrar textarea {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: var(--radio-s);
  font: inherit;
  font-size: 0.9rem;
  resize: vertical;
}

.ne-ayuda {
  margin: 0;
  color: var(--tinta-3);
  font-size: 0.8rem;
}

.ne-cerrar-botones {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ── Bandeja: «Esperan la factura completa» (C6, 2-oct) ───────────
   Una frase bajo el título explica por qué esperan; cada fila lleva el
   motivo corto junto a la fecha y su «Hacer la completa». */
/* Fer, 2-oct: «demasiado texto». El motivo, en dos o tres palabras y en
   gris; el número de la simplificada queda en la ficha (y en el título del
   enlace). */
.vw-motivo {
  color: var(--tinta-2);
  font-size: 0.85rem;
}

/* ── Bandeja: cada apartado en su propia tarjeta (Fer, 2-oct) ─────
   «Esperan la factura completa», «Devolución por registrar», etc. dejan
   de ir seguidos en una sola tarjeta: la envoltura se vuelve transparente
   y cada apartado es una tarjeta, con aire entre ellas. El pie queda como
   una línea suelta debajo. */
.t-panel.fa-panel.vw-panel {
  display: grid;
  gap: 14px;
  padding: 0;
  overflow: visible;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.vw-panel > .vw-grupo,
.vw-panel > form > .vw-grupo,
.vw-panel > .t-vacio {
  overflow: hidden;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.vw-panel > .vw-grupo + .vw-grupo,
.vw-panel > form + .vw-grupo {
  border-top: 1px solid var(--line-soft);
}

.vw-panel > form {
  margin: 0;
}

.vw-panel > .vw-pie {
  padding: 0 6px;
  border-top: 0;
}

.vw-panel > .t-aviso,
.vw-panel > .vw-modo {
  margin: 0;
}

/* ── Fila de factura: el talón (Fer, 2-oct, y propuesta de noviembre) ──
   La misma fila en todas las listas de facturas, en escritorio y en móvil
   (filaFactura en ui-components.ts). Con matriz es un talón (.t-talon): la
   matriz a la izquierda, de arriba abajo de la fila, con la fecha (o las
   iniciales, o un icono) y el perforado; después quién, en negrita, y
   debajo el detalle; a la derecha, el estado en su pastilla y el importe,
   y al final las acciones o la flecha. Las filas van de borde a borde de su
   tarjeta. Al pasar el ratón, solo un tinte.

   Es una rejilla sin separación entre columnas: cada pieza trae su margen,
   porque las columnas vacías (sin casilla, sin acciones) no deben dejar
   hueco. */
.t-ffs {
  margin: 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
}

.t-ff {
  --ff-matriz: 0px;
  position: relative;
  display: grid;
  grid-template-columns: var(--ff-matriz) auto minmax(0, 1fr) auto auto;
  grid-template-areas:
    "matriz marca texto derecha acciones"
    "matriz . debajo debajo debajo";
  align-items: center;
  padding: 0 20px;
  border-top: 1px solid var(--line-soft);
}

.t-ffs > .t-ff:first-child {
  border-top: 0;
}

/* Bajo un título o una barra, el primer talón sí lleva su filete: si no, la
   matriz parece colgar del título. */
.t-ffs:not(:first-child) > .t-talon:first-child {
  border-top: 1px solid var(--line-soft);
}

.t-talon {
  --ff-matriz: 96px;
  min-height: 70px;
  padding-left: 0;
}

/* La matriz: lo que queda en el talonario. 76 px y 20 de aire. */
.t-talon > .t-matriz {
  grid-area: matriz;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-width: 0;
  margin-right: 20px;
  color: var(--tinta);
  background: var(--papel-2);
  border-right: 2px dotted var(--line);
}

.t-matriz > time {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.t-talon > .t-matriz b {
  font: 800 21px/1 var(--display);
  letter-spacing: -0.03em;
}

.t-talon > .t-matriz.es-iniciales b {
  font-size: 17px;
  letter-spacing: -0.01em;
}

/* Sin fecha que decir (por cobrar sin vencimiento): una raya apagada. */
.t-talon > .t-matriz.es-sin-fecha b {
  color: var(--tinta-3);
}

.t-talon > .t-matriz span:not(.sr-only) {
  color: var(--tinta-3);
  font: 500 10.5px/1 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.t-talon > .t-matriz > .t-icono {
  width: 20px;
  height: 20px;
}

.t-ff-texto {
  grid-area: texto;
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-block: 12px;
}

.t-ff-texto > a,
.t-ff-texto > strong {
  overflow: hidden;
  color: var(--tinta);
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-ff-texto > small {
  overflow: hidden;
  color: var(--tinta-2);
  font-size: 13.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.t-ff-texto .es-vencida {
  color: var(--danger);
}

/* Los números de factura, en DM Mono. */
.t-mono {
  font-family: var(--mono);
  font-size: 0.87em;
  letter-spacing: -0.01em;
}

/* Toda la fila se pulsa; lo de la derecha que actúa queda por encima. */
.t-ff-enlace::after {
  position: absolute;
  inset: 0;
  content: "";
}

.t-ff-enlace:focus-visible {
  outline: none;
}

.t-ff.es-enlace:has(.t-ff-enlace:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
}

.t-ff-derecha {
  grid-area: derecha;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: 16px;
}

.t-ff-importe {
  color: var(--tinta);
  font: 700 17px/1.2 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.t-ff-acciones {
  grid-area: acciones;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

/* La flecha de las filas que se pulsan enteras: solo en las listas anchas. */
.t-ff-flecha {
  grid-area: acciones;
  display: none;
  justify-content: flex-end;
  width: 24px;
  margin-left: 20px;
  color: var(--tinta-3);
  transition: transform 0.3s var(--salida), color 0.2s;
}

.t-ff-flecha > .t-icono {
  width: 20px;
  height: 20px;
}

/* Con el «•••» abierto, su fila pasa por encima de las de abajo: si no, los
   botones de la fila siguiente tapan el menú (Fer, 3-oct). */
.t-ff:has(.t-menu-mas[open]) {
  z-index: 20;
}

.t-ff-acciones form {
  margin: 0;
}

.t-ff-acciones .t-boton {
  min-height: 34px;
  padding: 6px 12px;
  font-size: 0.82rem;
}

.t-ff > input[type="checkbox"] {
  grid-area: marca;
  position: relative;
  z-index: 1;
  width: 18px;
  height: 18px;
  margin: 0 12px 0 0;
  accent-color: var(--sello);
}

.t-ff-debajo {
  grid-area: debajo;
  position: relative;
  z-index: 1;
  padding-bottom: 12px;
  color: var(--tinta-2);
  font-size: 0.85rem;
}

/* Con una línea debajo, el texto le deja menos aire. */
.t-ff:has(> .t-ff-debajo) > .t-ff-texto {
  padding-bottom: 6px;
}

/* Como una tabla cuando la lista es ancha (Fer, 3-oct): el estado en su
   columna y el importe al final, alineado a la derecha, para que los
   importes queden uno debajo de otro. En una lista estrecha (la ficha del
   cliente junto a «Datos») o en el móvil, la matriz se estrecha y el estado
   va debajo del importe, para no cortar el título. Depende del ancho de la
   lista, no de la ventana. */
@container (max-width: 639px) {
  .t-talon {
    --ff-matriz: 78px;
  }

  .t-talon > .t-matriz {
    margin-right: 14px;
  }

  /* Con la matriz queda menos sitio: el nombre, en dos líneas antes que
     cortado, y el detalle entero (en «Por cobrar» dice cuándo vence). */
  .t-talon > .t-ff-texto > a,
  .t-talon > .t-ff-texto > strong {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.25;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .t-talon > .t-ff-texto > small {
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .t-ff-derecha {
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    margin-left: 14px;
  }

  .t-ff-importe {
    font-size: 16px;
  }

  .t-ff-derecha > .t-estado {
    padding: 2px 8px;
    font-size: 12px;
  }
}

@container (min-width: 640px) {
  .t-ff-derecha {
    gap: 20px;
    margin-left: 20px;
  }

  .t-ff-derecha:has(> .t-estado) {
    display: grid;
    grid-template-columns: 176px auto;
  }

  .t-ff-derecha > .t-estado {
    order: -1;
    justify-self: start;
  }

  .t-ff-importe {
    min-width: 128px;
    text-align: right;
  }

  .t-ff-flecha {
    display: flex;
  }
}

/* La fila del mes de ventas web no reacciona al ratón (Fer, 2-oct). El
   tinte es más suave que la matriz, para que no se pierda. */
@media (hover: hover) {
  .t-ff.es-enlace:not(.fa-fila-web):hover {
    background: color-mix(in srgb, var(--papel-2) 55%, var(--papel));
  }

  .t-ff.es-enlace:not(.fa-fila-web):hover .t-ff-flecha {
    color: var(--tinta);
    transform: translateX(2px);
  }

  .cl-fila.t-talon:hover {
    background: color-mix(in srgb, var(--papel-2) 55%, var(--papel));
  }
}

@media (max-width: 760px) {
  .t-ff {
    grid-template-columns: var(--ff-matriz) auto minmax(0, 1fr) auto;
    grid-template-areas:
      "matriz marca texto derecha"
      "matriz . acciones acciones"
      "matriz . debajo debajo";
    padding-inline: 16px;
  }

  .t-talon {
    padding-left: 0;
  }

  /* Los botones, en su propia línea debajo, para no comerse el nombre. */
  .t-ff-acciones {
    justify-content: flex-end;
    margin: 0 0 12px;
  }

  .t-ff:has(> .t-ff-acciones) > .t-ff-texto {
    padding-bottom: 8px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .t-ff-flecha {
    transition: none;
  }
}

/* ── Clientes: la matriz lleva las iniciales ─────────────────────────
   La fila de clientes conserva sus columnas y gana la matriz del talón por
   delante, pegada al borde de la tarjeta y de arriba abajo de la fila. */
.cl-cabeza,
.cl-fila.t-talon {
  padding-left: 0;
}

.cl-fila.t-talon {
  min-height: 70px;
}

/* En la tabla la matriz es la primera columna; no hay áreas con nombre. */
.cl-fila.t-talon > .t-matriz {
  grid-area: auto;
  margin: -10px 0;
}

/* En estrecho, la matriz a la izquierda; el nombre con la cifra del año a
   su derecha, y lo que te debe (una pastilla larga) en su propia línea,
   debajo, para no comerse el nombre. */
@container clientes (max-width: 700px) {
  .cl-fila.t-talon,
  .cl-fila.t-talon.es-lmm {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    grid-template-areas:
      "matriz quien arriba"
      "matriz abajo abajo";
    gap: 6px 14px;
    padding-left: 0;
  }

  .cl-fila.t-talon > .t-matriz {
    grid-area: matriz;
    margin: -12px 0;
  }

  .cl-fila.t-talon > .cl-anio,
  .cl-fila.t-talon.es-lmm > .cl-tiene {
    align-self: start;
  }

  .cl-fila.t-talon > .cl-debe,
  .cl-fila.t-talon.es-lmm > .cl-ultima,
  .cl-fila.t-talon > .cl-anio.es-vacio + .cl-debe {
    grid-area: abajo;
    justify-self: start;
  }

  /* Sin nada debajo, el dato único vuelve a centrarse con el nombre. */
  .cl-fila.t-talon > .cl-anio:has(+ .cl-debe.es-vacio),
  .cl-fila.t-talon.es-lmm > .cl-tiene:has(+ .cl-ultima.es-vacio) {
    grid-area: arriba;
    align-self: center;
  }
}

/* Las tarjetas que llevan una lista de facturas tienen el mismo margen
   interior (20 px; 16 en móvil) y la lista lo ocupa de borde a borde, para
   que el texto empiece en el mismo sitio en todas. Las tarjetas que ya van
   sin margen (la ficha del cliente, los apartados de la bandeja) no
   sangran. */
.t-panel.fa-panel,
.t-tarjeta.in-cobrar {
  --ff-sangria: 20px;
  padding-inline: var(--ff-sangria);
}

.t-panel.fa-panel.vw-panel,
.vw-grupo,
.t-tarjeta.es-lista {
  --ff-sangria: 0px;
}

.t-ffs {
  margin-inline: calc(-1 * var(--ff-sangria, 0px));
}

@media (max-width: 760px) {
  .t-panel.fa-panel,
  .t-tarjeta.in-cobrar {
    --ff-sangria: 16px;
  }

  .t-panel.fa-panel.vw-panel {
    --ff-sangria: 0px;
  }
}

/* ── Rechazo de Hacienda en una factura (lote 3, decisión 4 del mapa) ──
   La acción principal es la rectificativa; «Ya está resuelto» y «Darla por
   buena» son salidas discretas. La nota de «Ya está resuelto» se abre aquí
   mismo con #resuelto, sin JavaScript. */
.hz-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
}

.hz-botones > form {
  margin: 0;
}

.hz-botones .hz-confirmar {
  display: contents;
}

.hz-resuelto:not(:target) {
  display: none;
}

.hz-pie .ne-cerrar {
  grid-column: auto;
  margin-top: 0;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  scroll-margin-top: 16px;
}

.hz-decidir:has(.hz-resuelto:target) .hz-botones {
  display: none;
}

/* Ficha de una rectificativa (Fer, 3-oct): la tarjeta «Hacienda» va suelta
   en la página, entre los avisos y la hoja; sin aire, la hoja y el aviso
   morado se le pegaban encima. */
main.content > .fe-hacienda {
  margin-bottom: 18px;
}

/* Lista de clientes (Fer, 3-oct): las columnas se repartían todo el sitio
   sobrante al nombre y quedaban apelotonadas a la derecha. Ahora crecen
   todas, con más aire entre ellas; el nombre, lo bastante para que uno largo
   quepa entero a 1000 px. El móvil no cambia. La primera columna, de 76 px,
   es la matriz del talón, con las iniciales. */
@container clientes (min-width: 701px) {
  .cl-cabeza:not(.es-lmm),
  .cl-fila:not(.es-lmm) {
    grid-template-columns: 76px minmax(0, 3.4fr) minmax(72px, 0.7fr) minmax(104px, 0.9fr) minmax(196px, 1.2fr) 16px;
    column-gap: 20px;
  }

  .cl-cabeza.es-lmm,
  .cl-fila.es-lmm {
    grid-template-columns: 76px minmax(0, 3.4fr) minmax(170px, 1.2fr) minmax(110px, 0.9fr) 16px;
    column-gap: 20px;
  }

  .cl-cabeza:not(.es-lmm) > :nth-child(5),
  .cl-fila:not(.es-lmm) > :nth-child(5) {
    padding-left: 0;
  }
}

/* Informes: la tarjeta «Registros de Hacienda» del lateral (diseño, 8-oct). */
.if-registros-texto {
  margin: 0 0 12px;
  color: var(--tinta-2);
  font-size: 0.88rem;
}

.if-registros-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* ══ Propuesta visual de noviembre · tanda 3: Inicio ═══════════════
   Mesas Main e InicioMovil, con la revisión de diseño del 14-nov. Escritorio
   (desde 1100 px): dos columnas independientes. A la izquierda (7 de 12), lo
   facturado del mes con las columnas del año y «Por cobrar»; a la derecha
   (5), «Lo que necesita de ti», el trimestre, Gestoría y los borradores. Cada
   tarjeta mide lo que su contenido: ninguna se estira para igualar a la de al
   lado. Al final, el plazo con Hacienda a todo el ancho. Por debajo, una
   columna. En el móvil lo facturado va sin tarjeta y sin columnas, y la
   cabecera de la página no se ve: «Nueva factura» está en el centro de la
   barra.

   Las alturas y los anchos que dependen de un dato (las columnas, la barra
   del trimestre, la línea del plazo) van en atributos de SVG: la CSP no
   admite estilos en línea. */
.in-pagina {
  max-width: 1180px;
  margin-inline: auto;
}

.in-cabecera {
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 28px;
}

.in-cabecera > div {
  display: grid;
  gap: 10px;
}

.in-cabecera h1 {
  margin: 0;
  font: 800 clamp(40px, 4.4vw, 52px) / 1.02 var(--display);
  letter-spacing: -0.035em;
}

.in-atencion-linea {
  margin-bottom: 24px;
}

.in-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

/* En una sola columna, la de la derecha no es una caja: sus tarjetas se
   colocan con las demás, en este orden: el mes, las tareas, «Por cobrar», el
   trimestre con Gestoría y los borradores, y el plazo. */
.in-derecha {
  display: contents;
}

.in-mes { order: 1; }
.in-derecha > .ne-bloque { order: 2; }
.in-cobrar { order: 3; }
.in-derecha > .in-caja,
.in-derecha > .in-borradores { order: 4; }
.in-plazo { order: 5; }

/* Dos columnas independientes. La de la derecha es una sola pieza que ocupa
   las dos filas; la segunda fila es flexible y absorbe la diferencia de
   alturas, así que la primera mide lo que el mes y «Por cobrar» empieza justo
   debajo, sea más alta la columna que sea. */
@media (min-width: 1100px) {
  .in-rejilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr auto;
  }

  .in-mes {
    grid-area: 1 / 1 / 2 / span 7;
  }

  .in-derecha {
    grid-area: 1 / 8 / 3 / -1;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
  }

  .in-cobrar {
    grid-area: 2 / 1 / 3 / span 7;
  }

  .in-plazo {
    grid-area: 3 / 1 / 4 / -1;
  }
}

/* Lo que solo se dice en ancho o solo en el móvil. */
.in-movil {
  display: none;
}

.in-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.in-vacio {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.9rem;
}

.in-titulo,
.ne-titulo {
  margin: 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.in-ver,
.ne-ver {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  flex: none;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.in-ver:hover,
.ne-ver:hover {
  color: var(--tinta);
}

/* ── Lo facturado en el mes y las columnas del año ── */
.in-mes {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 26px 28px 22px;
}

.in-mes-cabecera {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.in-mes-cifras {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.in-mes-cifra {
  margin: 0;
  font: 800 clamp(44px, 4.6vw, 64px) / 1.02 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

/* Las columnas tienen un alto fijo (140 px): la tarjeta no crece con la de
   al lado. */
.in-anio {
  margin: 0;
}

.in-columnas {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.in-columna {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* El rectángulo sigue más allá del pie del SVG, que lo recorta: redondeado
   por arriba y casi recto por abajo. */
.in-columna-barra {
  display: block;
  flex: none;
  width: 100%;
  height: 140px;
  overflow: hidden;
  fill: var(--trazo);
  border-radius: 0 0 2px 2px;
}

.in-columna.es-actual .in-columna-barra {
  fill: var(--tinta);
}

.in-columna-mes {
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.in-columna.es-actual .in-columna-mes {
  color: var(--tinta);
}

/* Un mes que todavía no ha llegado, o que está a cero o en negativo. */
.in-columna-hueco {
  width: 100%;
  height: 10px;
  border: 1.5px dashed var(--trazo);
  border-radius: 5px 5px 2px 2px;
}

/* ── «Lo que necesita de ti» (gestión por excepción, 2-oct) ───────
   Una tarjeta: el título con la cuenta de tareas y «Ver todo», y una fila
   por asunto, con su icono de tono, una frase, su detalle y una acción (con
   una salida discreta como «Ya está resuelto» si la tiene). Lo del servidor
   lleva la marca «Avisa a Claude» en vez de botón. Al pie, en gris y sin
   botones, lo que Talonario ya está haciendo solo.

   La fila se coloca según el ancho de su lista, no el de la ventana: en la
   tarjeta de Inicio la acción va debajo del texto; a página completa
   (/pendientes), a la derecha. En el móvil, la fila que solo tiene un
   enlace se pulsa entera y enseña una flecha. El marcado de la fila es el
   mismo en todos los casos. */
.ne-bloque {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ne-cabecera {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 22px 24px 16px;
}

.ne-titulo .t-cuenta {
  margin-left: 4px;
  vertical-align: 2px;
}

.ne-ver {
  min-height: 32px;
  margin-left: auto;
}

.ne-asuntos,
.ne-servidor {
  margin: 0;
  padding: 0;
  list-style: none;
  container-type: inline-size;
}

.ne-asunto {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: start;
  gap: 12px 14px;
  padding: 16px 24px;
  border-top: 1px solid var(--line-soft);
}

.ne-bloque.es-pagina .ne-asunto:first-child {
  border-top: 0;
}

.ne-icono {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: var(--tinta-2);
  background: var(--papel-2);
  border-radius: 50%;
}

.ne-icono svg {
  width: 20px;
  height: 20px;
}

.tono-peligro > .ne-icono { color: var(--danger); background: var(--danger-soft); }
.tono-aviso > .ne-icono { color: var(--warning); background: var(--warning-soft); }
.tono-bien > .ne-icono { color: var(--safe); background: var(--safe-soft); }

.ne-texto {
  min-width: 0;
}

.ne-texto strong {
  color: var(--tinta);
  font-weight: 600;
}

.ne-texto p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.ne-acciones {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.ne-acciones form {
  margin: 0;
}

/* Con la nota abierta, las acciones de la fila sobran. */
.ne-asunto.esta-abierto > .ne-acciones {
  display: none;
}

@container (min-width: 620px) {
  .ne-asunto {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
  }

  .ne-asunto > .ne-icono {
    width: 40px;
    height: 40px;
  }

  .ne-acciones {
    grid-column: 3;
    justify-content: flex-end;
  }

  /* A lo ancho, las acciones guardan su sitio para que la fila no salte. */
  .ne-asunto.esta-abierto > .ne-acciones {
    display: flex;
    visibility: hidden;
  }
}

/* Lo del servidor: no es tarea de Fer ni cuenta. Va al pie, sobre el papel
   del pie, con su tono y su sello, delante de lo que está en marcha. */
.ne-servidor {
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.ne-servidor > .ne-asunto:first-child {
  border-top: 0;
}

.ne-asunto.es-servidor .ne-texto strong {
  color: var(--tinta-2);
}

.ne-servidor .tono-neutro > .ne-icono {
  background: var(--papel);
}

.ne-servidor .ne-claude {
  background: var(--papel);
}

.ne-claude {
  display: inline-flex;
  padding: 5px 10px;
  color: var(--tinta-2);
  border: 1px dashed var(--borde-control);
  border-radius: 999px;
  font: 500 0.7rem/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* En Inicio solo van las tres más graves: si hay más, la puerta a todas. */
.ne-mas {
  margin: 0;
  padding: 4px 24px;
  border-top: 1px solid var(--line-soft);
}

.ne-mas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 600;
  text-underline-offset: 3px;
}

.ne-mas a:hover {
  color: var(--tinta);
}

/* Al pie, para cerrar: lo que va solo (las ventas de la web facturadas estos días). */
.ne-solo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 14px 24px;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.ne-solo-marca {
  display: grid;
  flex: none;
  color: var(--safe);
}

.ne-solo-marca svg {
  width: 20px;
  height: 20px;
}

.ne-marcha + .ne-solo {
  padding-top: 0;
  border-top: 0;
}

/* Lo que Talonario ya está haciendo, en gris y sin botones. */
.ne-marcha {
  display: grid;
  gap: 6px;
  margin: auto 0 0;
  padding: 14px 24px;
  list-style: none;
  color: var(--tinta-2);
  font-size: 13.5px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.ne-marcha li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.ne-marcha strong {
  color: var(--tinta);
  font-weight: 600;
}

.ne-latido {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  background: var(--tinta-3);
  border-radius: 50%;
  transform: translateY(-1px);
}

.ne-latido::after {
  position: absolute;
  inset: -4px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--tinta-3);
  opacity: 0;
  animation: ne-late 2.4s var(--salida) infinite;
  content: "";
}

.ne-marcha li.tono-aviso .ne-latido,
.ne-marcha li.tono-aviso .ne-latido::after {
  color: var(--warning);
  background: var(--warning);
}

.ne-marcha li.tono-aviso .ne-latido::after {
  background: none;
}

@keyframes ne-late {
  0% { opacity: 0.7; transform: scale(0.6); }
  100% { opacity: 0; transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
  .ne-latido::after { animation: none; }
}

/* Sin tareas: una tarjeta corta que lo dice (mesa Vacios). */
.ne-bloque.es-vacio {
  padding: 0;
  overflow: hidden;
}

.ne-en-orden {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  column-gap: 14px;
  margin: 0;
  padding: 20px 22px;
}

.ne-en-orden .ne-icono {
  width: 44px;
  height: 44px;
  color: var(--safe);
  background: var(--safe-soft);
}

.ne-en-orden > span:last-child {
  display: grid;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.ne-en-orden strong {
  color: var(--tinta);
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

/* ── /pendientes: las mismas filas, a página completa (mesa Pendientes) ── */
.ne-pagina-cabecera h1 {
  margin: 4px 0 8px;
  font: 800 40px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.ne-pagina-cabecera .fe-volver {
  min-height: 44px;
}

.ne-pagina .ne-bloque {
  max-width: 920px;
}

/* ── Por cobrar ── */
.in-cobrar {
  padding-block: 0;
}

.in-cobrar-cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 2px 12px 4px;
}

.in-cifra {
  margin: 0;
  font: 800 28px/1.02 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.in-cobrar > .in-stripe-sin-comprobar {
  margin: 0 0 12px;
}

.in-cobrar > .in-vacio {
  padding: 0 4px 22px;
}

.in-filas {
  margin-block: 0;
  padding: 0;
  list-style: none;
}

/* El pie: la puerta a la lista entera, de borde a borde como las filas. */
.in-mas {
  margin: 0 calc(-1 * var(--ff-sangria, 0px));
  padding: 4px calc(var(--ff-sangria, 0px) + 4px);
  border-top: 1px solid var(--line-soft);
}

.in-mas a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 600;
  text-underline-offset: 3px;
}

.in-mas a:hover {
  color: var(--tinta);
}

/* ── El trimestre y la gestoría ── */
.in-caja {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 22px 24px;
}

.in-caja-rotulo {
  margin: 0;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.in-caja-texto {
  margin: 0;
  color: var(--tinta-2);
  font-size: 0.9rem;
}

.in-caja form {
  margin: 0;
}

.in-caja > .t-boton,
.in-caja > form > .t-boton {
  align-self: flex-start;
}

.in-caja > .in-stripe-sin-comprobar {
  margin: 0;
}

/* De dónde viene el trimestre: dos tramos, cada uno un SVG con su ancho. */
.in-reparto {
  display: flex;
  gap: 3px;
  height: 10px;
}

.in-reparto svg {
  display: block;
  flex: 0 1 auto;
  min-width: 10px;
  height: 10px;
}

.in-reparto .es-manual {
  fill: var(--tinta);
}

.in-reparto .es-stripe {
  fill: var(--trazo);
}

.in-trimestre {
  display: grid;
  gap: 8px;
  margin: 0;
}

.in-trimestre > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.in-trimestre dt {
  display: flex;
  align-items: center;
  gap: 9px;
}

.in-trimestre > div:not(.es-total) dt::before {
  width: 10px;
  height: 10px;
  flex: none;
  background: var(--tinta);
  border-radius: 3px;
  content: "";
}

.in-trimestre > div:nth-child(2) dt::before {
  background: var(--trazo);
}

.in-trimestre dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.in-trimestre .es-total {
  margin-top: 8px;
  padding-top: 14px;
  font-weight: 600;
  border-top: 1px solid var(--tinta);
}

.in-trimestre .es-total dd {
  font: 800 24px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.in-borradores {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  color: var(--tinta-2);
  font-size: 0.82rem;
  text-decoration: none;
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.in-borradores:hover {
  color: var(--tinta);
  background: var(--papel);
}

.in-borradores-abrir {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--sello);
  font-weight: 600;
}

.in-borradores-abrir svg {
  width: 15px;
  height: 15px;
  transition: transform 0.2s var(--salida);
}

.in-borradores:hover .in-borradores-abrir svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .in-borradores-abrir svg {
    transition: none;
  }
}

/* ── El próximo plazo con Hacienda ──
   La línea es la de la portada (.acceso-linea), aquí sobre una tarjeta. */
.in-plazo {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 36px;
  padding: 20px 24px;
}

.in-plazo-que {
  flex: 0 1 300px;
  display: grid;
  gap: 4px;
}

.in-plazo-nombre {
  margin: 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.in-plazo .acceso-linea {
  display: block;
  flex: 1 1 320px;
}

.in-plazo .acceso-linea-hoy {
  fill: var(--papel);
}

.in-plazo-faltan {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  white-space: nowrap;
}

.in-plazo-faltan strong {
  color: var(--tinta);
  font: 800 34px/1.02 var(--display);
  letter-spacing: -0.035em;
}

/* ── Móvil (mesas InicioMovil y PendientesMovil) ── */
@media (max-width: 760px) {
  .in-ancho {
    display: none;
  }

  .in-movil {
    display: inline;
  }

  /* La cabecera no se ve: el mes lo dice el rótulo de lo facturado y «Nueva
     factura» está en la barra. El título sigue ahí para el lector de pantalla. */
  .in-cabecera {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .in-cabecera .in-fecha,
  .in-cabecera .in-nueva {
    display: none;
  }

  .in-rejilla {
    gap: 14px;
  }

  /* Lo facturado, sin tarjeta y sin columnas. */
  .in-mes {
    gap: 0;
    padding: 0 4px;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .in-mes-cifras {
    gap: 4px;
  }

  .in-mes-cifra {
    font-size: 44px;
  }

  .in-ver,
  .in-anio,
  .ne-ver {
    display: none;
  }

  .ne-cabecera {
    padding: 16px 16px 12px;
  }

  .ne-asunto {
    column-gap: 12px;
    padding: 12px 16px;
  }

  .ne-bloque.es-pagina .ne-asunto {
    padding-block: 16px;
  }

  .ne-mas,
  .ne-solo,
  .ne-marcha {
    padding-inline: 16px;
  }

  /* «Por cobrar»: las tres primeras; las demás, en «Ver todas». */
  .in-filas > li:nth-child(n + 4) {
    display: none;
  }

  .ne-cerrar {
    grid-column: 1 / -1;
  }

  /* La fila que solo lleva un enlace se pulsa entera: el botón pasa a ser
     una flecha y su texto queda para el lector de pantalla. */
  .ne-asunto:not(.esta-abierto):has(> .ne-acciones > a.ne-accion:only-child) {
    position: relative;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    align-items: center;
  }

  .ne-asunto:not(.esta-abierto):has(> .ne-acciones > a.ne-accion:only-child) > .ne-acciones {
    grid-column: 3;
    grid-row: 1;
  }

  .ne-asunto:not(.esta-abierto) > .ne-acciones > a.ne-accion:only-child {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    min-height: 0;
    padding: 0;
    color: var(--tinta-3);
    font-size: 0;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
  }

  .ne-asunto:not(.esta-abierto) > .ne-acciones > a.ne-accion:only-child::before {
    width: 8px;
    height: 8px;
    border: solid currentColor;
    border-width: 1.8px 1.8px 0 0;
    transform: translateX(-2px) rotate(45deg);
    content: "";
  }

  .ne-asunto:not(.esta-abierto) > .ne-acciones > a.ne-accion:only-child::after {
    position: absolute;
    inset: 0;
    content: "";
  }

  .ne-asunto > .ne-acciones > a.ne-accion:only-child:focus-visible {
    outline: none;
  }

  .ne-asunto:has(> .ne-acciones > a.ne-accion:only-child:focus-visible) {
    outline: 2px solid var(--foco);
    outline-offset: -2px;
  }

  .ne-pagina-cabecera h1 {
    font-size: 30px;
  }

  .in-cobrar-cabecera {
    padding: 16px 0 12px;
  }

  .in-cifra {
    font-size: 22px;
  }

  .in-mas {
    padding-inline: var(--ff-sangria, 0px);
  }

  .in-caja {
    padding: 16px;
  }

  /* El plazo: la tarjeta entera lleva a Informes; solo el nombre y los días. */
  .in-plazo {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
  }

  .in-plazo-que {
    flex: 1 1 auto;
    min-width: 0;
    gap: 0;
  }

  .in-plazo-nombre {
    font: 600 15px/1.45 var(--ui);
    letter-spacing: 0;
  }

  .in-plazo .acceso-linea {
    display: none;
  }

  .in-plazo-faltan strong {
    font-size: 24px;
  }

  .in-plazo-abrir {
    position: absolute;
    inset: 0;
    width: auto;
    min-height: 0;
    opacity: 0;
  }

  .in-plazo:has(.in-plazo-abrir:focus-visible) {
    outline: 2px solid var(--foco);
    outline-offset: 2px;
  }
}

/* ══ Propuesta de noviembre, tanda 4: Facturas ═══════════════════════
   La lista con sus cuatro pestañas (mesas Facturas, PorCobrar, Borradores,
   FacturasFiltros, VentasWeb y VentasWebMes). «Todas» va por meses, cada
   uno con su total; el año, con flechas; «Más filtros», con las opciones a
   la vista; la bandeja de ventas web, con lo que necesita a Fer primero.
   En las listas estrechas, el estado baja a su propia línea. */

/* ── El estado, en su propia línea (lista estrecha o móvil) ───────────
   Decisión de diseño tras la tanda 2: con el estado bajo el importe,
   «Cobrada por Stripe» y «Por devolver 106,00 €» se comían el nombre. El
   importe se queda arriba a la derecha, a la altura del nombre, y el estado
   va debajo del detalle, a la izquierda. La caja de la derecha se disuelve
   (display: contents) para que sus dos piezas se coloquen en la rejilla de
   la fila. */
@container (max-width: 639px) {
  .t-ff {
    grid-template-areas:
      "matriz marca texto derecha acciones"
      "matriz . estado estado acciones"
      "matriz . debajo debajo debajo";
  }

  .t-ff-derecha {
    display: contents;
  }

  .t-ff-importe {
    grid-area: derecha;
    align-self: start;
    margin: 12px 0 0 14px;
  }

  .t-ff-derecha > .t-estado {
    grid-area: estado;
    justify-self: start;
    margin: -6px 0 12px;
  }

  /* Sin detalle debajo del nombre, el importe vuelve a centrarse con él. */
  .t-ff:not(:has(.t-ff-texto > small)) > .t-ff-derecha > .t-ff-importe {
    align-self: center;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .t-ff {
    grid-template-areas:
      "matriz marca texto derecha"
      "matriz . estado estado"
      "matriz . acciones acciones"
      "matriz . debajo debajo";
  }
}

/* En el móvil, el estado y el botón de una fila comparten línea: el estado a
   la izquierda y el botón a la derecha. Cada uno en la suya, la fila pasaba
   de 150 px. El estado deja siempre sitio al botón (--ff-boton): si no cabe,
   se corta él. */
@container (max-width: 639px) {
  @media (max-width: 760px) {
    .t-ff:has(> .t-ff-derecha > .t-estado) > .t-ff-acciones {
      grid-area: estado;
      justify-self: end;
    }

    .t-ff:has(> .t-ff-acciones) > .t-ff-derecha > .t-estado {
      align-self: center;
      max-width: calc(100% - var(--ff-boton, 96px));
      margin-top: 0;
    }
  }
}

/* El número de factura no se parte: si no cabe, baja entero a la línea siguiente. */
.t-ff-texto .t-mono {
  white-space: nowrap;
}

/* «Por cobrar» de Inicio comparte fila con Facturas, pero su tarjeta es media
   página: aunque pase de 640 px, con la columna del estado el nombre se
   quedaba en 100 px. Allí el estado va siempre en su línea, como en una
   lista estrecha. */
@container (min-width: 640px) {
  .in-cobrar .t-ff {
    grid-template-areas:
      "matriz marca texto derecha acciones"
      "matriz . estado estado acciones"
      "matriz . debajo debajo debajo";
  }

  .in-cobrar .t-ff-derecha:has(> .t-estado) {
    display: contents;
  }

  .in-cobrar .t-ff-importe {
    grid-area: derecha;
    align-self: start;
    min-width: 0;
    margin: 12px 0 0 20px;
  }

  .in-cobrar .t-ff-derecha > .t-estado {
    grid-area: estado;
    justify-self: start;
    margin: -6px 0 12px;
  }
}

/* Un dato que falta, en el detalle de una fila: en tono de aviso. */
.t-ff-aviso {
  color: var(--warning);
  font-weight: 600;
}

/* En el sitio del importe no hay cifra («Sin importe»). */
.t-ff-importe.es-suave {
  color: var(--tinta-3);
  font: 500 14px/1.2 var(--ui);
  letter-spacing: 0;
}

/* ── Estado vacío: dos hojas en blanco o, si está todo hecho, la marca ── */
.t-vacio-hojas {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
}

.t-vacio-hojas rect {
  fill: var(--papel-2);
  stroke: var(--trazo);
  stroke-width: 1.4;
}

.t-vacio-hojas rect:first-child {
  fill: none;
  stroke-dasharray: 2.5 2.5;
}

.t-vacio-hecho {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 14px;
  color: var(--safe);
  background: var(--safe-soft);
  border-radius: 50%;
}

.t-vacio-hecho > .t-icono {
  width: 22px;
  height: 22px;
}

.t-vacio > .t-boton,
.t-vacio > .t-enlace-suave {
  margin-top: 16px;
}

.t-vacio > .t-enlace-suave {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 6px;
}

/* El título: el de una portada (44 px; 34 en el móvil, más abajo). */
.fa-cabecera h1 {
  font-size: 44px;
  line-height: 1.02;
}

/* ── La barra: pestañas, buscador, año y «Más filtros» ───────────────── */
.fa-barra {
  gap: 12px;
  margin-bottom: 20px;
}

.fa-barra .fa-pestanas {
  flex: none;
  gap: 2px;
  padding: 3px;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}

.fa-barra .fa-pestanas a {
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  border-radius: 10px;
}

.fa-barra .fa-pestanas a[aria-current="page"] {
  background: var(--elevado);
  box-shadow: 0 0 0 1px var(--line-soft), 0 6px 12px -10px rgba(27, 24, 32, 0.6);
}

.fa-barra .fa-numero,
.fa-barra .fa-numero.es-pendiente {
  padding: 4px 6px;
  color: var(--tinta-2);
  font: 500 11.5px/1 var(--mono);
  background: var(--mesa);
  border-radius: 6px;
}

.fa-barra .fa-pestanas a[aria-current="page"] .fa-numero {
  color: var(--papel);
  background: var(--tinta);
}

.fa-barra .fa-filtros {
  flex: 1 1 260px;
}

.fa-barra .t-filtro.is-busqueda {
  flex: 1 1 100%;
}

.fa-barra .t-buscador {
  gap: 10px;
  height: 50px;
  padding: 0 14px;
  background: var(--campo);
  border-radius: 11px;
}

.fa-barra .t-buscador > .t-icono {
  width: 20px;
  height: 20px;
}

.fa-barra .t-buscador input {
  font-size: 15px;
}

/* El año, con flechas. */
.fa-barra .fa-anio {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}

.fa-anio > strong {
  min-width: 48px;
  padding: 0 6px;
  font: 700 16px/1 var(--display);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.fa-anio-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--tinta-2);
  border-radius: 10px;
}

.fa-anio-flecha > .t-icono {
  width: 20px;
  height: 20px;
}

.fa-anio-flecha.is-inerte {
  opacity: 0.45;
}

@media (hover: hover) {
  a.fa-anio-flecha:hover {
    color: var(--tinta);
    background: color-mix(in srgb, var(--elevado) 50%, transparent);
  }
}

/* «Más filtros»: cerrado, un enlace; abierto, un botón en tinta con cuántos hay puestos. */
.fa-mas {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fa-mas .t-cuenta {
  margin: 0;
  padding: 4px 6px;
  height: auto;
  min-width: 0;
  font: 500 11.5px/1 var(--mono);
  background: var(--mesa);
  border-radius: 6px;
}

.fa-mas.es-abierto {
  padding: 0 18px;
  color: var(--papel);
  text-decoration: none;
  background: var(--tinta);
  border-radius: 11px;
}

/* La frase de la pestaña «Ventas web». */
.fa-resumen {
  flex: 1 1 260px;
  margin: 0;
  color: var(--tinta-2);
}

.fa-resumen strong {
  color: var(--tinta);
}

/* ── «Más filtros»: las opciones a la vista ──────────────────────────── */
.t-panel.fa-mas-filtros {
  margin-bottom: 20px;
  overflow: hidden;
}

/* La cabecera es de la vista del móvil, donde los filtros van solos. */
.fa-mas-cabecera {
  display: none;
}

.fa-grupos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px 32px;
  padding: 22px 24px;
}

.fa-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fa-grupo.es-ancho {
  grid-column: 1 / -1;
}

.fa-grupo > legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 13.5px;
  font-weight: 600;
}

.fa-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Una opción: un botón de opción con la etiqueta pintada como pastilla. El
   botón sigue ahí para el teclado y el lector, sin verse. */
.t-opcion {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  color: var(--tinta-2);
  font: 600 14px/1 var(--ui);
  white-space: nowrap;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 999px;
  cursor: pointer;
}

.t-opcion.es-corta {
  padding: 0 12px;
}

.t-opcion > input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.t-opcion:has(> input:checked) {
  color: var(--papel);
  background: var(--tinta);
  border-color: var(--tinta);
}

.t-opcion:has(> input:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

@media (hover: hover) {
  .t-opcion:not(:has(> input:checked)):hover {
    color: var(--tinta);
    border-color: var(--borde-control);
  }
}

.fa-mas-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 14px 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.fa-mas-pie .t-boton {
  min-height: 50px;
  padding: 0 22px;
}

.fa-mas-quitar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.fa-mas-cuenta {
  margin: 0 0 0 auto;
  color: var(--tinta-2);
  font-size: 13.5px;
}

/* ── Las tarjetas de las listas: cabecera, filas de borde a borde y pie ── */
.t-panel.fa-panel.fa-todas.es-por-meses,
.t-panel.fa-panel.fa-por-cobrar,
.t-panel.fa-panel.fa-borradores {
  --ff-sangria: 0px;
  padding: 0;
}

.fa-mes + .fa-mes {
  border-top: 1px solid var(--line-soft);
}

.fa-mes-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 22px 22px 12px 24px;
}

.fa-mes-cabecera h2 {
  margin: 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.fa-mes-cabecera p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.fa-mes-cabecera p b {
  color: var(--tinta);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* La cabecera ya separa: la primera fila lleva su filete. */
.fa-mes-cabecera + .t-ffs > .t-ff:first-child {
  border-top: 1px solid var(--line-soft);
}

/* La última matriz sigue la esquina de su tarjeta (la tarjeta no recorta,
   para que un «•••» abierto pueda salir de ella). */
.fa-panel > .t-ffs:last-child > .t-talon:last-child > .t-matriz,
.fa-mes:last-child > .t-ffs:last-child > .t-talon:last-child > .t-matriz,
.vw-grupo > .t-ffs:last-child > .t-talon:last-child > .t-matriz {
  border-bottom-left-radius: calc(var(--radio-l) - 1px);
}

.fa-todas.es-por-meses > .t-paginacion {
  margin-top: 0;
  padding-inline: 24px;
}

.fa-todas.es-por-meses > .t-filtros-nota,
.fa-todas.es-por-meses > .fa-mes-web {
  padding-inline: 24px;
}

/* «Te deben»: el total, en la letra de las cifras. */
.fa-debe .fa-total {
  margin: 0;
}

.fa-debe .fa-total b {
  color: var(--tinta);
  font: 800 28px/1.02 var(--display);
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.fa-por-cobrar > .in-stripe-sin-comprobar {
  margin: 16px 24px 0;
}

.fa-pie-nota {
  margin: 0;
  padding: 14px 24px;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 calc(var(--radio-l) - 1px) calc(var(--radio-l) - 1px);
}

.fa-borradores > .t-panel-aviso {
  margin: 16px 24px 0;
}

/* En una fila con botones, el estado y el importe se alinean con las demás.
   «Por cobrar» es la misma fila en Inicio y en Facturas. */
.in-cobrar .t-ff-acciones .t-boton,
.fa-por-cobrar .t-ff-acciones .t-boton,
.fa-borradores .t-ff-acciones .t-boton,
.vw-panel .t-ff-acciones .t-boton {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
}

/* ── Ventas web: cada apartado con su título ─────────────────────────── */
.vw-grupo-cabecera {
  align-items: center;
}

h2.vw-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  color: var(--tinta);
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
  text-transform: none;
}

h2.vw-grupo-titulo .t-cuenta {
  margin: 0;
  padding: 4px 6px;
  height: auto;
  min-width: 0;
  color: var(--tinta-2);
  font: 500 11.5px/1 var(--mono);
  background: var(--mesa);
  border-radius: 6px;
}

/* El «•••» de una fila con botones mide lo que ellos. */
.fa-borradores .t-menu-mas > summary,
.fa-borradores ~ .t-plegable .t-menu-mas > summary {
  width: 44px;
  height: 44px;
  background: transparent;
  border-color: transparent;
}

.fa-borradores .t-menu-mas > summary:hover,
.fa-borradores .t-menu-mas[open] > summary,
.fa-borradores ~ .t-plegable .t-menu-mas > summary:hover,
.fa-borradores ~ .t-plegable .t-menu-mas[open] > summary {
  background: var(--papel-2);
}

/* En una lista ancha, los botones ocupan siempre lo mismo, para que el
   estado y el importe queden en columna aunque a una fila le falte un
   botón o lo lleve más corto. */
@container (min-width: 640px) {
  .fa-borradores .t-ff-acciones,
  .fa-borradores ~ .t-plegable .t-ff-acciones {
    min-width: 138px;
  }

  .vw-grupo .t-ff-acciones {
    justify-content: flex-end;
    min-width: 204px;
  }

  /* Sin botones, la flecha guarda ese mismo hueco. */
  .vw-grupo .t-ff-flecha {
    width: 204px;
    margin-left: 16px;
  }
}

.vw-en-cola {
  color: var(--tinta-3);
  font-size: 13.5px;
  white-space: nowrap;
}

.vw-grupo .vw-respuesta {
  margin: 0;
}

.vw-grupo .vw-chip {
  min-height: 44px;
  padding: 0 16px;
  font-size: 14px;
}

.vw-sueltos ul {
  padding-top: 0;
}

/* ── Móvil ───────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .fa-cabecera h1 {
    font-size: 34px;
  }

  /* «Nueva factura» es el «+» de la barra de secciones. */
  .fa-cabecera .fa-nueva {
    display: none;
  }

  .fa-barra {
    gap: 10px;
    margin-bottom: 14px;
  }

  .fa-barra .fa-pestanas {
    flex: 1 1 100%;
  }

  .fa-barra .fa-pestanas a,
  .fa-barra .fa-pestanas:has(a[href="/facturas?vista=ventas-web"]) a {
    gap: 5px;
    padding-inline: 6px;
    font-size: 13px;
  }

  .fa-barra .fa-numero,
  .fa-barra .fa-numero.es-pendiente {
    padding: 3px 4px;
    font-size: 10.5px;
  }

  /* A 375 px, las cuatro pestañas caben justas. */
  @media (max-width: 400px) {
    .fa-barra .fa-pestanas a,
    .fa-barra .fa-pestanas:has(a[href="/facturas?vista=ventas-web"]) a {
      gap: 3px;
      padding-inline: 2px;
      font-size: 12.5px;
      letter-spacing: -0.01em;
    }

    .fa-barra .fa-numero,
    .fa-barra .fa-numero.es-pendiente {
      padding: 3px;
      font-size: 10px;
    }
  }

  .fa-barra .fa-filtros {
    flex: 1 1 100%;
  }

  /* Todo campo escribe a 16 px: por debajo, el iPhone amplía la página. */
  .fa-barra .t-buscador input {
    font-size: 16px;
  }

  .fa-barra .fa-anio {
    margin-right: auto;
  }

  .fa-resumen {
    flex-basis: 100%;
    padding: 0 4px;
  }

  .fa-mes-cabecera {
    padding: 16px 16px 12px;
  }

  /* En el móvil, cada mes dice solo su total. */
  .fa-mes-cuenta {
    display: none;
  }

  .fa-debe .fa-total b {
    font-size: 22px;
  }

  .fa-pie-nota,
  .fa-todas.es-por-meses > .t-paginacion,
  .fa-todas.es-por-meses > .t-filtros-nota,
  .fa-todas.es-por-meses > .fa-mes-web {
    padding-inline: 16px;
  }

  .fa-por-cobrar > .in-stripe-sin-comprobar,
  .fa-borradores > .t-panel-aviso {
    margin-inline: 16px;
  }

  /* La barra de «Emitir» o de «Anotar el cobro», en una línea: el resumen
     corto a la izquierda y el botón a la derecha (la frase larga es de
     escritorio). En dos líneas medía 108 px sobre los 75 de la navegación. */
  .vw-barra {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .vw-barra p {
    min-width: 0;
  }

  .vw-barra .t-boton {
    flex: none;
    width: auto;
  }

  /* «Cobrada», algo más estrecho, para que quepa junto a «Vencida hace 12 días». */
  .in-cobrar .t-ff-acciones .t-boton,
  .fa-por-cobrar .t-ff-acciones .t-boton {
    padding-inline: 14px;
  }

  /* «Más filtros», en el móvil, es una página aparte: con su tarjeta en la
     página, lo demás se esconde (el formulario sigue ahí: las opciones se
     enganchan a él con el atributo form). */
  .content:has(> .fa-mas-filtros) > :not(.fa-mas-filtros) {
    display: none;
  }

  .t-panel.fa-mas-filtros {
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .fa-mas-cabecera {
    display: block;
    margin-bottom: 14px;
  }

  .fa-mas-cabecera > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }

  .fa-mas-cabecera .t-enlace-suave {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-weight: 600;
  }

  .fa-mas-cabecera h2 {
    margin: 0;
    padding: 0 4px;
    font: 800 30px/1.02 var(--display);
    letter-spacing: -0.035em;
  }

  .fa-grupos {
    grid-template-columns: minmax(0, 1fr);
    padding: 18px 16px;
    background: var(--papel);
    border: 1px solid var(--line-soft);
    border-bottom: 0;
    border-radius: var(--radio-l) var(--radio-l) 0 0;
  }

  .fa-mas-pie {
    padding: 14px 16px;
    border: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radio-l) var(--radio-l);
  }

  .fa-mas-pie .t-boton {
    flex: 1;
    min-height: 52px;
    font-size: 16px;
  }

  /* «Quitar filtros» ya está arriba. */
  .fa-mas-pie .fa-mas-quitar {
    display: none;
  }

  .fa-mas-cuenta {
    flex-basis: 100%;
    margin: 0;
  }
}

/* ── Tanda 5a: la ficha de una factura, la rectificativa y el canje ──
   Propuesta visual de noviembre (mesas Ficha, FichaEstados, Rectificativa,
   Canje y CanjeCliente, con sus «…Movil»). Sale de trial-ledger-ui.ts (la
   tarjeta de cobro, la historia, «¿Cómo te han pagado?» y la rectificativa)
   y de trial-invoice-ui.ts (la página de la ficha y el canje). La hoja es la
   plantilla fiscal y no se toca: solo cambia lo que la rodea. */

/* El titular: el cliente y, debajo, lo facturado, la fecha y el número. */
.fe-titular {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
}

.fe-titular > div:first-child {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  min-width: 0;
}

.fe-titular .fe-volver,
.cj-cabecera .fe-volver {
  align-self: flex-start;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

.fe-titular .fe-cliente {
  margin: 4px 0 10px;
  font: 800 40px/1.02 var(--display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.fe-titular .fe-detalle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  max-width: none;
  margin: 0;
  color: var(--tinta-2);
}

.fe-detalle > span:first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fe-referencia {
  padding: 3px 8px;
  color: var(--tinta);
  white-space: nowrap;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.fe-titular .fe-acciones {
  flex-wrap: wrap;
  gap: 10px;
}

/* Los botones de la ficha miden lo que los de las mesas. */
.fe-titular .t-boton,
.fe-sin-pdf .t-boton,
.cj-elegir-pie .t-boton {
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
  border-radius: 11px;
}

.fe-pdf > .t-icono,
.cj-elegir-pie .t-boton > .t-icono {
  width: 20px;
  height: 20px;
}

/* El «•••» de la cabecera y su menú abierto. */
.fe-titular .t-menu-mas > summary {
  width: 44px;
  height: 44px;
  color: var(--tinta);
  border-radius: 11px;
}

.fe-titular .t-menu-mas > summary > .t-icono {
  width: 20px;
  height: 20px;
}

.fe-titular .t-menu-mas-lista {
  min-width: 250px;
  border-radius: 14px;
}

.fe-titular .t-menu-mas-opcion {
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 9px;
}

/* «Falta generar el PDF»: bajo la cabecera, a todo el ancho. */
.t-aviso.fe-sin-pdf {
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 20px;
  padding: 10px 12px 10px 16px;
  color: var(--tinta);
  font-size: 15px;
  background: var(--warning-soft);
  border: 1px solid var(--warning-borde);
  border-radius: 14px;
}

.fe-sin-pdf-icono {
  display: inline-flex;
  flex: none;
  color: var(--warning);
}

.fe-sin-pdf-icono > .t-icono {
  width: 20px;
  height: 20px;
}

.fe-sin-pdf > span:not(.fe-sin-pdf-icono) {
  flex: 1 1 200px;
}

.fe-sin-pdf form {
  margin: 0;
}

/* Las tarjetas a la izquierda y la hoja a la derecha; por debajo de
   1280 px, las tarjetas encima: más estrecha, a la hoja (la plantilla
   fiscal, que no se toca) se le parten los rótulos y el número. */
.fe-mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

@media (min-width: 1280px) {
  .fe-mesa {
    grid-template-columns: 380px minmax(0, 1fr);
  }

  .fe-mesa.rf-mesa {
    grid-template-columns: 440px minmax(0, 1fr);
  }
}

.fe-columna {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  min-width: 0;
}

.fe-columna > .fe-hacienda {
  padding: 20px 24px;
}

.fe-columna > .t-aviso {
  margin: 0;
}

/* La hoja, con el resto del talonario asomando debajo. */
.fe-papel {
  min-width: 0;
  scroll-margin-top: 16px;
}

.fe-papel .final-invoice-sheet {
  max-width: none;
}

.fe-papel.es-pila {
  --pila-1: #f4f1ec;
  --pila-2: #ebe7e0;
  position: relative;
  isolation: isolate;
  margin-bottom: 14px;
}

.fe-papel.es-pila::before,
.fe-papel.es-pila::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 24px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(27, 24, 32, 0.16);
}

.fe-papel.es-pila::after {
  right: 10px;
  bottom: -7px;
  left: 10px;
  background: var(--pila-1);
}

.fe-papel.es-pila::before {
  right: 22px;
  bottom: -14px;
  left: 22px;
  background: var(--pila-2);
}

/* En oscuro, las hojas de debajo se atenúan como la de arriba. Escrito dos
   veces, como el resto de valores de oscuro: el del sistema y el fijado. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .fe-papel.es-pila {
    --pila-1: #c4bfcd;
    --pila-2: #aea9b9;
  }
}

:root[data-theme="dark"] .fe-papel.es-pila {
  --pila-1: #c4bfcd;
  --pila-2: #aea9b9;
}

/* ── La tarjeta de cobro ── */
.fe-cobro {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

/* El rótulo y el estado, en la primera línea; la cifra, debajo y a todo el
   ancho: los estados largos («Cobrada en parte», «Vence el 24 sep») no le
   quitan sitio. El margen negativo deja el rótulo a su distancia de la cifra
   aunque la pastilla sea más alta que él. */
.fe-cobro-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 16px;
  align-items: start;
}

.fe-cobro-cabecera > div {
  display: contents;
}

.fe-cobro-cabecera .fe-cifra {
  grid-column: 1 / -1;
}

.fe-cobro-cabecera > .t-estado {
  grid-row: 1;
  grid-column: 2;
  margin-bottom: -11px;
}

/* El rótulo pequeño de una tarjeta de la ficha. */
.fe-rotulo {
  margin: 0;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* La cifra de la tarjeta: lo más grande. Si no cabe, se parte antes que salirse. */
.fe-cifra {
  margin: 0;
  font: 800 46px/1.02 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.fe-cobro.es-devolver .fe-cifra {
  color: var(--danger);
}

.fe-cobrado {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fe-barra {
  display: block;
  width: 100%;
  height: 12px;
}

.fe-barra-pista {
  fill: var(--pista);
}

.fe-barra-cobrado {
  fill: var(--safe);
}

.fe-cobrado-cifras {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2px 16px;
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.fe-cobrado-cifras strong {
  color: var(--safe);
  font-weight: 600;
}

/* Cada cobro en pie y cada corrección, con su importe. */
.fe-movimientos {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fe-movimientos > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.fe-movimientos > li:last-child {
  padding-bottom: 0;
}

.fe-movimiento-que {
  min-width: 0;
  overflow-wrap: anywhere;
}

.fe-movimiento-que strong {
  font-weight: 600;
}

.fe-movimiento-que small {
  display: block;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* El número de una rectificativa no se parte: baja entero a la línea siguiente. */
.fe-movimiento-que .t-mono,
.fe-linea strong a,
.fe-nota .t-mono,
.cj-sustituye a,
.cj-canjeada a {
  white-space: nowrap;
}

.fe-movimiento-que a {
  color: var(--sello);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.fe-movimiento-importe {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* «Anular»: se abre bajo su cobro, con su motivo. */
.fe-anular {
  grid-column: 1 / -1;
}

.fe-anular > summary {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  color: var(--tinta-2);
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  list-style: none;
  cursor: pointer;
}

.fe-anular > summary::-webkit-details-marker,
.fe-plegable > summary::-webkit-details-marker {
  display: none;
}

.fe-anular > form {
  margin: 8px 0 4px;
}

/* «Marcar como cobrada»: en escritorio, el botón está en la cabecera y
   envía este formulario; en el móvil se ve el de la tarjeta. */
.fe-cobrar {
  display: flex;
  flex-direction: column;
}

.fe-cobro .fe-cobrada {
  display: none;
  margin: 0;
}

/* Un solo violeta en la ficha (revisión de diseño, 14-nov). «Marcar como
   cobrada» pasa a secundario, en la cabecera y en la tarjeta, cuando manda
   otro botón: «Guardar cobro», con «Cobro parcial…» abierto, o el principal
   de la tarjeta «Hacienda» («Hacer la rectificativa», si la ha rechazado).
   Y si coinciden los dos, manda el de Hacienda y «Guardar cobro» cede
   también. Se mira lo que hay en la página, sin tocar el marcado de esa
   tarjeta, que es de verifactu-delivery-ui.ts. */
.content:has(.fe-parcial[open]) .fe-cobrar-arriba,
.content:has(.fe-columna > .fe-hacienda .t-boton.es-principal) .fe-cobrar-arriba,
.fe-cobro:has(.fe-parcial[open]) .fe-cobrada .t-boton,
.fe-columna:has(> .fe-hacienda .t-boton.es-principal) .fe-cobrada .t-boton,
.fe-columna:has(> .fe-hacienda .t-boton.es-principal) .fe-parcial .t-boton.es-principal {
  color: var(--tinta);
  background: var(--papel);
  border-color: var(--borde-control);
  box-shadow: none;
}

@media (hover: hover) {
  .content:has(.fe-parcial[open]) .fe-cobrar-arriba:hover,
  .content:has(.fe-columna > .fe-hacienda .t-boton.es-principal) .fe-cobrar-arriba:hover,
  .fe-cobro:has(.fe-parcial[open]) .fe-cobrada .t-boton:hover,
  .fe-columna:has(> .fe-hacienda .t-boton.es-principal) .fe-cobrada .t-boton:hover,
  .fe-columna:has(> .fe-hacienda .t-boton.es-principal) .fe-parcial .t-boton.es-principal:hover {
    background: var(--papel-2);
    border-color: var(--tinta-3);
  }
}

/* Lo que se abre dentro de la tarjeta: «Cobro parcial…» y la devolución. */
.fe-plegable > summary {
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.fe-parcial > summary {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: -8px 0 -10px;
  color: var(--tinta-2);
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.fe-parcial[open] > summary {
  margin-bottom: 4px;
}

.fe-devolver > summary {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 18px;
  color: var(--tinta);
  font-size: 14.5px;
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: 11px;
}

.fe-devolver[open] > summary {
  background: var(--papel-2);
}

@media (hover: hover) {
  .fe-devolver > summary:hover {
    background: var(--papel-2);
    border-color: var(--tinta-3);
  }

  .fe-parcial > summary:hover,
  .fe-anular > summary:hover {
    color: var(--tinta);
  }
}

.fe-plegable-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.fe-devolver > .fe-plegable-cuerpo {
  margin-top: 16px;
}

.fe-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.fe-nota a {
  color: var(--sello);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* «Venta web: la cobra Stripe», al pie de su tarjeta. */
.fe-cobro-pie {
  padding-top: 14px;
  color: var(--tinta);
  font-size: 15px;
  border-top: 1px solid var(--line-soft);
}

/* ── Los formularios de la ficha: campos de 50 px con la etiqueta encima ── */
.fe-form,
.fe-metodo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
  margin: 0;
}

.fe-form .form-field,
.fe-metodo .form-field {
  display: block;
  min-width: 0;
}

.fe-form .form-field > label,
.fe-metodo .form-field > label,
.fe-anular label,
.fe-grupo > legend {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
}

.fe-anular label > input {
  margin-top: 6px;
}

.fe-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.fe-metodo input[type="text"] {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px;
  color: var(--tinta);
  font: inherit;
  background: var(--campo);
  border: 1px solid var(--borde-control);
  border-radius: 11px;
}

.fe-form input[name="amount"] {
  font-weight: 600;
  text-align: right;
}

.fe-form .form-hint {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.fe-grupo {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.fe-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Una pastilla con un número largo dentro puede partirse antes que salirse. */
.fe-opciones > .t-opcion {
  max-width: 100%;
  min-height: 44px;
  height: auto;
  padding-block: 6px;
  line-height: 1.25;
  white-space: normal;
}

.fe-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
}

.fe-form > .t-boton,
.fe-botones .t-boton {
  align-self: flex-start;
  min-height: 50px;
  padding: 0 18px;
  font-size: 14.5px;
  border-radius: 11px;
}

.fe-botones .t-enlace-suave {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

/* El botón que no pesa: «Cancelar», «Otro cliente». */
.fe-botones .t-boton.es-quieto,
.cj-quien-fila .t-boton.es-quieto {
  color: var(--tinta-2);
  background: transparent;
  border-color: var(--line);
}

@media (hover: hover) {
  .fe-botones .t-boton.es-quieto:hover,
  .cj-quien-fila .t-boton.es-quieto:hover {
    color: var(--tinta);
    border-color: var(--borde-control);
  }
}

/* Lo que se abre desde el «•••»: cambiar el vencimiento y duplicar una
   factura corregida. También la página que devuelve un cobro rechazado. */
.fe-confirmar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  scroll-margin-top: 16px;
}

.fe-confirmar h2 {
  margin: 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.fe-confirmar .ed-confirmar,
.cj-casilla .ed-confirmar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
}

.fe-confirmar .ed-confirmar input,
.cj-casilla .ed-confirmar input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--sello);
}

.fe-reintento {
  max-width: 520px;
}

/* ── «¿Cómo te han pagado?» ── */
.fe-pregunta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 520px;
}

.fe-metodo {
  gap: 16px;
  padding: 22px;
}

.fe-metodo h1 {
  margin: 0;
  font: 700 22px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.fe-metodo-cabeza .fe-nota {
  margin-top: 6px;
}

/* ── Historia: emitida, vencimiento, cobros y correcciones, por fecha ── */
.fe-historia {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px 24px;
}

.fe-historia h2 {
  margin: 0;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.fe-linea {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.fe-linea > li {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto;
  column-gap: 12px;
  padding-bottom: 18px;
}

/* El punto de cada hito y la raya que lo une con el siguiente. */
.fe-linea > li::before {
  content: "";
  grid-row: 1 / span 2;
  grid-column: 1;
  width: 12px;
  height: 12px;
  margin: 5px 3px 0;
  background: var(--papel);
  border: 2px solid var(--borde-control);
  border-radius: 50%;
}

.fe-linea > li::after {
  content: "";
  position: absolute;
  top: 20px;
  bottom: 2px;
  left: 8px;
  width: 2px;
  background: var(--line);
}

.fe-linea > li:last-child {
  padding-bottom: 0;
}

.fe-linea > li:last-child::after {
  display: none;
}

.fe-linea > li.es-hecho::before {
  background: var(--safe);
  border-color: var(--safe);
}

.fe-linea > li.es-neutro::before {
  background: var(--tinta-3);
  border-color: var(--tinta-3);
}

.fe-linea > li.es-aviso::before {
  background: var(--warning);
  border-color: var(--warning);
  box-shadow: 0 0 0 4px var(--warning-soft);
}

.fe-linea > li.es-peligro::before {
  background: var(--danger);
  border-color: var(--danger);
  box-shadow: 0 0 0 4px var(--danger-soft);
}

.fe-linea strong {
  grid-column: 2;
  font-size: 15px;
  font-weight: 600;
}

.fe-linea > li.es-peligro strong {
  color: var(--danger);
}

.fe-linea strong a {
  color: var(--sello);
}

.fe-linea p {
  grid-column: 2;
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.fe-importe {
  grid-row: 1 / span 2;
  grid-column: 3;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* «Ver la factura»: en el móvil la hoja queda al final; esta fila lleva a ella. */
.fe-ver-hoja {
  display: none;
}

.fe-ronda {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--tinta-2);
  background: var(--papel-2);
  border-radius: 50%;
}

.fe-ronda > .t-icono {
  width: 20px;
  height: 20px;
}

/* ── La rectificativa: qué cambió y la factura que corrige ── */
.rf-ajuste {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
}

.rf-ajuste > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.rf-causa {
  margin: 0;
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

.rf-cambio {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.rf-cambio > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.rf-cambio > div:last-child {
  padding-bottom: 0;
}

.rf-cambio dt {
  color: var(--tinta-2);
}

.rf-cambio dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.rf-cambio .es-despues dt,
.rf-cambio .es-despues dd {
  color: var(--tinta);
  font-weight: 600;
}

.rf-corrige > .fe-rotulo {
  padding: 20px 24px 14px;
}

/* Bajo un título, el primer talón lleva su filete. */
.rf-corrige > .t-ffs > .t-ff:first-child,
.cj-resultados > .t-ff:first-child {
  border-top: 1px solid var(--line-soft);
}

.rf-canje {
  padding: 12px 24px 16px;
  border-top: 1px solid var(--line-soft);
}

/* ── El canje: hacer la factura completa de una simplificada ── */
.cj-cabecera {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
}

.cj-cabecera > div {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  min-width: 0;
}

.cj-cabecera .fe-volver span {
  font-family: var(--mono);
  font-size: 0.87em;
  letter-spacing: -0.01em;
}

.cj-cabecera h1 {
  margin: 4px 0 8px;
  font: 800 40px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.cj-cabecera p {
  max-width: 640px;
}

/* La ruta: los pasos de un flujo, con el actual en tinta y los hechos en verde. */
.t-ruta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t-ruta li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta-2);
  font-size: 13.5px;
  font-weight: 600;
}

.t-ruta li b {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  font: 500 11.5px/1 var(--mono);
  border: 1.5px solid var(--borde-control);
  border-radius: 50%;
}

.t-ruta li[aria-current="step"] {
  color: var(--tinta);
}

.t-ruta li[aria-current="step"] b {
  color: var(--papel);
  background: var(--tinta);
  border-color: var(--tinta);
}

.t-ruta li.es-hecho b {
  color: var(--safe);
  background: var(--safe-soft);
  border-color: var(--safe-borde);
}

.t-ruta .t-icono {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

/* Paso 1: a nombre de quién. */
.cj-elegir {
  max-width: 820px;
}

.cj-elegir-cabeza {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px 18px;
}

.cj-elegir-titulo {
  margin: 0;
  color: var(--tinta);
  font: 400 17px/1.45 var(--ui);
}

.cj-buscar {
  margin: 0;
}

.cj-buscar-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.cj-buscar .t-buscador {
  height: 50px;
  padding: 0 14px;
  background: var(--campo);
  border-radius: 11px;
}

.cj-buscar .t-buscador svg {
  width: 20px;
  height: 20px;
}

.cj-buscar .t-buscador input {
  font-size: 15px;
}

.cj-buscar .t-boton {
  min-height: 50px;
  padding: 0 18px;
  font-size: 14.5px;
  border-radius: 11px;
}

/* «Seguir con <cliente>»: la vuelta al segundo paso sin elegir otro. */
.cj-seguir {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin: -8px 0 -10px;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.cj-sin-resultados {
  margin: 0;
  padding: 0 24px 18px;
  color: var(--tinta-2);
}

.cj-elegir-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 24px;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

/* Paso 2: revisar y emitir. En el marcado, la hoja va entre «A nombre de» y
   lo que pasa al emitirla, que es su orden en el móvil. */
.cj-mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.cj-parte {
  min-width: 0;
  background: var(--papel);
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

/* En escritorio, las dos partes forman una sola tarjeta a la izquierda y la
   hoja queda a la derecha. La segunda fila es flexible para que la hoja, que
   ocupa las dos, no separe una parte de la otra. */
@media (min-width: 1280px) {
  .cj-mesa {
    grid-template-columns: 460px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0 28px;
  }

  .cj-nombre {
    grid-row: 1;
    grid-column: 1;
    border-radius: var(--radio-l) var(--radio-l) 0 0;
  }

  .cj-hoja {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .cj-que {
    grid-row: 2;
    grid-column: 1;
    border-top: 1px solid var(--line-soft);
    border-radius: 0 0 var(--radio-l) var(--radio-l);
  }
}

.cj-quien-fila {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px;
}

.cj-quien-fila .t-boton {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
  border-radius: 11px;
}

.cj-quien {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cj-quien .fe-rotulo {
  margin-bottom: 4px;
}

.cj-quien strong {
  color: var(--tinta);
  font-size: 17px;
  font-weight: 600;
}

.cj-nombre > .t-aviso {
  margin: 0 24px 12px;
}

.cj-nombre > .t-aviso:last-child {
  margin-bottom: 20px;
}

.cj-que-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 24px;
}

.cj-puntos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--tinta-2);
  font-size: 14px;
  line-height: 1.45;
  list-style: none;
}

.cj-puntos li {
  position: relative;
  padding-left: 20px;
}

.cj-puntos li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 7px;
  width: 6px;
  height: 6px;
  background: var(--tinta-3);
  border-radius: 50%;
}

.cj-emitir {
  margin: 0;
}

.cj-casilla {
  padding: 8px 24px 12px;
  border-top: 1px solid var(--line-soft);
}

.cj-pie {
  padding: 16px 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--radio-l) var(--radio-l);
}

.cj-pie .t-boton {
  min-height: 50px;
  padding: 0 24px;
  font-size: 16px;
  border-radius: 11px;
}

.cj-motivos {
  margin: 0;
  padding-left: 1.1rem;
  line-height: 1.5;
}

/* En la ficha: la completa de un canje con su tarjeta y la simplificada
   canjeada con una línea. */
.cj-ficha .cj-sustituye {
  min-width: 0;
  margin: 0;
}

.cj-ficha .fe-cobro-cabecera > .t-estado {
  margin-bottom: 0;
}

.cj-ficha .cj-sustituye a {
  color: var(--sello);
  font-weight: 600;
}

.cj-canjeada {
  margin: 0;
}

/* ── Móvil (mesas FichaMovil, RectificativaMovil y CanjeMovil) ── */
@media (max-width: 760px) {
  /* Arriba, la vuelta y, a la derecha, el PDF y el «•••»; el titular, debajo. */
  .fe-titular {
    position: relative;
    display: block;
    margin-bottom: 14px;
  }

  .fe-titular .fe-acciones {
    position: absolute;
    top: 0;
    right: 0;
    flex-wrap: nowrap;
    gap: 8px;
  }

  /* «Marcar como cobrada» está en la tarjeta de cobro. */
  .fe-titular .fe-cobrar-arriba {
    display: none;
  }

  /* «Descargar PDF» queda en su icono; el texto sigue para el lector. */
  .fe-titular .fe-pdf {
    width: 44px;
    padding: 0;
  }

  .fe-titular .fe-pdf > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fe-titular .fe-acciones > .t-menu-mas {
    position: relative;
  }

  .fe-titular .fe-acciones .t-menu-mas-lista {
    right: 0;
    left: auto;
  }

  .fe-titular .fe-cliente {
    margin: 2px 0 6px;
    padding: 0 4px;
    font-size: 30px;
  }

  .fe-titular .fe-detalle {
    padding: 0 4px;
    font-size: 13.5px;
    line-height: 1.45;
  }

  .fe-sin-pdf {
    margin-bottom: 14px;
  }

  .fe-mesa,
  .fe-columna {
    gap: 14px;
  }

  .fe-cobro {
    gap: 14px;
    padding: 18px 16px 16px;
  }

  .fe-cifra {
    font-size: 40px;
  }

  .fe-cobro-cabecera {
    row-gap: 6px;
  }

  .fe-cobro .fe-cobrada {
    display: block;
  }

  .fe-cobro .fe-cobrada .t-boton {
    width: 100%;
    min-height: 50px;
    font-size: 16px;
    border-radius: 11px;
  }

  .fe-parcial > summary {
    display: flex;
    justify-content: center;
    margin: 4px 0 -8px;
  }

  .fe-parcial[open] > summary {
    margin-bottom: 6px;
  }

  .fe-anular > summary {
    min-height: 44px;
  }

  /* Todo campo escribe a 16 px: por debajo, el iPhone amplía la página. */
  .fe-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .fe-metodo input[type="text"],
  .cj-buscar .t-buscador input {
    font-size: 16px;
  }

  .fe-columna > .fe-hacienda,
  .fe-historia,
  .fe-confirmar,
  .fe-metodo,
  .rf-ajuste {
    padding: 18px 16px;
  }

  .fe-historia {
    gap: 14px;
  }

  .fe-ver-hoja {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 20px;
    column-gap: 12px;
    align-items: center;
    padding: 14px 16px;
    color: var(--tinta);
    text-decoration: none;
  }

  .fe-ver-hoja-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .fe-ver-hoja-texto strong {
    font-weight: 600;
  }

  .fe-ver-hoja-texto small {
    color: var(--tinta-2);
    font-size: 13.5px;
    line-height: 1.45;
  }

  .fe-ver-hoja > .t-icono {
    width: 20px;
    height: 20px;
    color: var(--tinta-3);
  }

  .rf-corrige > .fe-rotulo {
    padding: 16px 16px 12px;
  }

  .rf-canje {
    padding: 12px 16px 14px;
  }

  /* El canje. */
  .cj-cabecera {
    display: block;
    margin-bottom: 14px;
  }

  .cj-cabecera h1 {
    margin: 2px 0 6px;
    padding: 0 4px;
    font-size: 30px;
  }

  .cj-cabecera p {
    padding: 0 4px;
    font-size: 13.5px;
    line-height: 1.45;
  }

  .cj-cabecera .t-ruta {
    gap: 6px 14px;
    margin-top: 14px;
    padding: 0 4px;
  }

  .cj-mesa {
    gap: 14px;
  }

  .cj-quien-fila {
    gap: 12px;
    padding: 16px;
  }

  .cj-quien strong {
    font-size: 15px;
  }

  .cj-nombre > .t-aviso {
    margin-inline: 16px;
  }

  .cj-que-cuerpo {
    padding: 16px 16px 12px;
  }

  .cj-puntos {
    font-size: 13.5px;
  }

  .cj-casilla {
    padding: 0 16px 4px;
    border-top: 0;
  }

  .cj-pie {
    padding: 0 16px 16px;
    background: none;
    border-top: 0;
  }

  .cj-pie .t-boton {
    width: 100%;
    min-height: 52px;
  }

  .cj-elegir-cabeza {
    padding: 18px 16px 16px;
  }

  /* El buscador, a todo el ancho, y «Buscar» debajo: al lado, el campo se quedaba corto. */
  .cj-buscar-fila {
    grid-template-columns: minmax(0, 1fr);
  }

  .cj-sin-resultados {
    padding: 0 16px 16px;
  }

  .cj-elegir-pie {
    padding: 14px 16px;
  }
}
/* ── fin de la tanda 5a ── */

/* ── Tanda 5b: el envío a Hacienda de una factura y la ficha de una venta web ──
   Propuesta de noviembre (mesas Hacienda, HaciendaMovil, HaciendaEstados,
   VentaWeb y VentaWebMovil). El envío a Hacienda conserva su patrón (qué ha
   pasado, el recorrido, la respuesta y, en el pie, la acción que toca), con
   más aire y el documento afectado al lado. La ficha de una venta web dice
   arriba qué pasa, con su título, y lleva «A nombre de» con las opciones a
   la vista. Un solo violeta por pantalla: el botón que toca. */

/* ·· El envío a Hacienda ·· */

/* La página fiscal es ancha: la tarjeta de estado y, al lado, el documento
   y los detalles técnicos. La de pruebas sigue en una columna. */
@media (min-width: 761px) {
  .content:has(> .hz-cabecera.es-ancha) > * {
    width: 100%;
    max-width: 1100px;
    margin-inline: auto;
  }
}

.hz-cabecera.es-ancha {
  position: relative;
  align-items: flex-end;
}

.hz-cabecera.es-ancha > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.hz-cabecera.es-ancha .fe-volver {
  justify-self: start;
  min-height: 44px;
  color: var(--tinta-2);
  font-weight: 600;
}

.hz-cabecera.es-ancha h1 {
  margin: 0 0 4px;
  font: 800 40px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.hz-cabecera.es-ancha .hz-contexto {
  margin-top: 0;
}

.hz-actualizar {
  min-height: 44px;
}

/* El icono es para el móvil, donde «Actualizar» queda en un botón redondo. */
.hz-actualizar > svg {
  display: none;
  width: 20px;
  height: 20px;
}

.hz-pantalla.es-ancha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.hz-lado {
  display: grid;
  gap: 16px;
  min-width: 0;
}

@media (min-width: 1000px) {
  .hz-pantalla.es-ancha {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 24px;
  }

  .hz-lado {
    gap: 20px;
  }
}

/* La tarjeta de estado, en las dos páginas del envío. */
.hz-estado {
  gap: 26px;
}

.hz-cabeza {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  column-gap: 18px;
  padding: 28px 28px 0;
}

.hz-icono {
  width: 52px;
  height: 52px;
  border: 0;
}

.hz-icono svg {
  width: 26px;
  height: 26px;
}

.hz-cabeza h2 {
  margin: 0 0 4px;
  font: 800 28px/1.1 var(--display);
  letter-spacing: -0.035em;
}

/* El recorrido: el punto y la línea hasta el siguiente; lo hecho, en tinta;
   el paso actual, con su halo y, si avisa, en su color. */
.hz-pasos {
  padding: 0 28px;
}

.hz-paso {
  gap: 10px;
  font-size: inherit;
}

.hz-paso::before {
  left: 14px;
  background: var(--line);
}

.hz-paso.es-hecho::before {
  background: var(--tinta-2);
}

.hz-punto {
  background: var(--line);
  border: 0;
}

.hz-paso.es-hecho .hz-punto,
.hz-paso.es-actual .hz-punto {
  background: var(--tinta-2);
}

.hz-paso.es-hecho.tono-bien .hz-punto {
  background: var(--safe);
}

.hz-paso.es-actual .hz-punto {
  box-shadow: 0 0 0 5px var(--papel-2);
}

.hz-paso.es-actual.tono-aviso .hz-punto {
  background: var(--warning);
  box-shadow: 0 0 0 5px var(--warning-soft);
}

.hz-paso.es-actual.tono-peligro .hz-punto {
  background: var(--danger);
  box-shadow: 0 0 0 5px var(--danger-soft);
}

.hz-paso-texto {
  font-weight: 600;
}

.hz-paso.es-hecho.tono-bien .hz-paso-texto {
  color: var(--safe);
}

.hz-paso.es-actual.tono-aviso .hz-paso-texto {
  color: var(--warning);
}

.hz-paso.es-actual.tono-peligro .hz-paso-texto {
  color: var(--danger);
}

.hz-paso-texto small {
  color: var(--tinta-2);
  font-size: 13.5px;
}

/* La respuesta de Hacienda: la cita, con la raya del color del resultado. */
.hz-respuesta {
  gap: 6px;
  margin: 0 28px;
  padding: 16px 20px;
  border-left: 4px solid var(--borde-control);
  border-radius: 4px 14px 14px 4px;
}

.hz-respuesta > span {
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
}

.hz-respuesta p {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
}

.hz-respuesta .hz-codigo {
  font-size: 15px;
}

.hz-respuesta small {
  font: 400 13px/1.3 var(--mono);
}

.hz-alerta {
  margin: 0 28px;
}

.hz-pie {
  padding: 18px 28px;
}

.hz-estado > :last-child:not(.hz-pie) {
  margin-bottom: 28px;
}

.hz-pie .t-boton {
  min-height: 44px;
}

.hz-pie .hz-nota {
  color: var(--tinta-2);
  font-size: 13.5px;
}

.hz-botones {
  gap: 10px 18px;
}

.hz-botones .ne-salida {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

/* «Ya está resuelto», abierto: la nota ocupa el pie, en lugar de los dos botones. */
.hz-pie .ne-cerrar {
  gap: 10px;
  padding: 0;
  background: none;
  border: 0;
}

.hz-pie .ne-cerrar label {
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
}

.hz-pie .ne-cerrar .ne-ayuda {
  color: var(--tinta-2);
  font-size: 13.5px;
}

.hz-pie .ne-cerrar-botones .ne-salida {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* Lo que Talonario reintenta solo: la frase y, a su lado, el botón para adelantarlo. */
.hz-pie > #volver-a-intentarlo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.hz-pie > #volver-a-intentarlo > .hz-nota {
  flex: 1 1 180px;
}

/* «Qué corrige», en el envío de una rectificativa: pastillas, no un
   desplegable. Ocupa el ancho del formulario y la fecha va debajo. */
.hz-opciones {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Su leyenda, como la etiqueta del campo de al lado. */
.hz-opciones > legend {
  float: left;
  width: 100%;
  padding: 0;
  color: var(--tinta-2);
  font-size: 0.86rem;
  font-weight: 500;
}

.hz-pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  clear: both;
}

/* El botón de opción de una pastilla no es un campo: sin su caja. */
.hz-form .t-opcion > input[type="radio"] {
  min-height: 0;
  padding: 0;
  border: 0;
}

.hz-form .t-opcion {
  white-space: normal;
  line-height: 1.2;
}

/* El documento afectado: su talón y el total. */
.hz-documento {
  --ff-sangria: 0px;
  padding: 0;
  overflow: hidden;
}

.hz-rotulo {
  margin: 0;
  padding: 20px 24px 14px;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.hz-documento .t-ff {
  padding-right: 16px;
}

.hz-documento .t-ff-flecha {
  display: flex;
  margin-left: 12px;
}

/* El importe va debajo, en «Total»; en el móvil, en la fila. */
.hz-documento .t-ff-importe {
  display: none;
}

.hz-documento-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--line-soft);
}

.hz-documento-total span {
  color: var(--tinta-2);
  font-size: 13.5px;
}

.hz-documento-total strong {
  font: 800 24px/1.02 var(--display);
  letter-spacing: -0.035em;
  white-space: nowrap;
}

/* Detalles técnicos: cada bloque, con su rótulo y su filete. */
.hz-detalles > summary {
  min-height: 56px;
  padding: 16px 20px 16px 24px;
}

.hz-detalles-titulo small {
  color: var(--tinta-2);
  font-size: 13.5px;
}

.hz-detalles-cuerpo {
  display: block;
  padding: 0;
  border-top: 0;
}

.hz-detalles-cuerpo > * {
  margin: 0;
  padding: 16px 24px;
  border-top: 1px solid var(--line-soft);
}

.hz-detalles-cuerpo > section {
  gap: 10px;
}

.hz-detalles-cuerpo .fh-subtitulo {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.09em;
}

/* Volver a enviar lo mismo: aparte, sobre papel más oscuro. */
.hz-detalles-cuerpo > #enviar-lo-mismo,
.hz-detalles-cuerpo > #volver-a-enviar {
  background: var(--papel-2);
}

.hz-detalles .t-boton {
  min-height: 44px;
}

.hz-historia {
  font-size: inherit;
}

.hz-historia li {
  display: flex;
  flex-direction: column-reverse;
  gap: 0;
  padding: 0 0 18px 30px;
}

.hz-historia li::before {
  top: 5px;
  left: 3px;
  width: 12px;
  height: 12px;
}

.hz-historia li::after {
  top: 18px;
  left: 8px;
  width: 2px;
}

.hz-historia li > span {
  color: var(--tinta);
  font-weight: 600;
}

.hz-historia time {
  color: var(--tinta-2);
  font-size: 13.5px;
}

.hz-archivos {
  font-size: inherit;
}

.hz-archivos li {
  gap: 8px;
}

.hz-archivos a {
  min-height: 44px;
  gap: 8px;
  padding: 0 18px;
  color: var(--tinta-2);
  font-size: 14.5px;
  background: transparent;
  border-color: var(--line);
  border-radius: 11px;
}

.hz-archivos a:hover {
  color: var(--tinta);
  border-color: var(--tinta-3);
}

.hz-archivos svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 760px) {
  .hz-cabecera.es-ancha {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 14px;
  }

  .hz-cabecera.es-ancha h1 {
    font-size: 30px;
  }

  .hz-cabecera.es-ancha .hz-contexto {
    font-size: 13.5px;
  }

  /* «Actualizar», arriba a la derecha, a la altura de la vuelta. */
  .hz-actualizar {
    position: absolute;
    top: 0;
    right: 0;
    width: 44px;
    padding: 0;
  }

  .hz-actualizar > svg {
    display: block;
  }

  .hz-actualizar > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hz-pantalla.es-ancha,
  .hz-lado {
    gap: 14px;
  }

  .hz-estado {
    gap: 20px;
  }

  .hz-cabeza {
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    column-gap: 14px;
    padding: 18px 16px 0;
  }

  .hz-icono {
    width: 44px;
    height: 44px;
  }

  .hz-icono svg {
    width: 23px;
    height: 23px;
  }

  .hz-cabeza h2 {
    font-size: 23px;
  }

  .hz-cabeza p {
    font-size: 13.5px;
  }

  .hz-pasos,
  .hz-pie {
    padding-right: 16px;
    padding-left: 16px;
  }

  .hz-paso {
    gap: 8px;
  }

  .hz-paso::before {
    top: 5px;
    left: 12px;
  }

  .hz-punto {
    width: 12px;
    height: 12px;
  }

  .hz-paso.es-actual .hz-punto,
  .hz-paso.es-actual.tono-aviso .hz-punto,
  .hz-paso.es-actual.tono-peligro .hz-punto {
    box-shadow: 0 0 0 4px var(--papel-2);
  }

  .hz-paso.es-actual.tono-aviso .hz-punto {
    box-shadow: 0 0 0 4px var(--warning-soft);
  }

  .hz-paso.es-actual.tono-peligro .hz-punto {
    box-shadow: 0 0 0 4px var(--danger-soft);
  }

  .hz-paso-texto small {
    font-size: 12.5px;
  }

  .hz-respuesta,
  .hz-alerta {
    margin: 0 16px;
  }

  .hz-respuesta {
    padding: 14px 16px;
  }

  .hz-respuesta p {
    font-size: 16.5px;
  }

  .hz-pie {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .hz-estado > :last-child:not(.hz-pie) {
    margin-bottom: 18px;
  }

  /* La acción del pie ocupa el ancho; la salida, centrada debajo. */
  .hz-botones {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }

  .hz-botones .ne-salida {
    justify-content: center;
    width: 100%;
  }

  .hz-pie .t-boton {
    width: 100%;
    min-height: 50px;
    font-size: 16px;
  }

  .hz-pie > #volver-a-intentarlo {
    display: grid;
  }

  .hz-pie textarea,
  .hz-form input:not([type="checkbox"]):not([type="hidden"]),
  .hz-form select {
    font-size: 16px;
  }

  .hz-rotulo,
  .hz-documento-total {
    display: none;
  }

  .hz-documento .t-ffs > .t-talon:first-child {
    border-top: 0;
  }

  .hz-documento .t-ff-importe {
    display: block;
  }

  .hz-documento .t-ff-flecha {
    display: none;
  }

  .hz-detalles > summary {
    padding: 0 16px;
  }

  .hz-detalles-cuerpo > * {
    padding: 14px 16px;
  }
}

/* ·· La ficha de una venta web ·· */

@media (min-width: 761px) {
  .content:has(> .vw-cabecera) > * {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
  }
}

.vw-cabecera {
  flex-wrap: wrap;
  align-items: flex-end;
}

.vw-cabecera > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.vw-cabecera .fe-volver {
  justify-self: start;
  min-height: 44px;
  color: var(--tinta-2);
  font-weight: 600;
}

.vw-cabecera h1 {
  margin: 0 0 4px;
  font: 800 40px/1.02 var(--display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.vw-contexto {
  margin: 0;
  color: var(--tinta-2);
}

/* Los pasos de la venta: cobrada y facturada. */
.vw-ruta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vw-ruta li {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta-2);
  font-size: 13.5px;
  font-weight: 600;
}

.vw-ruta li b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--borde-control);
  border-radius: 50%;
  font: 500 11.5px/1 var(--mono);
}

.vw-ruta li[aria-current="step"] {
  color: var(--tinta);
}

.vw-ruta li[aria-current="step"] b {
  color: var(--papel);
  background: var(--tinta);
  border-color: var(--tinta);
}

.vw-ruta li.es-hecho b {
  color: var(--safe);
  background: var(--safe-soft);
  border-color: var(--safe-borde);
}

.vw-ruta svg {
  width: 14px;
  height: 14px;
  stroke-width: 2.2;
}

/* Dos tarjetas: lo que dice Stripe y, a su derecha, lo que pasa con la
   venta. En estrecho, primero lo que hay que hacer. */
.vw-ficha {
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 0;
}

.vw-ficha > .vw-recibo {
  order: 2;
}

@media (min-width: 1000px) {
  .vw-ficha {
    grid-template-columns: minmax(320px, 0.6fr) minmax(0, 1fr);
    gap: 24px;
  }

  .vw-ficha > .vw-recibo {
    order: 0;
    max-width: 440px;
  }
}

.vw-recibo,
.vw-principal {
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

.vw-recibo-cab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 24px 24px 18px;
}

.vw-recibo-cab > div {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.vw-rotulo {
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
}

.vw-grande {
  font: 800 46px/1.02 var(--display);
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.vw-recibo-cab .vw-nota {
  margin: 0;
}

.vw-datos div {
  gap: 16px;
  padding: 12px 24px;
  border-top: 1px solid var(--line-soft);
  font-size: inherit;
}

.vw-datos div:last-child {
  padding-bottom: 16px;
}

.vw-datos dd {
  font-weight: 400;
}

.vw-datos dd.es-nombre {
  font-weight: 600;
}

.vw-datos dd.es-aviso {
  color: var(--warning);
  font-weight: 500;
}

/* Arriba, qué pasa: el icono con su tono, el título y la explicación. */
.vw-estado {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  column-gap: 16px;
  padding: 24px;
}

.vw-ronda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--tinta-2);
  background: var(--papel-2);
  border-radius: 50%;
}

.vw-ronda svg {
  width: 20px;
  height: 20px;
}

.vw-estado.tono-aviso .vw-ronda {
  color: var(--warning);
  background: var(--warning-soft);
}

.vw-estado.tono-bien .vw-ronda {
  color: var(--safe);
  background: var(--safe-soft);
}

.vw-estado > div {
  align-self: center;
  min-width: 0;
}

.vw-estado h2 {
  margin: 0;
  font: 700 22px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.vw-estado p {
  margin: 4px 0 0;
  color: var(--tinta-2);
}

.vw-estado a {
  color: var(--tinta);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* La factura ya emitida, con su número. */
.vw-factura {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  margin: 0;
  padding: 8px 24px;
  border-top: 1px solid var(--line-soft);
}

.vw-factura > p {
  display: grid;
  gap: 4px;
  margin: 0;
}

.vw-factura .vw-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
}

.vw-factura a {
  flex: none;
  color: var(--tinta);
  font: 500 0.87em var(--mono);
  text-underline-offset: 3px;
}

/* La factura tal como saldrá: la hoja, sobre la mesa. */
.vw-previa {
  padding: 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.vw-previa .vw-hoja {
  max-width: 480px;
  margin-inline: auto;
}

/* «Cambiar datos», a la vista: a nombre de quién, qué compró y la fecha. */
.vw-cambiar-form {
  display: block;
  padding: 0;
}

.vw-cambiar-cab {
  display: grid;
  gap: 6px;
  padding: 20px 24px 0;
  border-top: 1px solid var(--line-soft);
}

.vw-cambiar-cab h3 {
  margin: 0;
}

.vw-cambiar-cab .vw-nota {
  max-width: 64ch;
  margin: 0;
}

.vw-campo > label,
.vw-campo > legend,
.vw-campo:focus-within > label,
.vw-campo:focus-within > legend {
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
}

.vw-a-nombre {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 24px 20px;
}

/* La leyenda de un fieldset no entra en su rejilla: flotada, sí. */
.vw-a-nombre > legend {
  float: left;
  width: 100%;
}

.vw-elecciones {
  display: grid;
  gap: 10px;
}

/* Una opción a la vista: una fila con su botón de opción; la elegida, en tinta. */
.vw-eleccion {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  min-height: 52px;
  padding: 8px 14px;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.vw-eleccion > input {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--sello);
}

.vw-eleccion strong {
  display: block;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.vw-eleccion small {
  display: block;
  color: var(--tinta-2);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

/* El NIF de la ficha, en su letra. */
.vw-eleccion small .t-mono {
  font-size: 13px;
}

.vw-eleccion:has(> input:checked) {
  background: var(--papel-2);
  border-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
}

.vw-eleccion:has(> input:checked) strong {
  font-weight: 600;
}

.vw-eleccion:has(> input:focus-visible) {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.vw-eleccion[hidden] {
  display: none;
}

.vw-mas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 10px;
  margin-top: 2px;
}

/* Un botón callado: transparente, con su filete. */
.vw-quieto {
  min-height: 44px;
  color: var(--tinta-2);
  background: transparent;
  border-color: var(--line);
}

.vw-quieto > .t-icono {
  width: 20px;
  height: 20px;
}

.vw-quieto:hover {
  color: var(--tinta);
  border-color: var(--tinta-3);
}

.vw-quieto:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

/* Con muchos clientes, los demás van tras «Buscar otro cliente», en una
   lista que se desplaza. */
.vw-otros > summary {
  list-style: none;
}

.vw-otros > summary::-webkit-details-marker {
  display: none;
}

.vw-otros[open] {
  flex: 1 1 100%;
  display: grid;
  gap: 10px;
}

.vw-otros[open] > summary {
  justify-self: start;
  color: var(--tinta);
  background: var(--papel-2);
}

.vw-otros-lista {
  display: grid;
  gap: 10px;
  max-height: 330px;
  padding: 10px;
  overflow-y: auto;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: 14px;
}

.vw-otros-lista > .vw-nota {
  margin: 0;
}

.vw-otros-filtro {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  color: var(--tinta);
  background: var(--campo);
  border: 1px solid var(--borde-control);
  border-radius: 11px;
  font: inherit;
}

.vw-otros-filtro:focus {
  border-color: var(--foco);
  outline: none;
  box-shadow: 0 0 0 3px var(--sello-piel);
}

.vw-cambiar-dos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px 20px;
  padding: 20px 24px;
  border-top: 1px solid var(--line-soft);
}

.vw-cambiar-dos .vw-campo > legend {
  margin-bottom: 6px;
}

.vw-cambiar-form fieldset.vw-campo > .t-segmento {
  margin-top: 0;
}

.vw-cambiar-form .t-segmento {
  height: auto;
  padding: 3px;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}

.vw-cambiar-form .t-segmento-opcion span {
  height: auto;
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
}

.vw-cambiar-form .t-segmento-opcion input:checked + span {
  background: var(--elevado);
  box-shadow: 0 0 0 1px var(--line-soft), 0 6px 12px -10px rgba(27, 24, 32, 0.6);
}

.vw-cambiar-form .vw-campo input[type="date"] {
  min-height: 50px;
  padding: 0 14px;
  background-color: var(--campo);
  border-color: var(--borde-control);
  border-radius: 11px;
  font-size: 15px;
}

/* El pie: lo que se guarda y el único botón violeta. */
.vw-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.vw-pie > .vw-nota {
  flex: 1 1 240px;
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
}

.vw-pie-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.vw-pie-botones form {
  margin: 0;
}

.vw-pie .t-boton {
  min-height: 50px;
}

.vw-pie .t-boton.es-principal {
  padding-inline: 24px;
  font-size: 16px;
}

@media (max-width: 760px) {
  .vw-cabecera {
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 14px;
  }

  .vw-cabecera h1 {
    font-size: 30px;
  }

  .vw-contexto {
    font-size: 13.5px;
  }

  /* En el móvil los pasos no se enseñan: la tarjeta ya dice qué falta. */
  .vw-ruta {
    display: none;
  }

  .vw-ficha {
    gap: 14px;
  }

  .vw-estado {
    grid-template-columns: 40px minmax(0, 1fr);
    column-gap: 12px;
    padding: 16px;
  }

  .vw-ronda {
    width: 40px;
    height: 40px;
  }

  .vw-estado h2 {
    font-size: 19px;
  }

  .vw-estado p {
    font-size: 13.5px;
  }

  .vw-previa {
    padding: 16px;
  }

  .vw-factura {
    padding-inline: 16px;
  }

  .vw-cambiar-cab {
    padding: 16px 16px 0;
  }

  .vw-a-nombre {
    padding: 12px 16px 16px;
  }

  .vw-eleccion {
    padding-inline: 12px;
  }

  .vw-mas > .t-boton,
  .vw-otros:not([open]) {
    flex: 1 1 0;
  }

  .vw-mas .t-boton {
    padding-inline: 8px;
  }

  .vw-otros:not([open]) > summary {
    width: 100%;
  }

  .vw-cambiar-dos {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .vw-cambiar-form .t-segmento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .vw-cambiar-form .t-segmento-opcion span {
    justify-content: center;
  }

  .vw-cambiar-form .vw-campo input[type="date"],
  .vw-otros-filtro {
    font-size: 16px;
  }

  /* En el pie, primero el botón que toca, a todo el ancho. */
  .vw-pie {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px 16px;
  }

  .vw-pie > .vw-nota {
    flex: 0 0 auto;
    order: 2;
    text-align: center;
  }

  .vw-pie-botones {
    flex-direction: column-reverse;
    margin-left: 0;
  }

  .vw-pie .t-boton {
    width: 100%;
  }

  .vw-pie .t-boton.es-principal {
    min-height: 52px;
  }

  .vw-recibo-cab {
    padding: 16px 16px 12px;
  }

  .vw-recibo-cab > div {
    gap: 6px;
  }

  .vw-grande {
    font-size: 34px;
  }

  .vw-datos div {
    padding: 11px 16px;
  }

  .vw-datos div:last-child {
    padding-bottom: 14px;
  }
}

/* ── fin de la tanda 5b ── */

/* ── Tanda 7: corregir una factura ──
   Propuesta de noviembre (mesas Corregir, CorregirDatos, CorregirFormularios
   y CorregirRevisar, con sus «…Movil»). Sale de correctionFormPage y de
   correctionPreviewPage, en trial-ledger-ui.ts: qué se corrige, los datos y
   la revisión. Los pasos de la cabecera son la pieza .t-ruta de la tanda 5a.
   La hoja es la plantilla fiscal y no se toca: solo cambia lo que la rodea. */

/* La cabecera: la vuelta con el número, el título, una frase y, a la derecha, los pasos. */
.co-cabecera {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
}

.co-cabecera > div {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  min-width: 0;
}

.co-cabecera .fe-volver {
  align-self: flex-start;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

.co-cabecera .fe-volver span {
  font-family: var(--mono);
  font-size: 0.87em;
  letter-spacing: -0.01em;
}

.co-cabecera h1 {
  margin: 4px 0 8px;
  font: 800 40px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.co-cabecera p {
  max-width: 620px;
}

.co-cabecera p + p {
  margin-top: 6px;
}

.co-cabecera + .t-aviso {
  margin-bottom: 20px;
}

/* Lo que se corrige o se rellena, a la izquierda; la factura, siempre al lado. */
.co-mesa {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (min-width: 1080px) {
  .co-mesa {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* Paso 1: los casos, uno por fila, cada uno con su frase. */
.co-elegir,
.co-form {
  padding: 0;
  overflow: hidden;
}

.co-titulo {
  margin: 0;
  padding: 22px 24px 16px;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.co-opciones {
  display: flex;
  flex-direction: column;
}

.co-opcion {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) 20px;
  column-gap: 16px;
  align-items: center;
  min-height: 72px;
  padding: 12px 20px 12px 24px;
  color: var(--tinta);
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
}

.co-opcion:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
}

.co-ronda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--tinta-2);
  background: var(--papel-2);
  border-radius: 50%;
}

.co-ronda > .t-icono,
.co-opcion > .t-icono {
  width: 20px;
  height: 20px;
}

.co-opcion > .t-icono {
  color: var(--tinta-3);
  transition: transform 0.3s var(--salida), color 0.2s;
}

.co-opcion-texto {
  min-width: 0;
}

.co-opcion-texto strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.co-opcion-texto small {
  display: block;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Como las filas de las listas: solo un tinte suave, y solo con ratón. */
@media (hover: hover) {
  .co-opcion:hover {
    background: color-mix(in srgb, var(--papel-2) 55%, var(--papel));
  }

  .co-opcion:hover > .t-icono {
    color: var(--tinta);
    transform: translateX(2px);
  }
}

.co-elegir-pie {
  margin: 0;
  padding: 14px 24px;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

/* La factura que se corrige: su talón y, debajo, el importe actual. */
.co-factura {
  --ff-sangria: 0px;
  padding: 0;
  overflow: hidden;
}

.co-factura > .fe-rotulo {
  padding: 20px 24px 14px;
}

.co-factura .t-ff {
  padding-right: 16px;
}

/* Bajo un título, el primer talón lleva su filete. */
.co-factura > .t-ffs > .t-ff:first-child {
  border-top: 1px solid var(--line-soft);
}

.co-factura .t-ff-flecha {
  display: flex;
  margin-left: 12px;
}

/* El importe va debajo, con su rótulo; en el móvil, en la fila. */
.co-factura .t-ff-importe {
  display: none;
}

.co-factura-importe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  margin: 0;
  padding: 14px 24px 18px;
  border-top: 1px solid var(--line-soft);
}

/* El rótulo se parte antes de que el importe baje de línea. */
.co-factura-importe span {
  flex: 1 1 96px;
  min-width: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.co-factura-importe strong {
  margin-left: auto;
  font: 800 24px/1.02 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

/* La completa de un canje: no ofrece ningún caso, manda a su simplificada. */
.co-desde {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  max-width: 640px;
  padding: 24px;
}

.co-desde h2 {
  margin: 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.co-desde p {
  margin: 0;
  color: var(--tinta-2);
}

.co-desde .t-boton {
  min-height: 50px;
  padding: 0 22px;
  border-radius: 11px;
}

/* Paso 2: arriba, lo elegido y «Cambiar»; los campos, y en el pie la nota y el botón. */
.co-form {
  min-width: 0;
  margin: 0;
}

.co-elegido {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  background: var(--papel-2);
  border-bottom: 1px solid var(--line-soft);
}

.co-elegido > div {
  min-width: 0;
}

.co-elegido h2 {
  margin: 4px 0 0;
  font: 600 17px/1.3 var(--ui);
}

/* El botón que no pesa, como «Otro cliente» en el canje. */
.co-elegido .t-boton {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  color: var(--tinta-2);
  font-size: 14.5px;
  background: transparent;
  border-color: var(--line);
  border-radius: 11px;
}

@media (hover: hover) {
  .co-elegido .t-boton:hover {
    color: var(--tinta);
    border-color: var(--borde-control);
  }
}

/* Dos columnas que pasan a una en el móvil. El motivo ocupa el ancho cuando se queda solo en su fila. */
.co-campos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 20px;
  padding: 24px;
}

.co-campos > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

.co-campos .form-field,
.co-hacienda .form-field {
  display: block;
  min-width: 0;
}

.co-campos .form-field > label,
.co-hacienda .form-field > label {
  display: block;
  margin: 0 0 6px;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
}

.co-campos input:not([type="radio"]),
.co-hacienda .form-field > input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px;
  color: var(--tinta);
  font: inherit;
  background: var(--campo);
  border: 1px solid var(--borde-control);
  border-radius: 11px;
}

/* El importe: a la derecha, con el «€» dentro del campo. */
.co-euro {
  position: relative;
  display: block;
}

.co-campos .co-euro > input {
  padding-right: 40px;
  font-size: 17px;
  font-weight: 600;
  text-align: right;
}

.co-euro > span {
  position: absolute;
  top: 0;
  right: 16px;
  display: flex;
  align-items: center;
  height: 50px;
  color: var(--tinta-2);
  font-size: 17px;
  pointer-events: none;
}

.co-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  padding: 16px 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.co-notas {
  display: flex;
  flex: 1 1 260px;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.co-notas p,
.co-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.co-pie .t-boton,
.co-confirmar-pie .t-boton {
  min-height: 50px;
  padding: 0 22px;
  font-size: 15px;
  border-radius: 11px;
}

/* Paso 3: la revisión. En el marcado, la hoja va entre las cifras y la
   confirmación, que es su orden en el móvil. */
.co-revision {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.co-parte {
  padding: 0;
}

.co-ajuste {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px;
}

.co-ajuste > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.co-ajuste .fe-cifra {
  white-space: nowrap;
}

/* «Ir a confirmar»: con la revisión en una columna, la confirmación queda
   tras toda la hoja. El enlace baja a su ancla, sin JavaScript, y deja el
   foco en esa zona. */
.co-ir {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  margin: -8px 0 -10px;
  padding-top: 10px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
}

.co-ir > span {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.co-ir > .t-icono {
  width: 20px;
  height: 20px;
  color: var(--tinta-3);
  transform: rotate(90deg);
}

.co-ir:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.co-confirmar {
  scroll-margin-top: 16px;
}

.co-confirmar:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.co-confirmar form {
  margin: 0;
}

.co-confirmar-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 24px 12px;
}

.co-confirmar-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 var(--radio-l) var(--radio-l);
}

/* En escritorio, las dos partes forman una sola tarjeta a la izquierda y la
   hoja queda a la derecha, desde 1280 px como en la ficha: más estrecha, a
   la plantilla fiscal se le parten los rótulos y el número. La segunda fila
   es flexible para que la hoja, que ocupa las dos, no separe una parte de
   la otra. */
@media (min-width: 1280px) {
  .co-revision {
    grid-template-columns: 440px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0 28px;
  }

  /* Con la hoja al lado, la confirmación está a la vista. */
  .co-ir {
    display: none;
  }

  .co-ajuste {
    grid-row: 1;
    grid-column: 1;
    padding-bottom: 0;
    border-bottom-width: 0;
    border-radius: var(--radio-l) var(--radio-l) 0 0;
    box-shadow: none;
  }

  .co-hoja {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .co-confirmar {
    grid-row: 2;
    grid-column: 1;
    border-top-width: 0;
    border-radius: 0 0 var(--radio-l) var(--radio-l);
  }

  .co-confirmar-cuerpo {
    padding-top: 18px;
  }
}

/* «Hacienda la recibirá como…»: la parte que se pulsa abre sus opciones debajo. */
.co-hacienda {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.co-hacienda > p {
  margin: 0;
  line-height: 1.9;
}

.co-hacienda > p > strong {
  font-weight: 600;
}

.co-pulsable {
  margin: 0;
  padding: 0 1px 1px;
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 2px dotted var(--sello);
  border-radius: 0;
  cursor: pointer;
}

.co-pulsable[aria-expanded="true"] {
  padding: 1px 6px;
  background: var(--sello-piel);
  border-bottom-style: solid;
  border-radius: 5px 5px 0 0;
}

.co-pulsable:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.co-pop {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 14px;
  background: var(--sello-piel);
  border: 0;
  border-radius: 14px;
}

.co-pop[hidden] {
  display: none;
}

/* Una opción por fila; la elegida, con el borde en tinta. */
.co-tipo {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  min-height: 48px;
  padding: 12px 14px;
  font-weight: 600;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.co-tipo:has(> input:checked) {
  background: var(--papel-2);
  border-color: var(--tinta);
  box-shadow: inset 0 0 0 1px var(--tinta);
}

.co-tipo > input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--sello);
}

.co-hacienda .field-hint {
  margin: 6px 0 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.co-casilla {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.co-casilla input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--sello);
}

/* ── Móvil (mesas CorregirMovil, CorregirDatosMovil y CorregirRevisarMovil) ── */
@media (max-width: 760px) {
  .co-cabecera {
    display: block;
    margin-bottom: 14px;
  }

  .co-cabecera h1 {
    margin: 2px 0 6px;
    padding: 0 4px;
    font-size: 30px;
  }

  .co-cabecera p {
    padding: 0 4px;
    font-size: 13.5px;
    line-height: 1.45;
  }

  .co-cabecera .t-ruta {
    gap: 6px 14px;
    margin-top: 14px;
    padding: 0 4px;
  }

  .co-cabecera + .t-aviso {
    margin-bottom: 14px;
  }

  .co-mesa,
  .co-revision {
    gap: 14px;
  }

  .co-titulo {
    padding: 16px 16px 12px;
  }

  /* Sin icono: el nombre, su frase y la flecha. */
  .co-opcion {
    grid-template-columns: minmax(0, 1fr) 20px;
    min-height: 64px;
    padding: 10px 12px 10px 16px;
  }

  .co-ronda {
    display: none;
  }

  .co-elegir-pie {
    padding: 12px 16px;
  }

  .co-factura > .fe-rotulo {
    padding: 16px 16px 12px;
  }

  .co-factura .t-ff-flecha {
    display: none;
  }

  /* El importe, en la fila del talón. Si la factura ya tiene correcciones,
     se queda debajo con su rótulo, que es el que lo dice. */
  .co-factura:not(.es-corregida) .t-ff-importe {
    display: block;
  }

  .co-factura:not(.es-corregida) .co-factura-importe {
    display: none;
  }

  .co-factura-importe {
    padding: 12px 16px 14px;
  }

  .co-desde {
    padding: 18px 16px;
  }

  .co-desde .t-boton {
    align-self: stretch;
    white-space: normal;
  }

  .co-elegido {
    gap: 12px;
    padding: 14px 16px;
  }

  .co-elegido h2 {
    font-size: 15px;
  }

  .co-campos {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 18px 16px 0;
  }

  /* Todo campo escribe a 16 px: por debajo, el iPhone amplía la página. */
  .co-campos input:not([type="radio"]),
  .co-hacienda .form-field > input {
    font-size: 16px;
  }

  .co-campos .co-euro > input {
    font-size: 17px;
  }

  /* La nota y el botón, dentro de la tarjeta y sin banda; el botón, a todo el ancho. */
  .co-pie {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 14px 16px 18px;
    background: none;
    border-top: 0;
  }

  .co-notas {
    flex: 0 0 auto;
  }

  .co-pie .t-boton {
    width: 100%;
    min-height: 52px;
    font-size: 16px;
  }

  .co-ajuste {
    gap: 14px;
    padding: 18px 16px;
  }

  .co-ajuste > div {
    gap: 6px;
  }

  .co-ir {
    margin-top: -4px;
  }

  .co-confirmar-cuerpo {
    gap: 12px;
    padding: 16px 16px 0;
  }

  .co-confirmar-pie {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px 16px;
    background: none;
    border-top: 0;
  }

  .co-confirmar-pie .t-boton {
    width: 100%;
  }

  .co-confirmar-pie .t-boton.es-principal {
    min-height: 52px;
    font-size: 16px;
  }
}
/* ── fin de la tanda 7 ── */

/* ── Tanda 6: el editor de una factura y la vista previa antes de emitir ──
   Propuesta visual de noviembre (mesas Editor, EditorVacio, EditorMovil,
   EditorEstados, VistaPrevia y VistaPreviaMovil). Sale de
   invoice-editor-ui.ts (el editor), de invoice-editor.js (lo que cambia
   mientras se escribe) y de trial-invoice-ui.ts (la vista previa). La hoja
   de la vista previa es la plantilla fiscal y no se toca: solo cambia lo que
   la rodea. Las reglas de más arriba («Rediseño · fase 1: editor…» y
   «…vista previa antes de emitir») siguen valiendo donde aquí no se dice
   otra cosa. */

/* La cabecera: la vuelta arriba; el título con su frase y, a su lado, el
   guardado y el «•••». */
.t-cabecera.ed-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  grid-template-areas:
    "volver volver volver"
    "titulo guardado menu"
    "estado guardado menu";
  align-items: end;
  gap: 0;
  margin-bottom: 24px;
}

.ed-cabecera > .fe-volver {
  grid-area: volver;
  justify-self: start;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

.ed-cabecera > h1 {
  grid-area: titulo;
  margin: 0 0 10px;
  font: 800 40px/1.02 var(--display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.ed-cabecera > .ed-estado {
  grid-area: estado;
  max-width: none;
  color: var(--tinta-2);
  font-size: 15px;
  line-height: 1.45;
}

.ed-cabecera > .ed-guardado {
  grid-area: guardado;
  margin-left: 24px;
}

.ed-cabecera > .ed-menu {
  grid-area: menu;
  margin-left: 12px;
}

.ed-cabecera > .ed-menu > summary {
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

.ed-menu .t-menu-mas-lista {
  min-width: 264px;
  border-radius: 14px;
}

.ed-menu .t-menu-mas-opcion {
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 9px;
}

.ed-menu .ed-confirmar.es-pequeno {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px 4px;
  color: var(--tinta-2);
  font-size: 13.5px;
}

.ed-menu .ed-confirmar.es-pequeno input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
}

/* «Guardado hace un momento»: es un botón (guarda ahora). Con su marca
   verde cuando está guardado y un punto mientras no. */
.ed-guardado {
  gap: 8px;
  min-height: 44px;
  padding: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  text-align: left;
}

.ed-guardado[data-estado] .ed-guardado-punto {
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  background: none;
  border-radius: 0;
}

.ed-guardado-punto > .t-icono {
  width: 18px;
  height: 18px;
  color: var(--safe);
}

.ed-guardado:not([data-estado="guardado"]) .ed-guardado-punto > .t-icono {
  display: none;
}

.ed-guardado:not([data-estado="guardado"]) .ed-guardado-punto::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--tinta-3);
  border-radius: 50%;
}

.ed-guardado[data-estado="error"] .ed-guardado-punto::before {
  background: var(--danger);
}

.ed-guardado[data-estado="nuevo"] .ed-guardado-punto {
  display: none;
}

/* En la barra, solo si no se ha podido guardar. */
.ed-guardado.es-barra:not([data-estado="error"]) {
  display: none;
}

/* Botón callado: lo que se puede hacer sin ser lo principal. */
.t-boton.ed-quieto {
  min-height: 44px;
  gap: 8px;
  padding: 0 18px;
  color: var(--tinta-2);
  font: 600 14.5px/1 var(--ui);
  background: transparent;
  border-color: var(--line);
  border-radius: 11px;
}

.t-boton.ed-quieto > .t-icono {
  width: 20px;
  height: 20px;
}

@media (hover: hover) {
  .t-boton.ed-quieto:hover {
    color: var(--tinta);
    border-color: var(--borde-control);
  }
}

/* La mesa: el formulario y, desde 1240 px, la hoja a su lado. */
.ed-mesa {
  gap: 28px;
}

.ed-hoja-columna {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
  max-width: 480px;
}

@media (min-width: 1100px) {
  .ed-mesa {
    grid-template-columns: minmax(0, 1fr);
  }

  .ed-hoja-columna {
    position: static;
  }
}

@media (min-width: 1240px) {
  .ed-mesa {
    grid-template-columns: minmax(0, 1fr) min(480px, 40%);
  }

  .ed-hoja-columna {
    position: sticky;
    top: 18px;
    max-width: none;
  }
}

/* El formulario, en una tarjeta: cada bloque es una franja. */
.ed-formulario {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 15px;
  line-height: 1.45;
  background: var(--papel);
  border: 1px solid transparent;
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.ed-formulario > .ed-bloque,
.ed-formulario > .ed-opcional {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  background: none;
  border: 0;
  border-radius: 0;
}

.ed-formulario > .ed-bloque:not(.es-cliente),
.ed-formulario > .ed-opcional,
.ed-formulario > .ed-anadidos,
.ed-formulario > .ed-avisos.es-general {
  border-top: 1px solid var(--line-soft);
}

.ed-formulario > .ed-avisos.es-general {
  padding: 16px 24px;
}

.ed-formulario .ed-rotulo,
.ed-barra .ed-rotulo {
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
}

.ed-formulario .ed-nota,
.ed-calcular .ed-nota {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.ed-calcular .ed-nota:empty {
  display: none;
}

/* Lo secundario dentro de la tarjeta va en tinta: el violeta es de «Emitir». */
.ed-formulario .ed-enlace {
  min-height: 32px;
  padding: 0;
  color: var(--tinta-2);
  font-size: 14px;
  text-decoration-color: currentColor;
}

/* Campos: 46 px, y 50 px los que llevan su etiqueta encima. */
.ed-formulario input:not([type="radio"]):not([type="checkbox"]),
.ed-formulario select,
.ed-formulario textarea,
.ed-calcular input {
  width: 100%;
  min-width: 0;
  min-height: 46px;
  padding: 0 14px;
  color: var(--tinta);
  font-size: 15px;
  background: var(--campo);
  border: 1px solid var(--borde-control);
  border-radius: 11px;
}

.ed-formulario textarea {
  min-height: 92px;
  padding: 12px 14px;
  line-height: 1.45;
}

.ed-formulario .ed-campo input:not([type="radio"]):not([type="checkbox"]),
.ed-formulario .ed-campo select,
.ed-formulario .ed-pop > input:not([type="radio"]):not([type="checkbox"]),
.ed-formulario .ed-vence-otro input:not([type="radio"]):not([type="checkbox"]),
.ed-calcular input {
  min-height: 50px;
}

.ed-formulario input:not([type="radio"]):not([type="checkbox"]):focus,
.ed-formulario select:focus,
.ed-formulario textarea:focus,
.ed-calcular input:focus {
  border-color: var(--foco);
}

.ed-formulario .ed-campo,
.ed-formulario .ed-motivo {
  gap: 6px;
}

.ed-formulario .ed-campo label,
.ed-formulario .ed-campo-rotulo,
.ed-formulario .ed-pop > label,
.ed-formulario .ed-motivo label,
.ed-formulario .ed-vence-otro,
.ed-formulario .ed-linea-descuento label,
.ed-calcular label {
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}

.ed-formulario .ed-campos {
  gap: 14px 10px;
}

/* Opciones cortas de un toque: pastillas, la marcada en tinta. */
.ed-formulario .ed-segmento {
  gap: 6px;
}

.ed-formulario .ed-segmento span {
  min-height: 44px;
  padding: 0 16px;
  color: var(--tinta-2);
  font: 600 14px/1 var(--ui);
  white-space: nowrap;
  background: var(--papel);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.ed-formulario .ed-segmento input:checked + span {
  color: var(--papel);
  font-weight: 600;
  background: var(--tinta);
  border-color: var(--tinta);
}

.ed-formulario .ed-segmento input:focus-visible + span {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ed-formulario .ed-segmento label:hover input:not(:checked) + span {
    color: var(--tinta);
    border-color: var(--borde-control);
  }
}

/* ── Cliente ── */
.ed-formulario .ed-cliente-elegido {
  gap: 16px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.ed-formulario .ed-cliente-elegido strong {
  overflow: visible;
  font-size: 17px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.ed-formulario .ed-cliente-elegido small {
  color: var(--tinta-2);
  font-size: 13.5px;
}

.ed-formulario .ed-cliente-elegido .t-boton {
  flex: none;
}

.ed-formulario .ed-buscador > input:not([type="radio"]):not([type="checkbox"]) {
  min-height: 50px;
  padding-left: 44px;
}

.ed-buscador-lupa {
  position: absolute;
  top: 15px;
  left: 14px;
  display: flex;
  color: var(--tinta-3);
  pointer-events: none;
}

.ed-buscador-lupa > .t-icono {
  width: 20px;
  height: 20px;
}

/* Las listas que se abren bajo un campo: clientes y conceptos guardados. */
.ed-formulario .ed-opciones {
  padding: 6px;
  border-radius: 14px;
}

.ed-formulario .ed-opcion {
  min-height: 44px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 9px;
}

.ed-formulario .ed-opcion[aria-selected="true"],
.ed-formulario .ed-opcion:hover {
  background: var(--papel-2);
}

.ed-formulario .ed-opcion small {
  color: var(--tinta-2);
  font-size: 13.5px;
}

.ed-formulario .ed-opcion.es-crear {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 4px;
  color: var(--tinta-2);
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 9px 9px;
}

.ed-formulario .ed-opcion.es-crear strong {
  color: inherit;
  font-weight: 500;
}

.ed-formulario .ed-opcion.es-crear > .t-icono {
  width: 20px;
  height: 20px;
}

.ed-formulario .ed-cliente-nuevo {
  min-width: 0;
  gap: 14px;
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.ed-formulario .ed-cliente-nuevo legend {
  margin-bottom: 10px;
  padding: 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.ed-formulario .ed-cliente-nuevo-acciones {
  justify-content: flex-start;
  gap: 10px 14px;
}

.ed-formulario .ed-cliente-nuevo-acciones .t-boton {
  min-height: 50px;
  border-radius: 11px;
}

/* ── La frase que se pulsa y sus opciones debajo ── */
.ed-frase {
  margin: 0;
  color: var(--tinta);
  font-size: 17px;
  line-height: 2;
}

.ed-frase .t-resumen-parte {
  display: inline;
  white-space: normal;
}

.ed-frase .ed-token {
  margin: 0;
  padding: 0 1px 1px;
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  line-height: 1.3;
  background: none;
  border: 0;
  border-bottom: 2px dotted var(--sello);
  border-radius: 0;
  cursor: pointer;
}

@media (hover: hover) {
  .ed-frase .ed-token:not(:disabled):hover {
    background: var(--sello-piel);
  }
}

.ed-frase .ed-token[aria-expanded="true"] {
  padding: 1px 6px;
  background: var(--sello-piel);
  border-bottom-style: solid;
  border-bottom-color: var(--sello);
  border-radius: 5px 5px 0 0;
}

/* Sin nada que elegir, es texto de la frase: sin subrayado. */
.ed-frase .ed-token:disabled {
  color: var(--tinta);
  border-bottom-color: transparent;
  cursor: default;
}

/* Un trozo que pide elegir («Tipo sin elegir», el IVA que hay que confirmar)
   va en el tono de aviso, el texto y el subrayado. */
.ed-frase .ed-token[data-falta] {
  color: var(--warning);
  border-bottom-color: var(--warning);
}

.ed-frase .ed-token[data-falta]:disabled {
  border-bottom-color: transparent;
}

.ed-formulario .ed-pop {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  background: var(--sello-piel);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}

.ed-formulario .ed-pop > [data-iva-opciones] {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ed-formulario .ed-pop input[type="date"] {
  max-width: 240px;
}

.ed-formulario .ed-pop > .ed-enlace {
  align-self: flex-start;
}

.ed-formulario .ed-vence-otro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.ed-formulario .ed-vence-otro input {
  max-width: 200px;
}

.ed-formulario .ed-opciones-radio {
  min-width: 0;
  gap: 8px;
}

.ed-formulario .ed-opciones-radio > legend {
  margin-bottom: 8px;
  padding: 0;
}

.ed-formulario .ed-opcion-radio {
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 12px;
  align-items: start;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.ed-formulario .ed-opcion-radio:has(input:checked) {
  padding: 11px 13px;
  background: var(--papel-2);
  border: 2px solid var(--tinta);
}

.ed-formulario .ed-opcion-radio input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
}

.ed-formulario .ed-opcion-radio small {
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── Conceptos: el concepto, la cantidad, el precio y su importe ── */
.ed-formulario .ed-lineas-cabecera,
.ed-formulario .ed-linea {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px 124px 112px 44px;
  gap: 8px 10px;
  align-items: center;
}

.ed-formulario .ed-lineas-cabecera {
  padding: 0;
  align-items: end;
}

.ed-formulario .ed-lineas-cabecera > span {
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-align: right;
  text-transform: uppercase;
}

.ed-formulario .ed-lineas {
  gap: 10px;
}

.ed-linea-importe {
  overflow: hidden;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ed-linea-importe[data-vacio] {
  color: var(--tinta-3);
  font-weight: 400;
}

.ed-formulario .ed-linea .t-menu-mas > summary {
  width: 44px;
  height: 44px;
  background: transparent;
  border-color: transparent;
  border-radius: 11px;
}

.ed-formulario .ed-linea .t-menu-mas > summary:hover,
.ed-formulario .ed-linea .t-menu-mas[open] > summary {
  background: var(--papel-2);
  border-color: var(--line);
}

.ed-formulario .ed-linea .t-menu-mas-lista {
  border-radius: 14px;
}

.ed-formulario .ed-linea .t-menu-mas-opcion {
  min-height: 44px;
  padding: 0 14px;
  font-size: 15px;
  border-radius: 9px;
}

.ed-formulario .ed-linea-descuento {
  gap: 12px;
  color: var(--tinta);
  font-size: 13.5px;
}

.ed-formulario .ed-linea-descuento input {
  max-width: 160px;
}

.ed-formulario .es-conceptos > .t-boton {
  align-self: flex-start;
  margin-top: 4px;
}

/* Columna estrecha (el móvil, o la tarjeta junto a la hoja en una ventana
   justa): el concepto en su fila y, debajo, la cantidad, el precio y el
   «•••». El importe de cada línea queda para la hoja y el total. */
@container (max-width: 520px) {
  .ed-formulario .ed-lineas-cabecera {
    display: block;
  }

  .ed-formulario .ed-lineas-cabecera > span,
  .ed-linea-importe {
    display: none;
  }

  .ed-formulario .ed-lineas {
    gap: 14px;
  }

  .ed-formulario .ed-linea {
    grid-template-columns: 64px minmax(0, 1fr) 44px;
    gap: 8px;
    padding-bottom: 0;
    border-bottom: 0;
  }

  .ed-formulario .ed-linea + .ed-linea {
    padding-top: 14px;
    border-top: 1px dashed var(--line);
  }

  .ed-formulario .ed-linea .ed-linea-texto {
    grid-column: 1 / -1;
  }

  .ed-formulario .ed-linea input.ed-linea-cantidad:not([type="radio"]):not([type="checkbox"]) {
    grid-column: 1;
    padding: 0 10px;
  }
}

/* ── Lo opcional: la fecha del trabajo, la nota y, al pie, lo que se añade ── */
.ed-formulario .ed-opcional-cabecera {
  gap: 12px;
}

.ed-formulario > .ed-sugerencia {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin: 0 24px 22px;
  padding: 12px 14px;
  color: var(--tinta-2);
  font-size: 13.5px;
  background: var(--papel-2);
  border-radius: 12px;
}

.ed-formulario > .ed-sugerencia q {
  margin-top: 4px;
  font-size: 15px;
}

.ed-formulario > .ed-sugerencia .t-boton {
  min-height: 40px;
}

.ed-formulario > .ed-anadidos {
  gap: 10px;
  padding: 14px 24px;
  background: var(--papel-2);
  border-radius: 0 0 calc(var(--radio-l) - 1px) calc(var(--radio-l) - 1px);
}

.ed-formulario > .ed-anadidos:not(:has(> button:not([hidden]))) {
  display: none;
}

/* ── La hoja en vivo, con el resto del talonario debajo ── */
.ed-pila {
  --pila-1: #f4f1ec;
  --pila-2: #ebe7e0;
  position: relative;
  isolation: isolate;
  min-width: 0;
}

.ed-pila::before,
.ed-pila::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 24px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(27, 24, 32, 0.16);
}

.ed-pila::after {
  right: 10px;
  bottom: -7px;
  left: 10px;
  background: var(--pila-1);
}

.ed-pila::before {
  right: 22px;
  bottom: -14px;
  left: 22px;
  background: var(--pila-2);
}

/* «Calcular a partir de lo que quiero recibir», bajo la hoja. */
.ed-calcular {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.ed-calcular-boton {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0;
  color: var(--tinta-2);
  font: 600 14px/1.3 var(--ui);
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

.ed-calcular-panel {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px;
  background: var(--papel);
  border: 1px solid transparent;
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.ed-calcular-fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}

.ed-calcular-fila input {
  font-weight: 600;
  text-align: right;
}

.ed-calcular-fila .t-boton {
  min-height: 50px;
  border-radius: 11px;
}

/* ── La barra del total, fija abajo ──
   Va pegada al borde de abajo de la ventana (position: sticky, como hasta
   ahora) y descansa al final de la página: así nunca tapa el último campo
   ni el pie del formulario. */
.ed-barra {
  display: block;
  padding-top: 16px;
  padding-bottom: 16px;
  border-top-color: var(--line-soft);
  box-shadow: 0 -14px 30px -24px rgba(27, 24, 32, 0.35);
}

.ed-barra-dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
}

.ed-barra-total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin: 0;
}

.ed-barra-total b {
  font: 800 32px/1.02 var(--display);
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.ed-barra-total[data-pendiente] b {
  color: var(--tinta-3);
}

.ed-barra-desglose,
.ed-barra-nota {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.ed-barra .ed-barra-acciones {
  flex: 1 1 auto;
  align-items: center;
  justify-content: flex-end;
  gap: 10px 12px;
}

.ed-barra .ed-barra-acciones .t-boton {
  min-height: 44px;
  padding: 0 18px;
  font: 600 14.5px/1 var(--ui);
  border-radius: 11px;
}

.ed-barra .ed-emitir-motivo,
.ed-barra .ed-barra-nota {
  flex: 0 1 auto;
  max-width: 300px;
  margin: 0;
  text-align: right;
}

.ed-barra .ed-emitir-motivo {
  color: var(--warning);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.45;
}

.ed-barra .ed-emitir-motivo a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ed-barra .ed-barra-aviso {
  font-size: 13.5px;
  line-height: 1.45;
}

/* Con «¿Emitir la factura?» abierta, el único violeta es el suyo. */
.ed-barra:has(+ .ed-dialogo[open]) [data-emitir] {
  color: var(--tinta);
  background: var(--papel);
  border-color: var(--borde-control);
  box-shadow: none;
}

/* ── «¿Emitir la factura?»: sale sobre la barra ── */
.ed-dialogo {
  width: min(460px, calc(100vw - 32px));
  margin: auto clamp(22px, 4vw, 54px) 96px auto;
  padding: 0;
  overflow: hidden;
  border-color: var(--line-soft);
  border-radius: var(--radio-l);
}

.ed-dialogo-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
}

.ed-dialogo .ed-dialogo-cuerpo h2 {
  margin: 0;
  font: 700 22px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.ed-dialogo .ed-dialogo-cuerpo p {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.ed-dialogo .ed-confirmar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.ed-dialogo .ed-confirmar input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
}

/* En el marcado «Cancelar» va primero, para que el foco no caiga en
   «Emitir factura» al abrirse; a la vista, «Emitir factura» va delante. */
.ed-dialogo .ed-dialogo-acciones {
  flex-direction: row-reverse;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 14px 20px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.ed-dialogo .ed-dialogo-acciones .t-boton {
  min-height: 50px;
  border-radius: 11px;
}

.ed-dialogo .ed-dialogo-acciones .t-boton.es-secundario {
  color: var(--tinta-2);
  background: transparent;
  border-color: var(--line);
}

/* ── La vista previa antes de emitir ──
   En el marcado, la hoja va entre las dos partes de la tarjeta (lo que se
   va a emitir y lo que hay que decidir), que es su orden en el móvil. */
.rv-cabecera > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.rv-cabecera .fe-volver {
  align-self: flex-start;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

.rv-cabecera h1 {
  margin: 0 0 8px;
  font: 800 40px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.rv-mesa {
  gap: 20px;
}

.rv-mesa > .rv-parte {
  min-width: 0;
  display: block;
  padding: 0;
  background: var(--papel);
  border: 1px solid transparent;
  border-radius: var(--radio-l);
  box-shadow: var(--shadow);
}

.rv-mesa > .rv-resumen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 24px 8px;
}

.rv-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
}

.rv-mesa .rv-total {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.rv-mesa .rv-total span {
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.rv-mesa .rv-total b {
  font: 800 46px/1.02 var(--display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

/* Sin importe todavía («Pendiente de revisión»), no es una cifra. */
.rv-cabeza[data-sin-importe] .rv-total b {
  color: var(--tinta-2);
  font-size: 24px;
  letter-spacing: -0.02em;
}

/* El estado, en su pastilla. */
.rv-mesa .rv-estado h2 {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px 4px 9px;
  color: var(--warning);
  font: 600 12.5px/1.25 var(--ui);
  letter-spacing: 0;
  white-space: nowrap;
  background: var(--warning-soft);
  border-radius: 999px;
}

.rv-mesa .rv-estado h2::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: currentColor;
  border-radius: 50%;
}

.rv-mesa .rv-estado.es-lista h2 {
  color: var(--safe);
  background: var(--safe-soft);
}

.rv-datos {
  display: flex;
  flex-direction: column;
  margin: 0;
}

.rv-datos > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.rv-datos dt {
  flex: none;
  color: var(--tinta-2);
}

.rv-datos dd {
  min-width: 0;
  margin: 0;
  text-align: right;
  overflow-wrap: anywhere;
}

.rv-datos dd strong {
  font-weight: 600;
}

.rv-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 24px 12px;
}

.rv-decidir form {
  margin: 0;
}

.rv-mesa .rv-nota,
.rv-mesa .rv-motivo {
  font-size: 13.5px;
  line-height: 1.45;
}

.rv-casilla {
  padding: 0 24px 12px;
}

.rv-casilla .ed-confirmar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-height: 44px;
  padding: 10px 0;
  font-size: 15px;
  font-weight: 600;
}

.rv-casilla .ed-confirmar input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
}

.rv-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 16px 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
  border-radius: 0 0 calc(var(--radio-l) - 1px) calc(var(--radio-l) - 1px);
}

.rv-pie .t-boton {
  min-height: 50px;
  border-radius: 11px;
}

.rv-pie .t-boton.es-principal {
  padding: 0 24px;
  font-size: 16px;
}

.rv-pie .t-boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* Bajo la hoja asoman dos más, como en la ficha. */
.rv-mesa > .rv-papel {
  --pila-1: #f4f1ec;
  --pila-2: #ebe7e0;
  position: relative;
  isolation: isolate;
  margin-bottom: 14px;
}

.rv-mesa > .rv-papel .final-invoice-sheet {
  max-width: none;
}

.rv-mesa > .rv-papel::before,
.rv-mesa > .rv-papel::after {
  content: "";
  position: absolute;
  z-index: -1;
  height: 24px;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(27, 24, 32, 0.16);
}

.rv-mesa > .rv-papel::after {
  right: 10px;
  bottom: -7px;
  left: 10px;
  background: var(--pila-1);
}

.rv-mesa > .rv-papel::before {
  right: 22px;
  bottom: -14px;
  left: 22px;
  background: var(--pila-2);
}

/* En escritorio, las dos partes forman una sola tarjeta a la izquierda y la
   hoja queda a la derecha. La segunda fila es flexible para que la hoja, que
   ocupa las dos, no separe una parte de la otra. */
@media (min-width: 1100px) {
  .rv-mesa {
    grid-template-columns: 360px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 0 28px;
  }

  .rv-mesa > .rv-resumen {
    grid-row: 1;
    grid-column: 1;
    border-bottom: 0;
    border-radius: var(--radio-l) var(--radio-l) 0 0;
  }

  .rv-mesa > .rv-papel {
    grid-row: 1 / span 2;
    grid-column: 2;
  }

  .rv-mesa > .rv-decidir {
    grid-row: 2;
    grid-column: 1;
    border-top: 0;
    border-radius: 0 0 var(--radio-l) var(--radio-l);
  }
}

@media (min-width: 1280px) {
  .rv-mesa {
    grid-template-columns: 440px minmax(0, 1fr);
  }
}

/* En oscuro las sombras no separan: borde fino, como el resto de tarjetas, y
   las hojas de debajo se atenúan como la de arriba. Escrito dos veces, como
   todos los valores de oscuro: el del sistema y el fijado a mano. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ed-formulario,
  :root:not([data-theme="light"]) .ed-calcular-panel,
  :root:not([data-theme="light"]) .rv-mesa > .rv-parte {
    border-color: var(--line-soft);
    box-shadow: none;
  }

  :root:not([data-theme="light"]) .ed-pila,
  :root:not([data-theme="light"]) .rv-mesa > .rv-papel {
    --pila-1: #c4bfcd;
    --pila-2: #aea9b9;
  }

  :root:not([data-theme="light"]) .ed-barra {
    box-shadow: 0 -14px 30px -24px rgba(0, 0, 0, 0.9);
  }
}

:root[data-theme="dark"] .ed-formulario,
:root[data-theme="dark"] .ed-calcular-panel,
:root[data-theme="dark"] .rv-mesa > .rv-parte {
  border-color: var(--line-soft);
  box-shadow: none;
}

:root[data-theme="dark"] .ed-pila,
:root[data-theme="dark"] .rv-mesa > .rv-papel {
  --pila-1: #c4bfcd;
  --pila-2: #aea9b9;
}

:root[data-theme="dark"] .ed-barra {
  box-shadow: 0 -14px 30px -24px rgba(0, 0, 0, 0.9);
}

/* ── El móvil ──
   El editor no lleva la barra de secciones: abajo va la barra del total,
   con «Vista previa» y «Emitir factura». La hoja no se enseña: está en
   «Vista previa». */
@media (max-width: 760px) {
  /* El editor tiene su propia cabecera: no lleva la franja de arriba. */
  .app-shell.sin-barra > .t-tope {
    display: none;
  }

  .t-cabecera.ed-cabecera {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "volver menu"
      "titulo titulo"
      "estado estado"
      "guardado guardado";
    align-items: center;
    margin-bottom: 14px;
  }

  .ed-cabecera > h1 {
    margin: 2px 0 6px;
    font-size: 30px;
  }

  .ed-cabecera > .ed-estado {
    font-size: 13.5px;
  }

  .ed-cabecera > .ed-guardado {
    justify-self: start;
    min-height: 32px;
    margin-left: 0;
  }

  .ed-cabecera > .ed-menu {
    margin-left: 8px;
  }

  .ed-mesa {
    gap: 14px;
  }

  .ed-pila {
    display: none;
  }

  .ed-hoja-columna {
    max-width: none;
  }

  .ed-formulario > .ed-bloque,
  .ed-formulario > .ed-opcional {
    padding: 16px;
  }

  .ed-formulario > .ed-avisos.es-general {
    padding: 12px 16px;
  }

  .ed-formulario > .ed-sugerencia {
    margin: 0 16px 16px;
  }

  .ed-frase {
    font-size: 16px;
  }

  /* Por debajo de 16 px, el iPhone amplía la página al tocar un campo. */
  .ed-formulario input:not([type="radio"]):not([type="checkbox"]),
  .ed-formulario select,
  .ed-formulario textarea,
  .ed-calcular input {
    font-size: 16px;
  }

  .ed-formulario > .ed-anadidos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
  }

  .ed-formulario > .ed-anadidos .t-boton {
    padding: 0 8px;
  }

  .ed-formulario > .ed-anadidos .t-boton > .t-icono {
    display: none;
  }

  .ed-calcular {
    margin: -4px 4px 0;
  }

  /* La barra: el total en una línea y, debajo, los dos botones. */
  .ed-barra {
    padding-top: 12px;
    padding-bottom: max(20px, calc(12px + env(safe-area-inset-bottom)));
  }

  .ed-barra-dentro {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .ed-barra-total {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 12px;
  }

  .ed-barra-total b {
    font-size: 28px;
  }

  .ed-barra-desglose,
  .ed-barra .ed-barra-nota {
    display: none;
  }

  .ed-barra .ed-barra-acciones {
    width: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 8px;
  }

  .ed-barra .ed-emitir-motivo {
    grid-column: 1 / -1;
    max-width: none;
    text-align: left;
  }

  .ed-barra .ed-barra-acciones .t-boton {
    min-height: 52px;
    padding: 0 8px;
  }

  .ed-barra .ed-barra-acciones .t-boton.es-principal {
    font-size: 16px;
  }

  .ed-dialogo {
    margin: auto 16px 16px;
  }

  .rv-cabecera h1 {
    margin: 2px 0 6px;
    font-size: 30px;
  }

  .rv-cabecera p {
    font-size: 13.5px;
    line-height: 1.45;
  }

  .rv-mesa {
    gap: 14px;
  }

  .rv-mesa > .rv-resumen {
    gap: 14px;
    padding: 18px 16px 8px;
  }

  .rv-mesa .rv-total {
    gap: 6px;
  }

  .rv-mesa .rv-total b {
    font-size: 40px;
  }

  .rv-cuerpo {
    padding: 16px 16px 4px;
  }

  .rv-casilla {
    padding: 0 16px 4px;
  }

  /* El botón, a todo el ancho; la vuelta ya está arriba. */
  .rv-pie {
    padding: 0 16px 16px;
    background: none;
    border-top: 0;
  }

  .rv-pie .t-boton {
    flex: 1 1 100%;
    min-height: 52px;
  }

  .rv-pie .rv-volver {
    display: none;
  }
}

/* Los últimos campos no quedan escondidos bajo la barra al pasar a ellos
   con el tabulador: en el móvil la barra es más alta. */
@media (max-width: 760px) {
  html:has(.ed-barra) {
    scroll-padding-bottom: 220px;
  }
}

/* ── fin de la tanda 6 ── */

/* ── Tanda 8: Clientes, la ficha de un cliente, los estados vacíos, los avisos y las páginas de error ──
   Propuesta de noviembre (mesas Clientes, ClientesMovil, Cliente,
   ClienteMovil, Vacios, AvisosErrores y NoEncontrada; el formulario de
   cliente, la pestaña LMM+ y el filtro de datos incompletos, descritos por
   el chat de diseño el 14-nov, con el molde de la subpágina tipo). Salen de
   clientes-ui.ts (clases cli-…), de las piezas de ui-components.ts
   (estadoVacio, vacioLinea, avisoFrase, avisoTemporal, errorGuardar y
   errorCampo) y de error-pages.ts. Las piezas comunes cambian de piel, no de
   marcado: valen para todas las pantallas. */

/* ── Estado vacío (mesa Vacios) ──
   Las dos hojas en blanco y la marca verde son de la tanda 4. Aquí, el
   título solo, la marca de «algo ha fallado» y el tamaño de página. */
.t-vacio > strong:last-child {
  margin-bottom: 4px;
}

.t-vacio-hecho.es-fallo {
  color: var(--danger);
  background: var(--danger-soft);
}

/* Un apartado de una lista, sin nada: una frase bajo su título. */
.t-vacio-linea {
  padding: 14px 24px 18px;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── Las páginas que no se abren (mesas AvisosErrores y NoEncontrada) ──
   El estado vacío a tamaño de página, centrado. Con sesión va en el panel,
   con su menú; sin sesión, o con el panel bloqueado, va sola. */
.t-pagina-error {
  display: grid;
  place-items: center;
  min-height: min(520px, 68vh);
}

.t-pagina-error.es-suelta {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px 16px;
  background: var(--mesa);
}

.t-vacio.es-pagina {
  width: min(100%, 560px);
  padding: 40px 24px;
  border-top: 0;
}

.t-vacio.es-pagina > .t-vacio-hojas,
.t-vacio.es-pagina > .t-vacio-hecho {
  margin-bottom: 18px;
}

.t-vacio.es-pagina h1 {
  margin: 0;
  font: 800 36px/1.06 var(--display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.t-vacio.es-pagina > p {
  max-width: 440px;
  margin: 10px auto 0;
  color: var(--tinta-2);
  font-size: 15px;
  line-height: 1.5;
}

.t-vacio > .t-boton {
  min-height: 44px;
}

.t-vacio.es-pagina > .t-boton {
  min-height: 50px;
  margin-top: 22px;
  padding: 0 22px;
  font-size: 15px;
  border-radius: 11px;
}

/* El panel bloqueado: su sello, sobre el título, y la referencia para avisar. */
.t-vacio.es-pagina > .mode-pill {
  min-height: 0;
  margin-bottom: 14px;
  padding: 5px 9px;
  color: var(--tinta-2);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  background: var(--papel-2);
  border: 1px solid var(--line);
  border-radius: 6px;
}

.t-vacio.es-pagina > .request-id {
  margin-top: 14px;
  color: var(--tinta-2);
  font: 500 12.5px/1.5 var(--mono);
  overflow-wrap: anywhere;
}

/* ── El aviso de una frase, en tres tonos (mesa AvisosErrores) ──
   Aviso y peligro, con su icono: un círculo con su admiración, dibujado
   aquí porque el marcado sigue siendo un punto. Neutro, sin icono. El
   texto va en tinta; el tono lo llevan el fondo, el borde y el icono. */
.t-aviso {
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  color: var(--tinta);
  font-size: 14.5px;
  line-height: 1.4;
  border: 1px solid transparent;
  border-radius: 14px;
}

.t-aviso.es-aviso {
  color: var(--tinta);
  background: var(--warning-soft);
  border-color: var(--warning-borde);
}

.t-aviso.es-peligro {
  color: var(--tinta);
  background: var(--danger-soft);
  border-color: var(--danger-borde);
}

.t-aviso.es-neutro {
  color: var(--tinta-2);
  background: var(--papel-2);
  border-color: var(--line);
}

.t-aviso.es-bien {
  background: var(--safe-soft);
  border-color: var(--safe-borde);
}

.t-aviso > .t-aviso-punto {
  position: relative;
  box-sizing: border-box;
  width: 20px;
  height: 20px;
  color: var(--warning);
  background: none;
  border: 1.8px solid currentColor;
  border-radius: 50%;
  transform: none;
}

.t-aviso > .t-aviso-punto::before,
.t-aviso > .t-aviso-punto::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 1.8px;
  background: currentColor;
  border-radius: 1px;
  transform: translateX(-50%);
}

.t-aviso > .t-aviso-punto::before {
  top: 3.4px;
  height: 6.4px;
}

.t-aviso > .t-aviso-punto::after {
  bottom: 3.2px;
  height: 1.8px;
}

.t-aviso.es-peligro > .t-aviso-punto {
  color: var(--danger);
}

/* Lo que ha salido bien lleva la marca de hecho, no la admiración. */
.t-aviso.es-bien > .t-aviso-punto {
  color: var(--safe);
}

.t-aviso.es-bien > .t-aviso-punto::before {
  top: 3.6px;
  left: 6.2px;
  width: 4px;
  height: 7.5px;
  background: none;
  border: solid currentColor;
  border-width: 0 1.8px 1.8px 0;
  border-radius: 0;
  transform: rotate(45deg);
}

.t-aviso.es-bien > .t-aviso-punto::after {
  display: none;
}

.t-aviso.es-neutro > .t-aviso-punto {
  display: none;
}

.t-aviso > .t-aviso-punto + span {
  flex: 1 1 180px;
  min-width: 0;
}

/* El enlace que lo arregla, como botón secundario, a la derecha; si no
   cabe, baja a su línea. */
.t-aviso > span:has(> .t-aviso-accion) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
}

.t-aviso .t-aviso-accion {
  display: inline-flex;
  flex: none;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 0 16px;
  color: var(--tinta);
  font: 600 14px/1.2 var(--ui);
  white-space: nowrap;
  text-decoration: none;
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: 10px;
}

@media (hover: hover) {
  .t-aviso .t-aviso-accion:hover {
    background: var(--papel-2);
    border-color: var(--tinta-3);
  }
}

/* ── El error al guardar un formulario: el sello «Revisa», como en la portada ── */
.t-error-guardar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 20px;
  padding: 12px 16px;
  color: var(--tinta);
  font-size: 15px;
  line-height: 1.35;
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
  border-radius: 12px;
}

.t-error-guardar > strong {
  min-width: 0;
  font-weight: 600;
}

.t-sello {
  flex: none;
  padding: 4px 8px;
  color: var(--danger);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 2px solid currentColor;
  border-radius: 6px;
  transform: rotate(-4deg);
}

/* ── El error de un campo: la frase bajo él, en el tono de peligro ── */
.field-error {
  color: var(--danger);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

/* ── El aviso de «Hecho» (mesa AvisosErrores) ──
   Flota abajo, centrado; en el móvil, sobre la barra y a todo el ancho
   (tanda 2). Delante, la marca de hecho, dibujada aquí. */
.t-aviso-temporal {
  gap: 12px;
  min-height: 52px;
  padding: 8px 10px 8px 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  border-radius: 14px;
}

.t-aviso-temporal::before {
  content: "";
  flex: none;
  width: 7px;
  height: 13px;
  margin: 0 5px 3px 4px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.t-aviso-temporal > [data-aviso-temporal-texto] {
  min-width: 0;
  margin-right: auto;
}

.t-aviso-temporal-deshacer {
  min-height: 36px;
  padding: 0 12px;
  color: var(--papel);
  font: 600 14px/1 var(--ui);
  border: 1px solid var(--tinta-3);
  border-radius: 9px;
}

.t-aviso-temporal-deshacer:hover {
  text-decoration: none;
  border-color: var(--papel);
}

.t-aviso-temporal-cerrar {
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

/* ── Clientes: la lista (mesas Clientes y ClientesMovil) ── */
.cli-cabecera {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
}

.cli-cabecera h1 {
  margin-bottom: 0;
  font-size: 44px;
  line-height: 1.02;
}

.cli-cabecera > .t-boton {
  min-height: 44px;
  padding-inline: 18px;
  font-size: 14.5px;
  border-radius: 11px;
}

.cli-deben {
  margin-top: 8px;
}

.cli-deben strong {
  color: var(--tinta);
  font-weight: 600;
  white-space: nowrap;
}

/* La barra: las pestañas, el buscador, el orden y el filtro de datos incompletos. */
.cli-barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.cli-barra .fa-pestanas {
  flex: none;
  flex-wrap: nowrap;
  gap: 2px;
  margin: 0;
  padding: 3px;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}

.cli-barra .fa-pestanas > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  color: var(--tinta-2);
  font: 600 14px/1.2 var(--ui);
  white-space: nowrap;
  text-decoration: none;
  border-radius: 10px;
}

.cli-barra .fa-pestanas > [aria-current] {
  color: var(--tinta);
  background: var(--elevado);
  box-shadow: 0 0 0 1px var(--line-soft), 0 6px 12px -10px rgba(27, 24, 32, 0.6);
}

@media (hover: hover) {
  .cli-barra .fa-pestanas > :not([aria-current]):hover {
    color: var(--tinta);
  }
}

.cli-barra .fa-numero {
  padding: 4px 6px;
  color: var(--tinta-2);
  font: 500 11.5px/1 var(--mono);
  background: var(--mesa);
  border-radius: 6px;
}

.cli-barra .fa-pestanas > [aria-current] .fa-numero {
  color: var(--papel);
  background: var(--tinta);
}

.cli-buscar {
  display: flex;
  flex: 1 1 260px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  margin: 0;
}

.cli-buscador {
  flex: 1 1 auto;
  gap: 10px;
  height: 50px;
  padding: 0 14px;
  background: var(--campo);
  border-radius: 11px;
}

.cli-buscador > .t-icono {
  width: 20px;
  height: 20px;
}

.cli-buscador input {
  font-size: 15px;
}

.cli-buscar .t-boton {
  min-height: 50px;
  border-radius: 11px;
}

/* El filtro de datos incompletos: en aviso y, puesto, lleno en tinta con su «Quitar». */
.cli-filtro {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  padding: 0 16px;
  color: var(--warning);
  font: 600 14px/1.2 var(--ui);
  white-space: nowrap;
  text-decoration: none;
  background: var(--warning-soft);
  border: 1px solid var(--warning-borde);
  border-radius: 999px;
}

.cli-filtro.es-puesto {
  padding-right: 6px;
  color: var(--papel);
  background: var(--tinta);
  border-color: var(--tinta);
}

.cli-filtro.es-puesto > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  color: var(--papel);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  border-radius: 999px;
}

.cli-filtro.es-puesto > a:focus-visible {
  outline-color: var(--papel);
}

@media (hover: hover) {
  a.cli-filtro:hover {
    border-color: var(--warning);
  }
}

/* Lo que se dice sobre la lista: una nota, o los avisos. */
.cli-avisos {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.cli-avisos > * {
  margin: 0;
}

.cli-nota {
  max-width: 72ch;
  padding-left: 4px;
  color: var(--tinta-2);
  font-size: 14.5px;
}

/* La tabla: la matriz con las iniciales y tres columnas con su rótulo. */
.cli-lista {
  container: clientes / inline-size;
}

.cli-cabeza,
.cli-fila {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 130px 150px 210px 24px;
  align-items: center;
  column-gap: 20px;
  padding: 0 20px 0 0;
}

.cli-cabeza.es-lmm,
.cli-fila.es-lmm {
  grid-template-columns: 76px minmax(0, 1fr) 190px 130px 24px;
}

.cli-cabeza {
  padding-block: 16px 12px;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cli-cabeza > .es-derecha {
  text-align: right;
}

.cli-filas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cli-filas > li {
  border-top: 1px solid var(--line-soft);
}

.cli-fila {
  min-height: 70px;
  color: var(--tinta);
  text-decoration: none;
}

.cli-fila:focus-visible {
  outline-offset: -3px;
}

/* En la tabla la matriz es la primera columna; no hay áreas con nombre. */
.cli-fila.t-talon > .t-matriz {
  grid-area: auto;
  margin-right: 0;
}

.cli-fila > .t-icono {
  width: 20px;
  height: 20px;
  color: var(--tinta-3);
  transition: transform 0.3s var(--salida), color 0.2s;
}

@media (hover: hover) {
  .cli-fila:hover {
    background: color-mix(in srgb, var(--papel-2) 55%, var(--papel));
  }

  .cli-fila:hover > .t-icono {
    color: var(--tinta);
    transform: translateX(2px);
  }
}

.cli-quien {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding-block: 12px;
}

/* El nombre ocupa dos líneas antes que cortarse. */
.cli-quien > strong {
  display: -webkit-box;
  overflow: hidden;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.cli-quien > small {
  color: var(--tinta-2);
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.cli-falta {
  color: var(--warning);
  font-weight: 600;
}

.cli-dato {
  min-width: 0;
  color: var(--tinta);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.cli-anio {
  text-align: right;
}

.cli-tiene {
  white-space: normal;
}

/* «Te debe»: la pastilla, solo si vence hoy o ya venció, y el importe. */
.cli-debe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 10px;
  padding-block: 8px;
}

.cli-debe > .t-estado {
  flex: none;
}

.cli-importe {
  font: 700 17px/1.2 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.cli-al-dia,
.cli-nada {
  color: var(--tinta-3);
}

/* El rótulo de cada dato: en la tabla lo dice la cabecera, y aquí queda
   para el lector de pantalla. En estrecho, el de la última factura se ve. */
.cli-etiqueta {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cli-sin-resultados {
  border-top: 1px solid var(--line-soft);
}

/* Con menos sitio (entre el móvil y el escritorio ancho), las columnas se aprietan. */
@container clientes (max-width: 980px) {
  .cli-cabeza,
  .cli-fila {
    grid-template-columns: 76px minmax(0, 1fr) 104px 118px 176px 20px;
    column-gap: 14px;
    padding-right: 14px;
  }

  .cli-cabeza.es-lmm,
  .cli-fila.es-lmm {
    grid-template-columns: 76px minmax(0, 1fr) 160px 104px 20px;
  }
}

/* ── La lista en estrecho (según su propio ancho, no el de la ventana) ──
   La matriz se estrecha; el nombre y, debajo, la última factura y lo que
   le falte; a la derecha, lo que te debe; y el estado, en su propia línea
   (tanda 2). «Este año» queda para la ficha. En LMM+, a la derecha va la
   última factura y «Qué tiene» baja a la línea del estado. */
@container clientes (max-width: 700px) {
  .cli-cabeza {
    display: none;
  }

  .cli-filas > li:first-child {
    border-top: 0;
  }

  .cli-fila,
  .cli-fila.es-lmm {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    column-gap: 12px;
    padding-right: 14px;
  }

  .cli-fila.t-talon > .t-matriz {
    grid-column: 1;
    grid-row: 1 / span 4;
  }

  .cli-fila > .t-icono,
  .cli-fila > .cli-anio {
    display: none;
  }

  .cli-quien {
    grid-column: 2;
    grid-row: 1;
    padding-block: 12px 0;
  }

  /* En Empresas, el detalle es la última factura; el país y el NIF están en la ficha. */
  .cli-fila:not(.es-lmm) .cli-donde,
  .cli-fila:not(.es-lmm):not(.es-incompleto) .cli-quien > small {
    display: none;
  }

  .cli-falta {
    display: inline-block;
  }

  .cli-falta::first-letter {
    text-transform: uppercase;
  }

  .cli-fila:not(.es-lmm) > .cli-ultima {
    grid-column: 2 / 4;
    grid-row: 2;
    padding-bottom: 12px;
    color: var(--tinta-2);
    font-size: 13.5px;
    white-space: normal;
  }

  .cli-fila:not(.es-lmm) > .cli-ultima.es-vacio {
    display: none;
  }

  .cli-fila:not(.es-lmm) > .cli-ultima > .cli-etiqueta {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .cli-fila:not(.es-lmm):has(> .cli-ultima.es-vacio) > .cli-quien {
    padding-bottom: 12px;
  }

  /* El importe (o «Al día»), arriba a la derecha; la pastilla, en su línea. */
  .cli-debe {
    display: contents;
  }

  .cli-debe > .cli-etiqueta {
    grid-column: 3;
    grid-row: 1;
  }

  .cli-debe > .cli-importe,
  .cli-debe > .cli-al-dia,
  .cli-debe > .cli-nada {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    padding-top: 12px;
    font-size: 16px;
    line-height: 1.3;
  }

  .cli-debe > .cli-al-dia,
  .cli-debe > .cli-nada {
    font-size: 15px;
  }

  .cli-debe > .t-estado {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-self: start;
    margin: -4px 0 12px;
  }

  .cli-fila.es-lmm > .cli-ultima {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    padding-top: 12px;
    color: var(--tinta-2);
    font-size: 13.5px;
    line-height: 1.5;
  }

  .cli-fila.es-lmm > .cli-ultima.es-vacio {
    display: none;
  }

  .cli-fila.es-lmm > .cli-tiene {
    grid-column: 2 / 4;
    grid-row: 2;
    padding-bottom: 12px;
    color: var(--tinta-2);
    font-size: 13.5px;
  }

  .cli-fila.es-lmm > .cli-quien {
    padding-bottom: 2px;
  }
}

/* ── La ficha de un cliente (mesas Cliente y ClienteMovil) ──
   La cabecera es la de la ficha de una factura (.fe-titular, tanda 5a). */
.cli-titular {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
}

.cli-titular .fe-cliente {
  margin-bottom: 8px;
}

/* Los avisos, entre la cabecera y lo demás, con su aire. */
.cli-titular ~ .t-aviso,
.cli-cabecera + .t-aviso {
  margin-bottom: 14px;
}

/* La tira de cifras: una tarjeta partida por el perforado. */
.cli-tira {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 24px;
  padding: 0;
  overflow: hidden;
  container-type: inline-size;
}

.cli-tira > div {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 22px 24px;
}

.cli-tira > div + div {
  border-left: 2px dotted var(--line);
}

.cli-tira dt,
.cli-rotulo {
  margin: 0;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.cli-tira dd {
  margin: 0;
}

/* La cifra mide 40 px y encoge con la tira, para que un importe normal
   quepa en su tercio; uno desmesurado se parte antes que cortarse. */
.cli-valor {
  font: 800 40px/1.02 var(--display);
  font-size: clamp(22px, calc((100cqi / 3 - 48px) / 5.9), 40px);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.cli-valor.es-texto {
  font-size: clamp(20px, calc((100cqi / 3 - 48px) / 8), 26px);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.cli-pie {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cli-pie > .es-aviso {
  color: var(--warning);
}

.cli-pie > .es-peligro {
  color: var(--danger);
}

/* En el móvil, las dos acciones van bajo la tira; en escritorio, en la cabecera. */
.cli-acciones-movil {
  display: none;
}

/* Sus facturas y, al lado, sus datos. */
.cli-mesa {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 24px;
}

.cli-facturas {
  flex: 999 1 560px;
  min-width: 0;
}

.cli-titulo {
  margin: 0;
  padding: 22px 22px 12px 24px;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.cli-facturas > .t-ffs > .t-talon:first-child {
  border-top: 1px solid var(--line-soft);
}

.cli-facturas > .t-vacio-linea {
  border-top: 1px solid var(--line-soft);
}

/* El pie de la tarjeta: «Ver sus 6 facturas», sobre papel más oscuro. */
.cli-todas {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 6px 20px;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.cli-todas:focus-visible {
  outline-offset: -3px;
}

@media (hover: hover) {
  .cli-todas:hover {
    color: var(--tinta);
  }
}

.cli-datos {
  display: flex;
  flex: 1 1 300px;
  flex-direction: column;
  gap: 16px;
  max-width: 380px;
  padding: 22px 24px;
}

.cli-datos > dl {
  margin: 0;
}

.cli-datos > dl > div + div {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.cli-datos dt {
  font-weight: 600;
}

.cli-datos dd {
  margin: 2px 0 0;
  color: var(--tinta-2);
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.cli-datos dd a {
  color: inherit;
}

/* ── Nuevo cliente y Editar datos: la subpágina tipo (mesa AjusteTipo) ──
   Una columna, la vuelta, el título y una sola tarjeta con sus bloques
   separados por una línea y, al pie, guardar. */
.cli-titular:has(+ .cli-form),
.cli-titular:has(+ .t-error-guardar),
.t-error-guardar:has(+ .cli-form),
.cli-form {
  max-width: 640px;
}

.cli-form {
  display: block;
  margin: 0;
}

.cli-bloque {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px 24px;
}

.cli-bloque + .cli-bloque:not([hidden]),
.cli-bloque[hidden] + .cli-bloque:not([hidden]) {
  border-top: 1px solid var(--line-soft);
}

.cli-bloque[hidden] {
  display: none;
}

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

.cli-campo {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.cli-campo.es-ancho {
  grid-column: 1 / -1;
}

.cli-campo > label:not(.cli-casilla),
.cli-campo > legend {
  display: block;
  margin: 0 0 6px;
  padding: 0;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
}

.cli-campo > input,
.cli-campo > select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px;
  color: var(--tinta);
  font: inherit;
  background-color: var(--campo);
  border: 1px solid var(--borde-control);
  border-radius: 11px;
}

@media (hover: hover) {
  .cli-campo > input:hover,
  .cli-campo > select:hover {
    border-color: var(--tinta-3);
  }
}

.cli-campo > input[aria-invalid="true"],
.cli-campo > select[aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

.cli-ayuda,
.cli-campo > .field-error {
  margin-top: 6px;
}

.cli-ayuda {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.cli-ayuda.es-aviso {
  color: var(--warning);
  font-weight: 600;
}

.cli-ayuda a,
.cli-campo > .field-error a {
  color: inherit;
}

/* Las opciones a la vista: las pastillas comunes (.t-opcion). */
.cli-opciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cli-opciones > .t-opcion:has(> input[aria-invalid="true"]) {
  border-color: var(--danger);
}

.cli-casilla {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  line-height: 1.45;
  cursor: pointer;
}

.cli-casilla > input {
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--tinta);
}

/* El pie: una nota y, a la izquierda, guardar; «Cancelar», un enlace. */
.cli-guardar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.cli-guardar > p {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.cli-guardar-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
}

.cli-guardar-acciones > .t-boton {
  min-height: 50px;
  padding: 0 24px;
  font-size: 15px;
  border-radius: 11px;
}

.cli-guardar-acciones > .t-enlace-suave {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
  font-weight: 600;
}

/* ── Anchos intermedios ── */
@media (max-width: 1000px) {
  .cli-tira > div {
    padding: 20px;
  }

  .cli-datos {
    max-width: none;
  }
}

/* ── Móvil (mesas ClientesMovil y ClienteMovil) ── */
@media (max-width: 760px) {
  .t-vacio.es-pagina {
    padding: 32px 8px;
  }

  .t-vacio.es-pagina h1 {
    font-size: 28px;
  }

  .t-vacio.es-pagina > .t-boton {
    width: 100%;
    max-width: 360px;
  }

  .t-error-guardar {
    margin-bottom: 14px;
  }

  .t-aviso {
    padding-left: 14px;
  }

  /* El título y, a su derecha, «Nuevo cliente»; debajo, la frase. El violeta
     es el «+» de la barra: «Nuevo cliente» pasa a secundario. */
  .cli-cabecera {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 14px;
  }

  .cli-cabecera > div {
    display: contents;
  }

  .cli-cabecera h1 {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    font-size: 34px;
  }

  .cli-cabecera > .cli-nuevo {
    grid-column: 2;
    grid-row: 1;
    color: var(--tinta);
    background: var(--papel);
    border-color: var(--borde-control);
    box-shadow: none;
  }

  .cli-deben {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }

  .cli-barra {
    gap: 10px;
    margin-bottom: 14px;
  }

  .cli-barra .cli-pestanas {
    flex: 1 1 100%;
  }

  .cli-barra .cli-pestanas > a {
    flex: 1 1 0;
    justify-content: center;
  }

  .cli-buscar {
    flex: 1 1 100%;
  }

  /* Todo campo escribe a 16 px: por debajo, el iPhone amplía la página. */
  .cli-buscador input,
  .cli-campo > input,
  .cli-campo > select {
    font-size: 16px;
  }

  .cli-titular {
    margin-bottom: 14px;
  }

  .cli-titular .cli-solo-ancho {
    display: none;
  }

  .cli-tira {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 14px;
  }

  .cli-tira > div {
    gap: 4px;
    padding: 14px 16px;
    border-top: 2px dotted var(--line);
  }

  .cli-tira > div + div {
    border-left: 0;
  }

  .cli-tira > div.es-principal {
    grid-column: 1 / -1;
    gap: 6px;
    padding: 18px 16px 16px;
    border-top: 0;
  }

  .cli-tira > div:last-child {
    border-left: 2px dotted var(--line);
  }

  .cli-tira > div:not(.es-principal) > .cli-valor {
    font: 700 20px/1.2 var(--display);
    letter-spacing: -0.01em;
  }

  .cli-tira > div.es-principal > .cli-valor {
    font-size: 40px;
  }

  .cli-tira > div.es-principal > .cli-valor.es-texto {
    font-size: 26px;
  }

  .cli-acciones-movil {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
  }

  .cli-acciones-movil > .t-boton {
    gap: 8px;
    min-height: 50px;
    font-size: 15px;
    border-radius: 11px;
  }

  .cli-acciones-movil > .t-boton > .t-icono {
    width: 20px;
    height: 20px;
  }

  .cli-mesa {
    gap: 14px;
  }

  .cli-facturas,
  .cli-datos {
    flex: 1 1 100%;
  }

  .cli-titulo {
    padding: 16px 16px 12px;
  }

  .cli-facturas > .t-vacio-linea {
    padding-inline: 16px;
  }

  .cli-datos {
    padding: 16px;
  }

  .cli-bloque {
    gap: 14px;
    padding: 16px;
  }

  .cli-campos {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .cli-guardar {
    padding: 14px 16px 16px;
  }

  .cli-guardar-acciones {
    flex-direction: column;
    align-items: stretch;
  }

  .cli-guardar-acciones > .t-boton {
    min-height: 52px;
    font-size: 16px;
  }

  .cli-guardar-acciones > .t-enlace-suave {
    justify-content: center;
  }
}

/* ── fin de la tanda 8 ── */

/* ── Tanda 9b: Ajustes y sus subpáginas ──
   Propuesta de noviembre (mesas Ajustes, AjusteTipo y AjustesSubpaginas, con
   sus «…Movil»). La página de Ajustes sale de settingsPage y cada subpágina,
   de subpaginaAjuste (settings-ui.ts): la vuelta a Ajustes, el título, una
   frase y la tarjeta con su pie. Las montan settings-ui.ts (vencimiento,
   territorios y ventas a la UE), editor-ui.ts (datos fiscales, conceptos y
   numeración), payment-profile-ui.ts (formas de cobro), stripe-ui.ts,
   local-operations-routes.ts (copias de seguridad) y
   panel-password-routes.ts (contraseña). Todo lo de aquí empieza por «as-»;
   «Facturación real» sigue con los «aj-» de antes, hasta su tanda. */

/* La página: el índice y las subpáginas comparten eje (1180 px, centrado). */
.as-pagina {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.45;
}

.as-pagina > * {
  min-width: 0;
  margin-block: 0;
}

/* En una subpágina, la cabecera y la tarjeta miden lo mismo: 760 px. */
.as-pagina:not(.as-indice) > * {
  width: 100%;
  max-width: 760px;
}

.as-cabecera {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.as-cabecera .fe-volver {
  align-self: flex-start;
  min-height: 44px;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 600;
}

.as-titulos {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.as-titulos h1 {
  margin: 0;
  font: 800 40px/1.02 var(--display);
  letter-spacing: -0.035em;
  overflow-wrap: anywhere;
}

.as-indice .as-titulos h1 {
  font-size: 44px;
}

.as-titulos p {
  max-width: 760px;
  margin: 0;
  color: var(--tinta-2);
}

/* «Te faltan 2 cosas por decidir…»: cada cosa lleva a su ajuste. */
.as-por-decidir a {
  color: var(--sello);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* Rótulo pequeño de un grupo o de un apartado. */
.as-rotulo {
  margin: 0;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* Etiqueta de un grupo de opciones, como la de un campo. */
.as-etiqueta,
.as-tarjeta legend.as-etiqueta {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--tinta);
  font: 600 13.5px/1.3 var(--ui);
}

.as-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── Ajustes: dos columnas independientes ── */
.as-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.as-columna {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

@media (min-width: 960px) {
  .as-columnas {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.as-grupo {
  padding: 0;
  overflow: hidden;
}

.as-grupo > .as-rotulo {
  padding: 20px 24px 12px;
}

.as-grupo > .t-fila-lista,
.as-grupo > .t-fila-lista:first-child {
  grid-template-columns: minmax(0, 1fr) auto 20px;
  gap: 0 14px;
  min-height: 60px;
  padding: 8px 20px 8px 24px;
  border-top: 1px solid var(--line-soft);
}

.as-grupo .t-fila-lista strong {
  font-size: inherit;
}

.as-grupo .t-fila-lista-valor {
  max-width: 100%;
  color: var(--tinta-2);
  font-size: inherit;
  overflow: hidden;
  text-overflow: ellipsis;
}

.as-grupo .t-fila-lista-valor .t-estado {
  vertical-align: middle;
}

.as-grupo .t-fila-lista > .t-icono {
  width: 20px;
  height: 20px;
}

/* Como las filas de las listas: solo un tinte suave, y solo con ratón. */
.as-grupo > .t-fila-lista:hover {
  background: transparent;
}

@media (hover: hover) {
  .as-grupo > .t-fila-lista:hover {
    background: color-mix(in srgb, var(--papel-2) 55%, var(--papel));
  }
}

/* El tema: el rótulo y, a su derecha, las tres opciones. Sin JavaScript el
   selector no puede hacer nada y nace oculto: la tarjeta tampoco se enseña. */
.as-tema {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 14px 16px 14px 24px;
}

.as-tema:has(> [data-selector-tema][hidden]) {
  display: none;
}

.as-tema > strong {
  font-weight: 600;
}

.as-tema .t-segmento {
  flex-wrap: nowrap;
  max-width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}

.as-tema .t-segmento-opcion span {
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  border-radius: 10px;
}

.as-tema .t-segmento-opcion input:checked + span {
  background: var(--elevado);
  box-shadow: 0 0 0 1px var(--line-soft), 0 6px 12px -10px rgba(27, 24, 32, 0.6);
}

/* «Salir», al final de Ajustes: solo en el móvil. En escritorio está en el
   menú lateral, y lo que no se ve tampoco recibe el foco. */
.as-salir {
  display: none;
}

.as-salir-boton {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 16px;
  color: var(--tinta);
  font: 600 15px/1.2 var(--ui);
  text-align: left;
  cursor: pointer;
}

.as-salir-boton .t-ico {
  width: 22px;
  height: 22px;
  color: var(--tinta-2);
}

.as-salir-boton:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

/* ── La tarjeta de una subpágina: cuerpo, franjas y pie ── */
.as-tarjeta {
  display: block;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.as-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 24px;
}

.as-cuerpo > * {
  min-width: 0;
  margin-block: 0;
}

.as-franja {
  border-top: 1px solid var(--line-soft);
}

/* El pie, sobre papel más oscuro: el botón y, si la hay, una nota. */
.as-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin: 0;
  padding: 16px 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.as-pie > .as-nota {
  flex: 1 1 240px;
}

p.as-pie {
  display: block;
  max-width: none;
}

.as-pie > form {
  display: contents;
}

/* Lo que va debajo de la tarjeta, suelto. */
.as-bajo {
  padding-inline: 4px;
}

/* Botones: 50 px el principal de un pie; los demás, 44. */
.as-pagina .t-boton {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
  border-radius: 11px;
}

.as-pagina .t-boton.es-principal {
  min-height: 50px;
  padding: 0 24px;
  font-size: 15px;
}

.as-pagina .t-boton > .t-icono {
  width: 18px;
  height: 18px;
}

.as-pagina .t-boton:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

/* El botón que no pesa: «Editar», «Comprobar conexión», «Cambiar». */
.as-pagina .t-boton.as-quieto {
  color: var(--tinta-2);
  background: transparent;
  border-color: var(--line);
}

@media (hover: hover) {
  .as-pagina .t-boton.as-quieto:hover {
    color: var(--tinta);
    background: transparent;
    border-color: var(--borde-control);
  }
}

/* Una acción en texto: «Archivar», «Cancelar», «Volver». */
.as-accion {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
  color: var(--tinta-2);
  font: 600 14px/1.2 var(--ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.as-accion.es-peligro {
  color: var(--danger);
}

@media (hover: hover) {
  .as-accion:hover {
    color: var(--tinta);
  }

  .as-accion.es-peligro:hover {
    color: var(--danger);
    text-decoration-thickness: 2px;
  }
}

/* ── Campos: 50 px, con la etiqueta encima ── */
.as-campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px 16px;
  min-width: 0;
}

.as-campos.es-dos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.as-campos > .as-rotulo,
.as-campos > fieldset,
.as-campos > .t-reglas,
.as-campos > .as-acciones,
.as-campos > .as-nota,
.as-campos > .form-error,
.as-campos > .as-casilla {
  grid-column: 1 / -1;
}

.as-tarjeta .field {
  display: block;
  min-width: 0;
  margin: 0;
}

.as-tarjeta .field > label,
.as-tarjeta .field:focus-within > label {
  display: block;
  margin: 0 0 6px;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
}

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

.as-tarjeta .field input,
.as-tarjeta .field textarea,
.as-tarjeta .field input:not([readonly]):not(:focus),
.as-tarjeta .field textarea:not(:focus) {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 50px;
  padding: 0 14px;
  color: var(--tinta);
  font: inherit;
  background: var(--campo);
  border: 1px solid var(--borde-control);
  border-radius: 11px;
}

.as-tarjeta .field textarea,
.as-tarjeta .field textarea:not(:focus) {
  padding: 13px 14px;
  line-height: 1.4;
  resize: vertical;
}

.as-tarjeta .field input:focus,
.as-tarjeta .field textarea:focus {
  border-color: var(--foco);
}

.as-tarjeta .field [aria-invalid="true"],
.as-tarjeta .field [aria-invalid="true"]:not(:focus) {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px var(--danger);
}

.as-tarjeta .field input::placeholder,
.as-tarjeta .field textarea::placeholder {
  color: var(--tinta-3);
}

.as-tarjeta .field .t-clave input {
  padding-right: 52px;
}

.as-tarjeta .field .t-ver-clave {
  width: 44px;
  height: 44px;
}

.as-tarjeta .field-hint,
.as-tarjeta .field-error,
.as-tarjeta .field > small {
  display: block;
  max-width: 68ch;
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.45;
}

.as-tarjeta .field-hint,
.as-tarjeta .field > small {
  color: var(--tinta-2);
}

.as-tarjeta .field-error {
  color: var(--danger);
  font-weight: 600;
}

/* El importe se escribe a la derecha. */
.as-tarjeta .field.es-importe input {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Un dato que no se cambia (el país): texto, no un campo. */
.as-tarjeta .field.as-fijo input,
.as-tarjeta .field.as-fijo input:not(:focus) {
  padding: 0;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  cursor: default;
}

/* Las dos comprobaciones de la contraseña, una debajo de otra. */
.as-tarjeta .t-reglas {
  flex-direction: column;
  gap: 6px;
}

.as-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

/* Una casilla suelta con su frase («Sincronizar automáticamente»). */
.as-casilla {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin: 0;
  color: var(--tinta);
  font-size: inherit;
  font-weight: 400;
}

.as-casilla input {
  width: 20px;
  height: 20px;
  flex: none;
  margin: 0;
  accent-color: var(--sello);
}

/* ── Opciones a la vista, una por fila ── */
.as-grupo-opciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.as-grupo-opciones > legend.as-etiqueta {
  margin-bottom: 12px;
}

.as-grupo-opciones > legend.as-etiqueta + * {
  margin-top: 0;
}

.as-elecciones {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.as-eleccion {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 0 12px;
  align-items: start;
  min-height: 52px;
  margin: 0;
  padding: 12px 14px;
  color: var(--tinta);
  font-weight: 400;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
}

.as-eleccion:has(input:checked) {
  padding: 11px 13px;
  background: var(--papel-2);
  border: 2px solid var(--tinta);
}

.as-eleccion:has(input:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.as-eleccion input {
  width: 20px;
  height: 20px;
  min-height: 0;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--sello);
}

.as-eleccion strong {
  display: block;
  font-weight: 600;
}

.as-eleccion small {
  display: block;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── Datos de consulta: qué es y su valor ── */
.as-datos {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.as-datos > .as-nota {
  padding: 0 0 12px;
}

.as-datos > .as-restauracion {
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
}

.as-dato {
  display: flex;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.as-dato-etiqueta {
  min-width: 0;
  margin: 0;
  color: var(--tinta-2);
}

.as-dato-etiqueta a {
  color: var(--tinta);
  font-weight: 600;
  text-underline-offset: 3px;
}

.as-dato-etiqueta small {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
}

.as-dato-valor {
  flex: none;
  max-width: 60%;
  text-align: right;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* El nombre de lo que se mira y, a su derecha, su estado. */
.as-titular {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 12px;
}

.as-titular > div {
  min-width: 0;
}

.as-titular h2 {
  margin: 0;
  font: 600 15px/1.45 var(--ui);
  overflow-wrap: anywhere;
}

.as-titular .t-estado {
  flex: none;
}

/* Una tarjeta que es un enlace: «Clave de la cuenta». */
a.as-enlace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  gap: 12px;
  align-items: center;
  padding: 16px 16px 16px 24px;
  color: var(--tinta);
  text-decoration: none;
}

.as-enlace strong {
  display: block;
  font-weight: 600;
}

.as-enlace small {
  display: block;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.as-enlace > .t-icono {
  width: 20px;
  height: 20px;
  color: var(--tinta-3);
  transition: transform 0.3s var(--salida), color 0.2s;
}

a.as-enlace:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

@media (hover: hover) {
  a.as-enlace:hover > .t-icono {
    color: var(--tinta);
    transform: translateX(2px);
  }
}

/* ── El interruptor: una casilla con forma de pastilla, en tinta ── */
.as-interruptor {
  appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 30px;
  margin: 0;
  background: var(--pista);
  border: 1px solid var(--borde-control);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.as-interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: var(--papel);
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(27, 24, 32, 0.35);
  transition: transform 160ms ease;
}

.as-interruptor:checked {
  background: var(--tinta);
  border-color: var(--tinta);
}

.as-interruptor:checked::after {
  transform: translateX(22px);
}

.as-interruptor:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .as-interruptor,
  .as-interruptor::after {
    transition: none;
  }
}

.as-interruptor-fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.as-interruptor-fila > div {
  min-width: 0;
}

.as-interruptor-titulo {
  display: block;
  margin: 0;
  color: var(--tinta);
  font: 600 15px/1.45 var(--ui);
  cursor: pointer;
}

.as-emision > .as-cuerpo {
  padding-block: 16px;
}

/* ── Canarias, Ceuta y Melilla: un interruptor por territorio ── */
.as-territorio {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--line-soft);
}

.as-territorios > .as-territorio:first-of-type {
  border-top: 0;
}

.as-territorio-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  cursor: pointer;
}

.as-territorio-texto {
  min-width: 0;
}

.as-territorio-texto strong {
  display: block;
  font-weight: 600;
}

.as-territorio-texto small {
  display: block;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* La fecha solo sale en el territorio activado. */
.as-tarjeta .as-territorio-fecha {
  display: none;
  max-width: 280px;
}

.as-tarjeta .as-territorio:has(.as-interruptor:checked) .as-territorio-fecha,
.as-tarjeta .as-territorio.es-error .as-territorio-fecha {
  display: block;
}

/* ── Ventas a la UE: el año anterior solo sirve con «IVA español» ── */
.as-ue-anterior {
  display: none;
  gap: 14px;
}

.as-ventas-ue:has(input[name="modo"][value="origin_confirmed"]:checked) .as-ue-anterior,
.as-ue-anterior.es-error {
  display: flex;
}

.as-ue-anterior .as-nota {
  margin-top: 6px;
}

/* ── Vencimiento: las frases ──
   El trozo que dice el valor va en negrita y sin subrayado: hoy no hay nada
   que elegir (como el trozo sin opciones de la frase del editor). */
.as-frase {
  margin: 0;
  color: var(--tinta);
  font-size: 16px;
  line-height: 2;
}

.as-frase strong {
  font-weight: 600;
}

.as-frase + .as-nota {
  margin-top: -8px;
}

.as-otros {
  display: flex;
  flex-direction: column;
}

.as-otros > .as-dato-etiqueta {
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.as-otros > .as-dato {
  padding-left: 14px;
}

/* ── Listas dentro de una tarjeta: formas de cobro y conceptos ── */
.as-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.as-cobro,
.as-concepto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  padding: 14px 20px 14px 24px;
  border-top: 1px solid var(--line-soft);
}

.as-lista > li:first-child {
  border-top: 0;
}

.as-cobro-texto,
.as-concepto-texto {
  flex: 1 1 200px;
  min-width: 0;
}

.as-cobro-texto strong,
.as-concepto-texto strong {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.as-cobro-texto small,
.as-concepto-texto small {
  display: block;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.as-cobro.es-apagado .as-cobro-texto strong,
.as-concepto.es-apagado .as-concepto-texto strong {
  color: var(--tinta-3);
}

.as-cobro .t-destino {
  font-family: var(--mono);
  font-size: 0.93em;
}

.as-cobro-acciones,
.as-concepto-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  margin-left: auto;
}

.as-cobro-acciones form,
.as-concepto-acciones form {
  display: inline-flex;
  margin: 0;
}

.as-lista-cabeza {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 6px 24px;
  border-bottom: 1px solid var(--line-soft);
}

.as-concepto-marca {
  display: flex;
  flex: none;
  align-items: center;
}

.as-concepto-importe {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* «Eliminar» se abre bajo su fila, a todo el ancho: una caja con su
   advertencia y el botón. El propio «Eliminar» la vuelve a cerrar. */
.as-eliminar > summary {
  list-style: none;
}

.as-eliminar > summary::-webkit-details-marker {
  display: none;
}

.as-concepto:has(.as-eliminar[open]) .as-concepto-acciones {
  flex: 1 1 100%;
  justify-content: flex-end;
}

.as-eliminar[open] {
  flex: 1 1 100%;
  padding: 0 14px 12px;
  background: var(--danger-soft);
  border: 1px solid var(--danger-borde);
  border-radius: 12px;
}

.as-eliminar form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 14px;
  width: 100%;
}

.as-eliminar p {
  flex: 1 1 240px;
  margin: 0;
  color: var(--tinta);
  font-size: 13.5px;
  line-height: 1.45;
}

.as-conceptos > .t-vacio {
  border-top: 0;
}

.as-conceptos > .t-paginacion {
  margin: 0;
  padding: 12px 24px;
  border-top: 1px solid var(--line-soft);
}

/* Las pestañas y la barra del lote, sobre la tarjeta. */
.as-pagina > .t-pestanas,
.as-pagina > .t-lote {
  margin-bottom: 0;
}

/* ── Un concepto: el tipo en pastillas y cómo entrará en la factura ── */
.as-tipos {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.as-tipos > legend {
  margin: 0 0 8px;
  padding: 0;
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
}

.as-tipos > legend small {
  display: block;
  margin-top: 2px;
  color: var(--tinta-2);
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.45;
}

.as-pastillas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* La frase de cada tipo va detrás de su pastilla; se enseña, bajo todas, la
   del tipo marcado. */
.as-tipo-pista {
  display: none;
  order: 1;
  flex: 1 1 100%;
  margin: 2px 0 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.as-pastillas > .t-opcion:has(> input:checked) + .as-tipo-pista {
  display: block;
}

.as-vista-linea {
  gap: 8px;
}

.as-vista-linea-fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.as-vista-linea-fila > span {
  min-width: 0;
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

.as-vista-linea-fila > b {
  flex: none;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Numeración: cada una, con su número en DM Mono ── */
.as-numeracion {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 24px;
  border-top: 1px solid var(--line-soft);
}

.as-tarjeta > .sr-only + .as-numeracion {
  border-top: 0;
}

.as-numeracion strong {
  font-weight: 600;
}

.as-numeracion small {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.as-numero {
  overflow-wrap: anywhere;
}

/* ── Copias de seguridad: la cifra y lo que la sostiene ── */
.as-cifra {
  margin: -6px 0 0;
  font: 800 30px/1.1 var(--display);
  letter-spacing: -0.035em;
}

.as-cifra.es-peligro {
  color: var(--danger);
}

.as-hecho {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}

.as-hecho strong {
  display: block;
  font-weight: 600;
}

.as-hecho small {
  display: block;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.as-hecho small.as-estado-copias {
  margin-top: 4px;
  color: var(--tinta);
}

.as-ronda {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  color: var(--tinta-2);
  background: var(--papel-2);
  border-radius: 50%;
}

.as-ronda > .t-icono {
  width: 18px;
  height: 18px;
}

.as-ronda.es-bien {
  color: var(--safe);
  background: var(--safe-soft);
}

.as-ronda.es-aviso {
  color: var(--warning);
  background: var(--warning-soft);
}

.as-ronda.es-peligro {
  color: var(--danger);
  background: var(--danger-soft);
}

.as-tarjeta .ledger-disclosure {
  margin: 0;
}

/* ── La clave de la cuenta: guardada, y «Cambiar» abre el formulario ── */
.as-cambiar {
  border-top: 1px solid var(--line-soft);
}

.as-cambiar > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0 2px;
  list-style: none;
  cursor: pointer;
}

.as-cambiar > summary::-webkit-details-marker {
  display: none;
}

.as-cambiar-texto {
  min-width: 0;
}

.as-cambiar-texto strong {
  display: block;
  font-weight: 600;
}

.as-cambiar-texto small {
  display: block;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.as-cambiar > summary:focus-visible {
  outline: none;
}

.as-cambiar > summary:focus-visible .t-boton {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.as-cambiar[open] > summary .t-boton {
  color: var(--tinta);
  border-color: var(--borde-control);
}

.as-cambiar-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 14px;
}

.as-cambiar-cuerpo > * {
  margin-block: 0;
}

/* Los avisos de arriba (guardado, error) no llevan margen propio aquí. */
.as-pagina > .notice,
.as-pagina > .form-error,
.as-pagina > .stripe-notice,
.as-pagina > .field-error {
  margin: 0;
}

/* ── Móvil (mesas AjustesMovil y AjusteTipoMovil) ── */
@media (max-width: 760px) {
  .as-pagina {
    gap: 14px;
  }

  .as-cabecera {
    padding-inline: 4px;
  }

  .as-cabecera .fe-volver {
    margin-left: -4px;
  }

  .as-titulos {
    gap: 6px;
  }

  .as-titulos h1 {
    font-size: 30px;
  }

  .as-indice .as-titulos h1 {
    font-size: 34px;
  }

  .as-pagina:not(.as-indice) .as-titulos p {
    font-size: 13.5px;
    line-height: 1.45;
  }

  /* Seguidas, con el tema al final y «Salir» debajo. */
  .as-columnas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .as-columna {
    display: contents;
  }

  .as-tema {
    order: 1;
    flex-direction: column;
    align-items: stretch;
    padding: 14px 16px;
  }

  .as-tema .t-segmento {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .as-tema .t-segmento-opcion span {
    padding: 0 6px;
  }

  .as-salir {
    display: block;
  }

  .as-grupo > .as-rotulo {
    padding: 16px 16px 10px;
  }

  .as-grupo > .t-fila-lista,
  .as-grupo > .t-fila-lista:first-child {
    gap: 0 10px;
    min-height: 56px;
    padding: 8px 12px 8px 16px;
  }

  .as-grupo .t-fila-lista-valor {
    font-size: 13.5px;
  }

  .as-cuerpo {
    gap: 10px;
    padding: 16px;
  }

  .as-pie {
    padding: 14px 16px 16px;
  }

  /* El botón del pie, a todo el ancho; la nota y la salida, debajo. */
  .as-pie > .t-boton,
  .as-pie > form > .t-boton,
  .as-acciones > .t-boton {
    flex: 1 1 100%;
    min-height: 52px;
    font-size: 16px;
  }

  .as-pie > .as-accion {
    flex: 1 1 100%;
    justify-content: center;
  }

  .as-campos.es-dos {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Todo campo escribe a 16 px: por debajo, el iPhone amplía la página. */
  .as-tarjeta .field input,
  .as-tarjeta .field textarea,
  .as-tarjeta .field input:not([readonly]):not(:focus),
  .as-tarjeta .field textarea:not(:focus) {
    font-size: 16px;
  }

  .as-territorio {
    padding: 14px 16px;
  }

  .as-tarjeta .as-territorio-fecha {
    max-width: none;
  }

  .as-cobro,
  .as-concepto {
    padding: 14px 16px;
  }

  .as-lista-cabeza {
    padding-inline: 16px;
  }

  .as-conceptos > .t-paginacion {
    padding-inline: 16px;
  }

  .as-numeracion {
    padding-inline: 16px;
  }

  a.as-enlace {
    padding: 16px 12px 16px 16px;
  }

  .as-dato-valor {
    max-width: 55%;
  }

  .as-otros > .as-dato {
    padding-left: 0;
  }
}

/* ── fin de la tanda 9b ── */

/* ── Tanda 9a: Informes ──
   Propuesta de noviembre (mesas Informes, InformesMovil y el estado vacío de
   Vacios; lo no dibujado, descrito por el chat de diseño el 14-nov). Arriba,
   «Mes» o «Trimestre» y el periodo con flechas. La tarjeta principal es el
   paquete para la gestoría: una fila por documento, con su tipo en la
   matriz. Al lado, las columnas del año y los registros de Hacienda; debajo,
   «Tus facturas», «Ventas de la web», «Mes a mes» en un trimestre y lo
   pendiente de cobro. Clases `inf-`: las `if-` de antes quedan sin uso. */

.inf-cabecera {
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px 24px;
  margin-bottom: 24px;
}

.inf-cabecera h1 {
  margin: 0;
  font: 800 44px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.inf-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* «Mes» y «Trimestre»: dos opciones, como «Qué compró» en una venta web.
   Son enlaces, así que la elegida es `aria-current`. */
.inf-tipo {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}

.inf-tipo a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 10px;
}

.inf-tipo a[aria-current="page"] {
  color: var(--tinta);
  background: var(--elevado);
  box-shadow: 0 0 0 1px var(--line-soft), 0 6px 12px -10px rgba(27, 24, 32, 0.6);
}

/* El periodo, con flechas, como el año en Facturas. */
.inf-paso {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}

.inf-paso > strong {
  min-width: 164px;
  padding: 0 6px;
  font: 700 16px/1 var(--display);
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}

.inf-paso-flecha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--tinta-2);
  border-radius: 10px;
}

.inf-paso-flecha > .t-icono {
  width: 20px;
  height: 20px;
}

.inf-paso-flecha.is-inerte {
  opacity: 0.45;
}

@media (hover: hover) {
  .inf-tipo a:not([aria-current="page"]):hover,
  a.inf-paso-flecha:hover {
    color: var(--tinta);
    background: color-mix(in srgb, var(--elevado) 50%, transparent);
  }
}

/* Textos comunes de la pantalla. */
.inf-rotulo {
  margin: 0;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.inf-titulo {
  margin: 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.inf-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.inf-nota strong {
  color: var(--tinta);
  font-weight: 600;
}

.inf-avisos {
  display: grid;
  gap: 8px;
  margin-bottom: 24px;
}

/* La rejilla: el paquete a la izquierda y, a su lado, el año y los
   registros; debajo, las tarjetas del resumen. */
.inf-rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

.inf-rejilla > .t-tarjeta {
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

@media (min-width: 1000px) {
  .inf-rejilla {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .inf-rejilla > .t-tarjeta {
    grid-column: 1 / -1;
  }

  .inf-rejilla.con-uno > .inf-paquete,
  .inf-rejilla.con-dos > .inf-paquete {
    grid-column: 1 / span 7;
  }

  .inf-rejilla.con-dos > .inf-paquete {
    grid-row: span 2;
  }

  /* El paquete mide lo que su contenido: no se estira para igualar a lo de
     al lado (con menos filas, quedaría un hueco sobre el pie). */
  .inf-rejilla > .inf-paquete {
    align-self: start;
  }

  .inf-rejilla > .inf-anio,
  .inf-rejilla > .inf-registros {
    grid-column: 8 / span 5;
  }

  /* Si el paquete es más alto, el año se queda con el alto que sobra. */
  .inf-rejilla.con-dos {
    grid-template-rows: 1fr auto;
  }
}

@media (min-width: 1240px) {
  .inf-rejilla > .inf-facturas {
    grid-column: 1 / span 6;
  }

  .inf-rejilla > .inf-web {
    grid-column: 7 / span 6;
  }
}

/* ── El paquete para la gestoría ── */
.inf-paquete {
  display: flex;
  flex-direction: column;
}

.inf-paquete-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 24px 24px 16px;
}

.inf-paquete-cabecera > div {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.inf-paquete-periodo {
  margin: 0;
  font: 800 30px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.inf-docs {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Una fila por documento: el tipo en su matriz, el nombre con lo que haya
   que decir y, a la derecha, solo lo que falta y lo que lo arregla. */
.inf-doc {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  column-gap: 16px;
  align-items: center;
  min-height: 58px;
  padding-right: 24px;
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: 16px;
}

.inf-doc-tipo {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta);
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.09em;
  background: var(--papel-2);
  border-right: 2px dotted var(--line);
}

.inf-doc.es-nada .inf-doc-tipo {
  color: var(--tinta-3);
}

.inf-doc-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 0;
}

.inf-doc-texto strong {
  font-size: 15px;
  font-weight: 600;
}

.inf-doc.es-nada .inf-doc-texto strong {
  color: var(--tinta-2);
}

.inf-doc-texto small {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.inf-doc-texto small .es-bien {
  color: var(--safe);
  font-weight: 600;
}

.inf-doc-texto a,
.inf-descarga a,
.inf-enlace,
.inf-cambiar {
  color: var(--tinta-2);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.inf-doc-lado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 10px;
  padding: 8px 0;
}

.inf-doc-espera {
  color: var(--tinta-3);
  font-size: 13.5px;
}

/* La fila admite que le suelten el archivo encima (panel.js). */
.inf-doc.es-encima {
  background: var(--sello-piel);
  box-shadow: inset 0 0 0 2px var(--sello);
}

/* «Subirla» y «Cambiar» son el campo de archivo, que ocupa todo el botón:
   se pulsa y se enfoca como él. */
.inf-subir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 8px;
}

.inf-elegir {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.inf-cambiar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 13.5px;
}

.inf-archivo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.inf-elegir:has(.inf-archivo:focus-visible) {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

.inf-elegir-con {
  display: none;
}

.inf-elegir:has(.inf-archivo:valid) .inf-elegir-sin {
  display: none;
}

.inf-elegir:has(.inf-archivo:valid) .inf-elegir-con {
  display: inline;
}

/* «Subir» solo hace falta con un archivo elegido; con JavaScript, elegirlo
   ya lo sube. Un navegador sin `:has()` lo enseña siempre. */
@supports selector(:has(*)) {
  .inf-subir:not(:has(.inf-archivo:valid)) .inf-subir-boton {
    display: none;
  }
}

.puede-soltar .inf-subir:not(.es-cambio) .inf-subir-boton {
  display: none;
}

.inf-soltar {
  display: none;
  flex-basis: 100%;
  color: var(--tinta-3);
  font-size: 12.5px;
  text-align: right;
}

.puede-soltar .inf-soltar {
  display: block;
}

.inf-leyendo,
.inf-soltar-aviso {
  flex-basis: 100%;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}

.inf-leyendo {
  color: var(--tinta-2);
}

.inf-soltar-aviso {
  color: var(--danger);
}

.inf-subir.es-enviando .inf-elegir,
.inf-subir.es-enviando ~ .inf-soltar {
  display: none;
}

/* El pie: la descarga, el único violeta de la página. */
.inf-paquete-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: auto;
  padding: 16px 24px;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.inf-acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.inf-acciones .t-boton {
  min-height: 44px;
  gap: 8px;
  padding: 0 18px;
  font-size: 14.5px;
  border-radius: 11px;
}

.inf-acciones .t-boton > .t-icono {
  width: 20px;
  height: 20px;
}

.inf-descarga {
  margin: 0 0 0 auto;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.inf-descarga-cambio {
  color: var(--warning);
  font-weight: 600;
}

/* ── El año: las columnas de Inicio, más altas, y el importe de cada mes ── */
.inf-anio {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px;
}

.inf-rejilla > .inf-anio {
  padding: 22px 24px;
}

.inf-anio-cabecera {
  display: grid;
  gap: 6px;
}

.inf-anio-total {
  margin: 0;
  font: 800 30px/1.02 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.inf-anio-figura {
  margin: auto 0 0;
}

.inf-columnas {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inf-columna {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* El rectángulo sigue más allá del pie del SVG, que lo recorta: redondeado
   por arriba y casi recto por abajo. */
.inf-columna-barra {
  display: block;
  flex: none;
  width: 100%;
  height: 200px;
  overflow: hidden;
  fill: var(--trazo);
  border-radius: 0 0 2px 2px;
}

.inf-columna.es-elegida .inf-columna-barra {
  fill: var(--tinta);
}

.inf-columna-mes {
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.inf-columna.es-elegida .inf-columna-mes {
  color: var(--tinta);
}

.inf-columna-hueco {
  width: 100%;
  height: 10px;
  border: 1.5px dashed var(--trazo);
  border-radius: 5px 5px 2px 2px;
}

.inf-columna.es-elegida .inf-columna-hueco {
  border-color: var(--tinta);
}

/* El importe de cada mes, escrito. En columnas, que se leen de arriba
   abajo: enero, febrero, marzo… */
.inf-anio-cifras {
  columns: 3 132px;
  column-gap: 20px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.inf-anio-cifras li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
  break-inside: avoid;
}

.inf-anio-cifras b {
  font-weight: 500;
  white-space: nowrap;
}

.inf-anio-cifras .es-elegida {
  color: var(--tinta);
}

.inf-anio-cifras .es-elegida b {
  font-weight: 700;
}

.inf-cifra-mes {
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.inf-anio-cifras .es-elegida .inf-cifra-mes {
  color: var(--tinta);
}

.inf-anio > .t-vacio {
  padding: 16px 0 8px;
}

/* ── Registros de Hacienda ── */
.inf-rejilla > .inf-registros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 20px 24px;
}

.inf-registros-texto {
  flex: 1 1 200px;
  min-width: 0;
}

.inf-registros h2 {
  margin: 0;
  font: 600 15px/1.45 var(--ui);
}

.inf-registros-botones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inf-registros-botones .t-boton {
  min-height: 44px;
}

/* ── Las tarjetas del resumen ── */
.inf-rejilla > .inf-bloque {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 24px;
}

.inf-bloque-cabecera {
  display: grid;
  gap: 4px;
}

/* La cifra principal es lo más grande de su tarjeta. */
.inf-cifras {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 28px;
  margin: 0;
}

.inf-cifras > div {
  min-width: 0;
}

.inf-cifras dt {
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.inf-cifras dd {
  margin: 6px 0 0;
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inf-cifras .es-principal dd {
  font: 800 34px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.inf-sin {
  margin: 0;
  color: var(--tinta-2);
}

.inf-tabla-envoltura {
  min-width: 0;
  overflow-x: auto;
}

.inf-tabla {
  width: 100%;
  min-width: 440px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.inf-meses .inf-tabla {
  min-width: 620px;
}

.inf-tabla th {
  padding: 8px 0 8px 12px;
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
  background: none;
  border-bottom: 1px solid var(--tinta);
}

.inf-tabla td {
  padding: 12px 0 12px 12px;
  text-align: right;
  white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}

.inf-tabla tr:last-child td {
  border-bottom: 0;
}

.inf-tabla th:first-child,
.inf-tabla td:first-child {
  padding-left: 0;
  text-align: left;
}

.inf-tabla td:first-child {
  white-space: normal;
}

.inf-tabla .es-total td {
  font-weight: 700;
  border-top: 1px solid var(--tinta);
}

.inf-tabla .es-desglose td {
  padding-top: 6px;
  padding-bottom: 6px;
  color: var(--tinta-2);
  font-size: 13.5px;
}

.inf-tabla .es-desglose td:first-child {
  padding-left: 16px;
}

.inf-bloque-pie {
  margin-top: auto;
}

/* ── Lo pendiente de cobro y el límite de la UE ── */
.inf-rejilla > .inf-estado {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.inf-pendiente {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 20px 24px;
}

.inf-pendiente-cifra {
  margin: 6px 0 0;
}

.inf-pendiente-cifra b {
  font: 800 24px/1.02 var(--display);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.inf-enlace {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 14px;
}

.inf-umbral {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 20px 24px;
  border-left: 2px dotted var(--line);
}

.inf-umbral-pista {
  display: block;
  width: 100%;
  height: 8px;
  border-radius: 4px;
}

.inf-umbral-fondo {
  fill: var(--pista);
}

.inf-umbral-lleno {
  fill: var(--tinta);
}

.inf-umbral.es-cerca .inf-umbral-lleno {
  fill: var(--warning);
}

.inf-umbral.es-superado .inf-umbral-lleno {
  fill: var(--danger);
}

/* Un mes sin datos: dos hojas en blanco, no un aviso. */
.inf-vacio {
  padding: 0;
}

@media (hover: hover) {
  .inf-doc-texto a:hover,
  .inf-descarga a:hover,
  .inf-enlace:hover,
  .inf-cambiar:hover {
    color: var(--tinta);
  }
}

/* El móvil (mesa InformesMovil): el título, las dos opciones y las flechas
   a todo el ancho; las tarjetas, una debajo de otra, con los registros al
   final; el botón de la descarga, a todo el ancho. */
@media (max-width: 760px) {
  .inf-cabecera {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin-bottom: 14px;
  }

  .inf-cabecera h1 {
    padding-left: 4px;
    font-size: 34px;
  }

  .inf-periodo {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

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

  .inf-paso {
    justify-content: space-between;
  }

  .inf-paso > strong {
    min-width: 0;
  }

  .inf-avisos {
    margin-bottom: 14px;
  }

  .inf-rejilla {
    gap: 14px;
  }

  .inf-rejilla > .inf-registros {
    order: 1;
    padding: 16px;
  }

  .inf-registros-botones {
    flex: 1 1 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  }

  .inf-paquete-cabecera {
    gap: 8px 12px;
    padding: 18px 16px 14px;
  }

  .inf-paquete-cabecera > div {
    gap: 4px;
  }

  .inf-paquete-periodo {
    font-size: 26px;
  }

  .inf-doc {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    min-height: 50px;
    padding-right: 16px;
  }

  .inf-doc-tipo {
    grid-row: 1 / span 2;
    font-size: 11px;
  }

  .inf-doc-texto {
    padding: 8px 0;
  }

  /* Lo que falta y su botón bajan a su línea, bajo el nombre. */
  .inf-doc-lado {
    grid-column: 2;
    justify-content: flex-start;
    padding: 0 0 10px;
  }

  .inf-subir {
    justify-content: flex-start;
  }

  .inf-soltar,
  .inf-leyendo,
  .inf-soltar-aviso {
    text-align: left;
  }

  .inf-paquete-pie {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 16px 16px;
  }

  .inf-acciones {
    flex-direction: column;
    gap: 8px;
  }

  .inf-acciones .t-boton.es-principal {
    min-height: 50px;
    font-size: 16px;
  }

  .inf-descarga {
    margin: 2px 0 0;
    text-align: center;
  }

  .inf-rejilla > .inf-anio {
    gap: 16px;
    padding: 18px 16px;
  }

  .inf-anio-cabecera {
    gap: 4px;
  }

  .inf-anio-total {
    font-size: 28px;
  }

  .inf-columnas {
    gap: 6px;
  }

  .inf-columna {
    gap: 6px;
  }

  .inf-columna-barra {
    height: 118px;
  }

  .inf-anio-cifras {
    columns: 2 120px;
    column-gap: 16px;
  }

  .inf-rejilla > .inf-bloque {
    gap: 12px;
    padding: 18px 16px 16px;
  }

  /* La cifra principal, sola; las otras dos, en su franja, partidas por el
     perforado. */
  .inf-cifras {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 0 -16px;
    border-bottom: 2px dotted var(--line);
  }

  .inf-cifras > div {
    padding: 12px 16px;
  }

  .inf-cifras > .es-principal {
    grid-column: 1 / -1;
    padding-top: 0;
    padding-bottom: 16px;
    border-bottom: 2px dotted var(--line);
  }

  .inf-cifras > div:not(.es-principal):nth-child(odd) {
    border-left: 2px dotted var(--line);
  }

  /* Con cuatro cifras (IVA, IGIC e IPSI a la vez), la que sobra ocupa su
     fila. */
  .inf-cifras > div:not(.es-principal):nth-child(even):last-child {
    grid-column: 1 / -1;
  }

  .inf-cifras dd {
    margin-top: 4px;
    font-size: 18px;
  }

  /* Las tablas no caben: cada fila pasa a ser un bloque, con el
     tratamiento (o el mes) de título y cada cifra con su rótulo. */
  .inf-tabla-envoltura {
    overflow: visible;
  }

  .inf-tabla,
  .inf-meses .inf-tabla {
    display: block;
    min-width: 0;
  }

  .inf-tabla thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .inf-tabla tbody {
    display: block;
  }

  .inf-tabla tr {
    display: grid;
    gap: 4px;
    padding: 12px 0;
    border-top: 1px solid var(--line-soft);
  }

  .inf-tabla td,
  .inf-tabla td:first-child,
  .inf-tabla .es-total td,
  .inf-tabla .es-desglose td,
  .inf-tabla .es-desglose td:first-child {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    text-align: left;
    border: 0;
  }

  .inf-tabla td:first-child {
    font-weight: 600;
  }

  .inf-tabla td:not(:first-child)::before {
    content: attr(data-label);
    color: var(--tinta-3);
    font: 500 11px/1.3 var(--mono);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  .inf-tabla .es-total {
    border-top-color: var(--tinta);
  }

  .inf-tabla .es-desglose {
    padding-left: 16px;
  }

  .inf-rejilla > .inf-estado {
    grid-template-columns: minmax(0, 1fr);
  }

  .inf-pendiente {
    padding: 14px 16px;
  }

  .inf-pendiente-cifra b {
    font-size: 22px;
  }

  .inf-umbral {
    padding: 14px 16px;
    border-top: 1px solid var(--line-soft);
    border-left: 0;
  }
}

/* ── fin de la tanda 9a ── */

/* ── Tanda 10: Facturación real, el acta de la activación y la declaración responsable ──
   Propuesta de noviembre (mesas FacturacionReal y FacturacionRealMovil). La
   página sale de activationPage (activation-ui.ts): la cabecera de la
   subpágina tipo, a lo ancho de Ajustes, y dos columnas, las puertas a la
   izquierda y la pausa de emergencia y los documentos al lado. Cada puerta es
   una tarjeta de la subpágina tipo (as-tarjeta, as-cuerpo, as-franja y as-pie,
   de la tanda 9b); la que tiene algo abierto lleva el borde de los controles.
   El acta y la declaración van con subpaginaAjuste y su texto, sobre la hoja.
   Los «ac-» y «aj-» de antes siguen más arriba: lo de aquí los ajusta solo
   dentro de .ac-pagina y .ac-hoja. */

/* La página: el eje de Ajustes (1180 px), sin el límite de una subpágina. */
.as-pagina.ac-pagina > * {
  max-width: none;
}

.ac-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  min-width: 0;
}

.ac-puertas,
.ac-lado {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

/* Dos columnas en cuanto caben las dos de la mesa: las puertas, de 560 px
   como poco, y al lado una de 300 px. */
@media (min-width: 1060px) {
  .ac-columnas {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 24px;
  }
}

/* ── Cada puerta, en su tarjeta ── */
.ac-puerta.es-abierta {
  border-color: var(--borde-control);
}

/* En oscuro las tarjetas llevan un borde fino: la abierta conserva el suyo.
   Escrito dos veces, para el tema del sistema y para el fijado a mano. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ac-puerta.es-abierta {
    border-color: var(--borde-control);
  }
}

:root[data-theme="dark"] .ac-puerta.es-abierta {
  border-color: var(--borde-control);
}

.ac-pagina .ac-cuerpo {
  gap: 8px;
  padding: 20px 24px;
}

.ac-puerta .as-franja {
  gap: 14px;
  padding: 18px 24px;
}

.ac-titular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  min-width: 0;
}

.ac-titular h2,
.ac-pausa h2 {
  min-width: 0;
  margin: 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.ac-titular .t-estado {
  flex: none;
}

.ac-pagina .ac-lead {
  max-width: none;
  margin: 0;
  color: var(--tinta-2);
  font-size: 15px;
  line-height: 1.45;
}

.ac-pagina .ac-nota,
.ac-hoja .ac-nota {
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.ac-pagina .ac-causas {
  margin: 0;
  padding-left: 1.1rem;
  color: var(--danger);
  font-size: 13.5px;
  line-height: 1.45;
}

.ac-pagina .ac-cuerpo > .form-error {
  margin: 0;
}

/* Cerrada: la frase y su botón, sin pie. */
.ac-comprobar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

/* ── La comprobación, en su franja ── */
.ac-puerta .ac-paso {
  margin-top: 0;
}

.ac-pagina .ac-resumen {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.ac-pagina .ac-resumen span {
  color: var(--tinta-2);
  font-size: 13.5px;
}

/* Lo que avisa o falla: cada cosa en su caja, con el tono de su pastilla. */
.ac-pagina .ac-comprobaciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ac-pagina .ac-comprobacion {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 6px 12px;
  padding: 10px 14px;
  color: var(--tinta);
  background: var(--warning-soft);
  border: 1px solid var(--warning-borde);
  border-radius: 14px;
}

.ac-pagina .ac-comprobacion.es-fallo {
  background: var(--danger-soft);
  border-color: var(--danger-borde);
}

.ac-pagina .ac-comprobacion > .t-estado {
  flex: none;
  background: var(--papel);
}

.ac-pagina .ac-comprobacion > div {
  flex: 1 1 220px;
  min-width: 0;
}

.ac-pagina .ac-comprobacion b {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
}

.ac-pagina .ac-comprobacion p {
  margin: 2px 0 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* Lo que está bien: solo el nombre, en columnas, con su punto. */
.ac-pagina .ac-bien,
.ac-hoja .ac-bien {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  columns: auto;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.35;
}

.ac-pagina .ac-bien li,
.ac-hoja .ac-bien li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.ac-pagina .ac-bien li::before,
.ac-hoja .ac-bien li::before {
  display: block;
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0.4em 0 0;
  background: var(--safe);
  border-radius: 50%;
}

.ac-hoja .ac-bien li.es-aviso::before {
  background: var(--warning);
}

.ac-hoja .ac-bien li.es-fallo::before {
  background: var(--danger);
}

/* «Volver a comprobar»: una acción en texto, no un botón. */
.ac-pagina .ac-recomprobar {
  align-self: flex-start;
  margin: -6px 0;
  padding: 0;
}

.ac-accion {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  color: var(--tinta-2);
  font: 600 14px/1.2 var(--ui);
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}

.ac-accion:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ac-accion:hover {
    color: var(--tinta);
  }
}

/* ── Activar: los primeros números, los dos campos y el pie ── */
.ac-pagina .ac-activar {
  margin: 0;
  border-top: 0;
}

.ac-pagina .ac-primera {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
}

.ac-pagina .ac-primera b,
.ac-pagina .ac-activar .ac-nota b {
  color: var(--tinta);
  font: 500 0.87em/1.3 var(--mono);
  letter-spacing: -0.01em;
}

.ac-pagina .ac-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 16px;
  max-width: none;
}

.ac-pagina .ac-campos input {
  height: 50px;
}

/* En el pie, el botón delante y la consecuencia al lado (en el marcado, la
   frase va primero: se lee antes de llegar al botón). */
.ac-puerta .as-pie > .t-boton {
  order: -1;
}

.ac-puerta .as-pie > .as-nota {
  flex: 1 1 260px;
}

/* ── La pausa de emergencia: una acción de emergencia, no la principal ── */
.ac-pausa .as-cuerpo {
  gap: 12px;
  padding: 20px 24px;
}

.ac-pausar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.ac-pausar > .field {
  align-self: stretch;
}

.ac-pausa .t-boton.es-peligro {
  background: var(--papel);
  border-color: var(--danger);
}

@media (hover: hover) {
  .ac-pausa .t-boton.es-peligro:hover {
    background: var(--danger-soft);
  }
}

/* ── Documentos: una fila por documento ── */
.ac-documentos > .t-fila-lista {
  grid-template-columns: minmax(0, 1fr) 20px;
  min-height: 0;
  padding: 14px 20px 14px 24px;
}

.ac-documentos .t-fila-lista small {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* ── El acta y la declaración: el texto, sobre la hoja ── */
.ac-documento {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.ac-documento > .ac-borrador {
  margin: 0;
}

/* La hoja de la factura: papel claro con tinta oscura, atenuada en oscuro. */
.ac-hoja {
  --papel: var(--hoja);
  --papel-2: var(--hoja-2);
  --tinta: var(--hoja-tinta);
  --tinta-2: var(--hoja-tinta-2);
  --tinta-3: var(--hoja-tinta-3);
  --line: var(--hoja-linea);
  --line-soft: var(--hoja-linea-2);
  --sello: var(--hoja-sello);
  --safe: var(--hoja-bien);
  --warning: #9b531a;
  --danger: #a8322f;
  color-scheme: light;
  min-width: 0;
  margin: 0;
  padding: 36px 40px 32px;
  color: var(--hoja-tinta);
  font-size: 14.5px;
  line-height: 1.55;
  background: var(--hoja);
  border-radius: 6px;
  box-shadow: var(--shadow-alta);
}

.ac-hoja > * {
  margin-block: 0;
}

.ac-hoja > * + * {
  margin-top: 24px;
}

.ac-hoja h2 {
  margin: 0;
  font: 700 19px/1.25 var(--display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.ac-apartado > * + * {
  margin-top: 10px;
}

.ac-hoja .ac-datos {
  margin: 0;
}

.ac-hoja .ac-datos > div {
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) minmax(0, 1fr);
  gap: 2px 16px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}

.ac-hoja .ac-datos > div:first-child {
  border-top: 0;
}

.ac-hoja .ac-datos dt {
  font-size: 14px;
  font-weight: 600;
}

.ac-hoja .ac-datos dd {
  margin: 0;
  color: var(--tinta-2);
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.ac-hoja .ac-acta-comprobaciones {
  margin-top: 12px;
}

.ac-hoja .ac-hoja-pie {
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.ac-hoja.ac-declaracion h3 {
  margin: 26px 0 0;
  font-size: 15px;
  font-weight: 600;
}

.ac-hoja.ac-declaracion h3 + ul {
  margin-top: 6px;
}

.ac-hoja.ac-declaracion ul {
  padding-left: 1.2rem;
  font-size: 14.5px;
  line-height: 1.55;
}

.ac-hoja.ac-declaracion > p {
  max-width: 68ch;
  font-size: 14.5px;
  line-height: 1.6;
}

/* Al pie, «Imprimir o guardar en PDF», en secundario. */
.ac-pie-documento {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── Móvil (mesa FacturacionRealMovil) ── */
@media (max-width: 760px) {
  .ac-columnas,
  .ac-puertas,
  .ac-lado {
    gap: 14px;
  }

  .ac-pagina .ac-cuerpo,
  .ac-puerta .as-franja,
  .ac-pausa .as-cuerpo {
    padding: 16px;
  }

  .ac-pagina .ac-bien,
  .ac-hoja .ac-bien {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ac-documentos > .as-rotulo {
    padding: 16px 16px 10px;
  }

  .ac-documentos > .t-fila-lista {
    padding: 14px 12px 14px 16px;
  }

  .ac-hoja {
    padding: 22px 18px 20px;
  }

  .ac-hoja > * + * {
    margin-top: 20px;
  }

  .ac-hoja .ac-datos > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .ac-pie-documento > .t-boton {
    flex: 1 1 100%;
    min-height: 52px;
    font-size: 16px;
  }
}

/* En papel: la hoja sola, sin la vuelta, sin el botón y sin sombra. */
@media print {
  .as-pagina:has(.ac-documento) .as-cabecera .fe-volver,
  .ac-pie-documento {
    display: none !important;
  }

  .ac-hoja {
    padding: 0;
    box-shadow: none;
  }

  .ac-apartado {
    break-inside: avoid;
  }
}

/* ── fin de la tanda 10 ── */

/* ── Revisión de la tanda 9b ──
   Lo que pidió el chat de diseño al revisar Ajustes en el navegador. Son
   retoques sobre las piezas «as-» de la tanda 9b: no cambian ningún
   formulario. */

/* Conceptos guardados: la fila entera abre el concepto para editarlo (el
   nombre es el enlace y su ::after la cubre) y lleva un «•••», como los
   borradores de Facturas. La casilla del lote y el «•••» quedan por encima
   del enlace. La tarjeta deja de recortar para que el menú de la última
   fila no se corte; el pie redondea su propio fondo. */
.as-conceptos {
  overflow: visible;
}

.as-conceptos > .as-pie {
  border-radius: 0 0 var(--radio-l) var(--radio-l);
}

.as-lista > .as-concepto {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: "marca texto marbete importe menu";
  gap: 4px 12px;
}

.as-concepto > .as-concepto-marca {
  grid-area: marca;
  position: relative;
  z-index: 1;
}

.as-concepto > .as-concepto-texto {
  grid-area: texto;
}

.as-concepto > .t-marbete {
  grid-area: marbete;
}

.as-concepto > .as-concepto-importe {
  grid-area: importe;
}

.as-concepto > .as-concepto-menu {
  grid-area: menu;
  position: relative;
  z-index: 1;
}

.as-concepto-enlace {
  color: inherit;
  text-decoration: none;
}

.as-concepto-enlace::after {
  position: absolute;
  inset: 0;
  content: "";
}

.as-concepto-enlace:focus-visible {
  outline: none;
}

.as-concepto:has(.as-concepto-enlace:focus-visible) {
  outline: 2px solid var(--foco);
  outline-offset: -2px;
}

/* Con el «•••» abierto, su fila pasa por encima de las de abajo. */
.as-concepto:has(.as-concepto-menu[open]) {
  z-index: 20;
}

@media (hover: hover) {
  .as-concepto:hover {
    background: color-mix(in srgb, var(--papel-2) 55%, var(--papel));
  }
}

/* «Eliminar», dentro del «•••»: sigue en rojo y sigue abriendo su
   advertencia antes de borrar, ahora bajo la opción. */
.as-concepto-menu:has(.as-eliminar[open]) > .t-menu-mas-lista {
  width: min(300px, calc(100vw - 32px));
}

.as-concepto-menu .as-eliminar[open] {
  padding: 0;
  background: none;
  border: 0;
  border-radius: 0;
}

.as-concepto-menu .as-eliminar > summary {
  list-style: none;
}

.as-concepto-menu .as-eliminar form {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 4px 10px 6px;
}

.as-concepto-menu .as-eliminar p {
  flex: none;
}

/* Las pestañas caben en una línea a 390 px. */
.as-pagina > .t-pestanas {
  flex-wrap: nowrap;
}

/* La barra del lote, con los botones de siempre (t-boton) a su tamaño. */
.as-pagina > .t-lote .t-lote-acciones .t-boton {
  min-height: 40px;
}

/* La clave de Stripe: con «Cambiar» abierto, «Desconectar» se pliega y
   deja su título y su frase. Su formulario sigue en la página, sin verse. */
.as-pagina:has(.as-cambiar[open]) .as-desconectar .as-campos {
  display: none;
}

@media (max-width: 760px) {
  .as-lista > .as-concepto {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "marca texto importe menu"
      ". marbete marbete marbete";
  }

  .as-concepto > .t-marbete {
    justify-self: start;
  }

  .as-pagina > .t-pestanas {
    gap: 2px;
  }

  .as-pagina > .t-pestanas > .t-pestana {
    padding: 0 10px;
    gap: 5px;
  }

  /* En el móvil la barra del lote flota sobre la barra de secciones y va en
     dos líneas: la página reserva su alto entero, para que al llegar al
     final no tape «Nuevo concepto». */
  body:has(.as-pagina > .t-lote.es-visible) .content {
    padding-bottom: 168px;
  }
}

/* ── fin de la revisión de la tanda 9b ── */

/* ── Revisión de las tandas 8 y 9a ── */
/* Lo que pidió el chat de diseño al revisar Clientes e Informes en el
   navegador (14-nov). Solo retoques sobre las secciones de las tandas 8 y 9a. */

/* ── Clientes: cuándo hay columnas ──
   Por el ancho de la ventana: por debajo de 980 px, la fila del móvil (las
   mismas reglas que la lista en estrecho de la tanda 8); entre 980 y 1100,
   las columnas sin «Este año, sin IVA»; desde 1100, todas. Así ninguna
   cabecera pasa a dos líneas y el nombre tiene sitio. */
@media (max-width: 979.98px) {
  .cli-cabeza {
    display: none;
  }

  .cli-filas > li:first-child {
    border-top: 0;
  }

  .cli-fila,
  .cli-fila.es-lmm {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    column-gap: 12px;
    padding-right: 14px;
  }

  .cli-fila.t-talon > .t-matriz {
    grid-column: 1;
    grid-row: 1 / span 4;
  }

  .cli-fila > .t-icono,
  .cli-fila > .cli-anio {
    display: none;
  }

  .cli-quien {
    grid-column: 2;
    grid-row: 1;
    padding-block: 12px 0;
  }

  .cli-fila:not(.es-lmm) .cli-donde,
  .cli-fila:not(.es-lmm):not(.es-incompleto) .cli-quien > small {
    display: none;
  }

  .cli-falta {
    display: inline-block;
  }

  .cli-falta::first-letter {
    text-transform: uppercase;
  }

  .cli-fila:not(.es-lmm) > .cli-ultima {
    grid-column: 2 / 4;
    grid-row: 2;
    padding-bottom: 12px;
    color: var(--tinta-2);
    font-size: 13.5px;
    white-space: normal;
  }

  .cli-fila:not(.es-lmm) > .cli-ultima.es-vacio {
    display: none;
  }

  .cli-fila:not(.es-lmm) > .cli-ultima > .cli-etiqueta {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }

  .cli-fila:not(.es-lmm):has(> .cli-ultima.es-vacio) > .cli-quien {
    padding-bottom: 12px;
  }

  .cli-debe {
    display: contents;
  }

  .cli-debe > .cli-etiqueta {
    grid-column: 3;
    grid-row: 1;
  }

  .cli-debe > .cli-importe,
  .cli-debe > .cli-al-dia,
  .cli-debe > .cli-nada {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    padding-top: 12px;
    font-size: 16px;
    line-height: 1.3;
  }

  .cli-debe > .cli-al-dia,
  .cli-debe > .cli-nada {
    font-size: 15px;
  }

  .cli-debe > .t-estado {
    grid-column: 2 / 4;
    grid-row: 3;
    justify-self: start;
    margin: -4px 0 12px;
  }

  .cli-fila.es-lmm > .cli-ultima {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    padding-top: 12px;
    color: var(--tinta-2);
    font-size: 13.5px;
    line-height: 1.5;
  }

  .cli-fila.es-lmm > .cli-ultima.es-vacio {
    display: none;
  }

  .cli-fila.es-lmm > .cli-tiene {
    grid-column: 2 / 4;
    grid-row: 2;
    padding-bottom: 12px;
    color: var(--tinta-2);
    font-size: 13.5px;
  }

  .cli-fila.es-lmm > .cli-quien {
    padding-bottom: 2px;
  }

  /* Sin «Qué tiene», la raya no se queda sola en su línea. */
  .cli-fila.es-lmm > .cli-tiene.es-vacio {
    display: none;
  }

  .cli-fila.es-lmm:has(> .cli-tiene.es-vacio) > .cli-quien {
    padding-bottom: 12px;
  }
}

/* Entre 980 y 1100: las columnas, sin «Este año, sin IVA» (queda en la ficha). */
@media (min-width: 980px) and (max-width: 1099.98px) {
  .cli-cabeza,
  .cli-fila {
    grid-template-columns: 76px minmax(0, 1fr) 124px 196px 20px;
    column-gap: 16px;
    padding-right: 16px;
  }

  .cli-cabeza:not(.es-lmm) > :nth-child(4),
  .cli-fila > .cli-anio {
    display: none;
  }

  .cli-cabeza.es-lmm,
  .cli-fila.es-lmm {
    grid-template-columns: 76px minmax(0, 1fr) 170px 124px 20px;
  }
}

/* Desde 1100 y mientras la lista no llega a 980 px (la tanda 8 la aprieta
   ahí): las columnas con sitio para su cabecera en una línea. */
@media (min-width: 1100px) {
  @container clientes (max-width: 980px) {
    .cli-cabeza,
    .cli-fila {
      grid-template-columns: 76px minmax(0, 1fr) 124px 146px 196px 20px;
      column-gap: 16px;
      padding-right: 16px;
    }

    .cli-cabeza.es-lmm,
    .cli-fila.es-lmm {
      grid-template-columns: 76px minmax(0, 1fr) 190px 124px 20px;
    }
  }
}

/* LMM+: el país y el correo, en una línea y cortados con puntos suspensivos,
   nunca a mitad de palabra. */
.cli-fila.es-lmm .cli-quien > small {
  overflow: hidden;
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Formulario de cliente ── */

/* El error de unas pastillas rodea el grupo entero, no la primera. */
.cli-opciones:has(> .t-opcion > input[aria-invalid="true"]) {
  width: fit-content;
  max-width: calc(100% + 10px);
  margin: -5px;
  padding: 4px;
  border: 1px solid var(--danger);
  border-radius: 26px;
  box-shadow: 0 0 0 1px var(--danger);
}

.cli-opciones > .t-opcion:has(> input[aria-invalid="true"]) {
  border-color: var(--line);
}

/* La caducidad de una empresa de la UE: el aviso de una frase. */
.cli-caducada {
  margin-top: 10px;
}

/* ── Informes ── */

/* Ninguna tarjeta se estira para igualar a la de al lado (como en Inicio):
   el año y los registros miden lo que su contenido, uno bajo el otro. */
@media (min-width: 1000px) {
  .inf-rejilla.con-dos {
    grid-template-rows: auto 1fr;
  }

  .inf-rejilla > .inf-anio,
  .inf-rejilla > .inf-registros {
    align-self: start;
  }
}

/* «o arrástrala aquí» no sale en el móvil: ahí no se arrastra. */
@media (max-width: 760px) {
  .puede-soltar .inf-soltar {
    display: none;
  }
}

/* «¿De qué mes es esta factura?»: las pastillas de año y de mes de «Más
   filtros» (.fa-grupo, .fa-opciones y .t-opcion). Las de año eligen qué meses
   se ven, con panel.js; sin él o sin `:has()`, se ven todos. */
.if-pregunta .if-anios {
  margin-top: 6px;
}

.if-pregunta-form {
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

.if-meses {
  gap: 10px;
}

.if-meses > legend {
  margin-bottom: 8px;
}

/* Elegir el año solo funciona con panel.js, que quita el mes marcado en un
   año que deja de verse. Sin él no hay pastillas de año: se ven todos los
   meses, cada grupo con su año delante, y así nunca se envía un mes que no
   se ve. */
.if-meses-rotulo {
  flex-basis: 100%;
}

.if-pregunta:not(.es-con-anios) .if-anios,
.if-pregunta.es-con-anios .if-meses-rotulo {
  display: none;
}

.if-pregunta.es-con-anios:has(.if-anios .es-anio-1 input:checked) .if-meses-anio:not(.es-anio-1),
.if-pregunta.es-con-anios:has(.if-anios .es-anio-2 input:checked) .if-meses-anio:not(.es-anio-2),
.if-pregunta.es-con-anios:has(.if-anios .es-anio-3 input:checked) .if-meses-anio:not(.es-anio-3) {
  display: none;
}

/* En el móvil, como todo campo, a 16 px. */
@media (max-width: 760px) {
  .if-pregunta .t-opcion {
    font-size: 16px;
  }

  .if-pregunta-form > .t-boton {
    width: 100%;
    min-height: 50px;
  }
}

/* ── fin de la revisión de las tandas 8 y 9a ── */

/* ── Revisión de la tanda 10 ──
   Lo que pidió el chat de diseño al revisar «Facturación real»: el error de
   una puerta con las piezas de la tanda 8 y junto a sus campos, las causas de
   una pausa de seguridad en la caja de lo que falla, lo que está bien plegado
   en el móvil y el borrador de la declaración en aviso (eso último es solo
   marcado: es-aviso). */

/* El error de una puerta: la caja con el sello «Revisa», junto a los campos
   (o bajo la frase de la puerta si no tiene). El campo que falla lleva el
   borde y la etiqueta en rojo (.as-tarjeta .field, tanda 9b). */
.ac-pagina .ac-puerta .t-error-guardar {
  margin: 0;
}

/* Las causas de una pausa de seguridad: cada una en la caja de lo que falla,
   con su pastilla y su frase. */
.ac-pagina .ac-causas {
  padding-left: 0;
  color: var(--tinta);
  list-style: none;
}

.ac-pagina .ac-causa p {
  margin: 0;
  color: var(--tinta);
  font-size: 14.5px;
  line-height: 1.4;
}

/* Lo que está bien: en el móvil, plegado en una línea que se abre (un
   details: sin JavaScript y con el teclado); en escritorio, siempre a la
   vista y sin esa línea. */
.ac-plegable {
  min-width: 0;
}

.ac-plegable > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  color: var(--tinta-2);
  font: 600 14px/1.2 var(--ui);
  list-style: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Delante, el punto verde de lo que está bien: no se confunde con «Volver a comprobar». */
.ac-plegable > summary::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  background: var(--safe);
  border-radius: 50%;
}

.ac-plegable > summary::-webkit-details-marker {
  display: none;
}

/* La flecha: hacia abajo cerrada, hacia arriba abierta. */
.ac-plegable > summary::after {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.8px solid currentColor;
  border-bottom: 1.8px solid currentColor;
  transform: rotate(45deg);
}

.ac-plegable[open] > summary::after {
  margin-top: 4px;
  transform: rotate(-135deg);
}

.ac-plegable > summary:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

@media (hover: hover) {
  .ac-plegable > summary:hover {
    color: var(--tinta);
  }
}

.ac-plegable[open] > summary {
  margin-bottom: 6px;
}

/* En escritorio, la lista se ve aunque el details esté cerrado. Solo donde
   el navegador deja tocar su contenido; si no, se queda el pliegue. */
@media (min-width: 761px) {
  @supports selector(details::details-content) {
    .ac-plegable > summary {
      display: none;
    }

    .ac-plegable::details-content {
      content-visibility: visible;
      display: block;
    }
  }
}

/* En el móvil, abierta, una por fila: ningún nombre se parte en dos líneas. */
@media (max-width: 760px) {
  .ac-pagina .ac-plegable .ac-bien {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── fin de la revisión de la tanda 10 ── */

/* ── Tanda 11: Documentos, el alta de una serie y el aviso de requisitos ──
   Tres de las cuatro pantallas que quedaban con la piel antigua y a las que puede
   llevar un aviso de la app, descritas en palabras por el chat de diseño.
   Documentos (archive-ui.ts) toma el molde de la lista de Clientes y la
   matriz pequeña del paquete de la gestoría («doc-…»); su ficha y el alta
   de una serie (editor-ui.ts, «se-…») son la subpágina tipo de Ajustes
   («as-…», tanda 9b). El aviso de requisitos de Facturas es el aviso de una
   frase (.t-aviso, tanda 8) y no necesita nada de aquí. Preferencias
   fiscales queda en espera: diseño la va a dibujar de nuevo. */

/* ── Documentos, la lista ── */
.doc-pagina {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.doc-pagina > * {
  min-width: 0;
  margin-block: 0;
}

.doc-cabecera {
  margin-bottom: 4px;
}

.doc-cabecera .fe-volver {
  min-height: 44px;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 600;
}

.doc-cabecera h1 {
  margin: 0 0 8px;
  font-size: 40px;
  line-height: 1.02;
}

/* «Incorporar documento»: el botón y, abierta, su tarjeta debajo. */
.doc-incorporar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.doc-incorporar > summary {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
  border-radius: 11px;
  list-style: none;
  cursor: pointer;
}

.doc-incorporar > summary::-webkit-details-marker {
  display: none;
}

.doc-incorporar[open] > summary {
  background: var(--papel-2);
}

.doc-incorporar-tarjeta {
  align-self: stretch;
  width: 100%;
  max-width: 760px;
  text-align: left;
}

.doc-incorporar-tarjeta .t-error-guardar {
  margin: 0;
}

.as-tarjeta .doc-archivo input[type="file"],
.as-tarjeta .doc-archivo input[type="file"]:not(:focus) {
  padding: 9px 12px;
  line-height: 30px;
  cursor: pointer;
}

.doc-archivo input[type="file"]::file-selector-button {
  min-height: 30px;
  margin-right: 12px;
  padding: 0 12px;
  color: var(--tinta);
  font: 600 13.5px/1 var(--ui);
  background: var(--papel);
  border: 1px solid var(--borde-control);
  border-radius: 8px;
  cursor: pointer;
}

.doc-incorporar-tarjeta .t-boton.es-principal {
  min-height: 50px;
  padding: 0 24px;
  font-size: 15px;
  border-radius: 11px;
}

/* El buscador, como el de Clientes, con su botón «Buscar» siempre a la vista
   (no busca en vivo). */
.doc-buscar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.doc-buscador {
  flex: 1 1 260px;
  gap: 10px;
  height: 50px;
  padding: 0 14px;
  background: var(--campo);
  border-radius: 11px;
}

.doc-buscador > .t-icono {
  width: 20px;
  height: 20px;
}

.doc-buscador input {
  font-size: 15px;
  text-overflow: ellipsis;
}

.doc-buscar > .t-boton {
  flex: none;
  min-height: 50px;
  padding: 0 18px;
  border-radius: 11px;
}

/* Una fila por documento: el tipo en la matriz pequeña, el nombre con el
   emisor y el número debajo, la revisión en su pastilla y la flecha. */
.doc-filas {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-filas > li + li {
  border-top: 1px solid var(--line-soft);
}

.doc-fila {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto 20px;
  column-gap: 16px;
  align-items: center;
  min-height: 64px;
  padding-right: 20px;
  color: var(--tinta);
  text-decoration: none;
}

.doc-fila:focus-visible {
  outline-offset: -3px;
}

.doc-tipo {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tinta);
  font: 500 11.5px/1 var(--mono);
  letter-spacing: 0.09em;
  background: var(--papel-2);
  border-right: 2px dotted var(--line);
}

.doc-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 12px 0;
}

.doc-texto strong {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.doc-texto small {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.doc-estado {
  display: flex;
  justify-content: flex-end;
}

.doc-fila > .t-icono {
  width: 20px;
  height: 20px;
  color: var(--tinta-3);
  transition: transform 0.3s var(--salida), color 0.2s;
}

@media (hover: hover) {
  .doc-fila:hover {
    background: color-mix(in srgb, var(--papel-2) 55%, var(--papel));
  }

  .doc-fila:hover > .t-icono {
    color: var(--tinta);
    transform: translateX(2px);
  }
}

/* Vacía: el estado vacío lleva dentro el botón de incorporar. */
.doc-vacio > .doc-incorporar {
  align-items: center;
  margin-top: 16px;
}

/* ── Documentos, la ficha ── */
.doc-ficha-titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 20px;
}

.doc-ficha-titulo > .as-titulos {
  flex: 1 1 320px;
}

.doc-ficha-titulo > .t-boton {
  flex: none;
  margin-top: 2px;
}

.doc-titulo-tarjeta {
  margin: 0;
  font: 700 20px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.doc-tipo-documento,
.se-opciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.doc-tipo-documento > legend,
.se-opciones > legend {
  margin-bottom: 8px;
}

.as-campos > .doc-ancho {
  grid-column: 1 / -1;
}

/* Posible documento repetido: el aviso, con cada coincidencia como acción. */
.doc-repetido-texto {
  flex: 1 1 260px;
  min-width: 0;
}

.doc-repetido-texto > strong {
  font-weight: 600;
}

.doc-repetido .t-aviso-accion + .t-aviso-accion {
  margin-left: 0;
}

/* «Texto extraído», plegado al final, en DM Mono. */
.doc-extraido {
  padding: 0;
  overflow: hidden;
}

.doc-extraido > summary {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 24px;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.doc-extraido > summary::-webkit-details-marker {
  display: none;
}

/* La flecha del plegado: a la derecha cerrado, hacia abajo abierto. */
.doc-extraido > summary::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 4px 0 2px;
  border: solid var(--tinta-2);
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
  transition: transform 0.2s var(--salida);
}

.doc-extraido[open] > summary::before {
  transform: rotate(45deg);
}

.doc-extraido > summary:focus-visible {
  outline-offset: -3px;
}

.doc-extraido-texto {
  max-height: 420px;
  margin: 0;
  padding: 16px 24px 22px;
  overflow: auto;
  color: var(--tinta-2);
  font: 400 13px/1.55 var(--mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: var(--papel-2);
  border-top: 1px solid var(--line-soft);
}

.as-pagina > .notice {
  margin: 0;
}

.se-opciones .field-hint {
  display: block;
  max-width: 68ch;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.se-opciones .field-error {
  display: block;
  font-size: 13.5px;
}

.se-opciones[aria-invalid="true"] .t-opcion {
  border-color: var(--danger);
}

/* El error al guardar con sus dos frases: el titular y lo que pasa. */
.se-error {
  align-items: flex-start;
  margin: 0;
}

.se-error > div > p {
  margin: 2px 0 0;
  color: var(--tinta-2);
  font-size: 14px;
}

.se-error > .t-sello {
  margin-top: 1px;
}

/* ── El aviso de requisitos de Facturas y de «Nueva factura» ──
   Con dos acciones, las dos juntas a la derecha; sus textos son frases
   largas, así que en estrecho bajan a su línea y se parten. */
.rq-requisitos {
  margin-bottom: 16px;
}

.rq-requisitos .t-aviso-accion + .t-aviso-accion {
  margin-left: 0;
}

/* ── El alta y la edición de una numeración ── */
/* Editar: el número de arranque del año no está descrito y conserva su
   marcado (.t-panel), debajo de la tarjeta. Solo se ajusta lo que pide la
   guía: sin el margen de antes (lo pone la página), un solo violeta (su
   «Guardar numeración» se ve como secundario) y, en el móvil, sus campos a
   16 px. */
.as-pagina > .t-panel {
  margin: 0;
}

.as-pagina > .t-panel .primary-button,
.as-pagina > .t-panel .primary-button:hover {
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borde-control);
  box-shadow: none;
  filter: none;
}

@media (hover: hover) {
  .as-pagina > .t-panel .primary-button:hover {
    background: var(--papel-2);
    border-color: var(--tinta-3);
  }
}

.se-origenes .as-eleccion input {
  accent-color: var(--tinta);
}

.se-origenes.es-error .as-eleccion {
  border-color: var(--danger);
}

.se-origenes .field-error {
  margin-top: 2px;
}

@media (max-width: 760px) {
  .doc-pagina {
    gap: 14px;
  }

  .doc-cabecera .fe-volver {
    margin-left: -4px;
  }

  .doc-cabecera h1 {
    font-size: 30px;
  }

  .doc-incorporar > summary {
    width: 100%;
    justify-content: center;
  }

  .doc-vacio > .doc-incorporar > summary {
    width: auto;
  }

  /* Todo campo escribe a 16 px: por debajo, el iPhone amplía la página. */
  .doc-buscador input,
  .as-tarjeta .doc-archivo input[type="file"] {
    font-size: 16px;
  }

  .doc-buscador {
    flex-basis: 0;
  }

  .as-pagina > .t-panel .field input {
    font-size: 16px;
  }

  .rq-requisitos .t-aviso-accion {
    flex: 1 1 100%;
    min-height: 44px;
    padding-block: 10px;
    white-space: normal;
  }

  .doc-incorporar-tarjeta .t-boton.es-principal {
    flex: 1 1 100%;
    min-height: 52px;
    font-size: 16px;
  }

  /* En el móvil la revisión baja a su línea, bajo el emisor, y no hay flecha. */
  .doc-fila {
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 12px;
    padding-right: 16px;
  }

  .doc-tipo {
    grid-row: 1 / span 2;
    font-size: 11px;
  }

  .doc-texto {
    padding: 10px 0 4px;
  }

  .doc-estado {
    grid-column: 2;
    justify-content: flex-start;
    padding-bottom: 10px;
  }

  .doc-fila > .t-icono {
    display: none;
  }

  .doc-ficha-titulo > .t-boton {
    width: 100%;
  }

  .doc-extraido > summary {
    padding: 0 16px;
  }

  .doc-extraido-texto {
    padding: 14px 16px 18px;
  }

}

/* ── fin de la tanda 11 ── */

/* ── Tanda 12: Preferencias fiscales ──
   Mesas PreferenciasFiscales, …Movil y …Estados (fiscal-ui.ts, clases
   «pf-…»). Se lee como el editor: la frase que se pulsa usa sus clases
   (.ed-frase, .ed-token) y sus bandejas van debajo, en el violeta suave del
   editor. Dos columnas desde 1100 px (la de la derecha, de 320 a 400 px); por
   debajo, una, en el orden de la mesa móvil. «Guardar preferencias», el único
   violeta, en una barra fija abajo. */

/* La única regla nueva de la propuesta: un trozo que pide elegir o declarar,
   en el tono de aviso (la misma que .ed-token[data-falta] del editor). */
.t-pulsable[data-falta] {
  color: var(--warning);
  border-bottom-color: var(--warning);
}

.pf-pagina {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1180px;
  min-width: 0;
  margin-inline: auto;
  font-size: 15px;
  line-height: 1.45;
}

.pf-pagina > * {
  min-width: 0;
  margin-block: 0;
}

.pf-cabecera {
  max-width: 760px;
}

.pf-limite {
  font-size: 13.5px;
}

.pf-pagina > .notice {
  margin: 0;
}

.pf-columnas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.pf-columna {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

@media (min-width: 1100px) {
  .pf-columnas {
    grid-template-columns: minmax(0, 1fr) clamp(320px, 28vw, 400px);
  }
}

/* En una columna, el orden de la mesa móvil: las frases, la preparación, lo
   que hará Talonario según el país, el resumen y la prueba con un borrador. */
@media (max-width: 1099px) {
  /* Todas al mismo ancho: en columna, cada tarjeta se estira. */
  .pf-columnas {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .pf-columna {
    display: contents;
  }

  .pf-frases { order: 1; }
  .pf-preparacion { order: 2; }
  .pf-lado.es-pais { order: 3; }
  .pf-lado.es-resumen { order: 4; }
  .pf-probar { order: 5; }
}

/* ── La tarjeta de frases ── */
.pf-frases {
  padding: 0;
}

.pf-bloque-frase {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 24px;
}

.pf-bloque-frase > * {
  min-width: 0;
  margin: 0;
}

.pf-frase {
  overflow-wrap: anywhere;
}

/* La puntuación no se separa de su trozo: el trozo y su signo van juntos
   (lo de dentro del trozo sí parte línea). */
.pf-junto {
  white-space: nowrap;
}

.pf-junto > .ed-token,
.pf-junto > [data-pf-cola] {
  white-space: normal;
}

.pf-frase .ed-token:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
}

.pf-nota-bloque {
  margin-top: 2px;
}

/* La bandeja de un trozo, como en el editor. */
.pf-pop {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 16px;
  background: var(--sello-piel);
  border-radius: 14px;
}

.pf-pop[hidden] {
  display: none;
}

.pf-pop > * {
  min-width: 0;
  margin: 0;
}

.pf-pop .as-nota {
  color: var(--tinta-2);
}

.pf-opciones {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.pf-opciones > legend.as-etiqueta {
  margin-bottom: 8px;
}

.pf-opciones .t-opcion {
  white-space: normal;
  line-height: 1.25;
}

.pf-opciones .field-hint,
.pf-opciones .field-error {
  display: block;
  max-width: 68ch;
  font-size: 13.5px;
  line-height: 1.45;
}

.pf-opciones .field-hint {
  color: var(--tinta-2);
}

.pf-opciones .field-error {
  color: var(--danger);
  font-weight: 600;
}

/* Un error largo parte línea y no ensancha la tarjeta. */
.pf-pagina .field-error,
.pf-pagina .field-hint,
.pf-error {
  overflow-wrap: anywhere;
}

.pf-pop .as-elecciones {
  margin-bottom: 4px;
}

.pf-opciones[aria-invalid="true"] .t-opcion {
  border-color: var(--danger);
}

.pf-pop .as-territorio {
  padding: 0;
  border: 0;
}

/* ── «Preparación fiscal» y las tarjetas de la derecha: su cabeza ── */
.pf-cabeza {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 24px 16px;
}

.pf-cabeza > * {
  margin: 0;
}

.pf-cabeza > h2 {
  font: 700 20px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.pf-preparacion,
.pf-probar,
.pf-lado {
  padding: 0;
  overflow: hidden;
}

/* Una fila por comprobación: la marca, el nombre con el principio de la
   nota, el estado y la flecha. Abierta, se tiñe y enseña lo suyo. */
.pf-fila {
  border-top: 1px solid var(--line-soft);
}

.pf-fila > summary {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto 18px;
  gap: 0 14px;
  align-items: center;
  min-height: 56px;
  padding: 10px 24px;
  list-style: none;
  cursor: pointer;
}

.pf-fila > summary::-webkit-details-marker {
  display: none;
}

.pf-fila > summary:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -3px;
}

.pf-fila[open] {
  background: var(--sello-piel);
}

@media (hover: hover) {
  .pf-fila:not([open]) > summary:hover {
    background: color-mix(in srgb, var(--papel-2) 55%, var(--papel));
  }
}

.pf-marca {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--tinta);
  border: 1.5px dashed var(--tinta-3);
  border-radius: 50%;
}

.pf-marca > .t-icono {
  width: 14px;
  height: 14px;
  visibility: hidden;
}

.pf-marca.es-declarada {
  border-style: solid;
  border-color: var(--tinta);
}

.pf-marca.es-declarada > .t-icono {
  visibility: visible;
}

.pf-fila-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pf-fila-texto strong {
  font-weight: 600;
}

.pf-fila-texto small {
  overflow: hidden;
  color: var(--tinta-2);
  font-size: 13.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.pf-fila-estado {
  color: var(--tinta-2);
  font-size: 13.5px;
  white-space: nowrap;
}

.pf-fila-flecha {
  width: 18px;
  height: 18px;
  color: var(--tinta-2);
  transition: transform 0.2s var(--salida);
}

.pf-fila[open] .pf-fila-flecha {
  transform: rotate(180deg);
}

.pf-fila-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px 18px 62px;
}

.pf-fila-cuerpo > * {
  margin: 0;
}

/* ── Lo que hará Talonario según el país y el resumen acordado ── */
.pf-hecho {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 24px;
  border-top: 1px solid var(--line-soft);
}

.pf-hecho > * {
  margin: 0;
}

.pf-hecho > h3 {
  font-size: 15px;
  font-weight: 600;
}

.pf-hecho-estado {
  color: var(--tinta-3);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.pf-hecho-frase {
  margin-top: 4px;
}

/* ── Probar con un borrador ── */
.pf-borradores {
  display: flex;
  flex-direction: column;
}

.pf-borrador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 20px;
  gap: 0 14px;
  align-items: center;
  min-height: 60px;
  padding: 10px 24px;
  color: var(--tinta);
  text-decoration: none;
  border-top: 1px solid var(--line-soft);
}

.pf-borrador.es-inerte {
  grid-template-columns: minmax(0, 1fr) auto;
  color: var(--tinta-2);
}

.pf-borrador[aria-current] {
  background: var(--papel-2);
}

.pf-borrador:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: -3px;
}

@media (hover: hover) {
  a.pf-borrador:hover {
    background: color-mix(in srgb, var(--papel-2) 55%, var(--papel));
  }
}

.pf-borrador-texto {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.pf-borrador-texto strong {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pf-borrador-texto small {
  color: var(--tinta-2);
  font-size: 13.5px;
}

.pf-borrador-importe {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pf-borrador > .t-icono {
  width: 18px;
  height: 18px;
  color: var(--tinta-3);
}

.pf-vacio {
  margin: 0 24px 22px;
  padding: 14px 16px;
  background: var(--papel-2);
  border-radius: 12px;
}

.pf-vacio > strong {
  display: block;
  font-weight: 600;
}

.pf-vacio > p {
  margin: 2px 0 0;
}

.pf-probar > .pf-error {
  margin: 0 24px 22px;
}

.pf-error {
  align-items: flex-start;
  margin: 0;
}

.pf-error > div > p {
  margin: 2px 0 0;
  color: var(--tinta-2);
  font-size: 14px;
}

.pf-error > .t-sello {
  margin-top: 1px;
}

/* El resultado: una tarjeta con el sello, bajo la lista. */
.pf-prueba {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 4px 24px 24px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  scroll-margin-top: 16px;
}

.pf-prueba > *,
.pf-prueba-parte > * {
  margin: 0;
}

.pf-prueba-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.pf-sello {
  padding: 3px 8px;
  color: var(--tinta-2);
  font: 500 11px/1.3 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1.5px solid currentColor;
  border-radius: 5px;
}

.pf-prueba > h3 {
  font: 700 20px/1.2 var(--display);
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.pf-prueba-parte {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}

.pf-prueba-parte > h4 {
  font-size: 15px;
  font-weight: 600;
}

.pf-orientacion {
  display: flex;
  flex-direction: column;
  margin: 4px 0 0;
}

.pf-orientacion > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}

.pf-orientacion dt {
  color: var(--tinta-2);
}

.pf-orientacion dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.pf-orientacion > .is-total {
  border-bottom: 0;
}

.pf-bloqueos {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 0 0 0 18px;
}

.pf-bloqueos li::marker {
  color: var(--warning);
}

.pf-bloqueos strong {
  display: block;
  font-weight: 500;
}

.pf-bloqueos small {
  display: block;
  color: var(--tinta-3);
  font: 400 12px/1.4 var(--mono);
  overflow-wrap: anywhere;
}

.pf-prueba-pie {
  padding-top: 12px;
  color: var(--tinta-2);
  font-size: 13px;
  border-top: 1px solid var(--line-soft);
}

/* La marca que exige la prueba fiscal, al pie y en pequeño: no compite con el sello. */
.pf-prueba-marca {
  margin-top: -6px;
  color: var(--tinta-3);
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
}

/* ── La barra de guardar, fija abajo como la del total del editor ── */
.pf-barra {
  position: sticky;
  bottom: var(--barra-alto, 0px);
  z-index: 15;
  margin-top: 24px;
  padding: 14px 20px;
  background: var(--papel);
  border: 1px solid var(--line-soft);
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -14px 30px -24px rgba(27, 24, 32, 0.35);
}

.pf-barra-dentro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.pf-barra-casilla {
  display: flex;
  flex: 1 1 320px;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.pf-confirmar {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.pf-confirmar > input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 1px 0 0;
  accent-color: var(--tinta);
}

.pf-confirmar strong {
  display: block;
  font-weight: 600;
}

.pf-confirmar small {
  display: block;
  color: var(--tinta-2);
  font-size: 13px;
  line-height: 1.4;
}

.pf-confirmar.es-error strong {
  color: var(--danger);
}

.pf-barra-casilla > .field-error {
  padding-left: 32px;
  font-size: 13.5px;
}

/* La nota de guardar va en la barra, bajo la casilla; en el móvil, al final
   de la página (la misma frase: una se enseña y la otra no). */
.pf-nota-guardar {
  display: none;
}

.pf-barra .t-boton.es-principal {
  flex: none;
  gap: 0;
  min-height: 50px;
  padding: 0 24px;
  font-size: 15px;
  border-radius: 11px;
}

/* «Preferencias guardadas.» flota por encima de la barra de guardar, no sobre ella. */
.pf-pagina > .t-aviso-temporal {
  bottom: 112px;
}

@media (max-width: 760px) {
  .pf-pagina > .t-aviso-temporal {
    bottom: calc(84px + var(--barra-alto, 0px) + var(--barra-asoma, 0px));
  }

  .pf-pagina {
    gap: 14px;
  }

  .pf-cabecera {
    padding-inline: 4px;
  }

  .pf-cabecera .fe-volver {
    margin-left: -4px;
  }

  .pf-cabecera .as-titulos h1 {
    font-size: 30px;
  }

  .pf-cabecera .as-titulos p {
    font-size: 13.5px;
  }

  .pf-columnas {
    gap: 14px;
  }

  .pf-bloque-frase {
    padding: 18px 16px;
  }

  .pf-pop {
    padding: 14px 12px;
  }

  .pf-cabeza {
    padding: 16px 16px 12px;
  }

  /* La fila estrecha: el estado baja bajo el nombre (mesa móvil). */
  .pf-fila > summary {
    grid-template-columns: 24px minmax(0, 1fr) 18px;
    padding: 10px 16px;
  }

  .pf-fila-texto {
    grid-column: 2;
  }

  .pf-fila-estado {
    grid-row: 2;
    grid-column: 2;
  }

  .pf-fila-flecha {
    grid-row: 1;
    grid-column: 3;
  }

  .pf-fila-cuerpo {
    padding: 0 16px 16px;
  }

  .pf-hecho,
  .pf-borrador {
    padding-inline: 16px;
  }

  .pf-vacio,
  .pf-probar > .pf-error {
    margin-inline: 16px;
  }

  .pf-prueba {
    margin-inline: 12px;
    padding: 14px;
  }

  /* Todo campo escribe a 16 px: por debajo, el iPhone amplía la página. */
  .pf-pagina .field input,
  .pf-pagina .field textarea {
    font-size: 16px;
  }

  /* La barra, en una fila: la casilla con su frase (dos líneas como mucho) y
     «Guardar». Va por encima de la barra de secciones y del «+» que asoma. */
  .pf-barra {
    bottom: calc(var(--barra-alto, 0px) + var(--barra-asoma, 0px));
    margin-inline: -4px;
    padding: 10px 12px;
  }

  .pf-barra-dentro {
    flex-wrap: nowrap;
    gap: 12px;
  }

  .pf-barra-casilla {
    flex: 1 1 auto;
  }

  .pf-confirmar {
    gap: 10px;
  }

  .pf-confirmar strong {
    font-size: 14px;
    line-height: 1.3;
  }

  .pf-confirmar small,
  .pf-boton-resto {
    display: none;
  }

  .pf-barra .t-boton.es-principal {
    min-height: 46px;
    padding: 0 18px;
  }

  .pf-nota-guardar {
    display: block;
    margin: 14px 4px 0;
  }
}

/* ── fin de la tanda 12 ── */

/* ── Repaso B ──
   Retoques que el chat de diseño encontró al dibujar el lienzo completo
   (14-nov): las piezas comunes de error y de «hecho», Conceptos, la
   paginación, Ajustes, Stripe, las formas de cobro y Clientes. No cambia
   ningún texto salvo «Reactivar» ni ningún formulario. */

/* La paginación de las listas (Conceptos, Facturas y Clientes): botones de
   44 px, como el resto, y en secundario. El violeta de la pantalla es otro:
   «Siguiente» va en tinta. */
.t-pagina-boton {
  min-height: 44px;
  padding: 0 16px;
  color: var(--tinta);
  font: 600 14px/1.2 var(--ui);
  background: var(--papel);
  border-color: var(--borde-control);
  border-radius: 10px;
}

.t-pagina-boton:hover {
  background: var(--papel-2);
  border-color: var(--tinta-3);
}

.t-pagina-boton.is-inerte {
  color: var(--tinta-3);
  background: var(--papel-2);
  border-color: var(--line-soft);
}

/* Las pestañas de Conceptos: el segmento de Facturas y Clientes. */
.as-pagina > .fa-pestanas {
  align-self: flex-start;
  flex-wrap: nowrap;
  gap: 2px;
  width: auto;
  margin: 0;
  padding: 3px;
  background: var(--papel-2);
  border: 1px solid var(--line-soft);
  border-radius: 13px;
}

.as-pagina > .fa-pestanas > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  color: var(--tinta-2);
  font: 600 14px/1.2 var(--ui);
  white-space: nowrap;
  text-decoration: none;
  border-radius: 10px;
}

.as-pagina > .fa-pestanas > [aria-current] {
  color: var(--tinta);
  background: var(--elevado);
  box-shadow: 0 0 0 1px var(--line-soft), 0 6px 12px -10px rgba(27, 24, 32, 0.6);
}

@media (hover: hover) {
  .as-pagina > .fa-pestanas > :not([aria-current]):hover {
    color: var(--tinta);
  }
}

.as-pagina > .fa-pestanas .fa-numero {
  padding: 4px 6px;
  color: var(--tinta-2);
  font: 500 11.5px/1 var(--mono);
  background: var(--mesa);
  border-radius: 6px;
}

.as-pagina > .fa-pestanas > [aria-current] .fa-numero {
  color: var(--papel);
  background: var(--tinta);
}

/* La barra del lote de Conceptos: con JavaScript, la página reserva su
   sitio siempre, no solo cuando aparece. Si aparecía estando ya al final de
   la página, el hueco llegaba después y la barra tapaba «Nuevo concepto». */
body:has(.as-pagina > .t-lote.es-controlada) .content {
  padding-bottom: 104px;
}

/* Las formas de cobro: el correo y el enlace de PayPal, con la etiqueta
   encima, como los demás campos (su fila se enseña con display: flex). */
.payment-profile-paypal-email-field,
.payment-profile-paypal-url-field {
  flex-direction: column;
  align-items: stretch;
}

/* Clientes. «Reactivar» en el error del NIF: un enlace en el tono del
   error, como el nombre del cliente que lo acompaña, no un segundo violeta. */
.cli-reactivar {
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  background: none;
  border: 0;
  cursor: pointer;
}

/* El cliente sin tipo, antes de intentar guardar: le falta un dato. El
   resumen de arriba es el aviso de una frase y el grupo de pastillas lleva
   el borde en el tono de aviso, como la frase de debajo. Tras un guardado
   rechazado, todo pasa al rojo de los errores. */
.cli-titular:has(+ .t-aviso + .cli-form),
.t-aviso:has(+ .cli-form) {
  max-width: 640px;
}

.cli-titular ~ .t-aviso:has(+ .cli-form) {
  margin-bottom: 20px;
}

.cli-opciones.es-falta {
  width: fit-content;
  max-width: calc(100% + 10px);
  margin: -5px;
  padding: 4px;
  border: 1px solid var(--warning);
  border-radius: 26px;
  box-shadow: 0 0 0 1px var(--warning);
}

/* La caducidad de una empresa de la UE: el texto en su columna y «Abrir
   VIES» a su lado, como el aviso de documento repetido; en estrecho, la
   acción baja a su línea. */
.cli-caducada-texto {
  flex: 1 1 260px;
  min-width: 0;
}

@media (max-width: 979.98px) {
  /* La fila de un cliente sin ninguna factura: sin la raya sola a la
     derecha (la etiqueta para el lector va con ella). */
  .cli-fila:not(.es-lmm) > .cli-debe:has(> .cli-nada) {
    display: none;
  }
}

@media (max-width: 760px) {
  /* Las tres pestañas de Conceptos, en una línea a 390 px. */
  .as-pagina > .fa-pestanas {
    align-self: stretch;
  }

  .as-pagina > .fa-pestanas > a {
    flex: 1 1 0;
    justify-content: center;
    gap: 5px;
    padding-inline: 6px;
    font-size: 13px;
  }

  .as-pagina > .fa-pestanas .fa-numero {
    padding: 3px 4px;
    font-size: 10.5px;
  }

  body:has(.as-pagina > .t-lote.es-controlada) .content {
    padding-bottom: 168px;
  }
}

/* ── fin del repaso B ── */

/* ── Repaso A ──
   Lo que el chat de diseño encontró al dibujar el lienzo completo (14-nov),
   en Inicio, Informes, Documentos y las páginas de error. Los dos valores
   globales (el radio de las tarjetas, 18 px, y el título de página, 44 px en
   una portada y 40 en una subpágina) no están aquí: van en la regla de cada
   pieza, para no repetirlos. */

/* ── El panel bloqueado: «BLOQUEO SEGURO» es el sello, sobre el título ── */
.t-vacio.es-pagina > .t-sello {
  display: inline-block;
  margin-bottom: 14px;
}

/* ── Inicio: la nota para cerrar una tarea, con las piezas comunes ──
   La etiqueta, el campo y la ayuda, a los tamaños de los formularios de la
   ficha; «Dar por resuelto», a 44 px como los demás botones de una fila, y
   «Cancelar» con su misma altura para pulsarlo. */
.ne-asunto > .ne-cerrar label {
  color: var(--tinta);
  font-size: 13.5px;
  font-weight: 600;
}

.ne-asunto > .ne-cerrar textarea {
  font-size: 15px;
  border-radius: 11px;
}

.ne-asunto > .ne-cerrar .ne-ayuda {
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

.ne-asunto > .ne-cerrar .ne-cerrar-botones .t-boton {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14.5px;
  border-radius: 11px;
}

.ne-asunto > .ne-cerrar .ne-cerrar-botones .ne-salida {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* «Abrir» de los borradores, en tinta: el violeta es «Nueva factura». */
.in-borradores-abrir {
  color: var(--tinta);
}

@media (max-width: 760px) {
  .ne-asunto > .ne-cerrar textarea {
    font-size: 16px;
  }
}

/* ── Informes: ninguna tarjeta se estira para igualar a la de al lado ──
   Completa la regla de la revisión de las tandas 8 y 9a: tampoco «Tus
   facturas», «Ventas de la web» ni «Mes a mes». */
.inf-rejilla > .inf-bloque {
  align-self: start;
}

/* ── La factura de comisiones de Stripe: la subpágina tipo ──
   Arriba, la pregunta y las pastillas; al pie, «Guardar» y la nota. */
.if-pagina > .if-pregunta {
  gap: 0;
}

.if-pregunta-titulo {
  margin: 0;
  font: 700 19px/1.2 var(--display);
  letter-spacing: -0.02em;
}

.if-pagina .if-pregunta-form {
  display: block;
}

.if-pregunta-meses {
  padding: 0 24px 22px;
}

@media (max-width: 760px) {
  .if-pregunta-meses {
    padding: 0 16px 16px;
  }
}

/* ── Documentos ── */
/* «Posible documento repetido»: el titular en su línea, sobre la frase. */
.doc-repetido-texto > strong {
  display: block;
}

/* «Incorporar documento», abierto bajo el título: la tarjeta, al ancho de
   una subpágina (760 px). El plegado va en bloque: como caja flexible, el
   navegador encogía su contenido al ancho del formulario. El botón sigue a
   su ancho. Dentro del estado vacío (la lista sin documentos) se queda
   como estaba, centrado. */
.doc-pagina > .doc-incorporar {
  display: block;
}

.doc-pagina > .doc-incorporar > .doc-incorporar-tarjeta {
  margin-top: 12px;
}

/* En el móvil, el buscador ocupa su línea y «Buscar» va debajo, y la frase
   de ayuda va a 14,5 px: así cabe entera a 390 px (a 15 todavía se corta).
   Lo que se escribe sigue a 16 px, para que el iPhone no amplíe la página. */
@media (max-width: 760px) {
  .doc-buscar > .doc-buscador {
    flex: 1 1 100%;
  }

  .doc-buscar > .t-boton {
    flex: 1 1 100%;
  }

  .doc-buscador input::placeholder {
    font-size: 14.5px;
  }
}

/* ── La página de reintento: el resumen con «Revisa», al ancho de su tarjeta ── */
.t-error-guardar:has(+ .fe-reintento) {
  max-width: 520px;
}

/* ── fin del repaso A ── */

/* ── Repaso C ──
   Lo que el chat de diseño encontró al medir las 510 pantallas (14-nov).
   Los valores de piezas comunes (el título de Informes y del canje, el
   radio de la ficha de una rectificativa y el menú «•••») van en la regla
   de cada pieza, como en el repaso A. Aquí, lo demás. */

/* El envío de prueba a Hacienda: el título de una subpágina, 40 px (30 en
   el móvil), como el del envío de la instalación fiscal (es-ancha). */
.hz-cabecera h1 {
  font-size: 40px;
  line-height: 1.02;
}

@media (max-width: 760px) {
  .hz-cabecera h1 {
    font-size: 30px;
  }
}

/* Informes: «Registros de Hacienda» es una franja a todo el ancho, de una
   fila, entre la pareja de arriba (el paquete y el año) y la de abajo. El
   paquete ya no ocupa dos filas ni se estira. Sin el año, el paquete va a
   todo el ancho, como cuando no hay nada a su lado. */
@media (min-width: 1000px) {
  .inf-rejilla.con-dos {
    grid-template-rows: none;
  }

  .inf-rejilla.con-dos > .inf-paquete {
    grid-row: auto;
  }

  .inf-rejilla > .inf-registros {
    grid-column: 1 / -1;
  }

  .inf-rejilla.con-uno:not(:has(> .inf-anio)) > .inf-paquete {
    grid-column: 1 / -1;
  }
}

/* En el móvil, en su sitio del orden de la página: tras el paquete y el
   año, antes de «Tus facturas» (ya no va al final). */
@media (max-width: 760px) {
  .inf-rejilla > .inf-registros {
    order: 0;
  }
}

/* ── fin del repaso C ── */

/* ── Tanda 13: la entrada nueva ──
   «El año» (15-nov, aprobada por Fer): /login y los cuatro pasos de
   recuperar la contraseña (src/ui.ts, accesoPage). La pantalla entera, sin
   tarjeta flotando en el centro: arriba la marca y «La Manzana Mordida»
   con el año; en el centro, la fecha de hoy en grande (o los tres pasos) y
   la tarjeta de siempre; al pie, la franja del año con Hacienda. Las
   piezas de dentro de la tarjeta son las de la tanda 2 (más arriba); aquí
   solo cambian sus medidas. Mesas: docs/plans/2026-11-14-propuesta-visual
   (AccesoB…). Cortes: una columna por debajo de 900 px; entre 900 y 1280,
   el número y la tarjeta más pequeños; con menos de 760 px de alto, el
   centro deja de centrarse y la página se desplaza. */

.acceso.entrada {
  padding: 0;
}

.entrada-cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 56px 0;
}

.entrada-casa {
  text-align: right;
}

/* El centro: la fecha (o los pasos) y la tarjeta. */
.entrada-centro {
  flex: 1 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 72px;
  align-items: center;
  padding: 32px 56px;
  animation: acceso-llega 0.5s var(--salida) both;
}

.entrada-lado {
  min-width: 0;
}

.entrada-lado-rotulo {
  font-size: 13px;
}

/* El número del día y, a su derecha y alineados por abajo, el mes y lo
   que queda para el plazo. Si no caben al lado (anchos intermedios), el mes
   y la frase bajan bajo el número. */
.entrada-lado:not(.es-pasos) {
  container-type: inline-size;
}

.entrada-fecha {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  column-gap: 26px;
  margin-top: 6px;
}

.entrada-fecha time {
  display: contents;
}

.entrada-fecha b,
.entrada-fecha time span {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.entrada-fecha b {
  grid-column: 1;
  grid-row: 1 / 3;
  align-self: end;
  font-variant-numeric: normal;
  font-size: 260px;
  line-height: 0.8;
  /* Las mesas dicen -0.06em, pero con la tipografía del panel el 1 y el 5
     se tocan y 21, 28, 13 o 17 se montan. A -0.03em queda un hueco en todos
     los pares (de 4 a 8 px a 260 px; medido en Chrome, 15-nov). */
  letter-spacing: -0.03em;
}

.entrada-fecha time span {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  font-size: 60px;
  line-height: 1.02;
}

.entrada-quedan {
  grid-column: 2;
  grid-row: 2;
  margin: 12px 0 0;
  padding-bottom: 6px;
  color: var(--tinta-2);
  font-size: 19px;
  line-height: 1.35;
}

/* Solo en ancho: en el móvil el mes va siempre al lado, más pequeño. */
@media (min-width: 900px) {
  @container (max-width: 520px) {
    .entrada-fecha {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto;
    }

    .entrada-fecha b,
    .entrada-fecha time span,
    .entrada-quedan {
      grid-column: 1;
      grid-row: auto;
    }

    .entrada-fecha time span {
      margin-top: 18px;
    }
  }
}

/* Recuperar la contraseña: los tres pasos en lista. */
.entrada-pasos {
  display: grid;
  gap: 22px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.entrada-pasos li {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  color: var(--tinta-3);
}

.entrada-pasos li[aria-current="step"] {
  color: var(--tinta);
}

.entrada-pasos b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font: 500 20px/1 var(--mono);
  border: 2px solid var(--trazo);
  border-radius: 50%;
}

.entrada-pasos li[aria-current="step"] b {
  color: var(--mesa);
  background: var(--tinta);
  border-color: var(--tinta);
}

.entrada-pasos .t-ico {
  width: 24px;
  height: 24px;
}

.entrada-pasos li > span {
  font: 800 52px/1.02 var(--display);
  letter-spacing: -0.035em;
}

.acceso-solo-estrecho {
  display: none;
}

/* La tarjeta: papel, radio 18, sombra de hoja y 36 px de relleno. */
.entrada .acceso-hoja,
.acceso.entrada.es-recuperar .acceso-hoja {
  gap: 24px;
  padding: 36px 36px 30px;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  box-shadow: var(--shadow-alta);
  transform-origin: center top;
}

.entrada .acceso-error {
  border-radius: 14px;
}

.entrada .acceso-campo input {
  min-height: 52px;
}

/* El botón a todo el ancho y, debajo, el enlace. El enlace va antes en el
   código: el orden del teclado no cambia. */
.entrada .acceso-fila,
.acceso.entrada.es-recuperar .acceso-fila {
  flex-direction: column-reverse;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 6px;
  margin-top: 6px;
}

.acceso.entrada.es-recuperar .acceso-fila {
  margin-top: 0;
}

.entrada .acceso-fila.es-fin,
.acceso.entrada.es-recuperar .acceso-fila.es-fin {
  margin-top: 4px;
}

.entrada .acceso-fila > span:empty {
  display: none;
}

.entrada .acceso-fila:not(.es-sola) > .acceso-boton {
  margin-left: 0;
}

.entrada .acceso-boton,
.entrada .acceso-boton.es-secundario {
  width: 100%;
  min-height: 54px;
  padding: 0 26px;
  font-size: 16px;
}

.entrada .acceso-enlace {
  align-self: flex-start;
}

/* ── La franja del año, pegada al pie ── */
.entrada-ano {
  flex: none;
  position: relative;
  background: var(--papel);
  border-top: 1px solid var(--line);
  /* Nada de la franja ensancha la página; el punto asoma por arriba. */
  overflow-x: clip;
}

/* La línea que recorre el año: 3 px y el punto hueco de 16 px. El carril
   es la pista y deja 10 px a cada lado: el punto nunca se sale del borde. */
.entrada-ano-via {
  /* Contiene el margen negativo de la línea: si no, sube el carril entero. */
  display: flow-root;
  height: 3px;
  padding: 0 10px;
  background: var(--pista);
}

.entrada-ano-linea {
  display: block;
  width: 100%;
  height: 16px;
  margin-top: -7px;
  overflow: visible;
}

.entrada-ano-avance {
  fill: var(--tinta);
}

.entrada-ano-hoy {
  fill: var(--papel);
  stroke: var(--tinta);
  stroke-width: 3;
}

/* Cuatro columnas iguales, una por trimestre, separadas por una línea. */
.entrada-trimestres {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.entrada-trimestre {
  padding: 22px 28px 26px;
  border-left: 1px solid var(--line-soft);
}

.entrada-trimestre:first-child {
  border-left: 0;
}

/* El destacado: el trimestre que se presenta o, fuera de la ventana, el
   que está en curso. */
.entrada-trimestre.es-destacado {
  background: var(--elevado);
}

/* Si el rótulo y el estado no caben en una línea (hacia 900 px), el estado
   baja entero: ningún rótulo se parte. */
.entrada-trimestre-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 10px;
  margin: 0;
}

.entrada-trimestre-cabeza .t-rotulo {
  white-space: nowrap;
}

.entrada-trimestre.es-destacado .t-rotulo {
  color: var(--tinta);
}

.entrada-trimestre-meses {
  margin: 14px 0 0;
  color: var(--tinta-3);
  font: 800 34px/1.02 var(--display);
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.entrada-trimestre.es-destacado .entrada-trimestre-meses {
  color: var(--tinta);
}

.entrada-trimestre-nota {
  margin: 6px 0 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  line-height: 1.45;
}

/* En estrecho: solo el trimestre de hoy y los días que faltan. */
.entrada-ano-hoy {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 4px 16px;
  padding: 18px 16px 26px;
}

.entrada-ano-hoy-rotulo {
  grid-column: 1;
  grid-row: 1;
  color: var(--tinta);
}

/* Si el rótulo no cabe en una línea, parte entre el trimestre y el estado,
   nunca dentro de ninguno de los dos. */
.entrada-ano-hoy-rotulo > span {
  display: inline-block;
  white-space: nowrap;
}

.entrada-ano-faltan-rotulo {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
}

.entrada-ano-hoy-que {
  grid-column: 1;
  grid-row: 2;
}

.entrada-ano-hoy .entrada-trimestre-meses {
  margin: 0;
  color: var(--tinta);
  font-size: 28px;
}

.entrada-ano-hoy .entrada-trimestre-nota {
  margin-top: 4px;
}

.entrada-ano-faltan {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  color: var(--tinta-2);
  font-size: 13.5px;
  text-align: right;
  white-space: nowrap;
}

.entrada-ano-faltan b {
  color: var(--tinta);
  font: 800 28px/1.02 var(--display);
  letter-spacing: -0.035em;
}

/* El último día, «Hoy» ocupa el sitio de «Faltan» y los días, apilado y a
   la derecha para no estrechar la columna de la izquierda. */
.entrada-ano-hoy-que + .entrada-ano-faltan {
  grid-row: 1 / span 2;
  align-self: end;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* ── Entre 900 y 1280 px: las dos columnas, más pequeñas ── */
@media (min-width: 900px) and (max-width: 1280px) {
  .entrada-centro {
    grid-template-columns: minmax(0, 1fr) 400px;
  }

  .entrada-fecha b {
    font-size: 200px;
  }

  .entrada-fecha time span {
    font-size: 44px;
  }
}

/* ── Con poco alto, el centro deja de centrarse y la página se desplaza ── */
@media (min-width: 900px) and (max-height: 759.98px) {
  .entrada-centro {
    align-items: start;
  }
}

/* ── Móvil, y por debajo de 900 px: una columna ── */
@media (max-width: 899.98px) {
  /* El contenido, a 460 px como mucho y centrado; en el móvil, a 16 px del borde. */
  .entrada {
    --entrada-lado: max(16px, calc((100% - 460px) / 2));
  }

  .entrada-cabeza {
    padding: 8px var(--entrada-lado) 0;
  }

  .acceso-cabeza-marca {
    gap: 9px;
  }

  .entrada-casa {
    display: none;
  }

  .entrada-centro {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 22px;
    padding: 20px var(--entrada-lado) 28px;
  }

  .entrada.es-recuperar .entrada-centro {
    gap: 24px;
  }

  .entrada-lado-rotulo {
    font-size: 11px;
  }

  .entrada-fecha {
    column-gap: 12px;
    margin-top: 4px;
  }

  .entrada-fecha b {
    font-size: 112px;
  }

  .entrada-fecha time span {
    margin-top: 0;
    padding-bottom: 2px;
    font-size: 30px;
  }

  /* En el móvil, los días que faltan los dice la franja. */
  .entrada-quedan {
    display: none;
  }

  .acceso-solo-ancho {
    display: none;
  }

  .acceso-solo-estrecho {
    display: block;
  }

  .entrada-paso {
    margin: 0;
  }

  .entrada-paso .t-rotulo,
  .entrada-paso strong {
    display: block;
  }

  .entrada-paso strong {
    margin-top: 6px;
    font: 800 40px/1.02 var(--display);
    letter-spacing: -0.035em;
  }

  .entrada-tramos.acceso-solo-estrecho {
    display: flex;
    gap: 6px;
    margin-top: 16px;
  }

  .entrada-tramos span {
    flex: 1;
    height: 4px;
    background: var(--pista);
    border-radius: 2px;
  }

  .entrada-tramos span.es-hecho {
    background: var(--tinta);
  }

  .entrada .acceso-hoja,
  .acceso.entrada.es-recuperar .acceso-hoja {
    gap: 18px;
    padding: 22px 20px 12px;
    border-radius: 18px;
  }

  .acceso.entrada.es-recuperar .acceso-hoja {
    gap: 20px;
  }

  .entrada .acceso-titulos {
    gap: 4px;
  }

  .acceso.entrada.es-recuperar .acceso-titulos {
    gap: 10px;
  }

  .entrada .acceso-hoja h1 {
    font-size: 32px;
  }

  .acceso.entrada.es-recuperar .acceso-hoja h1 {
    font-size: 30px;
  }

  .entrada .acceso-sub,
  .entrada .acceso-mensaje {
    font-size: 15px;
  }

  .entrada .acceso-form {
    gap: 14px;
  }

  .entrada .acceso-campo input {
    min-height: 50px;
  }

  .entrada .acceso-fila,
  .acceso.entrada.es-recuperar .acceso-fila {
    gap: 6px;
    margin-top: 4px;
  }

  .acceso.entrada.es-recuperar .acceso-fila {
    margin-top: 0;
  }

  /* Si la tarjeta acaba en un botón, 20 px debajo; si acaba en el enlace,
     los 12 del relleno y el alto del enlace. */
  .entrada .acceso-fila.es-fin,
  .entrada .acceso-fila.es-sola {
    margin-bottom: 8px;
  }

  .entrada .acceso-enlace {
    align-self: stretch;
    justify-content: center;
    margin-bottom: 0;
  }

  .entrada .acceso-boton,
  .entrada .acceso-boton.es-secundario {
    min-height: 52px;
  }

  .entrada .t-reglas {
    flex-direction: row;
    gap: 6px 20px;
  }

  .entrada .t-ronda {
    width: 52px;
    height: 52px;
  }

  .entrada .t-ronda .t-ico {
    width: 26px;
    height: 26px;
  }

  .entrada-ano-hoy.acceso-solo-estrecho {
    display: grid;
    padding: 18px var(--entrada-lado) 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entrada-centro {
    animation: none;
  }
}

/* ── fin de la tanda 13 ── */

/* ── Repaso D ──
   Móvil: las barras, fuera mientras se escribe.
   Guion del iPhone (15-nov), paso 9: con el teclado abierto, Safari sube lo
   que va pegado abajo y la barra de secciones y la de guardar de
   Preferencias fiscales quedaban flotando sobre el campo. Decisión de
   diseño, para todo el móvil: mientras un campo de texto, una lista o un
   área de texto tiene el foco, la pantalla es para el campo. Casillas y
   botones no cuentan. Por foco y sin script; el hueco reservado para la
   barra (--barra-alto) no cambia, así la página no da un salto. */
@media (max-width: 760px) {
  html:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="image"]), select, textarea):focus) .t-barra {
    display: none;
  }

  /* La de guardar deja de pegarse y queda al final del formulario, donde ya
     está en el flujo: «Guardar» se alcanza desplazando hasta abajo. */
  html:has(:is(input:not([type="checkbox"], [type="radio"], [type="button"], [type="submit"], [type="reset"], [type="hidden"], [type="file"], [type="range"], [type="color"], [type="image"]), select, textarea):focus) .pf-barra {
    position: static;
  }
}

/* ── fin del repaso D ── */