/* ==========================================================================
   RC Facturación — hoja base del panel y de los componentes compartidos
   RC Soluciones Digitales · https://rcsolucionesdigitales.com

   Contrato de uso (HTML exacto de cada componente): docs/ui/GUIA-UI.md
   Muestra viva con datos ficticios:                 docs/ui/guia-estilos.html

   Sin dependencias y sin paso de compilación. Todo lo esencial funciona sin
   JavaScript; public/assets/js/app.js solo añade mejoras.

   Índice
     01. Tokens
     02. Base
     03. Accesibilidad: foco, texto oculto, salto al contenido
     04. Estructura del panel
     05. Botones y enlaces
     06. Iconos dibujados con CSS
     07. Formularios
     08. Menú desplegable
     09. Insignias y franja de estados
     10. Avisos
     11. Tarjetas, listas, indicadores y progreso
     12. Pestañas y cronología
     13. Diálogo y desplegable
     14. Listados: barra, tabla, lote, paginación, vacío
     15. Editor de documentos: líneas y resumen
     16. Detalle de documento: hoja, partes, totales
     17. Utilidades
     18. Preferencias del usuario: movimiento y contraste forzado
     19. Impresión
   ========================================================================== */


/* ==========================================================================
   01. Tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Marca -----------------------------------------------------------
     Lo único que cambia de una marca a otra. Se declara en <html>.
     --acento         decorativo: líneas, halos y fondos teñidos. Sobre blanco
                      NO da contraste para texto ni para indicar estados.
     --acento-fuerte  texto, enlaces, botones y marcadores de estado. Se
                      deriva de --acento (más abajo); una marca puede fijarlo
                      a mano si da 4,5:1 o más sobre blanco.
     --sobre-acento   texto encima de --acento-fuerte (4,5:1 como mínimo).   */
  --acento: #d4af6a;
  --acento-fuerte: #7b5d23;
  --sobre-acento: #ffffff;

  /* Derivados del acento. Los valores declarados son los de la marca RC y
     sirven donde el navegador no sabe calcularlos; más abajo se recalculan
     a partir de --acento. */
  --acento-fuerte-2: #694f1e;  /* al pasar el cursor y al pulsar */
  --acento-suave: #f9f4ea;     /* fondo teñido: fila seleccionada, opción activa */
  --acento-tenue: #ecdbbc;     /* selección de texto y bordes teñidos */

  /* --- Tinta y papel ---------------------------------------------------- */
  --tinta: #1b1914;            /* texto principal */
  --tinta-2: #4f4b43;          /* texto secundario */
  --tinta-3: #666157;          /* ayudas y marcadores de posición */
  --tinta-inactiva: #8a8579;   /* controles deshabilitados */
  --papel: #ffffff;            /* fondo */
  --papel-2: #f7f6f2;          /* superficie sutil: cabeceras, cursor encima */
  --papel-3: #efede7;          /* superficie marcada: pulsado, pistas, deshabilitado */
  --linea: #e4e1d9;            /* filetes decorativos */
  --linea-fuerte: #857f72;     /* bordes de controles (3:1 sobre blanco) */
  --sobre-tinta: #ffffff;      /* texto sobre fondo de tinta */
  --sobre-tinta-2: #dcd8ce;

  /* --- Tonos de estado ---------------------------------------------------
     -texto  4,5:1 sobre su -fondo y sobre blanco
     -marca  3:1 sobre blanco y sobre su -fondo (marcadores y bordes)       */
  --neutro-texto: #4f4b43;
  --neutro-fondo: #f1efe9;
  --neutro-borde: #d4cfc3;
  --neutro-marca: #857f72;
  --info-texto: #1f4f8f;
  --info-fondo: #eaf1fb;
  --info-borde: #b3caee;
  --info-marca: #2a62b0;
  --exito-texto: #17663a;
  --exito-fondo: #e9f5ed;
  --exito-borde: #a9d6ba;
  --exito-marca: #1c7a45;
  --aviso-texto: #8f3f00;
  --aviso-fondo: #fff1e5;
  --aviso-borde: #f1c193;
  --aviso-marca: #a84f00;
  --peligro-texto: #a3231c;
  --peligro-fondo: #fdecea;
  --peligro-borde: #f0b1ac;
  --peligro-marca: #b8281f;
  --peligro-marca-2: #9c2019;

  /* --- Tipografía (solo fuentes del sistema) ---------------------------- */
  --fuente-texto: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --fuente-rotulo: Bahnschrift, "DIN Alternate", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fuente-codigo: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "SF Mono", Menlo, "Liberation Mono", "DejaVu Sans Mono", monospace;

  --texto-xs: 0.75rem;
  --texto-s: 0.8125rem;
  --texto-m: 0.9375rem;
  --texto-base: 1rem;
  --texto-l: 1.125rem;
  --texto-xl: 1.375rem;
  --texto-2xl: 1.75rem;
  --texto-3xl: 2.25rem;

  --peso-normal: 400;
  --peso-medio: 600;
  --peso-fuerte: 700;

  --interlinea: 1.5;
  --interlinea-ajustada: 1.2;

  /* --- Espaciado (base de 4 px) ---------------------------------------------
     Separaciones y rellenos usan estos pasos. Los ajustes ópticos dentro de
     un componente (2, 6, 10 o 14 px) van escritos en rem. */
  --esp-1: 0.25rem;
  --esp-2: 0.5rem;
  --esp-3: 0.75rem;
  --esp-4: 1rem;
  --esp-5: 1.5rem;
  --esp-6: 2rem;
  --esp-7: 3rem;
  --esp-8: 4rem;

  /* --- Radios y sombras -------------------------------------------------- */
  --radio-1: 2px;
  --radio-2: 4px;
  --radio-3: 8px;
  --radio-pildora: 999px;

  --sombra-1: 0 1px 2px rgba(27, 25, 20, 0.06), 0 2px 8px rgba(27, 25, 20, 0.06);  /* elevación leve */
  --sombra-2: 0 4px 12px rgba(27, 25, 20, 0.1), 0 12px 32px rgba(27, 25, 20, 0.1);  /* menús y cajas que flotan */
  --sombra-3: 0 24px 64px rgba(27, 25, 20, 0.28);                                   /* diálogos y hojas inferiores */
  --sombra-barra: 0 -6px 16px rgba(27, 25, 20, 0.08);                               /* barras pegadas al borde inferior */

  /* --- Medidas de la estructura ------------------------------------------ */
  --ancho-lateral: 15rem;
  --ancho-contenido: 90rem;
  --ancho-resumen: 20rem;
  --alto-cabecera: 3.5rem;
  --alto-demo: 0rem;           /* 2rem cuando hay banda «Demostración» */
  --margen-contenido: 1rem;

  /* Objetivos táctiles: 44 px. Con ratón en pantallas anchas se compactan. */
  --alto-control: 2.75rem;
  --alto-compacto: 2.75rem;
  --alto-fila: 2.75rem;
  /* Relleno que lleva un enlace de texto hasta los 44 px de alto. */
  --tactil-v: max(0px, calc((2.75rem - 1.15em) / 2));
  --tactil-h: 0.25rem;

  /* --- Capas -------------------------------------------------------------- */
  --z-pegado: 10;
  --z-cabecera: 20;
  --z-lateral: 30;
  --z-menu: 40;
  --z-demo: 50;

  /* --- Movimiento --------------------------------------------------------- */
  --transicion: 120ms ease-out;
  --transicion-lenta: 200ms ease-out;

  /* --- Foco: anillo de tinta con separación y halo del acento ------------- */
  --foco: var(--tinta);
  --foco-hueco: var(--papel);
  --foco-halo: var(--acento);
}

@media (min-width: 40em) {
  :root {
    --margen-contenido: 1.5rem;
  }
}

@media (min-width: 64em) {
  :root {
    --margen-contenido: 2rem;
  }
}

@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  :root {
    --alto-control: 2.375rem;
    --alto-compacto: 2rem;
    --alto-fila: 2.25rem;
    --tactil-v: 0px;
    --tactil-h: 0px;
  }
}

/* Derivados calculados. Basta con declarar --acento en <html>.
   Primer escalón: mezclas (para navegadores que aún no derivan colores). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --acento-fuerte-2: color-mix(in srgb, var(--acento-fuerte) 85%, #000);
    --acento-suave: color-mix(in srgb, var(--acento) 14%, #fff);
    --acento-tenue: color-mix(in srgb, var(--acento) 45%, #fff);
  }
}

/* Segundo escalón: la misma tonalidad del acento con la claridad fija y la
   croma contenida. Así el tono fuerte da contraste, y los tintes quedan
   claros, sea cual sea el color de la marca. Con el dorado de RC salen los
   mismos valores declarados arriba. Quien quiera otro tono fuerte lo declara
   junto a --acento. */
@supports (color: oklch(from red 0.5 min(calc(c * 0.86), 0.1) h)) {
  :root {
    --acento-fuerte: oklch(from var(--acento) 0.5 min(calc(c * 0.86), 0.1) h);
    --acento-suave: oklch(from var(--acento) 0.967 min(calc(c * 0.145), 0.03) h);
    --acento-tenue: oklch(from var(--acento) 0.895 min(calc(c * 0.47), 0.08) h);
  }
}


/* ==========================================================================
   02. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Lo que recibe el foco no queda tapado por la banda ni por la cabecera. */
  scroll-padding-top: calc(var(--alto-cabecera) + 3.5rem);
  scroll-padding-bottom: 1rem;
}

/* Páginas con una barra pegada al borde inferior (resumen del editor, lote
   de un listado, decisión del portal): se reserva su alto para que lo que
   recibe el foco tampoco quede debajo. La hoja lo detecta sola donde hay
   :has(); la clase en <html> sirve para los navegadores que no lo tienen. */
html.rc-con-barra-inferior {
  scroll-padding-bottom: 11rem;
}

@supports selector(:has(*)) {
  html:has(.rc-lote) {
    scroll-padding-bottom: 8rem;
  }

  html:has(.rc-resumen) {
    scroll-padding-bottom: 11rem;
  }
}

/* Desde 75em el resumen del editor ya no es una barra inferior. */
@media (min-width: 75em) {
  @supports selector(:has(*)) {
    html:has(.rc-resumen):not(:has(.rc-lote)) {
      scroll-padding-bottom: 1rem;
    }
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: var(--interlinea);
  overflow-wrap: break-word;
}

@media (min-width: 64em) {
  body {
    font-size: var(--texto-m);
  }
}

[hidden] {
  display: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: var(--peso-medio);
  line-height: var(--interlinea-ajustada);
}

h1,
h2 {
  font-family: var(--fuente-rotulo);
}

h1 {
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
}

h2 {
  font-size: var(--texto-xl);
}

h3 {
  font-size: var(--texto-l);
}

h4,
h5,
h6 {
  font-size: var(--texto-base);
}

p,
ul,
ol,
dl,
dd,
figure,
blockquote,
pre {
  margin: 0;
}

:where(ul[class], ol[class]) {
  padding: 0;
  list-style: none;
}

img,
svg,
video {
  max-width: 100%;
  height: auto;
}

button,
input,
select,
textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

button,
summary,
label[for],
select {
  cursor: pointer;
}

a {
  color: var(--acento-fuerte);
  text-decoration-line: underline;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--acento-fuerte-2);
  text-decoration-thickness: 0.125em;
}

/* Zona táctil de los enlaces de texto: el relleno vertical de un elemento en
   línea no mueve los renglones, así que el enlace gana alto para el dedo sin
   cambiar la composición. El margen negativo compensa el relleno lateral. */
a:not([class]),
.rc-enlace,
.rc-boton--enlace,
.rc-tabla__principal,
.rc-indicador__enlace,
a.rc-lista__titulo {
  margin-right: calc(-1 * var(--tactil-h));
  margin-left: calc(-1 * var(--tactil-h));
  padding: var(--tactil-v) var(--tactil-h);
}

strong,
b {
  font-weight: var(--peso-fuerte);
}

small {
  font-size: var(--texto-s);
}

code,
kbd,
samp {
  font-family: var(--fuente-codigo);
  font-size: 0.9375em;
}

hr {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--linea);
}

::selection {
  background: var(--acento-tenue);
  color: var(--tinta);
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

legend {
  padding: 0;
}

summary {
  list-style: none;
}

summary::-webkit-details-marker {
  display: none;
}


/* ==========================================================================
   03. Accesibilidad: foco, texto oculto, salto al contenido
   ========================================================================== */

/* Foco siempre visible: anillo de tinta de 2 px, separación del color del
   fondo y halo del acento. El contraste lo da el anillo; el halo adorna. */
:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--foco-hueco), 0 0 0 6px var(--foco-halo);
}

/* Elementos pegados al borde de su contenedor: el anillo va por dentro. */
.rc-nav__enlace:focus-visible,
.rc-nav__subenlace:focus-visible,
.rc-menu__elemento:focus-visible,
.rc-pestanas__enlace:focus-visible,
.rc-tabla__orden:focus-visible,
.rc-desplegable__resumen:focus-visible,
.rc-tabla-marco:focus-visible,
.rc-paginacion__enlace:focus-visible {
  outline-offset: -2px;
  box-shadow: inset 0 0 0 5px var(--foco-halo);
}

/* Solo para lectores de pantalla. Va en posición absoluta: dentro de un
   contenedor con desplazamiento horizontal, ese contenedor tiene que llevar
   «position: relative» (los de esta hoja ya lo llevan) para que el texto
   oculto no ensanche la página. */
.rc-oculto {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Primer enlace de la página: aparece al recibir el foco. */
.rc-saltar {
  position: absolute;
  top: -5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.625rem var(--esp-4);
  border-radius: var(--radio-2);
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-weight: var(--peso-medio);
  text-decoration: none;
}

.rc-saltar:hover {
  color: var(--sobre-tinta);
}

.rc-saltar:focus {
  top: calc(var(--alto-demo) + 0.5rem);
}


/* ==========================================================================
   04. Estructura del panel
   ========================================================================== */

.rc-app {
  min-height: 100vh;
  min-height: 100dvh;
}

/* La plantilla añade el modificador cuando el entorno es de demostración. */
.rc-app--demo {
  --alto-demo: 2rem;
}

/* --- Banda fija «Demostración» ------------------------------------------- */

.rc-demo {
  --foco: var(--sobre-tinta);
  --foco-hueco: var(--tinta);

  position: sticky;
  top: 0;
  z-index: var(--z-demo);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  height: 2rem;
  padding: 0 var(--esp-3);
  overflow: hidden;
  background-color: var(--tinta);
  background-image: repeating-linear-gradient(135deg, transparent 0, transparent 0.625rem, rgba(255, 255, 255, 0.08) 0.625rem, rgba(255, 255, 255, 0.08) 1.25rem);
  color: var(--sobre-tinta);
  font-size: var(--texto-s);
  line-height: 1;
  white-space: nowrap;
}

.rc-demo__etiqueta {
  font-family: var(--fuente-rotulo);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.rc-demo__detalle,
.rc-demo__ampliacion {
  min-width: 0;
  overflow: hidden;
  color: var(--sobre-tinta-2);
  text-overflow: ellipsis;
}

.rc-demo__detalle {
  padding-left: var(--esp-2);
  border-left: 1px solid var(--sobre-tinta-2);
}

.rc-demo a {
  color: var(--sobre-tinta);
}

/* La ampliación solo cabe en pantallas anchas; en las estrechas se conserva
   para los lectores de pantalla. */
@media (max-width: 47.99em) {
  .rc-demo__ampliacion {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }
}

/* --- Marco: lateral + principal ------------------------------------------ */

.rc-app__marco {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.rc-app__principal {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: calc(100vh - var(--alto-demo));
  min-height: calc(100dvh - var(--alto-demo));
}

/* --- Marca (logotipo + nombre). También la usa el portal. ---------------- */

.rc-marca {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-width: 0;
  min-height: 2.75rem;
  color: var(--tinta);
  text-decoration: none;
}

.rc-marca:hover {
  color: var(--tinta);
}

.rc-marca__logo {
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.rc-marca__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.rc-marca__nombre {
  font-family: var(--fuente-rotulo);
  font-size: var(--texto-l);
  font-weight: var(--peso-medio);
  letter-spacing: 0.01em;
}

.rc-marca__entidad {
  overflow: hidden;
  color: var(--tinta-2);
  font-size: var(--texto-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Barra lateral ---------------------------------------------------------
   Pantalla estrecha: cajón fuera de pantalla. Se abre sin JavaScript con el
   ancla #rc-lateral (:target) y con JavaScript con .rc-lateral--abierta.    */

.rc-lateral {
  position: fixed;
  top: var(--alto-demo);
  bottom: 0;
  left: 0;
  z-index: var(--z-lateral);
  display: flex;
  flex-direction: column;
  width: min(19rem, 86vw);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-right: 1px solid var(--linea);
  background: var(--papel);
  box-shadow: var(--sombra-2);
  transform: translateX(-102%);
  visibility: hidden;
  transition: transform var(--transicion-lenta), visibility 0s linear 200ms;
}

.rc-lateral:target,
.rc-lateral--abierta {
  transform: none;
  visibility: visible;
  transition: transform var(--transicion-lenta), visibility 0s;
}

.rc-lateral__marca {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
  padding: var(--esp-4) var(--esp-4) 0.875rem;
  border-bottom: 1px solid var(--linea);
}

/* Filete del acento bajo el sello. */
.rc-lateral__marca::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 1rem;
  width: 2.5rem;
  border-bottom: 2px solid var(--acento);
}

.rc-lateral__velo {
  display: none;
}

.rc-lateral:target ~ .rc-lateral__velo,
.rc-lateral--abierta ~ .rc-lateral__velo {
  position: fixed;
  top: var(--alto-demo);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: calc(var(--z-lateral) - 1);
  display: block;
  background: rgba(27, 25, 20, 0.5);
}

/* Con el cajón abierto por JavaScript la página de fondo no se desplaza. */
.rc-sin-desplazamiento {
  overflow: hidden;
}

/* --- Navegación principal -------------------------------------------------- */

.rc-nav {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-2);
}

.rc-nav__lista,
.rc-nav__sublista {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.rc-nav__enlace,
.rc-nav__subenlace {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alto-fila);
  padding: 0.375rem var(--esp-3);
  border-radius: var(--radio-2);
  color: var(--tinta-2);
  text-decoration: none;
}

.rc-nav__enlace:hover,
.rc-nav__subenlace:hover {
  background: var(--papel-2);
  color: var(--tinta);
}

.rc-nav__enlace[aria-current="page"],
.rc-nav__subenlace[aria-current="page"] {
  background: var(--acento-suave);
  color: var(--tinta);
  font-weight: var(--peso-medio);
}

.rc-nav__enlace[aria-current="page"]::before,
.rc-nav__subenlace[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  left: 0;
  border-left: 3px solid var(--acento-fuerte);
  border-radius: 2px;
}

/* Sección con subapartados: <details> nativo, se abre y cierra sin JS. */
.rc-nav__grupo > summary::after {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transicion);
}

.rc-nav__grupo[open] > summary::after {
  transform: rotate(45deg);
}

.rc-nav__grupo[open] > summary {
  color: var(--tinta);
}

.rc-nav__sublista {
  margin: 1px 0 0.375rem 0.875rem;
  padding-left: var(--esp-2);
  border-left: 1px solid var(--linea);
}

/* Bandeja de incidencias: siempre al pie de la navegación. */
.rc-nav__bandeja {
  margin-top: auto;
  padding-top: var(--esp-3);
  border-top: 1px solid var(--linea);
}

/* --- Contador ---------------------------------------------------------------- */

.rc-contador {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  height: 1.375rem;
  padding: 0 0.375rem;
  border-radius: var(--radio-pildora);
  background: var(--papel-3);
  color: var(--tinta);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.rc-contador--acento {
  background: var(--acento-fuerte);
  color: var(--sobre-acento);
}

.rc-contador--peligro {
  background: var(--peligro-marca);
  color: #ffffff;
}

.rc-nav__enlace > .rc-contador,
.rc-nav__subenlace > .rc-contador {
  margin-left: auto;
}

/* --- Cabecera: menú, búsqueda global, «Nuevo», cuenta ----------------------- */

.rc-cabecera {
  position: sticky;
  top: var(--alto-demo);
  z-index: var(--z-cabecera);
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-height: var(--alto-cabecera);
  padding: 0.375rem var(--margen-contenido);
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
}

.rc-cabecera__acciones {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--esp-2);
  margin-left: auto;
}

.rc-buscador {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 34rem;
}

.rc-buscador__campo {
  padding-right: 2.75rem;
}

.rc-buscador__boton {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radio-2);
  background: none;
  color: var(--tinta-2);
}

.rc-buscador__boton:hover {
  color: var(--tinta);
}

/* Iniciales de la persona: un sello pequeño (disco de tinta, aro del acento). */
.rc-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--tinta);
  box-shadow: 0 0 0 2px var(--papel), 0 0 0 3.5px var(--acento);
  color: var(--sobre-tinta);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.02em;
  line-height: 1;
}

/* --- Contenido ------------------------------------------------------------- */

.rc-contenido {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--esp-4) var(--margen-contenido) var(--esp-7);
}

.rc-contenido:focus {
  outline: none;
  box-shadow: none;
}

.rc-pagina {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: var(--ancho-contenido);
}

.rc-pagina__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-3) var(--esp-5);
}

.rc-pagina__titulos {
  flex: 1 1 16rem;
  min-width: 0;
}

.rc-pagina__titulo {
  font-family: var(--fuente-rotulo);
  font-size: clamp(1.375rem, 1.15rem + 1vw, 1.75rem);
  letter-spacing: -0.005em;
}

.rc-pagina__resumen {
  max-width: 46rem;
  margin-top: var(--esp-1);
  color: var(--tinta-2);
}

.rc-pagina__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

/* --- Migas ------------------------------------------------------------------ */

.rc-migas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-2);
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

.rc-migas__lista > li {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
}

.rc-migas__lista > li + li::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  border-top: 1.5px solid var(--tinta-3);
  border-right: 1.5px solid var(--tinta-3);
  transform: rotate(45deg);
}

.rc-migas__lista a {
  color: inherit;
}

.rc-migas__lista [aria-current="page"] {
  color: var(--tinta);
  font-weight: var(--peso-medio);
  text-decoration: none;
}

/* --- Pantalla ancha: lateral permanente -------------------------------------- */

@media (min-width: 64em) {
  .rc-app__marco {
    grid-template-columns: var(--ancho-lateral) minmax(0, 1fr);
  }

  .rc-lateral,
  .rc-lateral:target,
  .rc-lateral--abierta {
    position: sticky;
    top: var(--alto-demo);
    bottom: auto;
    left: auto;
    z-index: auto;
    align-self: start;
    width: auto;
    height: calc(100vh - var(--alto-demo));
    height: calc(100dvh - var(--alto-demo));
    box-shadow: none;
    transform: none;
    visibility: visible;
    transition: none;
  }

  /* Dos clases: tiene que ganar a .rc-boton, que se declara más abajo. */
  .rc-lateral:target ~ .rc-lateral__velo,
  .rc-lateral--abierta ~ .rc-lateral__velo,
  .rc-lateral .rc-lateral__cerrar,
  .rc-cabecera .rc-cabecera__menu {
    display: none;
  }

  .rc-contenido {
    padding-top: var(--esp-5);
  }
}


/* ==========================================================================
   05. Botones y enlaces
   ========================================================================== */

.rc-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  max-width: 100%;
  min-height: var(--alto-control);
  padding: 0.375rem var(--esp-4);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-2);
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: inherit;
  font-weight: var(--peso-medio);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transicion), border-color var(--transicion), color var(--transicion);
}

.rc-boton:hover {
  border-color: var(--tinta);
  background: var(--papel-2);
  color: var(--tinta);
}

.rc-boton:active {
  background: var(--papel-3);
}

/* Acción principal de la pantalla: una por vista. */
.rc-boton--primario {
  border-color: var(--acento-fuerte);
  background: var(--acento-fuerte);
  color: var(--sobre-acento);
}

.rc-boton--primario:hover,
.rc-boton--primario:active {
  border-color: var(--acento-fuerte-2);
  background: var(--acento-fuerte-2);
  color: var(--sobre-acento);
}

/* Acción destructiva o irreversible. */
.rc-boton--peligro {
  border-color: var(--peligro-marca);
  background: var(--peligro-marca);
  color: #ffffff;
}

.rc-boton--peligro:hover,
.rc-boton--peligro:active {
  border-color: var(--peligro-marca-2);
  background: var(--peligro-marca-2);
  color: #ffffff;
}

/* Acción terciaria: sin caja hasta que se apunta. */
.rc-boton--discreto {
  border-color: transparent;
  background: transparent;
}

.rc-boton--discreto:hover {
  border-color: transparent;
  background: var(--papel-3);
}

/* Botón con aspecto de enlace (por ejemplo «Quitar todos»). */
.rc-boton--enlace {
  min-height: 0;
  margin-top: calc(-1 * var(--tactil-v));
  margin-bottom: calc(-1 * var(--tactil-v));
  padding: var(--tactil-v) var(--tactil-h);
  border-color: transparent;
  border-radius: var(--radio-1);
  background: none;
  color: var(--acento-fuerte);
  font-weight: var(--peso-normal);
  text-align: left;
  text-decoration: underline;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.18em;
}

.rc-boton--enlace:hover {
  border-color: transparent;
  background: none;
  color: var(--acento-fuerte-2);
}

/* Sobre fondo de tinta (barra de acciones en lote). */
.rc-boton--inverso {
  border-color: var(--sobre-tinta-2);
  background: transparent;
  color: var(--sobre-tinta);
}

.rc-boton--inverso:hover,
.rc-boton--inverso:active {
  border-color: var(--sobre-tinta);
  background: var(--sobre-tinta);
  color: var(--tinta);
}

.rc-boton--pequeno {
  min-height: var(--alto-compacto);
  padding: var(--esp-1) var(--esp-3);
  font-size: var(--texto-s);
}

.rc-boton--grande {
  min-height: 3.25rem;
  padding: 0.625rem var(--esp-5);
  font-size: var(--texto-l);
}

.rc-boton--icono {
  flex: none;
  width: var(--alto-control);
  max-width: none;
  padding: 0;
}

.rc-boton--icono.rc-boton--pequeno {
  width: var(--alto-compacto);
}

.rc-boton--bloque {
  display: flex;
  width: 100%;
}

.rc-boton[aria-busy="true"] {
  cursor: progress;
}

.rc-boton[aria-busy="true"]::before {
  content: "";
  flex: none;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: rc-giro 700ms linear infinite;
}

@keyframes rc-giro {
  to {
    transform: rotate(360deg);
  }
}

/* Siempre después de las variantes para que gane. */
.rc-boton:disabled,
.rc-boton[aria-disabled="true"] {
  border-color: var(--linea);
  background: var(--papel-3);
  color: var(--tinta-inactiva);
  cursor: not-allowed;
}

a.rc-boton[aria-disabled="true"] {
  pointer-events: none;
}

.rc-boton--discreto:disabled,
.rc-boton--discreto[aria-disabled="true"],
.rc-boton--enlace:disabled {
  border-color: transparent;
  background: transparent;
}

.rc-boton--inverso:disabled {
  border-color: var(--tinta-inactiva);
  background: transparent;
  color: var(--tinta-inactiva);
}

.rc-grupo-botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

/* --- Enlaces ---------------------------------------------------------------- */

.rc-enlace {
  color: var(--acento-fuerte);
  text-decoration: underline;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.18em;
}

.rc-enlace:hover {
  color: var(--acento-fuerte-2);
}

/* Enlace en color de texto: se distingue por el subrayado. */
.rc-enlace--discreto {
  color: var(--tinta);
  text-decoration-color: var(--linea-fuerte);
}

.rc-enlace--discreto:hover {
  color: var(--acento-fuerte);
  text-decoration-color: currentColor;
}

/* Sale de la aplicación: lleva una esquina dibujada tras el texto. */
.rc-enlace--externo::after {
  content: "";
  display: inline-block;
  width: 0.4375em;
  height: 0.4375em;
  margin-left: 0.3em;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  vertical-align: 0.3em;
}


/* ==========================================================================
   06. Iconos dibujados con CSS
   Sin imágenes ni fuentes: bordes sobre ::before y ::after, de modo que
   heredan el color del texto y se ven también con contraste forzado.
   Son decorativos: llevan aria-hidden="true" y un texto .rc-oculto al lado.
   ========================================================================== */

.rc-icono {
  position: relative;
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: inherit;
  vertical-align: -0.25em;
}

.rc-icono::before,
.rc-icono::after {
  content: "";
  position: absolute;
}

.rc-icono--menu::before {
  top: 0.25rem;
  right: 0.125rem;
  bottom: 0.25rem;
  left: 0.125rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.rc-icono--menu::after {
  top: 50%;
  right: 0.125rem;
  left: 0.125rem;
  border-top: 2px solid currentColor;
  transform: translateY(-50%);
}

.rc-icono--cerrar::before,
.rc-icono--cerrar::after,
.rc-icono--mas::before,
.rc-icono--mas::after {
  top: 50%;
  left: 50%;
  width: 0.9375rem;
  border-top: 2px solid currentColor;
}

.rc-icono--cerrar::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.rc-icono--cerrar::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.rc-icono--mas::before {
  transform: translate(-50%, -50%);
}

.rc-icono--mas::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.rc-icono--chevron-abajo::before,
.rc-icono--chevron-arriba::before,
.rc-icono--chevron-derecha::before,
.rc-icono--chevron-izquierda::before {
  top: 50%;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.rc-icono--chevron-abajo::before {
  transform: translate(-50%, -70%) rotate(45deg);
}

.rc-icono--chevron-arriba::before {
  transform: translate(-50%, -30%) rotate(-135deg);
}

.rc-icono--chevron-derecha::before {
  transform: translate(-70%, -50%) rotate(-45deg);
}

.rc-icono--chevron-izquierda::before {
  transform: translate(-30%, -50%) rotate(135deg);
}

.rc-icono--buscar::before {
  top: 0.125rem;
  left: 0.125rem;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.rc-icono--buscar::after {
  top: 0.75rem;
  left: 0.75rem;
  width: 0.4375rem;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.rc-icono--marca::before {
  top: 50%;
  left: 50%;
  width: 0.4375rem;
  height: 0.8125rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translate(-50%, -60%) rotate(45deg);
}

/* Tres puntos: «más acciones». */
.rc-icono--puntos::before {
  top: 50%;
  right: 0;
  left: 0;
  border-top: 0.25rem dotted currentColor;
  transform: translateY(-50%);
}

/* Asa para arrastrar (seis puntos). */
.rc-icono--asa::before {
  top: 0.1875rem;
  bottom: 0.1875rem;
  left: 0.3125rem;
  width: 0.625rem;
  border-right: 0.1875rem dotted currentColor;
  border-left: 0.1875rem dotted currentColor;
}


/* ==========================================================================
   07. Formularios
   Orden dentro de .rc-campo: etiqueta, ayuda, error, control.
   ========================================================================== */

.rc-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

/* Fila de campos que se reparte sola y baja a una columna cuando no cabe. */
.rc-form__fila {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--esp-4);
  align-items: end;
}

.rc-form__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
}

.rc-campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

.rc-campo__etiqueta {
  font-weight: var(--peso-medio);
}

.rc-campo__opcional {
  color: var(--tinta-2);
  font-weight: var(--peso-normal);
}

.rc-campo__ayuda {
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

.rc-campo__error {
  color: var(--peligro-texto);
  font-size: var(--texto-m);
  font-weight: var(--peso-medio);
}

/* Campo con error: filete a la izquierda, borde grueso en el control y el
   mensaje en texto. Nunca solo el color. */
.rc-campo--error {
  padding-left: var(--esp-3);
  border-left: 3px solid var(--peligro-marca);
}

.rc-control {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: var(--alto-control);
  padding: 0.4375rem var(--esp-3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-2);
  background-color: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--texto-base);  /* 16 px: iOS no amplía la página al enfocar */
  line-height: 1.4;
  transition: border-color var(--transicion);
}

@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  .rc-control {
    font-size: inherit;
  }
}

.rc-control::placeholder {
  color: var(--tinta-3);
  opacity: 1;
}

.rc-control:hover {
  border-color: var(--tinta);
}

textarea.rc-control {
  min-height: 5.5rem;
  resize: vertical;
}

select.rc-control {
  padding-right: 2.25rem;
  background-image: linear-gradient(45deg, transparent 50%, var(--tinta-2) 50%), linear-gradient(135deg, var(--tinta-2) 50%, transparent 50%);
  background-repeat: no-repeat;
  background-position: right 1.0625rem center, right 0.75rem center;
  background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
  -webkit-appearance: none;
  appearance: none;
}

select.rc-control[multiple] {
  padding-right: var(--esp-3);
  background-image: none;
}

.rc-control[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

.rc-control--num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.rc-control--corto {
  max-width: 8rem;
}

.rc-control--medio {
  max-width: 18rem;
}

.rc-control[aria-invalid="true"] {
  border-color: var(--peligro-marca);
  box-shadow: inset 0 0 0 1px var(--peligro-marca);
}

.rc-control[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 2px var(--foco-hueco), 0 0 0 6px var(--foco-halo);
}

.rc-control:disabled {
  border-color: var(--linea);
  background-color: var(--papel-3);
  color: var(--tinta-inactiva);
  cursor: not-allowed;
}

.rc-control[readonly] {
  border-style: dashed;
  background-color: var(--papel-2);
}

/* Control con unidad: «%», «€». La unidad es decorativa; va también en la
   etiqueta. */
.rc-control-grupo {
  position: relative;
  display: flex;
  min-width: 0;
}

.rc-control-grupo > .rc-control {
  padding-right: var(--esp-6);
}

.rc-control-grupo__sufijo {
  position: absolute;
  top: 50%;
  right: 0.625rem;
  color: var(--tinta-2);
  pointer-events: none;
  transform: translateY(-50%);
}

/* --- Casillas y botones de opción ------------------------------------------- */

.rc-opcion {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  min-height: var(--alto-control);
  padding: var(--esp-2) 0;
  cursor: pointer;
}

@media (min-width: 64em) and (hover: hover) and (pointer: fine) {
  .rc-opcion {
    padding: 0.375rem 0;
  }
}

.rc-opcion__texto {
  min-width: 0;
  padding-top: 0.0625rem;
}

.rc-opcion__ayuda {
  display: block;
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

.rc-opcion__control,
.rc-casilla {
  position: relative;
  display: inline-grid;
  flex: none;
  place-content: center;
  width: 1.375rem;
  height: 1.375rem;
  margin: 0;
  border: 2px solid var(--tinta-2);
  border-radius: 3px;
  background: var(--papel);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.rc-opcion__control[type="radio"],
.rc-casilla[type="radio"] {
  border-radius: 50%;
}

/* Marca de la casilla: una «L» girada. */
.rc-opcion__control::before,
.rc-casilla::before {
  content: "";
  width: 0.375rem;
  height: 0.6875rem;
  border: solid var(--sobre-acento);
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg) scale(0);
}

.rc-opcion__control[type="radio"]::before,
.rc-casilla[type="radio"]::before {
  width: 0;
  height: 0;
  border: 0.25rem solid var(--sobre-acento);
  border-radius: 50%;
  transform: scale(0);
}

.rc-opcion__control:checked,
.rc-casilla:checked,
.rc-casilla:indeterminate {
  border-color: var(--acento-fuerte);
  background: var(--acento-fuerte);
}

.rc-opcion__control:checked::before,
.rc-casilla:checked::before {
  transform: translateY(-1px) rotate(45deg) scale(1);
}

.rc-opcion__control[type="radio"]:checked::before,
.rc-casilla[type="radio"]:checked::before {
  transform: scale(1);
}

/* «Seleccionar todo» con solo parte de las filas marcadas: un guion. */
.rc-casilla:indeterminate::before {
  width: 0.6875rem;
  height: 0;
  border-width: 2px 0 0;
  transform: none;
}

/* Amplía la zona táctil de la casilla suelta hasta 44 px sin moverla. */
.rc-casilla::after {
  content: "";
  position: absolute;
  top: -0.6875rem;
  right: -0.6875rem;
  bottom: -0.6875rem;
  left: -0.6875rem;
}

.rc-opcion__control:disabled,
.rc-casilla:disabled {
  border-color: var(--tinta-inactiva);
  background: var(--papel-3);
  cursor: not-allowed;
}

.rc-opcion__control:disabled:checked,
.rc-casilla:disabled:checked {
  background: var(--tinta-inactiva);
}

/* --- Grupo de campos (fieldset) ------------------------------------------- */

.rc-grupo-campos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.rc-grupo-campos__leyenda {
  margin-bottom: var(--esp-1);
  font-weight: var(--peso-medio);
}

/* --- Resumen de errores: arriba del formulario, recibe el foco ------------- */

.rc-errores {
  padding: var(--esp-4) 1.25rem;
  border: 2px solid var(--peligro-marca);
  border-radius: var(--radio-3);
  background: var(--peligro-fondo);
}

.rc-errores__titulo {
  font-family: var(--fuente-texto);
  font-size: var(--texto-l);
}

.rc-errores__lista {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  margin-top: var(--esp-2);
  padding-left: 1.125rem;
  list-style: disc;
}

.rc-errores__lista a {
  color: var(--peligro-texto);
  font-weight: var(--peso-medio);
}


/* ==========================================================================
   08. Menú desplegable
   <details> nativo: abre y cierra sin JavaScript. Con app.js gana Escape,
   flechas, cierre al salir y colocación dentro de la pantalla.
   ========================================================================== */

.rc-menu {
  position: relative;
  display: inline-block;
}

.rc-menu__lista {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 2rem));
  margin: 0;
  padding: var(--esp-1);
  overflow-y: auto;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  background: var(--papel);
  box-shadow: var(--sombra-2);
  color: var(--tinta);
  font-weight: var(--peso-normal);
  list-style: none;
  text-align: left;
}

.rc-menu--derecha > .rc-menu__lista {
  right: 0;
  left: auto;
}

.rc-menu--arriba > .rc-menu__lista {
  top: auto;
  bottom: calc(100% + 0.25rem);
}

.rc-menu__elemento {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  min-height: var(--alto-fila);
  padding: 0.375rem var(--esp-3);
  border: 0;
  border-radius: var(--radio-2);
  background: none;
  color: var(--tinta);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.rc-menu__elemento:hover {
  background: var(--papel-3);
  color: var(--tinta);
}

.rc-menu__elemento--peligro,
.rc-menu__elemento--peligro:hover {
  color: var(--peligro-texto);
}

.rc-menu__elemento:disabled,
.rc-menu__elemento[aria-disabled="true"] {
  background: none;
  color: var(--tinta-inactiva);
  cursor: not-allowed;
}

.rc-menu__titulo {
  padding: var(--esp-2) var(--esp-3) var(--esp-1);
  color: var(--tinta-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rc-menu__separador {
  margin: var(--esp-1) 0;
  border-top: 1px solid var(--linea);
}

/* Opciones con casilla dentro de un menú (selector de columnas). */
.rc-menu__lista .rc-opcion {
  padding-right: var(--esp-3);
  padding-left: var(--esp-3);
  border-radius: var(--radio-2);
}

.rc-menu__lista .rc-opcion:hover {
  background: var(--papel-3);
}

.rc-menu__pie {
  margin-top: var(--esp-1);
  padding: var(--esp-2) var(--esp-3) 0.375rem;
  border-top: 1px solid var(--linea);
}

/* Pantalla estrecha: el menú abierto es una hoja pegada abajo, nunca más
   ancha que la pantalla esté donde esté el botón. */
@media (max-width: 39.99em) {
  .rc-menu[open] > .rc-menu__lista {
    position: fixed;
    top: auto;
    right: 0.5rem;
    bottom: 0.5rem;
    left: 0.5rem;
    width: auto;
    max-width: none;
    max-height: 70vh;
    box-shadow: var(--sombra-3);
  }
}

/* Sin JavaScript, un menú dentro de una tabla con desplazamiento quedaría
   recortado: se le hace sitio mientras está abierto. */
@supports selector(:has(*)) {
  @media (min-width: 40em) {
    html:not(.rc-js) .rc-tabla-marco:has(.rc-menu[open]) {
      padding-bottom: 14rem;
    }
  }
}


/* ==========================================================================
   09. Insignias y franja de estados
   Cinco ejes independientes; cada uno tiene su forma de marcador para
   distinguirlos sin depender del color. El tono (color) lo decide el estado.
     documento = cuadrado   envío = triángulo   cobro = círculo
     conciliación = doble barra   fiscal = rombo
   ========================================================================== */

.rc-insignia {
  --ins-texto: var(--neutro-texto);
  --ins-fondo: var(--neutro-fondo);
  --ins-borde: var(--neutro-borde);
  --ins-marca: var(--neutro-marca);

  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  max-width: 100%;
  padding: 0.125rem var(--esp-2);
  border: 1px solid var(--ins-borde);
  border-radius: var(--radio-1);
  background: var(--ins-fondo);
  color: var(--ins-texto);
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
  line-height: 1.4;
  white-space: nowrap;
}

/* Marcador: un cuadrado relleno hecho solo de borde (sobrevive al contraste
   forzado). Sin eje, la insignia no lleva marcador. */
.rc-insignia--documento::before,
.rc-insignia--envio::before,
.rc-insignia--cobro::before,
.rc-insignia--conciliacion::before,
.rc-insignia--fiscal::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border: 0.25rem solid var(--ins-marca);
}

.rc-insignia--documento::before {
  border-radius: 1px;
}

.rc-insignia--envio::before {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.rc-insignia--cobro::before {
  border-radius: 50%;
}

.rc-insignia--conciliacion::before {
  width: 0.5rem;
  height: 0.5rem;
  border-width: 2px 0;
}

.rc-insignia--fiscal::before {
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

.rc-insignia--info {
  --ins-texto: var(--info-texto);
  --ins-fondo: var(--info-fondo);
  --ins-borde: var(--info-borde);
  --ins-marca: var(--info-marca);
}

.rc-insignia--exito {
  --ins-texto: var(--exito-texto);
  --ins-fondo: var(--exito-fondo);
  --ins-borde: var(--exito-borde);
  --ins-marca: var(--exito-marca);
}

.rc-insignia--aviso {
  --ins-texto: var(--aviso-texto);
  --ins-fondo: var(--aviso-fondo);
  --ins-borde: var(--aviso-borde);
  --ins-marca: var(--aviso-marca);
}

.rc-insignia--peligro {
  --ins-texto: var(--peligro-texto);
  --ins-fondo: var(--peligro-fondo);
  --ins-borde: var(--peligro-borde);
  --ins-marca: var(--peligro-marca);
}

/* Franja de estados: los cinco ejes del documento, cada uno con su rótulo. */
.rc-estados {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
  background: var(--linea);
}

.rc-estados__eje {
  display: flex;
  flex: 1 1 9.5rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--esp-1);
  min-width: 0;
  padding: 0.625rem 0.875rem;
  background: var(--papel);
}

.rc-estados__eje > dt {
  color: var(--tinta-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rc-estados__eje > dd {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
  min-width: 0;
  max-width: 100%;
}

.rc-estados__nota {
  color: var(--tinta-2);
  font-size: var(--texto-s);
}


/* ==========================================================================
   10. Avisos
   ========================================================================== */

.rc-aviso {
  --av-fondo: var(--neutro-fondo);
  --av-borde: var(--neutro-borde);
  --av-marca: var(--neutro-marca);
  --av-texto: var(--neutro-texto);

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--esp-1) var(--esp-3);
  align-items: start;
  padding: var(--esp-3) var(--esp-4);
  border: 1px solid var(--av-borde);
  border-left: 4px solid var(--av-marca);
  border-radius: var(--radio-2);
  background: var(--av-fondo);
  color: var(--tinta);
}

.rc-aviso--info {
  --av-fondo: var(--info-fondo);
  --av-borde: var(--info-borde);
  --av-marca: var(--info-marca);
  --av-texto: var(--info-texto);
}

.rc-aviso--exito {
  --av-fondo: var(--exito-fondo);
  --av-borde: var(--exito-borde);
  --av-marca: var(--exito-marca);
  --av-texto: var(--exito-texto);
}

.rc-aviso--aviso {
  --av-fondo: var(--aviso-fondo);
  --av-borde: var(--aviso-borde);
  --av-marca: var(--aviso-marca);
  --av-texto: var(--aviso-texto);
}

.rc-aviso--error {
  --av-fondo: var(--peligro-fondo);
  --av-borde: var(--peligro-borde);
  --av-marca: var(--peligro-marca);
  --av-texto: var(--peligro-texto);
}

/* Icono: aro con un signo distinto por tipo (no depende del color). */
.rc-aviso__icono {
  position: relative;
  display: grid;
  place-items: center;
  width: 1.375rem;
  height: 1.375rem;
  margin-top: 0.0625rem;
  border: 2px solid var(--av-marca);
  border-radius: 50%;
  color: var(--av-texto);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}

.rc-aviso__icono::before {
  content: "i";
}

.rc-aviso--aviso > .rc-aviso__icono::before {
  content: "!";
}

.rc-aviso--exito > .rc-aviso__icono::before {
  content: "";
  width: 0.3125rem;
  height: 0.5625rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-1px) rotate(45deg);
}

.rc-aviso--error > .rc-aviso__icono::before,
.rc-aviso--error > .rc-aviso__icono::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.625rem;
  border-top: 2px solid currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.rc-aviso--error > .rc-aviso__icono::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.rc-aviso__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

.rc-aviso__titulo {
  font-weight: var(--peso-fuerte);
}

.rc-aviso__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-4);
  margin-top: 0.125rem;
}

.rc-aviso a:not(.rc-boton) {
  color: var(--tinta);
  font-weight: var(--peso-medio);
}

.rc-aviso__cerrar {
  margin: -0.375rem -0.5rem -0.375rem 0;
}


/* ==========================================================================
   11. Tarjetas, listas, indicadores y progreso
   ========================================================================== */

.rc-tarjeta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
  background: var(--papel);
}

.rc-tarjeta__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-1) var(--esp-4);
  padding: 0.875rem 1.125rem 0;
}

/* Rótulo en versalitas espaciadas, como la leyenda del sello de la marca. */
.rc-tarjeta__titulo {
  color: var(--tinta-2);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rc-tarjeta__cuerpo {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--esp-3);
  min-width: 0;
  padding: 0.875rem 1.125rem 1.125rem;
}

.rc-tarjeta__pie {
  padding: var(--esp-3) 1.125rem;
  border-top: 1px solid var(--linea);
}

/* Rejilla de tarjetas que se reparte sola. */
.rc-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--esp-4);
  align-items: start;
}

/* --- Lista de renglones: título + dato a la derecha --------------------------- */

.rc-lista {
  display: flex;
  flex-direction: column;
}

.rc-lista__elemento {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem var(--esp-4);
  padding: var(--esp-2) 0;
  border-top: 1px solid var(--linea);
}

.rc-lista__elemento:first-child {
  padding-top: 0;
  border-top: 0;
}

.rc-lista__elemento:last-child {
  padding-bottom: 0;
}

.rc-lista__principal {
  flex: 1 1 10rem;
  min-width: 0;
}

.rc-lista__titulo {
  font-weight: var(--peso-medio);
}

.rc-lista__meta {
  display: block;
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

.rc-lista__valor {
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

/* --- Indicadores del panel de inicio -------------------------------------------
   Una banda de celdas separadas por filetes, como el encabezado de un libro
   de cuentas. Cada cifra enlaza con los documentos que la forman.            */

.rc-indicadores {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
  background: var(--papel);
}

/* El filete entre celdas es la sombra de cada una: las celdas que queden
   vacías en la última fila siguen siendo papel en blanco. */
.rc-indicador {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
  padding: var(--esp-4) 1.125rem;
  background: var(--papel);
  box-shadow: 0 0 0 1px var(--linea);
}

.rc-indicador__etiqueta {
  color: var(--tinta-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rc-indicador__periodo {
  display: block;
  color: var(--tinta-3);
  font-weight: var(--peso-normal);
  letter-spacing: 0;
  text-transform: none;
}

.rc-indicador__cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 0.375rem;
  font-family: var(--fuente-rotulo);
  font-size: var(--texto-2xl);
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: var(--peso-medio);
  line-height: 1.15;
}

.rc-indicador__moneda {
  color: var(--tinta-2);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.04em;
}

.rc-indicador__desglose {
  display: flex;
  flex-wrap: wrap;
  gap: 0.125rem var(--esp-4);
  color: var(--tinta-2);
  font-size: var(--texto-s);
  font-variant-numeric: tabular-nums;
}

.rc-indicador__desglose > div {
  display: flex;
  gap: 0.375rem;
}

.rc-indicador__desglose dd {
  color: var(--tinta);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.rc-indicador__enlace {
  align-self: flex-start;
  margin-top: auto;
  font-size: var(--texto-s);
}

.rc-indicador--peligro .rc-indicador__cifra {
  color: var(--peligro-texto);
}

/* --- Progreso: cobrado sobre total, facturado sobre presupuestado ------------- */

.rc-progreso {
  display: block;
  width: 100%;
  height: 0.625rem;
  overflow: hidden;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pildora);
  background: var(--papel-3);
  color: var(--acento-fuerte);
  -webkit-appearance: none;
  appearance: none;
}

.rc-progreso::-webkit-progress-bar {
  background: var(--papel-3);
}

.rc-progreso::-webkit-progress-value {
  background: var(--acento-fuerte);
}

.rc-progreso::-moz-progress-bar {
  background: var(--acento-fuerte);
}

.rc-progreso--exito {
  color: var(--exito-marca);
}

.rc-progreso--exito::-webkit-progress-value {
  background: var(--exito-marca);
}

.rc-progreso--exito::-moz-progress-bar {
  background: var(--exito-marca);
}

.rc-progreso__texto {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem var(--esp-4);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   12. Pestañas y cronología
   ========================================================================== */

/* Pestañas: enlaces a vistas que pinta el servidor (aria-current="page").
   En pantallas estrechas la fila se desplaza en horizontal. */
.rc-pestanas {
  border-bottom: 1px solid var(--linea);
}

.rc-pestanas__lista {
  position: relative;
  display: flex;
  gap: var(--esp-1);
  margin-bottom: -1px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.rc-pestanas__enlace {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: var(--alto-control);
  padding: var(--esp-2) 0.875rem calc(var(--esp-2) + 3px);
  color: var(--tinta-2);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
}

.rc-pestanas__enlace:hover {
  padding-bottom: var(--esp-2);
  border-bottom: 3px solid var(--linea-fuerte);
  color: var(--tinta);
}

.rc-pestanas__enlace[aria-current="page"] {
  padding-bottom: var(--esp-2);
  border-bottom: 3px solid var(--acento-fuerte);
  color: var(--tinta);
}

/* Cronología: lista ordenada de hechos, cada uno con su fecha y su autor. */
.rc-cronologia {
  display: flex;
  flex-direction: column;
}

.rc-cronologia__evento {
  --cr-marca: var(--neutro-marca);

  position: relative;
  padding: 0 0 1.125rem 1.75rem;
}

.rc-cronologia__evento:last-child {
  padding-bottom: 0;
}

/* Raíl. */
.rc-cronologia__evento::before {
  content: "";
  position: absolute;
  top: 0.5rem;
  bottom: -0.5rem;
  left: 0.3125rem;
  border-left: 2px solid var(--linea);
}

.rc-cronologia__evento:last-child::before {
  display: none;
}

/* Marcador. */
.rc-cronologia__evento::after {
  content: "";
  position: absolute;
  top: 0.3125rem;
  left: 0;
  width: 0;
  height: 0;
  border: 0.375rem solid var(--cr-marca);
  border-radius: 50%;
  box-shadow: 0 0 0 3px var(--papel);
}

.rc-cronologia__evento--info {
  --cr-marca: var(--info-marca);
}

.rc-cronologia__evento--exito {
  --cr-marca: var(--exito-marca);
}

.rc-cronologia__evento--aviso {
  --cr-marca: var(--aviso-marca);
}

.rc-cronologia__evento--peligro {
  --cr-marca: var(--peligro-marca);
}

.rc-cronologia__titulo {
  font-weight: var(--peso-medio);
}

.rc-cronologia__meta,
.rc-cronologia__detalle {
  color: var(--tinta-2);
  font-size: var(--texto-s);
}


/* ==========================================================================
   13. Diálogo y desplegable
   ========================================================================== */

/* <dialog> abierto con showModal(): el navegador encierra el foco y cierra
   con Escape. No se le da «display» aquí para que cerrado siga oculto. */
.rc-dialogo {
  width: min(34rem, calc(100vw - 2rem));
  max-width: none;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  background: var(--papel);
  box-shadow: var(--sombra-3);
  color: var(--tinta);
}

.rc-dialogo::backdrop {
  background: rgba(27, 25, 20, 0.55);
}

.rc-dialogo__caja {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 2rem - 2px);
  max-height: calc(100dvh - 2rem - 2px);
}

.rc-dialogo__cabecera {
  padding: 1.125rem 1.25rem var(--esp-2);
}

.rc-dialogo__titulo {
  font-family: var(--fuente-rotulo);
  font-size: var(--texto-xl);
}

.rc-dialogo__cuerpo {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--esp-3);
  min-height: 0;
  padding: var(--esp-2) 1.25rem 1.125rem;
  overflow-y: auto;
}

.rc-dialogo__acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--esp-2);
  padding: 0.875rem 1.25rem;
  border-top: 1px solid var(--linea);
  background: var(--papel-2);
}

@media (max-width: 39.99em) {
  .rc-dialogo__acciones {
    flex-direction: column;
  }

  .rc-dialogo__acciones > .rc-boton {
    width: 100%;
  }
}

/* Desplegable: opciones avanzadas agrupadas. El resumen puede enseñar los
   valores vigentes para que sigan a la vista con el bloque cerrado. */
.rc-desplegable {
  min-width: 0;
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
  background: var(--papel);
}

.rc-desplegable__resumen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1) var(--esp-3);
  min-height: var(--alto-control);
  padding: var(--esp-2) var(--esp-4);
  border-radius: var(--radio-3);
  font-weight: var(--peso-medio);
}

.rc-desplegable__resumen::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  margin: 0 var(--esp-1) 0 0.125rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--transicion);
}

.rc-desplegable[open] > .rc-desplegable__resumen::before {
  transform: rotate(45deg);
}

.rc-desplegable__resumen:hover {
  background: var(--papel-2);
}

.rc-desplegable__valor {
  min-width: 0;
  margin-left: auto;
  color: var(--tinta-2);
  font-size: var(--texto-m);
  font-weight: var(--peso-normal);
  text-align: right;
}

.rc-desplegable__cuerpo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  padding: var(--esp-4);
  border-top: 1px solid var(--linea);
}


/* ==========================================================================
   14. Listados: barra, tabla, lote, paginación, vacío
   ========================================================================== */

.rc-listado {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  min-width: 0;
}

.rc-listado__barra {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
}

.rc-listado__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.rc-listado__busqueda {
  display: flex;
  flex: 1 1 16rem;
  gap: var(--esp-2);
  min-width: 0;
  max-width: 34rem;
}

.rc-listado__herramientas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  margin-left: auto;
}

/* --- Filtros aplicados: cada ficha es un enlace que quita su filtro --------- */

.rc-fichas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.rc-ficha {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  max-width: 100%;
  min-height: var(--alto-compacto);
  padding: 0.125rem 0.375rem 0.125rem var(--esp-3);
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-pildora);
  background: var(--papel);
  color: var(--tinta);
  font-size: var(--texto-s);
  text-decoration: none;
}

.rc-ficha:hover {
  border-color: var(--tinta);
  background: var(--papel-2);
  color: var(--tinta);
}

.rc-ficha > .rc-icono {
  transform: scale(0.7);
}

/* --- Tabla ------------------------------------------------------------------- */

/* Contenedor con desplazamiento horizontal propio: la página nunca se
   desborda. Lleva role="region", aria-label y tabindex="0". */
.rc-tabla-marco {
  position: relative;
  min-width: 0;
  overflow-x: auto;
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
  background: var(--papel);
}

.rc-tabla {
  width: 100%;
  font-variant-numeric: tabular-nums;
}

.rc-tabla :where(th, td) {
  padding: 0.625rem var(--esp-3);
  border-bottom: 1px solid var(--linea);
  font-weight: var(--peso-normal);
  text-align: left;
  vertical-align: middle;
}

.rc-tabla > thead :where(th) {
  border-bottom-color: var(--linea-fuerte);
  background: var(--papel-2);
  color: var(--tinta-2);
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.rc-tabla > tbody > tr:last-child > :where(th, td) {
  border-bottom: 0;
}

.rc-tabla > tbody > tr:hover {
  background: var(--papel-2);
}

/* Fila seleccionada (app.js añade la clase; :has() lo hace sin JS). */
.rc-tabla > tbody > .rc-tabla__fila--seleccionada {
  background: var(--acento-suave);
}

@supports selector(:has(*)) {
  .rc-tabla > tbody > tr:has([data-rc-seleccion]:checked) {
    background: var(--acento-suave);
  }
}

/* Raya de suma y doble raya de total, como en un libro de cuentas. */
.rc-tabla > tfoot :where(th, td) {
  border-top: 1px solid var(--tinta);
  border-bottom: 6px double var(--acento);
  font-weight: var(--peso-medio);
}

.rc-tabla__celda--num {
  text-align: right;
  white-space: nowrap;
}

.rc-tabla__celda--seleccion {
  width: 2.75rem;
  padding-right: var(--esp-1);
  line-height: 0;
}

.rc-tabla__celda--acciones {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.rc-tabla__celda--titulo {
  font-weight: var(--peso-medio);
}

/* Enlace principal de la fila (número del documento). */
.rc-tabla__principal {
  color: var(--tinta);
  font-weight: var(--peso-medio);
  text-decoration-color: var(--linea-fuerte);
  white-space: nowrap;
}

.rc-tabla__principal:hover {
  color: var(--acento-fuerte);
  text-decoration-color: currentColor;
}

.rc-tabla__sub {
  display: block;
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

/* Cabecera ordenable: enlace que pide el orden al servidor. La dirección
   vigente se indica con aria-sort en el <th> y aquí se dibuja la flecha. */
.rc-tabla__orden {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin: -0.25rem -0.375rem;
  padding: var(--esp-1) 0.375rem;
  border-radius: var(--radio-1);
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.rc-tabla__orden:hover {
  color: var(--tinta);
  text-decoration: underline;
}

.rc-tabla [aria-sort="ascending"],
.rc-tabla [aria-sort="descending"] {
  color: var(--tinta);
}

.rc-tabla [aria-sort="ascending"] > .rc-tabla__orden::after,
.rc-tabla [aria-sort="descending"] > .rc-tabla__orden::after {
  content: "";
  flex: none;
  width: 0.375rem;
  height: 0.375rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.rc-tabla [aria-sort="ascending"] > .rc-tabla__orden::after {
  transform: translateY(25%) rotate(-135deg);
}

.rc-tabla [aria-sort="descending"] > .rc-tabla__orden::after {
  transform: translateY(-25%) rotate(45deg);
}

.rc-tabla--compacta :where(th, td) {
  padding: 0.375rem 0.625rem;
}

/* Tabla apilable: en pantallas estrechas cada fila es una ficha y cada celda
   enseña su rótulo (data-etiqueta). app.js refuerza los roles de tabla. */
@media (max-width: 39.99em) {
  .rc-tabla--apilable,
  .rc-tabla--apilable > tbody,
  .rc-tabla--apilable > tfoot {
    display: block;
  }

  .rc-tabla--apilable > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .rc-tabla--apilable > tbody > tr,
  .rc-tabla--apilable > tfoot > tr {
    position: relative;
    display: block;
    padding: 0.625rem var(--esp-3);
    border-bottom: 1px solid var(--linea);
  }

  .rc-tabla--apilable > tbody > tr:last-child {
    border-bottom: 0;
  }

  .rc-tabla--apilable.rc-tabla--seleccionable > tbody > tr {
    padding-left: var(--esp-7);
  }

  .rc-tabla--apilable > tbody > tr > :where(th, td),
  .rc-tabla--apilable > tfoot > tr > :where(th, td) {
    position: relative;
    display: block;
    width: auto;
    min-height: 1.75rem;
    padding: 0.1875rem 0 0.1875rem 7.25rem;
    border: 0;
    text-align: left;
    white-space: normal;
  }

  .rc-tabla--apilable > tbody > tr > :where(th, td)::before,
  .rc-tabla--apilable > tfoot > tr > :where(th, td)::before {
    content: attr(data-etiqueta);
    position: absolute;
    top: 0.25rem;
    left: 0;
    width: 6.75rem;
    overflow: hidden;
    color: var(--tinta-2);
    font-size: var(--texto-s);
    font-weight: var(--peso-normal);
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Celda que titula la ficha: sin rótulo y a todo el ancho. */
  .rc-tabla--apilable > tbody > tr > .rc-tabla__celda--titulo,
  .rc-tabla--apilable > tfoot > tr > .rc-tabla__celda--titulo {
    min-width: 0;
    padding: 0.1875rem var(--esp-7) 0.375rem 0;
    font-size: var(--texto-base);
    overflow-wrap: anywhere;
  }

  .rc-tabla--apilable > tbody > tr > .rc-tabla__celda--titulo .rc-tabla__principal {
    white-space: normal;
  }

  .rc-tabla--apilable > tbody > tr > .rc-tabla__celda--titulo::before,
  .rc-tabla--apilable > tfoot > tr > .rc-tabla__celda--titulo::before,
  .rc-tabla--apilable > tbody > tr > .rc-tabla__celda--seleccion::before,
  .rc-tabla--apilable > tbody > tr > .rc-tabla__celda--acciones::before {
    content: none;
  }

  .rc-tabla--apilable > tbody > tr > .rc-tabla__celda--seleccion {
    position: absolute;
    top: 0.875rem;
    left: 0.75rem;
    min-height: 0;
    padding: 0;
  }

  .rc-tabla--apilable > tbody > tr > .rc-tabla__celda--acciones {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    min-height: 0;
    padding: 0;
  }

  .rc-tabla--apilable > tfoot > tr {
    border-top: 1px solid var(--tinta);
    border-bottom: 6px double var(--acento);
  }

  .rc-tabla--apilable > tfoot > tr > :where(th, td):empty {
    display: none;
  }
}

/* --- Búsqueda progresiva -------------------------------------------------------
   El JavaScript envuelve el campo en .rc-buscable y cuelga de él la lista. El campo
   es un combobox ARIA; la opción activa se marca con fondo, filete y contorno
   (visible también con contraste forzado).                                    */

.rc-buscable {
  position: relative;
  min-width: 0;
}

.rc-sugerencias {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  left: 0;
  z-index: var(--z-menu);
  max-height: 16rem;
  margin: 0;
  padding: 0.25rem;
  overflow-y: auto;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-3);
  background: var(--papel);
  box-shadow: var(--sombra-2);
}

.rc-sugerencias__opcion {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radio-2);
  outline: 2px solid transparent;
  outline-offset: -2px;
  overflow-wrap: anywhere;
  cursor: pointer;
}

.rc-sugerencias__opcion:hover {
  background: var(--papel-2);
}

.rc-sugerencias__opcion[aria-selected="true"] {
  background: var(--acento-suave);
  box-shadow: inset 3px 0 0 var(--acento-fuerte);
  outline-color: var(--acento-fuerte);
}

.rc-sugerencias__detalle {
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

.rc-sugerencias__vacio {
  padding: 0.5rem 0.75rem;
  color: var(--tinta-2);
}

/* --- Barra de acciones en lote ---------------------------------------------------
   Va después de la tabla, dentro del mismo <form>. Se pega al borde inferior
   de la pantalla mientras la tabla está a la vista. Donde el navegador
   entiende :has() solo aparece con alguna fila marcada.                       */

.rc-lote {
  --foco: var(--sobre-tinta);
  --foco-hueco: var(--tinta);

  position: sticky;
  bottom: 0.5rem;
  z-index: var(--z-pegado);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  margin-top: var(--esp-3);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radio-3);
  background: var(--tinta);
  box-shadow: var(--sombra-2);
  color: var(--sobre-tinta);
}

.rc-lote__recuento {
  flex: 1 1 12rem;
  min-width: 0;
  font-weight: var(--peso-medio);
}

.rc-lote__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.rc-lote .rc-opcion__control {
  border-color: var(--sobre-tinta);
  background: transparent;
}

.rc-lote .rc-opcion__control:checked {
  border-color: var(--sobre-tinta);
  background: var(--sobre-tinta);
}

.rc-lote .rc-opcion__control::before {
  border-color: var(--tinta);
}

@supports selector(:has(*)) {
  [data-rc-listado]:not(:has([data-rc-seleccion]:checked)) .rc-lote {
    display: none;
  }
}

/* --- Resultado de una acción en lote: alcance, recuento y fila a fila -------- */

.rc-resultados > .rc-tarjeta__cuerpo {
  gap: var(--esp-4);
}

.rc-resultados__alcance {
  color: var(--tinta-2);
}

.rc-resultados__recuento {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2) var(--esp-6);
}

.rc-resultados__recuento > div {
  display: flex;
  flex-direction: column;
}

.rc-resultados__recuento dt {
  color: var(--tinta-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rc-resultados__recuento dd {
  font-family: var(--fuente-rotulo);
  font-size: var(--texto-xl);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
  line-height: 1.2;
}

/* --- Paginación ----------------------------------------------------------------- */

.rc-paginacion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2) var(--esp-4);
}

.rc-paginacion__resumen {
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.rc-paginacion__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1);
}

.rc-paginacion__enlace {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--alto-compacto);
  min-height: var(--alto-compacto);
  padding: var(--esp-1) 0.625rem;
  border: 1px solid transparent;
  border-radius: var(--radio-2);
  color: var(--tinta);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

a.rc-paginacion__enlace:hover {
  border-color: var(--linea-fuerte);
  background: var(--papel-2);
  color: var(--tinta);
}

.rc-paginacion__enlace[aria-current="page"] {
  border-color: var(--tinta);
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-weight: var(--peso-medio);
}

.rc-paginacion__enlace[aria-disabled="true"] {
  color: var(--tinta-inactiva);
}

.rc-paginacion__tamano {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.rc-paginacion__tamano > .rc-control {
  width: auto;
}

/* En pantallas estrechas quedan «Anterior», «Siguiente» y el resumen. */
@media (max-width: 39.99em) {
  .rc-paginacion__numero {
    display: none;
  }
}

/* --- Estado vacío: explica cómo crear el primer registro ---------------------- */

.rc-vacio {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.625rem;
  padding: clamp(1.25rem, 5vw, 3rem);
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio-3);
  background: var(--papel-2);
}

.rc-vacio__titulo {
  font-family: var(--fuente-rotulo);
  font-size: var(--texto-xl);
}

.rc-vacio__texto {
  max-width: 38rem;
  color: var(--tinta-2);
}

/* Pasos numerados: solo cuando de verdad hay un orden que seguir. */
.rc-vacio__pasos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  max-width: 38rem;
  counter-reset: rc-paso;
}

.rc-vacio__pasos > li {
  position: relative;
  min-height: 1.5rem;
  padding-left: 2.125rem;
  counter-increment: rc-paso;
}

.rc-vacio__pasos > li::before {
  content: counter(rc-paso);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--tinta);
  border-radius: 50%;
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  line-height: 1;
}

.rc-vacio__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  margin-top: 0.375rem;
}


/* ==========================================================================
   15. Editor de documentos: líneas y resumen
   ========================================================================== */

/* Pantalla estrecha: bloque normal, para que el resumen (último hijo) pueda
   pegarse al borde inferior a lo largo de todo el formulario. */
.rc-editor {
  display: block;
  min-width: 0;
}

.rc-editor__principal {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

/* --- Cabecera del documento ---------------------------------------------------- */

.rc-documento {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  min-width: 0;
}

.rc-documento__titulo,
.rc-lineas__titulo,
.rc-desglose__titulo {
  color: var(--tinta-2);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Líneas ---------------------------------------------------------------------
   Lista ordenada de líneas. Cada línea es una rejilla que cambia sola:
     estrecha   concepto arriba, cifras en tres columnas, todo con su rótulo
     media      concepto arriba y las cinco cifras en una fila
     muy ancha  todo en una fila
   Desde 40em solo la primera línea de cada lista enseña los rótulos: hacen
   de cabecera de columnas (los demás siguen ahí para lectores de pantalla). */

.rc-lineas {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
}

.rc-lineas__lista {
  display: flex;
  flex-direction: column;
}

.rc-linea {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  grid-template-areas:
    "orden concepto acciones"
    "cifras cifras cifras";
  gap: var(--esp-2);
  align-items: start;
  padding: var(--esp-3) 0;
  border-top: 1px solid var(--linea);
}

.rc-linea__orden {
  grid-area: orden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
}

.rc-linea__numero {
  color: var(--tinta-2);
  font-family: var(--fuente-codigo);
  font-size: var(--texto-xs);
  line-height: 1.25rem;
}

.rc-linea__concepto {
  grid-area: concepto;
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

textarea.rc-linea__descripcion,
.rc-linea__descripcion {
  min-height: 3.25rem;
  color: var(--tinta-2);
}

/* Cabecera de la línea: tipo y concepto. Estrecha, uno debajo del otro; desde 40em, el tipo a la
   izquierda (mismo corte que usa .rc-linea para pasar las cifras a una fila). */
.rc-linea__cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  align-items: end;
  min-width: 0;
}

@media (min-width: 40em) {
  .rc-linea__cabecera {
    grid-template-columns: minmax(8rem, 10rem) minmax(0, 1fr);
  }
}

/* Posición de la línea: reordenar sin JavaScript. Cabe en la columna de orden (2.75rem). */
.rc-linea__posicion {
  padding-right: 0.125rem;
  padding-left: 0.125rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.rc-linea__cifras {
  grid-area: cifras;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--esp-2);
  align-items: end;
  min-width: 0;
}

.rc-linea__campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
  min-width: 0;
}

.rc-linea__campo--impuesto {
  grid-column: span 2;
}

.rc-linea__etiqueta {
  color: var(--tinta-2);
  font-size: var(--texto-s);
  font-weight: var(--peso-medio);
}

.rc-linea__campo--cantidad > .rc-linea__etiqueta,
.rc-linea__campo--precio > .rc-linea__etiqueta,
.rc-linea__campo--descuento > .rc-linea__etiqueta,
.rc-linea__campo--importe > .rc-linea__etiqueta {
  text-align: right;
}

/* Importe de la línea: lo calcula el servidor; aquí solo se enseña. */
.rc-linea__importe {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: var(--alto-control);
  font-variant-numeric: tabular-nums;
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

.rc-linea__acciones {
  grid-area: acciones;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Grupo de líneas: título propio y filete del acento a la izquierda. */
.rc-lineas__grupo {
  padding: var(--esp-3) 0 0;
  border-top: 1px solid var(--linea);
}

.rc-lineas__grupo-cabecera {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}

.rc-lineas__grupo-titulo {
  flex: 1 1 auto;
  font-weight: var(--peso-medio);
}

.rc-lineas__grupo > .rc-lineas__lista {
  padding-left: 0.625rem;
  border-left: 3px solid var(--acento);
}

.rc-lineas__grupo > .rc-lineas__lista > .rc-linea:first-child {
  border-top: 0;
  padding-top: 0;
}

.rc-lineas__grupo-pie {
  display: flex;
  justify-content: flex-end;
  gap: var(--esp-4);
  padding: var(--esp-2) 3.25rem var(--esp-3) 0;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}

.rc-lineas__grupo-pie > output,
.rc-lineas__grupo-pie > strong {
  color: var(--tinta);
  font-weight: var(--peso-medio);
}

.rc-lineas__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  padding-top: var(--esp-3);
  border-top: 1px solid var(--linea);
}

@media (min-width: 40em) {
  .rc-linea {
    grid-template-areas:
      "orden concepto acciones"
      "orden cifras acciones";
  }

  .rc-linea__cifras {
    grid-template-columns: minmax(4rem, 1fr) minmax(5.5rem, 1.4fr) minmax(4rem, 1fr) minmax(7rem, 1.7fr) minmax(5.5rem, 1.4fr);
  }

  .rc-linea__campo--impuesto {
    grid-column: auto;
  }

  .rc-lineas__lista > .rc-linea:not(:first-child) .rc-linea__etiqueta {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Con lateral y resumen a la vista, la fila única cabe desde 96em. */
@media (min-width: 96em) {
  .rc-linea {
    grid-template-columns: 2.75rem minmax(14rem, 1fr) 32rem 2.75rem;
    grid-template-areas: "orden concepto cifras acciones";
  }

  .rc-linea__cifras {
    grid-template-columns: 4.5rem 6.5rem 4.5rem 8rem 6.5rem;
  }
}

/* --- Desglose de impuestos (tabla breve bajo las líneas) ---------------------- */

.rc-desglose {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  min-width: 0;
}

/* --- Resumen SIEMPRE visible ---------------------------------------------------------
   Estrecha y media: barra pegada al borde inferior (último hijo de .rc-editor).
   Desde 75em: columna lateral pegada bajo la cabecera.                        */

.rc-resumen {
  position: sticky;
  bottom: var(--rc-teclado, 0px);
  z-index: var(--z-pegado);
  max-height: 60vh;
  margin: var(--esp-5) calc(-1 * var(--margen-contenido)) 0;
  padding: var(--esp-2) var(--margen-contenido) calc(var(--esp-2) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  border-top: 1px solid var(--tinta);
  background: var(--papel);
  box-shadow: var(--sombra-barra);
}

.rc-resumen__titulo {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.rc-resumen .rc-totales {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--esp-4);
}

.rc-resumen .rc-totales__fila {
  gap: var(--esp-2);
  padding: 0.125rem 0;
  font-size: var(--texto-s);
}

.rc-resumen .rc-totales__fila--total {
  margin: 0;
  padding: 0.125rem 0;
  border: 0;
}

.rc-resumen .rc-totales__fila--total > dd {
  font-size: var(--texto-l);
}

.rc-resumen__nota {
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

/* Solo se enseña cuando app.js detecta cambios sin guardar en el formulario. */
.rc-resumen__nota--cambios {
  color: var(--aviso-texto);
  font-weight: var(--peso-medio);
}

.rc-resumen__acciones {
  display: flex;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}

.rc-resumen__acciones > .rc-boton {
  flex: 1 1 0;
  min-width: 0;
  padding-right: var(--esp-2);
  padding-left: var(--esp-2);
}

/* Con el teclado en pantalla la barra se queda en las cifras. */
.rc-teclado-abierto .rc-resumen__acciones,
.rc-teclado-abierto .rc-resumen__nota {
  display: none;
}

@media (min-width: 40em) and (max-width: 74.99em) {
  .rc-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--esp-1) var(--esp-5);
  }

  .rc-resumen .rc-totales {
    flex: 1 1 24rem;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  }

  .rc-resumen__nota {
    flex: 1 1 100%;
    order: 3;
  }

  .rc-resumen__acciones {
    flex: none;
    margin-top: 0;
  }

  .rc-resumen__acciones > .rc-boton {
    flex: none;
    padding-right: var(--esp-4);
    padding-left: var(--esp-4);
  }
}

@media (min-width: 75em) {
  .rc-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ancho-resumen);
    gap: var(--esp-6);
    align-items: start;
  }

  .rc-resumen {
    top: calc(var(--alto-demo) + var(--alto-cabecera) + 1rem);
    bottom: auto;
    display: flex;
    flex-direction: column;
    gap: var(--esp-3);
    max-height: calc(100vh - var(--alto-demo) - var(--alto-cabecera) - 2rem);
    margin: 0;
    padding: 1.125rem 1.25rem 1.25rem;
    border: 1px solid var(--linea);
    border-radius: var(--radio-3);
    box-shadow: none;
  }

  .rc-resumen__titulo {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: var(--tinta-2);
    font-family: var(--fuente-texto);
    font-size: var(--texto-xs);
    font-weight: var(--peso-fuerte);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .rc-resumen .rc-totales {
    display: flex;
  }

  .rc-resumen .rc-totales__fila {
    gap: var(--esp-4);
    padding: 0.3125rem 0;
    font-size: inherit;
  }

  .rc-resumen .rc-totales__fila--total {
    margin-top: 0.375rem;
    padding: 0.625rem 0;
    border-top: 1px solid var(--tinta);
    border-bottom: 6px double var(--acento);
  }

  .rc-resumen .rc-totales__fila--total > dd {
    font-size: var(--texto-2xl);
  }

  .rc-resumen__acciones {
    flex-direction: column;
    margin-top: var(--esp-1);
  }

  .rc-resumen__acciones > .rc-boton {
    flex: none;
    padding-right: var(--esp-4);
    padding-left: var(--esp-4);
  }
}

/* Cifra que ya no corresponde a lo escrito (pendiente de recalcular en el
   servidor): se marca sin perder contraste. */
.rc-desfasado {
  font-style: italic;
  text-decoration: underline dotted var(--aviso-marca);
  text-underline-offset: 0.2em;
}


/* ==========================================================================
   16. Detalle de documento: hoja, partes, totales
   ========================================================================== */

.rc-detalle {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.rc-detalle__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--esp-4) var(--esp-5);
}

.rc-detalle__titulos {
  flex: 1 1 16rem;
  min-width: 0;
}

.rc-detalle__tipo {
  color: var(--tinta-2);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rc-detalle__numero {
  font-family: var(--fuente-rotulo);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}

.rc-detalle__sub {
  margin-top: var(--esp-1);
  color: var(--tinta-2);
}

/* Barra de acciones del documento: solo las válidas para su estado. */
.rc-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

.rc-detalle__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--esp-5);
  align-items: start;
}

.rc-detalle__principal,
.rc-detalle__lateral {
  display: flex;
  flex-direction: column;
  gap: var(--esp-4);
  min-width: 0;
}

@media (min-width: 75em) {
  .rc-detalle__cuerpo {
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
}

/* --- Hoja: el documento tal como lo verá el cliente ---------------------------- */

.rc-hoja {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--esp-5);
  min-width: 0;
  padding: clamp(1rem, 4vw, 2.5rem);
  border: 1px solid var(--linea);
  border-radius: var(--radio-3);
  background: var(--papel);
}

/* Marca al agua para documentos de demostración. El texto sale del atributo
   data-marca de la hoja. */
.rc-hoja--demo {
  overflow: hidden;
}

.rc-hoja--demo::before {
  content: attr(data-marca);
  position: absolute;
  top: 42%;
  left: 50%;
  color: var(--tinta);
  font-family: var(--fuente-rotulo);
  font-size: clamp(1.75rem, 9vw, 5rem);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.12em;
  line-height: 1;
  opacity: 0.07;
  pointer-events: none;
  text-transform: uppercase;
  transform: translate(-50%, -50%) rotate(-18deg);
  white-space: nowrap;
}

.rc-hoja__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-4);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--tinta);
}

.rc-hoja__logo {
  flex: none;
  width: 4rem;
  height: 4rem;
}

.rc-hoja__identidad {
  min-width: 0;
  text-align: right;
}

.rc-hoja__tipo {
  font-family: var(--fuente-rotulo);
  font-size: var(--texto-xl);
  font-weight: var(--peso-medio);
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.rc-hoja__numero {
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

.rc-hoja__pie {
  padding-top: var(--esp-4);
  border-top: 1px solid var(--linea);
  color: var(--tinta-2);
  font-size: var(--texto-m);
}

.rc-hoja .rc-totales {
  width: 100%;
  max-width: 22rem;
  margin-left: auto;
}

/* --- Partes: emisor, cliente y datos del documento ---------------------------- */

.rc-partes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: 1.25rem var(--esp-6);
}

.rc-partes__parte {
  min-width: 0;
}

.rc-partes__titulo {
  margin-bottom: var(--esp-1);
  color: var(--tinta-2);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Datos: pares rótulo / valor ------------------------------------------------ */

.rc-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  gap: var(--esp-3) var(--esp-5);
}

.rc-datos__fila {
  min-width: 0;
}

.rc-datos__fila > dt {
  color: var(--tinta-2);
  font-size: var(--texto-s);
}

.rc-datos__fila > dd {
  font-weight: var(--peso-medio);
}

/* Variante en renglones: rótulo a la izquierda, valor a la derecha. */
.rc-datos--renglones {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rc-datos--renglones > .rc-datos__fila {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.125rem var(--esp-4);
  padding: 0.375rem 0;
  border-top: 1px solid var(--linea);
}

.rc-datos--renglones > .rc-datos__fila:first-child {
  padding-top: 0;
  border-top: 0;
}

.rc-datos--renglones > .rc-datos__fila > dt {
  font-size: inherit;
}

.rc-datos--renglones > .rc-datos__fila > dd {
  min-width: 0;
  margin-left: auto;
  text-align: right;
  overflow-wrap: anywhere;
}

/* --- Totales: raya de suma arriba y doble raya del acento bajo el total ----- */

.rc-totales {
  display: flex;
  flex-direction: column;
  font-variant-numeric: tabular-nums;
}

.rc-totales__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--esp-4);
  min-width: 0;
  padding: 0.3125rem 0;
}

.rc-totales__fila > dt {
  min-width: 0;
  color: var(--tinta-2);
  overflow-wrap: anywhere;
}

.rc-totales__fila > dd {
  font-weight: var(--peso-medio);
  text-align: right;
  white-space: nowrap;
}

.rc-totales__fila--total {
  margin-top: 0.375rem;
  padding: 0.625rem 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 6px double var(--acento);
}

.rc-totales__fila--total > dt {
  color: var(--tinta);
  font-size: var(--texto-s);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rc-totales__fila--total > dd {
  font-family: var(--fuente-rotulo);
  font-size: var(--texto-2xl);
  line-height: 1.1;
}

/* Saldo pendiente: lo que queda por cobrar tras los cobros aplicados. */
.rc-totales__fila--saldo > dt,
.rc-totales__fila--saldo > dd {
  color: var(--tinta);
  font-weight: var(--peso-fuerte);
}


/* ==========================================================================
   17. Utilidades
   ========================================================================== */

/* Cifras: alineadas a la derecha y con todos los dígitos del mismo ancho. */
.rc-num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* Identificadores: números de documento, NIF, IBAN, referencias, huellas. */
.rc-codigo {
  font-family: var(--fuente-codigo);
  font-size: 0.9375em;
  letter-spacing: -0.01em;
}

.rc-secundario {
  color: var(--tinta-2);
}

.rc-pequeno {
  font-size: var(--texto-s);
}

/* Rótulo en versalitas espaciadas. */
.rc-rotulo {
  color: var(--tinta-2);
  font-family: var(--fuente-texto);
  font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Pila vertical y fila con separación uniforme. */
.rc-pila {
  display: flex;
  flex-direction: column;
  gap: var(--pila-hueco, var(--esp-4));
  min-width: 0;
}

.rc-pila--ajustada {
  --pila-hueco: 0.5rem;
}

.rc-pila--amplia {
  --pila-hueco: 2rem;
}

.rc-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  min-width: 0;
}

.rc-fila--separada {
  justify-content: space-between;
}

/* Texto corrido (ayudas, condiciones). */
.rc-prosa {
  max-width: 44rem;
}

.rc-prosa > * + * {
  margin-top: 0.75em;
}

.rc-prosa :where(ul, ol) {
  padding-left: 1.25rem;
}

@media (max-width: 39.99em) {
  .rc-solo-ancho {
    display: none !important;
  }
}

@media (min-width: 40em) {
  .rc-solo-estrecho {
    display: none !important;
  }
}


/* ==========================================================================
   18. Preferencias del usuario: movimiento y contraste forzado
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Contraste forzado (modo de alto contraste de Windows): el sistema impone
   sus colores y quita sombras y fondos. Se conserva lo que indica estado. */
@media (forced-colors: active) {
  :focus-visible,
  .rc-nav__enlace:focus-visible,
  .rc-nav__subenlace:focus-visible,
  .rc-menu__elemento:focus-visible,
  .rc-pestanas__enlace:focus-visible,
  .rc-tabla__orden:focus-visible,
  .rc-desplegable__resumen:focus-visible,
  .rc-tabla-marco:focus-visible,
  .rc-paginacion__enlace:focus-visible {
    outline: 3px solid Highlight;
  }

  select.rc-control {
    -webkit-appearance: auto;
    appearance: auto;
    padding-right: var(--esp-3);
  }

  .rc-opcion__control:checked,
  .rc-casilla:checked,
  .rc-casilla:indeterminate {
    background: Highlight;
    border-color: Highlight;
  }

  .rc-opcion__control::before,
  .rc-casilla::before {
    border-color: HighlightText;
  }

  .rc-nav__enlace[aria-current="page"],
  .rc-nav__subenlace[aria-current="page"],
  .rc-paginacion__enlace[aria-current="page"] {
    outline: 2px solid CanvasText;
    outline-offset: -2px;
  }

  .rc-boton--discreto,
  .rc-boton--enlace {
    border-color: transparent;
  }

  .rc-demo,
  .rc-lote,
  .rc-resumen,
  .rc-menu__lista,
  .rc-dialogo {
    border: 1px solid CanvasText;
  }

  .rc-indicador {
    border: 1px solid CanvasText;
  }
}


/* ==========================================================================
   19. Impresión
   Solo lo básico: se imprime el contenido, sin estructura ni controles. El
   PDF legal de cada documento lo genera el servidor, no el navegador.
   ========================================================================== */

@media print {
  @page {
    margin: 1.5cm;
  }

  :root {
    --tactil-v: 0px;
    --tactil-h: 0px;
  }

  html,
  body {
    background: #ffffff;
    color: #000000;
    font-size: 10.5pt;
  }

  .rc-saltar,
  .rc-lateral,
  .rc-lateral__velo,
  .rc-cabecera,
  .rc-migas,
  .rc-pagina__acciones,
  .rc-acciones,
  .rc-pestanas,
  .rc-listado__barra,
  .rc-fichas,
  .rc-lote,
  .rc-paginacion,
  .rc-menu,
  .rc-aviso__cerrar,
  .rc-resumen__acciones,
  .rc-lineas__pie,
  .rc-linea__orden,
  .rc-linea__acciones,
  .rc-tabla__celda--seleccion,
  .rc-tabla__celda--acciones,
  .rc-no-imprimir,
  dialog {
    display: none !important;
  }

  .rc-app,
  .rc-app__principal {
    min-height: 0;
  }

  .rc-app__marco,
  .rc-editor,
  .rc-detalle__cuerpo {
    display: block;
  }

  .rc-contenido {
    padding: 0;
  }

  .rc-pagina {
    max-width: none;
  }

  /* La marca de demostración también se imprime. */
  .rc-demo {
    position: static;
    height: auto;
    margin-bottom: 0.5cm;
    padding: 0.2cm 0.4cm;
    border: 2px solid #000000;
    background: none;
    color: #000000;
    white-space: normal;
  }

  .rc-demo__detalle,
  .rc-demo__ampliacion {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    color: #000000;
    border-color: #000000;
  }

  .rc-cabecera,
  .rc-resumen,
  .rc-lote {
    position: static;
  }

  .rc-resumen {
    max-height: none;
    margin: 0.5cm 0 0;
    padding: 0;
    overflow: visible;
    border: 0;
    box-shadow: none;
  }

  .rc-detalle__lateral {
    margin-top: 0.5cm;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  /* Los botones no sirven de nada en papel. */
  .rc-boton {
    display: none !important;
  }

  /* Las tablas se aprietan para caber en el ancho de un A4. */
  .rc-tabla-marco {
    overflow: visible;
    border: 0;
  }

  .rc-tabla {
    font-size: 8.5pt;
  }

  .rc-tabla :where(th, td) {
    padding: 0.12cm 0.16cm;
  }

  .rc-tabla > thead {
    display: table-header-group;
  }

  .rc-tabla > thead :where(th) {
    background: none;
    color: #000000;
    font-size: 8pt;
    white-space: normal;
  }

  .rc-tabla .rc-insignia {
    padding: 0 0.1cm;
    font-size: 7.5pt;
  }

  .rc-tabla__principal {
    white-space: normal;
  }

  .rc-tabla tr,
  .rc-tarjeta,
  .rc-totales,
  .rc-linea,
  .rc-cronologia__evento {
    break-inside: avoid;
  }

  .rc-hoja {
    padding: 0;
    border: 0;
  }

  .rc-hoja--demo::before {
    opacity: 0.12;
  }

  .rc-insignia,
  .rc-aviso {
    border-color: #000000;
    background: none;
    color: #000000;
  }

  .rc-tarjeta,
  .rc-estados,
  .rc-indicadores,
  .rc-desplegable {
    border-color: #000000;
  }

  h1,
  h2,
  h3 {
    break-after: avoid;
  }
}