/*
 * Componentes de Rapiid (manual de marca v1.2; los de producto desde la 1.2).
 * Usa las variables de tokens.css. Lo usan el manual y la web: si cambias un
 * componente aquí, cambia en los dos.
 */

.r-texto { font-family: var(--r-fuente); color: var(--r-texto-principal); }
/* «hidden» siempre oculta, aunque el componente defina su propio display. */
[hidden] { display: none !important; }

/* --- Botones ------------------------------------------------------------- */
.r-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: var(--r-radio-pequeno);
  border: 2px solid transparent; font: 700 1rem/1 var(--r-fuente);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.r-boton:focus-visible { outline: none; box-shadow: 0 0 0 4px var(--r-foco); }
.r-boton[disabled], .r-boton.es-inactivo {
  background: var(--r-gris-200); border-color: var(--r-gris-200); color: var(--r-gris-500); cursor: not-allowed;
}
.r-boton--chico { min-height: 40px; padding: 0 16px; font-size: .9375rem; }

/* Principal: Azul Rapiid con texto blanco (3,8:1), siempre en texto grande (19 px
   negrita, nivel AA para texto grande). La versión chica usa el marino. */
.r-boton--principal { background: var(--r-azul); color: #FFFFFF; font-size: 1.1875rem; min-height: 52px; }
.r-boton--principal:hover { background: #1676C2; }
.r-boton--principal:active { background: #1569AE; }
.r-boton--principal.r-boton--chico { background: var(--r-marino); font-size: .9375rem; min-height: 40px; }
.r-boton--principal.r-boton--chico:hover { background: var(--r-pizarra); }

/* Celeste: sobre fondos oscuros (marino o degradado de marca), con texto marino (5,3:1). */
.r-boton--celeste { background: var(--r-celeste); color: var(--r-marino); }
.r-boton--celeste:hover { background: #4BB9E8; }

/* Oscuro: marino con texto blanco (14:1). Para la acción principal sobre celeste. */
.r-boton--oscuro { background: var(--r-marino); color: #FFFFFF; }
.r-boton--oscuro:hover { background: var(--r-pizarra); }
.r-boton--oscuro:active { background: #011B45; }

/* Secundario: borde marino, fondo transparente. */
.r-boton--secundario { background: transparent; border-color: var(--r-marino); color: var(--r-marino); }
.r-boton--secundario:hover { background: var(--r-hover-celeste); }
.r-boton--secundario:active { background: var(--r-seleccion-celeste); }

/* Sobre fondo oscuro: blanco con texto marino. */
.r-boton--claro { background: #FFFFFF; color: var(--r-marino); }
.r-boton--claro:hover { background: var(--r-azul-50); }

/* Texto: un enlace con forma de botón. */
.r-boton--texto { background: transparent; color: var(--r-marino); padding: 0 8px; text-decoration: underline; text-underline-offset: 3px; }
.r-boton--texto:hover { background: var(--r-hover-celeste); }

/* --- Enlaces -------------------------------------------------------------- */
.r-enlace { color: var(--r-marino); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.r-enlace:hover { color: var(--r-azul-800); }
button.r-enlace { background: none; border: 0; padding: 0; font: inherit; font-weight: 500; cursor: pointer; }

/* --- Tarjetas ------------------------------------------------------------- */
.r-tarjeta {
  background: var(--r-fondo-tarjeta); border: 1px solid var(--r-gris-200);
  border-radius: var(--r-radio-grande); padding: 24px; box-shadow: var(--r-sombra-sm);
}
.r-tarjeta__icono {
  width: 48px; height: 48px; border-radius: var(--r-radio-medio); background: var(--r-azul);
  display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF;
}
.r-tarjeta__titulo { margin: 16px 0 8px; font: 700 1.25rem/1.3 var(--r-fuente); color: var(--r-marino); }
.r-tarjeta__texto { margin: 0; font: 400 1rem/1.5 var(--r-fuente); color: var(--r-texto-secundario); }

/* --- Campos de formulario ------------------------------------------------- */
.r-campo { display: flex; flex-direction: column; gap: 6px; font-family: var(--r-fuente); }
.r-campo__etiqueta { font: 500 .875rem/1.4 var(--r-fuente); color: var(--r-texto-principal); }
.r-campo__control {
  min-height: 48px; padding: 0 16px; border: 1px solid var(--r-gris-300); border-radius: var(--r-radio-pequeno);
  background: #FFFFFF; font: 400 1rem/1.5 var(--r-fuente); color: var(--r-texto-principal);
}
.r-campo__control::placeholder { color: var(--r-gris-500); }
.r-campo__control:focus { outline: none; border-color: var(--r-celeste); box-shadow: 0 0 0 4px var(--r-foco); }
.r-campo--error .r-campo__control { border-color: var(--r-error); }
.r-campo__ayuda { font: 400 .75rem/1.45 var(--r-fuente); color: var(--r-texto-secundario); }
.r-campo--error .r-campo__ayuda { color: var(--r-error); }

/* --- Preguntas frecuentes (acordeón) -------------------------------------- */
.r-pregunta {
  background: #FFFFFF; border: 1px solid var(--r-gris-200); border-radius: var(--r-radio-medio);
  font-family: var(--r-fuente);
}
.r-pregunta[open] { border-color: var(--r-celeste); box-shadow: var(--r-sombra-sm); }
.r-pregunta > summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 18px 20px; font: 700 1.0625rem/1.4 var(--r-fuente); color: var(--r-marino);
}
.r-pregunta > summary::-webkit-details-marker { display: none; }
.r-pregunta > summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-top: -4px;
  border-right: 2.5px solid var(--r-celeste); border-bottom: 2.5px solid var(--r-celeste); transform: rotate(45deg);
}
.r-pregunta[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.r-pregunta__respuesta { padding: 0 20px 18px; font: 400 1rem/1.5 var(--r-fuente); color: var(--r-texto-secundario); }

/* --- Chips (país, moneda, etiquetas) -------------------------------------- */
.r-chip {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-radio-medio);
  background: #FFFFFF; border: 1px solid var(--r-gris-200); box-shadow: var(--r-sombra-xs);
  font: 400 1rem/1.2 var(--r-fuente); color: var(--r-texto-secundario);
}
.r-chip strong { color: var(--r-marino); font-weight: 700; }
.r-etiqueta {
  display: inline-block; padding: 4px 10px; border-radius: var(--r-radio-pastilla);
  font: 600 .75rem/1.4 var(--r-fuente);
}
.r-etiqueta--exito { background: var(--r-exito-fondo); color: var(--r-exito); }
.r-etiqueta--aviso { background: var(--r-aviso-fondo); color: var(--r-aviso); }
.r-etiqueta--error { background: var(--r-error-fondo); color: var(--r-error); }
.r-etiqueta--info { background: var(--r-info-fondo); color: var(--r-marino); }

/* --- Textos de sección ---------------------------------------------------- */
.r-antetitulo {
  font: 700 .875rem/1.3 var(--r-fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--r-marino);
}
.r-titulo-display { font: 700 var(--r-display)/1.1 var(--r-fuente); color: var(--r-marino); letter-spacing: -.01em; }
.r-titulo-display em { font-style: normal; color: var(--r-azul); }

/* =========================================================================
 * Componentes de producto (v1.2, 22-10-2026): la cuenta web y la app.
 * Primero el celular; WCAG 2.2 AA; un objetivo táctil mínimo de 44-48 px.
 * ========================================================================= */

/* --- Encabezado y navegación de la cuenta --------------------------------- */
.r-app-encabezado {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 60px; padding: 0 16px; background: #FFFFFF; border-bottom: 1px solid var(--r-gris-200);
}
.r-app-encabezado__titulo { font: 700 1.125rem/1.3 var(--r-fuente); color: var(--r-marino); }
/* Barra inferior en el celular; columna lateral desde 900 px. */
.r-nav {
  position: fixed; inset: auto 0 0 0; z-index: 10; display: flex; justify-content: space-around;
  background: #FFFFFF; border-top: 1px solid var(--r-gris-200); padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
}
.r-nav__item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 48px; padding: 6px 2px;
  border-radius: var(--r-radio-medio); font: 600 .75rem/1.2 var(--r-fuente); color: var(--r-texto-secundario);
  text-decoration: none; cursor: pointer; background: none; border: 0;
}
.r-nav__item svg { width: 24px; height: 24px; }
.r-nav__item[aria-current="page"] { color: var(--r-marino); background: var(--r-azul-50); }
.r-nav__item:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--r-foco); }
@media (min-width: 900px) {
  .r-nav {
    inset: 0 auto 0 0; width: 240px; flex-direction: column; justify-content: flex-start; gap: 4px;
    padding: 88px 12px 24px; border-top: 0; border-right: 1px solid var(--r-gris-200);
  }
  .r-nav__item { flex: none; flex-direction: row; gap: 12px; padding: 12px 14px; font-size: .9375rem; }
}

/* --- Pasos (por ejemplo, los de un envío) ---------------------------------- */
.r-pasos { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.r-pasos li { flex: 1; height: 6px; border-radius: var(--r-radio-pastilla); background: var(--r-gris-200); }
.r-pasos li.es-hecho, .r-pasos li[aria-current="step"] { background: var(--r-azul); }
.r-pasos__texto { margin: 8px 0 0; font: 600 .8125rem/1.3 var(--r-fuente); color: var(--r-texto-secundario); }

/* --- Avisos en la página --------------------------------------------------- */
.r-aviso {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--r-radio-medio);
  border: 1px solid transparent; font: 400 .9375rem/1.45 var(--r-fuente);
}
.r-aviso svg { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.r-aviso b { display: block; margin-bottom: 2px; }
.r-aviso--info { background: var(--r-info-fondo); border-color: var(--r-azul-200); color: var(--r-marino); }
.r-aviso--exito { background: var(--r-exito-fondo); border-color: #B7E1C6; color: var(--r-exito); }
.r-aviso--aviso { background: var(--r-aviso-fondo); border-color: #F5D3A8; color: var(--r-aviso); }
.r-aviso--error { background: var(--r-error-fondo); border-color: #F5C2C0; color: var(--r-error); }

/* --- Resumen de dinero (cuánto llega primero) ------------------------------ */
.r-resumen { background: #FFFFFF; border: 1px solid var(--r-gris-200); border-radius: var(--r-radio-grande); overflow: hidden; }
.r-resumen__destacado { padding: 20px; background: linear-gradient(135deg, var(--r-azul-50), #EAF6FC); }
.r-resumen__etiqueta { font: 500 .875rem/1.3 var(--r-fuente); color: var(--r-texto-secundario); }
.r-resumen__monto { font: 800 2rem/1.15 var(--r-fuente); color: var(--r-marino); }
.r-resumen__filas { margin: 0; padding: 8px 20px 16px; }
.r-resumen__filas div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--r-gris-100); }
.r-resumen__filas div:last-child { border-bottom: 0; }
.r-resumen__filas dt { font: 400 .9375rem/1.4 var(--r-fuente); color: var(--r-texto-secundario); }
.r-resumen__filas dd { margin: 0; font: 600 .9375rem/1.4 var(--r-fuente); color: var(--r-texto-principal); text-align: right; }

/* --- Listas (envíos, destinatarios, dispositivos) -------------------------- */
.r-lista { list-style: none; margin: 0; padding: 0; background: #FFFFFF; border: 1px solid var(--r-gris-200); border-radius: var(--r-radio-grande); overflow: hidden; }
.r-lista__fila {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px;
  border: 0; border-bottom: 1px solid var(--r-gris-100); background: none; text-align: left; cursor: pointer;
  font-family: var(--r-fuente); color: inherit; text-decoration: none;
}
.r-lista li:last-child .r-lista__fila { border-bottom: 0; }
.r-lista__fila:hover { background: var(--r-hover-celeste); }
.r-lista__fila:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--r-foco); }
.r-lista__avatar {
  flex: none; width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center;
  background: var(--r-azul-50); color: var(--r-marino); font: 700 .9375rem/1 var(--r-fuente);
}
.r-lista__texto { flex: 1; min-width: 0; }
.r-lista__titulo { display: block; font: 600 1rem/1.3 var(--r-fuente); color: var(--r-texto-principal); }
.r-lista__detalle { display: block; font: 400 .8125rem/1.4 var(--r-fuente); color: var(--r-texto-secundario); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-lista__fin { flex: none; text-align: right; font: 600 .9375rem/1.3 var(--r-fuente); color: var(--r-marino); }

/* --- Código de un solo uso (6 casillas) ------------------------------------ */
.r-codigo { display: flex; gap: 8px; }
/* Hasta 48 px cada casilla; en un celular angosto se achican para que entren las seis. */
.r-codigo input {
  flex: 1 1 0; min-width: 0; max-width: 48px; height: 56px; padding: 0; text-align: center; border: 1px solid var(--r-gris-300); border-radius: var(--r-radio-pequeno);
  font: 700 1.5rem/1 var(--r-fuente); color: var(--r-marino); background: #FFFFFF;
}
.r-codigo input:focus { outline: none; border-color: var(--r-celeste); box-shadow: 0 0 0 4px var(--r-foco); }

/* --- Estado vacío y de carga ------------------------------------------------ */
.r-vacio { text-align: center; padding: 32px 16px; color: var(--r-texto-secundario); font-family: var(--r-fuente); }
.r-vacio__icono { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 999px; display: grid; place-items: center; background: var(--r-azul-50); color: var(--r-azul); }
.r-vacio__titulo { margin: 0 0 6px; font: 700 1.125rem/1.3 var(--r-fuente); color: var(--r-marino); }
.r-esqueleto { display: block; height: 14px; border-radius: 6px; background: linear-gradient(90deg, var(--r-gris-100), var(--r-gris-200), var(--r-gris-100)); background-size: 200% 100%; animation: r-esqueleto 1.4s ease infinite; }
@keyframes r-esqueleto { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .r-esqueleto { animation: none; } }

/* --- Movimiento (v1.2): corto, suave y opcional ---------------------------- */
:root { --r-mov-corto: 150ms; --r-mov-medio: 250ms; --r-mov-largo: 450ms; --r-mov-curva: cubic-bezier(.2, .8, .2, 1); }
@media (prefers-reduced-motion: reduce) {
  :root { --r-mov-corto: 0ms; --r-mov-medio: 0ms; --r-mov-largo: 0ms; }
}

/* --- Botón de peligro: acciones que deshacen o cierran algo ---------------- */
.r-boton--peligro { background: transparent; border-color: var(--r-error); color: var(--r-error); }
.r-boton--peligro:hover { background: var(--r-error-fondo); }

/* --- Selector (chips que se eligen: destino, filtros, montos rápidos) ------ */
.r-selector { display: flex; gap: 8px; overflow-x: auto; padding: 2px; scrollbar-width: none; }
.r-selector::-webkit-scrollbar { display: none; }
.r-selector__opcion {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; gap: 2px; min-height: 44px; padding: 8px 14px;
  border: 1.5px solid var(--r-gris-200); border-radius: var(--r-radio-medio); background: #FFFFFF; cursor: pointer;
  font: 600 .9375rem/1.2 var(--r-fuente); color: var(--r-marino);
  transition: border-color var(--r-mov-corto), background-color var(--r-mov-corto);
}
.r-selector__opcion small { font-weight: 500; font-size: .75rem; color: var(--r-texto-secundario); }
.r-selector__opcion[aria-pressed="true"], .r-selector__opcion[aria-checked="true"] { border-color: var(--r-azul); background: var(--r-azul-50); }
.r-selector__opcion[aria-disabled="true"] { color: var(--r-gris-500); cursor: default; }
.r-selector__opcion:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--r-foco); }

/* --- Línea de progreso que se llena (en vez de pasos numerados) ------------ */
.r-progreso { height: 4px; border-radius: 999px; background: var(--r-gris-200); overflow: hidden; }
.r-progreso__barra { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--r-celeste), var(--r-azul)); transition: width var(--r-mov-largo) var(--r-mov-curva); }

/* --- Hoja inferior (opciones, confirmaciones) ------------------------------ */
.r-hoja-fondo { position: fixed; inset: 0; z-index: 40; background: rgba(2, 41, 100, .45); display: flex; align-items: flex-end; justify-content: center; }
.r-hoja-fondo[hidden] { display: none; }
.r-hoja {
  width: 100%; max-width: 520px; background: #FFFFFF; border-radius: var(--r-radio-xl) var(--r-radio-xl) 0 0;
  padding: 12px 20px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 12px;
  animation: r-sube var(--r-mov-medio) var(--r-mov-curva);
}
.r-hoja::before { content: ""; align-self: center; width: 40px; height: 4px; border-radius: 999px; background: var(--r-gris-300); }
@keyframes r-sube { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Ruta del dinero (seguimiento animado de un envío) --------------------- */
.r-ruta { position: relative; display: flex; align-items: center; gap: 10px; padding: 16px 4px; }
.r-ruta__extremo { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; font: 600 .75rem/1.2 var(--r-fuente); color: var(--r-texto-secundario); }
.r-ruta__bandera { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; font-size: 1.25rem; background: #FFFFFF; box-shadow: var(--r-sombra-sm); }
.r-ruta__camino { position: relative; flex: 1; height: 4px; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--r-gris-300) 0 8px, transparent 8px 14px); }
.r-ruta__avance { position: absolute; inset: 0 auto 0 0; width: var(--r-ruta, 0%); border-radius: inherit; background: linear-gradient(90deg, var(--r-celeste), var(--r-azul)); transition: width 1.6s var(--r-mov-curva); }
.r-ruta__moneda {
  position: absolute; top: 50%; left: var(--r-ruta, 0%); width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 999px;
  display: grid; place-items: center; background: var(--r-azul); color: #FFFFFF; font: 800 .875rem/1 var(--r-fuente);
  box-shadow: 0 0 0 6px rgba(26, 135, 221, .18); transition: left 1.6s var(--r-mov-curva);
}

/* --- Profundidad al desplazarse (listas largas) ---------------------------
 * Las tarjetas llegan desde el fondo creciendo y se van al fondo achicándose.
 * El script de la página fija --r-profundidad (0 = al fondo, 1 = al frente). */
.r-profundidad > * { transform: scale(calc(.82 + .18 * var(--r-profundidad, 1))); opacity: calc(.12 + .88 * var(--r-profundidad, 1)); transform-origin: 50% 50%; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .r-profundidad > * { transform: none; opacity: 1; } }

/* --- Personas en fila (elegir a quién, rápido) ------------------------------ */
.r-personas { display: flex; gap: 12px; overflow-x: auto; padding: 4px 2px; scrollbar-width: none; }
.r-personas::-webkit-scrollbar { display: none; }
.r-persona { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: 600 .8125rem/1.2 var(--r-fuente); color: var(--r-texto-principal); text-align: center; text-decoration: none; }
.r-persona__foto { width: 56px; height: 56px; border-radius: 999px; display: grid; place-items: center; background: var(--r-azul-50); color: var(--r-marino); font: 700 1.125rem/1 var(--r-fuente); border: 2px solid transparent; transition: border-color var(--r-mov-corto); }
.r-persona[aria-checked="true"] .r-persona__foto { border-color: var(--r-azul); background: #FFFFFF; box-shadow: 0 0 0 4px var(--r-azul-50); }
.r-persona--nueva .r-persona__foto { background: #FFFFFF; border: 2px dashed var(--r-gris-300); color: var(--r-azul); }

/* --- Conversor: dos montos editables (lo que envías y lo que llega) -------- */
.r-conversor { background: #FFFFFF; border: 1px solid var(--r-gris-200); border-radius: var(--r-radio-grande); box-shadow: var(--r-sombra-sm); }
.r-conversor__lado { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.r-conversor__lado + .r-conversor__lado { border-top: 1px solid var(--r-gris-100); background: var(--r-fondo-suave); border-radius: 0 0 var(--r-radio-grande) var(--r-radio-grande); }
.r-conversor__textos { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.r-conversor__etiqueta { font: 500 .8125rem/1.3 var(--r-fuente); color: var(--r-texto-secundario); }
.r-conversor__monto { width: 100%; border: 0; outline: 0; padding: 0; background: transparent; font: 800 1.75rem/1.2 var(--r-fuente); color: var(--r-marino); }
.r-conversor__monto:focus-visible { box-shadow: 0 2px 0 var(--r-celeste); }
.r-conversor__moneda { flex: none; display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: var(--r-radio-pastilla); background: #FFFFFF; border: 1px solid var(--r-gris-200); font: 700 .875rem/1 var(--r-fuente); color: var(--r-marino); }
button.r-conversor__moneda { cursor: pointer; }
button.r-conversor__moneda::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 2px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); }
button.r-conversor__moneda:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--r-foco); }
.r-conversor__tasa { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px; font: 500 .8125rem/1.3 var(--r-fuente); color: var(--r-texto-secundario); border-top: 1px dashed var(--r-gris-200); }

/* Detalle en el medio del conversor: la línea de la tasa es el botón «Ver más»
   y al abrirse muestra, entre los dos montos, tasa, comisión, cargos y costo total. */
.r-conversor__detalle { border-top: 1px dashed var(--r-gris-200); border-bottom: 1px dashed var(--r-gris-200); }
.r-conversor__detalle > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 8px;
  min-height: 44px; padding: 6px 12px; font: 500 .8125rem/1.3 var(--r-fuente); color: var(--r-texto-secundario);
}
.r-conversor__detalle > summary::-webkit-details-marker { display: none; }
.r-conversor__detalle > summary svg { width: 16px; height: 16px; }
.r-conversor__mas { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--r-marino); }
.r-conversor__mas::after { content: ""; width: 6px; height: 6px; margin-top: -3px; border-right: 2px solid var(--r-celeste); border-bottom: 2px solid var(--r-celeste); transform: rotate(45deg); transition: transform var(--r-mov-corto); }
.r-conversor__detalle[open] .r-conversor__mas::after { transform: rotate(-135deg); margin-top: 3px; }
.r-conversor__detalle > summary:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--r-foco); }
.r-conversor__detalle .r-resumen__filas { padding: 0 18px 8px; background: var(--r-gris-50); animation: r-despliega var(--r-mov-medio) var(--r-mov-curva); }
@keyframes r-despliega { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.r-conversor__nota { margin: 0; padding: 0 18px 10px; background: var(--r-gris-50); font: 400 .75rem/1.4 var(--r-fuente); color: var(--r-texto-secundario); }

/* --- Sugerencia de tramo: sobria, una línea y un botón --------------------- */
.r-sugerencia { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-radio-medio); background: var(--r-info-fondo); color: var(--r-marino); font: 400 .9375rem/1.4 var(--r-fuente); }

/* --- Ventana (pop-up) para consultar algo sin salir de la pantalla ------- */
.r-dialogo { width: min(440px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: var(--r-radio-xl); background: #FFFFFF; color: var(--r-texto-principal); box-shadow: var(--r-sombra-lg); font-family: var(--r-fuente); }
.r-dialogo::backdrop { background: rgba(2, 41, 100, .45); }
.r-dialogo[open] { animation: r-aparece-dialogo var(--r-mov-medio) var(--r-mov-curva); }
@keyframes r-aparece-dialogo { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.r-dialogo__cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
.r-dialogo__encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.r-dialogo__titulo { margin: 0; font: 700 1.25rem/1.3 var(--r-fuente); color: var(--r-marino); }
.r-dialogo__cerrar { flex: none; width: 44px; height: 44px; margin: -10px -10px 0 0; border: 0; border-radius: 999px; background: none; color: var(--r-marino); cursor: pointer; display: grid; place-items: center; }
.r-dialogo__cerrar:hover { background: var(--r-hover-celeste); }
.r-dialogo__cerrar:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--r-foco); }

/* Tabla simple (comisiones por tramo): la fila del monto actual se destaca. */
.r-tabla { width: 100%; border-collapse: collapse; font: 400 .9375rem/1.4 var(--r-fuente); }
.r-tabla th { padding: 8px 12px; text-align: left; font: 600 .8125rem/1.3 var(--r-fuente); color: var(--r-texto-secundario); border-bottom: 1px solid var(--r-gris-200); }
.r-tabla td { padding: 10px 12px; border-bottom: 1px solid var(--r-gris-100); }
.r-tabla td:last-child, .r-tabla th:last-child { text-align: right; font-weight: 700; color: var(--r-marino); }
.r-tabla tr.es-actual td { background: var(--r-azul-50); }
.r-tabla tr.es-actual td:first-child { box-shadow: inset 3px 0 0 var(--r-azul); }

/* --- Contraseña: mostrar/ocultar y requisitos que se cumplen al escribir --- */
.r-campo__clave { position: relative; display: flex; }
.r-campo__clave .r-campo__control { flex: 1; min-width: 0; padding-right: 96px; }
.r-campo__ver {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%); min-height: 36px; padding: 0 10px;
  border: 0; border-radius: var(--r-radio-pequeno); background: none; cursor: pointer;
  font: 600 .875rem/1 var(--r-fuente); color: var(--r-marino); text-decoration: underline; text-underline-offset: 3px;
}
.r-campo__ver:hover { background: var(--r-hover-celeste); }
.r-campo__ver:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--r-foco); }
.r-requisitos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font: 400 .875rem/1.35 var(--r-fuente); color: var(--r-texto-secundario); }
.r-requisitos li { display: flex; align-items: center; gap: 8px; transition: color var(--r-mov-corto); }
.r-requisitos li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 999px; border: 2px solid var(--r-gris-300);
  background: center / 12px no-repeat; transition: background-color var(--r-mov-corto), border-color var(--r-mov-corto);
}
.r-requisitos li.es-cumplido { color: var(--r-exito); }
.r-requisitos li.es-cumplido::before { border-color: var(--r-exito); background-color: var(--r-exito); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.r-requisitos li.es-error { color: var(--r-error); }
.r-requisitos li.es-error::before { border-color: var(--r-error); background-color: var(--r-error); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E"); }

/* --- Pantalla final (éxito): fondo de un solo color y el mapa del envío --- */
.r-final {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px 20px calc(32px + env(safe-area-inset-bottom)); background: var(--r-marino); color: #FFFFFF; text-align: center;
  background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px); background-size: 18px 18px;
}
.r-final > * { width: 100%; max-width: 420px; }
.r-final__titulo { margin: 0; font: 800 1.75rem/1.2 var(--r-fuente); color: #FFFFFF; }
.r-final__texto { margin: 0; font: 400 1rem/1.5 var(--r-fuente); color: var(--r-azul-100); }
.r-final__monto { display: inline-flex; flex-direction: column; gap: 2px; padding: 12px 20px; border-radius: var(--r-radio-grande); background: rgba(255, 255, 255, .08); font: 500 .875rem/1.3 var(--r-fuente); color: var(--r-azul-100); }
.r-final__monto b { font: 800 1.5rem/1.2 var(--r-fuente); color: #FFFFFF; }
.r-final .r-boton--texto { color: #FFFFFF; }
.r-final .r-boton--texto:hover { background: rgba(255, 255, 255, .1); }
.r-mapa { display: block; width: 100%; height: min(300px, 38vh); margin: 0 auto; overflow: visible; }
.r-mapa__tierra { fill: rgba(255, 255, 255, .07); stroke: rgba(145, 188, 253, .35); stroke-width: 1.2; stroke-linejoin: round; }
.r-mapa__camino { fill: none; stroke: rgba(255, 255, 255, .25); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 8; }
.r-mapa__trazo { fill: none; stroke: var(--r-celeste); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: r-traza 1.8s var(--r-mov-curva) .3s forwards; }
@keyframes r-traza { to { stroke-dashoffset: 0; } }
.r-mapa__pulso { fill: none; stroke: var(--r-celeste); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: r-pulso-mapa 1.8s ease-out infinite; }
@keyframes r-pulso-mapa { from { opacity: .9; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }
.r-mapa__etiqueta { fill: #FFFFFF; font: 700 11px/1 var(--r-fuente); }
/* El signo de dinero que viaja por la ruta: blanco, con un brillo suave. */
.r-mapa__signo { fill: #FFFFFF; font: 800 20px/1 var(--r-fuente); text-anchor: middle; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .55)); }
.r-final__check { width: 56px; height: 56px; margin: 0 auto; border-radius: 999px; display: grid; place-items: center; background: var(--r-exito); color: #FFFFFF; box-shadow: 0 0 0 8px rgba(0, 127, 59, .25); animation: r-aparece-dialogo var(--r-mov-largo) var(--r-mov-curva) 1.6s both; }
@media (prefers-reduced-motion: reduce) {
  .r-mapa__trazo { animation: none; stroke-dashoffset: 0; }
  .r-mapa__pulso, .r-final__check { animation: none; }
}

/* --- Subir archivo o foto (comprobante, datos de un destinatario) --------- */
.r-subir {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 22px 16px; text-align: center; cursor: pointer;
  border: 2px dashed var(--r-azul-300); border-radius: var(--r-radio-grande); background: var(--r-azul-50);
  font: 400 .9375rem/1.45 var(--r-fuente); color: var(--r-texto-secundario);
  transition: border-color var(--r-mov-corto), background-color var(--r-mov-corto);
}
.r-subir b { color: var(--r-marino); font-size: 1rem; }
.r-subir:hover, .r-subir.es-arrastrando { border-color: var(--r-azul); background: #FFFFFF; }
.r-subir:focus-within { box-shadow: 0 0 0 4px var(--r-foco); }
.r-subir input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }

/* --- Cuenta atrás (plazo para pagar y asegurar la tasa) -------------------- */
.r-cuenta-atras { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-radio-pastilla); background: #FFFFFF; font: 700 .875rem/1 var(--r-fuente); font-variant-numeric: tabular-nums; color: var(--r-aviso); }

/* --- Tarjeta para repetir el último envío ---------------------------------- */
.r-repetir { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--r-radio-grande); background: var(--r-degradado-marca); color: #FFFFFF; }
.r-repetir__texto { flex: 1; min-width: 0; font: 400 .9375rem/1.4 var(--r-fuente); }
.r-repetir__texto b { display: block; font-size: 1.0625rem; }
.r-repetir .r-lista__avatar { background: rgba(255, 255, 255, .16); color: #FFFFFF; }

/* Sin movimiento cuando el sistema lo pide: todo llega a su estado final al instante. */
@media (prefers-reduced-motion: reduce) {
  .r-ruta__avance, .r-ruta__moneda, .r-progreso__barra { transition: none; }
  .r-hoja, .r-dialogo[open], .r-conversor__detalle .r-resumen__filas { animation: none; }
}

/* --- Esperando algo del cliente (puntos que laten) ------------------------ */
.r-esperando { display: flex; align-items: center; gap: 10px; font: 400 .9375rem/1.4 var(--r-fuente); color: var(--r-texto-secundario); }
.r-esperando i { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--r-azul); animation: r-latido 1.2s infinite; }
.r-esperando i:nth-child(2) { animation-delay: .2s; }
.r-esperando i:nth-child(3) { animation-delay: .4s; }
@keyframes r-latido { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }

/* --- Línea de tiempo (pasos de un envío con su hora) ----------------------- */
.r-linea-tiempo { list-style: none; margin: 0; padding: 0 0 0 4px; font-family: var(--r-fuente); }
.r-linea-tiempo li { position: relative; padding: 0 0 18px 28px; }
.r-linea-tiempo li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 999px; background: var(--r-azul); }
.r-linea-tiempo li::after { content: ""; position: absolute; left: 6px; top: 20px; bottom: 0; width: 2px; background: var(--r-gris-200); }
.r-linea-tiempo li:last-child::after { display: none; }
.r-linea-tiempo li.es-pendiente::before { background: var(--r-gris-300); }
.r-linea-tiempo li.es-actual::before { animation: r-pulso 1.6s infinite; }
.r-linea-tiempo b { display: block; color: var(--r-marino); }
@keyframes r-pulso { 0% { box-shadow: 0 0 0 0 rgba(26, 135, 221, .5); } 70%, 100% { box-shadow: 0 0 0 10px rgba(26, 135, 221, 0); } }

/* --- Tarjetas de envío (Mis envíos), agrupadas por mes ---------------------- */
.r-mes {
  position: sticky; top: var(--r-alto-encabezado, 60px); z-index: 5; padding: 6px 4px;
  font: 700 .8125rem/1.2 var(--r-fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--r-texto-secundario);
  background: color-mix(in srgb, var(--r-fondo-suave) 85%, transparent); backdrop-filter: blur(6px);
}
.r-envios { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.r-envios .r-lista__fila { background: #FFFFFF; border: 1px solid var(--r-gris-200); border-radius: var(--r-radio-grande); }
.r-envios .es-en-curso .r-lista__fila { border-color: var(--r-azul-200); box-shadow: 0 0 0 4px var(--r-azul-50); }
.r-mini-avance { display: block; height: 3px; margin-top: 6px; border-radius: 999px; background: var(--r-gris-200); overflow: hidden; }
.r-mini-avance i { display: block; height: 100%; width: var(--r-avance, 66%); background: linear-gradient(90deg, var(--r-celeste), var(--r-azul)); }

/* --- Campo con un dato leído de una foto (el cliente lo confirma) ---------- */
.r-campo--leido .r-campo__control { border-color: var(--r-azul-300); background: var(--r-azul-50); }

@media (prefers-reduced-motion: reduce) {
  .r-esperando i, .r-linea-tiempo li.es-actual::before { animation: none; }
}

/* --- Botón inactivo: gana a cualquier variante y a :hover (22-10) ----------------------------
   Antes, al pasar el mouse sobre un principal inactivo volvía el azul con el texto gris y no se
   leía. Gris claro con texto gris oscuro (6,6:1); el de texto, sin fondo. */
.r-boton.r-boton:disabled, .r-boton.r-boton.es-inactivo {
  background: var(--r-gris-200); border-color: var(--r-gris-200); color: var(--r-gris-600); box-shadow: none; cursor: not-allowed;
}
.r-boton.r-boton--texto:disabled { background: transparent; border-color: transparent; color: var(--r-gris-500); text-decoration: none; }