/* =============================================================================
   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: #f4b37a; box-shadow: var(--rt-elev-2); }

.rt-btn-franja { background: var(--rt-franja); color: var(--rt-franja-on); }
.rt-btn-franja:hover { background: #cf8741; 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: rgba(128, 128, 128, 0.14); }
.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 rgba(61, 50, 34, 0.45));
}

/* ── 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: #c6bdb0;
  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 {
  /* Reserva para foco y pulsación del primer/último control, sin recortarlos. */
  padding: var(--rt-space-2) 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; }

/* Filtro de personaje por retrato. La descripción de rasgos ("piel clara,
   ondulado rubio") no ayuda a reconocer a nadie: la cara sí. Del texto queda
   sólo el dato accionable — cuántos dibujos tiene ese personaje. */
.rt-caras-filtro {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-3);
}
.rt-cara-filtro {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rt-space-1);
  padding: var(--rt-space-2);
  min-width: 2.75rem;
  border: 0.125rem solid transparent;
  border-radius: var(--rt-radius-sm);
  background: transparent;
  cursor: pointer;
}
.rt-cara-filtro:hover { background: var(--theme-sidenav-hover); }
.rt-cara-filtro[aria-checked='true'] {
  border-color: var(--app-primary);
  background: var(--rt-manana-soft);
}
.rt-cara-filtro .cf-num {
  font-size: var(--rt-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--theme-text-secondary);
}
.rt-cara-filtro[aria-checked='true'] .cf-num {
  color: var(--rt-manana-deep);
  font-weight: 600;
}
.rt-cara-filtro[data-sin-arte='true'] .rt-avatar { opacity: 0.4; }
.rt-cara-filtro[data-sin-arte='true']:hover .rt-avatar,
.rt-cara-filtro[data-sin-arte='true'][aria-checked='true'] .rt-avatar { opacity: 1; }
/* Marca cuál es el personaje del chico que está activo en el perfil. */
.rt-cara-filtro .cf-perfil {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 50%;
  background: var(--app-secondary);
  color: var(--app-on-secondary);
}
.rt-cara-filtro .cf-perfil svg { width: 0.75rem; height: 0.75rem; }

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

/* Desglose por franja: el total no dice DÓNDE falta el arte. Alineado arriba
   porque ahora el bloque tiene dos líneas y centrarlo desalinea el ícono. */
.rt-cobertura { align-items: flex-start; }
.rt-cob-franjas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-2);
  margin-top: var(--rt-space-2);
}
.rt-cob-franja {
  display: inline-flex;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border-radius: var(--rt-radius-pill);
  background: var(--result-success-bg);
  color: var(--result-success-text);
  font-size: var(--rt-text-xs);
}
.rt-cob-franja[data-incompleta='true'] {
  background: var(--result-timeout-bg);
  color: var(--result-timeout-text);
}
.rt-cob-franja b { font-variant-numeric: tabular-nums; }

/* ── 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 #d1cec9;
}
.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: var(--fila-gap, 0.45cm);
  flex: 1;
  /* Ver el comentario del envoltorio de columnas en admin-impresion.html: sin
     `min-height:0` las filas `1fr` no se reparten el alto de la página, se
     estiran con el contenido y la hoja las recorta en silencio al imprimir. */
  min-height: 0;
}

/* Las medidas de la fila salen de `metricaFila()` en admin-impresion.html, que
   reparte el alto REAL de la página entre las filas que se pidieron. Los valores
   de acá son sólo el respaldo para cuando no hay variable — no son el default
   bueno, son el «que no explote». Cambiar estos números a mano no arregla nada:
   lo que manda es la cuenta. */
.rt-sheet-item {
  display: flex;
  align-items: center;
  gap: 0.4cm;
  padding: var(--fila-pad, 0.35cm);
  border: 0.06cm solid #d1cec9;
  border-radius: 0.3cm;
  break-inside: avoid;
  /* `min-height:0` y `overflow:hidden` son los que hacen que la promesa se
     cumpla: sin ellos un nombre largo estira la fila, la fila estira la hoja y
     la hoja se parte en dos páginas. */
  min-height: 0;
  overflow: hidden;
}
/* `--fila-figura` es el tamaño que la cuenta QUERRÍA darle al dibujo, y
   `max-height:100%` es el que la fila puede darle de verdad. Hacen falta los
   dos: la cuenta parte de un alto estimado de cabecera y pie, y cuando estima
   de más el dibujo sale más grande que su fila y la fila lo recorta. Con el
   tope y `aspect-ratio`, el dibujo se achica y sigue siendo cuadrado. */
.rt-sheet-item .rt-act-icon {
  background: var(--rt-franja-soft);
  color: var(--rt-franja-deep);
  width: auto;
  height: var(--fila-figura, 2.2rem);
  max-height: 100%;
  aspect-ratio: 1;
  flex: none;
}
.rt-sheet-illus {
  width: auto;
  height: var(--fila-figura, 1.7cm);
  max-height: 100%;
  aspect-ratio: 1;
  flex: none;
  object-fit: cover;
  border-radius: 0.3cm;
  border: 0.04cm solid #d9d6d3;
}
.rt-sheet-item .name {
  flex: 1;
  min-width: 0;
  font-family: var(--rt-font-display);
  font-weight: var(--font-semibold);
  font-size: var(--fila-texto, 1rem);
  line-height: 1.15;
  /* Dos líneas y corta. «Leer un cuento antes de dormir» en una fila apretada
     ocuparía tres y volvería a estirar la hoja. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* `height:100%` para que el `max-height:100%` de las casillas tenga contra qué
   medirse: con alto automático, el porcentaje del hijo no resuelve y la casilla
   se queda con su alto pedido aunque no entre en la fila. */
.rt-sheet-boxes { display: flex; gap: 0.25cm; height: 100%; align-items: center; }
/* El mismo tope que el dibujo: `--fila-caja` tiene un piso de 0,55cm para que
   el tilde siga siendo marcable, y en las combinaciones más apretadas —A5
   apaisada con 16 por página— la fila queda en 0,35cm y la casilla es más alta
   que su fila. Sin el tope, la fila la recortaba por arriba y por abajo y el
   cuadrado salía sin dos de sus lados. */
.rt-sheet-box {
  width: auto;
  height: var(--fila-caja, 1.1cm);
  max-height: 100%;
  aspect-ratio: 1;
  flex: none;
  display: grid; place-items: center;
  border: 0.06cm solid #b0aba4;
  border-radius: 0.2cm;
  color: #bcb8b2;
}
.rt-sheet-box svg { width: calc(var(--fila-caja, 1.1cm) * 0.62); height: calc(var(--fila-caja, 1.1cm) * 0.62); }
.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 #d1cec9;
  font-size: 0.75rem;
  color: var(--rt-neutral-ink);
}

/* ── Landing (marketing) ─────────────────────────────────────────────────── */
.rt-marketing-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 249, 240, 0.88);
  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); margin-inline-end: auto; }
.rt-marketing-nav nav { display: flex; gap: var(--rt-space-5); }
.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-resumen-avance { width: 100%; min-width: 0; }
  .rt-marketing-nav nav { display: none; }
  .rt-marketing-nav .rt-container { gap: var(--rt-space-2); padding-inline: var(--rt-space-3); }
  .rt-marketing-nav .rt-btn { flex-shrink: 0; padding-inline: var(--rt-space-3); }
}

.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: rgba(128, 128, 128, 0.12);
  color: inherit;
  font-family: var(--rt-font-display);
  font-size: var(--rt-text-sm);
  font-weight: var(--font-semibold);
}
.rt-header-perfil:hover { background: rgba(128, 128, 128, 0.2); }
.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(--rt-header-total) - 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); }

/* Cambiar el personaje del chico activo sin salir de la pantalla. Los ocho
   entran en dos filas de cuatro dentro del menú de 17rem: 4 × 2.75rem + 3 gaps
   = 12.5rem, con aire de sobra. */
.rt-perfil-menu .pm-sep {
  width: 100%;
  margin: var(--rt-space-2) 0;
  border: 0;
  border-top: 0.0625rem solid var(--theme-divider);
}
.rt-perfil-menu .pm-titulo,
.rt-perfil-menu .pm-nota {
  margin: 0;
  padding: 0 var(--rt-space-2);
  font-size: var(--rt-text-xs);
  color: var(--theme-text-secondary);
}
.rt-perfil-menu .pm-titulo { margin-bottom: var(--rt-space-2); }
.rt-perfil-menu .pm-nota { margin-top: var(--rt-space-2); }
.rt-perfil-menu .pm-caras {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-2);
  padding: 0 var(--rt-space-2);
}
/* Pisa el botón de fila del menú: acá es circular y de ancho fijo. */
.rt-perfil-menu .pm-cara {
  flex: none;
  width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.rt-perfil-menu .pm-cara[aria-checked='true'] {
  box-shadow: 0 0 0 0.1875rem var(--app-primary);
}
/* Sin ilustraciones: se puede elegir igual, pero se ve que está vacío. */
.rt-perfil-menu .pm-cara[data-sin-arte='true'] { opacity: 0.45; }
.rt-perfil-menu .pm-cara[data-sin-arte='true']:hover,
.rt-perfil-menu .pm-cara[data-sin-arte='true'][aria-checked='true'] { opacity: 1; }
.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); }

/* ── Onboarding ──────────────────────────────────────────────────────────── */
/*
   La pantalla de arranque después de restablecer. No monta el shell a
   propósito: no hay perfil todavía, así que un header con selector de chico y
   una navegación al panel del tutor no tendrían a qué apuntar.
*/
.rt-onb {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-6);
  width: min(38rem, 100%);
  margin: 0 auto;
  padding: var(--rt-space-6) var(--rt-space-5) var(--rt-space-7);
}
.rt-onb-head {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-5);
  align-items: center;
}

/* Los tres pasos. En pantalla angosta se cae el rótulo y quedan los números:
   el progreso se sigue leyendo y no fuerza scroll horizontal. */
.rt-onb-pasos {
  display: flex;
  gap: var(--rt-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--rt-text-sm);
  color: var(--theme-text-secondary);
}
.rt-onb-pasos li { display: flex; align-items: center; gap: var(--rt-space-2); }
.rt-onb-pasos li[aria-current='step'] { color: var(--rt-manana-deep); font-weight: 600; }
.rt-onb-num {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--theme-bg-surface);
  border: 0.0625rem solid var(--theme-border);
  font-variant-numeric: tabular-nums;
}
.rt-onb-pasos li[aria-current='step'] .rt-onb-num {
  background: var(--app-primary);
  border-color: transparent;
  color: var(--app-on-primary);
}
.rt-onb-pasos li[data-hecho='true'] .rt-onb-num {
  background: var(--app-secondary);
  border-color: transparent;
  color: var(--app-on-secondary);
}
.rt-onb-num svg { width: 1rem; height: 1rem; }

.rt-onb-paso {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-5);
  padding: var(--rt-space-6);
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-md);
  box-shadow: var(--rt-elev-1);
}
.rt-onb-paso[hidden] { display: none; }
.rt-onb-paso h1 { margin: 0; font-size: var(--rt-text-2xl); }
.rt-onb-paso h1:focus-visible { outline: none; }
.rt-onb-sub { margin: 0; color: var(--theme-text-secondary); text-wrap: pretty; }
.rt-onb-pie {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--rt-space-3);
  margin-top: var(--rt-space-2);
}
.rt-onb-tilde {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--result-success-bg);
  color: var(--result-success-text);
}
.rt-onb-tilde svg { width: 2rem; height: 2rem; }

.rt-onb-restaurar {
  margin: 0;
  text-align: center;
  font-size: var(--rt-text-sm);
  color: var(--theme-text-secondary);
}
.rt-onb-restaurar[hidden] { display: none; }

/* Botón que se lee como enlace: acción secundaria dentro de un párrafo. */
.rt-link {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--rt-manana-deep);
  text-decoration: underline;
  cursor: pointer;
}
.rt-link:hover { color: var(--app-primary-dark); }

/* ── Demo del login ──────────────────────────────────────────────────────── */
/*
   Muestra de qué trata la app en lugar de contarlo: tres actividades reales del
   día que se tildan en secuencia y terminan en estrella. Usa las ilustraciones
   del producto — el mismo dibujo que ve el chico.

   La animación corre SÓLO en pantallas anchas. En un teléfono el aside se apila
   arriba del formulario y una animación en loop empuja el campo de correo abajo
   del pliegue: ahí las tarjetas se muestran quietas y ya tildadas, que comunica
   lo mismo sin estorbar.
*/
.rt-auth-demo {
  display: flex;
  flex-direction: column;
  gap: var(--rt-space-4);
}
.rt-demo-cards { display: flex; gap: var(--rt-space-3); }
.rt-demo-card {
  position: relative;
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: var(--rt-space-2);
  background: var(--rt-papel);
  border-radius: var(--rt-radius-sm);
  box-shadow: var(--rt-elev-2);
}
.rt-demo-card img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: calc(var(--rt-radius-sm) - 0.25rem);
}
.rt-demo-card figcaption {
  margin-top: var(--rt-space-2);
  color: var(--rt-tinta);
  font-size: var(--rt-text-xs);
  font-weight: var(--font-semibold);
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* El tilde va sobre la esquina de la ilustración, como en la tarjeta real. */
.rt-demo-tilde {
  position: absolute;
  top: var(--rt-space-1);
  right: var(--rt-space-1);
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--app-secondary);
  color: var(--app-on-secondary);
  box-shadow: var(--rt-elev-1);
}
.rt-demo-tilde svg { width: 1rem; height: 1rem; stroke-width: 3; }

.rt-demo-premio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--rt-space-2);
  margin: 0;
  font-family: var(--rt-font-display);
  font-weight: var(--font-semibold);
}
.rt-demo-estrella {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: var(--rt-estrella);
}
.rt-demo-estrella svg { width: 100%; height: 100%; fill: currentColor; }

/* Estado quieto (mobile y reduced-motion): todo cumplido, sin movimiento. */
.rt-demo-tilde,
.rt-demo-estrella { opacity: 1; transform: none; }

@media (min-width: 60rem) {
  /* El ciclo dura 7,2s: 3 tildes escalonados cada 1,2s, la estrella a los 4,4s
     y el resto es la pausa antes de volver a empezar. */
  .rt-demo-card img { animation: rt-demo-apagado 7.2s var(--rt-ease) infinite; animation-delay: calc(var(--i) * 1.2s); }
  .rt-demo-tilde { animation: rt-demo-tilde 7.2s var(--rt-ease) infinite; animation-delay: calc(var(--i) * 1.2s); }
  .rt-demo-estrella { animation: rt-demo-estrella 7.2s var(--rt-ease) infinite; animation-delay: 4.4s; }
}

@keyframes rt-demo-apagado {
  0%, 8% { filter: grayscale(0.65) brightness(1.06); }
  16%, 92% { filter: none; }
  100% { filter: grayscale(0.65) brightness(1.06); }
}
@keyframes rt-demo-tilde {
  0%, 8% { opacity: 0; transform: scale(0.4); }
  18% { opacity: 1; transform: scale(1.18); }
  24%, 92% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.4); }
}
@keyframes rt-demo-estrella {
  0%, 4% { opacity: 0; transform: scale(0.3) rotate(-25deg); }
  14% { opacity: 1; transform: scale(1.3) rotate(6deg); }
  22%, 55% { opacity: 1; transform: scale(1) rotate(0); }
  70%, 100% { opacity: 0; transform: scale(0.3) rotate(-25deg); }
}

/* Un loop infinito en la pantalla de ingreso es exactamente lo que molesta con
   sensibilidad al movimiento: se congela en el estado cumplido. */
@media (prefers-reduced-motion: reduce) {
  .rt-demo-card img,
  .rt-demo-tilde,
  .rt-demo-estrella { animation: none !important; }
}

/* Selector de ciclo de cobro (planes.html) */
.rt-ciclo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rt-space-4);
  margin-bottom: var(--rt-space-5);
}

/* ── Recorrido "Cómo se usa" ─────────────────────────────────────────────── */
/*
   Lista TODAS las pantallas, también las que el plan no abre. Esconder lo que no
   está incluido es la peor versión de un paywall: nadie quiere lo que no sabe
   que existe. Lo que cambia es si el paso se puede ABRIR, no si se puede VER.
*/
.rt-tramo { margin-top: var(--rt-space-6); }
.rt-tramo-head { margin-bottom: var(--rt-space-4); }
.rt-tramo-head h2 {
  font-size: var(--rt-text-xl);
  color: var(--rt-franja-deep);
}
.rt-tramo-head p { margin: var(--rt-space-1) 0 0; }

.rt-pasos {
  display: grid;
  gap: var(--rt-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rt-paso {
  display: flex;
  align-items: flex-start;
  gap: var(--rt-space-4);
  padding: var(--rt-space-4);
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  border-radius: var(--rt-radius-md);
}
.rt-paso-icono {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: var(--rt-radius-sm);
  background: var(--rt-franja-soft);
  color: var(--rt-franja-deep);
}
.rt-paso-icono svg { width: 1.5rem; height: 1.5rem; }
.rt-paso-txt { flex: 1; min-width: 0; }
.rt-paso-txt h3 { font-size: var(--rt-text-md); }
.rt-paso-txt p { margin: var(--rt-space-2) 0 0; }
.rt-paso > .rt-btn { flex: none; align-self: center; }

/* Cerrado: se lee entero, pero se ve que hoy no se abre. */
.rt-paso[data-cerrado='true'] { background: var(--theme-bg-surface); }
.rt-paso[data-cerrado='true'] .rt-paso-icono {
  background: var(--result-timeout-bg);
  color: var(--result-timeout-text);
}

@media (max-width: 40rem) {
  /* En el teléfono el botón pasa abajo y ocupa el ancho: al costado quedaría
     de dos letras o empujaría el texto a una columna ilegible. */
  .rt-paso { flex-wrap: wrap; }
  .rt-paso > .rt-btn { width: 100%; align-self: stretch; }
}


/* ═══════════════════════════════════════════════════════════════════════
   RESPALDO PARA NAVEGADORES ANTERIORES A 2023
   Arriba cada valor quedó como color fijo, calculado con la misma
   matemática oklab que usa el navegador. Acá se restituye la mezcla para
   los que la entienden, así cambiar un token sigue arrastrando a sus
   derivados. Un navegador viejo ignora este bloque entero y se queda con
   los fijos: la misma pantalla, sin nada transparente.
   Generado desde scripts/colores.cjs · el gate es scripts/compat.cjs
   ═══════════════════════════════════════════════════════════════════════ */
@supports (color: color-mix(in oklab, red 50%, blue)) {
  .rt-btn-primary:hover {
    background: color-mix(in oklab, var(--app-primary) 78%, var(--rt-papel));
  }
  .rt-btn-franja:hover {
    background: color-mix(in oklab, var(--rt-franja) 82%, var(--rt-franja-on));
  }
  .rt-icon-btn:hover {
    background: color-mix(in oklab, currentColor 14%, transparent);
  }
  .rt-star svg {
    filter: drop-shadow(0 0 0.0625rem color-mix(in oklab, var(--rt-tinta) 45%, transparent));
  }
  .rt-switch .track {
    background: color-mix(in oklab, var(--rt-neutral-ink) 42%, var(--theme-bg));
  }
  .rt-sheet-head {
    border-bottom: 0.06cm solid color-mix(in oklab, var(--rt-tinta) 22%, var(--rt-papel));
  }
  .rt-sheet-item {
    border: 0.06cm solid color-mix(in oklab, var(--rt-tinta) 22%, var(--rt-papel));
  }
  .rt-sheet-illus {
    border: 0.04cm solid color-mix(in oklab, var(--rt-tinta) 18%, var(--rt-papel));
  }
  .rt-sheet-box {
    border: 0.06cm solid color-mix(in oklab, var(--rt-tinta) 38%, var(--rt-papel));
    color: color-mix(in oklab, var(--rt-tinta) 32%, var(--rt-papel));
  }
  .rt-sheet-foot {
    border-top: 0.06cm solid color-mix(in oklab, var(--rt-tinta) 22%, var(--rt-papel));
  }
  .rt-marketing-nav {
    background: color-mix(in oklab, var(--theme-bg) 88%, transparent);
  }
  .rt-header-perfil {
    background: color-mix(in oklab, currentColor 12%, transparent);
  }
  .rt-header-perfil:hover {
    background: color-mix(in oklab, currentColor 20%, transparent);
  }
}

/* ── Aviso de versión nueva ──────────────────────────────────────────────────
   Barra al pie: aparece cuando el service worker instaló una entrega nueva y la
   pestaña sigue con la vieja. No recarga sola —eso interrumpiría al chico en el
   medio de su rutina—: avisa y decide la persona. Ver js/shell.js.

   `bottom` lleva env(safe-area-inset-bottom) porque en un iPhone la barra de
   gestos se come el borde inferior y el botón quedaría debajo de ella, visible
   pero imposible de tocar. */
.rt-aviso-version {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--rt-space-4) + env(safe-area-inset-bottom, 0px));
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--rt-space-3);
  max-width: calc(100vw - var(--rt-space-5) * 2);
  padding: var(--rt-space-3) var(--rt-space-4);
  border-radius: var(--rt-radius-pill);
  background: var(--theme-bg-elevated);
  border: 0.0625rem solid var(--theme-border);
  box-shadow: var(--rt-elev-3);
  font-size: 0.875rem;
  color: var(--theme-text);
}
.rt-aviso-version > span { white-space: nowrap; }

/* En pantalla angosta la barra se apila: en un teléfono los tres elementos en
   fila dejan los botones de menos de 44px y se vuelven imposibles de acertar. */
@media (max-width: 30rem) {
  .rt-aviso-version {
    left: var(--rt-space-4);
    right: var(--rt-space-4);
    transform: none;
    max-width: none;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-radius: var(--rt-radius-lg);
  }
  .rt-aviso-version > span { flex: 1 1 100%; white-space: normal; }
}

/* ── Días de la semana en el armador ─────────────────────────────────────────
   Qué días se hace una actividad. El chip vive en el item de la rutina y abre
   el diálogo de las siete casillas.

   Las casillas son `<label>` con el input adentro y no botones: así el lector
   de pantalla las anuncia como casillas de verificación —que es lo que son— y
   el teclado las recorre y marca sin código nuestro. La inicial visible va con
   `aria-hidden` y al lado va el nombre completo en `.sr-only`: «L» a solas no
   se entiende leída en voz alta. */
.rt-chip-dias {
  flex: 0 0 auto;
  padding: 0.25rem 0.5rem;
  border-radius: var(--rt-radius-pill);
  border: 0.0625rem solid var(--theme-border);
  background: var(--theme-bg-surface);
  color: var(--theme-text-secondary);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.6;
  white-space: nowrap;
  cursor: pointer;
}
.rt-chip-dias:hover { color: var(--theme-text); border-color: var(--app-primary); }

.rt-dias {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rt-space-2);
  border: 0;
  padding: 0;
  margin: 0;
}
.rt-dia { position: relative; display: inline-flex; }

/* El input se esconde pero sigue existiendo para el teclado y el lector: si se
   usara `display:none` dejaría de ser enfocable y el diálogo sería inusable sin
   mouse. */
.rt-dia input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
}

/* El estado pintado va en el `<span>` siguiente al input y NO en el `<label>`
   con `:has()`. `:has()` habría sido más directo, pero Firefox lo tiene recién
   desde diciembre de 2023 y subiría el piso de navegador de todo el proyecto
   por un recuadro de un día de la semana. El hermano adyacente anda desde
   siempre. */
.rt-dia-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 2.75rem = 44px: la medida mínima para acertarle con el dedo. Siete de
     estos entran en el ancho de un teléfono con el `flex-wrap` de arriba. */
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--rt-radius-md);
  border: 0.0625rem solid var(--theme-border);
  background: var(--theme-bg-surface);
  color: var(--theme-text-secondary);
  font-weight: 700;
  cursor: pointer;
}
.rt-dia input:checked + .rt-dia-cara {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: var(--app-on-primary);
}
.rt-dia input:focus-visible + .rt-dia-cara {
  outline: 0.1875rem solid var(--app-primary);
  outline-offset: 0.125rem;
}

/* ── Aviso de licencia ───────────────────────────────────────────────────────
   Días de prueba que quedan, prueba terminada, pago a medias. Va arriba del
   contenido del panel del adulto.

   NUNCA aparece en las pantallas del chico — eso lo decide
   `rtLicencia.esZonaInfantil()`, no este CSS. Acá sólo se define cómo se ve
   cuando corresponde. */
.rt-aviso-licencia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rt-space-3);
  margin-bottom: var(--rt-space-5);
  padding: var(--rt-space-3) var(--rt-space-4);
  border-radius: var(--rt-radius-lg);
  border: 0.0625rem solid var(--theme-border);
  background: var(--theme-bg-surface);
  color: var(--theme-text-secondary);
  font-size: 0.875rem;
}
.rt-aviso-licencia > span { flex: 1 1 12rem; }
/* El tono de aviso reusa el token de «atención» del sistema, no un color
   nuevo: dos amarillos distintos en la misma app se leen como un error. */
.rt-aviso-licencia.es-warn {
  border-color: var(--result-timeout-text);
  background: var(--result-timeout-bg);
  color: var(--result-timeout-text);
}

/* ── Mi plan ─────────────────────────────────────────────────────────────── */
.rt-plan-estado {
  display: flex;
  align-items: baseline;
  gap: var(--rt-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--rt-space-3);
}
.rt-plan-estado strong { font-size: var(--rt-text-xl); }

.rt-comparacion { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.rt-comparacion th,
.rt-comparacion td {
  padding: var(--rt-space-2) var(--rt-space-3);
  text-align: start;
  border-bottom: 0.0625rem solid var(--theme-border);
}
.rt-comparacion th { color: var(--theme-text-secondary); font-weight: 600; }
.rt-comparacion td:first-child { color: var(--theme-text-secondary); }
.rt-comparacion tr:last-child td { border-bottom: 0; }
/* En un teléfono la tabla de tres columnas obliga a scroll horizontal; el
   contenedor lo permite en vez de romper la grilla de la tarjeta. */
.rt-comparacion-caja { overflow-x: auto; }

/* Contraste de acciones y sus estados, incluido el respaldo sin color-mix. */
.rt-btn-primary {
  background: var(--rt-action-bg); color: var(--rt-action-text);
  text-shadow: var(--rt-action-shadow);
}
.rt-btn-primary:hover, .rt-btn-primary:focus-visible {
  background: var(--rt-action-hover); color: var(--rt-action-text);
}
.rt-btn-primary:active { background: var(--rt-action-active); }
.rt-btn-franja, .rt-segment button[aria-pressed='true'] {
  background: var(--rt-action-franja); color: #ffffff;
  text-shadow: var(--rt-action-shadow);
}
.rt-btn-franja:hover, .rt-btn-franja:focus-visible,
.rt-segment button[aria-pressed='true']:hover {
  background: var(--rt-action-franja-hover); color: #ffffff;
}
[data-theme='dark'] .rt-btn-outline:hover,
[data-theme='dark'] .rt-btn-outline:focus-visible,
[data-theme='dark'] .rt-btn-ghost:hover,
[data-theme='dark'] .rt-btn-ghost:focus-visible {
  background: var(--theme-sidenav-subitem-hover); color: var(--theme-text);
}
[data-theme='dark'] .rt-btn-danger,
[data-theme='dark'] .rt-btn-danger:hover,
[data-theme='dark'] .rt-btn-danger:focus-visible,
[data-theme='dark'] .rt-error { color: #ffb4ab; border-color: #ffb4ab; }
[data-theme='dark'] #s-peor { color: #ffb4ab !important; }
[data-theme='dark'] .rt-link,
[data-theme='dark'] .rt-onb-pasos li[aria-current='step'],
[data-theme='dark'] .rt-cara-filtro[aria-checked='true'] .cf-num { color: #f6bd8b; }
[data-theme='dark'] .rt-link:hover,
[data-theme='dark'] .rt-link:focus-visible { color: #ffd8b7; }
[data-theme='dark'] .rt-marketing-nav nav a:hover { color: var(--theme-text); }

[data-theme='dark'] .rt-cara-filtro[aria-checked='true'] { background: var(--theme-sidenav-active-bg); }

/* Pares de identidad aprobados: mostrar una mitad sin alterar el archivo. */
.rt-cara-par { position: relative; overflow: hidden; border-radius: 50%; }
.rt-cara-par > img { position: absolute; inset: 0 auto auto 0; width: 200%; max-width: none; height: 100%; display: block; object-fit: fill; }
.rt-cara-par[data-expresion='feliz'] > img { left: -100%; }
.rt-personaje-cara .rt-cara-par > img { width: 200%; }
.rt-saludo-cara { width: 10rem; height: 10rem; margin: 0 auto 1rem; }
.rt-expresion-dialog .rt-dialog-body { text-align: center; }
.rt-expresiones { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.rt-expresiones button { min-height: 4rem; flex: 1 1 0; min-width: 0; border: 2px solid var(--theme-border); justify-content: center; }
.rt-expresiones button[aria-pressed='true'] { border: 2px solid var(--theme-text); background: var(--theme-sidenav-active-bg); color: var(--theme-text); }

/* Controles de rutina: cada franja ocupa un tercio del ancho disponible. */
.rt-armador-acciones { align-items: flex-end; }
@media (max-width: 47.99rem) {
  .rt-armador-acciones { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: 0.75rem; }
  .rt-armador-acciones .rt-field { width: 100%; min-width: 0 !important; }
  .rt-armador-acciones .rt-btn { width: 100%; min-height: 2.75rem; }
  .rt-rutina-controles { flex-direction: column; align-items: stretch; }
  .rt-rutina-controles .rt-segment { display: flex; width: 100%; }
  #barra-franja button, #barra-vista button { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 0.25rem; gap: 0.25rem; }
  #barra-franja button { flex-wrap: wrap; }
  #barra-franja button .rt-num { flex-basis: 100%; }
}

/* Preferencias: mismo acento de marca en ambos temas. */
#seg-tema, #seg-vista { background: var(--rt-selector-bg); }
#seg-tema button, #seg-vista button { color: var(--rt-selector-text); }
#seg-tema button:hover, #seg-vista button:hover { color: var(--rt-selector-hover-text); }
#seg-tema button[aria-pressed='true'], #seg-vista button[aria-pressed='true'] {
  background: var(--rt-selector-selected-bg);
  color: var(--rt-selector-selected-text);
  text-shadow: var(--rt-selector-selected-shadow);
}
#seg-tema button[aria-pressed='true']:hover, #seg-vista button[aria-pressed='true']:hover {
  background: var(--rt-selector-selected-hover);
}

/* Recorrido del planificador: utiliza la paleta del tema. */
.rt-guia-planificador .rt-dialog-foot { flex-wrap: wrap; }
.rt-guia-planificador h2 { font-size: var(--rt-text-xl); }
.rt-guia-destino { outline: 3px solid var(--rt-action-bg); outline-offset: 4px; }
.rt-guia-continuar { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); right: 1rem; z-index: 80; box-shadow: var(--rt-elev-3); }
.rt-guia-continuar[hidden] { display: none; }
.rt-chip-dias { white-space: normal; max-width: 9rem; text-align: center; }
@media (max-width: 40rem) {
  .rt-guia-planificador .rt-dialog-foot .rt-btn { flex: 1 1 auto; }
  .rt-chip-dias { max-width: 6rem; }
}
.rt-sumar-flotante {
  position: fixed; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 79; width: 3.5rem; height: 3.5rem; min-height: 3.5rem;
  padding: 0; border-radius: 50%; justify-content: center; box-shadow: var(--rt-elev-3);
}
.rt-sumar-flotante[hidden], body:has(dialog[open]) .rt-sumar-flotante { display: none; }
.rt-con-sumar-flotante .rt-guia-continuar { bottom: calc(max(1rem, env(safe-area-inset-bottom)) + 4rem); }
body[data-screen='admin-rutinas'] .rt-main { padding-bottom: 6rem; }
/* Tarjetas estrechas: mantener los días debajo también en columnas de escritorio. */
  [data-screen='admin-rutinas'] .rt-task.rt-drag {
    display: grid; grid-template-columns: 2rem 2rem minmax(0, 1fr) 2rem;
    gap: .5rem; align-items: center;
  }
  [data-screen='admin-rutinas'] .rt-task-body { grid-column: 3; min-width: 0; }
  [data-screen='admin-rutinas'] .rt-task-title { overflow-wrap: normal; word-break: normal; }
  [data-screen='admin-rutinas'] .rt-chip-dias { grid-row: 2; grid-column: 2 / 5; justify-self: start; max-width: 100%; }
  [data-screen='admin-rutinas'] [data-quitar] { grid-row: 1; grid-column: 4; }

/* Foco interno: no amplía el área desplazable al elegir días de la última fila. */
#dlg-dias .rt-dia input:focus-visible { outline: none; }
#dlg-dias .rt-dia input:focus-visible + .rt-dia-cara {
  outline: .1875rem solid var(--theme-text);
  outline-offset: -.25rem;
}
/* Menú de opciones con tokens compartidos y foco de teclado visible. */
select.rt-select[hidden] { display: none; }
.rt-select-trigger { display: flex; justify-content: space-between; align-items: center; gap: .75rem; text-align: start; background-image: none; cursor: pointer; }
.rt-select-trigger svg { width: 1.25rem; height: 1.25rem; flex: none; }
.rt-select-menu { position: fixed; inset: auto; margin: 0; padding: .375rem; box-sizing: border-box; border: 1px solid var(--theme-border); border-radius: var(--rt-radius-md); background: var(--theme-bg-elevated); color: var(--theme-text); box-shadow: var(--rt-elev-3); overflow-y: auto; }
.rt-select-option { display: block; width: 100%; min-height: 2.75rem; padding: .65rem .85rem; border: 0; border-radius: var(--rt-radius-sm); background: transparent; color: var(--theme-text); text-align: start; font: inherit; cursor: pointer; }
.rt-select-option:hover, .rt-select-option:focus-visible { background: var(--theme-bg-surface); outline: 2px solid var(--rt-action-bg); outline-offset: -2px; }
.rt-select-option[aria-selected='true'] { background: var(--rt-selector-selected-bg); color: var(--rt-selector-selected-text); font-weight: 700; }
.rt-select-option:disabled { color: var(--theme-text-disabled); cursor: default; }

/* El gesto sobre el tirador mueve la tarjeta; el resto permite desplazar la página. */
[data-drag-handle] { touch-action: none; }

/* El wrapper reserva el ancho visible, no el A4 sin escalar. Sólo pantalla. */
@media screen {
  .rt-sheet-stage > #hojas { width: var(--preview-sheet-width, auto); min-width: 0; }
  .rt-sheet-stage .rt-sheet { transform-origin: top left; }
}

/* El arte se puede explorar sin modificar la rutina ni el personaje. */
.rt-arte-abrir { padding:0; border:0; background:transparent; border-radius:var(--rt-radius-sm); cursor:zoom-in; flex:none; }
.rt-arte-abrir:focus-visible { outline:3px solid var(--rt-franja-deep); outline-offset:3px; }
.rt-arte-dialog { width:min(42rem, calc(100vw - 2rem)); }
.rt-arte-dialog .rt-dialog-head { justify-content:space-between; gap:1rem; }
.rt-arte-ampliada { display:block; width:100%; max-height:56vh; max-height:56dvh; object-fit:contain; border-radius:var(--rt-radius-md); }
.rt-arte-descripcion { margin:var(--rt-space-4) 0 0; }
.rt-tarjeton .rt-illus-hero { width:min(26rem, 100%, 48svh); object-fit:contain; }

/* Un único scroll exterior sólo cuando el contenido no entra. */
.rt-arte-dialog[open] { width:min(42rem, 92vw); max-height:90vh; max-height:90dvh; }
.rt-arte-dialog .rt-dialog-body { max-height:none; overflow:visible; padding-bottom:var(--rt-space-5); }

.rt-duracion-input { min-height:3.5rem; font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums; text-align:center; }

/* Lectura cómoda de actividades en teléfonos, sin alterar hojas impresas. */
@media screen and (max-width: 40rem) {
  #resultados .rt-card, .rt-tarjeton, .rt-task {
    --rt-text-xs: .9375rem;
    --rt-text-sm: 1rem;
    --rt-text-lg: 1.25rem;
  }
  #resultados .rt-card-sub, #resultados .rt-meta, .rt-task-meta { line-height:1.5; }
  #resultados .rt-btn, .rt-tarjeton .rt-btn { font-size:1rem; min-height:3rem; }
  #resultados .rt-chip { white-space:normal; line-height:1.4; }
  .rt-tarjeton > .rt-muted { font-size:1.125rem; line-height:1.5; }
  .rt-tarjeton .rt-chip { font-size:1rem; line-height:1.4; }
}
@media screen and (max-width: 40rem) {
  .rt-tarjeton .rt-btn-lg { font-size:1.125rem; line-height:1.4; white-space:normal; }
}

@media screen and (max-width: 40rem) {
  .rt-tarjeton > .rt-chip { font-size:1.125rem; font-weight:600; line-height:1.4; padding:.625rem .875rem; gap:.5rem; max-width:100%; white-space:normal; justify-content:center; text-align:center; }
  .rt-tarjeton > .rt-chip svg { width:1.25rem; height:1.25rem; }
}
@media screen and (max-width: 40rem) {
  .rt-perfil-menu { width:min(19rem, calc(100vw - 2rem)); max-height:calc(100dvh - var(--rt-header-total) - 1rem); overflow-y:auto; }
  .rt-perfil-menu .pm-caras { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.625rem; padding:.375rem; }
  .rt-perfil-menu .pm-cara { width:3.5rem; height:3.5rem; min-height:3.5rem; justify-self:center; }
  .rt-perfil-menu .pm-cara .rt-avatar { width:3rem; height:3rem; }
  .rt-perfil-menu > button .rt-avatar { width:2.75rem; height:2.75rem; }
}

/* Los siete días comparten una fila, incluso en teléfonos estrechos. */
#dlg-dias .rt-dias { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:clamp(.125rem, 1vw, .5rem); min-width:0; width:100%; }
#dlg-dias .rt-dia { min-width:0; justify-content:center; }
#dlg-dias .rt-dia-cara { inline-size:100%; max-inline-size:2.75rem; min-inline-size:0; block-size:2.75rem; font-size:1rem; }

/* Gestión de activaciones: nombres y acciones legibles también en móvil. */
.rt-device-row { border-top:1px solid var(--theme-border); padding:1rem 0; overflow-wrap:anywhere; }
.rt-device-row .rt-btn { margin:.4rem .4rem 0 0; white-space:normal; }
.rt-device-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1rem; padding:.25rem; }
.rt-device-block { position:fixed; inset:0; z-index:10000; background:var(--theme-bg, #fff); color:var(--theme-text, #332d25); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:1rem; padding:2rem; }
.rt-device-block p { max-width:32rem; }

#mis-dispositivos { scroll-margin-top:6rem; color:var(--theme-text); }

/* Arrastre centrado en la tarjeta completa, con espacio real para la ilustración. */
[data-screen='admin-rutinas'] .rt-task.rt-drag { grid-template-columns:2.75rem 3.5rem minmax(0,1fr) 2.75rem; }
[data-screen='admin-rutinas'] .rt-drag-handle { grid-column:1; grid-row:1 / 4; align-self:center; justify-self:center; }
[data-screen='admin-rutinas'] .rt-drag-handle svg { width:1.75rem; height:1.75rem; }
[data-screen='admin-rutinas'] .rt-task.rt-drag > .rt-illus,
[data-screen='admin-rutinas'] .rt-task.rt-drag > .rt-act-icon { grid-column:2; grid-row:1; }
[data-screen='admin-rutinas'] .rt-task.rt-drag .rt-task-body { grid-row:1; }
[data-screen='admin-rutinas'] .rt-task.rt-drag [data-duracion] { grid-row:2; }
[data-screen='admin-rutinas'] .rt-task.rt-drag [data-dias] { grid-row:3; }

.rt-edad-pasos{display:inline-flex;align-items:center;gap:.5rem;max-width:100%}
.rt-edad-pasos button{width:3rem;height:3rem;flex:none;border:1px solid var(--theme-border);border-radius:var(--rt-radius-md);background:var(--theme-bg-elevated);color:var(--theme-text);font:inherit;font-size:1.5rem;cursor:pointer;touch-action:manipulation}
.rt-edad-pasos button:disabled{opacity:.4;cursor:default}
.rt-edad-pasos button:focus-visible{outline:2px solid var(--rt-action-bg);outline-offset:2px}
.rt-edad-pasos input{width:4rem!important;min-width:0;text-align:center;font-size:1.25rem;font-weight:600;appearance:textfield;-moz-appearance:textfield}
.rt-edad-pasos input::-webkit-inner-spin-button,.rt-edad-pasos input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}