/* =============================================================================
   RUTINITAS — COMPONENTES
   Superficie de producto. Cada bloque anota a qué componente de Angular
   Material mapea en el port (ver ANGULAR.md).
   ============================================================================= */

/* ── Botones → mat-button / mat-raised-button ────────────────────────────── */
.rt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-2);
  min-height: 2.75rem;               /* 44px — target táctil mínimo */
  padding: var(--rt-space-2) var(--rt-space-5);
  border: 0.0625rem solid transparent;
  border-radius: var(--rt-radius-pill);
  background: transparent;
  font-family: var(--rt-font-display);
  font-size: var(--rt-text-sm);
  font-weight: var(--font-semibold);
  letter-spacing: 0.01em;
  transition: background var(--rt-dur) var(--rt-ease),
              border-color var(--rt-dur) var(--rt-ease),
              transform var(--rt-dur-fast) var(--rt-ease),
              box-shadow var(--rt-dur) var(--rt-ease);
}
.rt-btn svg { width: 1.25rem; height: 1.25rem; flex: none; }
.rt-btn:active { transform: translateY(0.0625rem) scale(0.985); }
.rt-btn[disabled] { opacity: 0.45; pointer-events: none; }

.rt-btn-primary { background: var(--app-primary); color: var(--app-on-primary); }
/* Paleta cálida: el hover ACLARA el ámbar en vez de oscurecerlo, así el texto
   marrón de `--app-on-primary` gana contraste en vez de perderlo. */
.rt-btn-primary:hover { background: color-mix(in oklab, var(--app-primary) 78%, var(--rt-papel)); box-shadow: var(--rt-elev-2); }

.rt-btn-franja { background: var(--rt-franja); color: var(--rt-franja-on); }
.rt-btn-franja:hover { background: color-mix(in oklab, var(--rt-franja) 82%, var(--rt-franja-on)); box-shadow: var(--rt-elev-2); }

.rt-btn-outline { border-color: var(--theme-border); color: var(--theme-text); }
.rt-btn-outline:hover { border-color: var(--app-primary-dark); color: var(--theme-text); background: var(--app-primary-container); }

.rt-btn-ghost { color: var(--theme-text-secondary); padding-inline: var(--rt-space-3); }
.rt-btn-ghost:hover { color: var(--app-on-header); background: var(--app-primary-container); }

.rt-btn-danger { color: var(--app-error); border-color: var(--app-error); }
.rt-btn-danger:hover { background: var(--result-failure-bg); }

.rt-btn-lg { min-height: 3.25rem; padding-inline: var(--rt-space-6); font-size: var(--rt-text-md); }
.rt-btn-block { width: 100%; }

/* Botón sólo-ícono del header (tema, sonido, pantalla completa) */
.rt-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: currentColor;
  transition: background var(--rt-dur) var(--rt-ease);
}
.rt-icon-btn svg { width: 1.375rem; height: 1.375rem; }
.rt-icon-btn:hover { background: color-mix(in oklab, currentColor 14%, transparent); }
.rt-icon-btn.on-surface:hover { background: var(--theme-sidenav-hover); }

/* ── Card → mat-card ─────────────────────────────────────────────────────── */
.rt-card {
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-md);
  padding: var(--rt-space-5);
  box-shadow: var(--rt-elev-1);
}
.rt-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rt-space-3); margin-bottom: var(--rt-space-4);
}
.rt-card-head h3 { font-size: var(--rt-text-lg); }
.rt-card-sub { color: var(--theme-text-secondary); font-size: var(--rt-text-sm); margin: 0; }

/* ── Chips → mat-chip ────────────────────────────────────────────────────── */
.rt-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  padding: var(--rt-space-1) var(--rt-space-3);
  border-radius: var(--rt-radius-pill);
  background: var(--rt-franja-soft);
  color: var(--rt-franja-deep);
  font-size: var(--rt-text-xs);
  font-weight: var(--font-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.rt-chip svg { width: 0.875rem; height: 0.875rem; }
.rt-chip-ok { background: var(--result-success-bg); color: var(--result-success-text); }
.rt-chip-warn { background: var(--result-timeout-bg); color: var(--result-timeout-text); }
.rt-chip-neutral { background: var(--rt-neutral-soft); color: var(--rt-neutral-ink); }

/* Selector de franja / vista — grupo de chips seleccionables */
.rt-segment {
  display: inline-flex;
  padding: var(--rt-space-1);
  gap: var(--rt-space-1);
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-pill);
  overflow-x: auto;
  max-width: 100%;
}
.rt-segment button {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  min-height: 2.75rem;
  padding: 0 var(--rt-space-4);
  border: 0;
  border-radius: var(--rt-radius-pill);
  background: transparent;
  color: var(--theme-text-secondary);
  font-family: var(--rt-font-display);
  font-size: var(--rt-text-sm);
  font-weight: var(--font-semibold);
  white-space: nowrap;
  transition: background var(--rt-dur) var(--rt-ease), color var(--rt-dur) var(--rt-ease);
}
.rt-segment button svg { width: 1.125rem; height: 1.125rem; }
.rt-segment button:hover { color: var(--theme-text); }
.rt-segment button[aria-pressed='true'] {
  background: var(--rt-franja);
  color: var(--rt-franja-on);
}

/* ── Ícono de actividad ──────────────────────────────────────────────────── */
.rt-act-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--rt-radius-md);
  background: var(--rt-franja-soft);
  color: var(--rt-franja-deep);
}
.rt-act-icon svg { width: 1.625rem; height: 1.625rem; }
.rt-act-icon.sm { width: 2.25rem; height: 2.25rem; border-radius: var(--rt-radius-sm); }
.rt-act-icon.sm svg { width: 1.25rem; height: 1.25rem; }
.rt-act-icon.xl { width: 6rem; height: 6rem; border-radius: var(--rt-radius-lg); }
.rt-act-icon.xl svg { width: 3.25rem; height: 3.25rem; }

/* ── Ilustración de actividad ────────────────────────────────────────────── */
/* 17 de las 36 actividades tienen ilustración propia (assets/actividades/).
   Las que no, siguen mostrando su ícono: el componente convive con `.rt-act-icon`
   y nunca deja un hueco. Se usan sólo donde el dibujo se lee — tarjetón, detalle,
   fila del chico y biblioteca — nunca a 36px, donde una escena entera es una
   mancha y el ícono comunica mejor. */
.rt-illus {
  display: block;
  flex: none;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--rt-radius-md);
  background: var(--rt-franja-soft);
  border: 0.1875rem solid var(--theme-bg-elevated);
  box-shadow: var(--rt-elev-2);
}
.rt-illus-hero { width: min(17rem, 72vw); border-radius: var(--rt-radius-lg); }
.rt-illus-row {
  width: 3.5rem;
  border-radius: var(--rt-radius-sm);
  border-width: 0.125rem;
  box-shadow: var(--rt-elev-1);
}
.rt-illus-thumb {
  width: 4.5rem;
  border-radius: var(--rt-radius-sm);
  border-width: 0.125rem;
  box-shadow: var(--rt-elev-1);
}

/* ── Tarea: fila compacta (vista lista, admin, biblioteca) ───────────────── */
.rt-task {
  display: flex;
  align-items: center;
  gap: var(--rt-space-4);
  width: 100%;
  text-align: left;
  padding: var(--rt-space-3);
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-md);
  transition: border-color var(--rt-dur) var(--rt-ease),
              box-shadow var(--rt-dur) var(--rt-ease),
              transform var(--rt-dur-fast) var(--rt-ease);
}
.rt-task:hover { border-color: var(--rt-franja); box-shadow: var(--rt-elev-2); }
.rt-task-body { min-width: 0; flex: 1; display: block; }
.rt-task-title {
  display: block;
  font-family: var(--rt-font-display);
  font-weight: var(--font-semibold);
  font-size: var(--rt-text-md);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.rt-task-meta { display: block; font-size: var(--rt-text-xs); color: var(--theme-text-secondary); }
.rt-task[data-done='true'] { background: var(--result-success-bg); border-color: transparent; }
.rt-task[data-done='true'] .rt-task-title { text-decoration: line-through; opacity: 0.65; }

/* Marca de completitud: tilde + estrella. Es el núcleo del sistema. */
.rt-mark {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 50%;
  border: 0.125rem dashed var(--theme-border);
  background: transparent;
  color: var(--theme-text-disabled);
  transition: all var(--rt-dur) var(--rt-ease-bounce);
}
button.rt-mark:hover { border-color: var(--rt-franja); color: var(--rt-franja); }
.rt-mark svg { width: 1.5rem; height: 1.5rem; }
[data-done='true'] .rt-mark {
  border-style: solid;
  border-color: var(--app-success);
  background: var(--app-success);
  color: var(--app-on-success);
}
.rt-star { color: var(--rt-estrella); }
.rt-star.dim { color: var(--theme-border); }
.rt-star svg {
  width: 1.25rem; height: 1.25rem;
  filter: drop-shadow(0 0 0.0625rem color-mix(in oklab, var(--rt-tinta) 45%, transparent));
}

/* ── Tarjetón: la vista grande del chico ─────────────────────────────────── */
.rt-tarjeton {
  display: grid;
  gap: var(--rt-space-5);
  justify-items: center;
  text-align: center;
  padding: var(--rt-space-7) var(--rt-space-5);
  background: var(--rt-franja-soft);
  border: 0.125rem solid var(--rt-franja-tint);
  border-radius: var(--rt-radius-lg);
}
.rt-tarjeton h2 { font-size: clamp(1.75rem, 5vw, 2.75rem); color: var(--rt-franja-deep); }
/* En oscuro `--rt-franja-deep` ya se invierte a un tono claro (ver tokens.css),
   así que la franja conserva su identidad en vez de caer al gris del tema. */
.rt-tarjeton .rt-act-icon.xl { background: var(--theme-bg-elevated); }
.rt-tarjeton-nav { display: flex; gap: var(--rt-space-3); flex-wrap: wrap; justify-content: center; }

/* ── Carriles: 3 franjas en columnas ─────────────────────────────────────── */
.rt-lanes {
  display: grid;
  gap: var(--rt-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  align-items: start;
}
.rt-lane {
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-md);
  overflow: hidden;
}
.rt-lane-head {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
  padding: var(--rt-space-4);
  background: var(--rt-franja-soft);
  border-bottom: 0.0625rem solid var(--rt-franja-tint);
  color: var(--rt-franja-deep);
}
.rt-lane-head h3 { font-size: var(--rt-text-lg); }
.rt-lane-head .rt-lane-count { margin-left: auto; font-family: var(--rt-font-mono); font-size: var(--rt-text-sm); }
.rt-lane-body {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-3);
  padding: var(--rt-space-4);
  min-height: 6rem;
}

/* ── Camino tipo tablero ─────────────────────────────────────────────────── */
/* Todo el camino se mide desde UN solo eje, `--path-x`. Antes la línea vivía en
   el contenedor con un `left` propio y el punto en la parada con otro, y los dos
   números no daban lo mismo: la línea quedaba 0.475rem a la izquierda del punto.
   Ahora el tramo de línea también es de la parada (`::after`), así que va del
   centro de un punto al centro del siguiente y no puede desalinearse. */
.rt-path {
  --path-x: 1.5rem;         /* dónde cae el eje, desde el borde del contenedor */
  --path-punto: 1.25rem;    /* diámetro de la parada */
  --path-linea: 0.25rem;    /* grosor del tramo punteado */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-4);
  padding-left: calc(var(--path-x) + var(--path-punto));
}
.rt-path-stop {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rt-space-4);
  width: 100%;
  text-align: left;
  padding: var(--rt-space-3) var(--rt-space-4);
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-pill);
  transition: box-shadow var(--rt-dur) var(--rt-ease), border-color var(--rt-dur) var(--rt-ease);
}
/* El hover no desplaza la parada: si se moviera, se llevaría el punto y el
   tramo con ella y volvería a romper la alineación. */
.rt-path-stop:hover { border-color: var(--rt-franja); box-shadow: var(--rt-elev-2); }

/* El punto. Su centro cae exactamente en --path-x. */
.rt-path-stop::before {
  content: '';
  position: absolute;
  left: calc(var(--path-punto) * -1.5);
  width: var(--path-punto);
  height: var(--path-punto);
  border-radius: 50%;
  background: var(--theme-bg);
  border: 0.25rem solid var(--rt-franja-tint);
  z-index: 1;
}
/* El tramo hasta la parada siguiente: arranca en el centro de este punto. */
.rt-path-stop::after {
  content: '';
  position: absolute;
  left: calc(var(--path-punto) * -1 - var(--path-linea) / 2);
  top: 50%;
  width: var(--path-linea);
  height: calc(100% + var(--rt-space-4));
  border-radius: var(--rt-radius-pill);
  background: repeating-linear-gradient(
    to bottom,
    var(--rt-franja-tint) 0 0.75rem,
    transparent 0.75rem 1.5rem
  );
}
.rt-path-stop:last-child::after { display: none; }
.rt-path-stop[data-done='true']::before { border-color: var(--app-success); background: var(--app-success); }
.rt-path-stop[data-done='true'] { background: var(--result-success-bg); }
.rt-path-stop[data-done='true'] .rt-task-title { text-decoration: line-through; opacity: 0.65; }

/* ── Barra de progreso → mat-progress-bar ────────────────────────────────── */
.rt-progress {
  height: 0.75rem;
  border-radius: var(--rt-radius-pill);
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
  overflow: hidden;
}
.rt-progress > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rt-franja);
  transition: width var(--rt-dur-slow) var(--rt-ease);
}

/* ── Formularios → mat-form-field ────────────────────────────────────────── */
.rt-field { display: flex; flex-direction: column; gap: var(--rt-space-2); }
.rt-field > label {
  font-size: var(--rt-text-sm);
  font-weight: var(--font-medium);
  color: var(--theme-text-secondary);
}
.rt-input, .rt-select, .rt-textarea {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--rt-space-2) var(--rt-space-4);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-sm);
  background: var(--theme-bg-elevated);
  color: var(--mat-form-field-outlined-input-text-color);
  font: inherit;
  font-size: var(--rt-text-md);
  transition: border-color var(--rt-dur) var(--rt-ease), box-shadow var(--rt-dur) var(--rt-ease);
}
.rt-input:focus, .rt-select:focus, .rt-textarea:focus {
  outline: none;
  border-color: var(--app-primary-dark);
  box-shadow: 0 0 0 0.1875rem var(--app-primary-light);
}
[data-theme='dark'] .rt-input:focus,
[data-theme='dark'] .rt-select:focus,
[data-theme='dark'] .rt-textarea:focus { box-shadow: 0 0 0 0.1875rem var(--theme-sidenav-subitem-bg); }
.rt-textarea { min-height: 6rem; resize: vertical; }
.rt-input[type='range'] { padding: 0 var(--rt-space-3); accent-color: var(--app-primary); }
.rt-input[type='search']::-webkit-search-cancel-button { cursor: pointer; }
.rt-field.has-error .rt-input { border-color: var(--app-error); }
.rt-error {
  font-size: var(--rt-text-xs);
  color: var(--app-error);
  min-height: 1rem;
}
.rt-form-grid { display: grid; gap: var(--rt-space-4); grid-template-columns: var(--forma-input-width); }

/* Switch → mat-slide-toggle */
.rt-switch { display: flex; align-items: center; gap: var(--rt-space-4); min-height: 2.75rem; }
.rt-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.rt-switch .track {
  position: relative;
  width: 3.25rem; height: 1.875rem;
  flex: none;
  border-radius: var(--rt-radius-pill);
  background: color-mix(in oklab, var(--rt-neutral-ink) 42%, var(--theme-bg));
  transition: background var(--rt-dur) var(--rt-ease);
}
.rt-switch .track::after {
  content: '';
  position: absolute;
  top: 0.1875rem; left: 0.1875rem;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  background: var(--theme-bg-elevated);
  box-shadow: var(--rt-elev-1);
  transition: transform var(--rt-dur) var(--rt-ease-bounce);
}
.rt-switch input:checked + .track { background: var(--app-primary); }
.rt-switch input:checked + .track::after { transform: translateX(1.375rem); }
.rt-switch input:focus-visible + .track { outline: 0.1875rem solid var(--app-primary); outline-offset: 0.125rem; }
.rt-switch .switch-label { display: flex; flex-direction: column; }
.rt-switch .switch-label small { color: var(--theme-text-secondary); font-size: var(--rt-text-xs); }

/* ── Tabla → mat-table ───────────────────────────────────────────────────── */
.rt-table-wrap { overflow-x: auto; border-radius: var(--rt-radius-md); border: 0.0625rem solid var(--theme-border); }
.rt-table { width: 100%; border-collapse: collapse; font-size: var(--rt-text-sm); background: var(--theme-bg-elevated); }
.rt-table th, .rt-table td {
  padding: var(--rt-space-3);
  text-align: left;
  border-bottom: 0.0625rem solid var(--theme-divider);
}
.rt-table th {
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  font-weight: var(--font-medium);
  white-space: nowrap;
}
.rt-table tbody tr:last-child td { border-bottom: 0; }
.rt-table .cell-center { text-align: center; }
.rt-table .cell-sticky {
  position: sticky; left: 0;
  background: var(--theme-bg-elevated);
  font-weight: var(--font-semibold);
}

/* ── Drag & drop (espeja la semántica del CDK) ───────────────────────────── */
.rt-drag { cursor: grab; touch-action: manipulation; }
.rt-drag:active { cursor: grabbing; }
.rt-drag-handle {
  display: grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  flex: none;
  border: 0; background: transparent;
  color: var(--theme-text-disabled);
  border-radius: var(--rt-radius-sm);
  cursor: grab;
}
.rt-drag-handle svg { width: 1.25rem; height: 1.25rem; }
.rt-drag-handle:hover { color: var(--rt-franja); background: var(--rt-franja-soft); }

.cdk-drag-preview {                    /* nombre CDK a propósito: port 1:1 */
  opacity: 0.92;
  box-shadow: var(--rt-elev-3);
  transform: rotate(-1.5deg);
  border-color: var(--rt-franja) !important;
}
.cdk-drag-placeholder {
  opacity: 0.35;
  border-style: dashed !important;
  background: var(--rt-franja-soft) !important;
}
.cdk-drop-list-dragging { background: var(--rt-franja-soft); }
.rt-lane-body.cdk-drop-list-dragging { border-radius: var(--rt-radius-sm); }

/* ── Diálogo → mat-dialog ────────────────────────────────────────────────── */
.rt-dialog[open] {
  border: 0;
  padding: 0;
  border-radius: var(--rt-radius-md);
  background: var(--theme-bg-elevated);
  color: var(--theme-text);
  box-shadow: var(--rt-elev-3);
  width: min(34rem, 92vw);
}
.rt-dialog::backdrop { background: rgba(0, 0, 0, 0.5); }
.rt-dialog-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--rt-space-3);
  padding: var(--rt-space-5) var(--rt-space-5) var(--rt-space-3);
}
.rt-dialog-body {
  padding: 0 var(--rt-space-5);
  max-height: min(60vh, 34rem);
  overflow-y: auto;
}
.rt-dialog-foot {
  display: flex; justify-content: flex-end; gap: var(--rt-space-3);
  padding: var(--rt-space-5);
}

/* ── Snackbar → mat-snack-bar ────────────────────────────────────────────── */
.rt-snack {
  position: fixed;
  left: 50%;
  bottom: var(--rt-space-5);
  transform: translate(-50%, 5rem);
  z-index: 90;
  display: flex; align-items: center; gap: var(--rt-space-3);
  padding: var(--rt-space-3) var(--rt-space-5);
  border-radius: var(--rt-radius-sm);
  background: var(--theme-text);
  color: var(--theme-bg);
  box-shadow: var(--rt-elev-3);
  font-size: var(--rt-text-sm);
  opacity: 0;
  transition: transform var(--rt-dur) var(--rt-ease), opacity var(--rt-dur) var(--rt-ease);
  pointer-events: none;
  max-width: min(30rem, 92vw);
}
.rt-snack[data-open='true'] { transform: translate(-50%, 0); opacity: 1; }
.rt-snack svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* ── Estado vacío ────────────────────────────────────────────────────────── */
.rt-empty {
  display: grid; place-items: center; gap: var(--rt-space-3);
  padding: var(--rt-space-7) var(--rt-space-4);
  text-align: center;
  color: var(--theme-text-secondary);
  border: 0.125rem dashed var(--theme-border);
  border-radius: var(--rt-radius-md);
}
.rt-empty svg { width: 2.5rem; height: 2.5rem; color: var(--theme-text-disabled); }

/* ── Avatar de perfil ────────────────────────────────────────────────────── */
/* Puede contener la inicial (fallback) o el avatar paramétrico de
   js/personajes.js. El SVG llena el círculo y no necesita otra medida. */
.rt-avatar {
  display: grid; place-items: center;
  width: 3rem; height: 3rem; flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--rt-franja-tint);
  color: var(--rt-franja-deep);
  font-family: var(--rt-font-display);
  font-weight: var(--font-bold);
  font-size: var(--rt-text-lg);
}
.rt-avatar.lg { width: 5rem; height: 5rem; font-size: var(--rt-text-2xl); }
.rt-avatar.sm { width: 2.25rem; height: 2.25rem; font-size: var(--rt-text-sm); }
.rt-avatar-svg { width: 100%; height: 100%; display: block; }
/* Retrato del personaje. Es un primer plano, así que se lee incluso a 36px —
   por eso reemplaza al avatar dibujado donde hay imagen. */
.rt-cara { width: 100%; height: 100%; display: block; object-fit: cover; }

/* ── Selector de personaje ───────────────────────────────────────────────── */
/* Se elige UN personaje de los que tienen (o van a tener) arte. No hay rasgos
   sueltos: cada combinación implicaría 42 ilustraciones que no existen. */
.rt-personajes {
  display: grid;
  gap: var(--rt-space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.rt-personaje {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
  padding: var(--rt-space-2);
  border: 0.125rem solid var(--theme-border);
  border-radius: var(--rt-radius-md);
  background: var(--theme-bg-elevated);
  text-align: left;
  transition: border-color var(--rt-dur) var(--rt-ease),
              box-shadow var(--rt-dur) var(--rt-ease);
}
.rt-personaje:hover { border-color: var(--app-primary-dark); }
.rt-personaje[aria-pressed='true'] {
  border-color: var(--app-primary);
  box-shadow: var(--rt-elev-2);
}
.rt-personaje-cara {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--rt-franja-soft);
}
.rt-personaje-cara img,
.rt-personaje-cara svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.rt-personaje-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.rt-personaje-txt strong { font-family: var(--rt-font-display); font-size: var(--rt-text-sm); }
.rt-personaje-txt small { color: var(--theme-text-secondary); font-size: var(--rt-text-xs); }
.rt-personaje-marca {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 1.5rem; height: 1.5rem;
  flex: none;
  border-radius: 50%;
  border: 0.125rem solid var(--theme-border);
  color: transparent;
}
.rt-personaje[aria-pressed='true'] .rt-personaje-marca {
  background: var(--app-success);
  border-color: var(--app-success);
  color: var(--app-on-success);
}
.rt-personaje-marca svg { width: 0.875rem; height: 0.875rem; }

/* Cobertura de un set de ilustraciones */
.rt-cobertura {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
  padding: var(--rt-space-3);
  border-radius: var(--rt-radius-sm);
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
  font-size: var(--rt-text-sm);
}
.rt-cobertura[data-vacio='true'] {
  background: var(--result-timeout-bg);
  border-color: transparent;
  color: var(--result-timeout-text);
}
.rt-cobertura svg { width: 1.25rem; height: 1.25rem; flex: none; }

/* ── Grilla de progreso: hábitos × días ──────────────────────────────────── */
.rt-heat {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--rt-space-2);
}
.rt-heat-cell {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: var(--rt-radius-sm);
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
  font-family: var(--rt-font-mono);
  font-size: var(--rt-text-xs);
  color: var(--theme-text-secondary);
}
.rt-heat-cell[data-level='1'] { background: var(--rt-franja-soft); }
.rt-heat-cell[data-level='2'] { background: var(--rt-franja-tint); }
.rt-heat-cell[data-level='3'] { background: var(--rt-franja); color: var(--rt-franja-on); border-color: transparent; }
.rt-heat-cell[data-today='true'] { outline: 0.125rem solid var(--app-primary); outline-offset: 0.0625rem; }

/* ── Analítica: barra comparativa ────────────────────────────────────────── */
/* No es un gráfico: es una lista con una barra por fila. Cuando el port a
   Angular necesite una curva o un histograma de verdad, va por ngx-echarts
   (ver ANGULAR.md §12). */
.rt-bar-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 3.5rem;
  align-items: center;
  gap: var(--rt-space-3);
  padding: var(--rt-space-2) 0;
}
.rt-bar-row + .rt-bar-row { border-top: 0.0625rem solid var(--theme-divider); }
.rt-bar-label {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
  min-width: 0;
}
.rt-bar-label > span:last-child { min-width: 0; }
.rt-bar-nombre {
  display: block;
  font-family: var(--rt-font-display);
  font-weight: var(--font-semibold);
  font-size: var(--rt-text-sm);
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.rt-bar-track {
  margin-top: 0.25rem;
  height: 0.5rem;
  border-radius: var(--rt-radius-pill);
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
  overflow: hidden;
}
.rt-bar-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rt-franja);
}
.rt-bar-row[data-alerta='true'] .rt-bar-track > i { background: var(--app-error); }
.rt-bar-row[data-alerta='medio'] .rt-bar-track > i { background: var(--app-warning); }
.rt-bar-valor {
  font-family: var(--rt-font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--rt-text-sm);
  text-align: right;
}

/* Barra apilada por franja, para el estudio día a día */
.rt-stack-bar {
  display: flex;
  height: 1.25rem;
  border-radius: var(--rt-radius-pill);
  overflow: hidden;
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
}
.rt-stack-bar > i { display: block; height: 100%; }
.rt-stack-bar > i[data-f='manana'] { background: var(--rt-manana); }
.rt-stack-bar > i[data-f='tarde'] { background: var(--rt-tarde); }
.rt-stack-bar > i[data-f='noche'] { background: var(--rt-noche); }

.rt-leyenda { display: flex; flex-wrap: wrap; gap: var(--rt-space-4); }
.rt-leyenda span { display: inline-flex; align-items: center; gap: var(--rt-space-2); font-size: var(--rt-text-xs); }
.rt-leyenda i {
  width: 0.75rem; height: 0.75rem; border-radius: 50%;
  background: var(--rt-franja);
}

/* Cabecera que sólo aparece en el papel */
.rt-solo-print { display: none; }

/* ── Módulo de impresión: hoja + preview ─────────────────────────────────── */
.rt-print-layout {
  display: grid;
  gap: var(--rt-space-5);
  grid-template-columns: minmax(min(100%, 18rem), 20rem) minmax(0, 1fr);
  align-items: start;
}
@media (max-width: 59.99rem) {
  .rt-print-layout { grid-template-columns: 1fr; }
}

.rt-sheet-stage {
  display: grid;
  place-items: start center;
  padding: var(--rt-space-5);
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-md);
  overflow: auto;
}
.rt-sheet {
  --sheet-w: 21cm;
  --sheet-h: 29.7cm;
  width: var(--sheet-w);
  min-height: var(--sheet-h);
  padding: 1.4cm;
  background: var(--rt-papel);
  color: var(--rt-tinta);
  box-shadow: var(--rt-elev-3);
  transform-origin: top center;
  display: flex;
  flex-direction: column;
  gap: 0.7cm;
}
.rt-sheet[data-orient='landscape'] { --sheet-w: 29.7cm; --sheet-h: 21cm; }
.rt-sheet-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.4cm;
  border-bottom: 0.06cm solid color-mix(in oklab, var(--rt-tinta) 22%, var(--rt-papel));
}
.rt-sheet-head h2 { font-size: 1.5rem; color: var(--app-primary); }
.rt-sheet-head .rt-meta { color: var(--rt-neutral-ink); }
.rt-sheet-grid { display: grid; gap: 0.45cm; flex: 1; }
.rt-sheet-item {
  display: flex;
  align-items: center;
  gap: 0.4cm;
  padding: 0.35cm;
  border: 0.06cm solid color-mix(in oklab, var(--rt-tinta) 22%, var(--rt-papel));
  border-radius: 0.3cm;
  break-inside: avoid;
}
.rt-sheet-item .rt-act-icon {
  background: var(--rt-franja-soft);
  color: var(--rt-franja-deep);
}
.rt-sheet-illus {
  width: 1.7cm;
  height: 1.7cm;
  flex: none;
  object-fit: cover;
  border-radius: 0.3cm;
  border: 0.04cm solid color-mix(in oklab, var(--rt-tinta) 18%, var(--rt-papel));
}
.rt-sheet-item .name {
  flex: 1;
  font-family: var(--rt-font-display);
  font-weight: var(--font-semibold);
  font-size: 1rem;
}
.rt-sheet-boxes { display: flex; gap: 0.25cm; }
.rt-sheet-box {
  width: 1.1cm; height: 1.1cm;
  display: grid; place-items: center;
  border: 0.06cm solid color-mix(in oklab, var(--rt-tinta) 38%, var(--rt-papel));
  border-radius: 0.2cm;
  color: color-mix(in oklab, var(--rt-tinta) 32%, var(--rt-papel));
}
.rt-sheet-box svg { width: 0.7cm; height: 0.7cm; }
.rt-sheet-box.star { border-style: dashed; }
.rt-sheet-foot {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-top: 0.3cm;
  border-top: 0.06cm solid color-mix(in oklab, var(--rt-tinta) 22%, var(--rt-papel));
  font-size: 0.75rem;
  color: var(--rt-neutral-ink);
}

/* ── Landing (marketing) ─────────────────────────────────────────────────── */
.rt-marketing-nav {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in oklab, var(--theme-bg) 88%, transparent);
  backdrop-filter: blur(0.75rem);
  border-bottom: 0.0625rem solid var(--theme-border);
}
.rt-container { max-width: var(--rt-content-max); margin-inline: auto; padding-inline: var(--rt-space-5); }
.rt-marketing-nav .rt-container {
  display: flex; align-items: center; gap: var(--rt-space-5);
  min-height: 4.5rem;
}
.rt-marketing-nav .rt-brand { color: var(--theme-text); }
.rt-marketing-nav nav { display: flex; gap: var(--rt-space-5); margin-left: auto; }
.rt-marketing-nav nav a { font-size: var(--rt-text-sm); color: var(--theme-text-secondary); }
.rt-marketing-nav nav a:hover { color: var(--app-on-header); }
@media (max-width: 47.99rem) { .rt-marketing-nav nav { display: none; } }

.rt-section { padding-block: clamp(3rem, 7vw, 6rem); }
.rt-section + .rt-section { border-top: 0.0625rem solid var(--theme-border); }
.rt-section-head { max-width: 42ch; margin-bottom: var(--rt-space-6); }

.rt-hero {
  display: grid;
  gap: var(--rt-space-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr));
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6.5rem);
}

.rt-pricing-card {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-4);
  padding: var(--rt-space-5);
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-md);
}
.rt-pricing-card[data-featured='true'] {
  border-color: var(--app-primary);
  border-width: 0.125rem;
  box-shadow: var(--rt-elev-2);
}
.rt-pricing-card .price {
  font-family: var(--rt-font-display);
  font-size: var(--rt-text-2xl);
  font-weight: var(--font-bold);
  color: var(--app-primary);
}
.rt-pricing-card ul { display: flex; flex-direction: column; gap: var(--rt-space-2); font-size: var(--rt-text-sm); }
.rt-pricing-card li { display: flex; gap: var(--rt-space-2); align-items: flex-start; }
.rt-pricing-card li svg { width: 1.125rem; height: 1.125rem; flex: none; margin-top: 0.15rem; color: var(--app-success); }

.rt-quote {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-4);
  padding: var(--rt-space-5);
  background: var(--rt-franja-soft);
  border-radius: var(--rt-radius-md);
}
.rt-quote blockquote {
  margin: 0;
  font-family: var(--rt-font-display);
  font-size: var(--rt-text-lg);
  line-height: 1.45;
  color: var(--theme-text);
}
.rt-quote figcaption { display: flex; align-items: center; gap: var(--rt-space-3); font-size: var(--rt-text-sm); }

/* Mock del producto en la landing — sin capturas remotas */
.rt-mock {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-3);
  padding: var(--rt-space-4);
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-lg);
  box-shadow: var(--rt-elev-3);
}
.rt-mock-bar {
  display: flex; align-items: center; gap: var(--rt-space-2);
  padding-bottom: var(--rt-space-3);
  border-bottom: 0.0625rem solid var(--theme-divider);
}
.rt-mock-bar i {
  width: 0.625rem; height: 0.625rem; border-radius: 50%;
  background: var(--theme-border);
}

.rt-footer {
  border-top: 0.0625rem solid var(--theme-border);
  padding-block: var(--rt-space-6);
  color: var(--theme-text-secondary);
  font-size: var(--rt-text-sm);
}

/* ── Marca ───────────────────────────────────────────────────────────────── */
/* El logo es PROVISIONAL — vive en js/brand.js. Ver la nota de ese archivo. */
.rt-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--rt-font-display);
  font-weight: var(--font-bold);
  letter-spacing: -0.02em;
  line-height: 1;
  color: inherit;
}
.rt-logo-glifo { width: 1.75em; height: 1.75em; flex: none; }
.rt-logo-word { white-space: nowrap; }

/* ── Chrome del header: marca y selector de perfil ───────────────────────── */
.rt-brand-glyph { display: grid; place-items: center; }
.rt-brand-glyph svg { width: 1.625rem; height: 1.625rem; }

.rt-header-perfil {
  display: inline-flex;
  align-items: center;
  gap: var(--rt-space-2);
  min-height: 2.75rem;
  padding: var(--rt-space-1) var(--rt-space-2);
  border: 0;
  border-radius: var(--rt-radius-pill);
  background: color-mix(in oklab, currentColor 12%, transparent);
  color: inherit;
  font-family: var(--rt-font-display);
  font-size: var(--rt-text-sm);
  font-weight: var(--font-semibold);
}
.rt-header-perfil:hover { background: color-mix(in oklab, currentColor 20%, transparent); }
.rt-header-perfil svg { width: 1.125rem; height: 1.125rem; }
.rt-header-perfil .rt-avatar { background: var(--theme-bg-elevated); color: var(--theme-header-text); }
@media (max-width: 30rem) { .rt-header-perfil-nombre { display: none; } }

.rt-perfil-menu {
  position: absolute;
  top: calc(var(--header-height) - 0.75rem);
  right: var(--rt-space-5);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-1);
  width: min(17rem, calc(100vw - 2rem));
  padding: var(--rt-space-2);
  background: var(--theme-bg-elevated);
  color: var(--theme-text);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-md);
  box-shadow: var(--rt-elev-3);
}
.rt-perfil-menu[hidden] { display: none; }
.rt-perfil-menu button,
.rt-perfil-menu a {
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
  min-height: 2.75rem;
  padding: var(--rt-space-2);
  border: 0;
  border-radius: var(--rt-radius-sm);
  background: transparent;
  text-align: left;
  font-size: var(--rt-text-sm);
  color: inherit;
}
.rt-perfil-menu button:hover,
.rt-perfil-menu a:hover { background: var(--theme-sidenav-hover); }
.rt-perfil-menu .pm-text { display: flex; flex-direction: column; line-height: 1.35; }
.rt-perfil-menu small { color: var(--theme-text-secondary); font-size: var(--rt-text-xs); }
.rt-perfil-menu svg { width: 1.25rem; height: 1.25rem; color: var(--app-primary-dark); }
.rt-perfil-menu button > svg { margin-left: auto; }

/* ── Pantalla de acceso ──────────────────────────────────────────────────── */
.rt-auth {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  min-height: 100vh;
  min-height: 100dvh;
}
.rt-auth-aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--rt-space-6);
  padding: var(--rt-space-6);
  background: var(--app-primary);
  color: var(--app-on-primary);
}
.rt-auth-aside h2 { color: inherit; }
.rt-auth-panel {
  display: grid;
  place-items: center;
  padding: var(--rt-space-6) var(--rt-space-5);
}
.rt-auth-panel > form { width: min(24rem, 100%); }
.rt-auth-tabs { display: flex; gap: var(--rt-space-1); margin-bottom: var(--rt-space-5); }
.rt-auth-tabs button {
  flex: 1;
  min-height: 2.75rem;
  border: 0;
  border-bottom: 0.1875rem solid var(--theme-border);
  background: transparent;
  color: var(--theme-text-secondary);
  font-family: var(--rt-font-display);
  font-weight: var(--font-semibold);
}
.rt-auth-tabs button[aria-selected='true'] { color: var(--app-primary); border-bottom-color: var(--app-primary); }