/* ==========================================================================
   RootFunnel Docs — app.css
   --------------------------------------------------------------------------
   Índice de este archivo:
     1.  Variables de marca y tema
     2.  Reinicio y base
     3.  Piezas reutilizables (botones, tarjetas, progreso, píldoras)
     4.  Pantalla de acceso
     5.  Armazón de la app (barra lateral, cabecera, pestañas inferiores)
     6.  Vista Inicio
     7.  Vista Sección
     8.  Vista Mi espacio
     9.  Buscador global
     10. Offcanvas (visor de documentos)
     11. Tipografía del Markdown renderizado
     12. Estados: carga, error, vacío, avisos
     13. Adaptación por dispositivo
     14. Impresión
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES DE MARCA Y TEMA
   ========================================================================== */

:root {
  /* --- Paleta de marca original (referencia) ----------------------------
     Son los colores del encargo. Ya no los usa ninguna regla directamente:
     el acento sale siempre del preset activo (ver "PRESETS DE COLOR"), y el
     preset "rootfunnel" reproduce exactamente esta paleta.               */
  --rf-verde:          #2FB463;   /* verde primario — crecimiento */
  --rf-verde-claro:    #5FD98A;   /* verde claro — acento */
  --rf-azul:           #1B3E8F;   /* azul profundo — confianza */
  --rf-azul-medio:     #2563A8;

  /* --- Color de acento -------------------------------------------------
     La app usa COLORES PLANOS, sin degradados. Estas tres variables las
     redefine cada preset (ver el bloque "PRESETS DE COLOR" más abajo), así
     que todo lo que dependa del acento cambia de golpe.

       --rf-primario         color vivo: barras, anillos, bordes, foco
       --rf-primario-fuerte  versión oscura: fondo de botones con texto blanco
       --rf-primario-suave   tinte translúcido para fondos                */
  --rf-primario:        #2FB463;
  --rf-primario-fuerte: #14713D;
  --rf-secundario:      #2563A8;
  --rf-secundario-texto:#2563A8;
  --rf-texto-boton:     #FFFFFF;

  /* Tintes derivados: NO se escriben a mano en ningún sitio. Como se
     calculan a partir de --rf-primario, siguen solos al preset activo. */
  --rf-primario-suave:  color-mix(in srgb, var(--rf-primario) 12%, transparent);
  --rf-tinte-8:         color-mix(in srgb, var(--rf-primario)  8%, transparent);
  --rf-tinte-14:        color-mix(in srgb, var(--rf-primario) 14%, transparent);
  --rf-tinte-22:        color-mix(in srgb, var(--rf-primario) 22%, transparent);
  --rf-tinte-32:        color-mix(in srgb, var(--rf-primario) 32%, transparent);
  --rf-borde-acento:    color-mix(in srgb, var(--rf-primario) 45%, transparent);
  --rf-anillo-foco:     color-mix(in srgb, var(--rf-primario) 28%, transparent);
  --rf-sec-tinte-12:    color-mix(in srgb, var(--rf-secundario) 12%, transparent);
  --rf-sec-tinte-22:    color-mix(in srgb, var(--rf-secundario) 22%, transparent);
  --rf-sec-borde:       color-mix(in srgb, var(--rf-secundario) 55%, transparent);

  /* --- Superficies y texto (modo claro) --------------------------------
     También se derivan del preset. Son mezclas muy suaves del color de
     acento sobre blanco: lo justo para que el fondo, los hovers y los
     bordes "sepan" al tema elegido sin restar legibilidad al texto.
     Antes eran verdes fijos, y por eso la app seguía viéndose verde
     aunque cambiaras de preset.                                         */
  --rf-fondo:          color-mix(in srgb, var(--rf-primario)  5%, #FFFFFF);
  --rf-superficie:     #FFFFFF;
  --rf-superficie-2:   color-mix(in srgb, var(--rf-primario)  8%, #FFFFFF);
  --rf-superficie-3:   color-mix(in srgb, var(--rf-primario) 15%, #FFFFFF);
  --rf-oscuro:         color-mix(in srgb, var(--rf-primario) 14%, #0C1620);
  --rf-texto:          #1A2430;
  --rf-texto-2:        #5A6672;
  /* Terciario (metadatos, marcadores de posición, contadores). Medido para
     dar >= 4.5:1 sobre --rf-superficie-2, que es la superficie más clara
     donde aparece. Antes era #7C8894 y se quedaba en 3.3:1. */
  --rf-texto-3:        #5F6B78;
  --rf-borde:          color-mix(in srgb, var(--rf-primario) 18%, #FFFFFF);
  --rf-borde-fuerte:   color-mix(in srgb, var(--rf-primario) 34%, #FFFFFF);

  /* Acentos con contraste AA sobre fondo claro.
     El verde de marca (#2FB463) no llega a 4.5:1 sobre blanco, así que
     para texto y enlaces se usa una versión oscurecida. */
  --rf-acento-texto:   #14713D;
  --rf-enlace:         #1B3E8F;
  --rf-enlace-hover:   #14306F;

  /* Colores de estado. Igual que el rojo de peligro y el ámbar de aviso,
     estos NO siguen al preset: "leído" y "favorito" tienen un significado
     propio y deben reconocerse igual con cualquier tema. */
  --rf-leido-fondo:    #15803D;
  /* Filo que perfila las marcas. En claro define el círculo amarillo
     (que casi no contrasta con la tarjeta blanca); en oscuro, el verde. */
  --rf-filo-marca:     rgba(0, 0, 0, .22);
  --rf-leido-texto:    #FFFFFF;
  --rf-favorito-fondo: #F2C230;
  --rf-favorito-texto: #453200;
  --rf-exito:          #2FB463;
  --rf-aviso:          #B4720F;
  --rf-error:          #B3261E;
  --rf-error-fondo:    #FDECEA;

  /* Sombras — sutiles, nunca duras */
  --rf-sombra-1: 0 1px 2px rgba(15,33,51,.05), 0 1px 3px rgba(15,33,51,.06);
  --rf-sombra-2: 0 2px 6px rgba(15,33,51,.06), 0 6px 18px rgba(15,33,51,.07);
  --rf-sombra-3: 0 8px 24px rgba(15,33,51,.10), 0 24px 48px rgba(15,33,51,.12);
  --rf-sombra-panel: -12px 0 40px rgba(15,33,51,.18);

  /* --- Tipografía ------------------------------------------------------- */
  /* Cuando esté disponible la fuente de marca (BC Liguria u otra), basta con
     redefinir --rf-fuente-marca — o las dos — desde aquí. */
  --rf-fuente:       -apple-system, BlinkMacSystemFont, "Segoe UI", Inter,
                     Roboto, "Helvetica Neue", Arial, sans-serif;
  --rf-fuente-marca: var(--rf-fuente);
  --rf-fuente-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                     Consolas, "Liberation Mono", monospace;

  /* Escala tipográfica */
  --rf-t-xs:   .75rem;
  --rf-t-sm:   .8125rem;
  --rf-t-base: .9375rem;
  --rf-t-md:   1rem;
  --rf-t-lg:   1.125rem;
  --rf-t-xl:   1.375rem;
  --rf-t-2xl:  1.75rem;
  --rf-t-3xl:  2.125rem;

  /* --- Formas, espacios y movimiento ----------------------------------- */
  --rf-radio-s:  10px;
  --rf-radio:    14px;
  --rf-radio-l:  20px;
  --rf-radio-xl: 28px;

  --rf-transicion:       220ms cubic-bezier(.4, 0, .2, 1);
  --rf-transicion-lenta: 300ms cubic-bezier(.32, .72, 0, 1);

  /* Medidas del armazón */
  --rf-lateral:     282px;
  --rf-cabecera:    64px;
  --rf-pestanas:    58px;
  --rf-seguro-inf:  env(safe-area-inset-bottom, 0px);
  --rf-seguro-sup:  env(safe-area-inset-top, 0px);

  /* Tamaño de letra del visor — lo ajusta el usuario desde el menú ⋮ */
  --rf-lectura: 1.0625rem;

  color-scheme: light;
}

/* --- Modo oscuro ---------------------------------------------------------
   El atributo data-tema lo escribe app.js con el valor ya resuelto
   ("claro" u "oscuro"), tanto si viene de la preferencia guardada como si
   viene de prefers-color-scheme. Así el CSS sólo necesita un bloque. */
html[data-tema="oscuro"] {
  /* Mismo criterio que en claro, pero mezclando sobre una base casi negra
     y neutra: cada preset tiñe sus propias superficies oscuras. */
  --rf-fondo:        color-mix(in srgb, var(--rf-primario)  6%, #0A1016);
  --rf-superficie:   color-mix(in srgb, var(--rf-primario)  9%, #121A22);
  --rf-superficie-2: color-mix(in srgb, var(--rf-primario) 13%, #18222C);
  --rf-superficie-3: color-mix(in srgb, var(--rf-primario) 17%, #1F2C38);
  --rf-oscuro:       color-mix(in srgb, var(--rf-primario)  8%, #070C11);
  --rf-texto:        #E8F0F5;
  /* Los presets más luminosos (ámbar, verde) aclaran las superficies
     oscuras, así que el secundario necesita un punto más de claridad
     para no quedarse por debajo de 4.5:1 sobre --rf-superficie-3. */
  --rf-texto-2:      #AFC0CD;
  --rf-texto-3:      #9BAEBD;
  --rf-borde:        color-mix(in srgb, var(--rf-primario) 20%, #22303D);
  --rf-borde-fuerte: color-mix(in srgb, var(--rf-primario) 32%, #2C3E4E);

  --rf-acento-texto: #6FE09A;
  --rf-enlace:       #7FB5F0;
  --rf-enlace-hover: #A6CDF7;

  --rf-error-fondo:  #3A1A18;
  --rf-error:        #FF9B93;
  --rf-aviso:        #F0B44B;
  --rf-favorito-fondo: #F5CB43;
  --rf-filo-marca:   rgba(255, 255, 255, .32);

  --rf-sombra-1: 0 1px 2px rgba(0,0,0,.30);
  --rf-sombra-2: 0 2px 8px rgba(0,0,0,.34), 0 8px 24px rgba(0,0,0,.28);
  --rf-sombra-3: 0 10px 30px rgba(0,0,0,.45), 0 28px 56px rgba(0,0,0,.35);
  --rf-sombra-panel: -14px 0 46px rgba(0,0,0,.5);

  --rf-texto-boton: #08131F;

  color-scheme: dark;
}

/* Quien pida menos movimiento, lo recibe. */
@media (prefers-reduced-motion: reduce) {
  :root { --rf-transicion: 1ms; --rf-transicion-lenta: 1ms; }
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}




/* ==========================================================================
   1 bis. PRESETS DE COLOR
   --------------------------------------------------------------------------
   Cada preset redefine SÓLO estas variables. Todo lo demás (tintes, bordes,
   resaltados) se deriva de ellas con color-mix, así que no hay ni un color
   de acento escrito a mano en el resto de la hoja: cambiar de preset cambia
   la app entera.

     --rf-primario        color vivo   → barras, anillos, bordes, marcas
     --rf-primario-fuerte fondo de botón (con --rf-texto-boton encima)
     --rf-acento-texto    texto de acento sobre superficie
     --rf-secundario      segundo color, para distinguir lo que no puede
                          compartir tono con el primario (apuntes personales)
     --rf-texto-boton     el color que va ENCIMA de --rf-primario-fuerte

   Contraste: en claro "fuerte" es oscuro (texto blanco encima, y legible
   como texto sobre el fondo claro); en oscuro pasa a ser el tono claro y el
   texto del botón se vuelve oscuro. Así los dos modos cumplen AA.
   ========================================================================== */


/* RootFunnel */
html[data-color="rootfunnel"] {
  --rf-primario:        #2FB463;
  --rf-primario-fuerte: #14713D;
  --rf-acento-texto:    #14713D;
  --rf-enlace:          #14713D;
  --rf-enlace-hover:    #2FB463;
  --rf-exito:           #2FB463;
  --rf-secundario:      #2563A8;
  --rf-secundario-texto:#2563A8;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="rootfunnel"] {
  --rf-primario:        #6FE09A;
  --rf-primario-fuerte: #6FE09A;
  --rf-acento-texto:    #6FE09A;
  --rf-enlace:          #6FE09A;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #6FE09A;
  --rf-secundario:      #7FB5F0;
  --rf-secundario-texto:#7FB5F0;
  --rf-texto-boton:     #08131F;
}

/* Bosque */
html[data-color="bosque"] {
  --rf-primario:        #14876B;
  --rf-primario-fuerte: #0B5A46;
  --rf-acento-texto:    #0B5A46;
  --rf-enlace:          #0B5A46;
  --rf-enlace-hover:    #14876B;
  --rf-exito:           #14876B;
  --rf-secundario:      #8A5A1F;
  --rf-secundario-texto:#8A5A1F;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="bosque"] {
  --rf-primario:        #5FD9B4;
  --rf-primario-fuerte: #5FD9B4;
  --rf-acento-texto:    #5FD9B4;
  --rf-enlace:          #5FD9B4;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #5FD9B4;
  --rf-secundario:      #E0B071;
  --rf-secundario-texto:#E0B071;
  --rf-texto-boton:     #08131F;
}

/* Océano */
html[data-color="oceano"] {
  --rf-primario:        #2563A8;
  --rf-primario-fuerte: #1B3E8F;
  --rf-acento-texto:    #1B3E8F;
  --rf-enlace:          #1B3E8F;
  --rf-enlace-hover:    #2563A8;
  --rf-exito:           #2563A8;
  --rf-secundario:      #14876B;
  --rf-secundario-texto:#14876B;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="oceano"] {
  --rf-primario:        #7FB5F0;
  --rf-primario-fuerte: #7FB5F0;
  --rf-acento-texto:    #7FB5F0;
  --rf-enlace:          #7FB5F0;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #7FB5F0;
  --rf-secundario:      #5FD9B4;
  --rf-secundario-texto:#5FD9B4;
  --rf-texto-boton:     #08131F;
}

/* Índigo */
html[data-color="indigo"] {
  --rf-primario:        #4F46E5;
  --rf-primario-fuerte: #3730A3;
  --rf-acento-texto:    #3730A3;
  --rf-enlace:          #3730A3;
  --rf-enlace-hover:    #4F46E5;
  --rf-exito:           #4F46E5;
  --rf-secundario:      #0E7C6B;
  --rf-secundario-texto:#0E7C6B;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="indigo"] {
  --rf-primario:        #A5B4FC;
  --rf-primario-fuerte: #A5B4FC;
  --rf-acento-texto:    #A5B4FC;
  --rf-enlace:          #A5B4FC;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #A5B4FC;
  --rf-secundario:      #5FD9B4;
  --rf-secundario-texto:#5FD9B4;
  --rf-texto-boton:     #08131F;
}

/* Violeta */
html[data-color="violeta"] {
  --rf-primario:        #7A4FD6;
  --rf-primario-fuerte: #5B2CA8;
  --rf-acento-texto:    #5B2CA8;
  --rf-enlace:          #5B2CA8;
  --rf-enlace-hover:    #7A4FD6;
  --rf-exito:           #7A4FD6;
  --rf-secundario:      #167C8A;
  --rf-secundario-texto:#167C8A;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="violeta"] {
  --rf-primario:        #C4B5FD;
  --rf-primario-fuerte: #C4B5FD;
  --rf-acento-texto:    #C4B5FD;
  --rf-enlace:          #C4B5FD;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #C4B5FD;
  --rf-secundario:      #6FD3E0;
  --rf-secundario-texto:#6FD3E0;
  --rf-texto-boton:     #08131F;
}

/* Ciruela */
html[data-color="ciruela"] {
  --rf-primario:        #B4318A;
  --rf-primario-fuerte: #8A1F68;
  --rf-acento-texto:    #8A1F68;
  --rf-enlace:          #8A1F68;
  --rf-enlace-hover:    #B4318A;
  --rf-exito:           #B4318A;
  --rf-secundario:      #2F6E8F;
  --rf-secundario-texto:#2F6E8F;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="ciruela"] {
  --rf-primario:        #F0A8D8;
  --rf-primario-fuerte: #F0A8D8;
  --rf-acento-texto:    #F0A8D8;
  --rf-enlace:          #F0A8D8;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #F0A8D8;
  --rf-secundario:      #8FC5DE;
  --rf-secundario-texto:#8FC5DE;
  --rf-texto-boton:     #08131F;
}

/* Carmesí */
html[data-color="carmesi"] {
  --rf-primario:        #D63B4A;
  --rf-primario-fuerte: #A31D2B;
  --rf-acento-texto:    #A31D2B;
  --rf-enlace:          #A31D2B;
  --rf-enlace-hover:    #D63B4A;
  --rf-exito:           #D63B4A;
  --rf-secundario:      #2A6E8F;
  --rf-secundario-texto:#2A6E8F;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="carmesi"] {
  --rf-primario:        #FCA5A5;
  --rf-primario-fuerte: #FCA5A5;
  --rf-acento-texto:    #FCA5A5;
  --rf-enlace:          #FCA5A5;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #FCA5A5;
  --rf-secundario:      #8FC5DE;
  --rf-secundario-texto:#8FC5DE;
  --rf-texto-boton:     #08131F;
}

/* Ámbar */
html[data-color="ambar"] {
  --rf-primario:        #D98A0B;
  --rf-primario-fuerte: #A15C00;
  --rf-acento-texto:    #A15C00;
  --rf-enlace:          #A15C00;
  --rf-enlace-hover:    #D98A0B;
  --rf-exito:           #D98A0B;
  --rf-secundario:      #2F6E8F;
  --rf-secundario-texto:#2F6E8F;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="ambar"] {
  --rf-primario:        #FCD34D;
  --rf-primario-fuerte: #FCD34D;
  --rf-acento-texto:    #FCD34D;
  --rf-enlace:          #FCD34D;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #FCD34D;
  --rf-secundario:      #8FC5DE;
  --rf-secundario-texto:#8FC5DE;
  --rf-texto-boton:     #08131F;
}

/* Cobre */
html[data-color="cobre"] {
  --rf-primario:        #C2622E;
  --rf-primario-fuerte: #8F4419;
  --rf-acento-texto:    #8F4419;
  --rf-enlace:          #8F4419;
  --rf-enlace-hover:    #C2622E;
  --rf-exito:           #C2622E;
  --rf-secundario:      #2C6E7A;
  --rf-secundario-texto:#2C6E7A;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="cobre"] {
  --rf-primario:        #FBBF95;
  --rf-primario-fuerte: #FBBF95;
  --rf-acento-texto:    #FBBF95;
  --rf-enlace:          #FBBF95;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #FBBF95;
  --rf-secundario:      #7FCBD6;
  --rf-secundario-texto:#7FCBD6;
  --rf-texto-boton:     #08131F;
}

/* Grafito */
html[data-color="grafito"] {
  --rf-primario:        #4B5B6B;
  --rf-primario-fuerte: #2C3A47;
  --rf-acento-texto:    #2C3A47;
  --rf-enlace:          #2C3A47;
  --rf-enlace-hover:    #4B5B6B;
  --rf-exito:           #4B5B6B;
  --rf-secundario:      #8A5A1F;
  --rf-secundario-texto:#8A5A1F;
  --rf-texto-boton:     #FFFFFF;
}
html[data-tema="oscuro"][data-color="grafito"] {
  --rf-primario:        #A8BCCC;
  --rf-primario-fuerte: #A8BCCC;
  --rf-acento-texto:    #A8BCCC;
  --rf-enlace:          #A8BCCC;
  --rf-enlace-hover:    #FFFFFF;
  --rf-exito:           #A8BCCC;
  --rf-secundario:      #E0B071;
  --rf-secundario-texto:#E0B071;
  --rf-texto-boton:     #08131F;
}

/* ==========================================================================
   2. REINICIO Y BASE
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--rf-fuente);
  font-size: var(--rf-t-base);
  line-height: 1.55;
  color: var(--rf-texto);
  background: var(--rf-fondo);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

/* Bloqueo del scroll de fondo mientras hay un panel abierto */
body.rf-sin-scroll { overflow: hidden; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 650; line-height: 1.25; letter-spacing: -.011em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; }
a { color: var(--rf-enlace); }

/* Foco visible y coherente en toda la app (accesibilidad) */
:focus-visible {
  outline: 2px solid var(--rf-primario);
  outline-offset: 2px;
  border-radius: 4px;
}

[hidden] { display: none !important; }

/* Sólo para lectores de pantalla */
.rf-oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Marca tipográfica (la app no usa logotipo: sólo el nombre) */
.rf-marca { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.rf-marca-nombre {
  font-family: var(--rf-fuente-marca);
  font-size: var(--rf-t-lg);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--rf-acento-texto);
  white-space: nowrap;
}
.rf-marca-sufijo {
  font-size: var(--rf-t-sm);
  font-weight: 550;
  color: var(--rf-texto-3);
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ==========================================================================
   3. PIEZAS REUTILIZABLES
   ========================================================================== */

/* --- Botones -------------------------------------------------------------- */
.rf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 42px; padding: .55rem 1rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie);
  color: var(--rf-texto);
  font-size: var(--rf-t-base); font-weight: 550;
  cursor: pointer;
  transition: background var(--rf-transicion), border-color var(--rf-transicion),
              transform var(--rf-transicion), box-shadow var(--rf-transicion);
}
.rf-btn:hover:not(:disabled) { background: var(--rf-superficie-2); border-color: var(--rf-borde-fuerte); }
.rf-btn:active:not(:disabled) { transform: translateY(1px); }
.rf-btn:disabled { opacity: .45; cursor: not-allowed; }

.rf-btn--principal {
  background: var(--rf-primario-fuerte);
  border-color: transparent;
  color: var(--rf-texto-boton);
  box-shadow: var(--rf-sombra-1);
}
.rf-btn--principal:hover:not(:disabled) { filter: brightness(1.12); background: var(--rf-primario-fuerte); }

.rf-btn--sutil { background: transparent; border-color: transparent; color: var(--rf-texto-2); }
.rf-btn--sutil:hover:not(:disabled) { background: var(--rf-superficie-2); color: var(--rf-texto); }

.rf-btn--peligro { color: var(--rf-error); border-color: var(--rf-borde); }
.rf-btn--peligro:hover:not(:disabled) { background: var(--rf-error-fondo); border-color: var(--rf-error); }

.rf-btn--bloque { width: 100%; }

/* Botón sólo icono — siempre ≥44 px de objetivo táctil */
.rf-icono {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 0; border-radius: var(--rf-radio-s);
  background: transparent; color: var(--rf-texto-2);
  cursor: pointer;
  transition: background var(--rf-transicion), color var(--rf-transicion);
}
.rf-icono:hover { background: var(--rf-superficie-2); color: var(--rf-texto); }
.rf-icono svg { width: 20px; height: 20px; display: block; }
.rf-icono[aria-pressed="true"] {
  background: var(--rf-favorito-fondo);
  color: var(--rf-favorito-texto);
}
.rf-icono[aria-pressed="true"]:hover { background: var(--rf-favorito-fondo); filter: brightness(1.06); }

/* --- Tarjeta base --------------------------------------------------------- */
.rf-tarjeta {
  background: var(--rf-superficie);
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio);
  box-shadow: var(--rf-sombra-1);
  transition: box-shadow var(--rf-transicion), border-color var(--rf-transicion),
              transform var(--rf-transicion);
}

/* --- Píldoras / etiquetas -------------------------------------------------- */
.rf-pildora {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .2rem .6rem;
  border-radius: 999px;
  background: var(--rf-superficie-2);
  color: var(--rf-texto-2);
  font-size: var(--rf-t-xs); font-weight: 550;
  white-space: nowrap;
}
.rf-pildora--activo { background: var(--rf-tinte-14); color: var(--rf-acento-texto); }
/* Texto secundario, no terciario: sobre la superficie más marcada el
   terciario se queda por debajo de 4.5:1. */
.rf-pildora--espera { background: var(--rf-superficie-3); color: var(--rf-texto-2); }

/* --- Barra de progreso ----------------------------------------------------- */
.rf-barra {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--rf-superficie-3);
  overflow: hidden;
}
.rf-barra__relleno {
  position: absolute; inset: 0 auto 0 0;
  height: 100%;
  border-radius: 999px;
  background: var(--rf-primario);
  transition: width var(--rf-transicion-lenta);
}
.rf-barra--fina { height: 5px; }

/* --- Anillo de progreso (SVG) ---------------------------------------------- */
.rf-anillo { display: block; transform: rotate(-90deg); }
.rf-anillo__pista { fill: none; stroke: var(--rf-superficie-3); }
.rf-anillo__valor {
  fill: none;
  stroke: var(--rf-primario);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--rf-transicion-lenta);
}
.rf-anillo-envoltorio { position: relative; display: inline-grid; place-items: center; flex: none; }
.rf-anillo-texto {
  position: absolute;
  font-size: var(--rf-t-xs); font-weight: 700;
  color: var(--rf-texto-2);
  font-variant-numeric: tabular-nums;
}

/* --- Grupo de segmentos (filtros / vista) ---------------------------------- */
.rf-segmentos {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--rf-superficie-2);
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
}
.rf-segmentos button {
  min-height: 34px; padding: .3rem .7rem;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--rf-texto-2);
  font-size: var(--rf-t-sm); font-weight: 550;
  cursor: pointer;
  transition: background var(--rf-transicion), color var(--rf-transicion);
  white-space: nowrap;
}
.rf-segmentos button:hover { color: var(--rf-texto); }
.rf-segmentos button[aria-pressed="true"] {
  background: var(--rf-superficie);
  color: var(--rf-texto);
  box-shadow: var(--rf-sombra-1);
}

/* --- Avisos flotantes ------------------------------------------------------ */
#rf-avisos {
  position: fixed; z-index: 3000;
  left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + var(--rf-seguro-inf));
  display: flex; flex-direction: column; gap: .5rem;
  pointer-events: none;
  width: min(92vw, 460px);
}
.rf-aviso {
  padding: .7rem 1rem;
  border-radius: var(--rf-radio-s);
  background: var(--rf-oscuro);
  color: #F2F7FA;
  font-size: var(--rf-t-base);
  box-shadow: var(--rf-sombra-3);
  animation: rf-aviso-entra 240ms cubic-bezier(.32,.72,0,1);
}
.rf-aviso--error { background: var(--rf-error); color: #fff; }
@keyframes rf-aviso-entra {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: none; }
}


/* ==========================================================================
   4. PANTALLA DE ACCESO
   ========================================================================== */

#rf-acceso {
  position: fixed; inset: 0; z-index: 2500;
  display: grid; place-items: center;
  padding: 1.5rem;
  background: var(--rf-fondo);
}

.rf-acceso__caja {
  width: min(100%, 420px);
  padding: 2.25rem 2rem 2rem;
  background: var(--rf-superficie);
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-xl);
  box-shadow: var(--rf-sombra-3);
  text-align: center;
  position: relative;
  overflow: hidden;
}
/* Filo de degradado superior: el único uso destacado en esta pantalla */
.rf-acceso__caja::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: var(--rf-primario);
}

.rf-acceso__marca { justify-content: center; margin-bottom: .35rem; }
.rf-acceso__marca .rf-marca-nombre { font-size: var(--rf-t-2xl); }
.rf-acceso__marca .rf-marca-sufijo { font-size: var(--rf-t-base); }

.rf-acceso__lema { color: var(--rf-texto-2); font-size: var(--rf-t-base); margin-bottom: 1.75rem; }

.rf-acceso__campo { text-align: left; margin-bottom: 1rem; }
.rf-acceso__campo label {
  display: block; margin-bottom: .4rem;
  font-size: var(--rf-t-sm); font-weight: 600; color: var(--rf-texto-2);
}
.rf-entrada {
  width: 100%;
  min-height: 46px;
  padding: .65rem .85rem;
  border: 1px solid var(--rf-borde-fuerte);
  border-radius: var(--rf-radio-s);
  background: var(--rf-fondo);
  color: var(--rf-texto);
  font: inherit;
  transition: border-color var(--rf-transicion), box-shadow var(--rf-transicion);
}
.rf-entrada::placeholder { color: var(--rf-texto-3); }
.rf-entrada:focus {
  outline: none;
  border-color: var(--rf-primario);
  box-shadow: 0 0 0 3px var(--rf-anillo-foco);
}

.rf-acceso__error {
  margin: 0 0 .9rem;
  padding: .55rem .75rem;
  border-radius: var(--rf-radio-s);
  background: var(--rf-error-fondo);
  color: var(--rf-error);
  font-size: var(--rf-t-sm);
  text-align: left;
}
.rf-acceso__nota {
  margin-top: 1.5rem;
  font-size: var(--rf-t-xs);
  color: var(--rf-texto-3);
  line-height: 1.5;
}


/* ==========================================================================
   5. ARMAZÓN DE LA APP
   ========================================================================== */

#rf-app { display: none; min-height: 100%; }
#rf-app.rf-visible { display: block; }

/* --- Barra lateral --------------------------------------------------------- */
.rf-lateral {
  position: fixed; z-index: 900;
  inset: 0 auto 0 0;
  width: var(--rf-lateral);
  display: flex; flex-direction: column;
  background: var(--rf-superficie);
  border-right: 1px solid var(--rf-borde);
  padding-top: var(--rf-seguro-sup);
  transition: transform var(--rf-transicion-lenta);
}

.rf-lateral__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  height: var(--rf-cabecera);
  padding: 0 .75rem 0 1.25rem;
  border-bottom: 1px solid var(--rf-borde);
  flex: none;
}

.rf-lateral__proyecto {
  padding: 1rem 1.25rem .75rem;
  border-bottom: 1px solid var(--rf-borde);
}
.rf-lateral__proyecto-nombre {
  display: flex; align-items: center; gap: .5rem;
  font-size: var(--rf-t-base); font-weight: 650;
  margin-bottom: .5rem;
}
.rf-lateral__proyecto-nombre span:first-child { font-size: 1.1rem; }
.rf-lateral__proyecto-meta {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  font-size: var(--rf-t-xs); color: var(--rf-texto-2);
  margin-top: .45rem;
  font-variant-numeric: tabular-nums;
}
.rf-selector-proyecto {
  width: 100%; min-height: 38px; margin-bottom: .5rem;
  padding: .35rem .5rem;
  border: 1px solid var(--rf-borde); border-radius: var(--rf-radio-s);
  background: var(--rf-fondo); color: var(--rf-texto); font: inherit;
  font-size: var(--rf-t-sm);
}

.rf-lateral__nav {
  flex: 1; overflow-y: auto;
  padding: .75rem .75rem 1rem;
  -webkit-overflow-scrolling: touch;
}
.rf-nav-titulo {
  padding: .5rem .5rem .35rem;
  font-size: var(--rf-t-xs); font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--rf-texto-3);
}

.rf-nav-item {
  position: relative;
  display: flex; align-items: center; gap: .7rem;
  width: 100%;
  min-height: 46px;
  padding: .5rem .65rem;
  margin-bottom: 2px;
  border: 0; border-radius: var(--rf-radio-s);
  background: transparent;
  color: var(--rf-texto);
  text-align: left; text-decoration: none;
  cursor: pointer;
  transition: background var(--rf-transicion), color var(--rf-transicion);
}
.rf-nav-item:hover { background: var(--rf-superficie-2); }
.rf-nav-item__icono { font-size: 1.05rem; flex: none; width: 1.5rem; text-align: center; }
.rf-nav-item__texto { flex: 1; min-width: 0; }
.rf-nav-item__nombre {
  display: block;
  font-size: var(--rf-t-base); font-weight: 550;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-nav-item__conteo {
  display: block;
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  font-variant-numeric: tabular-nums;
}
.rf-nav-item__barra { width: 34px; flex: none; }

/* El elemento activo lleva el degradado — es un destacado, no un fondo */
.rf-nav-item[aria-current="page"] {
  background: var(--rf-primario-suave);
  color: var(--rf-texto);
  font-weight: 650;
}
.rf-nav-item[aria-current="page"]::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 22px; margin-top: -11px;
  border-radius: 0 3px 3px 0;
  background: var(--rf-primario);
}

.rf-lateral__pie {
  flex: none;
  padding: .65rem .75rem calc(.65rem + var(--rf-seguro-inf));
  border-top: 1px solid var(--rf-borde);
  display: flex; align-items: center; gap: .35rem;
}

/* Velo de la barra lateral en iPad vertical */
.rf-velo-lateral {
  position: fixed; inset: 0; z-index: 899;
  background: rgba(15,33,51,.42);
  opacity: 0; pointer-events: none;
  transition: opacity var(--rf-transicion);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.rf-lateral-abierta .rf-velo-lateral { opacity: 1; pointer-events: auto; }

/* --- Cabecera superior ------------------------------------------------------ */
.rf-cabecera {
  position: sticky; top: 0; z-index: 800;
  display: flex; align-items: center; gap: .6rem;
  height: calc(var(--rf-cabecera) + var(--rf-seguro-sup));
  padding: var(--rf-seguro-sup) 1rem 0;
  background: color-mix(in srgb, var(--rf-fondo) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(12px);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--rf-borde);
}
/* Filo de degradado bajo la cabecera */
.rf-cabecera::after {
  content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px;
  background: var(--rf-primario); opacity: .55;
}
.rf-cabecera__titulo {
  flex: 1; min-width: 0;
  font-size: var(--rf-t-md); font-weight: 650;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-cabecera__acciones { display: flex; align-items: center; gap: .2rem; flex: none; }

/* Disparador del buscador */
.rf-buscador-lanzador {
  display: flex; align-items: center; gap: .55rem;
  width: min(340px, 42vw); min-height: 40px;
  padding: .45rem .75rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie);
  color: var(--rf-texto-3);
  font-size: var(--rf-t-base);
  cursor: pointer; text-align: left;
  transition: border-color var(--rf-transicion), box-shadow var(--rf-transicion);
}
.rf-buscador-lanzador:hover { border-color: var(--rf-borde-fuerte); box-shadow: var(--rf-sombra-1); }
.rf-buscador-lanzador svg { width: 17px; height: 17px; flex: none; }
.rf-buscador-lanzador span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rf-atajo {
  flex: none;
  padding: .1rem .4rem;
  border: 1px solid var(--rf-borde);
  border-radius: 5px;
  background: var(--rf-superficie-2);
  font-family: var(--rf-fuente-mono);
  font-size: 11px; color: var(--rf-texto-3);
}

/* --- Zona principal --------------------------------------------------------- */
.rf-principal {
  margin-left: var(--rf-lateral);
  min-height: 100vh;
  transition: margin var(--rf-transicion-lenta);
}
.rf-vista {
  max-width: 1120px;
  margin: 0 auto;
  padding: 1.75rem 1.5rem calc(3rem + var(--rf-seguro-inf));
}

/* --- Pestañas inferiores (móvil) -------------------------------------------- */
.rf-pestanas {
  display: none;
  position: fixed; z-index: 950;
  inset: auto 0 0 0;
  height: calc(var(--rf-pestanas) + var(--rf-seguro-inf));
  padding-bottom: var(--rf-seguro-inf);
  background: color-mix(in srgb, var(--rf-superficie) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  backdrop-filter: saturate(1.8) blur(20px);
  border-top: 1px solid var(--rf-borde);
}
.rf-pestanas__lista { display: flex; height: 100%; }
.rf-pestana {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  min-height: 44px;
  border: 0; background: transparent;
  color: var(--rf-texto-3);
  font-size: 10.5px; font-weight: 550;
  cursor: pointer;
  transition: color var(--rf-transicion);
  -webkit-tap-highlight-color: transparent;
}
.rf-pestana svg { width: 22px; height: 22px; }
.rf-pestana[aria-current="page"] { color: var(--rf-acento-texto); }


/* ==========================================================================
   6. VISTA INICIO
   ========================================================================== */

.rf-seccion-bloque { margin-bottom: 2.25rem; }
.rf-seccion-bloque__titulo {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: .9rem;
}
.rf-seccion-bloque__titulo h2 {
  font-size: var(--rf-t-lg); font-weight: 650;
}
.rf-seccion-bloque__titulo .rf-enlace-suave {
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  background: none; border: 0; cursor: pointer; padding: .25rem;
}
.rf-seccion-bloque__titulo .rf-enlace-suave:hover { color: var(--rf-acento-texto); }

/* --- Cabecera del proyecto --------------------------------------------------- */
.rf-portada {
  position: relative;
  padding: 1.6rem 1.75rem;
  margin-bottom: 1.5rem;
  border-radius: var(--rf-radio-l);
  background: var(--rf-superficie);
  border: 1px solid var(--rf-borde);
  box-shadow: var(--rf-sombra-2);
  overflow: hidden;
}
.rf-portada::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: var(--rf-primario);
}
.rf-portada__fila {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  margin-bottom: .55rem;
}
.rf-portada__icono { font-size: 1.5rem; line-height: 1; }
.rf-portada h1 {
  font-family: var(--rf-fuente-marca);
  font-size: var(--rf-t-2xl);
  letter-spacing: -.02em;
}
.rf-portada__desc {
  color: var(--rf-texto-2);
  max-width: 68ch;
  margin-bottom: 1.35rem;
}
.rf-progreso-global__cifras {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: .5rem;
}
.rf-progreso-global__texto { font-size: var(--rf-t-base); color: var(--rf-texto-2); }
.rf-progreso-global__texto strong { color: var(--rf-texto); font-weight: 650; }
.rf-progreso-global__pct {
  font-size: var(--rf-t-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rf-acento-texto);
}

/* --- Continuar donde ibas ----------------------------------------------------- */
.rf-continuar {
  display: flex; align-items: center; gap: 1rem;
  width: 100%;
  padding: 1.1rem 1.25rem;
  border: 1px solid transparent;
  border-radius: var(--rf-radio-l);
  background: var(--rf-superficie);
  border-color: var(--rf-primario);
  box-shadow: var(--rf-sombra-2);
  cursor: pointer; text-align: left;
  transition: transform var(--rf-transicion), box-shadow var(--rf-transicion);
}
.rf-continuar:hover { transform: translateY(-2px); box-shadow: var(--rf-sombra-3); }
.rf-continuar__cuerpo { flex: 1; min-width: 0; }
.rf-continuar__etiqueta {
  display: block;
  font-size: var(--rf-t-xs); font-weight: 650;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--rf-acento-texto);
  margin-bottom: .3rem;
}
.rf-continuar__titulo {
  display: block;
  font-size: var(--rf-t-lg); font-weight: 650;
  margin-bottom: .25rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-continuar__meta { font-size: var(--rf-t-sm); color: var(--rf-texto-2); }
.rf-continuar__flecha { flex: none; color: var(--rf-texto-3); }
.rf-continuar__flecha svg { width: 22px; height: 22px; display: block; }

/* --- Rejilla de secciones ------------------------------------------------------ */
.rf-rejilla-secciones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.rf-tarjeta-seccion {
  display: flex; flex-direction: column;
  padding: 1.25rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio);
  background: var(--rf-superficie);
  box-shadow: var(--rf-sombra-1);
  cursor: pointer; text-align: left;
  transition: transform var(--rf-transicion), box-shadow var(--rf-transicion),
              border-color var(--rf-transicion);
}
.rf-tarjeta-seccion:hover {
  transform: translateY(-2px);
  box-shadow: var(--rf-sombra-2);
  border-color: var(--rf-borde-fuerte);
}
.rf-tarjeta-seccion--vacia { opacity: .72; }
.rf-tarjeta-seccion__cabecera {
  display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem;
  margin-bottom: .7rem;
}
.rf-tarjeta-seccion__emblema {
  display: grid; place-items: center;
  width: 42px; height: 42px; flex: none;
  border-radius: 12px;
  font-size: 1.25rem;
  background: var(--rf-superficie-2);
}
.rf-tarjeta-seccion h3 { font-size: var(--rf-t-md); margin-bottom: .3rem; }
.rf-tarjeta-seccion__desc {
  flex: 1;
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  line-height: 1.5;
  margin-bottom: 1rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.rf-tarjeta-seccion__pie {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  font-size: var(--rf-t-xs); color: var(--rf-texto-2);
  font-variant-numeric: tabular-nums;
}

/* --- Fila de favoritos ---------------------------------------------------------- */
.rf-fila-desplazable {
  display: flex; gap: .75rem;
  overflow-x: auto;
  padding-bottom: .5rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.rf-fila-desplazable::-webkit-scrollbar { height: 6px; }
.rf-fila-desplazable::-webkit-scrollbar-thumb { background: var(--rf-borde-fuerte); border-radius: 3px; }
.rf-mini-tarjeta {
  flex: 0 0 240px;
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: .35rem;
  padding: .85rem 1rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie);
  cursor: pointer; text-align: left;
  transition: border-color var(--rf-transicion), transform var(--rf-transicion);
}
.rf-mini-tarjeta:hover { border-color: var(--rf-borde-fuerte); transform: translateY(-2px); }
.rf-mini-tarjeta__seccion {
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-mini-tarjeta__titulo {
  font-size: var(--rf-t-base); font-weight: 600; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}


/* ==========================================================================
   7. VISTA SECCIÓN
   ========================================================================== */

.rf-cabecera-seccion {
  display: flex; align-items: flex-start; gap: 1.1rem;
  padding: 1.5rem 1.6rem;
  margin-bottom: 1.35rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-l);
  background: var(--rf-superficie);
  box-shadow: var(--rf-sombra-1);
}
.rf-cabecera-seccion__emblema {
  display: grid; place-items: center;
  width: 52px; height: 52px; flex: none;
  border-radius: 14px;
  font-size: 1.6rem;
  background: var(--rf-superficie-2);
}
.rf-cabecera-seccion__cuerpo { flex: 1; min-width: 0; }
.rf-cabecera-seccion h1 { font-size: var(--rf-t-2xl); margin-bottom: .4rem; }
.rf-cabecera-seccion__desc { color: var(--rf-texto-2); max-width: 70ch; margin-bottom: 1rem; }
.rf-cabecera-seccion__progreso { display: flex; align-items: center; gap: .85rem; max-width: 460px; }
.rf-cabecera-seccion__progreso .rf-barra { flex: 1; }
.rf-cabecera-seccion__progreso span {
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.rf-controles {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  margin-bottom: 1.1rem;
}

.rf-grupo-titulo {
  display: flex; align-items: center; gap: .7rem;
  margin: 1.85rem 0 .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--rf-borde);
}
.rf-grupo-titulo:first-child { margin-top: 0; }
.rf-grupo-titulo__icono { font-size: 1.15rem; }
.rf-grupo-titulo h2 { font-size: var(--rf-t-md); }
.rf-grupo-titulo__desc {
  flex: 1; min-width: 0;
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-grupo-titulo__conteo { font-size: var(--rf-t-xs); color: var(--rf-texto-3); white-space: nowrap; }

/* --- Listado de documentos ---------------------------------------------------- */
.rf-lista-docs { display: grid; gap: .75rem; }
.rf-lista-docs--tarjetas { grid-template-columns: repeat(2, 1fr); }
.rf-lista-docs--compacta { grid-template-columns: 1fr; gap: 2px; }

.rf-doc {
  position: relative;
  display: flex; align-items: flex-start; gap: .9rem;
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio);
  background: var(--rf-superficie);
  box-shadow: var(--rf-sombra-1);
  cursor: pointer; text-align: left;
  transition: transform var(--rf-transicion), box-shadow var(--rf-transicion),
              border-color var(--rf-transicion), background var(--rf-transicion);
}
.rf-doc:hover { transform: translateY(-2px); box-shadow: var(--rf-sombra-2); border-color: var(--rf-borde-fuerte); }
/* La tarjeta leída se queda con el fondo normal: quien marca el estado es
   el check, no un tinte de fondo que apague la tarjeta entera. */
.rf-doc--leido { background: var(--rf-superficie); }

.rf-doc__orden {
  display: grid; place-items: center;
  width: 30px; height: 30px; flex: none;
  border-radius: 9px;
  background: var(--rf-superficie-2);
  color: var(--rf-texto-2);
  font-size: var(--rf-t-sm); font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.rf-doc--leido .rf-doc__orden {
  background: color-mix(in srgb, var(--rf-leido-fondo) 14%, transparent);
  color: var(--rf-leido-fondo);
}
html[data-tema="oscuro"] .rf-doc--leido .rf-doc__orden {
  background: color-mix(in srgb, var(--rf-leido-fondo) 26%, transparent);
  color: #FFFFFF;
}
.rf-doc__cuerpo { flex: 1; min-width: 0; }
.rf-doc__titulo {
  font-size: var(--rf-t-base); font-weight: 650;
  line-height: 1.35;
  margin-bottom: .3rem;
}
.rf-doc__resumen {
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin-bottom: .55rem;
}
.rf-doc__meta {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  font-variant-numeric: tabular-nums;
}
.rf-doc__indicadores { display: flex; align-items: center; gap: .3rem; flex: none; }
.rf-doc__marca {
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  font-size: 13px; line-height: 1;
}
.rf-doc__marca--leido {
  background: var(--rf-leido-fondo);
  color: var(--rf-leido-texto);
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--rf-filo-marca),
              0 1px 3px color-mix(in srgb, var(--rf-leido-fondo) 45%, transparent);
}
/* Mismo tamaño exacto que la marca de leído: los dos indicadores tienen
   que verse como una pareja, no como dos elementos de pesos distintos.
   El área táctil se agranda con un pseudoelemento invisible, así el botón
   sigue siendo cómodo en móvil sin ocupar más sitio. */
.rf-doc__fav {
  position: relative;
  width: 26px; height: 26px;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--rf-texto-3);
  cursor: pointer; display: grid; place-items: center;
  transition: color var(--rf-transicion), background var(--rf-transicion), transform var(--rf-transicion);
}
.rf-doc__fav::after {
  content: ""; position: absolute;
  inset: -9px;              /* 26 + 9*2 = 44 px de zona pulsable */
  border-radius: 50%;
}
.rf-doc__fav:hover { background: var(--rf-superficie-2); transform: scale(1.08); }
.rf-doc__fav[aria-pressed="true"] {
  background: var(--rf-favorito-fondo);
  color: var(--rf-favorito-texto);
  box-shadow: 0 0 0 1px var(--rf-filo-marca),
              0 1px 3px color-mix(in srgb, var(--rf-favorito-fondo) 55%, transparent);
}
.rf-doc__fav[aria-pressed="true"]:hover { background: var(--rf-favorito-fondo); filter: brightness(1.06); }
.rf-doc__fav svg { width: 14px; height: 14px; }

/* Vista compacta */
.rf-lista-docs--compacta .rf-doc {
  border-radius: 0; box-shadow: none; border-bottom: 0;
  padding: .7rem .9rem; align-items: center;
}
.rf-lista-docs--compacta .rf-doc:first-child { border-radius: var(--rf-radio) var(--rf-radio) 0 0; }
.rf-lista-docs--compacta .rf-doc:last-child { border-radius: 0 0 var(--rf-radio) var(--rf-radio); border-bottom: 1px solid var(--rf-borde); }
.rf-lista-docs--compacta .rf-doc:hover { transform: none; }
.rf-lista-docs--compacta .rf-doc__resumen { display: none; }
.rf-lista-docs--compacta .rf-doc__titulo { margin-bottom: 0; }
.rf-lista-docs--compacta .rf-doc__meta { margin-top: .15rem; }


/* ==========================================================================
   8. VISTA MI ESPACIO
   ========================================================================== */

.rf-nota-guardada {
  padding: 1rem 1.15rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio);
  background: var(--rf-superficie);
  box-shadow: var(--rf-sombra-1);
}
.rf-nota-guardada__cabecera {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  margin-bottom: .5rem;
}
.rf-nota-guardada__doc {
  background: none; border: 0; padding: 0;
  font-size: var(--rf-t-base); font-weight: 650;
  color: var(--rf-enlace); cursor: pointer; text-align: left;
}
.rf-nota-guardada__doc:hover { text-decoration: underline; }
.rf-nota-guardada__fecha { font-size: var(--rf-t-xs); color: var(--rf-texto-3); white-space: nowrap; }
.rf-nota-guardada__seccion {
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  margin-top: -.25rem;
}
.rf-nota-guardada__texto {
  font-size: var(--rf-t-base); color: var(--rf-texto-2);
  white-space: pre-wrap; line-height: 1.55;
  max-height: 8.5em; overflow: hidden;
}
.rf-lista-notas { display: grid; gap: .75rem; }

.rf-tabla-progreso {
  width: 100%;
  border-collapse: collapse;
  background: var(--rf-superficie);
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio);
  overflow: hidden;
}
.rf-tabla-progreso th, .rf-tabla-progreso td {
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--rf-borde);
  font-size: var(--rf-t-base);
}
.rf-tabla-progreso th {
  font-size: var(--rf-t-xs); font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--rf-texto-3);
  background: var(--rf-superficie-2);
}
.rf-tabla-progreso tr:last-child td { border-bottom: 0; }
.rf-tabla-progreso td:last-child, .rf-tabla-progreso th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.rf-tabla-progreso .rf-barra { min-width: 90px; }

.rf-datos-acciones { display: flex; gap: .6rem; flex-wrap: wrap; }

/* Las dos vías de exportación, una junto a la otra */
.rf-vias { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.rf-via {
  display: flex; flex-direction: column;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio);
  background: var(--rf-superficie-2);
}
.rf-via__marca {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--rf-acento-texto);
  margin-bottom: .3rem;
}
.rf-via h4 { font-size: var(--rf-t-md); margin-bottom: .4rem; }
.rf-via p {
  flex: 1;
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  line-height: 1.5; margin-bottom: .85rem;
}
.rf-via__peso {
  display: block; margin-top: .45rem;
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  text-align: center;
}
@media (max-width: 767px) { .rf-vias { grid-template-columns: 1fr; } }
.rf-panel-info {
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio);
  background: var(--rf-superficie);
}
.rf-panel-info p { color: var(--rf-texto-2); font-size: var(--rf-t-sm); margin-bottom: 1rem; max-width: 70ch; }


/* ==========================================================================
   8 bis. VISTA AJUSTES
   ========================================================================== */

.rf-ajuste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; flex-wrap: wrap;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--rf-borde);
}
.rf-ajuste:first-child { padding-top: 0; }
.rf-ajuste:last-child  { padding-bottom: 0; border-bottom: 0; }
.rf-ajuste--columna { display: block; }
.rf-ajuste__texto { flex: 1; min-width: 240px; }
.rf-ajuste__texto h3 { font-size: var(--rf-t-md); margin-bottom: .25rem; }
.rf-ajuste__texto p {
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  line-height: 1.5; max-width: 62ch; margin-bottom: 0;
}
.rf-ajuste--columna .rf-ajuste__texto { margin-bottom: .9rem; }

/* --- Rejilla de presets de color ----------------------------------------- */
.rf-colores {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: .6rem;
}
.rf-color {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem;
  border: 1.5px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie);
  cursor: pointer; text-align: left;
  transition: border-color var(--rf-transicion), background var(--rf-transicion),
              transform var(--rf-transicion);
}
.rf-color:hover { border-color: var(--rf-borde-fuerte); transform: translateY(-1px); }
.rf-color__muestra {
  display: flex; flex: none;
  width: 34px; height: 22px;
  border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.1);
}
.rf-color__muestra span { flex: 1; }
.rf-color__nombre {
  font-size: var(--rf-t-sm); font-weight: 600;
  color: var(--rf-texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-color[aria-checked="true"] {
  border-color: var(--rf-primario);
  background: var(--rf-primario-suave);
}
.rf-color[aria-checked="true"] .rf-color__nombre { color: var(--rf-acento-texto); }
.rf-color[aria-checked="true"]::after {
  content: "✓";
  margin-left: auto;
  font-weight: 700; font-size: var(--rf-t-sm);
  color: var(--rf-acento-texto);
}

/* --- Estado de la sincronización -------------------------------------------- */
.rf-sync-estado {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .7rem .9rem;
  margin-bottom: 1.1rem;
  border: 1px solid var(--rf-borde);
  border-left: 3px solid var(--rf-texto-3);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie-2);
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  line-height: 1.5;
}
.rf-sync-estado__icono { flex: none; font-size: 1rem; line-height: 1.3; }
.rf-sync-estado--activo { border-left-color: var(--rf-leido-fondo); }
.rf-sync-estado--activo .rf-sync-estado__icono { color: var(--rf-leido-fondo); font-weight: 700; }
.rf-sync-estado--error  { border-left-color: var(--rf-error); }
.rf-sync-estado--espera { border-left-color: var(--rf-texto-3); }

/* --- Formularios de ajustes ----------------------------------------------- */
.rf-formulario { display: grid; gap: .85rem; }
.rf-formulario__fila { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
.rf-campo label {
  display: block; margin-bottom: .35rem;
  font-size: var(--rf-t-sm); font-weight: 600; color: var(--rf-texto-2);
}
.rf-campo select.rf-entrada { appearance: auto; }

.rf-casilla {
  display: flex; align-items: flex-start; gap: .55rem;
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  line-height: 1.45; cursor: pointer;
}
.rf-casilla input { margin-top: .2rem; accent-color: var(--rf-primario); flex: none; }
.rf-casilla em { color: var(--rf-aviso); font-style: normal; }

.rf-nota-tecnica {
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
  border: 1px solid var(--rf-borde-fuerte);
  border-left: 3px solid var(--rf-aviso);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie-2);
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  line-height: 1.55;
}
.rf-nota-tecnica strong { color: var(--rf-texto); }
.rf-nota-tecnica ol { margin: .6rem 0 0; padding-left: 1.25rem; }
.rf-nota-tecnica li { margin-bottom: .5rem; }
.rf-nota-tecnica li:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .rf-formulario__fila { grid-template-columns: 1fr; }
  .rf-ajuste { flex-direction: column; align-items: stretch; }
  .rf-colores { grid-template-columns: 1fr; }
}


/* --- Diálogo genérico de confirmación -------------------------------------- */
.rf-dialogo {
  position: fixed; inset: 0; z-index: 1800;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(10, 16, 22, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rf-dialogo[hidden] { display: none; }
.rf-dialogo__caja {
  width: min(100%, 520px);
  max-height: 86dvh;
  display: flex; flex-direction: column;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-l);
  background: var(--rf-superficie);
  box-shadow: var(--rf-sombra-3);
  overflow: hidden;
  animation: rf-buscador-entra var(--rf-transicion-lenta);
}
.rf-dialogo__cabecera {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 1rem 1rem 1rem 1.35rem;
  border-bottom: 1px solid var(--rf-borde);
}
.rf-dialogo__cabecera h2 { font-size: var(--rf-t-lg); }
.rf-dialogo__cuerpo {
  flex: 1; overflow-y: auto;
  padding: 1.15rem 1.35rem;
  font-size: var(--rf-t-base); color: var(--rf-texto-2); line-height: 1.55;
}
.rf-dialogo__cuerpo p { margin-bottom: .85rem; }
.rf-dialogo__cuerpo p:last-child { margin-bottom: 0; }
.rf-dialogo__cuerpo strong { color: var(--rf-texto); }
.rf-dialogo__pie {
  flex: none;
  display: flex; flex-direction: column; gap: .5rem;
  padding: .85rem 1.35rem 1.15rem;
  border-top: 1px solid var(--rf-borde);
  background: var(--rf-superficie-2);
}
.rf-dialogo__pie .rf-btn { justify-content: flex-start; text-align: left; }
.rf-dialogo__pie .rf-btn--cancelar { justify-content: center; margin-top: .25rem; }


/* ==========================================================================
   9. BUSCADOR GLOBAL
   ========================================================================== */

#rf-buscador {
  position: fixed; inset: 0; z-index: 2000;
  display: none;
  padding: max(6vh, 1rem) 1rem 1rem;
  background: rgba(15,33,51,.45);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#rf-buscador.rf-visible { display: block; animation: rf-fundido var(--rf-transicion); }
@keyframes rf-fundido { from { opacity: 0; } to { opacity: 1; } }

.rf-buscador__caja {
  display: flex; flex-direction: column;
  width: min(100%, 740px);
  max-height: min(76vh, 720px);
  margin: 0 auto;
  background: var(--rf-superficie);
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-l);
  box-shadow: var(--rf-sombra-3);
  overflow: hidden;
  animation: rf-buscador-entra var(--rf-transicion-lenta);
}
@keyframes rf-buscador-entra {
  from { opacity: 0; transform: translateY(-12px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.rf-buscador__campo {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--rf-borde);
  flex: none;
}
.rf-buscador__campo svg { width: 20px; height: 20px; color: var(--rf-texto-3); flex: none; }
.rf-buscador__campo input {
  flex: 1; min-width: 0;
  border: 0; background: transparent;
  font: inherit; font-size: var(--rf-t-lg);
  color: var(--rf-texto);
}
.rf-buscador__campo input:focus { outline: none; }
.rf-buscador__campo input::placeholder { color: var(--rf-texto-3); }

.rf-buscador__estado {
  flex: none;
  padding: .45rem 1rem;
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  background: var(--rf-superficie-2);
  border-bottom: 1px solid var(--rf-borde);
  display: flex; align-items: center; gap: .5rem;
}
.rf-buscador__estado .rf-barra { flex: 1; max-width: 160px; height: 4px; }

.rf-buscador__resultados {
  flex: 1; overflow-y: auto;
  padding: .5rem;
  -webkit-overflow-scrolling: touch;
}
.rf-buscador__grupo-titulo {
  padding: .7rem .85rem .35rem;
  font-size: var(--rf-t-xs); font-weight: 650;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--rf-texto-3);
}
.rf-resultado {
  display: block; width: 100%;
  padding: .7rem .85rem;
  border: 0; border-radius: var(--rf-radio-s);
  background: transparent;
  cursor: pointer; text-align: left;
  transition: background var(--rf-transicion);
}
.rf-resultado:hover, .rf-resultado.rf-resaltado { background: var(--rf-superficie-2); }
.rf-resultado__titulo {
  display: flex; align-items: baseline; gap: .5rem;
  font-size: var(--rf-t-base); font-weight: 650;
  margin-bottom: .2rem;
}
.rf-resultado__ruta { font-size: var(--rf-t-xs); color: var(--rf-texto-3); font-weight: 450; }
.rf-resultado__fragmento {
  font-size: var(--rf-t-sm); color: var(--rf-texto-2);
  line-height: 1.5;
  margin-top: .25rem;
  padding-left: .6rem;
  border-left: 2px solid var(--rf-borde);
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
mark, .rf-marca-busqueda {
  background: var(--rf-tinte-32);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}
html[data-tema="oscuro"] mark, html[data-tema="oscuro"] .rf-marca-busqueda { background: var(--rf-tinte-32); }
.rf-marca-busqueda--activa {
  background: color-mix(in srgb, var(--rf-primario) 45%, transparent);
  box-shadow: 0 0 0 3px var(--rf-anillo-foco);
}

.rf-buscador__pie {
  flex: none;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: .55rem 1rem;
  border-top: 1px solid var(--rf-borde);
  background: var(--rf-superficie-2);
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
}
.rf-buscador__pie kbd {
  display: inline-block;
  padding: .1rem .35rem; margin-right: .25rem;
  border: 1px solid var(--rf-borde-fuerte); border-radius: 4px;
  background: var(--rf-superficie);
  font-family: var(--rf-fuente-mono); font-size: 10.5px;
}


/* ==========================================================================
   10. OFFCANVAS — VISOR DE DOCUMENTOS
   ========================================================================== */

#rf-velo-visor {
  position: fixed; inset: 0; z-index: 1400;
  background: rgba(15,33,51,.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--rf-transicion-lenta);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
body.rf-visor-abierto #rf-velo-visor { opacity: 1; pointer-events: auto; }

#rf-visor {
  position: fixed; z-index: 1500;
  inset: 0 0 0 auto;
  width: min(65%, 900px);
  display: flex; flex-direction: column;
  background: var(--rf-superficie);
  box-shadow: var(--rf-sombra-panel);
  transform: translateX(100%);
  /* `visibility` se apaga al terminar la animación: así el panel cerrado
     queda fuera del orden de tabulación y del árbol de accesibilidad,
     sin perder la transición de salida. */
  visibility: hidden;
  transition: transform var(--rf-transicion-lenta),
              visibility 0s linear var(--rf-transicion-lenta);
  will-change: transform;
}
body.rf-visor-abierto #rf-visor {
  transform: none;
  visibility: visible;
  transition: transform var(--rf-transicion-lenta), visibility 0s;
}

/* --- Barra de arrastre (sólo hoja inferior) --------------------------------- */
.rf-visor__tirador { display: none; }

/* --- Cabecera fija ------------------------------------------------------------ */
.rf-visor__cabecera {
  flex: none;
  padding: calc(.8rem + var(--rf-seguro-sup)) 1rem .7rem 1.35rem;
  border-bottom: 1px solid var(--rf-borde);
  background: var(--rf-superficie);
}
.rf-visor__fila-sup {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .35rem;
}
.rf-visor__miga {
  flex: 1; min-width: 0;
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rf-visor__acciones { display: flex; align-items: center; gap: .1rem; flex: none; }
.rf-visor__acciones .rf-icono { width: 40px; height: 40px; }
.rf-visor__volver {
  display: none;
  align-items: center; gap: .3rem;
  min-height: 32px; padding: .2rem .55rem;
  margin-bottom: .4rem;
  border: 1px solid var(--rf-borde); border-radius: 999px;
  background: var(--rf-superficie-2); color: var(--rf-texto-2);
  font-size: var(--rf-t-xs); cursor: pointer;
}
.rf-visor__volver.rf-visible { display: inline-flex; }
.rf-visor__volver:hover { color: var(--rf-texto); border-color: var(--rf-borde-fuerte); }

.rf-visor__titulo {
  font-family: var(--rf-fuente-marca);
  font-size: var(--rf-t-xl);
  line-height: 1.25;
  letter-spacing: -.015em;
  margin-bottom: .7rem;
  overflow-wrap: break-word;
}
.rf-visor__progreso { height: 3px; }
.rf-visor__progreso .rf-barra__relleno { transition: width 90ms linear; }

/* Menú ⋮ */
.rf-menu-envoltorio { position: relative; }
.rf-menu {
  position: absolute; z-index: 20;
  top: calc(100% + 6px); right: 0;
  min-width: 232px;
  padding: .35rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio);
  background: var(--rf-superficie);
  box-shadow: var(--rf-sombra-3);
  display: none;
}
.rf-menu.rf-visible { display: block; animation: rf-menu-entra 160ms ease-out; }
@keyframes rf-menu-entra { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.rf-menu__item {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; min-height: 40px;
  padding: .45rem .6rem;
  border: 0; border-radius: var(--rf-radio-s);
  background: transparent; color: var(--rf-texto);
  font-size: var(--rf-t-base); cursor: pointer; text-align: left;
  transition: background var(--rf-transicion);
}
.rf-menu__item:hover { background: var(--rf-superficie-2); }
.rf-menu__separador { height: 1px; margin: .3rem .4rem; background: var(--rf-borde); }
.rf-menu__letra {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .35rem .6rem;
}
.rf-menu__letra span { font-size: var(--rf-t-base); }
.rf-menu__letra div { display: flex; gap: .25rem; }
.rf-menu__letra button {
  width: 34px; height: 34px;
  border: 1px solid var(--rf-borde); border-radius: 8px;
  background: var(--rf-superficie); cursor: pointer;
  font-weight: 650;
}
.rf-menu__letra button:hover { background: var(--rf-superficie-2); }

/* --- Índice del documento ------------------------------------------------------ */
.rf-visor__indice { flex: none; border-bottom: 1px solid var(--rf-borde); background: var(--rf-superficie-2); }
.rf-visor__indice-boton {
  display: flex; align-items: center; gap: .5rem;
  width: 100%; min-height: 44px;
  padding: .5rem 1.35rem;
  border: 0; background: transparent;
  color: var(--rf-texto-2);
  font-size: var(--rf-t-sm); font-weight: 550;
  cursor: pointer; text-align: left;
}
.rf-visor__indice-boton:hover { color: var(--rf-texto); }
.rf-visor__indice-boton svg { width: 15px; height: 15px; transition: transform var(--rf-transicion); }
.rf-visor__indice-boton[aria-expanded="true"] svg { transform: rotate(90deg); }
.rf-visor__indice-lista {
  max-height: 240px; overflow-y: auto;
  padding: 0 1rem .7rem 1.35rem;
  list-style: none;
}
.rf-visor__indice-lista[hidden] { display: none; }
.rf-visor__indice-lista button {
  display: block; width: 100%;
  padding: .35rem .5rem;
  border: 0; border-left: 2px solid var(--rf-borde);
  border-radius: 0 6px 6px 0;
  background: transparent; color: var(--rf-texto-2);
  font-size: var(--rf-t-sm); line-height: 1.4;
  cursor: pointer; text-align: left;
  transition: color var(--rf-transicion), border-color var(--rf-transicion), background var(--rf-transicion);
}
.rf-visor__indice-lista button:hover { color: var(--rf-texto); background: var(--rf-superficie); }
.rf-visor__indice-lista button.rf-activo { color: var(--rf-acento-texto); border-left-color: var(--rf-primario); font-weight: 600; }
.rf-visor__indice-lista .rf-nivel-3 button { padding-left: 1.25rem; font-size: var(--rf-t-xs); }

/* --- Cuerpo (zona con scroll) --------------------------------------------------- */
.rf-visor__cuerpo {
  flex: 1;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* Sin scroll-behavior:smooth aquí a propósito: la restauración de la
     posición guardada debe ser instantánea. El desplazamiento suave se
     pide explícitamente al pulsar en el índice (scrollTo con behavior). */
}
.rf-visor__contenido {
  max-width: 74ch;              /* ancho de línea cómodo: 65–75 caracteres */
  margin: 0 auto;
  padding: 1.75rem 1.75rem 2.5rem;
}

/* Índice lateral fijo en pantallas anchas */
@media (min-width: 1500px) {
  #rf-visor { width: min(72%, 1080px); }
  .rf-visor__cuerpo.rf-con-indice-lateral { display: flex; align-items: flex-start; }
  .rf-visor__indice-lateral {
    position: sticky; top: 0;
    flex: none; width: 220px;
    max-height: 100%; overflow-y: auto;
    padding: 1.75rem .75rem 2rem 1.25rem;
    border-right: 1px solid var(--rf-borde);
  }
  .rf-visor__indice-lateral h2 {
    font-size: var(--rf-t-xs); font-weight: 650;
    letter-spacing: .07em; text-transform: uppercase;
    color: var(--rf-texto-3);
    margin-bottom: .6rem; padding-left: .5rem;
  }
  .rf-visor__indice-lateral ul { list-style: none; }
  .rf-visor__indice-lateral button {
    display: block; width: 100%;
    padding: .3rem .5rem;
    border: 0; border-left: 2px solid var(--rf-borde);
    border-radius: 0 6px 6px 0;
    background: transparent; color: var(--rf-texto-2);
    font-size: var(--rf-t-xs); line-height: 1.4;
    cursor: pointer; text-align: left;
    transition: color var(--rf-transicion), border-color var(--rf-transicion);
  }
  .rf-visor__indice-lateral button:hover { color: var(--rf-texto); }
  .rf-visor__indice-lateral button.rf-activo { color: var(--rf-acento-texto); border-left-color: var(--rf-primario); font-weight: 600; }
  .rf-visor__indice-lateral .rf-nivel-3 button { padding-left: 1.1rem; }
  .rf-visor__cuerpo.rf-con-indice-lateral .rf-visor__contenido { flex: 1; min-width: 0; }
  /* Con índice lateral visible, el desplegable de la cabecera sobra */
  #rf-visor.rf-indice-lateral .rf-visor__indice { display: none; }
}

/* --- Panel de notas ------------------------------------------------------------- */
.rf-visor__notas { flex: none; border-top: 1px solid var(--rf-borde); background: var(--rf-superficie-2); }
.rf-visor__notas-boton {
  display: flex; align-items: center; gap: .55rem;
  width: 100%; min-height: 46px;
  padding: .55rem 1.35rem;
  border: 0; background: transparent;
  color: var(--rf-texto-2);
  font-size: var(--rf-t-sm); font-weight: 550;
  cursor: pointer; text-align: left;
}
.rf-visor__notas-boton:hover { color: var(--rf-texto); }
.rf-visor__notas-boton svg { width: 15px; height: 15px; transition: transform var(--rf-transicion); }
.rf-visor__notas-boton[aria-expanded="true"] svg { transform: rotate(90deg); }
.rf-visor__notas-boton .rf-punto {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rf-primario); flex: none;
}
.rf-visor__notas-estado { margin-left: auto; font-size: var(--rf-t-xs); color: var(--rf-texto-3); }
.rf-visor__notas-cuerpo { padding: 0 1.35rem .9rem; }
.rf-visor__notas-cuerpo[hidden] { display: none; }
.rf-visor__notas-cuerpo textarea {
  width: 100%;
  min-height: 110px;
  max-height: 40vh;
  padding: .7rem .85rem;
  border: 1px solid var(--rf-borde); border-radius: var(--rf-radio-s);
  background: var(--rf-superficie); color: var(--rf-texto);
  font: inherit; font-size: var(--rf-t-base); line-height: 1.5;
  resize: vertical;
}
.rf-visor__notas-cuerpo textarea:focus {
  outline: none; border-color: var(--rf-primario);
  box-shadow: 0 0 0 3px var(--rf-anillo-foco);
}

/* --- Pie fijo -------------------------------------------------------------------- */
.rf-visor__pie {
  flex: none;
  display: flex; align-items: center; gap: .5rem;
  padding: .7rem 1rem calc(.7rem + var(--rf-seguro-inf));
  border-top: 1px solid var(--rf-borde);
  background: var(--rf-superficie);
}
.rf-visor__pie .rf-btn { min-height: 44px; }
.rf-visor__pie-nav {
  flex: none;
  min-width: 44px;
  padding-left: .7rem; padding-right: .7rem;
}
.rf-visor__pie-nav span { display: none; }
.rf-btn-leido { flex: 1; justify-content: center; }
.rf-btn-leido[aria-pressed="true"] {
  background: var(--rf-tinte-14);
  border-color: var(--rf-borde-acento);
  color: var(--rf-acento-texto);
}


/* ==========================================================================
   10 bis. APUNTES — marcas, selección, editor y revisión
   ========================================================================== */

/* --- Marca sobre el texto anotado ------------------------------------------ */
/* Subrayado ámbar discreto: se distingue del resaltado verde de la búsqueda
   y no compite con la lectura. */
.rf-md .rf-apunte-marca {
  background: var(--rf-tinte-14);
  border-bottom: 2px solid var(--rf-borde-acento);
  border-radius: 3px 3px 0 0;
  padding: 0 1px;
  cursor: pointer;
  transition: background var(--rf-transicion);
}
.rf-md .rf-apunte-marca:hover { background: var(--rf-tinte-32); }
.rf-md .rf-apunte-marca[data-estado="aplicado"] {
  background: var(--rf-tinte-22);
  border-bottom-color: var(--rf-primario);
}
.rf-md .rf-apunte-marca--activa {
  background: color-mix(in srgb, var(--rf-primario) 42%, transparent);
  box-shadow: 0 0 0 3px var(--rf-anillo-foco);
}


/* Las notas personales se marcan en azul, para no confundirlas con las
   peticiones de cambio que sí viajan a la IA. */
.rf-md .rf-apunte-marca[data-destino="personal"] {
  background: var(--rf-sec-tinte-12);
  border-bottom-color: var(--rf-sec-borde);
}
.rf-md .rf-apunte-marca[data-destino="personal"]:hover { background: var(--rf-sec-tinte-22); }


/* Botón "+" que aparece junto a cada encabezado del documento */
.rf-md .rf-apunte-encabezado {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px;
  margin-left: .4rem;
  vertical-align: middle;
  border: 1px solid var(--rf-borde);
  border-radius: 50%;
  background: var(--rf-superficie);
  color: var(--rf-texto-3);
  font-size: 15px; line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--rf-transicion), color var(--rf-transicion),
              border-color var(--rf-transicion);
}
.rf-md h2:hover .rf-apunte-encabezado,
.rf-md h3:hover .rf-apunte-encabezado,
.rf-md .rf-apunte-encabezado:focus-visible { opacity: 1; }
.rf-md .rf-apunte-encabezado:hover { color: var(--rf-acento-texto); border-color: var(--rf-primario); }
.rf-md .rf-apunte-encabezado[data-conapuntes="si"] {
  opacity: 1;
  color: #B4720F;
  border-color: var(--rf-borde-acento);
  background: var(--rf-tinte-14);
}
/* En táctil no hay hover: los botones se ven siempre, algo más tenues */
@media (hover: none) {
  .rf-md .rf-apunte-encabezado { opacity: .55; }
}

/* --- Botón flotante al seleccionar texto ------------------------------------ */
.rf-selector-apunte {
  position: fixed; z-index: 1600;
  transform: translate(-50%, -100%);
  animation: rf-selector-entra 140ms ease-out;
}
@keyframes rf-selector-entra {
  from { opacity: 0; transform: translate(-50%, calc(-100% + 6px)); }
  to   { opacity: 1; }
}
.rf-selector-apunte__btn {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 40px; padding: .45rem .85rem;
  border: 0; border-radius: 999px;
  background: var(--rf-primario-fuerte);
  color: var(--rf-texto-boton);
  font-size: var(--rf-t-sm); font-weight: 600;
  box-shadow: var(--rf-sombra-3);
  cursor: pointer;
  white-space: nowrap;
}
.rf-selector-apunte__btn:hover { filter: brightness(1.15); }

/* --- Editor de apunte -------------------------------------------------------- */
.rf-editor-apunte {
  position: fixed; inset: 0; z-index: 1700;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(15,33,51,.45);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rf-editor-apunte[hidden] { display: none; }
.rf-editor-apunte__caja {
  width: min(100%, 520px);
  max-height: 86dvh;
  display: flex; flex-direction: column;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-l);
  background: var(--rf-superficie);
  box-shadow: var(--rf-sombra-3);
  animation: rf-buscador-entra var(--rf-transicion-lenta);
}
.rf-editor-apunte__cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-bottom: .5rem;
}
.rf-editor-apunte__cabecera h2 { font-size: var(--rf-t-lg); }
.rf-editor-apunte__contexto {
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  margin-bottom: .6rem;
}
.rf-editor-apunte__cita {
  margin: 0 0 .85rem;
  padding: .6rem .8rem;
  border-left: 3px solid var(--rf-primario);
  border-radius: 0 var(--rf-radio-s) var(--rf-radio-s) 0;
  background: var(--rf-tinte-8);
  font-size: var(--rf-t-sm); line-height: 1.5;
  color: var(--rf-texto);
  max-height: 7.5em; overflow-y: auto;
}
.rf-editor-apunte__cita[hidden] { display: none; }
/* Selector de destino: para la IA o sólo para mí */
.rf-editor-apunte__destino {
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
  margin-bottom: .75rem;
}
.rf-destino {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .7rem;
  border: 1.5px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie);
  cursor: pointer; text-align: left;
  transition: border-color var(--rf-transicion), background var(--rf-transicion);
}
.rf-destino:hover { border-color: var(--rf-borde-fuerte); }
.rf-destino__icono { font-size: 1.15rem; flex: none; }
.rf-destino__cuerpo { min-width: 0; }
.rf-destino__titulo {
  display: block;
  font-size: var(--rf-t-sm); font-weight: 650; color: var(--rf-texto);
  line-height: 1.25;
}
.rf-destino__pie {
  display: block;
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
}
.rf-destino[aria-checked="true"] {
  border-color: var(--rf-primario);
  background: var(--rf-tinte-8);
}
.rf-destino[aria-checked="true"] .rf-destino__titulo { color: var(--rf-acento-texto); }
.rf-destino[data-destino="personal"][aria-checked="true"] {
  border-color: var(--rf-secundario);
  background: var(--rf-sec-tinte-12);
}
.rf-destino[data-destino="personal"][aria-checked="true"] .rf-destino__titulo { color: var(--rf-secundario-texto); }

.rf-editor-apunte__titulo {
  width: 100%;
  margin-bottom: .55rem;
  padding: .55rem .75rem;
  border: 1px solid var(--rf-borde-fuerte); border-radius: var(--rf-radio-s);
  background: var(--rf-fondo); color: var(--rf-texto);
  font: inherit; font-size: var(--rf-t-base); font-weight: 600;
}
.rf-editor-apunte__titulo:focus {
  outline: none; border-color: var(--rf-primario);
  box-shadow: 0 0 0 3px var(--rf-anillo-foco);
}

.rf-editor-apunte textarea {
  width: 100%;
  min-height: 110px;
  padding: .7rem .85rem;
  border: 1px solid var(--rf-borde-fuerte); border-radius: var(--rf-radio-s);
  background: var(--rf-fondo); color: var(--rf-texto);
  font: inherit; font-size: var(--rf-t-base); line-height: 1.5;
  resize: vertical;
}
.rf-editor-apunte textarea:focus {
  outline: none; border-color: var(--rf-primario);
  box-shadow: 0 0 0 3px var(--rf-anillo-foco);
}
.rf-editor-apunte__acciones {
  display: flex; justify-content: flex-end; gap: .5rem;
  margin-top: .85rem;
}

/* --- Lista de apuntes dentro del visor --------------------------------------- */
.rf-apuntes-contador {
  display: inline-grid; place-items: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--rf-tinte-22);
  color: var(--rf-acento-texto);
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}


.rf-apuntes-lista { display: grid; gap: .5rem; margin-bottom: .7rem; }
.rf-apuntes-lista:empty { margin-bottom: 0; }

.rf-apunte {
  padding: .7rem .85rem;
  border: 1px solid var(--rf-borde);
  border-left: 3px solid var(--rf-primario);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie);
}
.rf-apunte[data-estado="aplicado"]   { border-left-color: var(--rf-exito); opacity: .75; }
.rf-apunte[data-estado="descartado"] { border-left-color: var(--rf-texto-3); opacity: .6; }
.rf-apunte--huerfano { border-left-style: dashed; }

/* Los apuntes personales se distinguen a simple vista de los que van a la IA */
.rf-apunte[data-destino="personal"] { border-left-color: var(--rf-secundario); }
.rf-apunte__destino {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .1rem .4rem;
  border-radius: 999px;
  font-size: 10px; font-weight: 700;
  letter-spacing: .03em; text-transform: uppercase;
}
.rf-apunte__destino--ia       { background: var(--rf-tinte-14);     color: var(--rf-acento-texto); }
.rf-apunte__destino--personal { background: var(--rf-sec-tinte-12); color: var(--rf-secundario-texto); }

.rf-apunte__titulo {
  font-size: var(--rf-t-base); font-weight: 700;
  line-height: 1.35; margin-bottom: .2rem;
  color: var(--rf-texto);
}

/* El apunte entero es pulsable para ir a su sitio en el documento */
.rf-apunte--enlazable { cursor: pointer; transition: border-color var(--rf-transicion), background var(--rf-transicion); }
.rf-apunte--enlazable:hover { border-color: var(--rf-borde-fuerte); background: var(--rf-superficie-2); }
.rf-apunte--enlazable:focus-visible { outline: 2px solid var(--rf-primario); outline-offset: 2px; }

/* --- Paginación --------------------------------------------------------- */
.rf-paginacion {
  display: flex; align-items: center; justify-content: center;
  gap: .35rem; flex-wrap: wrap;
  margin-top: 1rem;
}
.rf-paginacion button {
  min-width: 38px; min-height: 38px;
  padding: .3rem .6rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie);
  color: var(--rf-texto-2);
  font-size: var(--rf-t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--rf-transicion), border-color var(--rf-transicion), color var(--rf-transicion);
}
.rf-paginacion button:hover:not(:disabled) { background: var(--rf-superficie-2); color: var(--rf-texto); }
.rf-paginacion button:disabled { opacity: .4; cursor: not-allowed; }
.rf-paginacion button[aria-current="true"] {
  background: var(--rf-primario-fuerte);
  border-color: transparent;
  color: var(--rf-texto-boton);
}
.rf-paginacion__info {
  width: 100%; text-align: center;
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  margin-top: .35rem;
}

.rf-apunte__cabecera {
  display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
  margin-bottom: .35rem;
}
.rf-apunte__tipo {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--rf-texto-3);
}
.rf-apunte__acciones { margin-left: auto; display: flex; gap: .1rem; }
.rf-apunte__acciones button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 0; border-radius: 7px;
  background: transparent; color: var(--rf-texto-3);
  cursor: pointer;
  transition: background var(--rf-transicion), color var(--rf-transicion);
}
.rf-apunte__acciones button:hover { background: var(--rf-superficie-2); color: var(--rf-texto); }
.rf-apunte__acciones button svg { width: 15px; height: 15px; }

.rf-apunte__cita {
  font-size: var(--rf-t-xs); color: var(--rf-texto-2);
  font-style: italic;
  margin-bottom: .3rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rf-apunte__cita::before { content: "“"; }
.rf-apunte__cita::after  { content: "”"; }
.rf-apunte__comentario {
  font-size: var(--rf-t-base); color: var(--rf-texto);
  line-height: 1.5; white-space: pre-wrap;
}
.rf-apunte__respuesta {
  margin-top: .4rem; padding-top: .4rem;
  border-top: 1px dashed var(--rf-borde);
  font-size: var(--rf-t-xs); color: var(--rf-texto-2);
}
.rf-apunte__respuesta strong { color: var(--rf-acento-texto); }
.rf-apunte__aviso {
  margin-top: .35rem;
  font-size: var(--rf-t-xs); color: var(--rf-aviso);
}

.rf-apuntes-nuevo { margin-bottom: .6rem; }
.rf-apuntes-pista {
  font-size: var(--rf-t-xs); color: var(--rf-texto-3);
  line-height: 1.5;
}

/* --- Diálogo de la revisión devuelta por la IA -------------------------------- */
.rf-revision {
  position: fixed; inset: 0; z-index: 1750;
  display: grid; place-items: center;
  padding: 1rem;
  background: rgba(15,33,51,.5);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}
.rf-revision[hidden] { display: none; }
.rf-revision__caja {
  width: min(100%, 680px);
  max-height: 86dvh;
  display: flex; flex-direction: column;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-l);
  background: var(--rf-superficie);
  box-shadow: var(--rf-sombra-3);
  overflow: hidden;
  animation: rf-buscador-entra var(--rf-transicion-lenta);
}
.rf-revision__cabecera {
  flex: none;
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: 1rem 1rem 1rem 1.35rem;
  border-bottom: 1px solid var(--rf-borde);
}
.rf-revision__cabecera h2 { font-size: var(--rf-t-lg); }
.rf-revision__cuerpo {
  flex: 1; overflow-y: auto;
  padding: 1.15rem 1.35rem;
}
.rf-revision__cuerpo > p { color: var(--rf-texto-2); margin-bottom: 1rem; }
.rf-revision__pie {
  flex: none;
  display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap;
  padding: .85rem 1.35rem;
  border-top: 1px solid var(--rf-borde);
  background: var(--rf-superficie-2);
}
.rf-revision__cifras {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem;
  margin-bottom: 1.25rem;
}
.rf-revision__cifra {
  padding: .75rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie-2);
  text-align: center;
}
.rf-revision__cifra strong {
  display: block;
  font-size: var(--rf-t-2xl); font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--rf-acento-texto);
}
.rf-revision__cifra span { font-size: var(--rf-t-xs); color: var(--rf-texto-2); }

.rf-revision__lista { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.rf-revision__doc {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie);
}
.rf-revision__doc-cuerpo { flex: 1; min-width: 0; }
.rf-revision__doc-titulo {
  font-size: var(--rf-t-base); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rf-revision__doc-meta { font-size: var(--rf-t-xs); color: var(--rf-texto-3); }
.rf-revision__delta {
  flex: none;
  font-size: var(--rf-t-sm); font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.rf-revision__delta--mas   { color: var(--rf-acento-texto); }
.rf-revision__delta--menos { color: var(--rf-error); }
.rf-revision__delta--igual { color: var(--rf-texto-3); }

.rf-revision__pasos {
  padding: 1rem 1.15rem;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie-2);
}
.rf-revision__pasos ol { padding-left: 1.35rem; }
.rf-revision__pasos li { margin-bottom: .6rem; font-size: var(--rf-t-base); }
.rf-revision__pasos code {
  display: inline-block;
  padding: .15rem .4rem;
  border: 1px solid var(--rf-borde); border-radius: 5px;
  background: var(--rf-superficie);
  font-family: var(--rf-fuente-mono); font-size: var(--rf-t-xs);
}

/* --- Banda de "estás viendo una revisión sin publicar" ------------------------- */
.rf-banda-revision {
  position: fixed; z-index: 1300;
  left: 50%; transform: translateX(-50%);
  bottom: calc(1rem + var(--rf-seguro-inf));
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  justify-content: center;
  width: min(94vw, 620px);
  padding: .6rem .9rem;
  border-radius: 999px;
  background: var(--rf-oscuro);
  color: #F2F7FA;
  font-size: var(--rf-t-sm);
  box-shadow: var(--rf-sombra-3);
}
.rf-banda-revision[hidden] { display: none; }
.rf-banda-revision__btn {
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  padding: .25rem .7rem;
  background: rgba(255,255,255,.1);
  color: inherit;
  font-size: var(--rf-t-xs); font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.rf-banda-revision__btn:hover { background: rgba(255,255,255,.2); }
.rf-banda-revision__btn--sutil { background: transparent; border-color: transparent; opacity: .8; }
body.rf-visor-abierto .rf-banda-revision { display: none; }

@media (max-width: 767px) {
  .rf-banda-revision { bottom: calc(.75rem + var(--rf-pestanas) + var(--rf-seguro-inf)); }
  .rf-revision__cifras { grid-template-columns: 1fr; }
  .rf-revision__caja, .rf-editor-apunte__caja { max-height: 92dvh; }
}


/* ==========================================================================
   11. TIPOGRAFÍA DEL MARKDOWN RENDERIZADO
   ========================================================================== */

.rf-md {
  font-size: var(--rf-lectura);
  line-height: 1.68;
  color: var(--rf-texto);
  overflow-wrap: break-word;
}

.rf-md > *:first-child { margin-top: 0; }
.rf-md > *:last-child { margin-bottom: 0; }

.rf-md h1, .rf-md h2, .rf-md h3, .rf-md h4, .rf-md h5, .rf-md h6 {
  font-family: var(--rf-fuente-marca);
  line-height: 1.25;
  scroll-margin-top: 1.25rem;
}
.rf-md h1 {
  font-size: 1.7em; font-weight: 700;
  margin: 0 0 1rem;
  padding-bottom: .6rem;
  border-bottom: 2px solid var(--rf-primario);
  letter-spacing: -.02em;
}
.rf-md h2 {
  font-size: 1.3em; font-weight: 680;
  margin: 2.1em 0 .7em;
  padding-top: .5em;
  border-top: 1px solid var(--rf-borde);
}
.rf-md h3 { font-size: 1.1em; font-weight: 650; margin: 1.7em 0 .55em; color: var(--rf-texto); }
.rf-md h4 { font-size: 1em; font-weight: 650; margin: 1.4em 0 .45em; color: var(--rf-texto-2); }

/* H1 que sólo repite el título ya visible en la cabecera del panel.
   Se retira de la vista pero se conserva para lectores de pantalla. */
.rf-md h1.rf-md-titulo-duplicado {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Sin el H1 visible, lo que le sigue pasa a ser el comienzo del texto:
   se le quitan el margen, el filete y el relleno superiores. */
.rf-md h1.rf-md-titulo-duplicado + * { margin-top: 0; }
.rf-md h1.rf-md-titulo-duplicado + h2 { padding-top: 0; border-top: 0; }

.rf-md p { margin: 0 0 1.05em; }

.rf-md strong { font-weight: 680; color: var(--rf-texto); }
.rf-md em { font-style: italic; }
.rf-md del { color: var(--rf-texto-3); }

.rf-md a { color: var(--rf-enlace); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.rf-md a:hover { color: var(--rf-enlace-hover); }
.rf-md a.md-enlace-documento { font-weight: 600; }
.rf-md a.md-enlace-documento::after { content: " ↗"; font-size: .85em; opacity: .65; text-decoration: none; }
.rf-md a.md-enlace-externo::after { content: " ↗"; font-size: .8em; opacity: .55; }

/* Listas */
.rf-md ul, .rf-md ol { margin: 0 0 1.05em; padding-left: 1.5em; }
.rf-md li { margin-bottom: .4em; }
.rf-md li > ul, .rf-md li > ol { margin: .4em 0 0; }
.rf-md ul { list-style: disc; }
.rf-md ul ul { list-style: circle; }
.rf-md ol { list-style: decimal; }
.rf-md li::marker { color: var(--rf-texto-3); }

/* Listas de tareas */
.rf-md li.md-tarea { list-style: none; margin-left: -1.5em; padding-left: 1.5em; position: relative; }
.rf-md li.md-tarea input[type="checkbox"] {
  position: absolute; left: 0; top: .35em;
  width: 15px; height: 15px;
  accent-color: var(--rf-primario);
  margin: 0;
}

/* Citas */
.rf-md blockquote {
  margin: 1.35em 0;
  padding: .9em 1.15em;
  border-left: 3px solid var(--rf-primario);
  border-radius: 0 var(--rf-radio-s) var(--rf-radio-s) 0;
  background: var(--rf-primario-suave);
  color: var(--rf-texto);
}
.rf-md blockquote > *:last-child { margin-bottom: 0; }
.rf-md blockquote p { margin-bottom: .6em; }

/* Separadores */
.rf-md hr {
  height: 1px; border: 0; margin: 2em 0;
  background: var(--rf-borde);
}

/* --- Tablas GFM ---------------------------------------------------------------- */
.md-tabla {
  margin: 1.4em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie);
}
.md-tabla::-webkit-scrollbar { height: 8px; }
.md-tabla::-webkit-scrollbar-thumb { background: var(--rf-borde-fuerte); border-radius: 4px; }
.rf-md table {
  width: 100%;
  border-collapse: collapse;
  font-size: .92em;
  line-height: 1.5;
}
.rf-md th, .rf-md td {
  padding: .6em .85em;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rf-borde);
  border-right: 1px solid var(--rf-borde);
}
.rf-md th:last-child, .rf-md td:last-child { border-right: 0; }
.rf-md thead th {
  background: var(--rf-superficie-2);
  font-weight: 650;
  white-space: nowrap;
  position: sticky; top: 0;
}
.rf-md tbody tr:last-child td { border-bottom: 0; }
.rf-md tbody tr:nth-child(even) { background: color-mix(in srgb, var(--rf-superficie-2) 45%, transparent); }

/* --- Código y diagramas ASCII ---------------------------------------------------- */
/* Los diagramas de la documentación son críticos: fuente monoespaciada,
   sin ajuste de línea y con scroll horizontal cuando haga falta, para que
   nunca se desalineen. */
.rf-md pre.md-pre {
  margin: 1.4em 0;
  padding: 1em 1.1em;
  border: 1px solid var(--rf-borde);
  border-radius: var(--rf-radio-s);
  background: var(--rf-superficie-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rf-md pre.md-pre::-webkit-scrollbar { height: 8px; }
.rf-md pre.md-pre::-webkit-scrollbar-thumb { background: var(--rf-borde-fuerte); border-radius: 4px; }
.rf-md pre.md-pre code {
  display: block;
  font-family: var(--rf-fuente-mono);
  font-size: .84em;
  line-height: 1.5;
  white-space: pre;            /* nunca ajustar: rompería los diagramas */
  tab-size: 4;
  background: none; padding: 0; border: 0;
  color: var(--rf-texto);
}
/* Diagramas ASCII (bloques sin lenguaje): algo más compactos y con
   variante numérica tabular para que las columnas cuadren. */
.rf-md pre.md-diagrama {
  background: var(--rf-oscuro);
  border-color: transparent;
}
.rf-md pre.md-diagrama code {
  color: #D7E4EE;
  font-size: .8em;
  line-height: 1.42;
  font-variant-ligatures: none;
  font-variant-numeric: tabular-nums;
}
html[data-tema="oscuro"] .rf-md pre.md-diagrama { background: #081420; border-color: var(--rf-borde); }

.rf-md :not(pre) > code {
  padding: .12em .38em;
  border: 1px solid var(--rf-borde);
  border-radius: 5px;
  background: var(--rf-superficie-2);
  font-family: var(--rf-fuente-mono);
  font-size: .855em;
  color: var(--rf-acento-texto);
  overflow-wrap: break-word;
}

.rf-md img.md-imagen {
  max-width: 100%; height: auto;
  border-radius: var(--rf-radio-s);
  margin: 1.2em 0;
}


/* ==========================================================================
   12. ESTADOS: CARGA, ERROR, VACÍO, AVISOS
   ========================================================================== */

/* --- Esqueleto de carga ---------------------------------------------------- */
.rf-esqueleto {
  border-radius: 8px;
  background: var(--rf-superficie-3);
  animation: rf-latido 1.4s ease-in-out infinite;
}
@keyframes rf-latido { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
.rf-esqueleto-doc { padding: 1.75rem; display: grid; gap: .85rem; }
.rf-esqueleto-doc .rf-esqueleto:nth-child(1) { height: 30px; width: 62%; }
.rf-esqueleto-doc .rf-esqueleto:nth-child(2) { height: 14px; width: 100%; }
.rf-esqueleto-doc .rf-esqueleto:nth-child(3) { height: 14px; width: 94%; }
.rf-esqueleto-doc .rf-esqueleto:nth-child(4) { height: 14px; width: 88%; }
.rf-esqueleto-doc .rf-esqueleto:nth-child(5) { height: 110px; width: 100%; margin-top: .6rem; }
.rf-esqueleto-doc .rf-esqueleto:nth-child(6) { height: 14px; width: 97%; }
.rf-esqueleto-doc .rf-esqueleto:nth-child(7) { height: 14px; width: 72%; }

/* --- Error ------------------------------------------------------------------- */
.rf-error {
  margin: 1.5rem;
  padding: 1.35rem 1.5rem;
  border: 1px solid var(--rf-error);
  border-radius: var(--rf-radio);
  background: var(--rf-error-fondo);
}
.rf-error h3 { font-size: var(--rf-t-md); color: var(--rf-error); margin-bottom: .5rem; }
.rf-error p { font-size: var(--rf-t-base); color: var(--rf-texto-2); margin-bottom: .75rem; }
.rf-error code {
  display: block;
  padding: .5rem .7rem; margin-bottom: 1rem;
  border-radius: 6px;
  background: var(--rf-superficie);
  border: 1px solid var(--rf-borde);
  font-family: var(--rf-fuente-mono); font-size: var(--rf-t-xs);
  overflow-wrap: break-word;
}

/* --- Vacío -------------------------------------------------------------------- */
.rf-vacio {
  padding: 3rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--rf-borde-fuerte);
  border-radius: var(--rf-radio);
  background: var(--rf-superficie);
}
.rf-vacio__icono { font-size: 2rem; margin-bottom: .6rem; opacity: .6; }
.rf-vacio h3 { font-size: var(--rf-t-md); margin-bottom: .4rem; }
.rf-vacio p { font-size: var(--rf-t-base); color: var(--rf-texto-2); max-width: 46ch; margin: 0 auto; }

/* --- Aviso de protocolo file:// ------------------------------------------------ */
.rf-banda-aviso {
  padding: .7rem 1rem;
  background: #FFF6E0;
  border-bottom: 1px solid #E8C979;
  color: #6B4A00;
  font-size: var(--rf-t-sm);
  text-align: center;
}
html[data-tema="oscuro"] .rf-banda-aviso { background: #3A2E10; border-color: #6B5620; color: #F2D89A; }
.rf-banda-aviso code {
  padding: .1rem .35rem; border-radius: 4px;
  background: rgba(0,0,0,.08);
  font-family: var(--rf-fuente-mono); font-size: .95em;
}


/* ==========================================================================
   13. ADAPTACIÓN POR DISPOSITIVO
   ========================================================================== */

/* --- Escritorio: la barra lateral es fija, así que sobran los botones
       de abrir (☰) y cerrar (✕) el menú. --------------------------------- */
@media (min-width: 1024px) {
  #rf-abrir-lateral, #rf-cerrar-lateral { display: none; }
  .rf-cabecera { padding-left: 1.5rem; }
}

/* --- iPad vertical y pantallas medias: lateral colapsable, 2 columnas ------- */
@media (max-width: 1100px) {
  .rf-rejilla-secciones { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1023px) {
  .rf-lateral { transform: translateX(-100%); box-shadow: var(--rf-sombra-3); }
  body.rf-lateral-abierta .rf-lateral { transform: none; }
  .rf-principal { margin-left: 0; }
  .rf-vista { padding: 1.35rem 1.15rem calc(2.5rem + var(--rf-seguro-inf)); }

  /* El offcanvas sube desde abajo, como una hoja nativa */
  #rf-visor {
    inset: auto 0 0 0;
    width: 100%;
    height: 92dvh;
    max-height: 92dvh;
    border-radius: var(--rf-radio-xl) var(--rf-radio-xl) 0 0;
    transform: translateY(100%);
    box-shadow: 0 -12px 44px rgba(15,33,51,.22);
    overflow: hidden;
  }
  body.rf-visor-abierto #rf-visor { transform: none; }

  .rf-visor__tirador {
    display: flex; align-items: center; justify-content: center;
    flex: none;
    height: 22px;
    cursor: grab;
    touch-action: none;
  }
  .rf-visor__tirador::before {
    content: "";
    width: 42px; height: 5px;
    border-radius: 999px;
    background: var(--rf-borde-fuerte);
  }
  .rf-visor__tirador:active { cursor: grabbing; }
  .rf-visor__cabecera { padding-top: .25rem; }
  .rf-visor__contenido { padding: 1.35rem 1.25rem 2rem; }
  #rf-visor.rf-arrastrando { transition: none; }
}

/* --- Móvil: pestañas inferiores, una columna --------------------------------- */
@media (max-width: 767px) {
  :root { --rf-cabecera: 56px; }

  .rf-cabecera { padding-left: .75rem; padding-right: .75rem; }
  .rf-buscador-lanzador { display: none; }
  .rf-pestanas { display: block; }
  .rf-principal { padding-bottom: calc(var(--rf-pestanas) + var(--rf-seguro-inf)); }
  .rf-vista { padding: 1.1rem 1rem calc(1.5rem + var(--rf-pestanas) + var(--rf-seguro-inf)); }

  .rf-rejilla-secciones { grid-template-columns: 1fr; }
  .rf-lista-docs--tarjetas { grid-template-columns: 1fr; }

  .rf-portada { padding: 1.25rem 1.15rem; border-radius: var(--rf-radio); }
  .rf-portada h1 { font-size: var(--rf-t-xl); }
  .rf-cabecera-seccion { padding: 1.15rem 1.1rem; border-radius: var(--rf-radio); gap: .85rem; }
  .rf-cabecera-seccion h1 { font-size: var(--rf-t-xl); }
  .rf-cabecera-seccion__emblema { width: 44px; height: 44px; font-size: 1.3rem; }

  .rf-continuar { padding: 1rem; border-radius: var(--rf-radio); }
  .rf-mini-tarjeta { flex-basis: 78vw; }

  .rf-controles { gap: .5rem; }
  .rf-segmentos { width: 100%; }
  .rf-segmentos button { flex: 1; }

  /* Los avisos flotantes se colocan por encima de las pestañas inferiores */
  #rf-avisos { bottom: calc(1rem + var(--rf-pestanas) + var(--rf-seguro-inf)); }
  body.rf-visor-abierto #rf-avisos { bottom: calc(1rem + var(--rf-seguro-inf)); }

  #rf-buscador { padding: 0; }
  .rf-buscador__caja {
    width: 100%; height: 100dvh; max-height: 100dvh;
    border-radius: 0; border: 0;
    padding-top: var(--rf-seguro-sup);
  }
  .rf-buscador__pie { padding-bottom: calc(.55rem + var(--rf-seguro-inf)); }

  /* En móvil el nombre de la sección va DEBAJO del título, no al lado:
     así el título usa todo el ancho y no se parte en dos columnas. */
  .rf-resultado__titulo { flex-direction: column; align-items: flex-start; gap: .15rem; }
  .rf-resultado__ruta { max-width: 100%; }

  .rf-editor-apunte__destino { grid-template-columns: 1fr; }

  .rf-visor__titulo { font-size: var(--rf-t-lg); }
  .rf-visor__cabecera { padding-left: 1.1rem; padding-right: .6rem; }
  .rf-visor__indice-boton, .rf-visor__notas-boton { padding-left: 1.1rem; }
  .rf-visor__notas-cuerpo { padding-left: 1.1rem; padding-right: 1.1rem; }
  .rf-visor__pie { padding-left: .75rem; padding-right: .75rem; }

  .rf-tabla-progreso th, .rf-tabla-progreso td { padding: .6rem .7rem; font-size: var(--rf-t-sm); }
}

/* En pantallas anchas el pie del visor puede mostrar las palabras */
@media (min-width: 480px) {
  .rf-visor__pie-nav span { display: inline; }
}


/* ==========================================================================
   14. IMPRESIÓN — sólo el documento abierto
   ========================================================================== */

@media print {
  body { background: #fff; }
  .rf-lateral, .rf-cabecera, .rf-pestanas, #rf-buscador, #rf-velo-visor,
  .rf-velo-lateral, #rf-avisos, .rf-visor__pie, .rf-visor__notas,
  .rf-visor__acciones, .rf-visor__indice, .rf-visor__progreso,
  .rf-visor__tirador, .rf-visor__volver, .rf-banda-aviso { display: none !important; }

  .rf-principal { margin: 0 !important; padding: 0 !important; }
  .rf-vista { display: none !important; }

  #rf-velo-visor { display: none !important; }
  #rf-visor {
    position: static !important;
    width: auto !important; height: auto !important; max-height: none !important;
    transform: none !important;
    box-shadow: none !important; border-radius: 0 !important;
    display: block !important;
  }
  .rf-visor__cabecera { border: 0; padding: 0 0 1rem; }
  .rf-visor__cuerpo { overflow: visible !important; height: auto !important; display: block !important; }
  .rf-visor__indice-lateral { display: none !important; }
  .rf-visor__contenido { max-width: none; padding: 0; }

  .rf-md { font-size: 11pt; color: #000; }
  .rf-md pre.md-pre, .md-tabla { break-inside: avoid; }
  .rf-md pre.md-diagrama { background: #F4F4F4 !important; }
  .rf-md pre.md-diagrama code { color: #111 !important; }
  .rf-md h2, .rf-md h3 { break-after: avoid; }
  .rf-md a { color: #000; text-decoration: underline; }
}