/* ============================================================================
   fact-mereba — armazón de panel (E27, T-27.1).

   Se carga el ÚLTIMO. Define los tokens --fm-* del panel (claro y oscuro) y los
   componentes comunes que usan todas las pantallas: barra lateral y superior,
   tarjetas, píldoras, tablas, indicadores, listas de definición y pestañas.

   El tema lo fija js/tema.js con `data-tema` en <html>; sin JavaScript manda
   `prefers-color-scheme` (el bloque oscuro está dos veces con los mismos valores).
   Los tokens son solo `--fm-nombre: #rrggbb;`: un test los lee para comprobar
   los contrastes.
   ========================================================================== */

:root,
html[data-tema="claro"] {
  color-scheme: light;
  --fm-fondo: #F6F7F9;
  --fm-superficie: #FFFFFF;
  --fm-superficie-elevada: #FFFFFF;
  --fm-borde: #E1E4E9;
  --fm-borde-control: #838B96;
  --fm-texto: #1F2328;
  --fm-texto-atenuado: #5B6470;
  --fm-primario: #00703C;
  --fm-primario-hover: #00582F;
  --fm-texto-sobre-primario: #FFFFFF;
  --fm-primario-suave: #E3F1E9;
  --fm-primario-suave-texto: #0B4A2B;
  --fm-foco: #1D5FD6;
  --fm-exito-texto: #14532D;
  --fm-exito-fondo: #DDF3E5;
  --fm-aviso-texto: #7A4A06;
  --fm-aviso-fondo: #FCEFD3;
  --fm-peligro-texto: #9B1C1C;
  --fm-peligro-fondo: #FBE4E4;
  --fm-info-texto: #1D4F91;
  --fm-info-fondo: #E1ECFA;
  --fm-neutra-texto: #424A55;
  --fm-neutra-fondo: #ECEEF1;
}

html[data-tema="oscuro"] {
  color-scheme: dark;
  --fm-fondo: #0E1512;
  --fm-superficie: #141C18;
  --fm-superficie-elevada: #1B2621;
  --fm-borde: #2A3832;
  --fm-borde-control: #7C8A83;
  --fm-texto: #E4E2DA;
  --fm-texto-atenuado: #A3A89F;
  --fm-primario: #3DB878;
  --fm-primario-hover: #5BC98E;
  --fm-texto-sobre-primario: #06210F;
  --fm-primario-suave: #1B3327;
  --fm-primario-suave-texto: #9ED5B5;
  --fm-foco: #7AA7FF;
  --fm-exito-texto: #8FD9B0;
  --fm-exito-fondo: #153024;
  --fm-aviso-texto: #EBC98C;
  --fm-aviso-fondo: #33291A;
  --fm-peligro-texto: #F4A9A9;
  --fm-peligro-fondo: #3A1F20;
  --fm-info-texto: #A9C8F5;
  --fm-info-fondo: #1B2A40;
  --fm-neutra-texto: #C3C9D1;
  --fm-neutra-fondo: #262C31;
}

@media (prefers-color-scheme: dark) {
  html:not([data-tema]) {
  color-scheme: dark;
    --fm-fondo: #0E1512;
    --fm-superficie: #141C18;
    --fm-superficie-elevada: #1B2621;
    --fm-borde: #2A3832;
    --fm-borde-control: #7C8A83;
    --fm-texto: #E4E2DA;
    --fm-texto-atenuado: #A3A89F;
    --fm-primario: #3DB878;
    --fm-primario-hover: #5BC98E;
    --fm-texto-sobre-primario: #06210F;
    --fm-primario-suave: #1B3327;
    --fm-primario-suave-texto: #9ED5B5;
    --fm-foco: #7AA7FF;
    --fm-exito-texto: #8FD9B0;
    --fm-exito-fondo: #153024;
    --fm-aviso-texto: #EBC98C;
    --fm-aviso-fondo: #33291A;
    --fm-peligro-texto: #F4A9A9;
    --fm-peligro-fondo: #3A1F20;
    --fm-info-texto: #A9C8F5;
    --fm-info-fondo: #1B2A40;
    --fm-neutra-texto: #C3C9D1;
    --fm-neutra-fondo: #262C31;
  }
}

:root {
  --fm-radio: 10px;
  --fm-radio-chico: 6px;
  --fm-barra-alto: 56px;
  --fm-lateral-ancho: 15rem;
  --fm-sombra: 0 1px 2px rgba(16, 24, 20, 0.06);
}

html {
  scroll-padding-top: calc(var(--fm-barra-alto) + 1rem);
}

body,
body.has-background-cream {
  background-color: var(--fm-fondo);
  color: var(--fm-texto);
}

:focus-visible {
  outline: 2px solid var(--fm-foco);
  outline-offset: 2px;
}

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

/* ---------- Iconos con el color del texto ---------- */
.fm-ico {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
}
.fm-ico--home { -webkit-mask-image: url(../icons/home.svg); mask-image: url(../icons/home.svg); }
.fm-ico--file { -webkit-mask-image: url(../icons/file.svg); mask-image: url(../icons/file.svg); }
.fm-ico--euro { -webkit-mask-image: url(../icons/euro.svg); mask-image: url(../icons/euro.svg); }
.fm-ico--repeat { -webkit-mask-image: url(../icons/repeat.svg); mask-image: url(../icons/repeat.svg); }
.fm-ico--clients { -webkit-mask-image: url(../icons/clients.svg); mask-image: url(../icons/clients.svg); }
.fm-ico--shield { -webkit-mask-image: url(../icons/shield.svg); mask-image: url(../icons/shield.svg); }
.fm-ico--search { -webkit-mask-image: url(../icons/search.svg); mask-image: url(../icons/search.svg); }
.fm-ico--settings { -webkit-mask-image: url(../icons/settings.svg); mask-image: url(../icons/settings.svg); }
.fm-ico--sort { -webkit-mask-image: url(../icons/sort.svg); mask-image: url(../icons/sort.svg); }
.fm-ico--users { -webkit-mask-image: url(../icons/users.svg); mask-image: url(../icons/users.svg); }
.fm-ico--help { -webkit-mask-image: url(../icons/help.svg); mask-image: url(../icons/help.svg); }
.fm-ico--menu { -webkit-mask-image: url(../icons/menu.svg); mask-image: url(../icons/menu.svg); }
.fm-ico--user { -webkit-mask-image: url(../icons/user.svg); mask-image: url(../icons/user.svg); }
.fm-ico--chevron-down { -webkit-mask-image: url(../icons/chevron-down.svg); mask-image: url(../icons/chevron-down.svg); }
.fm-ico--plus { -webkit-mask-image: url(../icons/plus.svg); mask-image: url(../icons/plus.svg); }
.fm-ico--more { -webkit-mask-image: url(../icons/more.svg); mask-image: url(../icons/more.svg); }
.fm-ico--chevron-down { width: 14px; height: 14px; }

/* ---------- Rejilla ---------- */
.fm-app {
  min-height: 100vh;
  font-size: 0.9375rem;
}

.fm-columna {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.fm-principal {
  flex: 1 0 auto;
  padding: 1.5rem 1rem 2rem;
}

.fm-contenido {
  max-width: 1200px;
  min-width: 0;
  margin: 0 auto;
}

.fm-principal,
.fm-contenido > *,
.fm-contenido .columns > .column {
  min-width: 0;
}

@media screen and (min-width: 1024px) {
  .fm-app:not(.fm-app--anonimo) {
    display: grid;
    grid-template-columns: var(--fm-lateral-ancho) minmax(0, 1fr);
  }
  .fm-principal {
    padding: 2rem 2rem 2.5rem;
  }
}

/* ---------- Barra lateral ---------- */
.fm-lateral {
  background: var(--fm-superficie);
  border-bottom: 1px solid var(--fm-borde);
  padding: 1rem 0.75rem 0.75rem;
}

.fm-marca {
  display: block;
  padding: 0.25rem 0.75rem 0.75rem;
  color: var(--fm-primario);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
}

.fm-marca:hover {
  color: var(--fm-primario-hover);
}

.fm-lateral ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fm-grupo-titulo {
  margin: 1.1rem 0 0.35rem;
  padding: 0 0.75rem;
  color: var(--fm-texto-atenuado);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fm-grupo--pie {
  margin-top: 1.1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--fm-borde);
}

.fm-enlace {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  height: 36px;
  padding: 0 0.75rem;
  border-radius: var(--fm-radio-chico);
  color: var(--fm-texto);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease;
}

.fm-enlace .fm-ico {
  color: var(--fm-texto-atenuado);
}

.fm-enlace:hover {
  background: var(--fm-neutra-fondo);
  color: var(--fm-texto);
}

.fm-enlace.es-actual {
  background: var(--fm-primario-suave);
  color: var(--fm-primario-suave-texto);
  font-weight: 700;
}

.fm-enlace.es-actual .fm-ico {
  color: var(--fm-primario);
}

.fm-enlace.es-actual::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--fm-primario);
}

@media screen and (min-width: 1024px) {
  .fm-lateral {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-bottom: 0;
    border-right: 1px solid var(--fm-borde);
  }
}

/* Con JavaScript, en pantallas estrechas la lateral se pliega tras «Menú».
   Sin él (sin la clase fm-js) se queda estática encima del contenido. */
@media screen and (max-width: 1023.98px) {
  .fm-js .fm-lateral {
    display: none;
    position: fixed;
    z-index: 30;
    top: var(--fm-barra-alto);
    left: 0;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    border-bottom: 0;
  }
  .fm-js .fm-lateral.is-abierta {
    display: block;
  }
  .fm-js .fm-lateral .fm-marca {
    display: none;
  }
}

/* ---------- Barra superior ---------- */
.fm-superior {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--fm-barra-alto);
  padding: 0 1rem;
  background: var(--fm-superficie);
  border-bottom: 1px solid var(--fm-borde);
}

.fm-marca--barra {
  padding: 0;
}

.fm-migas {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.fm-migas .breadcrumb {
  margin: 0;
}

.fm-acciones-barra {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: auto;
}

.fm-menu-boton,
.fm-boton {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.75rem;
  border: 1px solid var(--fm-borde-control);
  border-radius: var(--fm-radio-chico);
  background: var(--fm-superficie);
  color: var(--fm-texto);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.fm-menu-boton[hidden] {
  display: none;
}

.fm-menu-boton:hover,
.fm-boton:hover {
  background: var(--fm-neutra-fondo);
}

.fm-boton--primario {
  background: var(--fm-primario);
  border-color: var(--fm-primario);
  color: var(--fm-texto-sobre-primario);
}

.fm-boton--primario:hover {
  background: var(--fm-primario-hover);
  border-color: var(--fm-primario-hover);
}

@media screen and (min-width: 1024px) {
  .fm-menu-boton {
    display: none;
  }
  .fm-superior {
    padding: 0 2rem;
  }
}

.fm-busqueda {
  position: relative;
  display: none;
}

.fm-busqueda .fm-ico {
  position: absolute;
  left: 0.65rem;
  top: 9px;
  color: var(--fm-texto-atenuado);
  pointer-events: none;
}

.fm-busqueda input {
  width: 17rem;
  max-width: 28vw;
  height: 36px;
  padding: 0 0.75rem 0 2.1rem;
  border: 1px solid var(--fm-borde-control);
  border-radius: var(--fm-radio-chico);
  background: var(--fm-fondo);
  color: var(--fm-texto);
  font: inherit;
}

.fm-busqueda input::placeholder {
  color: var(--fm-texto-atenuado);
}

@media screen and (min-width: 768px) {
  .fm-busqueda {
    display: block;
  }
}

/* El aviso de entorno de pruebas no se oculta nunca: en movil sale compacto. */
.fm-superior .fm-entorno {
  display: inline-flex;
}

.fm-superior .fm-entorno-largo {
  display: none;
}

@media screen and (min-width: 640px) {
  .fm-superior .fm-entorno-largo {
    display: inline;
  }

  .fm-superior .fm-entorno-corto {
    display: none;
  }
}

.fm-superior .boton-tema {
  width: 36px;
  height: 36px;
  border-color: var(--fm-borde-control);
  color: var(--fm-texto);
  background: var(--fm-superficie);
}

.fm-superior .boton-tema:hover {
  background: var(--fm-neutra-fondo);
  border-color: var(--fm-borde-control);
}

.fm-superior .boton-tema:focus-visible {
  outline-color: var(--fm-foco);
}

.fm-superior .boton-tema[hidden] {
  display: none;
}

@media screen and (max-width: 639.98px) {
  .fm-migas {
    display: none;
  }
  .fm-superior {
    gap: 0.5rem;
  }
  .fm-usuario-correo {
    display: none;
  }
}

/* ---------- Menús desplegables (<details class="fm-menu">) ---------- */
.fm-menu {
  position: relative;
}

.fm-menu > summary {
  list-style: none;
}

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

.fm-usuario-correo {
  max-width: 14rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-menu-lista {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  left: 0;
  min-width: 13rem;
  padding: 0.35rem;
  background: var(--fm-superficie-elevada);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
  box-shadow: 0 8px 24px rgba(16, 24, 20, 0.14);
}

.fm-menu-lista {
  max-width: calc(100vw - 32px);
}

.fm-menu-lista--derecha,
.fm-nueva .fm-menu-lista {
  left: auto;
  right: 0;
}

/* Los menús de acciones de la ficha y las listas se abren hacia la izquierda
   en pantallas estrechas para no salirse de la ventana. */
@media screen and (max-width: 767px) {
  .fm-menu-lista {
    left: auto;
    right: 0;
  }
}

/* Anillo de foco visible en todo lo interactivo del armazón. */
.fm-enlace:focus-visible,
.fm-menu > summary:focus-visible,
.fm-menu-lista a:focus-visible,
.fm-menu-lista button:focus-visible,
details > summary:focus-visible,
.fm-pestanas a:focus-visible,
.fm-pildora:focus-visible,
a.fm-pildora:focus-visible,
.pagination a:focus-visible,
.fm-paginacion a:focus-visible {
  outline: 2px solid var(--fm-foco);
  outline-offset: 2px;
}

.fm-enlace:focus-visible,
.fm-menu-lista a:focus-visible,
.fm-menu-lista button:focus-visible {
  outline-offset: -2px;
}

.fm-menu-lista a,
.fm-menu-lista button {
  display: block;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: var(--fm-radio-chico);
  background: none;
  color: var(--fm-texto);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.fm-menu-lista a:hover,
.fm-menu-lista button:hover {
  background: var(--fm-neutra-fondo);
}

.fm-menu-lista .es-peligro {
  color: var(--fm-peligro-texto);
}

.fm-menu-cabecera {
  margin: 0;
  padding: 0.4rem 0.65rem 0.5rem;
  border-bottom: 1px solid var(--fm-borde);
  margin-bottom: 0.25rem;
  color: var(--fm-texto-atenuado);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

/* ---------- Cabecera de página ---------- */
.fm-pagina-cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-bottom: 1.5rem;
}

.fm-pagina-cabecera h1 {
  margin: 0;
  color: var(--fm-texto);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
}

.fm-pagina-cabecera .fm-subtitulo {
  margin: 0.15rem 0 0;
  color: var(--fm-texto-atenuado);
}

.fm-pagina-acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* ---------- Tarjeta ---------- */
.fm-tarjeta {
  background: var(--fm-superficie-elevada);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
  padding: 1.25rem;
  box-shadow: var(--fm-sombra);
}

.fm-tarjeta > h2,
.fm-tarjeta > .fm-tarjeta-titulo {
  margin: 0 0 0.75rem;
  color: var(--fm-texto);
  font-size: 1rem;
  font-weight: 700;
}

/* ---------- Píldoras de estado ---------- */
.fm-pildora {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--fm-neutra-fondo);
  color: var(--fm-neutra-texto);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

.fm-pildora--exito { background: var(--fm-exito-fondo); color: var(--fm-exito-texto); }
.fm-pildora--aviso { background: var(--fm-aviso-fondo); color: var(--fm-aviso-texto); }
.fm-pildora--peligro { background: var(--fm-peligro-fondo); color: var(--fm-peligro-texto); }
.fm-pildora--info { background: var(--fm-info-fondo); color: var(--fm-info-texto); }
.fm-pildora--neutra { background: var(--fm-neutra-fondo); color: var(--fm-neutra-texto); }

/* ---------- Tabla ---------- */
.fm-tabla-envoltorio {
  overflow-x: auto;
  background: var(--fm-superficie);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
}

.fm-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.fm-tabla th {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--fm-borde);
  background: var(--fm-fondo);
  color: var(--fm-texto-atenuado);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.fm-tabla td {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--fm-borde);
  color: var(--fm-texto);
  vertical-align: middle;
}

.fm-tabla tbody tr:last-child td {
  border-bottom: 0;
}

.fm-tabla tbody tr:hover td {
  background: var(--fm-fondo);
}

.fm-tabla .fm-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Estado vacío ---------- */
.fm-vacio {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--fm-texto-atenuado);
}

.fm-vacio p {
  margin: 0 0 0.75rem;
}

/* ---------- Indicador (cifra) ---------- */
.fm-cifra {
  display: block;
  padding: 1rem 1.25rem;
  background: var(--fm-superficie);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
  color: var(--fm-texto);
  text-decoration: none;
  box-shadow: var(--fm-sombra);
}

a.fm-cifra:hover {
  border-color: var(--fm-primario);
}

.fm-cifra-etiqueta {
  display: block;
  color: var(--fm-texto-atenuado);
  font-size: 0.8125rem;
  font-weight: 500;
}

.fm-cifra-valor {
  display: block;
  margin-top: 0.25rem;
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.fm-cifra-detalle {
  display: block;
  margin-top: 0.15rem;
  color: var(--fm-texto-atenuado);
  font-size: 0.8125rem;
}

.fm-cifra--peligro .fm-cifra-valor {
  color: var(--fm-peligro-texto);
}

/* ---------- Lista de definición compacta ---------- */
.fm-dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.5rem 1rem;
  margin: 0;
}

.fm-dl dt {
  color: var(--fm-texto-atenuado);
  font-size: 0.8125rem;
}

.fm-dl dd {
  margin: 0;
  color: var(--fm-texto);
  overflow-wrap: anywhere;
}

/* ---------- Pestañas de filtro ---------- */
.fm-pestanas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--fm-borde);
}

.fm-pestanas a {
  margin-bottom: -1px;
  padding: 0.5rem 0.9rem;
  border-bottom: 2px solid transparent;
  color: var(--fm-texto-atenuado);
  font-weight: 500;
  text-decoration: none;
}

.fm-pestanas a:hover {
  color: var(--fm-texto);
}

.fm-pestanas a[aria-current] {
  border-bottom-color: var(--fm-primario);
  color: var(--fm-texto);
  font-weight: 700;
}

/* ---------- Pie ----------
   Texto pequeño y atenuado al final de la columna, sobre el fondo de la página.
   El tema pinta `.footer` con `!important`; hay que igualarlo. */
.fm-columna > .footer.nota {
  flex: none;
  padding: 1rem 1rem 1.5rem;
  background-color: transparent !important;
  font-size: 0.75rem;
}

.fm-columna > .footer.nota .pie-app {
  max-width: 1200px;
  margin: 0 auto;
}

.fm-columna > .footer.nota,
.fm-columna > .footer.nota p,
.fm-columna > .footer.nota a {
  color: var(--fm-texto-atenuado);
}

.fm-columna > .footer.nota a {
  text-decoration: underline;
}

.fm-columna > .footer.nota a:hover {
  color: var(--fm-texto);
}

/* ---------- Títulos del panel ----------
   La fuente de marca solo va en el logotipo; los títulos del panel usan Roboto,
   en minúsculas y con pesos 600/500. */
.fm-app h1,
.fm-app h2,
.fm-app h3,
.fm-app h4,
.fm-app .title,
.fm-app .subtitle {
  font-family: var(--mereba-font-body);
  font-variant: normal;
  letter-spacing: normal;
  text-transform: none;
  color: var(--fm-texto);
}

.fm-app h1,
.fm-app .title.is-1,
.fm-app .title.is-2,
.fm-app .title.is-3,
.fm-app h1.title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
}

.fm-app h2,
.fm-app .title.is-4,
.fm-app .title.is-5 {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
}

.fm-app h3,
.fm-app h4,
.fm-app .title.is-6 {
  font-size: 0.9375rem;
  font-weight: 600;
}

.fm-app .subtitle {
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--fm-texto-atenuado);
}

.fm-app .fm-grupo-titulo {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fm-texto-atenuado);
}

.fm-app .fm-cifra-etiqueta {
  font-weight: 500;
}

/* ---------- Cajas heredadas del tema ----------
   `.box`, `.card`, `.mereba-card`, los paneles plegables y los fondos crema
   adoptan la superficie elevada con borde fino. */
html body .fm-app .box,
html body .fm-app .card,
html body .fm-app .mereba-card,
html body .fm-app details.panel-alta,
html body .fm-app .has-background-cream,
html body .fm-app .has-background-cream-soft {
  background-color: var(--fm-superficie-elevada);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
  box-shadow: none;
  color: var(--fm-texto);
  transform: none;
}

/* ---------- Tablas dentro de tarjetas ---------- */
.fm-tabla-contenedor {
  max-width: 100%;
  overflow-x: auto;
  /* Contiene los `.is-sr-only` (position:absolute) de las cabeceras: sin esto
     el rótulo oculto de «Acciones» se queda fuera del recorte y ensancha la
     página entera en móvil. */
  position: relative;
}

.fm-tabla td,
.fm-tabla th {
  overflow-wrap: anywhere;
}
.fm-tabla td.importe,
.fm-tabla th.importe {
  overflow-wrap: normal;
}

.fm-app td.importe,
.fm-app th.importe,
.fm-app .fm-tabla .fm-num {
  text-align: right;
  white-space: nowrap;
}

.fm-app .importe,
.fm-app .fm-num {
  font-family: var(--mereba-font-body);
  font-variant-numeric: tabular-nums;
}

/* ---------- Portada ---------- */
.fm-cifras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}

/* De 360 a 1023 px, dos por fila; desde 1024 px, cuatro. */
@media screen and (min-width: 360px) {
  .fm-cifras {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (min-width: 1024px) {
  .fm-cifras {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.fm-portada {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media screen and (min-width: 1024px) {
  .fm-portada {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
  }
}

.fm-atencion {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fm-atencion li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--fm-borde);
}

.fm-atencion li:last-child {
  border-bottom: 0;
}

.fm-grafica {
  display: block;
  width: 100%;
  height: auto;
}

.fm-grafica .fm-barra {
  fill: var(--fm-primario);
}

.fm-grafica .fm-etiqueta-max {
  font-size: 12px;
}

/* En pantallas estrechas solo se rotula un mes de cada dos (los pares, que
   incluyen siempre el más antiguo): el resto de la barra sigue teniendo su
   <title> y la tabla equivalente. */
@media screen and (max-width: 640px) {
  .fm-grafica text,
  .fm-grafica .fm-etiqueta-max {
    font-size: 20px;
  }
  .fm-grafica .fm-mes:not(.fm-mes--alterno) {
    display: none;
  }
}

.fm-grafica text {
  fill: var(--fm-texto-atenuado);
  font-family: var(--mereba-font-body);
  font-size: 13px;
}

.fm-tarjeta + .fm-tarjeta {
  margin-top: 1rem;
}

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

@media print {
  .fm-lateral,
  .fm-superior {
    display: none !important;
  }
  .fm-app:not(.fm-app--anonimo) {
    display: block;
  }
}

/* ---------- Ficha de factura (E27 / T-27.3) ---------- */
.fm-ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}

/* En una columna el resumen va justo después de la cabecera. */
.fm-ficha-lateral {
  order: -1;
  display: grid;
  gap: 1rem;
  min-width: 0;
}

.fm-ficha-principal {
  display: grid;
  gap: 1rem;
  min-width: 0;
}

@media screen and (min-width: 1024px) {
  .fm-ficha {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
  .fm-ficha-lateral {
    order: 0;
    position: sticky;
    top: calc(var(--fm-barra-alto) + 1rem);
  }
}

.fm-pagina-cabecera h1 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.fm-pagina-acciones form {
  margin: 0;
}

.fm-boton[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.fm-boton {
  text-decoration: none;
}

.fm-boton--primario:hover,
.fm-boton--primario {
  color: var(--fm-texto-sobre-primario);
}

/* Menú «Más acciones»: filas de ancho completo, lo destructivo al final. */
.fm-menu-acciones {
  min-width: 15rem;
}

.fm-menu-acciones form {
  margin: 0;
}

.fm-menu-separador {
  margin: 0.35rem 0;
  border: 0;
  border-top: 1px solid var(--fm-borde);
  background: none;
  height: 0;
}

.fm-menu-anular {
  padding: 0.25rem 0.35rem;
}

.fm-menu-anular textarea {
  margin: 0.35rem 0;
}

.fm-menu-nota {
  display: block;
  color: var(--fm-texto-atenuado);
  font-size: 0.8125rem;
}

/* Avisos compactos de la ficha. */
.fm-alerta {
  margin: 0 0 1rem;
  padding: 0.65rem 0.9rem;
  border-radius: var(--fm-radio-chico);
  border: 1px solid var(--fm-borde);
  background: var(--fm-neutra-fondo);
  color: var(--fm-neutra-texto);
  font-size: 0.9375rem;
}

.fm-alerta--aviso { background: var(--fm-aviso-fondo); color: var(--fm-aviso-texto); }
.fm-alerta--peligro { background: var(--fm-peligro-fondo); color: var(--fm-peligro-texto); }
.fm-alerta--info { background: var(--fm-info-fondo); color: var(--fm-info-texto); }
.fm-alerta--exito { background: var(--fm-exito-fondo); color: var(--fm-exito-texto); }

.fm-alerta a {
  color: inherit;
  text-decoration: underline;
}

/* La hoja: el documento de la factura. */
.fm-hoja {
  background: var(--fm-superficie-elevada);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
  padding: 1.5rem;
  box-shadow: var(--fm-sombra);
  min-width: 0;
}

.fm-hoja-cabecera {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.fm-hoja-numero {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--fm-texto);
}

.fm-hoja-fechas {
  text-align: right;
}

.fm-hoja-partes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 1.25rem 0 0.75rem;
}

.fm-hoja-parte dt {
  color: var(--fm-texto-atenuado);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.fm-hoja-parte dd {
  margin: 0 0 0.5rem;
  color: var(--fm-texto);
  overflow-wrap: anywhere;
}

.fm-hoja-titulo {
  margin: 1.25rem 0 0.5rem;
  font-size: 0.9375rem;
  color: var(--fm-texto);
}

.fm-totales {
  margin: 1rem 0 0 auto;
  max-width: 18rem;
  border-top: 1px solid var(--fm-borde);
  padding-top: 0.5rem;
}

.fm-totales .fila {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.2rem 0;
  font-variant-numeric: tabular-nums;
}

.fm-totales .fila.es-total {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 2px solid var(--fm-texto);
  font-size: 1.125rem;
  font-weight: 700;
}

/* Secciones secundarias de la columna principal. */
.fm-seccion > h2,
.fm-seccion > .fm-titulo-seccion {
  margin: 0 0 0.75rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--fm-texto);
}

.fm-tarjeta > .fm-tabla-contenedor,
.fm-hoja > .fm-tabla-contenedor {
  margin-top: 0.25rem;
}

/* Resumen. */
.fm-resumen-total {
  font-size: 1.5rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

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

/* Actividad. */
.fm-actividad {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fm-actividad li {
  display: flex;
  flex-direction: column;
  padding: 0.4rem 0;
  border-top: 1px solid var(--fm-borde);
}

.fm-actividad li:first-child {
  border-top: 0;
}

.fm-actividad-accion {
  font-weight: 600;
  color: var(--fm-texto);
}

/* Acciones plegables de la columna lateral. */
.fm-acciones-ficha > h2 {
  margin-bottom: 0.25rem;
}

.fm-panel {
  border-top: 1px solid var(--fm-borde);
}

.fm-panel:first-of-type {
  border-top: 0;
}

.fm-panel > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.65rem 0.25rem;
  color: var(--fm-texto);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.fm-panel > summary::-webkit-details-marker {
  display: none;
}

.fm-panel > summary:hover {
  background: var(--fm-neutra-fondo);
}

.fm-panel > summary .fm-ico {
  transition: transform 0.15s;
}

.fm-panel[open] > summary .fm-ico {
  transform: rotate(180deg);
}

.fm-panel-cuerpo {
  padding: 0.25rem 0.25rem 1rem;
}

.fm-panel-cuerpo .fm-subseccion + .fm-subseccion {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--fm-borde);
}

.fm-panel-cuerpo h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
}

@media (prefers-reduced-motion: reduce) {
  .fm-panel > summary .fm-ico {
    transition: none;
  }
}

/* ---------- Enlaces del contenido (T-27.4) ----------
   Primario tanto sin visitar como visitado (el morado del navegador no
   pertenece a la paleta); subrayado al pasar el ratón o al enfocar. */
.fm-app .fm-contenido a:not([class*="fm-boton"]):not(.button):not(.fm-cifra):link,
.fm-app .fm-contenido a:not([class*="fm-boton"]):not(.button):not(.fm-cifra):visited {
  color: var(--fm-primario);
}

.fm-app .fm-contenido a:not([class*="fm-boton"]):not(.button):not(.fm-cifra):hover,
.fm-app .fm-contenido a:not([class*="fm-boton"]):not(.button):not(.fm-cifra):focus-visible {
  text-decoration: underline;
}

/* Las pestañas y los botones conservan su color propio. */
.fm-app .fm-contenido .fm-pestanas a:link,
.fm-app .fm-contenido .fm-pestanas a:visited {
  color: var(--fm-texto-atenuado);
}

.fm-app .fm-contenido .fm-pestanas a[aria-current]:link,
.fm-app .fm-contenido .fm-pestanas a[aria-current]:visited {
  color: var(--fm-texto);
}

.fm-app .fm-contenido .fm-pestanas a:hover {
  text-decoration: none;
}

.fm-pestana-n {
  margin-left: 0.25rem;
  padding: 0 0.45rem;
  border-radius: 999px;
  background: var(--fm-neutra-fondo);
  color: var(--fm-neutra-texto);
  font-size: 0.75rem;
  font-weight: 600;
}

/* ---------- Listas: tarjeta con tabla, filtros y paginación ---------- */
.fm-tarjeta--tabla {
  padding: 0;
  overflow: hidden;
}

.fm-tarjeta--tabla .fm-recuento {
  margin: 0;
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--fm-borde);
}

.fm-tarjeta--destacada {
  border-left: 4px solid var(--fm-primario);
}

.fm-clave-nueva {
  font-size: 1.1rem;
  user-select: all;
}

.fm-pequeno {
  font-size: 0.8rem;
}

.fm-tabla a.principal {
  font-weight: 600;
}

.fm-tabla .col-acciones {
  text-align: right;
  white-space: nowrap;
}

.fm-tabla .col-acciones form {
  display: inline-block;
}

.fm-tabla tr.es-inactivo td {
  color: var(--fm-texto-atenuado);
}

.fm-tabla tbody th[scope="row"] {
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid var(--fm-borde);
  background: transparent;
  color: var(--fm-texto);
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
  white-space: normal;
}

.fm-tabla tbody tr:last-child th[scope="row"] {
  border-bottom: 0;
}

.fm-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.fm-filtros--linea {
  align-items: center;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--fm-borde);
}

.fm-filtro {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.fm-filtro--ancho {
  flex: 1 1 14rem;
}

.fm-filtro label {
  color: var(--fm-texto-atenuado);
  font-size: 0.75rem;
  font-weight: 600;
}

.fm-filtro--botones {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-end;
}

.fm-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 0.9rem;
  border-top: 1px solid var(--fm-borde);
}

/* ---------- Formularios (T-27.5) ----------
   Los controles son los de Bulma; aquí se llevan al aspecto del panel con los
   tokens --fm-*, en claro y oscuro. `.fm-app` sube la especificidad por encima
   de `.formulario .input` de fact-mereba.css, que se carga antes. */
.fm-app .input,
.fm-app .select select,
.fm-app .textarea,
.fm-app .file-cta {
  min-height: 36px;
  height: 36px;
  padding: 0 0.7rem;
  border: 1px solid var(--fm-borde-control);
  border-radius: var(--fm-radio-chico);
  background: var(--fm-superficie);
  color: var(--fm-texto);
  box-shadow: none;
  font-size: 0.9375rem;
}

.fm-app .textarea {
  height: auto;
  min-height: 5rem;
  padding: 0.5rem 0.7rem;
}

.fm-app .input::placeholder,
.fm-app .textarea::placeholder {
  color: var(--fm-texto-atenuado);
  opacity: 1;
}

.fm-app .input:focus,
.fm-app .select select:focus,
.fm-app .textarea:focus {
  border-color: var(--fm-foco);
  outline: 2px solid var(--fm-foco);
  outline-offset: 1px;
  box-shadow: none;
}

.fm-app .input[disabled],
.fm-app .select select[disabled],
.fm-app .textarea[disabled] {
  background: var(--fm-neutra-fondo);
  color: var(--fm-texto-atenuado);
}

.fm-app .input.is-danger,
.fm-app .select.is-danger select,
.fm-app .textarea.is-danger {
  border-color: var(--fm-peligro-texto);
}

.fm-app .select:not(.is-multiple):not(.is-loading)::after {
  border-color: var(--fm-texto-atenuado);
}

.fm-app .select,
.fm-app .select select {
  max-width: 100%;
}

.fm-app .label {
  margin-bottom: 0.25rem;
  color: var(--fm-texto);
  font-size: 13px;
  font-weight: 500;
}

.fm-app .help {
  color: var(--fm-texto-atenuado);
  font-size: 0.8125rem;
}

.fm-app .help.is-danger {
  color: var(--fm-peligro-texto);
}

.fm-app .checkbox,
.fm-app .radio {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 24px;
  color: var(--fm-texto);
}

.fm-app input[type="checkbox"],
.fm-app input[type="radio"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--fm-primario);
}

/* Anchuras legibles: un formulario simple no se estira a todo el ancho. */
.fm-tarjeta--legible {
  max-width: 720px;
}

.fm-tarjeta--formulario {
  margin-bottom: 1.5rem;
}

.fm-campo-corto { max-width: 10rem; }
.fm-campo-medio { max-width: 20rem; }

/* ---------- Utilidades que sustituyen a los `style=` de las plantillas ---------- */
.nowrap {
  white-space: nowrap;
}

.fm-en-linea {
  display: inline;
}

.fm-logo-inicio {
  max-width: 220px;
  height: auto;
}

.fm-logo-actual {
  max-width: 100%;
  max-height: 6rem;
}

/* ---------- Fichas y configuración ---------- */
.acciones-ficha .fm-tarjeta + .fm-tarjeta {
  margin-top: 1rem;
}

.fm-tarjeta.peligro {
  border-color: var(--fm-peligro-texto);
}

.fm-panel--peligro > summary {
  color: var(--fm-peligro-texto);
}

/* La previsión de la línea nueva acompaña al scroll en pantallas anchas. */
@media screen and (min-width: 1024px) {
  .linea-nueva .pie-linea {
    position: sticky;
    bottom: 0;
    z-index: 2;
    margin-bottom: -0.25rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--fm-borde);
    border-radius: var(--fm-radio-chico);
    background: var(--fm-superficie);
  }
}


/* ---------- Pantallas de acceso (anónimas): tarjeta centrada sobre --fm-fondo ---------- */
.fm-app--auth .fm-principal {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(1.5rem, 8vh, 4.5rem);
}

.fm-app--auth .fm-contenido {
  width: 100%;
  max-width: 28rem;
}

.fm-app--auth .fm-contenido > .columns {
  margin: 0;
}

.fm-app--auth .fm-contenido > .columns > .column {
  width: 100%;
  flex: none;
  padding: 0;
}

.fm-app--auth .tarjeta-auth {
  background: var(--fm-superficie);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
  box-shadow: 0 8px 24px rgba(16, 24, 20, 0.08);
  padding: clamp(1.25rem, 5vw, 2rem);
}

/* La marca ya está en la tarjeta y «Entrar» sobra en la pantalla de entrada. */
.fm-app--auth .fm-superior .fm-marca--barra,
.fm-app--auth .fm-superior .fm-acciones-barra > a.button {
  display: none;
}

/* ---------- Ayuda (T-27.7) ---------- */
.fm-ayuda {
  display: block;
}

.fm-ayuda-indice-caja {
  background: var(--fm-superficie-elevada);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}

.fm-ayuda-indice-caja > summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--fm-texto);
}

.fm-ayuda-indice-caja ol {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
}

.fm-ayuda-indice-caja a {
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  color: var(--fm-texto-atenuado);
  text-decoration: none;
}

.fm-ayuda-indice-caja a:hover {
  background: var(--fm-primario-suave);
  color: var(--fm-primario-suave-texto);
}

.fm-ayuda-indice-caja a:focus-visible,
.fm-ayuda-indice-caja > summary:focus-visible {
  outline: 2px solid var(--fm-foco);
  outline-offset: 2px;
}

.fm-ayuda-nota {
  color: var(--fm-texto-atenuado);
  margin-bottom: 1rem;
}

.fm-ayuda-seccion {
  scroll-margin-top: 1rem;
}

.fm-ayuda-seccion + .fm-ayuda-seccion {
  margin-top: 1rem;
}

.fm-ayuda-seccion > h2 .fm-pildora {
  vertical-align: middle;
  margin-left: 0.5rem;
  font-size: 0.75rem;
}

.fm-ayuda-pasos {
  counter-reset: paso;
  list-style: none;
  margin: 0;
  padding: 0;
}

.fm-ayuda-pasos > li {
  counter-increment: paso;
  position: relative;
  margin: 0 0 0.75rem;
  padding-left: 2.5rem;
}

.fm-ayuda-pasos > li::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--fm-primario);
  color: var(--fm-texto-sobre-primario);
  font-weight: 700;
  text-align: center;
  line-height: 1.75rem;
}

.fm-ayuda-aviso {
  background: var(--fm-aviso-fondo);
  color: var(--fm-aviso-texto);
  border-radius: var(--fm-radio);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}

.fm-captura {
  margin: 1rem 0;
}

.fm-captura img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
}

.fm-captura figcaption {
  margin-top: 0.4rem;
  color: var(--fm-texto-atenuado);
  font-size: 0.875rem;
}

.fm-ayuda-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
}

.fm-ayuda-ejemplo {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--fm-superficie);
  border: 1px solid var(--fm-borde);
  border-radius: var(--fm-radio);
  padding: 1rem;
}

.fm-ayuda-ejemplo h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.fm-ayuda-ejemplo p {
  margin: 0;
  flex: 1;
}

.fm-ayuda-ejemplo .fm-boton {
  align-self: flex-start;
}

@media screen and (min-width: 1024px) {
  .fm-ayuda {
    display: grid;
    grid-template-columns: 14rem minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
  }

  .fm-ayuda-indice {
    position: sticky;
    top: 1rem;
  }
}

/* ---------- Portada anónima: enlaces a mereba.com ----------
   Debajo de «Entrar», con cuerpo de texto normal y filete de color para que
   no se lea como el aviso de cookies, que va en letra pequeña y tenue. */
.portada-mereba {
  max-width: 28rem;
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--fm-primario);
  background: var(--fm-superficie);
  color: var(--fm-texto);
  border-radius: 0 6px 6px 0;
}

.portada-mereba p + p {
  margin-top: 0.5rem;
}

.portada-mereba a {
  font-weight: 600;
}