/* ============================================================
   Rediseño (REDISENO): lo propio de la app, que la propuesta no tiene.
   Todo lo visual sale de rediseno.css (generado de la propuesta, sin
   cambios en las declaraciones). Aquí solo:
   1. la pantalla del teléfono ocupa la ventana (en la propuesta es una
      maqueta de 390 × 844 con marco y barras de iOS de mentira);
   2. el foco se marca solo con teclado;
   3. Orbi se queda quieto cuando no se ve o la pestaña está oculta;
   4. el campo de "Otro" en 17 px (index.html fuerza 16 px en el celular).
   ============================================================ */

/* 1. Pantalla completa. El iPhone pone su barra de estado y su barra de inicio:
   en lugar de las de mentira de la maqueta, los márgenes seguros. */
.rd-app {
  position: fixed; inset: 0; z-index: 10;
  width: auto; height: auto; max-width: none;
  border-radius: 0; box-shadow: none;
  padding-top: env(safe-area-inset-top);
}
.rd-app[hidden] { display: none; }
#rdBienvenida { z-index: 25; }
/* Abajo, el margen seguro del iPhone o el de la propuesta, el mayor */
.rd-app .pestanas { padding-bottom: env(safe-area-inset-bottom); }
.rd-app .pie-accion { padding-bottom: max(env(safe-area-inset-bottom), 8px); }
.rd-app .hoja-respuestas { padding-bottom: max(env(safe-area-inset-bottom), 10px); }
/* Escritorio: la misma columna del teléfono, centrada (la propuesta solo dibuja el celular) */
@media (min-width: 600px) {
  .rd-app .pantalla { padding-left: calc(50% - 179px); padding-right: calc(50% - 179px); }
  .rd-app .pestanas { padding-left: calc(50% - 195px); padding-right: calc(50% - 195px); }
  .rd-app .pie-accion { padding-left: calc(50% - 179px); padding-right: calc(50% - 179px); }
  .rd-app .hoja-respuestas { padding-left: calc(50% - 179px); padding-right: calc(50% - 179px); }
}
/* Con la pantalla del rediseño encima, la página de atrás no se mueve */
html.rd-pantalla body { overflow: hidden; }
/* El menú del avatar de siempre, debajo del avatar de la cabecera nueva */
html.rd-pantalla .page .top-actions {
  position: fixed; z-index: 12; visibility: hidden;
  top: calc(env(safe-area-inset-top) + 6px); right: max(16px, calc(50% - 179px));
  min-height: 44px; padding: 0; margin: 0;
}
html.rd-pantalla .page .top-actions #accountMenuPanel:not([hidden]) { visibility: visible; }
/* .page (z-index: 1) encerraba al menú por debajo de la pantalla nueva */
html.rd-pantalla .page { z-index: auto; }
/* Los avisos de la cuenta (p. ej. "Correo confirmado") quedan a la vista */
html.rd-pantalla #accountNotice:not([hidden]) {
  position: fixed; z-index: 11; left: 16px; right: 16px; max-width: 520px; margin: 0 auto;
  bottom: calc(76px + env(safe-area-inset-bottom));
}

/* 2. Foco: solo con teclado (:focus-visible de la propuesta). Lo que recibe el
   foco por código (la hoja al abrirse) no se marca nunca. */
.rd-app:focus, .rd-app [tabindex="-1"]:focus { outline: none; box-shadow: none; }
.rd-app :focus:not(:focus-visible) { outline: none; box-shadow: none; }

/* 3. Animaciones en pausa: Orbi (y su halo) si no se ve (rdVigilarOrbi), y todo
   el rediseño con la pestaña oculta */
.rd-app .rd-quieto, .rd-app .rd-quieto *, .rd-app .rd-quieto::before,
html.rd-oculta .rd-app *, html.rd-oculta .rd-app::before, html.rd-oculta .rd-app::after,
html.rd-oculta .rd-app *::before { animation-play-state: paused !important; }

/* 4. 17 px en el campo (la regla de celular de index.html pone 16 px con !important) */
#rdBienvenida input.entrada { font-size: 17px !important; }

/* Los <h3>/<p> de las tarjetas de intención con el "hidden" de la etiqueta */
.rd-app [hidden] { display: none !important; }

/* 5. El fondo y las estrellas se dibujan sobre la pantalla del teléfono de la
   propuesta, que mide 50 px más arriba (barra de estado) y 30 px más abajo
   (barra de inicio): así el degradado y cada estrella quedan en el mismo lugar. */
.rd-app { background-size: 100% calc(100% + 80px); background-position: 0 -50px; background-repeat: no-repeat; }
.rd-app::before, .rd-app.escena::after { inset: -50px 0 -30px; }
/* La hoja de opciones mide como mucho el 74 % del teléfono de la propuesta (con sus barras) */
.rd-app .hoja-respuestas { max-height: calc((100% + 80px) * .74); }
/* Reducir movimiento: en la propuesta la regla "*" alcanza también al teléfono (su capa de
   estrellas que titila); aquí el teléfono es .rd-app, que esa regla no incluye */
@media (prefers-reduced-motion: reduce) {
  .rd-app::before, .rd-app::after { animation: none !important; }
}

/* ============================================================
   6. Esqueleto de escritorio (#rdEsqueleto, vista 30)
   ============================================================ */
/* El esqueleto es una página a pantalla completa (body.app en la propuesta), no un
   teléfono: sin el marco ni las estrellas del teléfono, y con su propio desplazamiento */
#rdEsqueleto {
  position: fixed; inset: 0; z-index: 10; display: block;
  width: auto; height: auto; max-width: none; border-radius: 0; box-shadow: none; padding: 0;
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  background: var(--fondo); background-size: auto; background-position: 0 0;
}
#rdEsqueleto::before { display: none; }
#rdEsqueleto[hidden] { display: none; }
/* Cada ancho con lo suyo: debajo de 768 px el celular de siempre; desde 768, el esqueleto */
@media (max-width: 767px) { #rdEsqueleto { display: none !important; } }
@media (min-width: 768px) { #rdApp, #rdCuenta, #rdBienvenida, #rdHerr { display: none !important; } }
/* Dentro de una herramienta de siempre: solo el menú lateral, y la página de siempre a su
   derecha (no cambia nada más de esas pantallas) */
@media (min-width: 768px) {
  html.rd-herramienta #rdEsqueleto { right: auto; width: 256px; overflow: hidden; background: none; }
  html.rd-herramienta #rdEsqueleto .app-cielo, html.rd-herramienta #rdEsqueleto .app-contenido { display: none; }
  html.rd-herramienta #rdEsqueleto .app-marco { min-height: 100vh; }
  html.rd-herramienta .page { margin-left: 256px; }
  html.rd-herramienta.rd-menu-contraido #rdEsqueleto { width: 80px; }
  html.rd-herramienta.rd-menu-contraido .page { margin-left: 80px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  html.rd-herramienta #rdEsqueleto { width: 80px; }
  html.rd-herramienta .page { margin-left: 80px; }
}
/* index.html tiene "header { text-align: center; margin-bottom: 44px }" para el logo de
   siempre; el saludo del esqueleto (<header class="saludo-orbi">) no lo lleva en la propuesta */
#rdEsqueleto header { text-align: start; margin-bottom: 0; }
/* Tablet: «Expandir» abre el menú ENCIMA «sin mover nada» (vista 30). En la propuesta, al
   pasar el menú a position: fixed el contenido caía a la primera columna (80 px) y se
   aplastaba; aquí se queda en la suya. */
@media (min-width: 768px) and (max-width: 1023px) {
  #rdEsqueleto .app-marco.abierto .app-contenido { grid-column: 2; }
}
/* Las respuestas ya dadas (se tocan para cambiarlas) como en el chat del celular */
#rdEscBienvenida .lado-orbi .chat { text-align: left; }

/* ============================================================
   7. Ideas, Guion y Analizador (lotes 2 y 3: #rdHerr en el celular, #rdEscHerr en el esqueleto)
   ============================================================ */
/* 17 px en los campos, como en la propuesta (index.html pone 16 px con !important en el celular) */
#rdHerr .entrada, #rdEscHerr .entrada { font-size: 17px !important; }
/* El CAPTCHA del análisis gratis vive en la tarjeta de siempre (detrás): si Cloudflare pide la
   casilla, se ve encima de la pantalla nueva */
html.rd-pantalla #analisisCaptcha.visible {
  position: fixed; z-index: 40; left: 50%; transform: translateX(-50%);
  bottom: calc(120px + env(safe-area-inset-bottom)); width: min(340px, calc(100% - 32px));
}
/* Las etiquetas de la foto (abren el selector de siempre) se ven como botones */
#rdHerr label.boton, #rdEscHerr label.boton { cursor: pointer; }
/* Estilos que las vistas del analizador traen en su propia página (<style> de analizador-espera,
   analizador-resultado y analizador-errores), tal cual, dentro de .rd-app y con rem → px */
.rd-app .porcentaje { font-family: var(--f-titulo); font-weight: 700; font-size: 56px; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.rd-app .nota-grande.xl { width: 236px; height: 236px; }
.rd-app .nota-grande.xl .cifra { font-size: 80px; }
.rd-app details.plegable summary { list-style: none; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; color: var(--acento); font-weight: 600; font-size: var(--t-chico); }
.rd-app details.plegable summary::-webkit-details-marker { display: none; }
.rd-app .punto.compacto { padding: 12px 0; align-items: center; }
.rd-app .punto.compacto .marca-punto { width: 30px; height: 30px; }
.rd-app .acciones-texto { display: flex; justify-content: center; gap: 4px; }
.rd-app .pasos-cortos { list-style: none; counter-reset: p; display: flex; flex-direction: column; gap: 10px; text-align: left; }
.rd-app .pasos-cortos li { counter-increment: p; display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; color: var(--texto-2); }
.rd-app .pasos-cortos li::before { content: counter(p); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--acento-suave); color: var(--acento); font-weight: 700; font-size: 14.4px; }
/* La hoja de abajo llega hasta el borde: debajo, el margen seguro del iPhone */
#rdHerr .hoja-modal { padding-bottom: max(env(safe-area-inset-bottom), 22px); }
/* 44 px de toque sin mover nada: «Mi plan», las migas («← Tus ideas») y «Cambiar video» se ven
   como en la propuesta, pero el área que se toca crece con un ::after invisible */
#rdEscHerr .linea-plan a, #rdEscHerr .cab-pagina .migas, .rd-app .video-elegido.ancho .boton-texto { position: relative; }
#rdEscHerr .linea-plan a::after, #rdEscHerr .cab-pagina .migas::after, .rd-app .video-elegido.ancho .boton-texto::after {
  content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%);
}

/* ============================================================
   8. Conteos (§26 y vista 39): «Tu saldo» y la línea de costo
   ============================================================ */
/* La hoja de «Tu saldo» llega hasta el borde del celular: debajo, el margen seguro del iPhone */
.rd-app .hoja-saldo .panel-saldo { padding-bottom: max(env(safe-area-inset-bottom), 26px); }
/* En el celular la pastilla va en la cabecera, junto a «← Inicio» o la estrella */
.rd-app .cabecera .saldo-pill { min-height: 40px; padding: 0 12px; }
/* En el esqueleto, la hoja se apoya en el contenido (el menú lateral queda a la izquierda) */
#rdEsqueleto .hoja-saldo { position: fixed; }
/* La línea de costo dentro del pie de acción del celular, pegada al botón */
.rd-app .pie-accion .linea-costo { margin-top: 4px; }
/* Dentro de una lista de acciones del escritorio (pila-chica), centrada como las demás notas */
.rd-app .pila-chica .linea-costo { margin-top: 0; }
/* Celular: la línea de costo con más contraste y tamaño legible (pedido del 16/10/2026) */
#rdHerr .linea-costo { font-size: 15px; color: var(--texto); gap: 8px; }
#rdHerr .linea-costo .unidad { font-size: 13px; padding: 3px 10px 3px 7px; }
#rdHerr .linea-costo .unidad svg { width: 15px; height: 15px; }
#rdHerr .linea-costo .resto { color: var(--texto-2); }
/* Aviso de Orbi bajo la línea de costo: pasado el tope de fallos sin cobro (tope-fallos.js) */
.rd-app .aviso-fallos { display: flex; align-items: flex-start; gap: 8px; margin: 6px 0 0; font-size: 14px; line-height: 1.4; color: var(--texto-2); text-align: left; }
.rd-app .aviso-fallos img { flex: none; width: 22px; height: 22px; }
/* El pie fijo (botón + línea de costo + acción secundaria) no tapa el último campo: aire al final */
#rdHerr .pantalla { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }

/* ============================================================
   9. «Ya tengo mi idea» (lote 2b)
   ============================================================ */
/* El teleprompter ocupa la ventana, en celular y en escritorio (encima del esqueleto) */
#rdPrompter { z-index: 40; display: flex; flex-direction: column; }
#rdPrompter[hidden] { display: none !important; }
html.rd-prompter body { overflow: hidden; }
@media (min-width: 768px) {
  #rdPrompter .prompter-texto-caja, #rdPrompter .prompter-barra, #rdPrompter .prompter-pie { width: 100%; max-width: 720px; margin-left: auto; margin-right: auto; }
}
/* 17 px en las cajas de la idea y de las respuestas (index.html pone 16 px con !important en el celular) */
#rdHerr .caja-idea textarea, #rdEscHerr .caja-idea textarea { font-size: 17px !important; }

/* ============================================================
   10. Aspecto premium (§25 y §30–§33; piezas en rediseno-premium.css)
   ============================================================ */
/* Las variables de las pantallas finales (.if-tel, .ie-pagina) en todo el rediseño: la
   pastilla «Tu saldo» (.if-saldo) es la misma en todas las cabeceras, también fuera de ellas */
.rd-app { --tx: #f5f6fb; --tx2: #babed8; --tx3: #9297ba; }
.rd-app .if-saldo { flex: none; }
/* Con base opaca: las estrellas del fondo no se ven a través (parecían un punto en el texto) */
.rd-app .if-saldo, .rd-app.app .if-saldo { background: linear-gradient(rgba(139, 92, 246, .14), rgba(139, 92, 246, .14)), #0d0e26; }
.rd-app .if-saldo .sin-cifra { color: var(--tx); font-size: 14px; }
/* La revisión en celeste (vista 44): la pastilla del analizador */
.rd-app .if-saldo.rev, .rd-app.app .if-saldo.rev { border-color: rgba(125, 211, 252, .32); background: linear-gradient(rgba(56, 189, 248, .12), rgba(56, 189, 248, .12)), #0d0e26; }
.rd-app .if-saldo.rev .ic { background: rgba(56, 189, 248, .26); color: #bae6fd; }
/* Cabecera de Cuenta en el esqueleto: título y pastilla en la misma fila */
#rdEscCuenta > .cab-pagina { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px; }
/* El teléfono de la maqueta (390 × 844, con marco) es aquí la ventana: sin marco, y en lugar
   de la barra de estado y la de inicio de mentira, los márgenes seguros del iPhone */
.rd-app .if-tel { position: absolute; inset: 0; width: auto; height: auto; border-radius: 0; box-shadow: none;
  --nav-alto: calc(60px + max(env(safe-area-inset-bottom), 12px)); }
.rd-app .if-scroll { padding-top: calc(env(safe-area-inset-top) + 8px); padding-bottom: calc(222px + env(safe-area-inset-bottom)); overscroll-behavior: contain; }
.rd-app .gp-tel .if-scroll, .rd-app .ap-tel .if-scroll { padding-bottom: calc(214px + env(safe-area-inset-bottom)); }
.rd-app .if-tel.sin-accion .if-scroll { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
.rd-app .if-nav { height: var(--nav-alto); padding-bottom: max(env(safe-area-inset-bottom), 12px); }
.rd-app .if-accion { bottom: var(--nav-alto); }
/* Celular ancho (600–767 px): la misma columna del teléfono, centrada */
@media (min-width: 600px) {
  .rd-app .if-scroll, .rd-app .if-accion { padding-left: calc(50% - 175px); padding-right: calc(50% - 175px); }
  .rd-app .if-nav { padding-left: calc(50% - 183px); padding-right: calc(50% - 183px); }
}
/* Teclado abierto en el iPhone (§31 «Al aplicarlo»): una barra fija subiría encima del
   teclado y taparía el campo. Mientras un campo de texto tiene el foco, la barra del botón
   pasa al final del contenido (rdTeclado la mueve) y las pestañas se esconden */
.rd-app .if-tel.teclado .if-scroll { padding-bottom: 24px; }
.rd-app .if-tel.teclado .if-nav { display: none; }
.rd-app .if-accion.en-flujo { position: static; padding: 18px 0 10px; background: none; }
/* La vista previa y el adelanto del video de Inicio quedan quietos (§30): sin palabras que
   entran, anillo ni reloj en bucle. La única animación en bucle es la de la espera */
.rd-app .idea-hoy .vista-viva .w, .rd-app .idea-hoy .vv-anillo, .rd-app .idea-hoy .vv-reloj i,
.rd-app .mosaico-hoy .vista-viva .w, .rd-app .mosaico-hoy .vv-anillo, .rd-app .mosaico-hoy .vv-reloj i { animation: none !important; }
.rd-app .idea-hoy .vv-reloj i, .rd-app .mosaico-hoy .vv-reloj i { transform: scaleX(.35); }
@media (prefers-reduced-motion: reduce) {
  .rd-app .if-tel *, .rd-app .ie-pagina *, .rd-app .idea-hoy *, .rd-app .mosaico-hoy { animation: none !important; transition: none !important; }
}
/* La pastilla en las cabeceras que todavía no son las finales (.cab-pagina): a la altura del título */
.rd-app .cab-pagina > .if-saldo { align-self: flex-start; margin-top: 4px; }
/* Inicio final (§25): sin desenfoque (§30), con fondos opacos; las pestañas de abajo
   opacas como en Ideas (#0b0c22), con el mismo contenido */
#rdApp .panel, #rdEscInicio .panel, #rdApp .mosaico-hoy, #rdEscInicio .mosaico-hoy, #rdApp .pestanas {
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
#rdApp .panel, #rdEscInicio .panel, #rdApp .mosaico-hoy, #rdEscInicio .mosaico-hoy { background: linear-gradient(180deg, rgba(23, 26, 58, .92), rgba(16, 18, 44, .92)); }
#rdApp .pestanas { background: #0b0c22; border-top-color: rgba(255, 255, 255, .07); }
.rd-app .idea-hoy .mas-tarde { white-space: normal; margin-top: 10px; }
.rd-app .panel-ultimo .ver-todo { color: var(--acento); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.rd-app .mosaico-hoy[aria-disabled="true"] { cursor: default; }
.rd-app .recientes-hoy li a > span:not(.mini) { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Ideas final (§31): «Solo ganchos para este tema» como enlace al final de la tarjeta (con
   GANCHOS=true); en el escritorio, el lado derecho (vista previa, espera o las ideas) */
.rd-app .if-enlace { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 6px 0 4px; padding: 0; border: 0; background: none; color: var(--acento); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.rd-app .if-enlace .ico { width: 18px; height: 18px; }
.rd-app .ie-lado { padding: 8px 22px 26px; border-radius: 26px; background: linear-gradient(180deg, rgba(23, 26, 58, .92), rgba(16, 18, 44, .92)); border: 1px solid rgba(196, 181, 253, .16); }
.rd-app .ie-derecha { min-width: 0; display: grid; }
.rd-app .ie-derecha .rejilla-ideas.una { grid-template-columns: minmax(0, 1fr); }
.rd-app .ie-pagina .if-error { margin-top: 18px; }
/* Las etiquetas de los campos envuelven a su campo: el error, debajo y en su color */
.rd-app .if-campo .error-campo { margin-top: 7px; }
/* Arriba, al deslizar, el contenido no se lee debajo de la hora del iPhone (§31): un fondo
   del alto del margen seguro (en la maqueta, 54 px sobre la barra de estado de mentira) */
.rd-app .if-tel::before { content: ""; position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: calc(env(safe-area-inset-top) + 8px); background: linear-gradient(180deg, #070818 70%, transparent); pointer-events: none; }
/* «Ya tengo mi idea» · entrada final en el celular: los estilos que la vista (movil-ya-tengo-final.html)
   trae en su propia página, tal cual, dentro de .rd-app */
.rd-app .yt-texto { min-height: 150px; padding: 14px 16px; line-height: 1.45; resize: none; }
.rd-app .yt-pie { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.rd-app .yt-pegar { min-height: 44px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #babed8; font: inherit; font-size: 14px; font-weight: 600; }
.rd-app .yt-pegar .ico { width: 16px; height: 16px; }
.rd-app .if-tarjeta > .if-ayuda { display: flex; gap: 8px; align-items: flex-start; }
.rd-app .if-tarjeta > .if-ayuda > .ico { width: 15px; height: 15px; color: #c4b5fd; margin-top: 2px; }
.rd-app .if-tarjeta > .if-ayuda:last-child { margin-bottom: 12px; }
.rd-app .if-boton:disabled { opacity: .5; cursor: default; box-shadow: none; }
.rd-app .if-boton:disabled::after { display: none; }
/* Guion · B Escenas (§32): la cabecera con la pastilla y la estrella; en el escritorio, el
   armado de Ideas final (contenedor de 1120 px) con las escenas a la izquierda y, a la
   derecha y fijo al deslizar, las acciones con su costo y «Para publicar» */
.rd-app .gp-cab-der { display: inline-flex; align-items: center; gap: 8px; }
.rd-app .gp-tel .if-cab .boton-guardar { min-width: 44px; min-height: 44px; }
.rd-app .gp-esc .migas { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--acento); font-weight: 600; text-decoration: none; }
.rd-app .gp-esc h1, .rd-app.app .gp-esc h1 { font-size: 32px; margin-top: 4px; }
.rd-app .gp-esc .gp-idea { margin-top: 2px; }
.rd-app .gp-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--ie-hueco); margin-top: 20px; align-items: start; }
.rd-app .gp-lado { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.rd-app .gp-acciones-esc { padding: 18px; border-radius: 22px; background: linear-gradient(180deg, rgba(23, 26, 58, .92), rgba(16, 18, 44, .92)); border: 1px solid rgba(196, 181, 253, .16); }
.rd-app .gp-esc .gp-publicar { margin-top: 0; }
.rd-app .gp-esc .if-espera, .rd-app .gp-esc .if-error { margin-top: 18px; }
@media (max-width: 1279px) { .rd-app .gp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* index.html tiene su propia .p-gancho (la tarjeta de siempre, que entra con opacidad 0):
   dentro del rediseño, la del guion (§32) manda */
.rd-app .p-gancho { opacity: 1; transform: none; font-size: inherit; min-height: 0; margin-bottom: 0; animation: none; }
/* Revisar un video · resultado y «Mis consejos» (§33). Las marcas de la línea del video, las
   frases de cada parte en su color y, en el escritorio, el armado de la 42a (dos columnas iguales) */
.rd-app .ap-mini-marcada { position: relative; margin-top: 12px; }
.rd-app .ap-marca { position: absolute; top: -7px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: #070818; border: 2px solid #fde68a; color: #fde68a; font: 800 11px var(--f-titulo); }
.rd-app .ap-mini-marcada + .ap-mini-marcas { margin-top: 12px; }
.rd-app .ap-parte.n-verde .ic { color: var(--verde-claro); }
.rd-app .ap-parte.n-amarillo .ic { color: var(--amarillo-claro); }
.rd-app .ap-parte.n-naranja .ic { color: var(--naranja-claro); }
.rd-app .ap-parte .fr .ico { color: var(--amarillo-claro); }
.rd-app .ap-parte.n-verde .fr .ico { color: var(--verde); }
.rd-app .ap-video { margin-top: 14px; grid-template-columns: 54px 1fr; align-items: center; }
.rd-app .ap-video .ap-foto { width: 54px; }
.rd-app .ap-fases b { font-variant-numeric: tabular-nums; }
.rd-app .ap-esc h1, .rd-app.app .ap-esc h1 { font-family: var(--f-titulo); font-size: 32px; line-height: 1.12; letter-spacing: -.025em; }
.rd-app .ap-esc .ie-cab h1, .rd-app.app .ap-esc .ie-cab h1 { font-size: 36px; }
.rd-app .ap-esc > .ie-ancho > h1 { margin-top: 4px; }
.rd-app .ap-esc .migas { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--acento); font-weight: 600; text-decoration: none; }
.rd-app .ap-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ie-hueco); margin-top: 18px; align-items: start; }
.rd-app .ap-grid > section > :first-child { margin-top: 0; }
.rd-app .ap-acciones-esc { margin-top: 16px; padding: 16px; border-radius: 22px; background: linear-gradient(180deg, rgba(23, 26, 58, .92), rgba(16, 18, 44, .92)); border: 1px solid rgba(196, 181, 253, .16); }
.rd-app .ap-esc .if-error { margin-top: 0; }
@media (max-width: 1279px) { .rd-app .ap-esc .ie-cab h1, .rd-app.app .ap-esc .ie-cab h1 { font-size: 32px; } }
/* Un solo botón en la barra (p. ej. «Revisar otro» antes de crear los ganchos): a todo el ancho */
.rd-app .if-accion > div:not([class]) > :only-child, .rd-app .ap-acciones-esc > div:not([class]) > :only-child { width: 100%; }
/* El texto de cada fase va dentro de su pastilla, no en otra */
.rd-app .ap-fases > span > span, .rd-app.app .ap-fases > span > span { display: inline; min-height: 0; padding: 0; border: 0; background: none; color: inherit; }
/* Los títulos de dos partes fuera de la cabecera (Mis consejos, el guion con el gancho): la segunda en el degradado */
.rd-app .ap-esc h1 em, .rd-app.app .ap-esc h1 em { font-style: normal; background: var(--grad-texto); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* En el gancho, «Copiar» va solo con el ícono (su nombre en aria-label) */
.rd-app .gp-gancho .gp-copiar .gp-copiar-txt { display: none; }
/* «Otras 5 ideas · 1 uso» / «Otros 4 ganchos · 1 uso» junto al título: siempre en una línea (el título cede el ancho) */
.rd-app .rd-otra-ronda, .rd-app.app .rd-otra-ronda { flex: none; white-space: nowrap; }
/* Resultados de Ideas (§33, vista 42c): lo que la maqueta no trae */
/* El porqué de «La más fuerte» (una línea del modelo, ≤ 90 caracteres), debajo de la etiqueta */
.rd-app .ir-porque, .rd-app.app .ir-porque { margin: -2px 0 8px; font-size: 13.5px; line-height: 1.4; color: #fde68a; }
/* Sin los márgenes de los títulos de la app; el enlace estirado no se subraya */
.rd-app .ir-cuerpo h3, .rd-app.app .ir-cuerpo h3, .rd-app .ir-guia h2, .rd-app.app .ir-guia h2 { margin: 0; }
.rd-app .ir-cuerpo .ir-abrir, .rd-app.app .ir-cuerpo .ir-abrir { color: inherit; text-decoration: none; }
/* El mini video va quieto también en el celular, y las cifras del botón no se parten */
.rd-app .ir-ver span, .rd-app.app .ir-ver span, .rd-app .ir-otras button span, .rd-app.app .ir-otras button span { white-space: nowrap; }
/* Resultados: el gancho de la mini tarjeta se lee y NUNCA se sale del óvalo (18/10/2026).
   El óvalo ya no es fijo: rodea al texto (::before del <p>). Con semiejes de 1,35 × el medio
   ancho y 1,6 × el medio alto, las cuatro esquinas del texto quedan dentro de la elipse
   ((1/1,35)² + (1/1,6)² = 0,94 ≤ 1). El texto ocupa el 68 % del ancho para que el óvalo
   quepa en la tarjeta, y un gancho larguísimo se corta con «…» (9 líneas) dentro del óvalo. Los largos usan letra
   un poco menor (.largo, más de 55 caracteres; .muy-largo, más de 90). */
.rd-app .ir-mini .vista-viva, .rd-app.app .ir-mini .vista-viva { width: 116px; }
.rd-app .ir-movil .ir-mini .vista-viva, .rd-app.app .ir-movil .ir-mini .vista-viva { width: 92px; }
.rd-app .ir-idea, .rd-app.app .ir-idea { grid-template-columns: 116px minmax(0, 1fr); }
.rd-app .ir-movil .ir-idea, .rd-app.app .ir-movil .ir-idea { grid-template-columns: 92px minmax(0, 1fr); }
.rd-app .ir-mini .vv-anillo, .rd-app.app .ir-mini .vv-anillo { display: none; }
.rd-app .ir-mini .vv-texto, .rd-app.app .ir-mini .vv-texto { left: 16%; right: 16%; font-size: 13px; line-height: 1.12; letter-spacing: 0; }
.rd-app .ir-movil .ir-mini .vv-texto, .rd-app.app .ir-movil .ir-mini .vv-texto { font-size: 11px; }
.rd-app .ir-mini .vv-texto::before, .rd-app.app .ir-mini .vv-texto::before { content: ""; position: absolute; inset: -30% -17.5%; border: 2px solid rgba(240, 171, 252, .7); border-radius: 50%; pointer-events: none; }
.rd-app .ir-mini .vv-texto > span, .rd-app.app .ir-mini .vv-texto > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 9; line-clamp: 9; overflow: hidden; overflow-wrap: anywhere; hyphens: auto; }
/* Escritorio angosto (1024): Guardar y Copiar lado a lado. La columna de texto se mide
   (container query, solo en escritorio: en el celular no hace falta) y, si es angosta, los
   dos botones se compactan; la mini tarjeta baja a 104 px para darles lugar. */
@media (min-width: 768px) and (max-width: 1199px) {
  .rd-app .ir:not(.ir-movil) .ir-idea, .rd-app.app .ir:not(.ir-movil) .ir-idea { grid-template-columns: 104px minmax(0, 1fr); gap: 14px; }
  .rd-app .ir:not(.ir-movil) .ir-mini .vista-viva, .rd-app.app .ir:not(.ir-movil) .ir-mini .vista-viva { width: 104px; }
  .rd-app .ir:not(.ir-movil) .ir-mini .vv-texto, .rd-app.app .ir:not(.ir-movil) .ir-mini .vv-texto { font-size: 12px; }
}
@media (min-width: 768px) {
  .rd-app .ir-cuerpo, .rd-app.app .ir-cuerpo { container-type: inline-size; }
}
@container (max-width: 230px) {
  .rd-app .ir-idea .acciones, .rd-app.app .ir-idea .acciones { gap: 6px; }
  .rd-app .ir-sec, .rd-app.app .ir-sec { padding: 0 6px; gap: 4px; font-size: 13px; }
  .rd-app .ir-sec .ico, .rd-app.app .ir-sec .ico { width: 15px; height: 15px; }
  .rd-app .ir-ver, .rd-app.app .ir-ver { padding: 0 10px; font-size: 15px; }
}
/* Ganchos largos en la mini tarjeta: un poco más chicos para que entren enteros */
.rd-app .ir-mini .vv-texto.largo, .rd-app.app .ir-mini .vv-texto.largo { font-size: 11.5px; }
.rd-app .ir-mini .vv-texto.muy-largo, .rd-app.app .ir-mini .vv-texto.muy-largo { font-size: 10.5px; }
@media (min-width: 768px) and (max-width: 1199px) {
  .rd-app .ir:not(.ir-movil) .ir-mini .vv-texto.largo, .rd-app.app .ir:not(.ir-movil) .ir-mini .vv-texto.largo { font-size: 11px; }
  .rd-app .ir:not(.ir-movil) .ir-mini .vv-texto.muy-largo, .rd-app.app .ir:not(.ir-movil) .ir-mini .vv-texto.muy-largo { font-size: 10px; }
}
.rd-app .ir-movil .ir-mini .vv-texto.largo, .rd-app.app .ir-movil .ir-mini .vv-texto.largo { font-size: 10px; }
.rd-app .ir-movil .ir-mini .vv-texto.muy-largo, .rd-app.app .ir-movil .ir-mini .vv-texto.muy-largo { font-size: 9.5px; }

/* ============================================================
   §11 Lote final (§34–§35 de la propuesta, 18/10/2026): lo propio de la app
   sobre rediseno-lote.css (generado de tanda1/2/3 y guion-compacto).
   ============================================================ */
/* Guardados: «Tu idea» (Ya tengo mi idea); la clase .idea de la página de siempre es una tarjeta */
.rd-app .gd-tipo.propia, .rd-app.app .gd-tipo.propia { background: rgba(245, 158, 11, .16); color: #fdba74; }
/* La pantalla del celular: el contenido bajo la barra de pestañas */
.rd-app .gd-tel .if-scroll, .rd-app.app .gd-tel .if-scroll { padding-bottom: 110px; }
.rd-app .gd-tel .gd-cab, .rd-app.app .gd-tel .gd-cab { margin-top: 8px; }
.rd-app .gd-item h3, .rd-app.app .gd-item h3 { overflow-wrap: anywhere; }
.rd-app .gd-item .t1-sec[aria-busy="true"], .rd-app.app .gd-item .t1-sec[aria-busy="true"] { opacity: .6; }
/* Abierta desde Guardados: el contenido completo (el mismo de «Ver» del panel de siempre) */
.rd-app .gd-detalle, .rd-app.app .gd-detalle { margin-top: 14px; padding: 18px; }
.rd-app .gd-detalle.favorita, .rd-app.app .gd-detalle.favorita { border: 1.5px solid rgba(253, 230, 138, .5); }
.rd-app .gd-detalle h2, .rd-app.app .gd-detalle h2 { margin-top: 10px; font-family: var(--f-titulo); font-size: 24px; line-height: 1.2; letter-spacing: -.01em; }
.rd-app .gd-detalle .gd-acc, .rd-app.app .gd-detalle .gd-acc { margin-top: 12px; padding-top: 0; flex-wrap: wrap; }
.rd-app .gd-detalle .gd-acc .t1-sec, .rd-app.app .gd-detalle .gd-acc .t1-sec { flex: 0 1 auto; }
.rd-app .gd-detalle .gd-borrar, .rd-app.app .gd-detalle .gd-borrar { color: #fda4af; }
.rd-app .gd-contenido, .rd-app.app .gd-contenido { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .08); }
.rd-app .gd-tel .migas, .rd-app.app .gd-esc .migas { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--acento); font-weight: 600; text-decoration: none; }
.rd-app .gd-tel .migas .ico, .rd-app.app .gd-esc .migas .ico { width: 18px; height: 18px; }
/* El contenido abierto usa el guion compacto de siempre (container query ≤ 600 px, como en el panel) */
.rd-app .gd-contenido, .rd-app.app .gd-contenido { max-width: 600px; }
.rd-app.app .gd-esc .gd-detalle { max-width: 680px; }
/* Cupo agotado gratis (vista 46): PRO dorado también en el celular */
.rd-app .ca .pill-pro-oro, .rd-app.app .ca .pill-pro-oro { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #1a1306; background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.rd-app .ca-tel .if-scroll, .rd-app.app .ca-tel .if-scroll { padding-bottom: 110px; }
/* Escritorio: la pantalla de la vista sobre la app (el velo tapa la herramienta de atrás) */
.rd-app .ca-velo, .rd-app.app .ca-velo { background: radial-gradient(70% 38% at 88% -4%, rgba(139, 92, 246, .30), transparent 70%), #070818; padding: 48px 24px; }
.rd-app .ca-pagina, .rd-app.app .ca-pagina { width: 100%; max-width: 760px; margin: auto; }
.rd-app .ca h1, .rd-app.app .ca h1 { font-family: var(--f-titulo); font-weight: 700; }
.rd-app .ca .t1-texto-boton, .rd-app.app .ca .t1-texto-boton { width: 100%; }
/* El menú lateral queda visible y se puede usar, como en la vista (z-index 20 del menú) */
.rd-app.app .ca-velo { z-index: 15; }
.rd-app .ca-minis, .rd-app.app .ca-minis { position: relative; padding-top: 14px; }
.rd-app .ca-ej, .rd-app.app .ca-ej { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 1; }
/* Crear cuenta / entrar en escritorio (vista 46): una caja de 980 px partida en dos.
   Solo aspecto: el formulario (y sus llamadas a Supabase y el CAPTCHA) es el de siempre. */
#rdAcceso .rd-acc-lado { display: none; }
#rdAcceso .cu-demo { display: grid; grid-template-columns: 1fr 72px; gap: 12px; align-items: center; }
#rdAcceso .rd-acc-lado .t1-mini .vista-viva { width: 72px; }
#rdAcceso .rd-acc-lado .t1-pas { align-self: flex-start; }
@media (min-width: 900px) {
  #rdAcceso:not([hidden]):is([data-vista="registro"], [data-vista="entrar"]) { display: grid; grid-template-columns: minmax(0, 490px) minmax(0, 490px); justify-content: center; align-content: center; align-items: stretch; }
  #rdAcceso:is([data-vista="registro"], [data-vista="entrar"]) .rd-acc.activa { max-width: none; margin: 0; border-radius: 28px 0 0 28px; border: 1px solid rgba(196, 181, 253, .16); border-right: 0; background: linear-gradient(180deg, #171a3a, #10122c); box-shadow: -10px 30px 70px rgba(0, 0, 0, .5); }
  #rdAcceso:is([data-vista="registro"], [data-vista="entrar"]) .rd-acc-lado { display: flex; order: 2; border-radius: 0 28px 28px 0; border: 1px solid rgba(196, 181, 253, .16); border-left: 0; box-shadow: 10px 30px 70px rgba(0, 0, 0, .5); }
  #rdAcceso .rd-acc-lado .anillo .valor { stroke: url(#t1-grad-acc); }
}
/* Avisos (vista 50 app-avisos): una pastilla abajo al centro; en el celular, sobre la barra de pestañas */
.rd-app .aviso-lf, .rd-app.app .aviso-lf { position: fixed; z-index: 60; left: 50%; bottom: 96px; max-width: calc(100vw - 32px); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.rd-app .aviso-lf.visible, .rd-app.app .aviso-lf.visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.rd-app .aviso-lf .t3-aviso, .rd-app.app .aviso-lf .t3-aviso { white-space: normal; color: var(--tx); }
.rd-app .aviso-lf .t3-aviso a, .rd-app.app .aviso-lf .t3-aviso a { white-space: nowrap; min-height: 44px; }
@media (min-width: 768px) { .rd-app.app .aviso-lf { bottom: 28px; } }
@media (prefers-reduced-motion: reduce) { .rd-app .aviso-lf, .rd-app.app .aviso-lf { transition: none; } }
/* «Copiado»: verde con tilde (también en los botones de Copiar del rediseño premium) */
.rd-app .copiado.hecho, .rd-app.app .copiado.hecho, .rd-app .ir-sec.hecho, .rd-app.app .ir-sec.hecho { color: #6ee7b7; border-color: rgba(52, 211, 153, .45); background: rgba(52, 211, 153, .1); }
.rd-app .aviso-lf, .rd-app.app .aviso-lf { width: max-content; }
/* En escritorio, centrado sobre el contenido (a la derecha del menú lateral, como la vista) */
@media (min-width: 768px) and (max-width: 1023px) { .rd-app.app .aviso-lf { left: calc(50% + 40px); } }
@media (min-width: 1024px) { .rd-app.app .aviso-lf { left: calc(50% + 128px); } }
/* Recuperar, enviado, nueva contraseña y enlace vencido (vista 50): Orbi de 64 px, título a la
   izquierda y, en escritorio, una caja de 460 px; en el celular a pantalla completa, sin caja */
#rdAcceso .rd-acc-lf .rd-acc-orbi { display: block; width: 64px; height: 64px; margin-top: 8px; }
#rdAcceso .rd-acc-lf .titulo { margin-top: 12px; text-align: left; }
#rdAcceso .rd-acc-lf .rd-acc-sub { margin-top: 6px; }
#rdAcceso .rd-acc-lf .t3-correo { margin: 14px 0 0; max-width: none; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1); font-size: 14.5px; color: #babed8; line-height: 1.45; }
#rdAcceso .rd-acc-lf .t3-correo b { color: #f5f6fb; }
#rdAcceso .rd-acc-lf .t3-ayuda { margin-top: 8px; font-size: 13.5px; color: #9297ba; }
#rdAcceso .ayuda.lf-ok { display: flex; align-items: flex-start; gap: 6px; color: #6ee7b7; }
#rdAcceso .entrada.lf-listo { border-color: rgba(52, 211, 153, .6); }
@media (min-width: 900px) {
  #rdAcceso .rd-acc-lf.activa { max-width: 460px; background: linear-gradient(180deg, #171a3a, #10122c); border-color: rgba(196, 181, 253, .16); }
  #rdAcceso .rd-acc-lf .pantalla { padding: 26px 32px 8px; }
  #rdAcceso .rd-acc-lf .pie-accion { padding: 12px 32px 30px; }
}
/* Guion compacto (vista 52): en el celular, los colores de cada parte (en escritorio los pone .gc-esc) */
.rd-app .gp-tel .gc-lista, .rd-app.app .gp-tel .gc-lista { --c-gancho-claro: #fde68a; }
.rd-app .gc-esc .gc-resumen .gp-linea, .rd-app.app .gc-esc .gc-resumen .gp-linea { margin-top: 14px; }
.rd-app .gc-esc .gc-acciones .gp-acciones-esc, .rd-app.app .gc-esc .gc-acciones .gp-acciones-esc { margin: 0; padding: 0; position: static; }
.rd-app .gc-esc .gc-acciones .gp-botones, .rd-app.app .gc-esc .gc-acciones .gp-botones { display: grid; gap: 8px; }
.rd-app .gc-esc > section, .rd-app.app .gc-esc > section { min-width: 0; }
.rd-app .gc-esc .gp-publicar, .rd-app.app .gc-esc .gp-publicar { margin-top: 10px; }
/* Resumen del guion en escritorio (vista 52): «Otra versión» primero y «Copiar guion» debajo, a todo el ancho */
.rd-app.app .gc-esc .gc-acciones .gp-acciones-esc { background: none; border: 0; border-radius: 0; }
.rd-app.app .gc-esc .gc-acciones .gp-botones { display: flex; flex-direction: column-reverse; gap: 8px; }
.rd-app.app .gc-esc .gc-acciones .gp-botones > * { width: 100%; }
/* «¡Ya eres Pro!» (vista 47): la pantalla del Lenguaje Inicio, centrada (celular y escritorio).
   Encima de todo, como antes (#rdPro, z-index 24). Sin bucles: el halo y las barras quedan quietos. */
#rdPro:not([hidden]) { overflow-y: auto; }
.rd-app .yp-pantalla { min-height: 100%; display: grid; place-items: center; padding: 32px 16px 40px; background: radial-gradient(70% 38% at 88% -4%, rgba(139, 92, 246, .30), transparent 70%), radial-gradient(60% 30% at -12% 30%, rgba(79, 157, 255, .14), transparent 70%), #070818; }
.rd-app .yp-pantalla .yp { width: 100%; }
.rd-app .yp .pill-pro-oro { display: inline-flex; margin-top: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #1a1306; background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.rd-app .yp h1 { font-family: var(--f-titulo); font-weight: 700; }
.rd-app .yp .t1-boton { font-family: var(--f-titulo); }
.rd-app .yp-espera, .rd-app .yp-aviso { margin-left: auto; margin-right: auto; }
.rd-app .yp-espera { padding: 16px; }
@media (max-width: 767px) { .rd-app .yp h1 { font-size: 28px; } }
/* La pantalla ocupa todo #rdPro (antes era una tarjeta centrada en escritorio) */
.rd-app .yp-pantalla { box-sizing: border-box; width: 100%; min-height: 100vh; }
/* Las estrellas de .escena medían más que la pantalla (scroll de 30 px): la pantalla ya trae su fondo */
#rdPro.rd-pro::before, #rdPro.rd-pro::after { display: none; }
/* «Tu saldo» (vista 47): el panel del Lenguaje Inicio dentro de la hoja de siempre
   (celular: desde abajo con velo; escritorio: bajo la pastilla, arriba a la derecha) */
.rd-app .hoja-saldo .panel-saldo.ts-panel, .rd-app.app .hoja-saldo .panel-saldo.ts-panel { width: min(100%, 420px); padding: 18px; background: linear-gradient(180deg, #1a1d42, #10122c); border: 1px solid rgba(196, 181, 253, .28); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); color: var(--tx); }
@media (max-width: 767px) {
  .rd-app .hoja-saldo .panel-saldo.ts-panel { width: 100%; border-radius: 26px 26px 0 0; padding: 16px 16px max(env(safe-area-inset-bottom), 30px); border-bottom: 0; }
}
.rd-app .ts-panel .ts-cab .t1-sec, .rd-app.app .ts-panel .ts-cab .t1-sec { flex: none; }
.rd-app .ts-panel .ts-pro .t1-boton, .rd-app.app .ts-panel .ts-pro .t1-boton { width: 100%; }
.rd-app .ts-panel .pill-pro-oro, .rd-app.app .ts-panel .pill-pro-oro { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #1a1306; background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.rd-app .panel-saldo-fijo .ts-filas, .rd-app.app .panel-saldo-fijo .ts-filas { margin-top: 12px; }
@media (min-width: 768px) { .rd-app.app .hoja-saldo { padding-top: 98px; } }
/* Cuenta → Plan y pagos (vista 50): la tarjeta dorada con Pro, la normal en gratis, los medidores y
   las preguntas en una línea. En el celular es una pantalla aparte (.plan-tel). */
.rd-app .t3-plan h2, .rd-app.app .t3-plan h2 { font-family: var(--f-titulo); font-weight: 700; }
.rd-app .t3-plan .t1-boton, .rd-app.app .t3-plan .t1-boton { width: 100%; font-family: var(--f-titulo); }
.rd-app .t3-plan .t1-boton[disabled], .rd-app.app .t3-plan .t1-boton[disabled] { opacity: .7; cursor: default; }
.rd-app .t3-plan .pill-pro-oro, .rd-app.app .t3-plan .pill-pro-oro { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: .04em; color: #1a1306; background: linear-gradient(135deg, #fbbf24, #f59e0b); }
.rd-app .t3-renueva.aviso b, .rd-app.app .t3-renueva.aviso b { color: inherit; }
.rd-app .plan-tel .if-scroll { padding-bottom: 110px; }
.rd-app .plan-tel .t3-plan { margin-top: 12px; }
@media (max-width: 767px) { .rd-app .plan-tel .t3-usos { grid-template-columns: 1fr; } .rd-app .plan-tel .t3-plan-tarjeta { padding: 16px; } }
/* La lista de Cuenta en escritorio: filas de 56 px con el ícono en un recuadro de 38 px y la pastilla del plan dorada con Pro */
.rd-app.app #rdEscCuentaLista a { min-height: 56px; }
.rd-app.app #rdEscCuentaLista .ico-menu { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); }
.rd-app.app #rdEscPlanPill.lf-pro { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #1a1306; border-color: transparent; font-weight: 800; }
.rd-app.app #rdEscSeccion:has(> .t3-plan) { background: none; border: 0; padding: 0; box-shadow: none; }
/* «Está tardando»: la salida sin recargar (Fable B6) */
.rd-app .yp .yp-volver { width: 100%; border: 0; background: none; font: inherit; font-weight: 700; cursor: pointer; margin-top: 6px; }

/* ============================================================
   §12 Orbi Director dentro del rediseño (antes de REDISENO=encendido)
   La tarjeta de siempre (#motionCard) va en .dir-hueco, sin su fila «Motion ·
   ganchos animados» ni su título (la pantalla ya tiene los suyos).
   ============================================================ */
.rd-app .dir-titulo { font-family: var(--f-titulo); font-size: 28px; letter-spacing: -.025em; line-height: 1.12; margin: 6px 0 0; }
.rd-app .dir-hueco { margin-top: 16px; }
.rd-app .dir-hueco #motionCard { margin: 0; width: 100%; max-width: none; }
.rd-app .dir-hueco #motionCard > .panel-top,
.rd-app .dir-hueco #motionCard .motion-cab > div:first-child { display: none; }
.rd-app .dir-hueco #motionCard { padding: 20px; border-radius: 20px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .08); box-shadow: none; }
.rd-app .dir-hueco #motionCard .motion-cab { justify-content: flex-start; }
/* «Escribir un gancho propio» con el botón principal del rediseño (.t1-boton) */
.rd-app .dir-hueco #motionPropio { width: auto; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border: 0; border-radius: 16px; background: var(--grad-boton); color: #fff; font-family: var(--f-titulo); font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px rgba(91, 108, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .28); }
@media (max-width: 767px) { .rd-app .dir-hueco #motionPropio { width: 100%; } }
.rd-app .dir-tel .if-scroll { padding-bottom: 32px; }
/* «Muy pronto» del menú lateral: la pastilla de las cifras, en gris */
.rd-app .nav-lateral .cifra-nav.pronto { padding: 2px 7px; background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .72); font-weight: 600; font-size: 10.5px; white-space: nowrap; flex-shrink: 0; }
.rd-app .nav-lateral a[aria-disabled="true"] { cursor: default; }
.rd-app .nav-lateral a:has(> .cifra-nav.pronto:not([hidden])) { gap: 10px; }

/* ============================================================
   Mi contenido (19/10/2026, rama mi-contenido; INFORME_MI_CONTENIDO.md, propuesta §36 vista 53):
   «¿Sobre qué exactamente?» en la bienvenida, «¿Te sirve?» en la idea del día, la tarjeta
   única para cuentas que ya existían y Cuenta → Mi contenido. Lenguaje Inicio (§34):
   textos #f5f6fb / #babed8 / #9297ba, toques de 44 px, sin desenfoque ni animaciones.
   ============================================================ */
/* Bienvenida: el tema (opcional) debajo de las categorías */
.rd-app .bv-tema { margin-top: 14px; padding: 14px; border-radius: 18px; border: 1px dashed rgba(196, 181, 253, .35); display: flex; flex-direction: column; gap: 10px; }
.rd-app .bv-tema label { font-weight: 700; font-size: 15px; color: #f5f6fb; }
.rd-app .bv-tema .opcional { font-weight: 500; color: #9297ba; }
.rd-app .bv-tema-ejemplos { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-app .bv-ejemplo { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .04); color: #babed8; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; position: relative; }
.rd-app .bv-ejemplo::after { content: ""; position: absolute; inset: -2px 0; }
.rd-app .bv-ejemplo[aria-pressed="true"] { border-color: #a78bfa; background: rgba(139, 92, 246, .18); color: #fff; }
.rd-app .bv-tema .entrada { min-height: 48px; }

/* «¿Te sirve?» en «Tu idea de hoy» */
.rd-app .ih-opinion { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); }
.rd-app .ih-opinion > span { flex: 1 1 100%; font-size: 12.5px; color: #9297ba; }
.rd-app .ih-opinion button { flex: 1 1 0; min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .04); color: #babed8; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.rd-app .ih-opinion button .ico { width: 16px; height: 16px; }
.rd-app .ih-opinion button.mas[aria-pressed="true"] { color: #6ee7b7; border-color: rgba(52, 211, 153, .5); background: rgba(52, 211, 153, .12); }
.rd-app .ih-opinion button.menos[aria-pressed="true"] { color: #fda4af; border-color: rgba(244, 63, 94, .45); background: rgba(244, 63, 94, .1); }
.rd-app .ih-opinion button[aria-busy="true"] { opacity: .7; }
.rd-app .ih-gracias { margin-top: 8px; font-size: 13px; color: #babed8; }
.rd-app .ih-gracias b { color: #f5f6fb; }
.rd-app .ih-razones { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rd-app .ih-razones button { min-height: 40px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: none; color: #babed8; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; position: relative; }
.rd-app .ih-razones button::after { content: ""; position: absolute; inset: -2px 0; }
.rd-app .ih-razones button[aria-pressed="true"] { border-color: #a78bfa; color: #fff; background: rgba(139, 92, 246, .16); }
/* Encogida: una línea de confirmación con «Cambiar» */
.rd-app .ih-anotado { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 13.5px; color: #babed8; }
.rd-app .ih-anotado > .ico { width: 16px; height: 16px; color: #9297ba; }
.rd-app .ih-anotado > span:not(.sep) { flex: 0 1 auto; min-width: 0; }
.rd-app .ih-anotado .sep { color: #6b6f92; }
/* En el celular el texto puede ocupar dos líneas: «Cambiar» queda a la derecha, sin el punto */
@media (max-width: 767px) { .rd-app .ih-anotado .sep { display: none; } .rd-app .ih-anotado > span:not(.sep) { flex: 1 1 auto; } }
.rd-app .ih-cambiar, .rd-app.app button.ih-cambiar { flex: none; min-height: 40px; padding: 0 4px; border: 0; background: none; color: #c4b5fd; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; position: relative; }
.rd-app .ih-cambiar::after { content: ""; position: absolute; inset: -2px -4px; }

/* «¿De qué fueron tus últimos videos?»: 3 líneas numeradas */
.rd-app .bv-ultimos { gap: 8px; }
.rd-app .bv-ultimo { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; align-items: center; }
.rd-app .bv-ultimo .n { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(139, 92, 246, .18); color: #ddd6fe; font-size: 13px; font-weight: 800; }
.rd-app .bv-saltar-paso { width: 100%; min-height: 44px; margin-top: 4px; }
.rd-app .pie-bv-acc { display: flex; align-items: center; gap: 8px; }
.rd-app .pie-bv-acc .bv-saltar-paso { width: auto; margin-top: 0; white-space: nowrap; }
/* Escritorio: con «Saltar esta pregunta» en todas, la nota no queda en una columna angosta */
.rd-app.app .bienvenida-esc .pie-bv { flex-wrap: wrap; gap: 12px 16px; }
.rd-app.app .bienvenida-esc .pie-bv > .chico { flex: 1 1 220px; min-width: 0; }
.rd-app.app .bienvenida-esc .pie-bv-acc { margin-left: auto; }
.rd-app.app .bienvenida-esc .pie-bv .boton.bv-saltar-paso { min-width: 0; padding: 0 12px; }
/* «Cerrar» arriba (antes «Saltar»): con su X, para que no se confunda con saltar una pregunta */
.rd-app .bv-cerrar { display: inline-flex; align-items: center; gap: 4px; }
.rd-app .bv-cerrar .ico { width: 16px; height: 16px; }
/* Pantalla final: las preguntas que quedaron sin contestar */
.rd-app .bv-faltan { margin: 18px auto 0; max-width: 34ch; text-align: center; font-size: 14px; line-height: 1.45; color: #babed8; }
.rd-app .bv-faltan b { color: #f5f6fb; }
.rd-app .bv-faltan-boton { width: 100%; min-height: 44px; margin-top: 4px; }
.rd-app .panel-pregunta .bv-faltan { margin: 18px 0 0; text-align: left; max-width: none; }
.rd-app .panel-pregunta .bv-faltan-boton { width: auto; margin-top: 8px; padding: 0 16px; }

/* La tarjeta única de Mi contenido (cuentas que contestaron la bienvenida de 3 preguntas): dorada */
.rd-app .recordatorio.rec-completar { border-color: rgba(251, 191, 36, .35); background: radial-gradient(80% 90% at 100% 0%, rgba(245, 158, 11, .2), transparent 60%), linear-gradient(160deg, #221a3e, #10122c 70%); }
.rd-app .recordatorio.rec-completar p b { display: block; color: #fde68a; margin-bottom: 2px; }

/* Cuenta → Mi contenido */
.rd-app .mc .mc-titulo { font-family: var(--f-titulo); font-size: 21px; font-weight: 700; letter-spacing: -.01em; color: #f5f6fb; }
.rd-app .mc .mc-sub { margin-top: 4px; font-size: 14px; color: #babed8; }
.rd-app .mc-progreso { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-size: 13.5px; color: #babed8; }
.rd-app .mc-progreso .barra { flex: 1; height: 6px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.rd-app .mc-progreso .barra i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #8b5cf6, #5b6cff); }
.rd-app .mc-lista { margin-top: 12px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .02); padding: 4px 6px; }
.rd-app .mc-fila { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 60px; padding: 8px 6px; }
.rd-app .mc-fila + .mc-fila { border-top: 1px solid rgba(255, 255, 255, .06); }
.rd-app .mc-fila .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: #babed8; }
.rd-app .mc-fila .ic .ico { width: 18px; height: 18px; }
.rd-app .mc-fila small { display: block; font-size: 12.5px; color: #9297ba; }
.rd-app .mc-fila b { display: block; margin-top: 1px; font-size: 15px; font-weight: 600; line-height: 1.3; color: #f5f6fb; overflow-wrap: anywhere; }
.rd-app .mc-fila b.falta { color: #9297ba; font-weight: 500; font-style: italic; }
.rd-app .mc-fila.mc-falta .ic { background: rgba(251, 191, 36, .1); color: #fcd34d; }
.rd-app .mc .mc-faltan { margin-top: 8px; font-size: 13.5px; line-height: 1.4; color: #fcd34d; }
.rd-app .mc-completar-todo { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; margin-top: 12px; }
.rd-app .mc-completar-todo .ico { width: 16px; height: 16px; }
.rd-app .mc-editar { min-height: 44px; padding: 0 8px; border: 0; background: none; color: var(--acento); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.rd-app .mc-aprendio { margin-top: 14px; padding: 16px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .08); background: linear-gradient(180deg, rgba(23, 26, 58, .95), rgba(16, 18, 44, .95)); }
.rd-app .mc-aprendio h3 { display: flex; align-items: center; gap: 8px; font-family: var(--f-titulo); font-size: 17px; font-weight: 700; color: #f5f6fb; }
.rd-app .mc-aprendio h3 img { width: 30px; height: 30px; }
.rd-app .mc-grupo { margin-top: 12px; }
.rd-app .mc-grupo small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #9297ba; }
.rd-app .mc-grupo small .ico { width: 14px; height: 14px; }
.rd-app .mc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.rd-app .mc-chips span { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 11px; border-radius: 14px; background: rgba(255, 255, 255, .06); color: #babed8; font-size: 13px; font-weight: 600; line-height: 1.3; }
.rd-app .mc-chips.mas span { background: rgba(52, 211, 153, .12); color: #a7f3d0; }
.rd-app .mc-chips.menos span { background: rgba(244, 63, 94, .1); color: #fecdd3; }
.rd-app .mc-vacio { margin-top: 10px; font-size: 13.5px; color: #9297ba; }
.rd-app .mc-olvidar { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 2px; border: 0; background: none; color: #fda4af; font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.rd-app .mc-olvidar.si { padding: 0 14px; border-radius: 12px; border: 1px solid rgba(244, 63, 94, .45); background: rgba(244, 63, 94, .1); }
.rd-app .mc-seguro { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(244, 63, 94, .06); border: 1px solid rgba(244, 63, 94, .25); }
.rd-app .mc-seguro p { font-size: 13.5px; color: #babed8; }
.rd-app .mc-seguro .acc { display: flex; gap: 12px; align-items: center; margin-top: 6px; }
.rd-app .mc-seguro .acc .mc-olvidar:not(.si) { color: #babed8; }
/* En el escritorio los botones heredan otro tamaño y color: los de Mi contenido van con los suyos */
.rd-app .mc button.mc-editar, .rd-app.app .mc button.mc-editar { color: #c4b5fd; font-size: 14px; font-weight: 700; }
.rd-app .mc button.mc-olvidar, .rd-app.app .mc button.mc-olvidar { color: #fda4af; font-size: 13.5px; font-weight: 700; }
.rd-app .mc .mc-seguro button.mc-olvidar:not(.si), .rd-app.app .mc .mc-seguro button.mc-olvidar:not(.si) { color: #babed8; }

/* Orbi Worlds y Orbi Editor en el inicio (03/11/2026): solo para cuentas con acceso (maqueta capturas/worlds-intuitivo) */
.rd-app .av-mundo { position: relative; overflow: hidden; }
/* 03/11/2026: el planeta, la órbita y su brillo quedan a 3 px o más del borde del marco en todo el bucle (antes el brillo de
   22 px y la órbita de 92 × 34 se salían y el marco los cortaba); lo mide tests/inicio-worlds-editor.test.mjs en Chromium */
.rd-app .av-mundo .mu-planeta { position: absolute; left: 50%; top: 50%; width: 42px; height: 42px; margin: -21px 0 0 -21px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 32% 28%, #7dd3fc, #0e7490 58%, #0b3b61); box-shadow: inset -6px -6px 12px rgba(0,0,0,.35), 0 0 7px rgba(56,189,248,.35); }
.rd-app .av-mundo .mu-tierra { position: absolute; border-radius: 45% 55% 50% 40%; background: #34d399; opacity: .9; animation: rd-mu-gira 6s linear infinite; }
.rd-app .av-mundo .mu-tierra.a { width: 16px; height: 10px; top: 10px; left: 3px; }
.rd-app .av-mundo .mu-tierra.b { width: 12px; height: 8px; top: 24px; left: 22px; animation-delay: -3s; }
.rd-app .av-mundo .mu-arbol { position: absolute; top: 6px; left: 22px; width: 4px; height: 7px; border-radius: 50% 50% 2px 2px; background: #a7f3d0; animation: rd-mu-gira 6s linear infinite -1.5s; }
@keyframes rd-mu-gira { from { transform: translateX(-44px); } to { transform: translateX(44px); } }
.rd-app .av-mundo .mu-orbita { position: absolute; left: 50%; top: 50%; width: 76px; height: 26px; margin: -13px 0 0 -38px; border-radius: 50%; border: 1.5px solid rgba(167,139,250,.55); transform: rotate(-14deg); }
.rd-app .av-mundo .mu-orbita i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #f9fafb; box-shadow: 0 0 5px #a78bfa; offset-path: ellipse(38px 13px at 38px 13px); animation: rd-mu-orbita 3.2s linear infinite; }
/* la insignia «Lo más nuevo»: arriba a la derecha del recuadro de la ilustración, sobre su borde, con la llama que se estira
   cada 1,1 s. Debajo del color pedido va el fondo de la tarjeta, para que la línea del borde no se vea a través */
.rd-app .mosaico-hoy .mu-nuevo { position: absolute; top: 0; right: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px;
  background: linear-gradient(rgba(255,122,61,.16), rgba(255,122,61,.16)), #171a3a; border: 1px solid rgba(255,140,80,.45); color: #FFB48A;
  font-size: 10.5px; font-weight: 700; line-height: 14px; letter-spacing: .01em; white-space: nowrap; }
.rd-app .mosaico-hoy .mu-llama { width: 9px; height: 12px; flex: none; overflow: visible; }
.rd-app .mosaico-hoy .mu-llama path { transform-box: fill-box; transform-origin: 50% 100%; animation: rd-mu-llama 1.1s ease-in-out infinite; }
.rd-app .mosaico-hoy .mu-llama .fuera { fill: #FF7A3D; }
.rd-app .mosaico-hoy .mu-llama .dentro { fill: #FFD66B; animation-delay: -.25s; }
@keyframes rd-mu-llama { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.94, 1.14); } }
@keyframes rd-mu-orbita { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.rd-app .av-mundo .mu-estrella, .rd-app .av-ilus .mu-estrella { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: #fff; animation: rd-mu-brilla 2.4s ease-in-out infinite var(--d, 0s); }
@keyframes rd-mu-brilla { 50% { opacity: .2; transform: scale(.6); } }
.rd-app .av-editor { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 7px; padding: 0 14px; }
.rd-app .av-editor .ed-pista { display: flex; gap: 4px; height: 16px; }
.rd-app .av-editor .ed-pista.sub { height: 8px; opacity: .7; }
.rd-app .av-editor .ed-pista i { width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #8b5cf6, #5b6cff); }
.rd-app .av-editor .ed-pista.sub i { background: rgba(79,157,255,.6); }
.rd-app .av-editor .ed-pista i.corte { background: rgba(255,255,255,.18); animation: rd-ed-corte 3s ease-in-out infinite; }
@keyframes rd-ed-corte { 0%, 40% { opacity: 1; } 55%, 100% { opacity: .15; transform: scaleX(.2); } }
.rd-app .av-editor .ed-cabezal { position: absolute; top: 18%; bottom: 18%; left: 14px; width: 2px; background: #f472b6; box-shadow: 0 0 8px #f472b6; animation: rd-ed-cabezal 3s ease-in-out infinite; }
@keyframes rd-ed-cabezal { from { left: 14px; } to { left: calc(100% - 16px); } }
.rd-app .av-editor .ed-tijera { position: absolute; top: 6px; left: 44%; color: #fff; animation: rd-ed-tijera 3s ease-in-out infinite; }
.rd-app .av-editor .ed-tijera .ico { width: 16px; height: 16px; }
@keyframes rd-ed-tijera { 0%, 30% { opacity: 0; transform: translateY(-4px); } 40%, 55% { opacity: 1; transform: translateY(0) rotate(-12deg); } 70%, 100% { opacity: 0; } }
.rd-app .nav-lateral a.nav-nuevo .ico { color: #93c5fd; }
/* con las tarjetas nuevas, en escritorio la fila pasa a 3 columnas (3 × 2 con seis) */
@media (min-width: 1024px) { .rd-app .inicio-final-esc .mosaicos-hoy:has(.mosaico-nuevo) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Las 4 entradas de siempre con el estilo de Orbi Worlds y Orbi Editor (03/11/2026): un solo
   elemento grande y centrado, brillo suave detrás (--brillo), estrellas y un bucle de 3–4 s.
   Cada pieza va sola en el centro del marco (absoluta, inset 0 + margin auto, con su tamaño):
   antes iban en una grilla y el brillo, más alto que el marco, la estiraba y bajaba el dibujo.
   Medidas para el marco más chico (68 px de alto): lo más grande de cada una, con su brillo y en
   el punto más grande del bucle, queda a 4 px o más del borde (lo mide tests/inicio-worlds-editor).
   El estado sin animación (reducir movimiento) es el final: foco encendido, barras en orden,
   anillos llenos y la nota en 7 */
.rd-app .av-ilus { position: relative; overflow: hidden; }
.rd-app .av-ilus > :not(.mu-estrella) { position: absolute; inset: 0; margin: auto; }
.rd-app .av-ilus .il-halo { width: 54px; height: 54px; border-radius: 50%; background: radial-gradient(circle, var(--brillo) 0%, transparent 68%); opacity: .75; animation: rd-il-halo 3.2s ease-in-out infinite; }
@keyframes rd-il-halo { 50% { opacity: 1; transform: scale(1.08); } }
/* Dame ideas: la bombilla que brilla y 3 chispas que suben */
.rd-app .av-bombilla { --brillo: rgba(253, 224, 71, .36); }
.rd-app .av-bombilla .bo-foco { width: 32px; height: 39px; overflow: visible; filter: drop-shadow(0 0 4px rgba(253, 224, 71, .5)); animation: rd-bo-foco 3.2s ease-in-out infinite; }
@keyframes rd-bo-foco { 50% { filter: drop-shadow(0 0 8px rgba(253, 224, 71, .85)); transform: translateY(-1px); } }
.rd-app .av-bombilla .vidrio { fill: url(#grad-foco); }
.rd-app .av-bombilla .filamento { fill: none; stroke: #b45309; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.rd-app .av-bombilla .rosca { fill: #a5acd6; }
.rd-app .av-bombilla .bo-chispa { width: 9px; height: 9px; background: #fde68a; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); transform: translate(var(--x), var(--y)) rotate(45deg); animation: rd-bo-chispa 3.3s ease-in-out infinite backwards var(--d); }
@keyframes rd-bo-chispa {
  0% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 5px)) scale(.4) rotate(0deg); }
  35%, 60% { opacity: 1; transform: translate(var(--x), var(--y)) scale(1) rotate(45deg); }
  100% { opacity: 0; transform: translate(var(--x), calc(var(--y) - 6px)) scale(.5) rotate(90deg); }
}
/* Ya tengo mi idea: la notita se ordena sola en 3 barras (inicio, historia, cierre: los colores del guion) */
.rd-app .av-tengo { --brillo: rgba(139, 92, 246, .34); }
.rd-app .av-tengo .no-nota { width: 28px; height: 32px; border-radius: 5px; transform: rotate(-7deg);
  background: linear-gradient(transparent 8px, rgba(63, 45, 6, .28) 8px 10px, transparent 10px 15px, rgba(63, 45, 6, .28) 15px 17px, transparent 17px 22px, rgba(63, 45, 6, .2) 22px 24px, transparent 24px) 5px 0 / 18px 100% no-repeat, #fde68a;
  box-shadow: 0 0 8px rgba(253, 230, 138, .35); opacity: 0; animation: rd-no-nota 4s ease-in-out infinite; }
@keyframes rd-no-nota { 0%, 16% { opacity: 1; transform: rotate(-7deg) scale(1); } 28%, 88% { opacity: 0; transform: rotate(0deg) scale(.55); } 100% { opacity: 1; transform: rotate(-7deg) scale(1); } }
.rd-app .av-tengo .no-barras { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 62px; height: 39px; }
.rd-app .av-tengo .no-barras i { display: block; height: 9px; border-radius: 5px; transform-origin: left center; animation: rd-no-barra 4s ease-in-out infinite backwards; animation-delay: calc(var(--i) * .28s); }
.rd-app .av-tengo .no-barras i:nth-child(1) { width: 100%; background: #f472b6; box-shadow: 0 0 6px rgba(244, 114, 182, .6); }
.rd-app .av-tengo .no-barras i:nth-child(2) { width: 78%; background: #8b5cf6; box-shadow: 0 0 6px rgba(139, 92, 246, .6); }
.rd-app .av-tengo .no-barras i:nth-child(3) { width: 90%; background: #4f9dff; box-shadow: 0 0 6px rgba(79, 157, 255, .6); }
@keyframes rd-no-barra { 0%, 24% { opacity: 0; transform: translateX(-6px) scaleX(.15); } 38%, 72% { opacity: 1; transform: none; } 84%, 100% { opacity: 0; transform: none; } }
/* Haz mi video: el play grande y un anillo de luz que se llena (redondo y rosa: no es la órbita de Worlds) */
.rd-app .av-play { --brillo: rgba(244, 114, 182, .32); }
.rd-app .av-play .pl-anillo { width: 50px; height: 50px; transform: rotate(-90deg); overflow: visible; }
.rd-app .av-play .pl-anillo circle { fill: none; stroke-width: 3; }
.rd-app .av-play .pl-anillo .pista { stroke: rgba(255, 255, 255, .1); }
.rd-app .av-play .pl-anillo .luz { stroke: #f9a8d4; stroke-linecap: round; stroke-dasharray: 182.2; stroke-dashoffset: 0; filter: drop-shadow(0 0 3px rgba(244, 114, 182, .9)); animation: rd-pl-luz 3.6s ease-in-out infinite; }
@keyframes rd-pl-luz { 0% { stroke-dashoffset: 182.2; opacity: 1; } 70%, 84% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
.rd-app .av-play .pl-boton { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #f472b6, #8b5cf6); box-shadow: 0 0 8px rgba(244, 114, 182, .45); color: #fff; animation: rd-pl-boton 3.6s ease-in-out infinite; }
.rd-app .av-play .pl-boton .ico, .rd-app .av-play .pl-boton svg { width: 14px; height: 14px; fill: currentColor; margin-left: 2px; }
@keyframes rd-pl-boton { 0%, 64% { transform: scale(1); } 74% { transform: scale(1.06); box-shadow: 0 0 12px rgba(244, 114, 182, .7); } 86%, 100% { transform: scale(1); } }
/* Revisa mi video: el anillo de la nota, más grande, y el número que sube hasta 7 */
@property --rd-nota { syntax: '<integer>'; inherits: false; initial-value: 0; }
.rd-app .av-revisa { --brillo: rgba(91, 108, 255, .36); }
.rd-app .av-revisa .an-anillo { width: 50px; height: 50px; transform: rotate(-90deg); overflow: visible; filter: drop-shadow(0 0 4px rgba(91, 108, 255, .55)); }
.rd-app .av-revisa .an-anillo circle { fill: none; stroke-width: 7; }
.rd-app .av-revisa .an-anillo .pista { stroke: rgba(255, 255, 255, .1); }
.rd-app .av-revisa .an-anillo .valor { stroke: url(#grad-av); stroke-linecap: round; stroke-dasharray: 169.65; stroke-dashoffset: 50.9; animation: rd-an-valor 3.6s ease-in-out infinite; }
@keyframes rd-an-valor { 0% { stroke-dashoffset: 169.65; opacity: 1; } 55%, 84% { stroke-dashoffset: 50.9; opacity: 1; } 100% { stroke-dashoffset: 50.9; opacity: 0; } }
/* el número va en la tarjeta, que en escritorio da a su <b> 15 px, relleno y puntos suspensivos: aquí no */
.rd-app .mosaico-hoy .av-revisa .an-num, .rd-app.app .mosaico-hoy .av-revisa .an-num { display: grid; place-items: center; width: 50px; height: 50px; padding: 0; overflow: visible;
  --rd-nota: 7; counter-reset: rd-nota var(--rd-nota); font: 700 19px/1 var(--f-titulo); color: #fff; animation: rd-an-num 3.6s ease-in-out infinite; }
.rd-app .av-revisa .an-num::after { content: counter(rd-nota); }
@keyframes rd-an-num { 0% { --rd-nota: 0; opacity: 1; } 55%, 84% { --rd-nota: 7; opacity: 1; } 100% { --rd-nota: 7; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .rd-app .av-mundo *, .rd-app .av-editor *, .rd-app .av-ilus * { animation: none !important; }
  .rd-app .mu-nuevo * { animation: none !important; }
  .rd-app .av-tengo .no-nota { display: none; }
}

/* ============================================================
   Guías de la primera vez (vista 18): el globito de Orbi (versión A) de la guía de
   Ideas, fuera de las pantallas (va en <body>, encima de todo). El velo es la sombra
   del recuadro que rodea lo señalado: lo señalado queda a la vista y nada de esto
   recibe toques, salvo el globo. Valores de .if-globo / .ir-globo (rediseno-premium.css).
   ============================================================ */
.rdg { position: fixed; inset: 0; z-index: 9000; pointer-events: none; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #f5f6fb; -webkit-text-size-adjust: 100%; }
.rdg[hidden] { display: none; }
.rdg-foco { position: fixed; border-radius: 16px; box-shadow: 0 0 0 2px rgba(196, 181, 253, .7), 0 0 0 8px rgba(139, 92, 246, .18), 0 0 0 9999px rgba(4, 5, 16, .7); pointer-events: none; transition: left .2s ease-out, top .2s ease-out, width .2s ease-out, height .2s ease-out; }
.rdg-globo { position: fixed; box-sizing: border-box; padding: 14px; border-radius: 20px; background: #1d2049; border: 1px solid rgba(196, 181, 253, .38); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); pointer-events: auto; }
.rdg-globo.entra { animation: rdg-entra .25s ease-out 1 both; }
@keyframes rdg-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rdg-globo::before { content: ""; position: absolute; width: 16px; height: 16px; background: #1d2049; border: 1px solid rgba(196, 181, 253, .38); transform: rotate(45deg); }
.rdg-globo[data-lado="abajo"]::before { top: -9px; left: calc(var(--flecha, 40px) - 8px); border-right: 0; border-bottom: 0; }
.rdg-globo[data-lado="arriba"]::before { bottom: -9px; left: calc(var(--flecha, 40px) - 8px); border-left: 0; border-top: 0; }
.rdg-globo[data-lado="derecha"]::before { left: -9px; top: calc(var(--flecha, 40px) - 8px); border-right: 0; border-top: 0; }
.rdg-globo[data-lado="izquierda"]::before { right: -9px; top: calc(var(--flecha, 40px) - 8px); border-left: 0; border-bottom: 0; }
.rdg-fila { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: center; }
.rdg-fila img { width: 44px; height: 44px; }
.rdg-fila p { margin: 0; font-size: 15px; line-height: 1.45; color: #f5f6fb; }
.rdg-pie { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rdg-n { margin-right: auto; font-size: 12.5px; font-weight: 700; color: #9297ba; }
.rdg-saltar, .rdg-sig { min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; }
.rdg-saltar { background: none; color: #babed8; }
.rdg-sig { background: linear-gradient(135deg, #7442e6 0%, #4b57e3 55%, #2563eb 100%); color: #fff; }
.rdg-saltar:focus-visible, .rdg-sig:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(196, 181, 253, .55); }
@media (prefers-reduced-motion: reduce) {
  .rdg-globo.entra { animation: none; }
  .rdg-foco { transition: none; }
}

/* Mis planes (§37): la fila «fantasma» de la espera de la serie choca con la .fantasma de
   siempre (index.html, la espera del analizador: 150 px de alto y fondo de tarjeta) */
.rd-app .mp-cap.fantasma { position: static; height: auto; overflow: visible; background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07); border-radius: 0; }
/* «También puedo proponerte» (Dame una idea): en la app son botones; mismo aspecto que las pastillas de la maqueta */
.rd-app .mp-otros button { min-height: 40px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .14); background: none; color: var(--tx2); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.rd-app .mp-otros button.si { border-color: #a78bfa; color: #fff; background: rgba(139, 92, 246, .16); }
/* Plan del mes y «Agregar mi idea» (21/10/2026): la hoja de abajo (.pm-hoja, plan-mes.css) en la maqueta
   era absoluta dentro del teléfono; en la app va fija en la pantalla, sobre las pestañas, y con
   scroll si no entra. Más específica que rediseno-planes.css, que se carga después. */
.rd-app .mp .pm-velo, .rd-app.app .mp .pm-velo { position: fixed; inset: 0; z-index: 900; }
.rd-app .mp .pm-hoja, .rd-app.app .mp .pm-hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 901; max-height: 88vh; overflow-y: auto; max-width: 560px; margin: 0 auto; }
@media (min-width: 900px) { .rd-app .mp .pm-hoja, .rd-app.app .mp .pm-hoja { bottom: auto; top: 50%; transform: translateY(-50%); border-radius: 26px; border: 1px solid rgba(255, 255, 255, .1); } }
.rd-app .mp .pm-ops button > span:nth-child(2) { min-width: 0; }
.rd-app .mp .pm-campo input:focus { outline: none; }

/* «Editar mi grabación con Orbi» bajo «Ya tengo mi idea» (pulido-web, 08/11/2026): solo con Orbi Editor, como enlace a /editor */
.rd-app a.proximamente-fila { text-decoration: none; border-style: solid; color: var(--texto-2); }
.rd-app a.proximamente-fila:hover { color: var(--texto); border-color: var(--acento, #8b7bff); }