/* ==========================================================================
   Componentes. Los nombres heredados se mantienen como puntos de anclaje.
   ========================================================================== */

/* --- Superficies ------------------------------------------------------- */
.glass-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-lg);
  backdrop-filter: none;
  box-shadow: none;
  transition: border-color var(--rm-duration) var(--rm-ease);
}

.glass-card:hover { border-color: var(--rm-rule-strong); transform: none; }

/* --- Botones ----------------------------------------------------------- */
.btn-tech-primary,
.btn-tech-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rm-space-2);
  min-height: 44px;
  padding: var(--rm-space-3) var(--rm-space-5);
  border-radius: var(--rm-radius-md);
  font-family: var(--rm-font-body);
  font-size: var(--rm-text-sm);
  font-weight: 550;
  letter-spacing: 0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--rm-duration-fast) var(--rm-ease),
              border-color var(--rm-duration-fast) var(--rm-ease),
              color var(--rm-duration-fast) var(--rm-ease);
}

.btn-tech-primary {
  background: var(--rm-solid);
  color: var(--rm-solid-ink) !important;
  border: 1px solid var(--rm-solid);
}

.btn-tech-primary:hover {
  background: var(--rm-solid-hover);
  border-color: var(--rm-solid-hover);
  color: var(--rm-solid-ink) !important;
}

.btn-tech-secondary {
  background: transparent;
  color: var(--rm-ink) !important;
  border: 1px solid var(--rm-rule-strong);
}

.btn-tech-secondary:hover {
  background: var(--rm-surface-sunken);
  border-color: var(--rm-ink-subtle);
  color: var(--rm-ink) !important;
}

/* --- Etiquetas --------------------------------------------------------- */
.badge-tech {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-2);
  padding: var(--rm-space-1) var(--rm-space-3);
  background: transparent;
  border: 1px solid var(--rm-rule-strong);
  border-radius: var(--rm-radius-pill);
  color: var(--rm-ink-muted);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
}

.badge-status {
  padding: 2px var(--rm-space-2);
  border-radius: var(--rm-radius-sm);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  font-weight: 500;
  border: 1px solid var(--rm-rule-strong);
  background: transparent;
  color: var(--rm-ink-muted);
}

/* Medidos, no estimados. El #0b8f66 de partida se quedaba en 4.09:1 sobre la
   superficie blanca de las tarjetas y en 3.53:1 sobre la hundida, así que se
   oscurece a #087a58 (5.34 / 5.20 / 4.61 sobre #ffffff / #fdfcfa / #f1eee8).
   El #b45309 pasaba en tarjeta (5.02:1) pero no en superficie hundida
   (4.34:1); #a34c07 da 5.84 / 5.70 / 5.05. Los bordes se dejan como estaban:
   son decorativos y el significado lo lleva el texto. */
.badge-status-published { border-color: #10b981; color: #087a58; }
.badge-status-dev { border-color: #d97706; color: #a34c07; }
.badge-status-beta { border-color: var(--rm-accent); color: var(--rm-accent); }

/* Esos dos tonos sobre #1e1b17 caen a 3.21:1 y 2.94:1. En oscuro se aclaran a
   #35b98c (7.48 / 6.92 / 7.77 sobre papel #151310, superficie #1e1b17 y
   hundida #100e0c) y #e0a33a (8.36 / 7.73 / 8.69).
   `-beta` no necesita ajuste: hereda --rm-accent, que ya cambia por tema
   (#8fb4e3 da 8.01:1 sobre superficie oscura). */
:root[data-theme='dark'] .badge-status-published { border-color: #2a8f6d; color: #35b98c; }
:root[data-theme='dark'] .badge-status-dev { border-color: #a9762a; color: #e0a33a; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .badge-status-published { border-color: #2a8f6d; color: #35b98c; }
  :root:not([data-theme='light']) .badge-status-dev { border-color: #a9762a; color: #e0a33a; }
}

/* --- Identidad de producto ---------------------------------------------
   Estas tres piezas las comparten la portada (tarjeta del carrusel), el
   catálogo de /proyectos/ y la ficha de cada producto. Vivían en home.css,
   donde sólo las podía usar la portada; se suben aquí para que las tres
   páginas digan lo mismo con el mismo marcado en vez de repetir la
   declaración tres veces y que acaben divergiendo. */

/* Color de marca del producto. Lo declara el elemento que lleva la clase de
   su slug y lo consumen la etapa y la marca de 6px del carrusel. */
.rm-product--rmtracker { --rm-product-accent: #10b981; }
.rm-product--touristsolution { --rm-product-accent: #0f5c96; }
.rm-product--meetingvoice { --rm-product-accent: #1d4ed8; }
.rm-product--polizatracker { --rm-product-accent: #0b60f0; }
.rm-product--factusimple { --rm-product-accent: #306ca8; }
/* El verde del lockup de WorkLogTracker. Aquí sí puede ir tal cual: lo consumen
   el punto de 6 px y la marca de la etapa, que son forma. En su landing, donde
   tendría que llevar texto, se usa oscurecido (#10693a): sobre papel este verde
   se queda en 2.36:1. */
.rm-product--worklogtracker { --rm-product-accent: #22b863; }

/* Etapa comercial: pastilla neutra. Los colores salen todos de tokens y
   ninguna combinación es nueva —ink e ink-muted sobre --rm-surface, ya
   comprobadas en scripts/check_contrast.py—, así que no hace falta añadir
   pares al comprobador.

   El punto es lo único que distingue las dos etapas a golpe de vista: lleno
   con el color de la marca del producto cuando está en producción, hueco
   cuando todavía se está construyendo. Es decorativo y va acompañado del
   texto, así que no transporta información por sí solo. */
.rm-stage {
  display: inline-flex;
  align-items: center;
  gap: var(--rm-space-2);
  margin: 0;
  padding: 2px var(--rm-space-3);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-pill);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rm-ink-muted);
  white-space: nowrap;
}

.rm-stage::before {
  content: '';
  width: 7px;
  height: 7px;
  border: 1px solid var(--rm-ink-subtle);
  border-radius: 50%;
}

.rm-stage[data-live='true'] {
  color: var(--rm-ink);
  border-color: var(--rm-rule-strong);
}

.rm-stage[data-live='true']::before {
  background: var(--rm-product-accent, var(--rm-accent));
  border-color: transparent;
}

/* Rótulo corto sobre un grupo de datos. Nació en la tarjeta de producto y hoy
   lo usan también el glosario de la portada, el catálogo y la ficha. */
.rm-product__key {
  margin: 0;
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rm-ink-subtle);
}

/* Plataformas soportadas, no tiendas: pastillas neutras, sin logotipo de
   tienda ni verbo de descarga. El rótulo de encima las desambigua. */
.rm-product__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-2);
  margin: var(--rm-space-3) 0 var(--rm-space-5);
  padding: 0;
  list-style: none;
}

.rm-product__chips li {
  padding: 2px var(--rm-space-3);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-pill);
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-xs);
  color: var(--rm-ink-muted);
}

/* Placa del logotipo: superficie blanca FIJA, idéntica en tema claro y
   oscuro. Es el papel sobre el que está impreso el logotipo (tinta oscura y
   colores de marca que no controlamos), no un fondo de la interfaz: por eso
   #ffffff literal y no un token que cambie con el tema. */
/* Icono de aplicación, tal como se ve instalado en un móvil.
   Antes era una placa blanca con el logotipo dentro; el resultado parecía
   una marca en una tarjeta, no una app. Ahora se sirve el icono cuadrado
   entero, con el fondo que trae de fábrica, y lo único que pone la web es
   la esquina redondeada del sistema.

   El 22,5 % del lado es la proporción de la máscara de iOS, y la que usa
   Android para sus iconos adaptativos: es lo que hace que se lea como
   icono de aplicación y no como una imagen cualquiera con las esquinas
   matadas. `--rm-icon-size` la reajusta cada página sin duplicar la regla. */
.rm-app-icon {
  flex: none;
  display: block;
  width: var(--rm-icon-size, 2.75rem);
  height: var(--rm-icon-size, 2.75rem);
  border-radius: 22.5%;
  /* Los iconos de fondo blanco (MeetingVoice, TouristSolution) se perderían
     contra el papel claro: el filete interior les dibuja el borde sin
     ensuciar a los de fondo oscuro, que lo absorben. */
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08), var(--rm-shadow-raised);
  object-fit: cover;
}

/* --- Navegación -------------------------------------------------------- */
.navbar-tech {
  background: color-mix(in srgb, var(--rm-paper) 88%, transparent) !important;
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rm-rule);
  padding: var(--rm-space-3) 0;
}

/* El cuerpo conserva su medida de lectura de 1180 px. La barra necesita más
   aire únicamente cuando ya está desplegada: con «Guías», el selector y las
   etiquetas alemanas, 1180 px no bastan. A tamaños menores permanece plegada. */
@media (min-width: 1400px) {
  .navbar-tech > .container { max-width: 1320px; }
}

.navbar-tech[data-scrolled='true'] { box-shadow: var(--rm-shadow-raised); }

.navbar-tech .navbar-brand {
  font-family: var(--rm-font-display);
  font-size: var(--rm-text-lg);
  font-weight: 600;
  font-variation-settings: 'SOFT' 20, 'WONK' 0, 'opsz' 24;
  color: var(--rm-ink);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.navbar-tech .navbar-brand span {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--rm-ink);
}

/* Logotipo corporativo. Relación 209:59 del original; se fija la altura y
   el ancho se calcula solo.
   Se recolorea con dos propiedades personalizadas, que a diferencia de los
   selectores de clase sí atraviesan el shadow DOM de <use>:
     --rmt-mark-m    la M del isotipo. Por defecto, el verde de marca.
     --rmt-mark-ink  el resto de las letras. Por defecto, currentColor.
   Sobre un fondo de marca saturado, donde el verde no despega, basta con
   igualar ambas: `--rmt-mark-m: currentColor`. */
.rm-brand { display: inline-flex; align-items: center; }

.rm-brand__logo {
  height: 26px;
  width: calc(26px * 209.08 / 59.12);
  color: var(--rm-ink);
  flex: none;
}

@media (min-width: 36em) {
  .rm-brand__logo { height: 30px; width: calc(30px * 209.08 / 59.12); }
}

.navbar-tech .nav-link {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  font-weight: 480;
  padding: var(--rm-space-2) var(--rm-space-3) !important;
  text-decoration: none;
  border-radius: var(--rm-radius-sm);
  /* Un enlace del menú es una etiqueta, no un párrafo. Sin esto «Sobre
     Nosotros» era el primero en ceder cuando la barra se quedaba corta: se
     partía en dos líneas y estiraba la cabecera entera. */
  white-space: nowrap;
}

.navbar-tech .nav-link:hover { color: var(--rm-ink); background: var(--rm-surface-sunken); }
.navbar-tech .nav-link.active { color: var(--rm-ink); font-weight: 560; }

/* Sólo aparece por debajo de xxl, donde el menú va plegado: 44×44 mínimo. */
.navbar-tech .navbar-toggler {
  border: 1px solid var(--rm-rule);
  min-width: 44px;
  min-height: 44px;
}

/* --- Acciones de la cabecera ------------------------------------------- */
/* El conmutador y los dos botones son un bloque aparte de los enlaces, y van
   siempre en la misma línea. Antes vivían en un `<li>` con `flex-wrap`, y en
   cuanto la barra se quedaba corta —a 1440 px ya le faltaban diez píxeles—
   «Iniciar sesión» se descolgaba a una segunda fila y la cabecera pasaba de 72
   a 128 px de alto. Ahora, cuando no caben, se pliega el menú entero.

   El orden es el de importancia creciente hacia la derecha: primero el ajuste
   de la interfaz, después el acceso, y en el extremo la llamada comercial. */
.rm-nav-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rm-space-2);
}

/* Ninguna de las tres piezas encoge. Sin esto el problema se repetía un piso
   más abajo: la fila ya no se partía, pero los botones cedían tres píxeles y
   los partían por dentro —«Iniciar / Sesión» en dos líneas y la cabecera otra
   vez a 86 px—. Si de verdad no cabe, el menú se pliega; deformarse no es una
   respuesta. */
.rm-nav-actions > * {
  flex: none;
  white-space: nowrap;
}

@media (min-width: 1400px) {
  .rm-nav-actions {
    flex-wrap: nowrap;
    margin-left: var(--rm-space-4);
    padding-left: var(--rm-space-4);
    /* Un filete separa navegar de actuar. Sólo en la barra desplegada: en el
       menú plegado los enlaces ya van uno debajo de otro. */
    border-left: 1px solid var(--rm-rule);
  }
}

/* Los botones del sitio miden 44 px de alto porque son objetivo táctil. En una
   cabecera de escritorio eso los deja ocho píxeles más altos que el
   conmutador, y se veía. Aquí bajan a los mismos 40 que él; con puntero grueso
   —que es donde el objetivo táctil importa— recuperan los 44. */
.navbar-tech .btn-tech-primary,
.navbar-tech .btn-tech-secondary {
  min-height: 40px;
  padding: var(--rm-space-2) var(--rm-space-4);
}

/* --- Conmutador de tema ------------------------------------------------ */
/* Un solo botón: alterna claro y oscuro. Los dos iconos van en el HTML y aquí
   se enseña sólo el del tema al que lleva pulsar. */
.rm-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-pill);
  color: var(--rm-ink-muted);
  cursor: pointer;
  transition: background-color var(--rm-duration-fast) var(--rm-ease),
              border-color var(--rm-duration-fast) var(--rm-ease),
              color var(--rm-duration-fast) var(--rm-ease);
}

.rm-theme-toggle:hover {
  background: var(--rm-surface-sunken);
  border-color: var(--rm-rule-strong);
  color: var(--rm-ink);
}

.rm-theme-toggle svg { width: 16px; height: 16px; }

/* theme.js escribe data-theme-resolved en <html> antes del primer pintado, así
   que el icono nace ya elegido: no hay parpadeo de sol a luna al cargar. */
:root[data-theme-resolved='light'] .rm-theme-toggle__sun,
:root[data-theme-resolved='dark'] .rm-theme-toggle__moon { display: none; }

/* Objetivo táctil de 44×44 sólo con puntero grueso: el conmutador de
   escritorio conserva su tamaño compacto. */
@media (pointer: coarse) {
  .rm-theme-toggle { width: 44px; height: 44px; }
  .navbar-tech .btn-tech-primary,
  .navbar-tech .btn-tech-secondary { min-height: 44px; }
}

/* theme.js marca <html data-js="true"> nada más ejecutarse. Sin guion el
   conmutador no haría nada al pulsarlo, así que no se enseña. */
:root:not([data-js='true']) .rm-theme-toggle { display: none; }

/* --- Selector de idioma ------------------------------------------------ */
/* Dos piezas para el mismo dato: el desplegable de la barra (.rm-lang) y la
   lista plana del pie (.rm-lang-plana). Ninguna de las dos es un formulario:
   son enlaces, para no tener que escribir la cookie `django_language` y
   contradecir a la política de cookies. El porqué largo está en
   templates/includes/language_switcher.html.

   El botón comparte con .rm-theme-toggle el alto (40 px) y el radio (píldora),
   y no por casualidad: van pegados el uno al otro en la barra, y dos píldoras
   de alto distinto no se leen como un par de ajustes sino como dos piezas
   sueltas que alguien colocó sin mirar.

   Lo que NO comparte es el ancho fijo de 40: aquí dentro van dos letras, así
   que se deja crecer desde 40 con un pelín de aire a los lados. La barra
   entre 1200 y 1400 px va justa —el comentario de .rm-nav-actions cuenta lo
   que costó—, y por eso el botón enseña «ES» y no «Español»: son ~44 px en
   vez de ~90, y tampoco lleva la clase `dropdown-toggle`, que añadiría el
   triangulito y otros ~13. */
.rm-lang__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--rm-space-2);
  background: transparent;
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-pill);
  color: var(--rm-ink-muted);
  font-family: var(--rm-font-body);
  font-size: var(--rm-text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color var(--rm-duration-fast) var(--rm-ease),
              border-color var(--rm-duration-fast) var(--rm-ease),
              color var(--rm-duration-fast) var(--rm-ease);
}

/* Abierto se queda resaltado: si no, al desplegar el menú el botón se apaga
   en cuanto el ratón entra en la lista y parece que se ha soltado. */
.rm-lang__toggle:hover,
.rm-lang.show .rm-lang__toggle {
  background: var(--rm-surface-sunken);
  border-color: var(--rm-rule-strong);
  color: var(--rm-ink);
}

/* El menú se pinta con las variables de Bootstrap redirigidas a los tokens,
   no con reglas nuevas: así hereda el posicionamiento y la animación de
   Bootstrap y solo cambia de paleta. Dos de ellas lo necesitan de verdad:
   `--bs-dropdown-link-active-bg` viene con el azul de Bootstrap (#0d6efd)
   escrito a fuego, que no es el acento de esta casa, y
   `--bs-dropdown-border-color` es un negro translúcido que sobre el fondo
   oscuro no se ve. */
.rm-lang__menu {
  --bs-dropdown-min-width: 8.5rem;
  --bs-dropdown-font-size: var(--rm-text-sm);
  --bs-dropdown-bg: var(--rm-surface);
  --bs-dropdown-color: var(--rm-ink);
  --bs-dropdown-border-color: var(--rm-rule);
  --bs-dropdown-border-radius: var(--rm-radius-md);
  --bs-dropdown-box-shadow: var(--rm-shadow-overlay);
  --bs-dropdown-link-color: var(--rm-ink-muted);
  --bs-dropdown-link-hover-color: var(--rm-ink);
  --bs-dropdown-link-hover-bg: var(--rm-surface-sunken);
  /* El idioma actual se marca con el fondo hundido y negrita, no con el
     acento en plancha y letra blanca: es dónde estás, no una llamada a la
     acción. */
  --bs-dropdown-link-active-color: var(--rm-ink);
  --bs-dropdown-link-active-bg: var(--rm-surface-sunken);
}

.rm-lang__menu .dropdown-item.active { font-weight: 600; }

/* Mismo objetivo táctil que el conmutador, y por el mismo motivo. */
@media (pointer: coarse) {
  .rm-lang__toggle { min-width: 44px; height: 44px; }
}

/* Sin JavaScript, `data-bs-toggle` no abre nada: sería un botón muerto. No se
   pierde el control, porque la lista plana del pie no depende de nada. */
:root:not([data-js='true']) .rm-lang { display: none; }

/* La lista plana. Vive en el pie y NO se esconde nunca: es la que lee un
   rastreador sin guion y la que encuentra quien no dio con el botón de la
   barra. En las landings esta misma lista la estila la hoja del producto
   —se le presta `ln-foot__links`—, así que estas reglas son solo del sitio
   corporativo. */
.rm-lang-plana { margin-bottom: var(--rm-space-4); }

.rm-lang-plana__lista {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rm-space-2) var(--rm-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* `.footer-tech ul li` cuelga 8 px de cada elemento, que en una lista en
   columna es el aire entre líneas y aquí es un hueco suelto debajo. Dos
   clases para ganarle en especificidad sin recurrir a !important. */
.rm-lang-plana .rm-lang-plana__lista li { margin-bottom: 0; }

.rm-lang-plana__lista a {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  text-decoration: none;
}

.rm-lang-plana__lista a:hover { color: var(--rm-ink); text-decoration: underline; }

/* Especificidad de dos clases en vez de un !important: la regla de arriba
   lleva una sola y perdería. */
.rm-lang-plana__lista a.rm-lang-plana__actual { color: var(--rm-ink); }

/* --- Pie --------------------------------------------------------------- */
.footer-tech {
  margin-top: auto;
  padding: var(--rm-space-10) 0 var(--rm-space-6);
  background: var(--rm-surface-sunken);
  border-top: 1px solid var(--rm-rule);
}

.footer-tech h5 {
  margin-bottom: var(--rm-space-4);
  font-family: var(--rm-font-body);
  font-size: var(--rm-text-xs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  /* ink-subtle está afinado contra --rm-paper; sobre el fondo hundido del
     pie se queda en 4.04:1. La discreción la dan el cuerpo y la caja alta. */
  color: var(--rm-ink-muted);
}

.footer-tech ul { list-style: none; padding: 0; margin: 0; }
.footer-tech ul li { margin-bottom: var(--rm-space-2); }

.footer-tech ul li a {
  color: var(--rm-ink-muted);
  font-size: var(--rm-text-sm);
  text-decoration: none;
}

.footer-tech ul li a:hover { color: var(--rm-ink); text-decoration: underline; padding-left: 0; }

/* --- Formularios ------------------------------------------------------- */
.form-control-tech {
  width: 100%;
  min-height: 44px;
  padding: var(--rm-space-3) var(--rm-space-4);
  background: var(--rm-surface);
  border: 1px solid var(--rm-rule-strong);
  border-radius: var(--rm-radius-md);
  color: var(--rm-ink);
  font-family: var(--rm-font-body);
  font-size: var(--rm-text-base);
  transition: border-color var(--rm-duration-fast) var(--rm-ease);
}

.form-control-tech::placeholder { color: var(--rm-ink-subtle); }
.form-control-tech option { background: var(--rm-surface); color: var(--rm-ink); }

.form-control-tech:focus {
  border-color: var(--rm-accent);
  outline: 2px solid color-mix(in srgb, var(--rm-accent) 30%, transparent);
  outline-offset: 0;
}

/* --- Iconos ------------------------------------------------------------ */
.rm-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.125em;
  flex: none;
  color: currentColor;
}

/* --- Páginas de error (fuera de alcance, deben seguir legibles) --------- */
.error-code-badge {
  font-family: var(--rm-font-mono);
  font-size: var(--rm-text-3xl);
  font-weight: 600;
  color: var(--rm-ink-subtle);
}

/* --- Utilidades de maquetación usadas por las plantillas ---------------- */

/* Nombres heredados de las plantillas no rediseñadas. Sin declararlos, los
   párrafos guía salían a todo el ancho y las páginas de error sin aire. */
.max-w-400 { max-width: 400px; }
.max-w-600 { max-width: 600px; }
.max-w-700 { max-width: 700px; }
.leading-relaxed { line-height: var(--rm-leading-normal); }
.font-heading { font-family: var(--rm-font-display); }
.uppercase { text-transform: uppercase; letter-spacing: 0.06em; }

.error-page-container { padding: var(--rm-space-10) 0; text-align: center; }
.error-page-container p { margin-inline: auto; }

/* Hoja legal en «modo impresión limpia»: fondo blanco fijo a propósito.
   Los tokens de tinta se anclan DENTRO de la hoja para que `.text-dark`,
   `.text-muted` y cualquier descendiente hereden tinta oscura también con el
   tema oscuro activo: es papel, no cromo de la interfaz. */
.rm-print-sheet {
  max-width: 900px;
  margin-inline: auto;
  background: #ffffff;
  --rm-ink: var(--rm-n-900);
  --rm-ink-muted: #5c554c;
  --rm-ink-subtle: #7b7366;
  --rm-rule: var(--rm-n-200);
  color: var(--rm-ink);
}

/* Banner de cookies: flota sobre el contenido, ancho acotado. */
.rm-cookie-banner { z-index: 1060; width: 720px; max-width: 92%; box-shadow: var(--rm-shadow-overlay); }

/* Tarjeta de acción destructiva del portal de privacidad. */
.rm-card-danger { border-color: color-mix(in srgb, #dc3545 45%, var(--rm-rule)); }

/* El aspa de Bootstrap es un SVG negro incrustado: sobre superficie oscura
   desaparece. Se invierte por tema en vez de usar `.btn-close-white`, que la
   dejaba invisible en claro. */
:root[data-theme='dark'] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
}

/* --- Restos del sistema anterior, neutralizados ------------------------- */

/* Los botones «outline» de Bootstrap llevan gris (#6c757d) y tinta (#212529)
   fijos, ajenos al tema: «Configurar» del banner de cookies se quedaba en
   3.66:1 sobre superficie oscura y los botones de imprimir de /legal/ salían
   casi invisibles. Se reencaminan por variables, sin necesidad de !important. */
.btn-outline-secondary,
.btn-outline-dark {
  --bs-btn-color: var(--rm-ink-muted);
  --bs-btn-border-color: var(--rm-rule-strong);
  --bs-btn-hover-color: var(--rm-ink);
  --bs-btn-hover-bg: var(--rm-surface-sunken);
  --bs-btn-hover-border-color: var(--rm-ink-subtle);
  --bs-btn-active-color: var(--rm-ink);
  --bs-btn-active-bg: var(--rm-surface-sunken);
  --bs-btn-active-border-color: var(--rm-ink-subtle);
}

.text-gradient { background: none; -webkit-text-fill-color: currentColor; color: var(--rm-ink); }
.text-cyan { color: var(--rm-accent) !important; }
.feature-step-card { border-left: 2px solid var(--rm-rule-strong); }
.rm-legal-prevalence {
    margin: 0 0 1.5rem;
    padding: 1rem 1.125rem;
    border: 1px solid #d79a28;
    border-left-width: 4px;
    border-radius: .5rem;
    background: rgba(215, 154, 40, .12);
    color: inherit;
}

.rm-legal-prevalence p {
    margin: 0;
}

.rm-legal-prevalence a {
    color: currentColor;
    font-weight: 700;
    text-decoration: underline;
}