/* ---- F14 §46: guía de primeros pasos ---------------------------------------------------------
   Reescrita tras verla en pantalla: con los cinco pasos abiertos crecía más que la ventana y se
   salía por arriba y por abajo, y encima tapaba el botón que estaba señalando. Dos reglas nuevas:
   la tarjeta NUNCA es más alta que la ventana —el cuerpo hace scroll dentro—, y cuando el foco
   apunta a algo que queda debajo de ella, la tarjeta se encoge sola. */
.guia{position:fixed;right:16px;bottom:16px;width:310px;max-width:calc(100vw - 32px);
  max-height:min(66vh,520px);display:flex;flex-direction:column;
  background:var(--card,#171a21);border:1px solid var(--border,#272c38);border-radius:13px;
  box-shadow:0 10px 34px rgba(0,0,0,.45);z-index:38;font-size:13px;overflow:hidden}
.guia-cab{display:flex;align-items:center;gap:8px;padding:10px 12px;flex:0 0 auto;
  border-bottom:1px solid var(--border,#272c38)}
.guia-cab strong{flex:1;font-size:13px}
.guia-x{background:none;border:0;color:var(--muted,#8b93a7);cursor:pointer;font-size:18px;
  line-height:1;padding:0 5px;border-radius:6px}
.guia-x:hover{color:var(--fg,#e7eaf0);background:rgba(255,255,255,.06)}
/* El cuerpo es lo único que crece, y hace scroll. Sin esto la tarjeta se salía de la pantalla. */
#guia-cuerpo{flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain}
.guia-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;
  flex:0 0 auto;border-top:1px solid var(--border,#272c38);background:rgba(255,255,255,.02)}
.guia-paso{padding:10px 12px;border-bottom:1px solid var(--border,#272c38)}
.guia-paso:last-child{border-bottom:0}
.guia-paso .t{display:flex;gap:7px;align-items:baseline}
/* El estado lleva símbolo además de color: quien no distinga los colores sigue viéndolo. */
.guia-paso .marca{flex:0 0 auto;width:14px;text-align:center;font-weight:700}
.guia-paso.ok .marca{color:var(--ok,#3fb950)}
.guia-paso.ahora{background:rgba(79,140,255,.07)}
.guia-paso.ahora .marca{color:var(--accent,#4f8cff)}
.guia-paso.pend .marca{color:var(--muted,#8b93a7)}
.guia-paso .que{margin:4px 0 0 21px;color:var(--muted,#8b93a7);line-height:1.45}
.guia-paso .porque{margin:4px 0 0 21px;color:var(--muted,#8b93a7);line-height:1.45;opacity:.8;font-size:12px}
.guia-paso .ev{margin:4px 0 0 21px;font-size:11px;color:var(--muted,#8b93a7);opacity:.7;line-height:1.4}
.guia-paso .ir{margin:6px 0 0 21px;display:inline-block}
/* Encogida: solo la cabecera, para no tapar lo que se está señalando. */
.guia.min{max-height:none}
.guia.min #guia-cuerpo,.guia.min .guia-pie{display:none}
/* Y si ENCOGIDA sigue tapándolo —porque lo señalado está en su misma esquina— se aparta al otro
   lado. Encoger no basta: se comprobó con el botón de Hermes, que está justo donde vive la
   tarjeta, y la cabecera reducida seguía encima. */
.guia.aparta{left:16px;right:auto}
@media (max-width:560px){.guia.aparta{left:8px;right:8px}}
.guia-reabrir{position:fixed;right:16px;bottom:16px;z-index:38;border-radius:20px;padding:8px 14px;
  font-size:12px;background:var(--card,#171a21);border:1px solid var(--border,#272c38);
  color:var(--fg,#e7eaf0);cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.32)}
@media (max-width:560px){.guia{right:8px;left:8px;bottom:8px;width:auto;max-height:52vh}}

/* ---- el foco --------------------------------------------------------------------------------
   `fixed` y coordenadas de ventana, sin sumar scroll a mano: la versión anterior mezclaba
   `absolute` con offsets y bastaba un contenedor con scroll propio para que el recuadro señalara
   otra cosa. */
.foco{position:fixed;z-index:44;border:2px solid var(--accent,#4f8cff);border-radius:9px;
  box-shadow:0 0 0 3px rgba(79,140,255,.25),0 0 0 9999px rgba(0,0,0,.35);
  pointer-events:none;transition:top .16s,left .16s,width .16s,height .16s}
.foco-burbuja{position:fixed;z-index:45;width:250px;max-width:calc(100vw - 24px);padding:9px 12px;
  font-size:12.5px;line-height:1.45;background:var(--panel);color:var(--text);
  border:1px solid var(--accent);border-radius:9px;box-shadow:0 6px 22px rgba(0,0,0,.45)}
/* La burbuja va sobre la superficie de PANEL, no sobre el acento, y esto no es estético.
   Primera versión: `color:#fff` sobre `var(--accent)`. En este tema `--accent` es #ffffff, así
   que era una caja blanca y vacía — se dibujaba y no se leía nada. Segunda: `var(--accent-fg)`,
   que arregla los dos temas base… pero medir los acentos alternativos dio 4.33 en verde y 3.69 en
   naranja, por debajo del mínimo legible, y esto es texto pequeño.
   El acento se queda donde no hay que leer: el borde y el recuadro. El texto va sobre una
   superficie hecha para texto, y así la legibilidad no depende del color que alguien elija. */
/* El enlace también sobre `--text`: en el acento verde daba 4.14, por debajo del mínimo. El
   subrayado ya lo identifica como enlace sin necesidad de color — y depender del color para eso
   deja fuera a quien no lo distinga. */
.foco-burbuja .cerrar{display:block;margin-top:6px;font-size:11px;opacity:.9;
  background:none;border:0;color:var(--text);cursor:pointer;padding:0;text-decoration:underline}
@media (prefers-reduced-motion: reduce){.foco{transition:none}}

/* F14: tarjetas del menú de infraestructura */
.infra-card{display:block;padding:11px 13px;margin:8px 0;border:1px solid var(--border,#272c38);
  border-radius:10px;text-decoration:none;color:inherit}
.infra-card:hover{border-color:var(--accent,#4f8cff)}
.infra-card strong{display:block;font-size:14px;margin-bottom:3px}
.infra-card span{display:block;font-size:12.5px;line-height:1.45}

/* ---- rueda de progreso de una subida (F17, panel clásico) -------------------------------------
   El texto quieto no distingue una subida lenta de una colgada. Esto mide de verdad: la fracción
   sale de `upload.onprogress`. Sin arco y girando cuando el navegador no publica el total —no se
   finge un porcentaje. */
.adj-anillo { width: 18px; height: 18px; flex: 0 0 auto; }
.adj-anillo-pista,
.adj-anillo-arco { fill: none; stroke-width: 2; }
.adj-anillo-pista { stroke: var(--border, rgba(127,127,127,.28)); }
.adj-anillo-arco {
  stroke: var(--accent, #4f8cff);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset .18s linear;
}
.adj-anillo[data-indeterminado] { animation: adj-girar 1s linear infinite; }
.adj-anillo[data-indeterminado] .adj-anillo-arco { transition: none; }
@keyframes adj-girar { to { transform: rotate(360deg); } }
.hermes-att-fase { font-size: 11px; opacity: .7; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .adj-anillo[data-indeterminado] { animation: none; }
  .adj-anillo-arco { transition: none; }
}