/* ============================================================================
   Rollplanner — Componentes interactivos
   ----------------------------------------------------------------------------
   El lenguaje único de botones, chips e inputs de toda la plataforma (páginas
   estáticas y editor React). Requiere tokens.css cargado antes. Las páginas
   migran a estas clases y BORRAN su receta local en el mismo commit: los
   <style> de página van después de este fichero y ganarían la cascada.

   La personalidad viene de la marca, no de este fichero: itálica 900 en
   mayúsculas (la voz tipográfica), esquinas rectas, y el shimmer diagonal
   reservado EN EXCLUSIVA a la acción primaria y a la destructiva — si todo
   brilla, nada brilla.

   Acentos temables siempre en punto de uso (ver regla anti-congelación en
   tokens.css):  color-mix(in srgb, var(--theme-color, #b33131) N%, transparent)
   ========================================================================== */

/* ---- Botones --------------------------------------------------------------
   Jerarquía: --primary (una por vista, temable, shimmer) · --edge (el filo del
   tema con el mismo chaflán que la rellena: el SEGUNDO nivel del par cuando la
   primaria manda de verdad, como exportar en el creador de contenido) ·
   --quiet (texto con filete de 2px, la secundaria por defecto: sin caja) ·
   --secondary (borde, neutra; solo donde la caja aporta) · --ghost (sin borde;
   es el "cancelar" canónico) · --danger (rojo de marca FIJO, no temable:
   destruir es rojo aunque el cinturón sea morado) · --icon (cuadrado, solo
   glifo).
   Tamaños: el pequeño (--sm, 9x20) es la medida por defecto de las acciones
   de una vista; el tamaño base queda para CTAs de conversión.
   Par confirmar/cancelar: afirmativo=--primary, destructivo=--danger,
   cancelar=--ghost. El rojo relleno nunca significa "cancelar". */

.rp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-btn);
  font-weight: 700;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: var(--rp-ls-btn);
  padding: 14px 24px;
  border: none;
  border-radius: var(--rp-radius);
  background: transparent;
  color: var(--rp-text-2);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.25s ease, color 0.25s ease,
              border-color 0.25s ease, box-shadow 0.25s ease,
              transform 0.15s ease;
}
.rp-btn:active { transform: scale(0.98); }
.rp-btn:disabled { opacity: 0.45; cursor: default; }

.rp-btn--sm {
  font-size: var(--rp-fs-xs);
  letter-spacing: var(--rp-ls-btn-sm);
  padding: 9px 20px;
}
.rp-btn--lg {
  font-size: var(--rp-fs-md);
  padding: 18px 32px;
}

/* Primaria: temable. Texto con --theme-text-on-bg (menu.html lo pone a
   #1a1a1e cuando el tema es el cinturón blanco) y shimmer derivado de ese
   mismo color para que también se vea sobre fondo claro. :active dispara el
   shimmer además de :hover — en táctil no existe hover. */
.rp-btn--primary {
  background: var(--theme-color, #b33131);
  color: var(--theme-text-on-bg, #fff);
}

/* Firma geométrica de las acciones rellenas: esquina inferior derecha
   recortada 9px en diagonal. El glow de hover va en drop-shadow (sigue la
   silueta recortada); un box-shadow quedaría recortado por el clip-path. */
.rp-btn--primary,
.rp-btn--danger {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.rp-btn--primary::before,
.rp-btn--danger::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%,
    color-mix(in srgb, var(--theme-text-on-bg, #fff) 10%, transparent) 50%,
    transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.rp-btn--primary:hover::before,
.rp-btn--primary:active::before,
.rp-btn--danger:hover::before,
.rp-btn--danger:active::before {
  transform: translateX(100%);
}
.rp-btn--primary:hover {
  background: color-mix(in srgb, var(--theme-color, #b33131) 85%, #fff);
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--theme-color, #b33131) 40%, transparent));
}

/* Los tres peldanos de la escalera de pago, la misma de las portadas de la
   tienda: ROLL es la marca (--primary, rojo), STUDIO plata y COACH oro. Misma
   geometria que la rellena —chaflan de 9px y barrido de brillo— y solo cambia
   el metal. El texto va oscuro porque los dos rellenos son claros, y el
   barrido es blanco al 55%: sobre metal lee como un reflejo, no como un velo.
   Fuera de la fila de suscripcion no se usan: el rojo es marca y accion, el
   dorado es el dominio coach, y estos dos son etiqueta de tier. */
.rp-btn--studio,
.rp-btn--coach {
  color: var(--rp-bg-deep, #0a0a0c);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}
.rp-btn--studio::before,
.rp-btn--coach::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, transparent 0%,
    rgba(255, 255, 255, 0.55) 50%, transparent 100%);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
  pointer-events: none;
}
.rp-btn--studio:hover::before,
.rp-btn--studio:active::before,
.rp-btn--coach:hover::before,
.rp-btn--coach:active::before {
  transform: translateX(100%);
}
.rp-btn--studio {
  background: linear-gradient(180deg, #ffffff 0%, var(--rp-studio, #f0f0f2) 55%, #b9bfc9 100%);
}
.rp-btn--studio:hover {
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #ccd2da 100%);
  filter: drop-shadow(0 0 12px var(--rp-studio-dim, rgba(240, 240, 242, 0.45)));
}
.rp-btn--coach {
  background: linear-gradient(180deg, #f2d9a4 0%, var(--rp-coach, #d4a04b) 55%, #bf8a31 100%);
}
.rp-btn--coach:hover {
  background: linear-gradient(180deg, #f7e3ba 0%, #e0b365 55%, #cb9739 100%);
  filter: drop-shadow(0 0 12px var(--rp-coach-dim, rgba(212, 160, 75, 0.5)));
}

/* ---- Nota / aviso ----------------------------------------------------------
   Lo que NO es: una caja tintada con un filete de color a la izquierda. Ese
   callout es el tic mas reconocible del diseno generico y no dice nada de
   Rollplanner. La nota de la casa no lleva caja: un trazo corto de acento
   ENCIMA del texto —la misma linea que subraya el tagline del login— y el
   texto en el tercer nivel de lectura. Es editorial (un kicker), no una
   alerta. El acento va en --note-accent; las variantes semanticas lo fijan.
   Las paginas que ya tenian su clase (social-free-notice, eq-request-msg…)
   llevan esta misma receta en su sitio. */
.rp-note {
  --note-accent: var(--theme-color, #b33131);
  font-family: var(--rp-font);
  font-size: var(--rp-fs-sm);
  font-weight: 500;
  line-height: 1.55;
  color: var(--rp-text-3);
}
.rp-note::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  margin-bottom: 8px;
  background: var(--note-accent, var(--theme-color, #b33131));
  box-shadow: 0 0 10px color-mix(in srgb, var(--note-accent, var(--theme-color, #b33131)) 40%, transparent);
}
.rp-note--success { --note-accent: var(--rp-success); }
.rp-note--error   { --note-accent: #ff7a7a; }
.rp-note--warning { --note-accent: var(--rp-warning); }
.rp-note--coach   { --note-accent: var(--rp-coach); }

/* Casa (26-09-2026): los botones son RELLENOS o TEXTO, nunca contorno. Las
   variantes que antes dibujaban un filo (--secondary, --accent, --edge, --ghost)
   siguen existiendo por compatibilidad con el HTML, pero ya no llevan borde:
   --secondary y --edge son el segundo nivel del par (relleno suave con el
   chaflán, se enciende al pasar); --accent es blanco relleno con chaflán (la
   secundaria que compite con la primaria); --ghost es texto (cancelar). */
.rp-btn--secondary,
.rp-btn--edge {
  border: none;
  background: rgba(255, 255, 255, 0.07);
  color: var(--rp-text-2);
  clip-path: var(--rp-cut-btn, polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%));
}
.rp-btn--secondary:hover,
.rp-btn--edge:hover {
  background: rgba(255, 255, 255, 0.13);
  color: var(--rp-text);
}
.rp-btn--edge svg { opacity: 0.65; transition: opacity 0.2s ease; }
.rp-btn--edge:hover svg { opacity: 1; }

.rp-btn--accent {
  border: none;
  background: #fff;
  color: var(--rp-bg-deep, #0a0a0c);
  clip-path: var(--rp-cut-btn, polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%));
}
.rp-btn--accent:hover {
  background: #fff;
  color: var(--rp-bg-deep, #0a0a0c);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.35));
}

.rp-btn--ghost {
  border: none;
  background: transparent;
  color: var(--rp-text-3);
  overflow: visible;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.rp-btn--ghost:hover {
  color: var(--rp-text);
  background: transparent;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.45);
}

.rp-btn--danger {
  background: var(--rp-red);
  color: #fff;
}
.rp-btn--danger::before {
  background: linear-gradient(135deg, transparent 0%,
    rgba(255, 255, 255, 0.1) 50%, transparent 100%);
}
.rp-btn--danger:hover {
  background: var(--rp-red-hover);
  filter: drop-shadow(0 0 12px var(--rp-red-glow));
}

/* Silenciosa: la acción secundaria SIN caja y SIN filete. Texto en la voz de
   la familia que se ENCIENDE: blanco y halo de texto al acento (el lenguaje del
   shimmer), nunca un subrayado. Es el reemplazo de --secondary/--ghost cuando
   la acción acompaña a una primaria rellena (descargar, copiar, exportar).
   Admite un glifo delante: `<svg>` de 13px que sube de opacidad al hover.
   Norma 30-08: el border-bottom no marca nada en ninguna parte del producto. */
.rp-btn--quiet {
  padding: 6px 1px;
  gap: 7px;
  font-size: var(--rp-fs-xs);
  letter-spacing: var(--rp-ls-btn-sm);
  color: var(--rp-text-3);
  overflow: visible;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}
.rp-btn--quiet svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.rp-btn--quiet:hover,
.rp-btn--quiet.is-on {
  color: var(--rp-text);
  text-shadow: 0 0 14px color-mix(in srgb, var(--theme-color, #b33131) 60%, transparent);
}
.rp-btn--quiet:hover svg,
.rp-btn--quiet.is-on svg { opacity: 1; }
.rp-btn--quiet:disabled { opacity: 0.35; text-shadow: none; }

/* ---- Opción de una fila (.rp-opt) -----------------------------------------
   El estado seleccionado del sistema: anillo redondeado que se ENCIENDE con
   halo, nunca subrayado. En reposo el borde es transparente para que encender
   no descoloque la fila. Cada opción puede traer su propio acento en
   --opt-accent (los tipos de pieza usan su color, el acento de página el suyo).
   Sirve para dispositivo, acento, idioma, filtros y cualquier fila de opciones
   que antes llevaba filete. */
.rp-opt {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--rp-radius-sm, 6px);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.rp-opt:hover { color: var(--rp-text-2); background: rgba(255, 255, 255, 0.06); }
/* Encendido: relleno suave del acento y halo; sin anillo (casa 26-09). */
.rp-opt--on {
  color: var(--rp-text);
  background: color-mix(in srgb, var(--opt-accent, var(--theme-color, #b33131)) 22%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--opt-accent, var(--theme-color, #b33131)) 30%, transparent);
}
.rp-opt:disabled { opacity: 0.3; cursor: default; }

.rp-btn--icon {
  width: 44px;
  height: 44px;
  padding: 0;
  flex-shrink: 0;
}

/* ---- Chips (toggles sueltos) ----------------------------------------------
   Para conmutadores aislados fuera del panel de filtros. Dentro del panel el
   lenguaje es .rp-filter-opt (texto + subrayado), no la caja. El 0.38 de
   reposo es deliberado — es un control apagado, no texto de lectura; no
   "corregirlo" al suelo AA de texto. */
/* Casa (26-09-2026): el chip es la PIEZA VECINA de la ficha. Relleno suave,
   radio de 6 px, etiqueta en mayúsculas y, delante, un hexágono redondeado
   (.rp-hex) relleno del color con el glifo o el número en negro. Sin borde.
   `--chip` fija el color (tipo de pieza, coach, tier); por defecto el tema. */
.rp-chip {
  --chip: var(--theme-color, #b33131);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 3px 4px;
  background: rgba(255, 255, 255, 0.05);
  border: none;
  border-radius: var(--rp-radius-sm, 6px);
  color: var(--rp-text-2);
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background 0.2s, transform 0.25s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
  -webkit-tap-highlight-color: transparent;
}
.rp-chip:hover,
.rp-chip.active,
.rp-chip.is-on {
  color: var(--rp-text);
  background: rgba(255, 255, 255, 0.1);
  transform: translateX(2px);
}
.rp-chip:hover .rp-hex,
.rp-chip.active .rp-hex,
.rp-chip.is-on .rp-hex {
  filter: drop-shadow(0 0 5px var(--chip)) brightness(1.12);
}
/* Chip sin hexágono (solo texto): más aire a la izquierda */
.rp-chip--text { padding-left: 10px; }
.rp-chip--coach { --chip: var(--rp-coach, #d4a04b); }
.rp-chip--studio { --chip: var(--rp-studio, #f0f0f2); }
.rp-chip--success { --chip: var(--rp-success, #22c55e); }
.rp-chip--warn { --chip: var(--rp-warning, #e6a817); }
.rp-chip--guard { --chip: var(--rp-node-guard, #2fdb96); }
.rp-chip--transition { --chip: var(--rp-node-transition, #7C3AED); }
.rp-chip--submission { --chip: var(--rp-node-submission, #eca234); }
.rp-chip--position { --chip: var(--rp-node-position, #f7c933); }
.rp-chip--event { --chip: var(--rp-node-event, #3B82F6); }

/* El hexágono: 21×23, máscara del nodo del canvas. Vacío es la pieza lisa,
   rellena de color y sin nada dentro; con un <svg> o un número los pinta en
   negro. (27-09-2026: fuera el hexágono negro interior del vacío, que a ese
   tamaño se leía como un punto sucio en el centro.) */
.rp-hex {
  width: 21px;
  height: 23px;
  flex: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--chip, var(--theme-color, #b33131));
  color: var(--rp-bg-deep, #0a0a0c);
  font-size: 10px;
  font-weight: 900;
  font-style: italic;
  line-height: 1;
  -webkit-mask: var(--rp-hex) center / contain no-repeat;
          mask: var(--rp-hex) center / contain no-repeat;
  transition: background 0.3s, transform 0.3s var(--rp-spring, cubic-bezier(0.34, 1.56, 0.64, 1)), filter 0.3s;
}
.rp-hex svg { width: 11px; height: 11px; }
.rp-hex--lg { width: 30px; height: 33px; font-size: 12px; }
.rp-hex--lg svg { width: 15px; height: 15px; }
.rp-hex--off { background: rgba(255, 255, 255, 0.12); }

/* ---- Panel de filtros ------------------------------------------------------
   Ficha técnica: cada faceta ocupa una fila con su eyebrow a la izquierda y
   las opciones a la derecha, sin filetes ni aire entre filas — el panel se
   abre y se cierra, no se lee de arriba abajo, así que separar cuesta más de
   lo que ordena. La opción activa se enciende con la piel de los chips del
   navegador de recorrido; en reposo el texto va desnudo. Cada opción puede
   traer su propio acento en --opt-accent (los tipos de nodo usan su color).

   Lo usan /biblioteca y /planes; cualquier listado nuevo hereda de aquí. */

.rp-filter-toggle {
  padding: 14px 20px;
  background: rgb(12 12 12 / 51%);
  backdrop-filter: blur(var(--rp-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--rp-blur)) saturate(1.2);
  border: none;
  border-radius: var(--rp-radius);
  color: var(--rp-text-3);
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
}
.rp-filter-toggle:hover,
.rp-filter-toggle.active { color: var(--theme-color, #b33131); }

.rp-filters {
  display: none;
  flex-direction: column;
  padding: 4px 22px 6px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0.08) 100%),
    rgb(10 10 12 / 65%);
  backdrop-filter: blur(var(--rp-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--rp-blur)) saturate(1.2);
  border: none;
  border-radius: var(--rp-radius);
  margin-bottom: 4px;
  position: relative;
  z-index: 2;
  overflow: hidden;
  animation: rpFilterSlide 0.2s ease;
}
.rp-filters.open { display: flex; }
/* Trama de puntos: la misma textura de las superficies del hub */
.rp-filters::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.4;
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.15), black 65%);
          mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.15), black 65%);
  pointer-events: none;
}
.rp-filters > * { position: relative; z-index: 1; }
@keyframes rpFilterSlide {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.rp-filter-row {
  display: grid;
  grid-template-columns: 106px minmax(0, 1fr);
  align-items: center;
  gap: 2px 12px;
  padding: 3px 0;
}

.rp-filter-label {
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  line-height: 1.5;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--theme-color, #b33131) 65%, rgba(255, 255, 255, 0.5));
}

.rp-filter-opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 4px;
}

/* La opción activa toma la piel de los chips del navegador de recorrido
   (ui/PlanTour.css .pv-chip-node): borde encendido en su acento, halo por
   fuera y por dentro sobre casi negro, y el mismo radio de 6px que imita el
   vértice redondeado del hexágono. En reposo la caja está pero es
   transparente, así el encendido no mueve la retícula. */
.rp-filter-opt {
  --chip: var(--opt-accent, var(--theme-color, #b33131));
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 9px;
  background: transparent;
  border: none;
  border-radius: var(--rp-radius-sm, 6px);
  color: rgba(255, 255, 255, 0.38);
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.rp-filter-opt:hover {
  color: var(--rp-text-2);
  background: rgba(255, 255, 255, 0.06);
}
/* Encendido: relleno suave del color de la pieza y halo, sin anillo. */
.rp-filter-opt.active {
  color: var(--rp-text);
  background: color-mix(in srgb, var(--chip) 20%, transparent);
  box-shadow: 0 0 12px color-mix(in srgb, var(--chip) 30%, transparent);
}
.rp-filter-opt.active:hover {
  background: color-mix(in srgb, var(--chip) 28%, transparent);
  box-shadow: 0 0 18px color-mix(in srgb, var(--chip) 45%, transparent);
}

/* Tipo de nodo: la pieza del canvas, no una marca abstracta. El SVG lo genera
   js/nodeGlyph.js con el mismo hexágono y el mismo icono que el editor. */
.rp-filter-hex {
  display: block;
  height: 20px;
  flex-shrink: 0;
  color: var(--chip);
  opacity: 0.55;
  transition: opacity 0.15s;
}
.rp-filter-opt.active .rp-filter-hex,
.rp-filter-opt:hover .rp-filter-hex { opacity: 1; }
.rp-filter-hex svg {
  display: block;
  height: 100%;
  width: auto;
}

.rp-filter-clear-row {
  display: flex;
  justify-content: flex-end;
  padding: 4px 0 6px;
}
.rp-filter-clear {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  border-radius: var(--rp-radius);
  padding: 0;
  color: rgba(255, 255, 255, 0.32);
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s;
}
.rp-filter-clear::before {
  content: '×';
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
  color: var(--rp-red);
  transition: color 0.15s, transform 0.15s;
}
.rp-filter-clear:hover { color: var(--rp-text-2); }
.rp-filter-clear:hover::before {
  color: var(--rp-red-hover);
  transform: scale(1.15);
}

/* Buscar por piezas (js/pieceSearch.js): filas «tipo + texto» dentro del
   panel de filtros. El tipo es un select nativo (funciona en móvil y en tres
   idiomas) con el glifo de la pieza al lado, y el texto va en la barra de
   siempre pero más baja, para que quepa al lado del tipo. */
.rp-piece-rows {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  width: 100%;
}
.rp-piece-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 100%;
}
.rp-piece-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.rp-piece-hex {
  color: var(--chip, rgba(255, 255, 255, 0.45));
  opacity: 0.9;
}
.rp-piece-hex.is-any { opacity: 0.35; }
.rp-piece-type {
  flex: 0 0 auto;
  max-width: 150px;
  padding: 4px 24px 4px 8px;
  background: rgba(255, 255, 255, 0.06)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.5' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
    no-repeat right 6px center / 12px 12px;
  border: none;
  border-radius: var(--rp-radius-sm, 6px);
  color: var(--rp-text);
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  outline: none;
}
.rp-piece-type:focus-visible { box-shadow: 0 0 0 1px var(--theme-color, #b33131); }
.rp-piece-type option { background: #101013; color: #fff; }
.rp-piece-text {
  flex: 1 1 120px;
  min-width: 0;
  padding: 5px 10px;
  font-size: 11px;
}
.rp-piece-remove {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.32);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s;
}
.rp-piece-remove:hover { color: var(--rp-red-hover); }
.rp-piece-add { flex: 0 0 auto; }
.rp-piece-hint {
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.32);
}
.rp-piece-hint[hidden], .rp-piece-add[hidden] { display: none; }
/* La pieza que empató, bajo el nombre del plan */
.rp-piece-match {
  display: block;
  margin-top: 3px;
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--theme-color, #b33131) 70%, rgba(255, 255, 255, 0.7));
}
.rp-piece-match::before { content: '✓ '; }

@media (max-width: 600px) {
  /* El toggle cede ancho: en la barra manda el campo de búsqueda */
  .rp-filter-toggle { padding: 14px 14px; }
  .rp-filters { padding-left: 16px; padding-right: 16px; }
  .rp-filter-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 0;
  }
}

/* ---- Inputs ----------------------------------------------------------------
   Dos tratamientos sancionados y ninguno más:
   1) .rp-field — formularios (receta de login): sin caja, subrayado 1px que
      se enciende al foco con línea animada.
   2) .rp-input--bar — barras de acción/búsqueda (receta del search de
      planes): caja glass con el marcador de 2px en el borde izquierdo. */

.rp-field { position: relative; }
.rp-field-label {
  display: block;
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--rp-text-3);
  margin-bottom: 4px;
}
.rp-field-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding: 12px 0;
  color: var(--rp-text);
  font-size: 16px; /* <16px dispara el zoom automático de iOS al enfocar */
  font-family: var(--rp-font);
  font-weight: 300;
  letter-spacing: 0.5px;
  transition: border-color 0.3s ease;
}
.rp-field-input:focus { outline: none; }
.rp-field-input::placeholder {
  color: rgba(255, 255, 255, 0.2);
  font-weight: 300;
}
.rp-input-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--theme-color, #b33131);
  transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 0 8px color-mix(in srgb, var(--theme-color, #b33131) 30%, transparent);
}
.rp-field-input:focus ~ .rp-input-line { width: 100%; }

.rp-input--bar {
  padding: 14px 20px;
  background: rgb(12 12 12 / 51%);
  backdrop-filter: blur(var(--rp-blur)) saturate(1.2);
  -webkit-backdrop-filter: blur(var(--rp-blur)) saturate(1.2);
  border: none;
  color: var(--rp-text);
  font-family: var(--rp-font);
  font-size: var(--rp-fs-sm);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  outline: none;
  border-radius: var(--rp-radius);
}
.rp-input--bar::placeholder {
  color: var(--rp-text-3);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}
/* Contenido literal (emails, mensajes): la barra sin versalitas ni tracking */
.rp-input--raw,
.rp-input--raw::placeholder {
  text-transform: none;
  letter-spacing: 0.5px;
  font-weight: 400;
}

/* ===== Cinturón (js/rpBelt.js) ===== */
.rp-belt {
  display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(0 0 8px var(--belt-glow, transparent));
  transition: filter 0.6s ease;
}
.rp-belt-wrap { display: block; }

/* Cuarto grado: el color del siguiente cinturón recorre la banda y el halo
   respira. El barrido vive dentro del SVG, recortado por el contorno. */
.rp-belt--promo { animation: rpBeltPromo 2.8s ease-in-out infinite; }
@keyframes rpBeltPromo {
  0%, 100% { filter: drop-shadow(0 0 6px var(--belt-glow, transparent)); }
  50%      { filter: drop-shadow(0 0 15px var(--belt-glow, transparent)) drop-shadow(0 0 26px var(--belt-glow, transparent)); }
}
.rp-belt-sweep { animation: rpBeltSweep 3.4s cubic-bezier(0.45, 0, 0.2, 1) infinite; }
@keyframes rpBeltSweep {
  0%        { transform: translateX(-88px); }
  42%, 100% { transform: translateX(248px); }
}

.rp-belt-stripe { animation: rpBeltStripeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes rpBeltStripeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .rp-belt--promo, .rp-belt-sweep, .rp-belt-stripe { animation: none; }
}

/* ===== Monograma de título (js/rpTitle.js) =====
   La placa de iniciales con la que se reconoce un título: en el panel de
   Inicio, en el selector de Ajustes y en cualquier sitio que haga falta. Toma
   prestado el registro de los chips del recorrido del visor (ui/PlanTour.css):
   letras muy gordas del color del nodo que da el título y la esquina apenas
   redondeada — el mismo 6px que allí imita el vértice del hexágono. Sin halos:
   el peso lo lleva el trazo, de 2px y a todo color, sobre fondo vacío. */
.rp-mono {
  --mono: var(--mono-a, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  font-family: var(--rp-font-label);
  font-weight: 600;
  font-style: normal;
  font-size: var(--rp-fs-label);
  line-height: 1;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--mono);
  /* Casa (26-09): sin trazo. La placa es un relleno suave del color con las
     letras encima; elegida, se enciende (más relleno y halo). */
  background: color-mix(in srgb, var(--mono) 16%, transparent);
  border: none;
  border-radius: var(--rp-radius-sm, 6px);
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.rp-mono[data-len="1"] { font-size: 21px; letter-spacing: 0; }
.rp-mono[data-len="2"] { font-size: 17px; }

/* Apagado: la placa se apaga, que es justo lo que hay que ganarse. */
.rp-mono--off {
  color: rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.05);
}

/* Elegido (casa 26-09): sin anillo que gira. La placa se enciende con luz:
   más relleno y halo del color del título; las letras se aclaran. */
.rp-pick-on .rp-mono {
  background: color-mix(in srgb, var(--mono-a, #fff) 30%, transparent);
  box-shadow: 0 0 14px color-mix(in srgb, var(--mono-a, #fff) 35%, transparent);
  color: color-mix(in srgb, var(--mono-a, #fff) 22%, #fff);
}
.rp-pick { cursor: pointer; }

/* ============================================================
 * INTERRUPTOR — el sí/no del sistema. Pista + pastilla, sin caja
 * alrededor ni etiqueta dentro: la etiqueta va fuera, como en las
 * filas de Ajustes. Encendido toma el acento vivo.
 * (administrar.html tiene todavía su copia local, .adm-switch, de
 * cuando esto no existía: al siguiente retoque de esa pantalla,
 * que herede de aquí.)
 * ============================================================ */
.rp-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rp-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rp-switch-track {
  width: 38px;
  height: 20px;
  flex: none;
  position: relative;
  border-radius: var(--rp-radius-sm, 6px);
  background: rgba(255, 255, 255, 0.10);
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.rp-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.55);
  transition: transform 0.2s ease, background 0.2s ease;
}
.rp-switch input:checked + .rp-switch-track {
  background: color-mix(in srgb, var(--theme-color, #b33131) 34%, transparent);
  box-shadow: 0 0 10px color-mix(in srgb, var(--theme-color, #b33131) 30%, transparent);
}
.rp-switch input:checked + .rp-switch-track::after {
  transform: translateX(18px);
  background: #fff;
}
.rp-switch input:disabled + .rp-switch-track { opacity: 0.4; }
.rp-switch input:focus-visible + .rp-switch-track {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--theme-color, #b33131) 45%, transparent);
}

/* ===== LOADER DE MASCOTA =====
   La espera del sistema: la mascota mirando hacia arriba, impaciente, con los
   tres puntos subiendo sobre la cabeza. Es la hermana de la pose de duda
   (.rp-help-*) y la de celebracion (.rp-cheer-*), que viven en rp-modal.css;
   esta vive aqui porque rp-modal.css la inyecta el JS y el loader tiene que
   verse en el primer pintado, antes de que corra nada.
   Markup: .rp-loader > svg.rp-loader-mark (+ .rp-loader-label opcional).
   Envolver en .rp-loader-overlay para la espera a pantalla completa. */
.rp-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.rp-loader-mark {
  width: 56px;
  height: 56px;
  display: block;
  overflow: visible;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}
.rp-loader-skin { fill: #ffffff; }
.rp-loader-eye-l { fill: #141414; }
.rp-loader-eye-r { fill: #b33131; }
.rp-loader-face {
  transform-origin: 67.7333px 67.7333px;
  transform-box: view-box;
  animation: rpLoaderBob 2.6s ease-in-out infinite;
}
@keyframes rpLoaderBob {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  30%      { transform: translateY(-2.5px) rotate(4deg); }
  58%      { transform: translateY(2px) rotate(2deg); }
  80%      { transform: translateY(0) rotate(-2deg); }
}
.rp-loader-eye {
  transform-origin: center;
  transform-box: fill-box;
  animation: rpLoaderEyes 2.6s ease-in-out infinite;
}
@keyframes rpLoaderEyes {
  0%, 18%   { transform: translate(0, -14px); }
  34%       { transform: translate(5px, -13px); }
  48%       { transform: translate(4px, -9px); }
  64%       { transform: translate(-4px, -11px); }
  80%       { transform: translate(-2px, -14px); }
  92%, 100% { transform: translate(0, -14px); }
}
.rp-loader-dot {
  fill: var(--theme-color, #b33131);
  transform-box: fill-box;
  transform-origin: center;
  animation: rpLoaderDots 1.35s ease-in-out infinite;
}
.rp-loader-dot:nth-child(2) { animation-delay: 0.17s; }
.rp-loader-dot:nth-child(3) { animation-delay: 0.34s; }
@keyframes rpLoaderDots {
  0%, 100% { opacity: 0.18; transform: translateY(3px) scale(0.72); }
  45%      { opacity: 1;    transform: translateY(-3px) scale(1); }
}
.rp-loader-label {
  margin: 0;
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--rp-ls-eyebrow);
  color: rgba(255, 255, 255, 0.34);
}
.rp-loader--sm .rp-loader-mark { width: 34px; height: 34px; }
.rp-loader--sm { gap: 10px; }
.rp-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0d0d0d;
  opacity: 1;
  transition: opacity 0.35s ease;
  pointer-events: all;
}
.rp-loader-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.rp-loader-overlay .rp-loader-mark { width: 66px; height: 66px; }
@media (prefers-reduced-motion: reduce) {
  .rp-loader-face, .rp-loader-eye, .rp-loader-dot { animation: none; }
  .rp-loader-eye { transform: translate(0, -14px); }
}

/* ============================================================================
   LA CASA (26-09-2026) — primitivas compartidas por toda la app
   ----------------------------------------------------------------------------
   Lo que fijó la ficha isla del editor (src/ui/RightPanel.css), aquí para que
   lo consuman las páginas estáticas y el editor: la isla (superficie sin borde
   con luz por la esquina), el eyebrow con punto encendido, el campo en línea,
   el rail de pestañas con indicador, el segmento, el KPI, la entrada escalonada
   y la hoja. Cada página BORRA su receta local al migrar. Sin bordes, sin
   filetes, sin hairlines: separan el espacio, la etiqueta y la luz.
   ========================================================================== */

/* ---- Isla ---- La superficie de la casa. --isle-c es el color del bloque
   (rojo marca por defecto; dorado coach, blanco STUDIO, color de pieza).
   Sin borde: la separa la sombra y la LUZ que entra por la esquina superior
   izquierda. Rejilla de puntos de 26 px. Corte diagonal de 14 px. */
.rp-isle {
  --isle-c: var(--theme-color, #b33131);
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 0;
  clip-path: var(--rp-cut, polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%));
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(ellipse 70% 40% at 0% 0%, color-mix(in srgb, var(--isle-c) 22%, transparent) 0%, transparent 70%),
    rgba(255, 255, 255, 0.035);
}
.rp-isle--deep {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(ellipse 70% 40% at 0% 0%, color-mix(in srgb, var(--isle-c) 22%, transparent) 0%, transparent 70%),
    rgba(16, 16, 18, 0.94);
}
/* Flotante (modal, popover, hoja): cristal con blur y sombra, sin borde */
.rp-isle--float {
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.045) 1px, transparent 1px) 0 0 / 26px 26px,
    radial-gradient(ellipse 70% 40% at 0% 0%, color-mix(in srgb, var(--isle-c) 24%, transparent) 0%, transparent 70%),
    rgba(16, 16, 18, 0.94);
  -webkit-backdrop-filter: blur(var(--rp-blur, 20px)) saturate(1.2);
          backdrop-filter: blur(var(--rp-blur, 20px)) saturate(1.2);
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.55));
}
.rp-isle--coach { --isle-c: var(--rp-coach, #d4a04b); }
.rp-isle--studio { --isle-c: var(--rp-studio, #f0f0f2); }
.rp-isle--success { --isle-c: var(--rp-success, #22c55e); }
.rp-isle--warn { --isle-c: var(--rp-warning, #e6a817); }
.rp-isle--quiet { --isle-c: rgba(255, 255, 255, 0.4); }
.rp-isle--guard { --isle-c: var(--rp-node-guard, #2fdb96); }
.rp-isle--transition { --isle-c: var(--rp-node-transition, #7C3AED); }
.rp-isle--submission { --isle-c: var(--rp-node-submission, #eca234); }
.rp-isle--position { --isle-c: var(--rp-node-position, #f7c933); }
.rp-isle--event { --isle-c: var(--rp-node-event, #3B82F6); }
.rp-isle--sm { clip-path: var(--rp-cut-btn, polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%)); }
.rp-isle--none { clip-path: none; }

/* ---- Eyebrow (26-09-2026) ----
   Condensada 600 a 15px, tracking corto, texto en gris y SIN marcador (Jose:
   «quita el circulito»): el color vive en el titular y en las piezas, no en la
   etiqueta. --eb-c queda para quien lo necesite. Sustituye a eyebrows con borde,
   kickers y títulos de tarjeta en color, y a la receta antigua
   «Poppins 10px · 800 · 3px · color de acento» en toda la plataforma.
   Modificadores: --coach/--studio/--success/--warn fijan --eb-c;
   --quiet baja el texto a terciario; --white lo sube a blanco puro (nombres de
   categoría y rótulos que son el título de su bloque); --sm usa el tamaño de
   tag (13px). */
.rp-eyebrow {
  --eb-c: var(--theme-color, #b33131);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--rp-ls-eyebrow, 0.6px);
  text-transform: uppercase;
  color: var(--rp-text-2);
  border: none;
  padding: 0;
  background: none;
}
.rp-eyebrow::before {
  content: none;
  display: none;
}
.rp-eyebrow small { color: var(--rp-text-3); letter-spacing: inherit; font-weight: 500; font-size: inherit; }
.rp-eyebrow--coach { --eb-c: var(--rp-coach, #d4a04b); }
.rp-eyebrow--studio { --eb-c: var(--rp-studio, #f0f0f2); }
.rp-eyebrow--success { --eb-c: var(--rp-success, #22c55e); }
.rp-eyebrow--warn { --eb-c: var(--rp-warning, #e6a817); }
.rp-eyebrow--quiet { --eb-c: var(--rp-text-3); color: var(--rp-text-3); }
.rp-eyebrow--white { color: var(--rp-text); }
.rp-eyebrow--sm { font-size: var(--rp-fs-label-sm); }
/* Etiqueta de bloque dentro de una isla (como .blk-h de la ficha) */
.rp-blk-h {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: var(--rp-ls-eyebrow, 0.6px);
  text-transform: uppercase;
  color: var(--rp-text-3);
  margin-bottom: 10px;
}
.rp-blk-h i { font-style: normal; color: var(--isle-c, var(--theme-color, #b33131)); }

/* ---- Punto encendido ---- Donde iba un border-left, un check o un guion. */
.rp-dot {
  display: inline-block;
  width: 7px;
  height: 8px;
  flex: none;
  background: var(--dot-c, var(--theme-color, #b33131)); border-radius: 0; -webkit-mask: var(--rp-hex) center / contain no-repeat; mask: var(--rp-hex) center / contain no-repeat; }
.rp-dot--pulse { animation: rpDotPulse 1.6s ease-in-out infinite; }
@keyframes rpDotPulse {
  0%, 100% { opacity: 0.5; transform: scale(0.9); }
  50%      { opacity: 1; transform: scale(1.15); }
}
/* Lista con puntos: sustituye a checks, guiones y triángulos */
.rp-dots { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.rp-dots li { position: relative; padding-left: 20px; font-size: var(--rp-fs-sm); line-height: 1.5; color: var(--rp-text-2); }
.rp-dots li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 8px;
  height: 9px;
  background: var(--dot-c, var(--theme-color, #b33131)); border-radius: 0; -webkit-mask: var(--rp-hex) center / contain no-repeat; mask: var(--rp-hex) center / contain no-repeat; }

/* ---- Campo en línea ---- .rp-field ya existe (login): label + input + línea.
   .rp-field--line es la versión sin elemento de línea: el propio campo dibuja
   la línea al enfocar. Vale para input, textarea y select. */
.rp-field--line { position: relative; }
.rp-field--line > input,
.rp-field--line > textarea,
.rp-field--line > select {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  color: var(--rp-text);
  font-family: var(--rp-font);
  font-size: 16px;
  padding: 6px 0 8px;
  resize: none;
  border-radius: 0;
}
.rp-field--line > input::placeholder,
.rp-field--line > textarea::placeholder { color: var(--rp-text-3); font-style: italic; }
.rp-field--line::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.rp-field--line::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  z-index: 1;
  background: var(--field-c, var(--theme-color, #b33131));
  box-shadow: 0 0 8px color-mix(in srgb, var(--field-c, var(--theme-color, #b33131)) 40%, transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.rp-field--line:focus-within::before { transform: scaleX(1); }
.rp-field--line > select option { background: #101013; color: #fff; }

/* ---- Rail de pestañas con indicador ---- Markup: .rp-tabs > button.rp-tab
   (+ .is-on) + i.rp-tabs-ind. Sin JS el indicador sale bajo la activa con
   ::after; con cuatro líneas de JS en la página se desliza (.has-ind). */
.rp-tabs {
  position: relative;
  display: flex;
  gap: 20px;
  isolation: isolate;
}
.rp-tabs::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
  z-index: -1;
}
.rp-tab {
  position: relative;
  background: none;
  border: none;
  padding: 9px 0 8px;
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--rp-text-3);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.rp-tab:hover { color: var(--rp-text-2); }
.rp-tab.is-on, .rp-tab.active { color: var(--rp-text); }
.rp-tab.is-on::after, .rp-tab.active::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--tab-c, var(--theme-color, #b33131));
  box-shadow: 0 0 10px var(--tab-c, var(--theme-color, #b33131));
  transform-origin: left;
  animation: rpTabIn 0.35s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
.rp-tabs.has-ind .rp-tab.is-on::after, .rp-tabs.has-ind .rp-tab.active::after { display: none; }
.rp-tabs-ind {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--tab-c, var(--theme-color, #b33131));
  box-shadow: 0 0 10px var(--tab-c, var(--theme-color, #b33131));
  transition: left 0.35s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1)), width 0.35s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
}
@keyframes rpTabIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---- Segmento ---- El activo es blanco relleno con texto negro. */
.rp-seg {
  display: inline-flex;
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--rp-radius-sm, 6px);
  overflow: hidden;
  isolation: isolate;
}
.rp-seg-btn {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  padding: 6px 12px;
  font-family: var(--rp-font-label);
  font-size: var(--rp-fs-label-sm);
  font-weight: 600;
  letter-spacing: var(--rp-ls-eyebrow);
  text-transform: uppercase;
  color: var(--rp-text-3);
  cursor: pointer;
  transition: color 0.25s, background 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.rp-seg-btn.is-on, .rp-seg-btn.active { color: #000; background: #fff; border-radius: var(--rp-radius-sm, 6px); }
.rp-seg-btn:not(.is-on):not(.active):hover { color: var(--rp-text); }

/* ---- KPI ---- Número itálico 900 que se estampa, etiqueta en eyebrow. */
.rp-kpi {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  clip-path: var(--rp-cut-btn, polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%));
  font-family: var(--rp-font);
}
.rp-kpi-n {
  font-size: 24px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--rp-text);
  font-variant-numeric: tabular-nums;
}
.rp-kpi-n small { font-size: 11px; font-weight: 700; color: var(--rp-text-3); letter-spacing: 1px; margin-left: 4px; font-style: normal; }
.rp-kpi-l { font-family: var(--rp-font-label); font-size: var(--rp-fs-label-sm); letter-spacing: var(--rp-ls-eyebrow); text-transform: uppercase; color: var(--rp-text-3); font-weight: 600; }
.rp-kpi-d { font-size: 10px; font-weight: 700; color: var(--rp-success, #22c55e); }
.rp-kpi-d--down { color: var(--rp-error, #ff6b6b); }

/* ---- Movimiento de la casa ---- Entrada escalonada (poner --i por hijo y
   .in cuando entra en pantalla; .rp-reveal--auto entra al pintar) y el
   «sello». Solo opacidad y transform. */
.rp-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1)), transform 0.5s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
  transition-delay: calc(var(--i, 0) * 70ms);
}
.rp-reveal.in { opacity: 1; transform: none; }
.rp-reveal--auto { opacity: 1; transform: none; animation: rpRevealIn 0.5s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1)) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes rpRevealIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.rp-stamp { animation: rpStamp 0.5s var(--rp-spring, cubic-bezier(0.34, 1.56, 0.64, 1)) both; }
@keyframes rpStamp {
  0%   { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  70%  { transform: scale(1.12) rotate(0); opacity: 1; }
  100% { transform: scale(1); }
}
.rp-pop { animation: rpPop 0.45s var(--rp-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); }
@keyframes rpPop { 0% { transform: scale(0.6); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* ---- Hoja ---- La hoja inferior de la ficha (móvil) y la isla flotante
   (escritorio) para cualquier detalle: entreno del día, ficha de alumno,
   asignar. Markup: .rp-sheet-dim + .rp-sheet.rp-isle.rp-isle--float >
   .rp-sheet-grab + contenido. .is-open la muestra. */
.rp-sheet-dim {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(8, 9, 11, 0.55);
  -webkit-backdrop-filter: blur(var(--rp-blur, 20px)) saturate(1.1);
          backdrop-filter: blur(var(--rp-blur, 20px)) saturate(1.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.rp-sheet-dim.is-open { opacity: 1; pointer-events: auto; }
.rp-sheet {
  position: fixed;
  z-index: 10001;
  left: 50%;
  top: 50%;
  width: min(92vw, 440px);
  max-height: 88vh;
  overflow-y: auto;
  scrollbar-width: none;
  transform: translate(-50%, -50%) translateY(20px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.42s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1)), opacity 0.3s ease;
  color: var(--rp-text);
  font-family: var(--rp-font);
}
.rp-sheet::-webkit-scrollbar { display: none; }
.rp-sheet.is-open { transform: translate(-50%, -50%); opacity: 1; pointer-events: auto; }
.rp-sheet-grab { display: none; }
@media (max-width: 768px) {
  .rp-sheet {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%;
    max-height: 92dvh;
    transform: translateY(100%);
    opacity: 1;
    clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
    filter: none;
    transition: transform 0.45s var(--rp-ease, cubic-bezier(0.16, 1, 0.3, 1));
  }
  .rp-sheet.is-open { transform: none; }
  .rp-sheet-grab { display: block; padding: 10px 0 2px; cursor: grab; }
  .rp-sheet-grab::before { content: ''; display: block; width: 40px; height: 4px; margin: 0 auto; background: rgba(255, 255, 255, 0.35); }
}

/* ---- Utilidades de limpieza ---- Para que una página quite su receta vieja
   sin reescribirla entera: .rp-noborder anula bordes y filetes de cualquier
   caja; .rp-nohair quita hairlines de hijos directos. */
.rp-noborder, .rp-noborder::before, .rp-noborder::after { border: none !important; outline: none !important; }
.rp-nohair > * { border-top: none !important; border-bottom: none !important; }

@media (prefers-reduced-motion: reduce) {
  .rp-reveal, .rp-reveal--auto, .rp-stamp, .rp-pop, .rp-dot--pulse, .rp-tab.is-on::after, .rp-tab.active::after { animation: none; transition: none; opacity: 1; transform: none; }
  .rp-sheet, .rp-sheet-dim, .rp-tabs-ind, .rp-chip, .rp-hex { transition: none; }
}