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

/* 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. */
.rm-logo-plate {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.375rem 0.625rem;
  background: #ffffff;
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-md);
}

/* Altura fija y ancho libre: el wordmark apaisado de RMTracker y el
   launcher cuadrado de MeetingVoice conviven a la misma altura óptica.
   `--rm-logo-height` la reajusta cada página sin duplicar la regla. */
.rm-logo-plate img {
  display: block;
  height: var(--rm-logo-height, 2rem);
  width: auto;
}

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

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

.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 lg, es decir en táctil: 44×44 mínimo. */
.navbar-tech .navbar-toggler {
  border: 1px solid var(--rm-rule);
  min-width: 44px;
  min-height: 44px;
}

/* --- Conmutador de tema ------------------------------------------------ */
.rm-theme-toggle {
  display: inline-flex;
  padding: 2px;
  gap: 2px;
  background: var(--rm-surface-sunken);
  border: 1px solid var(--rm-rule);
  border-radius: var(--rm-radius-pill);
}

.rm-theme-toggle button {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--rm-radius-pill);
  color: var(--rm-ink-subtle);
  cursor: pointer;
  transition: background-color var(--rm-duration-fast) var(--rm-ease),
              color var(--rm-duration-fast) var(--rm-ease);
}

.rm-theme-toggle button:hover { color: var(--rm-ink); }

.rm-theme-toggle button[aria-pressed='true'] {
  background: var(--rm-surface);
  color: var(--rm-ink);
  box-shadow: var(--rm-shadow-raised);
}

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

/* 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 button { width: 44px; 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; }

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