/* Actualizaciones automáticas (D-236): franja discreta "Hay una versión nueva" y, después, "Se actualizó". */
.franja-actualizacion {
  display: flex; align-items: center; gap: .6rem; padding: .5rem 1rem; font-size: .86rem;
  background: var(--info-suave, color-mix(in srgb, var(--acento, #3b6) 9%, transparent));
  color: var(--texto); border-bottom: 1px solid color-mix(in srgb, var(--texto) 10%, transparent);
}
.franja-actualizacion[hidden] { display: none; }
.franja-actualizacion .icono { flex: none; color: var(--acento, currentColor); }
.franja-actualizacion .fa-texto { min-width: 0; flex: 1; }
.franja-actualizacion .fa-texto strong { font-weight: 700; margin-right: .3rem; }
.franja-actualizacion .fa-boton {
  flex: none; border: 0; border-radius: 8px; padding: .3rem .8rem; font: inherit; font-weight: 650; cursor: pointer;
  background: color-mix(in srgb, var(--texto) 9%, transparent); color: inherit;
}
.franja-actualizacion .fa-boton:hover { background: color-mix(in srgb, var(--texto) 15%, transparent); }
.franja-actualizacion .fa-boton:focus-visible { outline: 2px solid var(--acento, currentColor); outline-offset: 2px; }
.franja-actualizacion .fa-boton:disabled { opacity: .55; cursor: default; }
.franja-actualizacion.lista { background: var(--ok-suave); }
.franja-actualizacion.lista .icono { color: var(--ok); }
@media (max-width: 640px) { .franja-actualizacion { font-size: .82rem; padding: .45rem .85rem; } }